(dashboard, widgets) refactor gateways.widget.php, use callbacks and data from new widget api

src/www/widgets/widgets/gateways.widget.php

@@ -25,77 +25,64 @@
     ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
     POSSIBILITY OF SUCH DAMAGE.
 */
-
-require_once("guiconfig.inc");
-require_once("pfsense-utils.inc");
-require_once("widgets/include/gateways.inc");
-
-$gateways_status = return_gateways_status(true);
 ?>
 
-<table class="table table-striped table-condensed">
+<script type="text/javascript">
+  function gateways_widget_update(sender, data)
+  {
+      var tbody = sender.find('tbody');
+      data.map(function(gateway) {
+          var tr_content = [];
+          var tr_id = "gateways_widget_gw_" + gateway['name'];
+          if (tbody.find("#"+tr_id).length == 0) {
+              // add new gateway
+              tr_content.push('<tr id="'+tr_id+'">');
+              tr_content.push('<td><strong>'+gateway['name']+'</strong><br/><small>'+gateway['address']+'<small></td>');
+              tr_content.push('<td>'+gateway['delay']+'</td>');
+              tr_content.push('<td>'+gateway['loss']+'</td>');
+              tr_content.push('<td><div class="" style="width:150px;">'+gateway['status_translated']+'</div></td>');
+              tr_content.push('</tr>');
+              tbody.append(tr_content.join(''));
+          } else {
+              // update existing gateway
+              $("#"+tr_id+" > td:eq(2)").html(gateway['loss']);
+              $("#"+tr_id+" > td:eq(1)").html(gateway['delay']);
+          }
+          // set color on status text
+          switch (gateway['status']) {
+            case 'force_down':
+              status_color = 'danger';
+              break;
+            case 'down':
+              status_color = 'danger';
+              break;
+            case 'loss':
+              status_color = 'warning';
+              break;
+            case 'delay':
+              status_color = 'warning';
+              break;
+            case 'none':
+              status_color = 'success';
+              break;
+            default:
+              status_color = 'info';
+          }
+          $("#"+tr_id+" > td:eq(3) > div").removeClass().addClass('bg-'+status_color);
+      });
+  }
+</script>
+
+<!-- gateway table -->
+<table class="table table-striped table-condensed" data-plugin="gateway" data-callback="gateways_widget_update">
     <thead>
         <tr>
             <th><?=gettext('Name')?></th>
             <th><?=gettext('RTT')?></th>
             <th><?=gettext('Loss')?></th>
-            <th><?=gettext('Status')?></th>
+            <th style="width:160px;"><?=gettext('Status')?></th>
         </tr>
     </thead>
     <tbody>
-<?php
-    foreach (return_gateways_array() as $gname => $gateway):?>
-      <tr>
-        <td>
-          <strong><?=htmlspecialchars($gateway['name']); ?></strong><br/>
-<?php
-          $if_gw = '~';
-          if (is_ipaddr($gateway['gateway'])) {
-              $if_gw = htmlspecialchars($gateway['gateway']);
-          } elseif ($gateway['ipprotocol'] == "inet") {
-              $if_gw = htmlspecialchars(get_interface_gateway($gateway['friendlyiface']));
-          } elseif ($gateway['ipprotocol'] == "inet6") {
-              $if_gw = htmlspecialchars(get_interface_gateway_v6($gateway['friendlyiface']));
-          }?>
-          <small><?=$if_gw;?></small>
-        </td>
-      <td>
-        <?=!empty($gateways_status[$gname]) ? htmlspecialchars($gateways_status[$gname]['delay']) : gettext("Pending");?>
-      </td>
-      <td>
-        <?=!empty($gateways_status[$gname]) ? htmlspecialchars($gateways_status[$gname]['loss']) : gettext("Pending");?>
-      </td>
-<?php
-        $online = gettext("Unknown");
-        $class="info";
-        if (!empty($gateways_status[$gname])) {
-            if (stristr($gateways_status[$gname]['status'], "force_down")) {
-                $online = gettext("Offline (forced)");
-                $class = "danger";
-            } elseif (stristr($gateways_status[$gname]['status'], "down")) {
-                $online = gettext("Offline");
-                $class = "danger";
-            } elseif (stristr($gateways_status[$gname]['status'], "loss")) {
-                $online = gettext("Packetloss");
-                $class = "warning";
-            } elseif (stristr($gateways_status[$gname]['status'], "delay")) {
-                $online = gettext("Latency");
-                $class = "warning";
-            } elseif ($gateways_status[$gname]['status'] == "none") {
-                $online = gettext("Online");
-                $class = "success";
-            } elseif ($gateways_status[$gname]['status'] == "") {
-                $online = gettext("Pending");
-                $class = "info";
-            }
-        }?>
-      <td style="width:160px;">
-        <div class="bg-<?=$class;?>" style="width:150px;">
-          <?=$online;?>
-        </div>
-      </td>
-  </tr>
-<?php
-  endforeach; ?>
   </tbody>
 </table>