# HG changeset patch
# User Michiel Broek <mbroek@mbse.eu>
# Date 1405955768 -7200
# Node ID 7c8f35a43cece73f7c0786aaa66f8367f8ae5875
# Parent  7119ea8a5225e715408589a7d9233b13fe09a50e
Added maintenance window with only two buttons yet

diff -r 7119ea8a5225 -r 7c8f35a43cec www-thermferm/css/style.css
--- a/www-thermferm/css/style.css	Sun Jul 20 23:09:50 2014 +0200
+++ b/www-thermferm/css/style.css	Mon Jul 21 17:16:08 2014 +0200
@@ -36,53 +36,39 @@
 #jqxWidget {
     width: 980px;
     height: 510px;
-//    background: #ddd;
     float: left;
 }
 
 #header {
     width: 980px;
-    height: 60px;
-//    background: #222;
-//    margin: 5px;
+    height: 80px;
     float: left;
 }
 
 #jqxTabs {
     width: 980px;
-    height: 460px;
+    height: 440px;
     float: left;
 }
 
 
 #fermentor {
-    border: 5px solid;
-    border-color: #FFCC01;
-    border-radius: 15px 15px 15px 15px;
-    height: 393px;
-    width: 958px;
+    height: 382px;
+    width: 968px;
     background: #fff;
     margin: 5px;
     float: left;
 }
 
-#fermentor_head {
-    margin-bottom: 1px;
-    padding: 3px 10px 8px;
-    background-color: #FFCC01;
-    color: #666666;
-    font-weight: bold;
-}
-
 #fermentor_pict {
     width: 220px;
-    height: 350px;
+    height: 382px;
     float: left;
 }
 
 #fermentor_panel {
     width: 240px;
-    height: 350px;
+    height: 382px;
     float: left;
     background-color: #f0f0f0;
 }
diff -r 7119ea8a5225 -r 7c8f35a43cec www-thermferm/index.php
--- a/www-thermferm/index.php	Sun Jul 20 23:09:50 2014 +0200
+++ b/www-thermferm/index.php	Mon Jul 21 17:16:08 2014 +0200
@@ -24,7 +24,7 @@
 /*
  * Look for the style names in the jqwidgets/styles directory.
  */
-$my_style = 'fresh';
+$my_style = 'ui-redmond';
 
 require_once('liveview.php');
 
@@ -39,27 +39,65 @@
 $outstr .= '  <link type="text/css" href="jqwidgets/styles/jqx.'.$my_style.'.css" rel="stylesheet" />'.PHP_EOL;
 $outstr .= '  <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>'.PHP_EOL;
 $outstr .= '  <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>'.PHP_EOL;
+$outstr .= '  <script type="text/javascript" src="jqwidgets/jqxwindow.js"></script>'.PHP_EOL;
 $outstr .= '  <script type="text/javascript" src="jqwidgets/jqxtabs.js"></script>'.PHP_EOL;
 $outstr .= '  <script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script>'.PHP_EOL;
 $outstr .= '  <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>'.PHP_EOL;
 $outstr .= '  <script type="text/javascript" src="jqwidgets/jqxradiobutton.js"></script>'.PHP_EOL;
 $outstr .= '  <script type="text/javascript">'.PHP_EOL;
+
+$outstr .= '   function addEventListeners() {'.PHP_EOL;
+$outstr .= '     $("#maintenance").mousedown(function () {'.PHP_EOL;
+$outstr .= '       $("#maintenance_window").jqxWindow(\'open\');'.PHP_EOL;
+$outstr .= '     });'.PHP_EOL;
+
+$outstr .= '   }'.PHP_EOL;
+
+$outstr .= '   function createMaintenance() {'.PHP_EOL;
+$outstr .= '       $("#maintenance_window").jqxWindow({'.PHP_EOL;
+$outstr .= '         height: 400, width: 800, autoOpen: false, theme: \''.$my_style.'\', '.PHP_EOL;
+$outstr .= '         position: { x:100, y:50 }, '.PHP_EOL;
+$outstr .= '         resizable: false, isModal: true, modalOpacity: 0.5, '.PHP_EOL;
+$outstr .= '         okButton: $("#maintenance_ok"), cancelButton: $("#maintenance_cancel"),'.PHP_EOL;
+$outstr .= '         initContent: function () {'.PHP_EOL;
+$outstr .= '           $("#maintenance_ok").jqxButton({ width: \'65px\', height: \'25\', theme: \''.$my_style.'\' });'.PHP_EOL;
+$outstr .= '           $("#maintenance_cancel").jqxButton({ width: \'65px\', height: \'25\', theme: \''.$my_style.'\' });'.PHP_EOL;
+//$outstr .= '           $("#ok").focus();'.PHP_EOL;
+$outstr .= '         }'.PHP_EOL;
+$outstr .= '       });'.PHP_EOL;
+$outstr .= '       $("#maintenance").jqxButton({ width: \'150\', height: \'25\', theme: \''.$my_style.'\'});'.PHP_EOL;
+$outstr .= '   }'.PHP_EOL;
+
 $outstr .= '   $(document).ready(function () {'.PHP_EOL;
 $outstr .= '     // Create jqxTabs.'.PHP_EOL;
-$outstr .= '     $(\'#jqxTabs\').jqxTabs({ width: \'978\', height: 448, position: \'top\', theme: \''.$my_style.'\'});'.PHP_EOL;
-$outstr .= '     $("#maintenance").jqxButton({ width: \'150\', height: \'25\', theme: \''.$my_style.'\'});'.PHP_EOL;
+$outstr .= '     $(\'#jqxTabs\').jqxTabs({ width: \'978\', height: 428, position: \'top\', theme: \''.$my_style.'\'});'.PHP_EOL;
+$outstr .= '     addEventListeners();'.PHP_EOL;
+$outstr .= '     createMaintenance();'.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 .= '    <button class="script-status ui-state-error">Status</button>'.PHP_EOL;
-$outstr .= '    <button id="maintenance">Maintenance panel</button>'.PHP_EOL;
+$outstr .= '    <input type="button" id="maintenance" value="Maintenance panel" />'.PHP_EOL;
 $outstr .= '   </div> <!-- header -->'.PHP_EOL;
 $outstr .= liveview();
+
+/* The maintenance popup window */
+$outstr .= '   <div id="maintenance_window">'.PHP_EOL;
+$outstr .= '    <div id="maintenance_header">'.PHP_EOL;
+$outstr .= '     Maintenance panel'.PHP_EOL;
+$outstr .= '    </div>'.PHP_EOL;
+$outstr .= '    <div id="maintenance_content">'.PHP_EOL;
+$outstr .= '     Maintenancecontent'.PHP_EOL;
+$outstr .= '     <input type="button" id="maintenance_ok" value="OK" style="margin-right: 10px" />'.PHP_EOL;
+$outstr .= '     <input type="button" id="maintenance_cancel" value="Cancel" />'.PHP_EOL;
+$outstr .= '    </div>'.PHP_EOL;
+$outstr .= '   </div> <!-- maintenance_window -->'.PHP_EOL;
+
 $outstr .= '  </div> <!-- jqxWidget -->'.PHP_EOL;
-$outstr .= '  <!-- Load scripts after the body, so they don\'t block rendering of the page -->'.PHP_EOL;
 $outstr .= ' </body>'.PHP_EOL;
 $outstr .= '</html>'.PHP_EOL;
 
diff -r 7119ea8a5225 -r 7c8f35a43cec www-thermferm/liveview.php
--- a/www-thermferm/liveview.php	Sun Jul 20 23:09:50 2014 +0200
+++ b/www-thermferm/liveview.php	Mon Jul 21 17:16:08 2014 +0200
@@ -73,6 +73,9 @@
 	$outstr .= '     });'.PHP_EOL;
 	$outstr .= '    </script>'.PHP_EOL;
 	$outstr .= '    <div id="fermentor">'.PHP_EOL;
+        $outstr .= '     <div id="fermentor_pict">'.PHP_EOL;
+	$outstr .= '      <img src="images/Fermenter_60l.gif">'.PHP_EOL;
+	$outstr .= '     </div>'.PHP_EOL;
 
 	$set_temperature = "N/A";
 	$air_temperature = "N/A";
@@ -80,18 +83,6 @@
 
 	foreach($arr as $l) {
 	    $vals = explode(",", $l);
-	    if (strcmp($vals[0], "NAME") == 0) {
-		/*
-		 * The name is allways first, so when we have it
-		 * emit the formatting.
-		 */
-		$outstr .= '     <div id="fermentor_head">'.PHP_EOL;
-		$outstr .= '      ' . $vals[1] .PHP_EOL;
-		$outstr .= '     </div>'.PHP_EOL;
-		$outstr .= '     <div id="fermentor_pict">'.PHP_EOL;
-		$outstr .= '      <img src="images/Fermenter_60l.gif">'.PHP_EOL;
-		$outstr .= '     </div>'.PHP_EOL;
-	    }
 	    if (strcmp($vals[0], "MODE") == 0) {
 		$mode = $vals[1];
 	    }