1
0

openwrt_overview_status.htm 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <script type="text/javascript">//<![CDATA[
  2. XHR.poll(5, '<%=luci.dispatcher.build_url("admin", "network", "mwan", "overview", "interface_status")%>', null,
  3. function(x, mArray)
  4. {
  5. var status = document.getElementById('mwan_status_text');
  6. if (mArray.wans)
  7. {
  8. var temp = '';
  9. for ( var i = 0; i < mArray.wans.length; i++ )
  10. {
  11. var stat = '';
  12. var cssc = '';
  13. switch (mArray.wans[i].status)
  14. {
  15. case 'online':
  16. stat = '<%:Online (tracking active)%>';
  17. cssc = 'wanon';
  18. break;
  19. case 'notMonitored':
  20. stat = '<%:Online (tracking off)%>';
  21. cssc = 'wanon';
  22. break;
  23. case 'offline':
  24. stat = '<%:Offline%>';
  25. cssc = 'wanoff';
  26. break;
  27. case 'notEnabled':
  28. stat = '<%:Disabled%>';
  29. cssc = 'wanoff';
  30. break;
  31. }
  32. temp += String.format(
  33. '<span class="%s"><strong>%s (<a href="%q">%s</a>)</strong><br />%s</span>',
  34. cssc, mArray.wans[i].name, mArray.wans[i].link, mArray.wans[i].ifname, stat
  35. );
  36. }
  37. status.innerHTML = temp;
  38. }
  39. else
  40. {
  41. status.innerHTML = '<strong><%:No MWAN interfaces found%></strong>';
  42. }
  43. }
  44. );
  45. //]]></script>
  46. <fieldset id="interface_field" class="cbi-section">
  47. <legend><%:MWAN Interface Live Status%></legend>
  48. <div id="mwan_status_text"><img src="<%=resource%>/icons/loading.gif" alt="<%:Loading%>" style="vertical-align:middle" /><%:Collecting data...%></div>
  49. </fieldset>
  50. <style type="text/css">
  51. .container { /* container for entire page. fixes bootstrap theme's ridiculously small page width */
  52. max-width: 1044px;
  53. }
  54. #mwan_status_text {
  55. display: table;
  56. font-size: 14px;
  57. margin: auto;
  58. max-width: 1044px;
  59. min-width: 246px;
  60. width: 100%;
  61. }
  62. .wanon {
  63. background-color: rgb(144, 240, 144);
  64. }
  65. .wanoff {
  66. background-color: rgb(240, 144, 144);
  67. }
  68. .wanon, .wanoff {
  69. border-radius: 60px;
  70. box-shadow: 0px 2px 5px -3px;
  71. float: left;
  72. margin: 8px 3px 0px 3px;
  73. min-height: 30px;
  74. min-width: 235px;
  75. padding: 5px 10px 8px 10px;
  76. text-align: center;
  77. }
  78. </style>