Mercurial > bms / file comparison

comparison: www/index.php

www/index.php

changeset 4
1750b6cae48e
parent 3
37a8c7ec9d3e
child 6
366f270a2446
equal deleted inserted replaced
3:37a8c7ec9d3e 4:1750b6cae48e
1 <?php 1 <?php
2 $my_style = 'android';
3 require_once('version.php');
4 ?>
5 <!DOCTYPE html>
6 <html lang="en">
7 <head>'
8 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
9 <title id='Description'>Brewery Managment System v<?php echo $my_version; ?></title>
10 <link type="text/css" href="css/style.css" rel="stylesheet" media="all" />
11 <link type="text/css" href="jqwidgets/styles/jqx.base.css" rel="stylesheet" />
12 <link type="text/css" href="jqwidgets/styles/jqx.<?php echo $my_style; ?>.css" rel="stylesheet" />
13 <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
14 <script src="js/jquery-1.11.1.min.js"></script>
15 <script src="jqwidgets/jqxcore.js"></script>
16 <script src="jqwidgets/jqxbuttons.js"></script>
17 <script src="jqwidgets/jqxscrollbar.js"></script>
18 <script src="jqwidgets/jqxpanel.js"></script>
19 <script src="jqwidgets/jqxtree.js"></script>
20 <script src="jqwidgets/jqxexpander.js"></script>
21 <script src="jqwidgets/jqxsplitter.js"></script>
22 <script src="jqwidgets/jqxdata.js"></script>
23 <script>
24 $(document).ready(function () {
25 /*
26 * Different right panel pages
27 */
28 var aNode = '<div class="nodeContainer">Node 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}] });
31 $("#jqxTree").jqxTree({ theme: "<?php echo $my_style; ?>", height: "100%", width: "100%" });
32 /*
33 * Build the nodes subtree
34 */
35 var nodeByID = $("#jqxTree").find("#Nodes")[0];
36 $.getJSON("getnodes.php", function(data) {
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);
40 }
41 });
42 /*
43 * Build the fermenters subtree
44 */
45 var fermenterByID = $("#jqxTree").find("#Fermenters")[0];
46 $.getJSON("getfermenters.php", function(data) {
47 for( i = 0; i < data.length; i++ ) {
48 console.log( "JSON Data: " + data[i].uuid + " " + data[i].node );
49 $("#jqxTree").jqxTree("addTo", { id: 'fermenter-' + data[i].uuid, label: data[i].node + "/" + data[i].alias, icon: 'images/folder.png' }, fermenterByID);
50 }
51 });
2 52
53 $("#jqxTree").css("visibility", "visible");
3 54
4 /* 55 $("#jqxTree").on("select", function (event) {
5 * Look for the style names in the jqwidgets/styles directory. 56 /*
6 */ 57 * Process the selected id from the left panel tree and show the correct page in the right panel.
7 $my_style = 'ui-redmond'; 58 */
8 //$my_style = 'ui-darkness'; 59 var estr = event.args.element.id;
9 $my_style = 'metrodark'; 60 if (estr == "Root") {
10 //$my_style = 'android'; 61 $("#ContentPanel").html("<div style='margin: 10px;'>RrrR</div>");
62 } else if (estr.indexOf("node-", 0) == 0) {
63 // Load and show a node.
64 // The parameter is: node-36d4d030-4d62-4f2f-a96b-472e643687f7
65 var uuid = estr.substr(5);
66 var url = "getnode.php?uuid='" + uuid + "'";
67 var source = {
68 datatype: "json",
69 datafields: [
70 { name: 'record', type: 'int' },
71 { name: 'uuid', type: 'string' },
72 { name: 'node', type: 'string' },
73 { name: 'online', type: 'string' },
74 { name: 'group_id', type: 'string' },
75 { name: 'hardwaremake', type: 'string' },
76 { name: 'hardwaremodel', type: 'string' },
77 { name: 'os', type: 'string' },
78 { name: 'os_version', type: 'string' },
79 { name: 'firmware', type: 'string' },
80 { name: 'firstseen', type: 'string' },
81 { name: 'lastseen', type: 'string' },
82 { name: 'temperature', type: 'float' },
83 { name: 'humidity', type: 'float' },
84 { name: 'barometer', type: 'float' },
85 { name: 'gps_latitude', type: 'float' },
86 { name: 'gps_longitude', type: 'float' },
87 { name: 'gps_altitude', type: 'float' },
88 { name: 'net_address', type: 'string' },
89 { name: 'net_ifname', type: 'string' },
90 { name: 'net_rssi', type: 'int' }
91 ],
92 id: 'record',
93 url: url
94 };
95 var dataAdapter = new $.jqx.dataAdapter(source, {
96 loadComplete: function (records) {
97 var record = dataAdapter.records[0];
98 var html = "<div style='background: #252526; margin: 50px;'>";
99 html += "<table style='width: 100%; padding: 10px;'>";
100 html += "<tr><th colspan=2>Systeem overzicht</th></tr>";
101 html += "<tr><td>Uuid</td><td>" + record.uuid + "</td></tr>";
102 html += "<tr><td>Systeem</td><td>" + record.node + "</td></tr>";
103 html += "<tr><td>Online</td><td>" + record.online + "</td></tr>";
104 html += "<tr><td>Type</td><td>" + record.group_id + "</td></tr>";
105 html += "<tr><td>Hardware maker</td><td>" + record.hardwaremake+ "</td></tr>";
106 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>";
108 html += "<tr><td>Firmware</td><td>" + record.firmware + "</td></tr>";
109 html += "<tr><td>Temperatuur</td><td>" + record.temperature + "&deg;C</td></tr>";
110 html += "<tr><td>Vochtigheid</td><td>" + record.humidity + "%</td></tr>";
111 html += "<tr><td>Luchtdruk</td><td>" + record.barometer + "</td></tr>";
112 html += "<tr><td>GPS</td><td>"+ record.gps_latitude + " " + record.gps_longitude + " " + record.gps_altitude + "</td></tr>";
113 html += "<tr><td>Netwerk</td><td>"+ record.net_ifname + " " + record.net_address + "</td></tr>";
114 html += "</<table>";
115 html += "</div>";
116 $("#ContentPanel").html(html);
117 }
118 /* Data formatteren etc. Zie https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdataadapter/index.htm#demos/jqxdataadapter/bindingtojson.htm */
119 });
120 dataAdapter.dataBind();
11 121
12 require_once('version.php'); 122 } else if (estr.indexOf("fermenter-", 0) == 0) {
123 var uuid = estr.substr(10);
124 $("#ContentPanel").html("<div style='margin: 10px;'>" + uuid + "</div>");
125 } else if (event.args.element.id == "Nodes") {
126 $("#ContentPanel").html(aNode);
127 } else {
128 $("#ContentPanel").html("<div style='margin: 10px;'>" + event.args.element.id + "</div>");
129 }
130 });
131 });
132 </script>
133 </head>
13 134
14 135 <body class="default">
15 $outstr = '<!DOCTYPE html>'.PHP_EOL; 136 <div id="jqxWidget">
16 $outstr .= '<html lang="en">'.PHP_EOL; 137 <div id="header">
17 $outstr .= ' <head>'.PHP_EOL; 138 <div id="title">BMS <?php echo $my_version; ?></div>
18 $outstr .= ' <meta http-equiv="content-type" content="text/html; charset=utf-8" />'.PHP_EOL; 139 </div> <!-- header -->
19 $outstr .= ' <title id="Description">Brewery Managment System v'.$my_version.'</title>'.PHP_EOL; 140 <div id="splitter">
20 $outstr .= ' <link type="text/css" href="css/style.css" rel="stylesheet" media="all" />'.PHP_EOL; 141 <div> <!-- tree panel -->
21 $outstr .= ' <link type="text/css" href="jqwidgets/styles/jqx.base.css" rel="stylesheet" />'.PHP_EOL; 142 <div style="visibility: hidden; border: none;" id='jqxTree'>
22 $outstr .= ' <link type="text/css" href="jqwidgets/styles/jqx.'.$my_style.'.css" rel="stylesheet" />'.PHP_EOL; 143 <ul>
23 $outstr .= ' <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />'.PHP_EOL; 144 <li id="Root" item-expanded='true'>
24 $outstr .= ' <script src="js/jquery-1.11.1.min.js"></script>'.PHP_EOL; 145 <img style='float: left; margin-right: 5px;' src='images/earth.png' />
25 $outstr .= ' <script src="jqwidgets/jqxcore.js"></script>'.PHP_EOL; 146 <span item-title="true">Root</span>
26 $outstr .= ' <script src="jqwidgets/jqxbuttons.js"></script>'.PHP_EOL; 147 <ul>
27 $outstr .= ' <script src="jqwidgets/jqxscrollbar.js"></script>'.PHP_EOL; 148 <li id="Nodes">
28 $outstr .= ' <script src="jqwidgets/jqxpanel.js"></script>'.PHP_EOL; 149 <img style='float: left; margin-right: 5px;' src='images/folder.png' />
29 $outstr .= ' <script src="jqwidgets/jqxtree.js"></script>'.PHP_EOL; 150 <span item-title="true">Systemen</span>
30 $outstr .= ' <script src="jqwidgets/jqxexpander.js"></script>'.PHP_EOL; 151 <!-- Subtree nodes -->
31 $outstr .= ' <script src="jqwidgets/jqxsplitter.js"></script>'.PHP_EOL; 152 </li>
32 $outstr .= ' <script>'.PHP_EOL; 153 <li id="Fermenters">
33 $outstr .= ' $(document).ready(function () {'.PHP_EOL; 154 <img style='float: left; margin-right: 5px;' src='images/folder.png' />
34 $outstr .= ' // Create jqxTree'.PHP_EOL; 155 <span item-title="true">Klimatkasten</span>
35 $outstr .= ' $("#splitter").jqxSplitter({ theme: "'.$my_style.'", width: 1278, height: 618, panels: [{ size: 250}] });'.PHP_EOL; 156 <!-- Subtree fermenters -->
36 $outstr .= ' $("#jqxTree").jqxTree({ theme: "'.$my_style.'", height: "100%", width: "100%" });'.PHP_EOL; 157 </li>
37 /* 158 <li id="Brewboards">
38 * Build the nodes subtree 159 <img src='images/settings.png' />
39 */ 160 <span item-title="true">Brouw apparatuur</span>
40 $outstr .= ' var nodeByID = $("#jqxTree").find("#Nodes")[0];'.PHP_EOL; 161 </li>
41 $outstr .= ' $.getJSON("getnodes.php", function(data) {'.PHP_EOL; 162 <li id="Prducing">
42 $outstr .= ' for( i = 0; i < data.length; i++ ) {'.PHP_EOL; 163 <img src='images/system.png' />
43 $outstr .= ' console.log( "JSON Data: " + data[i].uuid + " " + data[ i ].node );'.PHP_EOL; 164 <span item-title="true">In productie</span>
44 $outstr .= ' $("#jqxTree").jqxTree("addTo", { id: data[i].uuid, label: data[i].node, icon: \'images/folder.png\' }, nodeByID);'.PHP_EOL; 165 </li>
45 $outstr .= ' }'.PHP_EOL; 166 <li id="Recipes">
46 $outstr .= ' });'.PHP_EOL; 167 <img style='float: left; margin-right: 5px;' src='images/beer.png' />
47 /* 168 <span item-title="true">Recepten</span>
48 * Build the fermenters subtree 169 </li>
49 */ 170 <li id="Settings">
50 $outstr .= ' var fermenterByID = $("#jqxTree").find("#Fermenters")[0];'.PHP_EOL; 171 <img style='float: left; margin-right: 5px;' src='images/setupIcon.png' />
51 $outstr .= ' $.getJSON("getfermenters.php", function(data) {'.PHP_EOL; 172 <span item-title="true">Instellingen</span>
52 $outstr .= ' for( i = 0; i < data.length; i++ ) {'.PHP_EOL; 173 </li>
53 $outstr .= ' console.log( "JSON Data: " + data[i].uuid + " " + data[i].node );'.PHP_EOL; 174 </ul>
54 $outstr .= ' $("#jqxTree").jqxTree("addTo", { id: data[i].uuid, label: data[i].node + "/" + data[i].alias, icon: \'images/folder.png\' }, fermenterByID);'.PHP_EOL; 175 </li>
55 $outstr .= ' }'.PHP_EOL; 176 </ul>
56 $outstr .= ' });'.PHP_EOL; 177 </div> <!-- jqxTree -->
57 178 </div> <!-- tree panel -->
58 $outstr .= ' $("#jqxTree").css("visibility", "visible");'.PHP_EOL; 179 <div id="ContentPanel">
59 //$outstr .= ' $("#jqxTree").jqxTree("render");'.PHP_EOL; 180 </div>
60 $outstr .= ' $("#jqxTree").on("select", function (event) {'.PHP_EOL; 181 </div> <!--- splitter -->
61 $outstr .= ' $("#ContentPanel").html("<div style=\'margin: 10px;\'>" + event.args.element.id + "</div>");'.PHP_EOL; 182 </div> <!-- jqxWidget -->
62 $outstr .= ' });'.PHP_EOL; 183 </body>
63 $outstr .= ' });'.PHP_EOL; 184 </html>
64 $outstr .= ' </script>'.PHP_EOL;
65 $outstr .= ' </head>'.PHP_EOL;
66 $outstr .= ' <body class="default">'.PHP_EOL;
67 $outstr .= ' <div id="jqxWidget">'.PHP_EOL;
68 $outstr .= ' <div id="header">'.PHP_EOL;
69 $outstr .= ' <div id="title">BMS '.$my_version.'</div>'.PHP_EOL;
70 $outstr .= ' </div> <!-- header -->'.PHP_EOL;
71 $outstr .= ' <div id="splitter">'.PHP_EOL;
72 $outstr .= ' <div> <!-- tree panel -->'.PHP_EOL;
73 $outstr .= ' <div style="visibility: hidden; border: none;" id=\'jqxTree\'>'.PHP_EOL;
74 $outstr .= ' <ul>'.PHP_EOL;
75 $outstr .= ' <li id="Root" item-expanded=\'true\'>'.PHP_EOL;
76 $outstr .= ' <img style=\'float: left; margin-right: 5px;\' src=\'images/earth.png\' />'.PHP_EOL;
77 $outstr .= ' <span item-title="true">Root</span>'.PHP_EOL;
78 $outstr .= ' <ul>'.PHP_EOL;
79 $outstr .= ' <li id="Nodes">'.PHP_EOL;
80 $outstr .= ' <img style=\'float: left; margin-right: 5px;\' src=\'images/folder.png\' />'.PHP_EOL;
81 $outstr .= ' <span item-title="true">Systemen</span>'.PHP_EOL;
82 // Subtree nodes
83 $outstr .= ' </li>'.PHP_EOL;
84 $outstr .= ' <li id="Fermenters">'.PHP_EOL;
85 $outstr .= ' <img style=\'float: left; margin-right: 5px;\' src=\'images/folder.png\' />'.PHP_EOL;
86 $outstr .= ' <span item-title="true">Klimatkasten</span>'.PHP_EOL;
87 // Subtree fermenters
88 $outstr .= ' </li>'.PHP_EOL;
89 $outstr .= ' <li id="Brewboards">'.PHP_EOL;
90 $outstr .= ' <img style=\'float: left; margin-right: 5px;\' src=\'images/settings.png\' />'.PHP_EOL;
91 $outstr .= ' <span item-title="true">Brouw apparatuur</span>'.PHP_EOL;
92 $outstr .= ' </li>'.PHP_EOL;
93 // TODO: Subtree brewboards
94 $outstr .= ' <li id="Prducing">'.PHP_EOL;
95 $outstr .= ' <img style=\'float: left; margin-right: 5px;\' src=\'images/system.png\' />'.PHP_EOL;
96 $outstr .= ' <span item-title="true">In productie</span>'.PHP_EOL;
97 $outstr .= ' </li>'.PHP_EOL;
98 // TODO: Subtree production
99 $outstr .= ' <li id="Recipes">'.PHP_EOL;
100 $outstr .= ' <img style=\'float: left; margin-right: 5px;\' src=\'images/beer.png\' />'.PHP_EOL;
101 $outstr .= ' <span item-title="true">Recepten</span>'.PHP_EOL;
102 $outstr .= ' </li>'.PHP_EOL;
103 // TODO: Subtree recipes. Verdelem in A B C D O ?
104 $outstr .= ' <li id="Settings">'.PHP_EOL;
105 $outstr .= ' <img style=\'float: left; margin-right: 5px;\' src=\'images/setupIcon.png\' />'.PHP_EOL;
106 $outstr .= ' <span item-title="true">Instellingen</span>'.PHP_EOL;
107 $outstr .= ' </li>'.PHP_EOL;
108 $outstr .= ' </ul>'.PHP_EOL;
109 $outstr .= ' </li>'.PHP_EOL;
110 $outstr .= ' </ul>'.PHP_EOL;
111 $outstr .= ' </div> <!-- jqxTree -->'.PHP_EOL;
112 $outstr .= ' </div> <!-- tree panel -->'.PHP_EOL;
113 $outstr .= ' <div id="ContentPanel">'.PHP_EOL;
114 $outstr .= ' </div>'.PHP_EOL;
115 $outstr .= ' </div> <!--- splitter -->'.PHP_EOL;
116 $outstr .= ' </div> <!-- jqxWidget -->'.PHP_EOL;
117 $outstr .= ' </body>'.PHP_EOL;
118 $outstr .= '</html>'.PHP_EOL;
119
120 echo $outstr;
121 ?>

Mercurial Repository: bms

mercurial