supplemental-web: fe_status: add a loading screen

move to main menu and a few other tweaks

7 files changed, 53 insertions, 10 deletions

diff --git a/abs/core/supplemental-web/PKGBUILD b/abs/core/supplemental-web/PKGBUILD
index 3f9e8ef..a5bf2f6 100644
--- a/abs/core/supplemental-web/PKGBUILD
+++ b/abs/core/supplemental-web/PKGBUILD
@@ -1,7 +1,7 @@
 pkgbase=supplemental-web
 pkgname=('supplemental-web' 'supplemental-web-slave')
-pkgver=8.0
-pkgrel=18
+pkgver=8.2
+pkgrel=1
 arch=('i686' 'x86_64')
 license=('GPL')
 backup=('data/srv/httpd/cgi/extra.cfg.txt')
diff --git a/abs/core/supplemental-web/contents/ajaxloader.min.js b/abs/core/supplemental-web/contents/ajaxloader.min.js
new file mode 100755
index 0000000..11c14ba
--- /dev/null
+++ b/abs/core/supplemental-web/contents/ajaxloader.min.js
@@ -0,0 +1 @@
+function AjaxLoader(e,t){function n(e){var t=/^#?([a-f\d])([a-f\d])([a-f\d])$/i;e=e.replace(t,function(e,t,n,r){return t+t+n+n+r+r});var n=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return n?{r:parseInt(n[1],16),g:parseInt(n[2],16),b:parseInt(n[3],16)}:null}function r(e,t,n){return"#"+((1<<24)+(e<<16)+(t<<8)+n).toString(16).slice(1)}function b(){p=s>=32?s>=128?72:36:18,d=.5*s*o,v=2*Math.PI/p;h=a/m;if(f){h=-h}g.width=s;g.height=s}function w(e){var t=2*Math.PI*e;var n=Math.cos(t),r=Math.sin(t),i=.5*s*(1+n),o=.5*s*(1-r),a=i-d*n,l=o+d*r;y.clearRect(0,0,s,s);for(var c=0;c<p;c++){y.beginPath();if(f){y.fillStyle="rgba("+u.r+","+u.g+","+u.b+","+(p-1-c)/(p-1)+")"}else{y.fillStyle="rgba("+u.r+","+u.g+","+u.b+","+c/(p-1)+")"}y.moveTo(i,o);y.lineTo(a,l);t+=v,n=Math.cos(t);r=Math.sin(t);i=.5*s*(1+n);o=.5*s*(1-r);a=i-d*n;l=o+d*r;y.lineTo(a,l);y.lineTo(i,o);y.closePath();y.fill()}}var i={size:32,factor:.25,speed:1,color:"#000",clockwise:true};var s,o,u,a,f,l,c=0,h,p,d,v,m=30;if(t!=null){s="size"in t?t.size:i.size;o="factor"in t?t.factor:i.factor;u=n("color"in t?t.color:i.color);a="speed"in t?t.speed:i.speed;f="clockwise"in t?t.clockwise:i.clockwise}else{s=i.size;o=i.factor;u=n(i.color);a=i.speed;f=i.clockwise}var g=document.getElementById(e);if(g==null){console.log("AjaxLoader Error! Cannot find canvas element by id '"+e+"'");return null}var y=g.getContext("2d");b();this.show=function(){g.removeAttribute("style");clearInterval(l);l=setInterval(function(){w(c);c+=h;c=c-Math.floor(c)},1e3/m)};this.hide=function(){clearInterval(l);g.style.display="none"};this.getSize=function(){return s};this.setSize=function(e){s=e;b()};this.getFactor=function(){return o};this.setFactor=function(e){o=e;b()};this.getSpeed=function(){return a};this.setSpeed=function(e){a=e;b()};this.getColor=function(){return r(u.r,u.g,u.b)};this.setColor=function(e){u=n(e)};this.getClockwise=function(){return f};this.setClockwise=function(e){f=e;b()}}
\ No newline at end of file
diff --git a/abs/core/supplemental-web/contents/fe_status.py b/abs/core/supplemental-web/contents/fe_status.py
index 49bbf95..993ef72 100644
--- a/abs/core/supplemental-web/contents/fe_status.py
+++ b/abs/core/supplemental-web/contents/fe_status.py
@@ -16,6 +16,7 @@ def msg(msg):
 def parse_xml(frontend):
     temp_dict = {'state':" --- ",
                  'title':" --- ",
+                 'subtitle':" --- ",
                  'location':" --- "}
     url = "http://%s:6547/Frontend/GetStatus" %frontend
     try:
@@ -40,6 +41,9 @@ def parse_xml(frontend):
             elif keyitem == "title":
                 temp_dict['title'] = valueitem
 
+            elif keyitem == "subtitle":
+                temp_dict['subtitle'] = valueitem
+
             elif keyitem == "currentlocation":
                 temp_dict['location'] = valueitem
 
@@ -82,15 +86,17 @@ def print_html(status_dict):
     <td> %s  </td>
     <td> %s  </td>
     <td> %s  </td>
-    <td> %s </td>
+    <td> %s  </td>
+    <td> %s  </td>
 </tr>
 '''
-    print row %("  Frontend  ","  State  ","  Title  ","  MythTV Location")
+    print row %("  MythFrontend Host  ","  State  ","  Title  ","  Subtitle  ","  MythFrontend Location  ")
     for fe in status_dict.keys():
         temp_dict = status_dict[fe]
         print row %(fe,
                     temp_dict['state'],
                     temp_dict['title'],
+                    temp_dict['subtitle'],
                     temp_dict['location'])
 
     print "</table>"
@@ -99,7 +105,7 @@ def print_html(status_dict):
     print '''
     <div id="footer">
        </br>
-       <p>Offline systems will not be listed</p>
+       <p>Offline systems are not listed</p>
     </div>
 '''
 
diff --git a/abs/core/supplemental-web/contents/fe_status.shtml b/abs/core/supplemental-web/contents/fe_status.shtml
index d821600..845a931 100644
--- a/abs/core/supplemental-web/contents/fe_status.shtml
+++ b/abs/core/supplemental-web/contents/fe_status.shtml
@@ -1,12 +1,14 @@
 <html>
     <head>
         <style type="text/css">@import "/frame.css";</style>
+        <meta http-equiv="pragma" content="no-cache" />
     </head>
+
     <body>
         <div id="header">
-                    <h1>LinHES Frontend Status </h1>
-
+            <h1>MythFrontend Status</h1>
         </div>
-        <!--#exec cmd="/root/fe_status.py" -->
+        <!--#exec cmd="MYTHCONFDIR=/usr/share/mythtv /data/srv/httpd/htdocs/fe_status.py" -->
     </body>
 </html>
+
diff --git a/abs/core/supplemental-web/contents/fe_status_load.shtml b/abs/core/supplemental-web/contents/fe_status_load.shtml
new file mode 100755
index 0000000..ee058ad
--- /dev/null
+++ b/abs/core/supplemental-web/contents/fe_status_load.shtml
@@ -0,0 +1,33 @@
+<html>
+    <head>
+        <style type="text/css">@import "/frame.css";</style>
+        <script src="../ajaxloader.min.js"></script>
+        <meta http-equiv="pragma" content="no-cache" />
+        <meta http-equiv="refresh" content="0; url=../fe_status.shtml" />
+    </head>
+
+    <body>
+        <div id="header">
+            <h1>MythFrontend Status</h1>
+        </div>
+        </br> </br> 
+        <h3>Querying MythFrontends...</h3>
+        </br>
+        <div id="container">
+            <div>
+                <canvas id="spinner"></canvas>
+            </div>
+        </div>
+        <script type="text/javascript">
+            var opts = {
+                size: 72,           // Width and height of the spinner
+                factor: 0.25,       // Factor of thickness, density, etc.
+                color: "#ebb81c",      // Color #rgb or #rrggbb
+                speed: 1.0,         // Number of turns per second
+                clockwise: true     // Direction of rotation
+            };
+            var ajaxLoader = new AjaxLoader("spinner", opts);
+            ajaxLoader.show();
+        </script>
+    </body>
+</html>
diff --git a/abs/core/supplemental-web/contents/frame.css b/abs/core/supplemental-web/contents/frame.css
index 63a6121..0008aec 100644
--- a/abs/core/supplemental-web/contents/frame.css
+++ b/abs/core/supplemental-web/contents/frame.css
@@ -154,7 +154,7 @@ table.calllog {
     border-style: outset;
     border-color: #808080;
     border-collapse: separate;
-    width:500px;
+    width:85%;
     margin-left:auto;
     margin-right:auto;
     body {text-align:center;}
diff --git a/abs/core/supplemental-web/contents/header.html b/abs/core/supplemental-web/contents/header.html
index 772cb52..c50cfee 100644
--- a/abs/core/supplemental-web/contents/header.html
+++ b/abs/core/supplemental-web/contents/header.html
@@ -41,6 +41,8 @@ function beStatus()
 

 <li><a href="mythweb/">MythWeb</a></li>

 

+<li><a href="fe_status_load.shtml">MythFrontend Status</a></li>

+

 <li><a id="modify-me">MythBackend Status</a></li>

 

 <li><a href="xymon/">Health & Maintenance</a></li>

@@ -59,7 +61,6 @@ function beStatus()
     <ul>

 <!--        <li><a onClick=r() >MythBackend Status</a></li> -->

         <li><a href="calllog.shtml">Call Log</a></li>

-        <li><a href="fe_status.shtml">Frontend status</a></li>

         <li><a href="mythexport/setup.cgi">MythExport</a></li>

         <li><a href="mythexpress.html">MythExpress</a></li>

 <!--    <li><a href="remyth.html" >ReMyth</a></li> -->