comparison: www/index.php
www/index.php
- changeset 6
- 366f270a2446
- parent 4
- 1750b6cae48e
- child 7
- 59048cd5f00d
equal
deleted
inserted
replaced
| 5:36387e45a194 | 6:366f270a2446 |
|---|---|
| 23 <script> | 23 <script> |
| 24 $(document).ready(function () { | 24 $(document).ready(function () { |
| 25 /* | 25 /* |
| 26 * Different right panel pages | 26 * Different right panel pages |
| 27 */ | 27 */ |
| 28 var aNode = '<div class="nodeContainer">Node scherm </div>'; | 28 var refreshIntervalId = 0; |
| 29 var aFermenter = '<div class="fermenterContainer">Fermenter scherm </div>'; | 29 var aFermenter = '<div class="fermenterContainer">Fermenter scherm </div>'; |
| 30 $("#splitter").jqxSplitter({ theme: "<?php echo $my_style; ?>", width: 1278, height: 618, panels: [{ size: 250}] }); | 30 $("#splitter").jqxSplitter({ theme: "<?php echo $my_style; ?>", width: 1278, height: 618, panels: [{ size: 250}] }); |
| 31 $("#jqxTree").jqxTree({ theme: "<?php echo $my_style; ?>", height: "100%", width: "100%" }); | 31 $("#jqxTree").jqxTree({ theme: "<?php echo $my_style; ?>", height: "100%", width: "100%" }); |
| 32 /* | 32 /* |
| 33 * Build the nodes subtree | 33 * Build the nodes subtree |
| 34 */ | 34 */ |
| 35 var nodeByID = $("#jqxTree").find("#Nodes")[0]; | 35 var nodeByID = $("#jqxTree").find("#Nodes")[0]; |
| 36 $.getJSON("getnodes.php", function(data) { | 36 $.getJSON("getnodes.php", function(data) { |
| 37 for( i = 0; i < data.length; i++ ) { | 37 for( i = 0; i < data.length; i++ ) { |
| 38 console.log( "JSON Data: " + data[i].uuid + " " + data[ i ].node ); | |
| 39 $("#jqxTree").jqxTree("addTo", { id: 'node-' + data[i].uuid, label: data[i].node, icon: 'images/folder.png' }, nodeByID); | 38 $("#jqxTree").jqxTree("addTo", { id: 'node-' + data[i].uuid, label: data[i].node, icon: 'images/folder.png' }, nodeByID); |
| 40 } | 39 } |
| 41 }); | 40 }); |
| 42 /* | 41 /* |
| 43 * Build the fermenters subtree | 42 * Build the fermenters subtree |
| 51 }); | 50 }); |
| 52 | 51 |
| 53 $("#jqxTree").css("visibility", "visible"); | 52 $("#jqxTree").css("visibility", "visible"); |
| 54 | 53 |
| 55 $("#jqxTree").on("select", function (event) { | 54 $("#jqxTree").on("select", function (event) { |
| 55 /* | |
| 56 * Cancel a running refresh loop. | |
| 57 */ | |
| 58 if (refreshIntervalId > 0) { | |
| 59 console.log( "RefreshIIntervald: " + refreshIntervalId + " stopped" ); | |
| 60 clearInterval(refreshIntervalId); | |
| 61 refreshIntervalId = 0; | |
| 62 } | |
| 56 /* | 63 /* |
| 57 * Process the selected id from the left panel tree and show the correct page in the right panel. | 64 * Process the selected id from the left panel tree and show the correct page in the right panel. |
| 58 */ | 65 */ |
| 59 var estr = event.args.element.id; | 66 var estr = event.args.element.id; |
| 60 if (estr == "Root") { | 67 if (estr == "Root") { |
| 99 html += "<table style='width: 100%; padding: 10px;'>"; | 106 html += "<table style='width: 100%; padding: 10px;'>"; |
| 100 html += "<tr><th colspan=2>Systeem overzicht</th></tr>"; | 107 html += "<tr><th colspan=2>Systeem overzicht</th></tr>"; |
| 101 html += "<tr><td>Uuid</td><td>" + record.uuid + "</td></tr>"; | 108 html += "<tr><td>Uuid</td><td>" + record.uuid + "</td></tr>"; |
| 102 html += "<tr><td>Systeem</td><td>" + record.node + "</td></tr>"; | 109 html += "<tr><td>Systeem</td><td>" + record.node + "</td></tr>"; |
| 103 html += "<tr><td>Online</td><td>" + record.online + "</td></tr>"; | 110 html += "<tr><td>Online</td><td>" + record.online + "</td></tr>"; |
| 104 html += "<tr><td>Type</td><td>" + record.group_id + "</td></tr>"; | 111 html += "<tr><td>Type</td><td>" + record.group_id + "</td></tr>"; |
| 112 html += "<tr><td>Eerst gezien</td><td>" + record.firstseen + "</td></tr>"; | |
| 113 html += "<tr><td>Laatst gezien</td><td>" + record.lastseen + "</td></tr>"; | |
| 105 html += "<tr><td>Hardware maker</td><td>" + record.hardwaremake+ "</td></tr>"; | 114 html += "<tr><td>Hardware maker</td><td>" + record.hardwaremake+ "</td></tr>"; |
| 106 html += "<tr><td>Hardware model</td><td>" + record.harwaremodel+ "</td></tr>"; | 115 html += "<tr><td>Hardware model</td><td>" + record.harwaremodel+ "</td></tr>"; |
| 107 html += "<tr><td>OS</td><td>" + record.os + " versie: " + record.os_version + "</td></tr>"; | 116 html += "<tr><td>OS</td><td>" + record.os + " versie: " + record.os_version + "</td></tr>"; |
| 108 html += "<tr><td>Firmware</td><td>" + record.firmware + "</td></tr>"; | 117 html += "<tr><td>Firmware</td><td>" + record.firmware + "</td></tr>"; |
| 109 html += "<tr><td>Temperatuur</td><td>" + record.temperature + "°C</td></tr>"; | 118 html += "<tr><td>Temperatuur</td><td>" + record.temperature + "°C</td></tr>"; |
| 113 html += "<tr><td>Netwerk</td><td>"+ record.net_ifname + " " + record.net_address + "</td></tr>"; | 122 html += "<tr><td>Netwerk</td><td>"+ record.net_ifname + " " + record.net_address + "</td></tr>"; |
| 114 html += "</<table>"; | 123 html += "</<table>"; |
| 115 html += "</div>"; | 124 html += "</div>"; |
| 116 $("#ContentPanel").html(html); | 125 $("#ContentPanel").html(html); |
| 117 } | 126 } |
| 118 /* Data formatteren etc. Zie https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdataadapter/index.htm#demos/jqxdataadapter/bindingtojson.htm */ | 127 }); |
| 119 }); | 128 // Get the data immediatly and then at regular intervals to refresh. |
| 120 dataAdapter.dataBind(); | 129 dataAdapter.dataBind(); |
| 130 refreshIntervalId = setInterval(function(){ | |
| 131 dataAdapter.dataBind(); | |
| 132 }, 30000); | |
| 121 | 133 |
| 122 } else if (estr.indexOf("fermenter-", 0) == 0) { | 134 } else if (estr.indexOf("fermenter-", 0) == 0) { |
| 123 var uuid = estr.substr(10); | 135 var uuid = estr.substr(10); |
| 124 $("#ContentPanel").html("<div style='margin: 10px;'>" + uuid + "</div>"); | 136 $("#ContentPanel").html("<div style='margin: 10px;'>" + uuid + "</div>"); |
| 125 } else if (event.args.element.id == "Nodes") { | 137 } else if (event.args.element.id == "Nodes") { |
| 126 $("#ContentPanel").html(aNode); | 138 $("#ContentPanel").html("<div></div"); |
| 127 } else { | 139 } else { |
| 128 $("#ContentPanel").html("<div style='margin: 10px;'>" + event.args.element.id + "</div>"); | 140 $("#ContentPanel").html("<div style='margin: 10px;'>" + event.args.element.id + "</div>"); |
| 129 } | 141 } |
| 130 }); | 142 }); |
| 131 }); | 143 }); |
| 150 <span item-title="true">Systemen</span> | 162 <span item-title="true">Systemen</span> |
| 151 <!-- Subtree nodes --> | 163 <!-- Subtree nodes --> |
| 152 </li> | 164 </li> |
| 153 <li id="Fermenters"> | 165 <li id="Fermenters"> |
| 154 <img style='float: left; margin-right: 5px;' src='images/folder.png' /> | 166 <img style='float: left; margin-right: 5px;' src='images/folder.png' /> |
| 155 <span item-title="true">Klimatkasten</span> | 167 <span item-title="true">Klimaatkasten</span> |
| 156 <!-- Subtree fermenters --> | 168 <!-- Subtree fermenters --> |
| 157 </li> | 169 </li> |
| 158 <li id="Brewboards"> | 170 <li id="Brewboards"> |
| 159 <img src='images/settings.png' /> | 171 <img src='images/settings.png' /> |
| 160 <span item-title="true">Brouw apparatuur</span> | 172 <span item-title="true">Brouw apparatuur</span> |
