Removed status update bar, fixes #123

Some spinner tweaks

admin-root/hdr.html

@@ -33,7 +33,7 @@
 The best open-source media server for the <a href="http://www.rokulabs.com">Roku SoundBridge</a> and iTunes
 </div>
 <div id="navigation">
-<img id="spinner" src="spinner.gif">
+<img id="spinner" src="spinner_stopped.gif">
 <br /><br />
 <ul>
  <li><a @ispage index.html:class="naviselected":@ href="index.html">server status</a></li>

admin-root/index.html

@@ -1,35 +1,13 @@
 @include hdr.html@
 <style type="text/css">
-table {
-  margin-top: 2ex;
-}
 #service, #stat {
   width: 60ex;
 }
 #thread {
   width: 80ex;
 }
-#service td, #thread td {
-  text-align: left;
-}
-#service th, #thread th {
-  text-align: left;
-}
-input {
-  font: icon;
-}
-.timer {
-  background-color: #8CACBB;
-  width: 100px;
-}
-.input_error {
-  border: 1px solid #ff0000;
-}
 </style>
-<h1>Status</h1>
-Next page update <div class="timer" id="update_timer"><br></div>
-Update this page every
-<input type="text" id="update" size="3" value="" /> seconds
+<h1>Server Status</h1>
 <table id="service" cellspacing="0">
 <thead>
   <tr>
@@ -56,6 +34,7 @@ Update this page every
   </tr>
 </tbody>
 </table>  
+<br />
 <table id="stat" cellspacing="0">
   <col style="width: 20ex;" />
   <col />
@@ -76,12 +55,13 @@ Update this page every
     <td>2</td>
   </tr>
 </table>
+<br />
 <table id="thread" cellspacing="0">
   <col style="width: 20ex;" />
   <col />
 <thead>
   <tr>
-    <th>Host</th>
+    <th>Client IP</th>
     <th>Action</th>
   </tr>
 </thead>

admin-root/mt-daapd.css

@@ -75,7 +75,8 @@ th {
   font-weight: bold;
   padding: 0 1em 0 1em;
   background: #A3C1E8;
-  color: #000000; 
+  color: #000000;
+  text-align: left;
 }
 
 td {
@@ -137,8 +138,7 @@ td {
   padding-left: .5em;
 }
 #spinner {
-  margin-left: 4em;
-  visibility: hidden;
+  margin-left: 1em;
 }
 /* config.html */
 #toggle_basic_advanced {

admin-root/status.js

@@ -1,74 +1,41 @@
 Event.observe(window,'load',initStatus);
 
-var UPDATE_FREQUENCY = 5; // default number of seconds between updates if no cookie set
+var UPDATE_FREQUENCY = 5000; // number of milliseconds between page updates
 
 function initStatus(e) {
-  Event.observe('update','keyup',Updater.keyUp);
   Updater.start();
 }
 var Updater = {
   start: function () {
-    if (f = Cookie.getVar('update_frequency')) {
-      this.frequency = f;
-    } else {
-      this.frequency = UPDATE_FREQUENCY;
-    }
-    $('update').value = this.frequency;
-    new Ajax.Request('xml-rpc?method=stats',{method: 'get',onComplete: rsStats});          
+    window.setTimeout(Updater.update,UPDATE_FREQUENCY);
+    window.setTimeout(Util.showSpinner,UPDATE_FREQUENCY-1000);
   },
   update: function () {
-    $('update_timer').style.width = 100 + 'px';
-    if (Updater.stop) {
-      return;
-    }
-    Updater.effect = new Effect.Scale('update_timer',0,{scaleY: false,duration: Updater.frequency,
-      afterFinish: function() {
-        new Ajax.Request('xml-rpc?method=stats',{method: 'get',onComplete: rsStats});          
-      }});
+    new Ajax.Request('xml-rpc?method=stats',{method: 'get',onComplete: Updater.rsStats});          
   },
-  keyUp: function (e) {
-    var val = $('update').value;
-    if (Updater.oldVal == val) {
-      return;
-    }
-    Updater.oldVal = val;
-    if (Updater.effect) {
-      Updater.effect.cancel();
-    }
-    if (('' == val) || /^\d+$/.test(val)) {
-      Cookie.setVar('update_frequency',val,30);
-      if ('' == val) {
-        Element.removeClassName('update','input_error');
-        return;
-      }
-      Updater.frequency = val;
-      Element.removeClassName('update','input_error');
-      Updater.update();
-    } else {
-      Element.addClassName('update','input_error');
-    }
-  } 
-}
-function rsStats(request) {
-  ['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);
+  rsStats: function(request) {
+    Util.hideSpinner();
+    ['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 thread = $A(request.responseXML.getElementsByTagName('thread'));
+    var threadTable = new Table('thread');
+    threadTable.removeTBodyRows();
+    var users = 0;
+    thread.each(function (element) {
+      users++;
+      row = [];
+      row.push(Element.textContent(element.childNodes[1]));
+      row.push(Element.textContent(element.childNodes[2]));
+      threadTable.addTbodyRow(row);    
     });
-  });  
-  var thread = $A(request.responseXML.getElementsByTagName('thread'));
-  var threadTable = new Table('thread');
-  threadTable.removeTBodyRows();
-  var users = 0;
-  thread.each(function (element) {
-    users++;
-    row = [];
-    row.push(Element.textContent(element.childNodes[1]));
-    row.push(Element.textContent(element.childNodes[2]));
-    threadTable.addTbodyRow(row);    
-  });
- // $('session_count').replaceChild(document.createTextNode(users + ' Connected Users'),$('session_count').firstChild);
-  Updater.update();
+    // $('session_count').replaceChild(document.createTextNode(users + ' Connected Users'),$('session_count').firstChild);
+    Updater.start();
+}
+  
 }
 
 Table = Class.create();

admin-root/util.js

@@ -71,3 +71,11 @@ var Cookie = {
     document.cookie = name + '=;expires=' + date.toUTCString();
   }
 };
+var Util = {
+  showSpinner: function () {
+    $('spinner').src = 'spinner.gif'; 
+  },
+  hideSpinner: function () {
+    $('spinner').src = 'spinner_stopped.gif'; 
+  }   
+}