Closed #143 implemented part 4) and 5)

Closed #175

admin-root/index.html

@@ -1,13 +1,34 @@
 @include hdr.html@
 <style type="text/css">
 #service, #stat {
-  width: 60ex;
+  width: 70ex;
 }
 #thread {
   width: 80ex;
 }
+#server_stopped_message {
+  background-color: yellow;
+  padding: 1em;
+  border: 1px solid #8CACBB;
+  font-size: 120%;
+  margin-bottom: 1em;
+  z-index: 100;
+}
+#grey_screen {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 1000px;
+  background-color: #000;
+  filter:alpha(opacity=60);
+  opacity: 0.6;
+  z-index: 10;
+}
 </style>
 <h1>Server Status</h1>
+<div id="grey_screen" style="display: none;"></div>
+<div id="server_stopped_message" style="display: none;">The Firefly server is not running, this page will be inaccessible until you start the server again.</div>
 <table id="service" cellspacing="0">
 <thead>
   <tr>
@@ -25,12 +46,17 @@
   <tr>
     <td>Firefly Media Server</td>
     <td id="daap_server">Running</td>
-    <td><a href="config-update.html?action=stopdaap">Stop Server</a></td>
+    <td><button id="button_stop_server" type="button">Stop Server</button></td>
   </tr>
   <tr>
     <td>File scanner</td>
     <td id="file_scanner">Idle</td>
-    <td><a href="config-update.html?action=rescan">Start Scan</a></td>
+    <td><button id="button_start_scan" type="button">Start Scan</button></td>
+  </tr>
+  <tr>
+    <td></td>
+    <td></td>
+    <td><button id="button_start_full_scan" type="button">Start Full Scan</button></td>
   </tr>  
 </tbody>
 </table>  

admin-root/status.js

@@ -3,22 +3,41 @@ Event.observe(window,'load',initStatus);
 var UPDATE_FREQUENCY = 5000; // number of milliseconds between page updates
 
 function initStatus(e) {
-  Updater.start();
+  Updater.update();
+  // Bind events to the buttons
+  Event.observe('button_stop_server','click',Updater.stopServer);
+  Event.observe('button_start_scan','click',Updater.startScan);
+  Event.observe('button_start_full_scan','click',Updater.startFullScan);
 }
 var Updater = {
-  start: function () {
+  stop: false,
-    window.setTimeout(Updater.update,UPDATE_FREQUENCY);
+  wait: function () {
-    window.setTimeout(Util.showSpinner,UPDATE_FREQUENCY-1000);
+    Updater.updateTimeout = window.setTimeout(Updater.update,UPDATE_FREQUENCY);
+    Updater.spinnerTimeout = window.setTimeout(Util.startSpinner,UPDATE_FREQUENCY-1000);
   },
   update: function () {
+    if (Updater.stop) {
+      return;
+    }
+    if (Updater.updateTimeout) {
+      window.clearTimeout(Updater.updateTimeout);
+    }
+    if (Updater.spinnerTimeout) {
+      window.clearTimeout(Updater.updateTimeout);
+    }
     new Ajax.Request('xml-rpc?method=stats',{method: 'get',onComplete: Updater.rsStats});          
   },
   rsStats: function(request) {
-    Util.hideSpinner();
+    Util.stopSpinner();
     ['service','stat'].each(function (tag) {
       $A(request.responseXML.getElementsByTagName(tag)).each(function (element) {
         var node = $(Element.textContent(element.firstChild).toLowerCase().replace(/\ /,'_'));
-        node.replaceChild(document.createTextNode(Element.textContent(element.childNodes[1])),node.firstChild);
+        var status = Element.textContent(element.childNodes[1]);
+        node.replaceChild(document.createTextNode(status),node.firstChild);
+        if ('Idle' == status) {
+          $('button_start_scan').disabled = false;
+          $('button_start_full_scan').disabled = false;
+        }
       });
     });  
     var thread = $A(request.responseXML.getElementsByTagName('thread'));
@@ -33,9 +52,33 @@ var Updater = {
       threadTable.addTbodyRow(row);    
     });
     // $('session_count').replaceChild(document.createTextNode(users + ' Connected Users'),$('session_count').firstChild);
-    Updater.start();
+    if (!Updater.stop) {
+      Updater.wait();
+    }
+  },
+  stopServer: function() {
+    new Ajax.Request('xml-rpc',{method:'post',parameters: 'method=shutdown',onComplete: Updater.rsStopServer});
+    Util.stopSpinner();
+  },
+  rsStopServer: function(request) {
+    Updater.stop = true;
+    Element.show('grey_screen');
+    Effect.Appear('server_stopped_message');
+  },
+  startScan: function(e) {
+    Event.element(e).disabled = true;
+    new Ajax.Request('xml-rpc',{method:'post',parameters: 'method=rescan',onComplete: Updater.rsStartScan});  
+  },
+  rsStartScan: function(request) {
+    Updater.update();    
+  },
+  startFullScan: function(e) {
+    Event.element(e).disabled = true;
+    new Ajax.Request('xml-rpc',{method:'post',parameters: 'method=rescan&full=1',onComplete: Updater.rsStartFullScan});    
+  },
+  rsStartFullScan: function(request) {
+    Updater.update();
   }
-  
 }
 
 Table = Class.create();

admin-root/util.js

@@ -72,10 +72,10 @@ var Cookie = {
   }
 };
 var Util = {
-  showSpinner: function () {
+  startSpinner: function () {
     $('spinner').src = 'spinner.gif'; 
   },
-  hideSpinner: function () {
+  stopSpinner: function () {
     $('spinner').src = 'spinner_stopped.gif'; 
   }   
 }