Enhanced boot page

- Follow theme colors - Include array messages
2026-01-08 02:29:51 -06:00 · 2023-11-25 12:10:27 +01:00
parent 13db045dd2
commit e7406a997b
2 changed files with 128 additions and 34 deletions
--- a/emhttp/plugins/dynamix/include/Boot.php
+++ b/emhttp/plugins/dynamix/include/Boot.php
@@ -31,44 +31,131 @@ $var = parse_ini_file("/var/local/emhttp/var.ini");
 <meta name="viewport" content="width=1300">
 <meta name="robots" content="noindex, nofollow">
 <meta name="referrer" content="same-origin">
-<link type="text/css" rel="stylesheet" href="<?autov('/webGui/styles/default-fonts.css')?>">
-<meta name="referrer" content="same-origin">
+<link type="image/png" rel="shortcut icon" href="/webGui/images/<?=_var($var,'mdColor','red-on')?>.png">
+<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/default-fonts.css")?>">
+<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/default-{$display['theme']}.css")?>">
+
 <style>
-html{font-family:clear-sans;font-size:62.5%;height:100%}
-body{font-size:1.3rem;color:#1c1c1c;background:#f2f2f2;padding:0;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
-div.notice{background-color:#FFF6BF;text-align:center;height:80px;line-height:80px;border-top:2px solid #FFD324;border-bottom:2px solid #FFD324;font-size:1.8rem;}
-span.title{font-size:2.8rem;text-transform:uppercase;display:block;}
+.notice{background-image:none;color:#e68a00;font-size:6rem;text-transform:uppercase;text-align:center;padding:4rem 0}
+#system,#array{margin:6rem 0;text-align:center;font-size:3rem}
 </style>
+
 <script src="<?autov('/webGui/javascript/dynamix.js')?>"></script>
+<script src="<?autov('/webGui/javascript/translate.'.($locale?:'en_US').'.js')?>"></script>
 <script>
+/*
+ * If we have a sessionStorage item for hiding the UPC's 'lets unleash your hardware' overlay for ENOKEYFILE state users
+ * this will remove the item so that if the user reboots their server the overlay will display again once the server comes back up.
+*/
+const serverName = '<?=_var($var,'NAME')?>';
+const guid = '<?=_var($var,'flashGUID')?>';
+sessionStorage.removeItem(`${serverName}_${guid ? guid.slice(-12) : 'NO_GUID'}`);
+
 var start = new Date();

+var boot = new NchanSubscriber('/sub/var',{subscriber:'websocket'});
+boot.on('message', function(msg) {
+  var ini = parseINI(msg);
+  switch (ini['fsState']) {
+    case 'Stopped'   : var status = "<span class='red'><i class='fa fa-stop-circle'></i> <?=_('Array Stopped')?></span>"; break;
+    case 'Started'   : var status = "<span class='green'><i class='fa fa-play-circle'></i> <?=_('Array Started')?></span>"; break;
+    case 'Formatting': var status = "<span class='green'><i class='fa fa-play-circle'></i> <?=_('Array Started')?></span>&bullet;<span class='orange tour'><?=_('Formatting device(s)')?></span>"; break;
+    default          : var status = "<span class='orange'><i class='fa fa-pause-circle'></i> "+_('Array '+ini['fsState'])+"</span>";
+  }
+  if (ini['mdResyncPos'] > 0) {
+    var resync = ini['mdResyncAction'].split(/\s+/);
+    switch (resync[0]) {
+      case 'recon': var action = resync[1]=='P' ? "<?=_('Parity-Sync')?>" : "<?=_('Data-Rebuild')?>"; break;
+      case 'check': var action = resync.length>1 ? "<?=_('Parity-Check')?>" : "<?=_('Read-Check')?>"; break;
+      case 'clear': var action = "<?=_('Disk-Clear')?>"; break;
+      default     : var action = '';
+    }
+    action += " "+(ini['mdResyncPos']/(ini['mdResyncSize']/100+1)).toFixed(1)+" %";
+    status += "&bullet;<span class='orange tour'>"+action.replace('.','<?=_var($display,'number','.,')[0]?>');
+    if (ini['mdResyncDt']==0) status += " &bullet; <?=_('Paused')?>";
+    status += "</span>";
+  }
+  if (ini['fsProgress']) status += "&bullet;<span class='blue tour'>"+_(ini['fsProgress'])+"</span>";
+  $('#array').html(status);
+});
+
+function parseINI(msg) {
+  var regex = {
+    section: /^\s*\[\s*\"*([^\]]*)\s*\"*\]\s*$/,
+    param: /^\s*([^=]+?)\s*=\s*\"*(.*?)\s*\"*$/,
+    comment: /^\s*;.*$/
+  };
+  var value = {};
+  var lines = msg.split(/[\r\n]+/);
+  var section = null;
+  lines.forEach(function(line) {
+    if (regex.comment.test(line)) {
+      return;
+    } else if (regex.param.test(line)) {
+      var match = line.match(regex.param);
+      if (section) {
+        value[section][match[1]] = match[2];
+      } else {
+        value[match[1]] = match[2];
+      }
+    } else if (regex.section.test(line)) {
+      var match = line.match(regex.section);
+      value[match[1]] = {};
+      section = match[1];
+    } else if (line.length==0 && section) {
+      section = null;
+    };
+  });
+  return value;
+}
 function timer() {
  var now = new Date();
  return Math.round((now.getTime()-start.getTime())/1000);
 }
+function reboot_now() {
+  boot.start();
+  reboot_online();
+}
+function shutdown_now() {
+  boot.start();
+  shutdown_online();
+}
 function reboot_online() {
  $.ajax({url:'/webGui/include/ProcessStatus.php',type:'POST',data:{name:'emhttpd',update:true},timeout:5000})
-   .done(function(){$('div.notice').html('<span class="title"><?=_("Reboot")?></span><?=_("System is going down")?>... '+timer()); setTimeout(reboot_online,5000);})
+   .done(function(){
+     $('.notice').html("<?=_("Reboot")?>");
+     $('#system').html("<?=_("System is going down")?>... "+timer());
+     setTimeout(reboot_online,5000);
+   })
   .fail(function(){start=new Date(); setTimeout(reboot_offline,5000);});
 }
 function reboot_offline() {
  $.ajax({url:'/webGui/include/ProcessStatus.php',type:'POST',data:{name:'emhttpd',update:true},timeout:5000})
   .done(function(){location = '/Main';})
-   .fail(function(){$('div.notice').html('<span class="title"><?=_("Reboot")?></span><?=_("System is rebooting")?>... '+timer()); setTimeout(reboot_offline,1000);});
+   .fail(function(){
+     $('.notice').html("<?=_("Reboot")?>");
+     $('#system').html("<?=_("System is rebooting")?>... "+timer());
+     setTimeout(reboot_offline,1000);
+   });
 }
 function shutdown_online() {
  $.ajax({url:'/webGui/include/ProcessStatus.php',type:'POST',data:{name:'emhttpd',update:true},timeout:5000})
-   .done(function(){$('div.notice').html('<span class="title"><?=_("Shutdown")?></span><?=_("System is going down")?>... '+timer()); setTimeout(shutdown_online,5000);})
+   .done(function(){
+     $('.notice').html("<?=_("Shutdown")?>");
+     $('#system').html("<?=_("System is going down")?>... "+timer());
+     setTimeout(shutdown_online,5000);
+   })
   .fail(function(){start=new Date(); setTimeout(shutdown_offline,5000);});
 }
 function shutdown_offline() {
  var time = timer();
  if (time < 30) {
-    $('div.notice').html('<span class="title"><?=_("Shutdown")?></span><?=_("System is offline")?>... '+time);
+    $('.notice').html("<?=_("Shutdown")?>");
+    $('#system').html("<?=_("System is offline")?>... "+time);
    setTimeout(shutdown_offline,5000);
  } else {
-    $('div.notice').html('<span class="title"><?=_("Shutdown")?></span><?=_("System is powered off")?>...');
+    $('.notice').html("<?=_("Shutdown")?>");
+    $('#system').html("<?=_("System is powered off")?>... "+time);
    setTimeout(power_on,1000);
  }
 }
@@ -83,31 +170,38 @@ $(document).ajaxSend(function(elm, xhr, s){
    s.data += "csrf_token=<?=_var($var,'csrf_token')?>";
  }
 });
-/**
- * If we have a sessionStorage item for hiding the UPC's 'lets unleash your hardware' overlay for ENOKEYFILE state users
- * this will remove the item so that if the user reboots their server the overlay will display again once the server comes back up.
- */
-const serverName = '<?=_var($var,'NAME')?>';
-const guid = '<?=_var($var,'flashGUID')?>';
-sessionStorage.removeItem(`${serverName}_${guid ? guid.slice(-12) : 'NO_GUID'}`);
 </script>
 </head>
 <?
 $safemode = '/boot/unraidsafemode';
-switch (_var($_POST,'cmd')) {
-  case 'reboot':
-    if (isset($_POST['safemode'])) touch($safemode); else @unlink($safemode);
-    exec('/sbin/reboot -n');?>
-    <body onload="reboot_online()"><div class='notice'></div></body>
-<?  break;
-  case 'shutdown':
-    if (isset($_POST['safemode'])) touch($safemode); else @unlink($safemode);
-    exec('/sbin/poweroff -n');?>
-    <body onload="shutdown_online()"><div class='notice'></div></body>
-<?  break;
-  default:?>
-    <body onload="location='/Main'"></body>
-<?
+$progress = (_var($var,'fsProgress')!='')? "&bullet;<span class='blue tour'>{$var['fsProgress']}</span>" : '';
+
+switch (_var($_POST,'cmd','shutdown')) {
+case 'reboot':
+  if (isset($_POST['safemode'])) touch($safemode); else @unlink($safemode);
+  exec('/sbin/reboot -n');
+  echo '<body onload="reboot_now()">';
+  break;
+case 'shutdown':
+  if (isset($_POST['safemode'])) touch($safemode); else @unlink($safemode);
+  exec('/sbin/poweroff -n');
+  echo '<body onload="shutdown_now()">';
+  break;
 }
+echo '<div class="notice"></div>';
+echo '<div id="array">';
+switch (_var($var,'fsState')) {
+case 'Stopped':
+  echo "<span class='red'><i class='fa fa-stop-circle'></i> "._('Array Stopped')."</span>$progress"; break;
+case 'Starting':
+  echo "<span class='orange'><i class='fa fa-pause-circle'></i> "._('Array Starting')."</span>$progress"; break;
+case 'Stopping':
+  echo "<span class='orange'><i class='fa fa-pause-circle'></i> "._('Array Stopping')."</span>$progress"; break;
+default:
+  echo "<span class='green'><i class='fa fa-play-circle'></i> "._('Array Started')."</span>$progress"; break;
+}
+echo '</div>';
+echo '<div id="system"></div>';
+echo '</body>';
 ?>
 </html>
--- a/emhttp/plugins/dynamix/include/DefaultPageLayout.php
+++ b/emhttp/plugins/dynamix/include/DefaultPageLayout.php
@@ -44,8 +44,8 @@ function annotate($text) {echo "\n<!--\n",str_repeat("#",strlen($text)),"\n$text
 <link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/font-awesome.css")?>">
 <link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/context.standalone.css")?>">
 <link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/jquery.sweetalert.css")?>">
-<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/default-{$display['theme']}.css")?>">
-<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/dynamix-{$display['theme']}.css")?>">
+<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/default-$theme.css")?>">
+<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/dynamix-$theme.css")?>">
 <link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/defaultpagelayout.css")?>">

 <style>