Tue, 04 Sep 2018 23:12:13 +0200
More progress on the recipes design
--- 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>