Add devices tab with list of known devices/boards

ajax/getdevices.php

@@ -0,0 +1,26 @@
+<?php
+
+require "../header.php";
+
+$query = "SELECT mac, ipaddress, label, board, firmware, service, lastupdate FROM devices ORDER BY label, lastupdate DESC";
+$sth = $globaldbh->prepare($query);
+$sth->execute();
+
+$data = array();
+while ( $row = $sth->fetch(PDO::FETCH_ASSOC) ) {
+   $d = array();
+   $d["mac"] = $row["mac"];
+   $d["ipaddress"] = $row["ipaddress"];
+   $d["label"] = $row["label"];
+   $d["board"] = $row["board"];
+   $d["firmware"] = $row["firmware"];
+   $d["service"] = $row["service"];
+   $d["lastupdate"] = $row["lastupdate"];
+   $data[] = $d;
+}
+
+header('Content-Type: application/json');
+echo json_encode($data);
+exit();
+
+// vim: et ai sw=3 ts=3:

css/main.css

@@ -108,3 +108,31 @@ input[type=button] {
    color: #D8D8D8;
    padding: 0px;
 }
+.devices {
+   width: 80%;
+   margin-left: auto;
+   margin-right: auto;
+}
+.device-container {
+   width: 100%;
+   text-align: left;
+   margin-top: 0.5em;
+   padding: 0.25em;
+   border: 2px solid gray;
+}
+.device-property {
+   width: 100%;
+   text-align: left;
+}
+.device-property-label {
+   width: 12em;
+   text-align: right;
+   font-weight: bold;
+   color: white;
+   display: inline-block;
+   margin-right: 1em;
+}
+.button-refresh {
+   margin-top: 0.5em;
+   width: 12em;
+}

index.php

@@ -14,6 +14,7 @@ require "htmlheader.php";
     <ul>
       <li><a href='#main'>Main</a></li>
       <li><a href='#picker'>Picker</a></li>
+      <li><a href='#devices'>Devices</a></li>
     </ul>
     <div id='main'>
       <p><input type='button' class='buttonquarter' value='ALL' onClick='setTarget(0);' id='active-all'> 
@@ -53,6 +54,10 @@ require "htmlheader.php";
       <input type='button' style='height: 3em; margin-bottom: 0.25em; width: 8em;' value='Set Color' onClick='setColor();'> 
       <input type='text' name='colorwheel' id='colorwheel' value='ff0000' /><br />
     </div>
+    <div>
+      <p><button class="button-refresh" id="btn-refresh-devices">Refresh List</button></p>
+      <div id="devices" class="devices"></div>
+    </div>
   </div>
 </div>
 <?php

js/minimal.js

@@ -1,7 +1,11 @@
 $(document).ready(function() {
-   $('#tabs').tabs();
+   $('#tabs').tabs({
+      
+   });
    $('#colorwheel').wheelColorPicker();
+   $("#btn-refresh-devices").on("click", getDevices);
    getActive();
+   getDevices();
 });
 
 function setColor() {
@@ -48,6 +52,39 @@ function getActive() {
    });
 }
 
+function escapeHTML(str) {
+   return str.replace(/[<>]/g, function(match) {
+      switch (match) {
+         case '&': return '&amp;';
+         case '<': return '&lt;';
+         case '>': return '&gt;';
+         default: return match;
+      }
+   });
+}
+
+function getDevices() {
+   $.ajax({
+      url: 'ajax/getdevices.php',
+      dataType: 'json',
+      success: function(data, stat, jqo) {
+         var div = $("#devices");
+         div.html("");
+         var html = "";
+         data.forEach((device) => {
+            html += "<div class='device-container'>";
+            html += "<div class='device-property'><span class='device-property-label'>Service:</span>" + escapeHTML(device.service) + "</div>";
+            html += "<div class='device-property'><span class='device-property-label'>Label:</span>" + escapeHTML(device.label) + "</div>";
+            html += "<div class='device-property'><span class='device-property-label'>Board:</span>" + escapeHTML(device.board) + "</div>";
+            html += "<div class='device-property'><span class='device-property-label'>IP Address:</span>" + escapeHTML(device.ipaddress) + "</div>";
+            html += "<div class='device-property'><span class='device-property-label'>Last Update:</span>" + escapeHTML(device.lastupdate) + "</div>";
+            html += "</div>";
+         });
+         div.html(html);
+      }
+   });
+}
+
 function setTarget(id) {
    $.ajax({
       url: 'ajax/ajax_settarget.php',
@@ -58,3 +95,5 @@ function setTarget(id) {
       }
    });
 }
+
+// vim: ts=3 sw=3 ai: