www/index.php@59048cd5f00d
www/index.php
Fri, 10 Aug 2018 21:22:09 +0200
- author
- Michiel Broek <mbroek@mbse.eu>
- date
- Fri, 10 Aug 2018 21:22:09 +0200
- changeset 7
- 59048cd5f00d
- parent 6
- 366f270a2446
- child 8
- 50545c3e36c6
- permissions
- -rw-r--r--
Fixes boolean values and only display valid fields in node view.
<?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 refreshIntervalId = 0; 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++ ) { $("#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++ ) { $("#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) { /* * Cancel a running refresh loop. */ if (refreshIntervalId > 0) { console.log( "RefreshIIntervald: " + refreshIntervalId + " stopped" ); clearInterval(refreshIntervalId); refreshIntervalId = 0; } /* * 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: 'bool' }, { 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>Eerst gezien</td><td>" + record.firstseen + "</td></tr>"; html += "<tr><td>Laatst gezien</td><td>" + record.lastseen + "</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>"; if (record.online) { html += "<tr><td>Temperatuur</td><td>" + record.temperature + "°C</td></tr>"; if (record.humidity > 0) { html += "<tr><td>Vochtigheid</td><td>" + record.humidity + "%</td></tr>"; } if (record.barometer > 0) { html += "<tr><td>Luchtdruk</td><td>" + record.barometer + "</td></tr>"; } if ((record.gps_latitude != 0) && (record.gps_longitude != 0)) { 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); } }); // Get the data immediatly and then at regular intervals to refresh. dataAdapter.dataBind(); refreshIntervalId = setInterval(function(){ dataAdapter.dataBind(); }, 30000); } 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("<div></div"); } 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">Klimaatkasten</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>
