changeset
Web pages nodes display works.
Thu, 09 Aug 2018 21:52:01 +0200
- author
- Michiel Broek <mbroek@mbse.eu>
- date
- Thu, 09 Aug 2018 21:52:01 +0200
- changeset 4
- 1750b6cae48e
- parent 3
- 37a8c7ec9d3e
- child 5
- 36387e45a194
Web pages nodes display works.
| www/Makefile | file | annotate | diff | comparison | revisions | |
| www/css/style.css | file | annotate | diff | comparison | revisions | |
| www/getfermenter.php | file | annotate | diff | comparison | revisions | |
| www/getnode.php | file | annotate | diff | comparison | revisions | |
| www/index.php | file | annotate | diff | comparison | revisions |
--- a/www/Makefile Wed Aug 08 16:35:05 2018 +0200 +++ b/www/Makefile Thu Aug 09 21:52:01 2018 +0200 @@ -3,7 +3,8 @@ include ../Makefile.global -SRC = version.php.in index.php +SRC = version.php.in index.php getfermenter.php getfermenters.php \ + getnode.php getnodes.php config.php.dist OTHER = Makefile #############################################################################
--- a/www/css/style.css Wed Aug 08 16:35:05 2018 +0200 +++ b/www/css/style.css Thu Aug 09 21:52:01 2018 +0200 @@ -19,10 +19,9 @@ } body { - background: #eee; + background: #ccc; color: #000; font-family: Verdana, Arial, sans-serif; - width: 1280px; font-size: 12px; margin: 0px; } @@ -30,129 +29,33 @@ #jqxWidget { width: 1280px; - height: 670px; + height: 660px; float: left; } #header { width: 1278px; - height: 48px; + height: 38px; float: left; border: 1px solid #4297d7; border-radius: 5px 5px 5px 5px; - background: #5c9ccc url(../jqwidgets/styles/images/redmond/ui-bg_gloss-wave_55_5c9ccc_500x100.png) 50% 50% repeat-x; + background: #5c9ccc url(/jqwidgets/styles/images/redmond/ui-bg_gloss-wave_55_5c9ccc_500x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; } #title { width: 1278px; - height: 40px; + height: 38px; float: left; - margin-top: 7px; + margin-top: 2px; font-size: 1.8em; color: #FFD700; text-align: center; font-family: comic sans ms; } -/* - -#content { - width: 978px; - height: 428px; - float: left; - border: 1px solid; - border-color: #aaa; - border-radius: 5px 5px 5px 5px; -} - -#errors { - height: 35px; - width: 978px; - float: left; - text-align: center; - font-size: 1.5em; - margin-top: 10px; - color: #ff0000; -} - -#etable { - height: 320px; - width: 978px; - float: left; - overflow: auto; -} - -#atable { - height: 60px; - width: 978px; - float: left; -} - -table.setup { - margin-left: auto; - margin-right: auto; - border-collapse: collapse; -} - -.trhead { - font-weight: bold; - background: #5c9ccc url(../jqwidgets/styles/images/redmond/ui-bg_gloss-wave_55_5c9ccc_500x100.png) 50% 50% repeat-x; -} - -tr.setup:nth-child(odd) { - background: #FFFFFF; -} - -tr.setup:nth-child(even) { - background: #CCFFFF; -} - -td.setup { - padding: 1px 3px 1px 3px; -} -*/ - -/* - * Editor screens - */ -/* -table.editor { - margin-left: auto; - margin-right: auto; - border-collapse: collapse; - background-color: #eee; -} - -tr.editor { - height: 30px; -} - -td.editname { - width: 150px; - padding: 1px 3px 1px 3px; -} - -td.editfield { - width: 300px; - padding: 1px 3px 1px 3px; -} - -td.editsub { - width: 50px; - padding: 1px 3px 1px 3px; -} - -#jqxTabs { - width: 980px; - height: 440px; - float: left; -} - -*/ - .LEDred_on { margin: 5px auto;
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/www/getfermenter.php Thu Aug 09 21:52:01 2018 +0200 @@ -0,0 +1,16 @@ +<?php + +require_once('config.php'); + +if (isset($_GET["uuid"])) + $uuid = $_GET["uuid"]; +else + $uuid = "'ef166f25-1bb4-4bef-b112-a867af77f766'"; + + +$mysqli = new mysqli(DBASE_HOST,DBASE_USER,DBASE_PASS,DBASE_NAME); +$query = "SELECT * FROM fermenters WHERE uuid=".$uuid.""; +$result = $mysqli->query($query); +//Copy result into a associative array +$resultArray = $result->fetch_array(MYSQLI_ASSOC); +echo json_encode($resultArray);
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/www/getnode.php Thu Aug 09 21:52:01 2018 +0200 @@ -0,0 +1,16 @@ +<?php + +require_once('config.php'); + +if (isset($_GET["uuid"])) + $uuid = $_GET["uuid"]; +else + $uuid = "'c0c17800-fabb-4f22-a02a-4f83a7b1b21b'"; + + +$query = "SELECT * FROM nodes WHERE uuid=".$uuid.""; +$mysqli = new mysqli(DBASE_HOST,DBASE_USER,DBASE_PASS,DBASE_NAME); +$result = $mysqli->query($query); +//Copy result into a associative array +$resultArray = $result->fetch_array(MYSQLI_ASSOC); +echo json_encode($resultArray);
--- a/www/index.php Wed Aug 08 16:35:05 2018 +0200 +++ b/www/index.php Thu Aug 09 21:52:01 2018 +0200 @@ -1,121 +1,184 @@ <?php - - -/* - * Look for the style names in the jqwidgets/styles directory. - */ -$my_style = 'ui-redmond'; -//$my_style = 'ui-darkness'; -$my_style = 'metrodark'; -//$my_style = 'android'; - +$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); + } + }); -$outstr = '<!DOCTYPE html>'.PHP_EOL; -$outstr .= '<html lang="en">'.PHP_EOL; -$outstr .= ' <head>'.PHP_EOL; -$outstr .= ' <meta http-equiv="content-type" content="text/html; charset=utf-8" />'.PHP_EOL; -$outstr .= ' <title id="Description">Brewery Managment System v'.$my_version.'</title>'.PHP_EOL; -$outstr .= ' <link type="text/css" href="css/style.css" rel="stylesheet" media="all" />'.PHP_EOL; -$outstr .= ' <link type="text/css" href="jqwidgets/styles/jqx.base.css" rel="stylesheet" />'.PHP_EOL; -$outstr .= ' <link type="text/css" href="jqwidgets/styles/jqx.'.$my_style.'.css" rel="stylesheet" />'.PHP_EOL; -$outstr .= ' <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />'.PHP_EOL; -$outstr .= ' <script src="js/jquery-1.11.1.min.js"></script>'.PHP_EOL; -$outstr .= ' <script src="jqwidgets/jqxcore.js"></script>'.PHP_EOL; -$outstr .= ' <script src="jqwidgets/jqxbuttons.js"></script>'.PHP_EOL; -$outstr .= ' <script src="jqwidgets/jqxscrollbar.js"></script>'.PHP_EOL; -$outstr .= ' <script src="jqwidgets/jqxpanel.js"></script>'.PHP_EOL; -$outstr .= ' <script src="jqwidgets/jqxtree.js"></script>'.PHP_EOL; -$outstr .= ' <script src="jqwidgets/jqxexpander.js"></script>'.PHP_EOL; -$outstr .= ' <script src="jqwidgets/jqxsplitter.js"></script>'.PHP_EOL; -$outstr .= ' <script>'.PHP_EOL; -$outstr .= ' $(document).ready(function () {'.PHP_EOL; -$outstr .= ' // Create jqxTree'.PHP_EOL; -$outstr .= ' $("#splitter").jqxSplitter({ theme: "'.$my_style.'", width: 1278, height: 618, panels: [{ size: 250}] });'.PHP_EOL; -$outstr .= ' $("#jqxTree").jqxTree({ theme: "'.$my_style.'", height: "100%", width: "100%" });'.PHP_EOL; -/* - * Build the nodes subtree - */ -$outstr .= ' var nodeByID = $("#jqxTree").find("#Nodes")[0];'.PHP_EOL; -$outstr .= ' $.getJSON("getnodes.php", function(data) {'.PHP_EOL; -$outstr .= ' for( i = 0; i < data.length; i++ ) {'.PHP_EOL; -$outstr .= ' console.log( "JSON Data: " + data[i].uuid + " " + data[ i ].node );'.PHP_EOL; -$outstr .= ' $("#jqxTree").jqxTree("addTo", { id: data[i].uuid, label: data[i].node, icon: \'images/folder.png\' }, nodeByID);'.PHP_EOL; -$outstr .= ' }'.PHP_EOL; -$outstr .= ' });'.PHP_EOL; -/* - * Build the fermenters subtree - */ -$outstr .= ' var fermenterByID = $("#jqxTree").find("#Fermenters")[0];'.PHP_EOL; -$outstr .= ' $.getJSON("getfermenters.php", function(data) {'.PHP_EOL; -$outstr .= ' for( i = 0; i < data.length; i++ ) {'.PHP_EOL; -$outstr .= ' console.log( "JSON Data: " + data[i].uuid + " " + data[i].node );'.PHP_EOL; -$outstr .= ' $("#jqxTree").jqxTree("addTo", { id: data[i].uuid, label: data[i].node + "/" + data[i].alias, icon: \'images/folder.png\' }, fermenterByID);'.PHP_EOL; -$outstr .= ' }'.PHP_EOL; -$outstr .= ' });'.PHP_EOL; + $("#jqxTree").css("visibility", "visible"); -$outstr .= ' $("#jqxTree").css("visibility", "visible");'.PHP_EOL; -//$outstr .= ' $("#jqxTree").jqxTree("render");'.PHP_EOL; -$outstr .= ' $("#jqxTree").on("select", function (event) {'.PHP_EOL; -$outstr .= ' $("#ContentPanel").html("<div style=\'margin: 10px;\'>" + event.args.element.id + "</div>");'.PHP_EOL; -$outstr .= ' });'.PHP_EOL; -$outstr .= ' });'.PHP_EOL; -$outstr .= ' </script>'.PHP_EOL; -$outstr .= ' </head>'.PHP_EOL; -$outstr .= ' <body class="default">'.PHP_EOL; -$outstr .= ' <div id="jqxWidget">'.PHP_EOL; -$outstr .= ' <div id="header">'.PHP_EOL; -$outstr .= ' <div id="title">BMS '.$my_version.'</div>'.PHP_EOL; -$outstr .= ' </div> <!-- header -->'.PHP_EOL; -$outstr .= ' <div id="splitter">'.PHP_EOL; -$outstr .= ' <div> <!-- tree panel -->'.PHP_EOL; -$outstr .= ' <div style="visibility: hidden; border: none;" id=\'jqxTree\'>'.PHP_EOL; -$outstr .= ' <ul>'.PHP_EOL; -$outstr .= ' <li id="Root" item-expanded=\'true\'>'.PHP_EOL; -$outstr .= ' <img style=\'float: left; margin-right: 5px;\' src=\'images/earth.png\' />'.PHP_EOL; -$outstr .= ' <span item-title="true">Root</span>'.PHP_EOL; -$outstr .= ' <ul>'.PHP_EOL; -$outstr .= ' <li id="Nodes">'.PHP_EOL; -$outstr .= ' <img style=\'float: left; margin-right: 5px;\' src=\'images/folder.png\' />'.PHP_EOL; -$outstr .= ' <span item-title="true">Systemen</span>'.PHP_EOL; -// Subtree nodes -$outstr .= ' </li>'.PHP_EOL; -$outstr .= ' <li id="Fermenters">'.PHP_EOL; -$outstr .= ' <img style=\'float: left; margin-right: 5px;\' src=\'images/folder.png\' />'.PHP_EOL; -$outstr .= ' <span item-title="true">Klimatkasten</span>'.PHP_EOL; -// Subtree fermenters -$outstr .= ' </li>'.PHP_EOL; -$outstr .= ' <li id="Brewboards">'.PHP_EOL; -$outstr .= ' <img style=\'float: left; margin-right: 5px;\' src=\'images/settings.png\' />'.PHP_EOL; -$outstr .= ' <span item-title="true">Brouw apparatuur</span>'.PHP_EOL; -$outstr .= ' </li>'.PHP_EOL; -// TODO: Subtree brewboards -$outstr .= ' <li id="Prducing">'.PHP_EOL; -$outstr .= ' <img style=\'float: left; margin-right: 5px;\' src=\'images/system.png\' />'.PHP_EOL; -$outstr .= ' <span item-title="true">In productie</span>'.PHP_EOL; -$outstr .= ' </li>'.PHP_EOL; -// TODO: Subtree production -$outstr .= ' <li id="Recipes">'.PHP_EOL; -$outstr .= ' <img style=\'float: left; margin-right: 5px;\' src=\'images/beer.png\' />'.PHP_EOL; -$outstr .= ' <span item-title="true">Recepten</span>'.PHP_EOL; -$outstr .= ' </li>'.PHP_EOL; -// TODO: Subtree recipes. Verdelem in A B C D O ? -$outstr .= ' <li id="Settings">'.PHP_EOL; -$outstr .= ' <img style=\'float: left; margin-right: 5px;\' src=\'images/setupIcon.png\' />'.PHP_EOL; -$outstr .= ' <span item-title="true">Instellingen</span>'.PHP_EOL; -$outstr .= ' </li>'.PHP_EOL; -$outstr .= ' </ul>'.PHP_EOL; -$outstr .= ' </li>'.PHP_EOL; -$outstr .= ' </ul>'.PHP_EOL; -$outstr .= ' </div> <!-- jqxTree -->'.PHP_EOL; -$outstr .= ' </div> <!-- tree panel -->'.PHP_EOL; -$outstr .= ' <div id="ContentPanel">'.PHP_EOL; -$outstr .= ' </div>'.PHP_EOL; -$outstr .= ' </div> <!--- splitter -->'.PHP_EOL; -$outstr .= ' </div> <!-- jqxWidget -->'.PHP_EOL; -$outstr .= ' </body>'.PHP_EOL; -$outstr .= '</html>'.PHP_EOL; + $("#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 + "°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(); -echo $outstr; -?> + } 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>
