More progress on the recipes design

Tue, 04 Sep 2018 23:12:13 +0200

author
Michiel Broek <mbroek@mbse.eu>
date
Tue, 04 Sep 2018 23:12:13 +0200
changeset 52
b1f2a893572f
parent 51
7224109adfe1
child 53
a17c644a0510

More progress on the recipes design

www/includes/db_recipes.php file | annotate | diff | comparison | revisions
www/includes/global.inc.php file | annotate | diff | comparison | revisions
www/inv_suppliers.php file | annotate | diff | comparison | revisions
www/js/recipes.js file | annotate | diff | comparison | revisions
www/recipes.php file | annotate | diff | comparison | revisions
--- a/www/includes/db_recipes.php	Tue Sep 04 13:44:02 2018 +0200
+++ b/www/includes/db_recipes.php	Tue Sep 04 23:12:13 2018 +0200
@@ -17,44 +17,74 @@
 
 // get data and store in a json array
 $query = "SELECT * FROM recipes ORDER BY st_guide,st_letter,st_name,name";
-if (isset($_GET['insert'])) {
-//	// INSERT COMMAND
-//	$sql  = "INSERT INTO `profile_mash` SET name='" . mysqli_real_escape_string($connect, $_GET['name']);
-//	$sql .= "', notes='" . mysqli_real_escape_string($connect, $_GET['notes']);
-//	$sql .= "', steps='" . json_encode($_GET['steps']);
-//	$sql .= "';";
+if (isset($_GET['insert']) || isset($_GET['update'])) {
+	if (isset($_GET['insert'])) {
+		// INSERT COMMAND
+		$sql  = "INSERT INTO `recipes` SET st_name='" . mysqli_real_escape_string($connect, $_GET['st_name']);
+	}
+	if (isset($_GET['update'])) {
+		// UPDATE COMMAND
+		$sql  = "UPDATE `recipes` SET st_name='" . mysqli_real_escape_string($connect, $_GET['st_name']);
+	}
+	$sql .= "', st_letter='" . mysqli_real_escape_string($connect, $_GET['st_letter']);
+	$sql .= "', st_guide='" . mysqli_real_escape_string($connect, $_GET['st_guide']);
+	$sql .= "', st_og_min='" . $_GET['st_og_min'];
+	$sql .= "', st_og_max='" . $_GET['st_og_max'];
+	$sql .= "', st_fg_min='" . $_GET['st_fg_min'];
+	$sql .= "', st_fg_max='" . $_GET['st_fg_max'];
+	$sql .= "', st_ibu_min='" . $_GET['st_ibu_min'];
+	$sql .= "', st_ibu_max='" . $_GET['st_ibu_max'];
+	$sql .= "', st_color_min='" . $_GET['st_color_min'];
+	$sql .= "', st_color_max='" . $_GET['st_color_max'];
+	$sql .= "', st_carb_min='" . $_GET['st_carb_min'];
+	$sql .= "', st_carb_max='" . $_GET['st_carb_max'];
+	$sql .= "', st_abv_min='" . $_GET['st_abv_min'];
+	$sql .= "', st_abv_max='" . $_GET['st_abv_max'];
+	$sql .= "', name='" . mysqli_real_escape_string($connect, $_GET['name']);
+	$sql .= "', notes='" . mysqli_real_escape_string($connect, $_GET['notes']);
+	$sql .= "', type='" . $_GET['type'];
+	$sql .= "', batch_size='" . $_GET['batch_size'];
+	$sql .= "', boil_time='" . $_GET['boil_time'];
+	$sql .= "', efficiency='" . $_GET['efficiency'];
+	$sql .= "', est_og='" . $_GET['est_og'];
+	$sql .= "', est_fg='" . $_GET['est_fg'];
+	$sql .= "', est_color='" . $_GET['est_color'];
+	$sql .= "', color_method='" . $_GET['color_method'];
+	$sql .= "', est_ibu='" . $_GET['est_ibu'];
+	$sql .= "', ibu_method='" . $_GET['ibu_method'];
+	$sql .= "', mash_sparge_temp='" . $_GET['mash_sparge_temp'];
+	$sql .= "', mash_ph='" . $_GET['mash_ph'];
+	$sql .= "', mash_name='" . $_GET['mash_name'];
+
+	syslog(LOG_NOTICE, $sql);	// Log upto this part.
+
+	 syslog(LOG_NOTICE, "json_waters: " . json_encode($_GET['waters']));
+	$sql .= "', json_waters='" . json_encode($_GET['waters']);
+
+	if (isset($_GET['insert'])) {
+		$sql .= "';";
+	}
+	if (isset($_GET['update'])) {
+		$sql .= "' WHERE record='" . $_GET['record'] . "';";
+	}
 //	$result = mysqli_query($connect, $sql);
 //	if (! $result) {
-//		syslog(LOG_NOTICE, "db_profile_mash: ".$sql." result: ".mysqli_error($connect));
+//		syslog(LOG_NOTICE, "db_recipes: ".$sql." result: ".mysqli_error($connect));
 //	} else {
-//		syslog(LOG_NOTICE, "db_profile_mash: inserted ".$_GET['name']);
+//		syslog(LOG_NOTICE, "db_recipes: inserted ".$_GET['name']);
 //	}
 //	echo $result;
 
-//} else if (isset($_GET['update'])) {
-//	// UPDATE COMMAND
-//	$sql  = "UPDATE `profile_mash` SET name='" . mysqli_real_escape_string($connect, $_GET['name']);
-//	$sql .= "', notes='" . mysqli_real_escape_string($connect, $_GET['notes']);
-//	$sql .= "', steps='" . json_encode($_GET['steps']);
-//	$sql .= "' WHERE record='" . $_GET['record'] . "';";
-//	$result = mysqli_query($connect, $sql);
-//	if (! $result) {
-//		syslog(LOG_NOTICE, "db_profile_mash: ".$sql." result: ".mysqli_error($connect));
-//	} else {
-//		syslog(LOG_NOTICE, "db_profile_mash: updated record ".$_GET['record']);
-//	}
-//	echo $result;
-
-//} else if (isset($_GET['delete'])) {
-//	// DELETE COMMAND
-//	$sql = "DELETE FROM `profile_mash` WHERE record='".$_GET['record']."';";
-//	$result = mysqli_query($connect, $sql);
-//	if (! $result) {
-//		syslog(LOG_NOTICE, "db_profile_mash: ".$sql." result: ".mysqli_error($connect));
-//	} else {
-//		syslog(LOG_NOTICE, "db_profile_mash: deleted record ".$_GET['record']);
-//	}
-//	echo $result;
+} else if (isset($_GET['delete'])) {
+	// DELETE COMMAND
+	$sql = "DELETE FROM `recipes` WHERE record='".$_GET['record']."';";
+	$result = mysqli_query($connect, $sql);
+	if (! $result) {
+		syslog(LOG_NOTICE, "db_recipes: ".$sql." result: ".mysqli_error($connect));
+	} else {
+		syslog(LOG_NOTICE, "db_recipes: deleted record ".$_GET['record']);
+	}
+	echo $result;
 
 } else {
 	// SELECT COMMAND
--- a/www/includes/global.inc.php	Tue Sep 04 13:44:02 2018 +0200
+++ b/www/includes/global.inc.php	Tue Sep 04 23:12:13 2018 +0200
@@ -62,7 +62,6 @@
   <script src="jqwidgets/jqxgrid.sort.js"></script>
   <script src="jqwidgets/jqxgrid.pager.js"></script>
   <script src="jqwidgets/jqxgrid.filter.js"></script>
-  <script src="jqwidgets/jqxgrid.aggregates.js"></script>
   <script src="jqwidgets/jqxgrid.selection.js"></script>
   <script src="jqwidgets/jqxnumberinput.js"></script>
   <script src="jqwidgets/jqxlistbox.js"></script>
--- a/www/inv_suppliers.php	Tue Sep 04 13:44:02 2018 +0200
+++ b/www/inv_suppliers.php	Tue Sep 04 23:12:13 2018 +0200
@@ -13,40 +13,40 @@
    <div id="popupWindow">
     <div>Wijzig leverancier.</div>
     <div style="overflow: hidden;">
-     <table>
+     <table class="popupTable">
       <tr>
-       <td align="right" style="vertical-align: top;">Leverancier naam:</td>
-       <td align="left" colspan="3" style="vertical-align: top;"><input id="name" /></td>
+       <td align="right" style="vertical-align: top; padding: 3px;">Leverancier naam:</td>
+       <td colspan="3" style="vertical-align: top; padding: 3px;"><input id="name" /></td>
       </tr>
       <tr>
-       <td align="right" style="vertical-align: top;">Adres:</td>
-       <td align="left" style="vertical-align: top;"><input id="address" /></td>
-       <td align="right" style="vertical-align: top;">Postcode:</td>
-       <td align="left" style="vertical-align: top;"><input id="zip" /></td>
+       <td align="right" style="vertical-align: top; padding: 3px;">Adres:</td>
+       <td align="left" style="vertical-align: top; padding: 3px;"><input id="address" /></td>
+       <td align="right" style="vertical-align: top; padding: 3px;">Postcode:</td>
+       <td align="left" style="vertical-align: top; padding: 3px;"><input id="zip" /></td>
       </tr>
       <tr>
-       <td align="right" style="vertical-align: top;">Plaats:</td>
-       <td align="left" colspan="3" style="vertical-align: top;"><input id="city" /></td>
+       <td align="right" style="vertical-align: top; padding: 3px;">Plaats:</td>
+       <td align="left" colspan="3" style="vertical-align: top; padding: 3px;"><input id="city" /></td>
       </tr>
       <tr>
-       <td align="right" style="vertical-align: top;">Land:</td>
-       <td align="left" colspan="3" style="vertical-align: top;"><input id="country" /></td>
+       <td align="right" style="vertical-align: top; padding: 3px;">Land:</td>
+       <td align="left" colspan="3" style="vertical-align: top; padding: 3px;"><input id="country" /></td>
       </tr>
       <tr>
-       <td align="right" style="vertical-align: top;">Website:</td>
-       <td align="left" colspan="3" style="vertical-align: top;"><input id="website" /></td>
+       <td align="right" style="vertical-align: top; padding: 3px;">Website:</td>
+       <td align="left" colspan="3" style="vertical-align: top; padding: 3px;"><input id="website" /></td>
       </tr>
       <tr>
-       <td align="right" style="vertical-align: top;">Email:</td>
-       <td align="left" colspan="3" style="vertical-align: top;"><input id="email" /></td>
+       <td align="right" style="vertical-align: top; padding: 3px;">Email:</td>
+       <td align="left" colspan="3" style="vertical-align: top; padding: 3px;"><input id="email" /></td>
       </tr>
       <tr>
-       <td align="right" style="vertical-align: top;">Telefoon:</td>
-       <td align="left" colspan="3" style="vertical-align: top;"><input id="phone" /></td>
+       <td align="right" style="vertical-align: top; padding: 3px;">Telefoon:</td>
+       <td align="left" colspan="3" style="vertical-align: top; padding: 3px;"><input id="phone" /></td>
       </tr>
       <tr>
-       <td align="right" style="vertical-align: top;">Opmerkingen:</td>
-       <td align="left" colspan="3"><textarea id="notes"></textarea></td>
+       <td align="right" style="vertical-align: top; padding: 3px;">Opmerkingen:</td>
+       <td align="left" colspan="3" style=" padding: 3px;"><textarea id="notes"></textarea></td>
       </tr>
       <tr>
        <td style="padding-top: 10px;" align="right"><input type="button" id="Delete" value="Delete" /></td>
--- a/www/js/recipes.js	Tue Sep 04 13:44:02 2018 +0200
+++ b/www/js/recipes.js	Tue Sep 04 23:12:13 2018 +0200
@@ -60,6 +60,16 @@
 			{ name: 'st_guide', type: 'string' },
 			{ name: 'st_og_min', type: 'float' },
 			{ name: 'st_og_max', type: 'float' },
+			{ name: 'st_fg_min', type: 'float' },
+			{ name: 'st_fg_max', type: 'float' },
+			{ name: 'st_ibu_min', type: 'float' },
+			{ name: 'st_ibu_max', type: 'float' },
+			{ name: 'st_color_min', type: 'float' },
+			{ name: 'st_color_max', type: 'float' },
+			{ name: 'st_carb_min', type: 'float' },
+			{ name: 'st_carb_max', type: 'float' },
+			{ name: 'st_abv_min', type: 'float' },
+			{ name: 'st_abv_max', type: 'float' },
 			{ name: 'name', type: 'string' },
 			{ name: 'notes', type: 'string' },
 			{ name: 'type', type: 'number' },
@@ -137,16 +147,6 @@
 
 	// Inline waters editor
 	var editWater = function (data) {
-//		var generaterow = function () {
-//			var row = {};
-//			row["w_name"] = "Water 1";
-//			row["step_type"] = "Infusion";
-//			row["w_amount"] = 22.0;
-//			row['step_time'] = 20.0;
-//			row['ramp_time'] = 1.0;
-//			row['end_temp'] = 62.0;
-//			return row;
-//		}
 		var waterSource = {
 			localdata: data.waters,
 			datatype: "local",
@@ -180,9 +180,6 @@
 			selectionmode: 'singlerow',
 			editmode: 'selectedrow',
 			editable: true,
-			showstatusbar: true,
-			statusbarheight: 50,
-			showaggregates: true,
 			showtoolbar: true,
 			rendertoolbar: function (toolbar) {
 				var me = this;
@@ -212,7 +209,6 @@
 				{ text: 'Water bron', editable: false, datafield: 'w_name' },
 				{ text: 'Volume', datafield: 'w_amount', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'f1', 
 				  columntype: 'numberinput',
-				  aggregates: ['sum'],
 				  validation: function (cell, value) {
 					if (value < 0 || value > 100000000000 ) {
 						return { result: false, message: "Volume moet  0-~ zijn" };
@@ -230,9 +226,6 @@
 				{ text: 'pH', editable: false, datafield: 'w_ph', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'f1' }
 			]
 		});
-//		$("#grid").on('cellendedit', function (event) {
-//			$('#grid').jqxGrid('sortby', 'step_temp', 'asc');
-//		});
 	}; // editWater = function (data) {
 
 	// initialize the input fields.
@@ -258,6 +251,7 @@
 	$("#ibu_method").jqxDropDownList({ theme: theme, source: srcIBU, width: 125, height: 23, dropDownHeight: 180 });
 	$("#mash_name").jqxInput({ theme: theme, width: 320, height: 23 });
 	$("#mash_ph").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 100, height: 23, min: 4, max: 8, decimalDigits: 1, spinButtons: true, spinButtonsStep: 0.1 });
+	$("#mash_sparge_temp").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 100, height: 23, min: 70, max: 98, decimalDigits: 1, spinButtons: true, spinButtonsStep: 0.5 });
 	var editrow = -1;
 	// initialize jqxGrid
 	$("#jqxgrid").jqxGrid({
@@ -282,17 +276,20 @@
 				$("#notes").val('');
 				$("#st_name").val('');
 				$("#st_letter").val('');
-				$("#st_guide").val('');
+				$("#st_guide").val('BKG 2015');
 				$("#type").val('All Grain');
 				$("#batch_size").val(20);
 				$("#boil_time").val(90);
 				$("#efficiency").val(75);
-				$("#est_og").val(1.062);
+				$("#est_og").val(1.052);
 				$("#est_fg").val(1.000);
-				$("#est_color").val(0);
+				$("#est_color").val(20);
 				$("#color_method").val('Morey');
-				$("#est_ibu").val(0);
+				$("#est_ibu").val(40);
 				$("#ibu_method").val('Tinseth');
+				$("#mash_sparge_temp").val(78);
+				$("#mash_ph").val(5.4);
+				$("#mash_name").val('');
 				editWater('');
 				$("#popupWindow").jqxWindow('open');
 			});
@@ -334,8 +331,8 @@
 					$("#ibu_method").val(dataRecord.ibu_method);
 					$("#mash_name").val(dataRecord.mash_name);
 					$("#mash_ph").val(dataRecord.mash_ph);
+					$("#mash_sparge_temp").val(dataRecord.mash_sparge_temp);
 					editWater(dataRecord);
-		//			editsteps(dataRecord);
 					// show the popup window.
 					$("#popupWindow").jqxWindow('open');
 				}
@@ -344,6 +341,7 @@
 		groups: ['st_guide','st_letter' ]
 	});
 
+
 	// initialize the popup window and buttons.
 	$("#popupWindow").jqxWindow({
 		width: 1200,
@@ -355,6 +353,9 @@
 		cancelButton: $("#Cancel"),
 		modalOpacity: 0.40
 	});
+	$("#popupWindow").on('open', function () {
+		$("#name").jqxInput('selectAll');
+	});
 
 	// Tabs inside the popup window.
 	$('#jqxTabs').jqxTabs({
@@ -364,9 +365,6 @@
 		position: 'top'
 	});
 
-	$("#popupWindow").on('open', function () {
-		$("#name").jqxInput('selectAll');
-	});
 	$("#Delete").jqxButton({ width: '90px', theme: theme });
 	$("#Delete").click(function () {
 		if (editrow >= 0) {
@@ -383,8 +381,9 @@
 	$("#Save").jqxButton({ width: '90px', theme: theme });
 	// update the edited row when the user clicks the 'Save' button.
 	$("#Save").click(function () {
-//		var steprows = $('#grid').jqxGrid('getrows');
+		var waterrow = $('#waterGrid').jqxGrid('getrows');
 		if (editrow >= 0) {
+			var rowRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
 			var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow);
 			var row = {
 				record: rowID,
@@ -393,6 +392,18 @@
 				st_name: $('#st_name').val(),
 				st_letter: $('#st_letter').val(),
 				st_guide: $('#st_guide').val(),
+				st_og_min: rowRecord.st_og_min,
+				st_og_max: rowRecord.st_og_max,
+				st_fg_min: rowRecord.st_fg_min,
+				st_fg_max: rowRecord.st_fg_max,
+				st_ibu_min: rowRecord.st_ibu_min,
+				st_ibu_max: rowRecord.st_ibu_max,
+				st_color_min: rowRecord.st_color_min,
+				st_color_max: rowRecord.st_color_max,
+				st_carb_min: rowRecord.st_carb_min,
+				st_carb_max: rowRecord.st_carb_max,
+				st_abv_min: rowRecord.st_abv_min,
+				st_abv_max: rowRecord.st_abv_max,
 				type: $("#type").val(),
 				batch_size: parseFloat($("#batch_size").jqxNumberInput('decimal')),
 				boil_time: parseFloat($("#boil_time").jqxNumberInput('decimal')),
@@ -404,8 +415,9 @@
 				est_ibu: parseFloat($("#est_ibu").jqxNumberInput('decimal')),
 				ibu_method: $("#ibu_method").val(),
 				mash_name: $("#mash_name").val(),
-				mash_ph: parseFloat($("#mash_ph").jqxNumberInput('decimal'))
-//				steps: steprows
+				mash_ph: parseFloat($("#mash_ph").jqxNumberInput('decimal')),
+				mash_sparge_temp: parseFloat($("#mash_sparge_temp").jqxNumberInput('decimal')),
+				waters: waterrow
 			};
 			$('#jqxgrid').jqxGrid('updaterow', rowID, row);
 			$("#popupWindow").jqxWindow('hide');
@@ -418,6 +430,18 @@
 				st_name: $('#st_name').val(),
 				st_letter: $('#st_letter').val(),
 				st_guide: $('#st_guide').val(),
+				st_og_min: 1.025,
+				st_og_max: 1.110,
+				st_fg_min: 1.000,
+				st_fg_max: 1.025,
+				st_ibu_min: 15,
+				st_ibu_max: 150,
+				st_color_min: 5,
+				st_color_max: 50,
+				st_carb_min: 1,
+				st_carb_max: 3,
+				st_abv_min: 2,
+				st_abv_max: 14,
 				type: $("#type").val(),
 				batch_size: parseFloat($("#batch_size").jqxNumberInput('decimal')),
 				boil_time: parseFloat($("#boil_time").jqxNumberInput('decimal')),
@@ -429,8 +453,9 @@
 				est_ibu: parseFloat($("#est_ibu").jqxNumberInput('decimal')),
 				ibu_method: $("#ibu_method").val(),
 				mash_name: $("#mash_name").val(),
-				mash_ph: parseFloat($("#mash_ph").jqxNumberInput('decimal'))
-//				steps: steprows
+				mash_ph: parseFloat($("#mash_ph").jqxNumberInput('decimal')),
+				mash_sparge_temp: parseFloat($("#mash_sparge_temp").jqxNumberInput('decimal')),
+				waters: waterrow
 			};
 			$('#jqxgrid').jqxGrid('addrow', null, newrow);
 			$("#popupWindow").jqxWindow('hide');
--- a/www/recipes.php	Tue Sep 04 13:44:02 2018 +0200
+++ b/www/recipes.php	Tue Sep 04 23:12:13 2018 +0200
@@ -27,61 +27,61 @@
       <div style="overflow: hidden;">
        <table>
         <tr>
-         <td style="vertical-align: top; float: right;">Recept naam:</td>
-         <td align="left" colspan="5" style="vertical-align: top;"><input id="name" /></td>
+         <td style="vertical-align: top; float: right; padding: 3px;">Recept naam:</td>
+         <td align="left" colspan="5" style="vertical-align: top; padding: 3px;"><input id="name" /></td>
         </tr>
         <tr>
-         <td style="vertical-align: top; float: right;">Opmerkingen:</td>
-         <td colspan="5"><textarea id="notes"></textarea></td>
+         <td style="vertical-align: top; float: right; padding: 3px;">Opmerkingen:</td>
+         <td colspan="5" style="padding: 3px;"><textarea id="notes"></textarea></td>
 	</tr>
 	<tr>
-         <td style="vertical-align: top; float: right;">Stijlgids:</td>
-         <td align="left" style="vertical-align: top;"><input id="st_guide" /></td>
-         <td style="vertical-align: top; float: right;">Bier stijl:</td>
-         <td align="left" style="vertical-align: top;"><input id="st_name" /></td>
-         <td style="vertical-align: top; float: right;">Bier groep:</td>
-	 <td align="left" style="vertical-align: top;"><input id="st_letter" /></td>
+         <td style="vertical-align: top; float: right; padding: 3px;">Stijlgids:</td>
+         <td align="left" style="vertical-align: top; padding: 3px;"><input id="st_guide" /></td>
+         <td style="vertical-align: top; float: right; padding: 3px;">Bier stijl:</td>
+         <td align="left" style="vertical-align: top; padding: 3px;"><input id="st_name" /></td>
+         <td style="vertical-align: top; float: right; padding: 3px;">Bier groep:</td>
+	 <td align="left" style="vertical-align: top; padding: 3px;"><input id="st_letter" /></td>
 	</tr>
         <tr>
-	 <td style="vertical-align: top; float: right;">Brouw type:</td>
-	 <td align="left"><div id="type"></div></td>
+	 <td style="vertical-align: top; float: right; padding: 3px;">Brouw type:</td>
+	 <td align="left" style="padding: 3px;"><div id="type"></div></td>
          <td></td>
 	 <td></td>
          <td></td>
          <td></td>
         </tr>
         <tr>
-         <td style="vertical-align: top; float: right;">Brouw volume:</td>
-         <td><div id="batch_size"></div></td>
-         <td style="vertical-align: top; float: right;">Kooktijd minuten:</td>
-	 <td><div id="boil_time"></div></td>
-         <td style="vertical-align: top; float: right;">Brouwzaal rendement:</td>
-         <td><div id="efficiency"></div></td>
+         <td style="vertical-align: top; float: right; padding: 3px;">Brouw volume:</td>
+         <td style="padding: 3px;"><div id="batch_size"></div></td>
+         <td style="vertical-align: top; float: right; padding: 3px;">Kooktijd minuten:</td>
+	 <td style="padding: 3px;"><div id="boil_time"></div></td>
+         <td style="vertical-align: top; float: right; padding: 3px;">Brouwzaal rendement:</td>
+         <td style="padding: 3px;"><div id="efficiency"></div></td>
 	</tr>
         <tr>
-         <td style="vertical-align: top; float: right;">Start SG:</td>
-         <td><div style="float: left;" id="est_og"></div><div style="float: left; margin-left: 5px;" id="st_og_min"></div><div style="float: left;" id="st_og_max"></div></td>
-         <td style="vertical-align: top; float: right;">Eind SG:</td>
-         <td><div id="est_fg"></div></td>
+         <td style="vertical-align: top; float: right; padding: 3px;">Start SG:</td>
+         <td style="padding: 3px;"><div style="float: left;" id="est_og"></div><div style="float: left; margin-left: 5px;" id="st_og_min"></div><div style="float: left;" id="st_og_max"></div></td>
+         <td style="vertical-align: top; float: right; padding: 3px;">Eind SG:</td>
+         <td style="padding: 3px;"><div id="est_fg"></div></td>
          <td></td>
          <td></td>
         </tr>
-         <td style="vertical-align: top; float: right;">Kleur EBC:</td>
-         <td><div id="est_color"></div></td>
-         <td style="vertical-align: top; float: right;">Methode:</td>
-         <td><div id="color_method"></div></td>
+         <td style="vertical-align: top; float: right; padding: 3px;">Kleur EBC:</td>
+         <td style="padding: 3px;"><div id="est_color"></div></td>
+         <td style="vertical-align: top; float: right; padding: 3px;">Methode:</td>
+         <td style="padding: 3px;"><div id="color_method"></div></td>
          <td></td>
          <td></td>
         </tr>
-         <td style="vertical-align: top; float: right;">Bitterheid IBU:</td>
-         <td><div id="est_ibu"></div></td>
-         <td style="vertical-align: top; float: right;">Methode:</td>
-         <td><div id="ibu_method"></div></td>
+         <td style="vertical-align: top; float: right; padding: 3px;">Bitterheid IBU:</td>
+         <td style="padding: 3px;"><div id="est_ibu"></div></td>
+         <td style="vertical-align: top; float: right; padding: 3px;">Methode:</td>
+         <td style="padding: 3px;"><div id="ibu_method"></div></td>
          <td></td>
          <td></td>
         </tr>
        </table>
-       <div style="float: right; margin-top: 95px; margin-bottom: 10px;">
+       <div style="float: right; margin-top: 70px; margin-bottom: 10px;">
         <input style="margin-right: 90px;"  type="button" id="Delete" value="Delete" />
         <input style="margin-right: 90px;"  type="button" id="Save" value="Save" />
         <input style="margin-right: 375px;" type="button" id="Cancel" value="Cancel" />
@@ -145,8 +145,8 @@
          <td align="left" colspan="3"><textarea id="notes"></textarea></td>
         </tr> -->
         <tr>
-         <td align="right" style="vertical-align: top;">Water:</td>
-         <td align="left"><div id="waterGrid"></div></td>
+         <td align="right" style="vertical-align: top; padding: 3px;">Water:</td>
+         <td align="left" style="padding: 3px;"><div id="waterGrid"></div></td>
         </tr>
        </table>
       </div>
@@ -156,14 +156,16 @@
       <div style="overflow: hidden;">
        <table>
 	<tr>
-         <td style="vertical-align: top; float: right;">Maischchema:</td>
-	 <td align="left" style="vertical-align: top;"><input id="mash_name" /></td>
-         <td style="vertical-align: top; float: right;">Maish pH:</td>
-         <td><div id="mash_ph"></div></td>
+         <td style="vertical-align: top; float: right; padding: 3px;">Maischchema:</td>
+	 <td align="left" style="vertical-align: top; padding: 3px;"><input id="mash_name" /></td>
+         <td style="vertical-align: top; float: right; padding: 3px;">Maish pH:</td>
+	 <td style="padding: 3px;"><div id="mash_ph"></div></td>
+         <td style="vertical-align: top; float: right; padding: 3px;">Spoelwater temp:</td>
+         <td style="padding: 3px;"><div id="mash_sparge_temp"></div></td>
         </tr>
         <tr>
-         <td align="right" style="vertical-align: top;">Stappen:</td>
-         <td align="left" colspan="3"><div id="mashGrid">Graat</div></td>
+         <td align="right" style="vertical-align: top; padding: 3px;">Stappen:</td>
+         <td align="left" colspan="5" style="padding: 3px;"><div id="mashGrid">Graat</div></td>
         </tr>
        </table>
       </div>

mercurial