luci-app-mwan3: add missing graphics boxes again

[project/luci.git] / applications / luci-app-mwan3 / luasrc / view / mwan / overview_status_interface.htm

diff --git a/applications/luci-app-mwan3/luasrc/view/mwan/overview_status_interface.htm b/applications/luci-app-mwan3/luasrc/view/mwan/overview_status_interface.htm
index 279f140..4ec0edf 100644 (file)
--- a/applications/luci-app-mwan3/luasrc/view/mwan/overview_status_interface.htm
+++ b/applications/luci-app-mwan3/luasrc/view/mwan/overview_status_interface.htm
@@ -1,3 +1,9 @@
+<%#
+ Copyright 2014 Aedan Renner <chipdankly@gmail.com>
+ Copyright 2018 Florian Eckert <fe@dev.tdt.de>
+ Licensed to the public under the GNU General Public License v2.
+-%>
+
 <script type="text/javascript">//<![CDATA[
 XHR.poll(5, '<%=luci.dispatcher.build_url("admin", "status", "mwan", "interface_status")%>', null,
                function(x, status)
@@ -9,32 +15,35 @@ XHR.poll(5, '<%=luci.dispatcher.build_url("admin", "status", "mwan", "interface_
                                for ( var iface in status.interfaces)
                                {
                                        var state = '';
-                                       var css = '';
+                                       var css = ''
                                        switch (status.interfaces[iface].status)
                                        {
                                                case 'online':
                                                        state = '<%:Online (tracking active)%>';
-                                                       css = 'wanon';
-                                                       break;
-                                               case 'notMonitored':
-                                                       state = '<%:Online (tracking off)%>';
-                                                       css = 'wanon';
+                                                       css = 'success';
                                                        break;
                                                case 'offline':
                                                        state = '<%:Offline%>';
-                                                       css = 'wanoff';
+                                                       css = 'danger';
                                                        break;
                                                default:
                                                        state = '<%:Disabled%>';
-                                                       css = 'wanoff';
+                                                       css = 'warning';
                                                        break;
                                        }
                                        statusview += String.format(
-                                               '<span class="%s"><strong>%s</strong><br />%s</span>',
-                                               css,
-                                               iface,
+                                               '<div class="alert-message %s">',
+                                               css
+                                       );
+                                       statusview += String.format(
+                                               '<div><strong>Interface: </strong>%s</div>',
+                                               iface
+                                       );
+                                       statusview += String.format(
+                                               '<div><strong>Status: </strong>%s</div>',
                                                state
                                        );
+                                       statusview += '</div>'
                                }
                                statusDiv.innerHTML = statusview;
                        }
@@ -46,37 +55,20 @@ XHR.poll(5, '<%=luci.dispatcher.build_url("admin", "status", "mwan", "interface_
        );
 //]]></script>
 
-<fieldset id="interface_field" class="cbi-section">
-       <legend><%:MWAN Interface Live Status%></legend>
-       <div id="mwan_status_text"><img src="<%=resource%>/icons/loading.gif" alt="<%:Loading%>" style="vertical-align:middle" /><%:Collecting data...%></div>
-</fieldset>
-
 <style type="text/css">
-  .container { /* container for entire page. fixes bootstrap theme's ridiculously small page width */
-       max-width: 1044px;
-  }
-  #mwan_status_text {
-       display: table;
-       font-size: 14px;
-       margin: auto;
-       max-width: 1044px;
-       min-width: 246px;
-       width: 100%;
-  }
-  .wanon {
-       background-color: rgb(144, 240, 144);
-  }
-  .wanoff {
-       background-color: rgb(240, 144, 144);
-  }
-  .wanon, .wanoff {
-       border-radius: 60px;
-       box-shadow: 0px 2px 5px -3px;
-       float: left;
-       margin: 8px 3px 0px 3px;
-       min-height: 30px;
-       min-width: 235px;
-       padding: 5px 10px 8px 10px;
-       text-align: center;
-  }
+       #mwan_status_text > div {
+               display: inline-block;
+               margin: 1rem;
+               padding: 1rem;
+               width: 10rem;
+               float: left;
+               line-height: 125%;
+       }
 </style>
+
+<fieldset id="interface_field" class="cbi-section">
+       <legend><%:MWAN Interfaces%></legend>
+       <div id="mwan_status_text">
+               <img src="<%=resource%>/icons/loading.gif" alt="<%:Loading%>" style="vertical-align:middle" /><%:Collecting data...%>
+       </div>
+</fieldset>