# HG changeset patch
# User Michiel Broek <mbroek@mbse.eu>
# Date 1548886085 -3600
# Node ID 0de4455bd2a12a716ac9f4a28cccc73e3cf78273
# Parent  78946739b3a697a786b0a58b58f14d3893961f9e
Fixed spelling area in all programs for caryophyllene. This is still wrong in brouwhulp, we correct it during database import. Also mycrene was spelled myrcene, my fault. The hops grid now uses a popup editor, this is not yet complete. Friendly weight display in the hop grid and added the inventory comlumn.

diff -r 78946739b3a6 -r 0de4455bd2a1 www/import/from_brouwhulp.php
--- a/www/import/from_brouwhulp.php	Wed Jan 30 18:58:47 2019 +0100
+++ b/www/import/from_brouwhulp.php	Wed Jan 30 23:08:05 2019 +0100
@@ -155,12 +155,12 @@
 			$sql .= "', beta='" . floatval($hop->BETA);
 		if ($hop->HUMULENE)
 			$sql .= "', humulene='" . floatval($hop->HUMULENE);
-		if ($hop->CARYOPHYLLENE)
-			$sql .= "', caryophyllene='" . floatval($hop->CARYOPHYLLENE);
+		if ($hop->CAROPHYLLENE)
+			$sql .= "', caryophyllene='" . floatval($hop->CAROPHYLLENE);
 		if ($hop->COHUMULONE)
 			$sql .= "', cohumulone='" . floatval($hop->COHUMULONE);
-		if ($hop->MYCRENE)
-			$sql .= "', myrcene='" . floatval($hop->MYCRENE);
+		if ($hop->MYRCENE)
+			$sql .= "', myrcene='" . floatval($hop->MYRCENE);
 		if ($hop->HSI)
 			$sql .= "', hsi='" . floatval($hop->HSI);
 
@@ -875,7 +875,7 @@
 		$hops .= ',"h_beta":' . floatval($hop->BETA);
 		$hops .= ',"h_hsi":' . floatval($hop->HSI);
 		$hops .= ',"h_humulene":' . floatval($hop->HUMULENE);
-		$hops .= ',"h_carophyllene":' . floatval($hop->CAROPHYLLENE);
+		$hops .= ',"h_caryophyllene":' . floatval($hop->CAROPHYLLENE);
 		$hops .= ',"h_cohumulone":' . floatval($hop->COHUMULONE);
 		$hops .= ',"h_myrcene":' . floatval($hop->MYRCENE);
 		if ($hop->TOTAL_OIL)
diff -r 78946739b3a6 -r 0de4455bd2a1 www/includes/db_recipes.php
--- a/www/includes/db_recipes.php	Wed Jan 30 18:58:47 2019 +0100
+++ b/www/includes/db_recipes.php	Wed Jan 30 23:08:05 2019 +0100
@@ -165,11 +165,10 @@
 			$hop .= ',"h_beta":' . $item['h_beta'];
 			$hop .= ',"h_hsi":' . $item['h_hsi'];
 			$hop .= ',"h_humulene":' . $item['h_humulene'];
-			$hop .= ',"h_carophyllene":' . $item['h_carophyllene'];
+			$hop .= ',"h_caryophyllene":' . $item['h_caryophyllene'];
 			$hop .= ',"h_cohumulone":' . $item['h_cohumulone'];
 			$hop .= ',"h_myrcene":' . $item['h_myrcene'];
-			$hop .= ',"h_total_oil":' . $item['h_total_oil'];
-			$hop .= ',"h_weight":' . $item['h_weight'] . '}';
+			$hop .= ',"h_total_oil":' . $item['h_total_oil'] . '}';
 			syslog(LOG_NOTICE, $hop);
 			$hops .= $hop;
 		}
diff -r 78946739b3a6 -r 0de4455bd2a1 www/inv_hops.php
--- a/www/inv_hops.php	Wed Jan 30 18:58:47 2019 +0100
+++ b/www/inv_hops.php	Wed Jan 30 23:08:05 2019 +0100
@@ -37,7 +37,7 @@
       <tr>
        <td align="right" style="vertical-align: top;">Vervangen door:</td>
        <td align="left" style="vertical-align: top;"><input id="substitutes" /></td>
-       <td align="right" style="vertical-align: top;">Caryophylleen %:</td>
+       <td align="right" style="vertical-align: top;">Caryofyleen %:</td>
        <td align="left" style="vertical-align: top;"><input id="caryophyllene" /></td>
       </tr>
       <tr>
diff -r 78946739b3a6 -r 0de4455bd2a1 www/js/prod_edit.js
--- a/www/js/prod_edit.js	Wed Jan 30 18:58:47 2019 +0100
+++ b/www/js/prod_edit.js	Wed Jan 30 23:08:05 2019 +0100
@@ -2097,7 +2097,7 @@
                                 { name: 'h_beta', type: 'float' },
                                 { name: 'h_hsi', type: 'float' },
                                 { name: 'h_humulene', type: 'float' },
-                                { name: 'h_carophyllene', type: 'float' },
+                                { name: 'h_caryophyllene', type: 'float' },
                                 { name: 'h_cohumulone', type: 'float' },
                                 { name: 'h_myrcene', type: 'float' },
                                 { name: 'h_total_oil', type: 'float' },
@@ -2174,7 +2174,7 @@
                                                 row["h_beta"] = datarecord.beta;
                                                 row["h_hsi"] = datarecord.hsi;
                                                 row["h_humulene"] = datarecord.humulene;
-                                                row["h_carophyllene"] = datarecord.carophyllene;
+                                                row["h_caryophyllene"] = datarecord.caryophyllene;
                                                 row["h_cohumulone"] = datarecord.cohumulone;
                                                 row["h_myrcene"] = datarecord.myrcene;
                                                 row["h_total_oil"] = datarecord.total_oil;
diff -r 78946739b3a6 -r 0de4455bd2a1 www/js/rec_edit.js
--- a/www/js/rec_edit.js	Wed Jan 30 18:58:47 2019 +0100
+++ b/www/js/rec_edit.js	Wed Jan 30 23:08:05 2019 +0100
@@ -1621,11 +1621,12 @@
 				{ name: 'h_beta', type: 'float' },
 				{ name: 'h_hsi', type: 'float' },
 				{ name: 'h_humulene', type: 'float' },
-				{ name: 'h_carophyllene', type: 'float' },
+				{ name: 'h_caryophyllene', type: 'float' },
 				{ name: 'h_cohumulone', type: 'float' },
 				{ name: 'h_myrcene', type: 'float' },
 				{ name: 'h_total_oil', type: 'float' },
-				{ name: 'h_weight', type: 'float' }
+				{ name: 'h_inventory', type: 'float' },
+				{ name: 'h_avail', type: 'int' }
                         ],
                         addrow: function (rowid, rowdata, position, commit) {
                                 commit(true);
@@ -1634,28 +1635,13 @@
                                 commit(true);
                         }
                 };
-                var hopAdapter = new $.jqx.dataAdapter(hopSource, {
-			beforeLoadComplete: function (records) {
-				var data = new Array();
-				for (var i = 0; i < records.length; i++) {
-					var row = records[i];
-					row.h_weight = row.h_amount * 1000;
-					data.push(row);
-				}
-			        return data;
-			},
-			loadError: function(jqXHR, status, error) {
-				$('#err').text(status + ' ' + error);
-			},
-		});
+                var hopAdapter = new $.jqx.dataAdapter(hopSource);
                 $("#hopGrid").jqxGrid({
-                        width: 1050,
+                        width: 1240,
                         height: 400,
                         source: hopAdapter,
                         theme: theme,
                         selectionmode: 'singlerow',
-                        editmode: 'selectedcell',
-                        editable: true,
                         localization: getLocalization(),
                         showtoolbar: true,
                         rendertoolbar: function (toolbar) {
@@ -1665,11 +1651,12 @@
                                 container.append('<div style="float: left; margin-left: 165px;" id="haddrowbutton"></div>');
 				container.append('<div style="float: left; margin-left: 10px; margin-top: 5px;">In voorraad:</div>');
 				container.append('<div style="float: left; margin-left: 10px;" id="hinstockbutton"></div>');
-                                container.append('<input style="float: left; margin-left: 280px;" id="hdeleterowbutton" type="button" value="Verwijder hop" />');
+                                container.append('<input style="float: left; margin-left: 400px;" id="hdeleterowbutton" type="button" value="Verwijder hop" />');
                                 // add hop from dropdownlist.
                                 $("#haddrowbutton").jqxDropDownList({
                                         placeHolder: "Kies hop:",
                                         theme: theme,
+					template: "primary",
                                         source: hoplist,
                                         displayMember: "name",
                                         width: 150,
@@ -1692,17 +1679,17 @@
                                                 row["h_cost"] = datarecord.cost;
                                                 row["h_type"] = datarecord.type;
 						row["h_form"] = datarecord.form;
-						row["h_useat"] = datarecord.useat;
+						row["h_useat"] = 2;	// Boil
 						row["h_time"] = 0;
 						row["h_alpha"] = datarecord.alpha;
 						row["h_beta"] = datarecord.beta;
 						row["h_hsi"] = datarecord.hsi;
 						row["h_humulene"] = datarecord.humulene;
-						row["h_carophyllene"] = datarecord.carophyllene;
+						row["h_caryophyllene"] = datarecord.caryophyllene;
 						row["h_cohumulone"] = datarecord.cohumulone;
 						row["h_myrcene"] = datarecord.myrcene;
 						row["h_total_oil"] = datarecord.total_oil;
-						row["h_weight"] = 0;
+						row["h_inventory"] = datarecord.inventory;
                                                 var commit = $("#hopGrid").jqxGrid('addrow', null, row);
                                         }
                                 });
@@ -1714,7 +1701,7 @@
 				});
 
                                 // delete selected hop.
-                                $("#hdeleterowbutton").jqxButton({ theme: theme, height: 27, width: 150 });
+                                $("#hdeleterowbutton").jqxButton({ template: "danger", theme: theme, height: 27, width: 150 });
                                 $("#hdeleterowbutton").on('click', function () {
                                         var selectedrowindex = $("#hopGrid").jqxGrid('getselectedrowindex');
                                         var rowscount = $("#hopGrid").jqxGrid('getdatainformation').rowscount;
@@ -1722,80 +1709,46 @@
                                                 var id = $("#hopGrid").jqxGrid('getrowid', selectedrowindex);
                                                 var commit = $("#hopGrid").jqxGrid('deleterow', id);
                                         }
+					calcIBUs();
                                 });
                         },
 			ready: function() {
+				calcIBUs();
 				$('#jqxTabs').jqxTabs('next');
 			},
                         columns: [
-                                { text: 'Hop', editable: false, datafield: 'h_name',
+                                { text: 'Hop', datafield: 'h_name',
 				  cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) {
 					var rowData = $("#hopGrid").jqxGrid('getrowdata', row);
 					return "<span style='margin: 3px; margin-top: 6px; float: "+
 						columnproperties.cellsalign+"'>" +rowData.h_origin+" / "+rowData.h_name+"</span>";
 				  },
 			       	},
-                                { text: 'Type', editable: false, width: 90, align: 'center', cellsalign: 'center', datafield: 'h_type' },
-				{ text: 'Vorm', editable: false, width: 90, align: 'center', cellsalign: 'center', datafield: 'h_form' },
-                                { text: 'Alpha', editable: false, datafield: 'h_alpha', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'p1' },
-				{ text: 'Amount', hidden: true, datafield: 'h_amount' },
-				{ text: 'Gewicht gr', datafield: 'h_weight', width: 120, align: 'right', cellsalign: 'right', cellsformat: 'f1',
-				  columntype: 'numberinput',
+                                { text: 'Type', width: 90, datafield: 'h_type',
+				  cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
+					return "<div style='margin: 4px;'>" + HopTypeData[value].nl + "</div>";
+				  }
+			       	},
+				{ text: 'Vorm', width: 90, datafield: 'h_form',
 				  cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
-					return "<div style='margin: 4px;' class='jqx-right-align'>" + dataAdapter.formatNumber(value, "f1") + " gr</div>";
-				  },
-				  initeditor: function (row, cellvalue, editor, celltext, pressedChar) {
-					editor.jqxNumberInput({
-						inputMode: 'simple', decimalDigits: 1, min: 0, max: parseFloat(dataRecord.batch_size * 200),
-						spinButtons: false
-					});
-				  },
-				  validation: function (cell, value) {
-					var maxhops = parseFloat(dataRecord.batch_size) * 200;
-					if (value < 0 || value > maxhops ) {
-						return { result: false, message: "Gewicht moet tussen 0 en "+maxhops+" gram zijn" };
-					}
-					return true;
+					return "<div style='margin: 4px;'>" + HopFormData[value].nl + "</div>";
 				  }
-				},
-				{ text: 'Gebruik', width: 110, align: 'center', cellsalign: 'center', datafield: 'h_useat', columntype: 'dropdownlist',
-				  createeditor: function (row, column, editor) {
-					  var srcUse = [ "Boil", "Dry Hop", "Mash", "First Wort", "Aroma" ];
-					  editor.jqxDropDownList({ autoDropDownHeight: true, source: srcUse });
-				  },
-				  cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
-					if ((newvalue == "Mash") || (newvalue == "First Wort")) {
-						$("#hopGrid").jqxGrid('setcellvalue', row, "h_time", parseFloat(dataRecord.boil_time));
-					} else if (newvalue == "Aroma") {
-						$("#hopGrid").jqxGrid('setcellvalue', row, "h_time", 0);
-					}
+			       	},
+                                { text: 'Alpha', datafield: 'h_alpha', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'p1' },
+				{ text: 'Gebruik', width: 110, datafield: 'h_useat',
+				  cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
+					return "<div style='margin: 4px;'>" + HopUseData[value].nl + "</div>";
 				  }
 				},
 				{ text: 'Tijd', datafield: 'h_time', width: 70, align: 'right', cellsalign: 'right', cellsformat: 'f0',
-				  columntype: 'numberinput',
 				  cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
-					if ((rowdata.h_useat == "Boil") || (rowdata.h_useat == "Dry Hop") || (rowdata.h_useat == "Dry hop"))
+					if ((rowdata.h_useat == 2) || (rowdata.h_useat == 5))	// Boil or Dry hop
 						return "<div style='margin: 4px;' class='jqx-right-align'>"+dataAdapter.formatNumber(value, "f0")+"</div>";
 					else
 						return "<div style='margin: 4px;' class='jqx-right-align'> </div>";
-				  },
-				  initeditor: function (row, cellvalue, editor, celltext, pressedChar) {
-					editor.jqxNumberInput({ decimalDigits: 0, digits: 3, min: 0, max: parseFloat(dataRecord.boil_time) });
-				  },
-				  cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
-					var use = $("#hopGrid").jqxGrid('getcellvalue', row, "h_useat");
-					if ((use == "Mash") || (use == "First Wort") || (use == "First wort") || (use == "Aroma"))
-						return oldvalue;
-				  },
-				  validation: function (cell, value) {
-					var high = parseFloat(dataRecord.boil_time);
-				  	if (value < 0 || value > high ) {
-						return { result: false, message: "De tijd moet  0-"+high+" zijn" };
-					}
-					return true;
 				  }
 				},
-				{ text: 'IBU', editable: false, datafield: 'ibu', width: 80, align: 'right',
+				{ text: 'IBU', datafield: 'ibu', width: 80, align: 'right',
 				  cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
 					var ibu = toIBU(rowdata.h_useat,
 							  rowdata.h_form,
@@ -1806,20 +1759,47 @@
 							  parseFloat(rowdata.h_alpha),
 							  $("#ibu_method").val()
 							 );
-					calcIBUs();
+			//		calcIBUs();
 					return "<div style='margin: 4px;' class='jqx-right-align'>" + dataAdapter.formatNumber(ibu, "f1") + "</div>";
 				  }
+				},
+				{ text: 'Gewicht', datafield: 'h_amount', width: 110, align: 'right', cellsalign: 'right',
+				  cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
+					if (value < 1)
+						return "<div style='margin: 4px;' class='jqx-right-align'>"+dataAdapter.formatNumber(value * 1000, "f1")+" gr</div>";
+					else
+						return "<div style='margin: 4px;' class='jqx-right-align'>"+dataAdapter.formatNumber(value, "f1")+" kg</div>";
+				  }
+				},
+				{ text: 'Voorraad', datafield: 'h_inventory', width: 110, align: 'right', cellsalign: 'right',
+				  cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
+					if (value < 1)
+						return "<div style='margin: 4px;' class='jqx-right-align'>"+dataAdapter.formatNumber(value * 1000, "f1")+" gr</div>";
+					else
+						return "<div style='margin: 4px;' class='jqx-right-align'>"+dataAdapter.formatNumber(value, "f1")+" kg</div>";
+				  }
+				},
+				{ text: 'Wijzig', datafield: 'Edit', columntype: 'button', width: 100, align: 'center', cellsrenderer: function () {
+					return "Wijzig";
+					}, buttonclick: function (row) {
+						hopRow = row;
+						hopData = $("#hopGrid").jqxGrid('getrowdata', hopRow);
+						$("#wh_name").val(hopData.h_name);
+						$("#wh_amount").val(hopData.h_amount * 1000);
+						var ibu = toIBU(hopData.h_useat, hopData.h_form, preboil_sg,
+							parseFloat($("#batch_size").jqxNumberInput('decimal')),
+							parseFloat(hopData.h_amount), parseFloat(hopData.h_time),
+							parseFloat(hopData.h_alpha), $("#ibu_method").val()
+						);
+						$("#wh_ibu").val(ibu);
+						$("#wh_time").val(hopData.h_time);
+						$("#wh_useat").val(hopData.h_useat);
+						// show the popup window.
+						$("#popupHop").jqxWindow('open');
+					}
 				}
                         ]
                 });
-		$("#hopGrid").on('cellendedit', function (event) {
-			var args = event.args;
-			console.log("Event Type: cellendedit, Column: " + args.datafield + ", Row: " + (args.rowindex) + ", Value: " + args.value);
-			$("#hopGrid").jqxGrid('setcellvalue', args.rowindex, args.datafield, args.value);
-			if (args.datafield == 'h_weight')
-				$("#hopGrid").jqxGrid('setcellvalue', args.rowindex, 'h_amount', args.value / 1000);
-			//$('#hopGrid').jqxGrid('sortby', 'f_amount', 'desc');
-		});
         };
 
 	// Inline miscs editor
@@ -2683,6 +2663,90 @@
 	$("#est_ibu2").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 0, readOnly: true });
 	$("#hop_flavour").jqxProgressBar({ width: 300, height: 23, theme: theme, showText: true });
 	$("#hop_aroma").jqxProgressBar({ width: 300, height: 23, theme: theme, showText: true });
+	$("#popupHop").jqxWindow({
+		width: 800,
+		height: 300,
+		position: { x: 230, y: 100 },
+		resizable: false,
+		theme: theme,
+		isModal: true,
+		autoOpen: false,
+		cancelButton: $("#HopReady"),
+		modalOpacity: 0.40
+	});
+	$("#HopReady").jqxButton({ template: "success", width: '90px', theme: theme });
+	$("#HopReady").click(function () {
+		$("#hopGrid").jqxGrid('sortby', 'f_amount', 'asc');
+		calcIBUs();
+	});
+	$("#wh_name").jqxInput({ theme: theme, width: 320, height: 23 });
+	$("#wh_instock").jqxCheckBox({ theme: theme, height: 23 });
+	$("#wh_instock").on('change', function (event) {
+		hopinstock = event.args.checked;
+		hoplist.dataBind();
+	});
+	$("#wh_select").jqxDropDownList({
+		placeHolder: "Kies hop:",
+		theme: theme,
+		source: hoplist,
+		displayMember: "name",
+		width: 150,
+		height: 23,
+		dropDownWidth: 500,
+		dropDownHeight: 500,
+		renderer: function (index, label, value) {
+			var datarecord = hoplist.records[index];
+			return datarecord.origin+ " / " + datarecord.name + " (" + datarecord.alpha + " % &alpha;)";
+		}
+	});
+	$("#wh_select").on('select', function (event) {
+		if (event.args) {
+			var index = event.args.index;
+			var datarecord = hoplist.records[index];
+			var rowdata = $("#hopGrid").jqxGrid('getrowdata', hopRow);
+			$("#wh_name").val(datarecord.name);
+			rowdata.h_name = datarecord.name;
+
+		}
+	});
+	$("#wh_amount").jqxNumberInput( Spin1dec1 );
+	$('#wh_amount').on('change', function (event) {
+		console.log("amount changed: "+event.args.value);
+		var amount = parseFloat(event.args.value) / 1000;
+		var rowdata = $("#hopGrid").jqxGrid('getrowdata', hopRow);
+
+		var ibu = toIBU(rowdata.h_useat, rowdata.h_form, preboil_sg,
+			parseFloat($("#batch_size").jqxNumberInput('decimal')),
+			amount, parseFloat(rowdata.h_time),
+			parseFloat(rowdata.h_alpha), $("#ibu_method").val()
+		);
+		rowdata.h_amount = amount;
+//		$("#hopGrid").jqxGrid('setcellvalue', hopRow, 'h_amount', amount);
+		calcIBUs();
+	});
+	$("#wh_ibu").jqxNumberInput( Spin1dec1 );
+	$("#wh_time").jqxNumberInput( PosInt );
+	$("#wh_useat").jqxDropDownList({
+		theme: theme,
+		source: HopUseAdapter,
+		valueMember: 'id',
+		displayMember: 'nl',
+		width: 180,
+		height: 23,
+		autoDropDownHeight: true,
+		dropDownVerticalAlignment: 'top'
+	});
+	$("#wh_useat").on('select', function (event) {
+		if (event.args) {
+			var index = event.args.index;
+			var rowdata = $("#hopGrid").jqxGrid('getrowdata', hopRow);
+			rowdata.h_useat = index;
+			if ((index == 0) || (index == 1))
+				rowdata.h_time = parseFloat(dataRecord.boil_time);
+			else if (index == 3)
+				rowdata.h_time = 0;
+		}
+	});
 
 	// Tab 4, Diversen
 
diff -r 78946739b3a6 -r 0de4455bd2a1 www/rec_edit.php
--- a/www/rec_edit.php	Wed Jan 30 18:58:47 2019 +0100
+++ b/www/rec_edit.php	Wed Jan 30 23:08:05 2019 +0100
@@ -142,8 +142,7 @@
          <td style="padding: 3px;"><div id="hop_aroma"></div></td>
         </tr>
         <tr>
-         <td align="right" style="vertical-align: top;">Hoppen:</td>
-         <td align="left" colspan="5"><div id="hopGrid"></div></td>
+         <td align="center" colspan="6"><div id="hopGrid"></div></td>
         </tr>
        </table>
       </div>
@@ -376,6 +375,47 @@
     </div>
    </div>
 
+   <div id="popupHop">
+    <div>Wijzig hop detail.</div>
+    <div style="overflow: hidden;">
+     <table style="width: 100%;">
+      <tr>
+       <td align="right" style="vertical-align: top;">Hop naam:</td>
+       <td style="padding: 3px;"><input readonly="1" id="wh_name" /></div></td>
+      </tr>
+      <tr>
+       <td align="right" style="vertical-align: top;">Andere hop:</td>
+       <td style="padding: 3px;"><div style='overflow: hidden;'>
+        <div style="float: left;" id="wh_select"></div>
+        <div style="float: left; margin-left: 10px;">In voorraad:</div>
+        <div style="float: left; margin-left: 10px;" id="wh_instock"></div></div>
+       </td>
+      </tr>
+      <tr>
+       <td align="right" style="vertical-align: top;">Hoeveelheid kg:</td>
+       <td style="padding: 3px;"><div id="wh_amount"></div></td>
+      </tr>
+      <tr>
+       <td align="right" style="vertical-align: top;">Gewenst IBU:</td>
+       <td style="padding: 3px;"><div id="wh_ibu"></div></td>
+      </tr>
+      <tr>
+       <td align="right" style="vertical-align: top;">Tijdsduur:</td>
+       <td style="padding: 3px;"><div id="wh_time"></div></td>
+      </tr>
+      <tr>
+       <td align="right" style="vertical-align: top;">Gebruik tijdens:</td>
+       <td style="padding: 3px;"><div id="wh_useat"></div></td>
+      </tr>
+      <tr>
+       <td style="padding-top: 30px;" colspan="2" align="center">
+        <input id="HopReady" type="button" value="Sla op" />
+       </td>
+      </tr>
+     </table>
+    </div>
+   </div>
+
 <?php
 confirm_delete();
 page_footer();