Merge pull request #1696 from TDT-AG/pr/20180323-luci-app-mwan3-add-boxes-again

luci-app-mwan3: add boxes again and update css in luci-theme-material

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 86b5ac6..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
@@ -15,29 +15,35 @@ XHR.poll(5, '<%=luci.dispatcher.build_url("admin", "status", "mwan", "interface_
                                for ( var iface in status.interfaces)
                                {
                                        var state = '';
+                                       var css = ''
                                        switch (status.interfaces[iface].status)
                                        {
                                                case 'online':
                                                        state = '<%:Online (tracking active)%>';
-                                                       break;
-                                               case 'notMonitored':
-                                                       state = '<%:Online (tracking off)%>';
+                                                       css = 'success';
                                                        break;
                                                case 'offline':
                                                        state = '<%:Offline%>';
+                                                       css = 'danger';
                                                        break;
                                                default:
                                                        state = '<%:Disabled%>';
+                                                       css = 'warning';
                                                        break;
                                        }
                                        statusview += String.format(
+                                               '<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></br></br>',
+                                               '<div><strong>Status: </strong>%s</div>',
                                                state
                                        );
+                                       statusview += '</div>'
                                }
                                statusDiv.innerHTML = statusview;
                        }
@@ -49,6 +55,17 @@ XHR.poll(5, '<%=luci.dispatcher.build_url("admin", "status", "mwan", "interface_
        );
 //]]></script>
 
+<style type="text/css">
+       #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">

diff --git a/themes/luci-theme-material/htdocs/luci-static/material/css/style.css b/themes/luci-theme-material/htdocs/luci-static/material/css/style.css
index 545c5fb..57bbaf6 100755 (executable)
--- a/themes/luci-theme-material/htdocs/luci-static/material/css/style.css
+++ b/themes/luci-theme-material/htdocs/luci-static/material/css/style.css
@@ -253,9 +253,19 @@ header > .container > .brand {
     vertical-align: text-bottom;
 }
 
+.danger {
+    background-color: #FA8072 !important;
+    color: black;
+}
+
 .warning {
-    background-color: #FF7D60 !important;
-    color: #FFF;
+    background-color:  #F0E68C !important;
+    color: black;
+}
+
+.success {
+    background-color: #90EE90 !important;
+    color: black;
 }
 
 .errorbox,
@@ -1546,4 +1556,4 @@ body.lang_pl.node-main-login .cbi-value-title {
     .cbi-value-field .cbi-input-select {
         min-width: 25rem;
     }
-}
\ No newline at end of file
+}