www/index.php

changeset 2
282e7d2bb28a
child 3
37a8c7ec9d3e
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/www/index.php	Tue Aug 07 16:42:49 2018 +0200
@@ -0,0 +1,121 @@
+<?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';
+
+require_once('version.php');
+
+
+$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;
+
+$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/settings.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/settings.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/settings.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;
+
+echo $outstr;
+?>

mercurial