www/index.php

<?php
$my_style = 'android';
require_once('version.php');
?>
<!DOCTYPE html>
<html lang="en">
 <head>'
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title id='Description'>Brewery Managment System v<?php echo $my_version; ?></title>
  <link type="text/css" href="css/style.css" rel="stylesheet" media="all" />
  <link type="text/css" href="jqwidgets/styles/jqx.base.css" rel="stylesheet" />
  <link type="text/css" href="jqwidgets/styles/jqx.<?php echo $my_style; ?>.css" rel="stylesheet" />
  <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
  <script src="js/jquery-1.11.1.min.js"></script>
  <script src="jqwidgets/jqxcore.js"></script>
  <script src="jqwidgets/jqxbuttons.js"></script>
  <script src="jqwidgets/jqxscrollbar.js"></script>
  <script src="jqwidgets/jqxpanel.js"></script>
  <script src="jqwidgets/jqxtree.js"></script>
  <script src="jqwidgets/jqxexpander.js"></script>
  <script src="jqwidgets/jqxsplitter.js"></script>
  <script src="jqwidgets/jqxdata.js"></script>
  <script>
  $(document).ready(function () {
    /*
     * Different right panel pages
     */
    var aNode = '<div class="nodeContainer">Node scherm </div>';
    var aFermenter = '<div class="fermenterContainer">Fermenter scherm  </div>';
    $("#splitter").jqxSplitter({ theme: "<?php echo $my_style; ?>", width: 1278, height: 618, panels: [{ size: 250}] });
    $("#jqxTree").jqxTree({ theme: "<?php echo $my_style; ?>", height: "100%", width: "100%" });
    /*
     * Build the nodes subtree
     */
    var nodeByID = $("#jqxTree").find("#Nodes")[0];
    $.getJSON("getnodes.php", function(data) {
      for( i = 0; i < data.length; i++ ) {
        console.log( "JSON Data: " + data[i].uuid + " " + data[ i ].node );
        $("#jqxTree").jqxTree("addTo", { id: 'node-' + data[i].uuid, label: data[i].node, icon: 'images/folder.png'  }, nodeByID);
      }
    });
    /*
     * Build the fermenters subtree
     */
    var fermenterByID = $("#jqxTree").find("#Fermenters")[0];
    $.getJSON("getfermenters.php", function(data) {
      for( i = 0; i < data.length; i++ ) {
        console.log( "JSON Data: " + data[i].uuid + " " + data[i].node );
        $("#jqxTree").jqxTree("addTo", { id: 'fermenter-' + data[i].uuid, label: data[i].node + "/" + data[i].alias, icon: 'images/folder.png' }, fermenterByID);
      }
    });

    $("#jqxTree").css("visibility", "visible");

    $("#jqxTree").on("select", function (event) {
      /*
       * Process the selected id from the left panel tree and show the correct page in the right panel.
       */
      var estr = event.args.element.id;
      if (estr == "Root") {
        $("#ContentPanel").html("<div style='margin: 10px;'>RrrR</div>");
      } else if (estr.indexOf("node-", 0) == 0) {
	// Load and show a node.
	// The parameter is: node-36d4d030-4d62-4f2f-a96b-472e643687f7
        var uuid = estr.substr(5);
	var url = "getnode.php?uuid='" + uuid + "'";
        var source = {
          datatype: "json",
          datafields: [
            { name: 'record', type: 'int' },
            { name: 'uuid', type: 'string' },
            { name: 'node', type: 'string' },
            { name: 'online', type: 'string' },
            { name: 'group_id', type: 'string' },
            { name: 'hardwaremake', type: 'string' },
            { name: 'hardwaremodel', type: 'string' },
            { name: 'os', type: 'string' },
            { name: 'os_version', type: 'string' },
            { name: 'firmware', type: 'string' },
            { name: 'firstseen', type: 'string' },
            { name: 'lastseen', type: 'string' },
            { name: 'temperature', type: 'float' },
            { name: 'humidity', type: 'float' },
            { name: 'barometer', type: 'float' },
            { name: 'gps_latitude', type: 'float' },
            { name: 'gps_longitude', type: 'float' },
            { name: 'gps_altitude', type: 'float' },
            { name: 'net_address', type: 'string' },
            { name: 'net_ifname', type: 'string' },
            { name: 'net_rssi', type: 'int' }
          ],
          id: 'record',
          url: url
        };
	var dataAdapter = new $.jqx.dataAdapter(source, {
	  loadComplete: function (records) {
	    var record = dataAdapter.records[0];
	    var html  = "<div style='background: #252526; margin: 50px;'>";
	        html += "<table style='width: 100%; padding: 10px;'>";
	        html += "<tr><th colspan=2>Systeem overzicht</th></tr>";
                html += "<tr><td>Uuid</td><td>" + record.uuid + "</td></tr>";
                html += "<tr><td>Systeem</td><td>" + record.node + "</td></tr>";
	        html += "<tr><td>Online</td><td>" + record.online + "</td></tr>";
	        html += "<tr><td>Type</td><td>" + record.group_id + "</td></tr>";
	        html += "<tr><td>Hardware maker</td><td>" + record.hardwaremake+ "</td></tr>";
		html += "<tr><td>Hardware model</td><td>" + record.harwaremodel+ "</td></tr>";
		html += "<tr><td>OS</td><td>" + record.os + " versie: " + record.os_version + "</td></tr>";
		html += "<tr><td>Firmware</td><td>" + record.firmware + "</td></tr>";
		html += "<tr><td>Temperatuur</td><td>" + record.temperature + "&deg;C</td></tr>";
		html += "<tr><td>Vochtigheid</td><td>" + record.humidity + "%</td></tr>";
		html += "<tr><td>Luchtdruk</td><td>" + record.barometer + "</td></tr>";
		html += "<tr><td>GPS</td><td>"+ record.gps_latitude + " " + record.gps_longitude + " " + record.gps_altitude + "</td></tr>";
		html += "<tr><td>Netwerk</td><td>"+ record.net_ifname + " " + record.net_address + "</td></tr>";
		html += "</<table>";
	        html += "</div>";
	    $("#ContentPanel").html(html);
	  }
	/*     Data formatteren etc. Zie https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdataadapter/index.htm#demos/jqxdataadapter/bindingtojson.htm */
        });
        dataAdapter.dataBind();

      } else if (estr.indexOf("fermenter-", 0) == 0) {
        var uuid = estr.substr(10);
        $("#ContentPanel").html("<div style='margin: 10px;'>" + uuid + "</div>");
      } else if (event.args.element.id == "Nodes") {
        $("#ContentPanel").html(aNode);
      } else {
        $("#ContentPanel").html("<div style='margin: 10px;'>" + event.args.element.id + "</div>");
      }
    });
  });
  </script>
 </head>

 <body class="default">
  <div id="jqxWidget">
   <div id="header">
   <div id="title">BMS <?php echo $my_version; ?></div>
   </div> <!-- header -->
   <div id="splitter">
    <div> <!-- tree panel -->
     <div style="visibility: hidden; border: none;" id='jqxTree'>
      <ul>
       <li id="Root" item-expanded='true'>
        <img style='float: left; margin-right: 5px;' src='images/earth.png' />
        <span item-title="true">Root</span>
        <ul>
         <li id="Nodes">
          <img style='float: left; margin-right: 5px;' src='images/folder.png' />
          <span item-title="true">Systemen</span>
          <!-- Subtree nodes -->
         </li>
         <li id="Fermenters">
          <img style='float: left; margin-right: 5px;' src='images/folder.png' />
          <span item-title="true">Klimatkasten</span>
          <!-- Subtree fermenters -->
         </li>
         <li id="Brewboards">
          <img src='images/settings.png' />
          <span item-title="true">Brouw apparatuur</span>
         </li>
         <li id="Prducing">
          <img src='images/system.png' />
          <span item-title="true">In productie</span>
         </li>
         <li id="Recipes">
          <img style='float: left; margin-right: 5px;' src='images/beer.png' />
          <span item-title="true">Recepten</span>
         </li>
         <li id="Settings">
          <img style='float: left; margin-right: 5px;' src='images/setupIcon.png' />
          <span item-title="true">Instellingen</span>
         </li>
        </ul>
       </li>
      </ul>
     </div> <!-- jqxTree -->
    </div> <!-- tree panel -->
    <div id="ContentPanel">
    </div>
   </div> <!--- splitter -->
  </div> <!-- jqxWidget -->
 </body>
</html>