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';
+ state = '<%:Online%>';
+ 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;
}
);
//]]></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 Interface Live Status%></legend>
- <div id="mwan_status_text"><img src="<%=resource%>/icons/loading.gif" alt="<%:Loading%>" style="vertical-align:middle" /><%:Collecting data...%></div>
+ <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>