Added category and type to the recipe style. Added tooltips in the edit screen. Added Alcohol and Carbonation to the recipe style. Redesigned the main edit window and added the style limits.

Fri, 28 Sep 2018 17:29:23 +0200

author
Michiel Broek <mbroek@mbse.eu>
date
Fri, 28 Sep 2018 17:29:23 +0200
changeset 72
93a0be4f5be3
parent 71
e1c50b21b7e3
child 73
454fc4558609

Added category and type to the recipe style. Added tooltips in the edit screen. Added Alcohol and Carbonation to the recipe style. Redesigned the main edit window and added the style limits.

www/import/from_brouwhulp.php file | annotate | diff | comparison | revisions
www/includes/db_recipes.php file | annotate | diff | comparison | revisions
www/js/rec_edit.js file | annotate | diff | comparison | revisions
www/js/rec_new.js file | annotate | diff | comparison | revisions
www/rec_edit.php file | annotate | diff | comparison | revisions
--- a/www/import/from_brouwhulp.php	Thu Sep 27 23:13:41 2018 +0200
+++ b/www/import/from_brouwhulp.php	Fri Sep 28 17:29:23 2018 +0200
@@ -503,6 +503,12 @@
 					$sql .= "', st_guide='" . mysqli_real_escape_string($db, $recipe->STYLE->STYLE_GUIDE);
 				}
 			}
+			if ($recipe->STYLE->CATEGORY)
+				$sql .= "', st_category='" . mysqli_real_escape_string($db, $recipe->STYLE->CATEGORY);
+			if ($recipe->STYLE->CATEGORY_NUMBER)
+				$sql .= "', st_category_number='" . floatval($recipe->STYLE->CATEGORY_NUMBER);
+			if ($recipe->STYLE->TYPE)
+				$sql .= "', st_type='" . mysqli_real_escape_string($db, $recipe->STYLE->TYPE);
 			if ($recipe->STYLE->OG_MIN)
 				$sql .= "', st_og_min='" . floatval($recipe->STYLE->OG_MIN);
 			if ($recipe->STYLE->OG_MAX)
--- a/www/includes/db_recipes.php	Thu Sep 27 23:13:41 2018 +0200
+++ b/www/includes/db_recipes.php	Fri Sep 28 17:29:23 2018 +0200
@@ -30,7 +30,9 @@
 	$sql .=    "st_name='" . mysqli_real_escape_string($connect, $_POST['st_name']);
 	$sql .= "', st_letter='" . mysqli_real_escape_string($connect, $_POST['st_letter']);
 	$sql .= "', st_guide='" . mysqli_real_escape_string($connect, $_POST['st_guide']);
-	// st_category st_category_number st_type
+	$sql .= "', st_type='" . mysqli_real_escape_string($connect, $_POST['st_type']);
+	$sql .= "', st_category='" . mysqli_real_escape_string($connect, $_POST['st_categpry']);
+	$sql .= "', st_category_number='" . $_POST['st_category_number'];
 	$sql .= "', st_og_min='" . $_POST['st_og_min'];
 	$sql .= "', st_og_max='" . $_POST['st_og_max'];
 	$sql .= "', st_fg_min='" . $_POST['st_fg_min'];
@@ -51,6 +53,8 @@
 	$sql .= "', efficiency='" . $_POST['efficiency'];
 	$sql .= "', est_og='" . $_POST['est_og'];
 	$sql .= "', est_fg='" . $_POST['est_fg'];
+	$sql .= "', est_abv='" . $_POST['est_abv'];
+	$sql .= "', est_carb='" . $_POST['est_carb'];
 	$sql .= "', est_color='" . $_POST['est_color'];
 	$sql .= "', color_method='" . $_POST['color_method'];
 	$sql .= "', est_ibu='" . $_POST['est_ibu'];
@@ -140,7 +144,8 @@
 		if (isset($_POST['update'])) {
 			syslog(LOG_NOTICE, "db_recipes: updated record ".$_POST['record']);
 		} else {
-			syslog(LOG_NOTICE, "db_recipes: inserted ".$_POST['name']);
+			$lastid = mysqli_insert_id($connect);
+			syslog(LOG_NOTICE, "db_recipes: inserted record ".$lastid);
 		}
 	}
 	echo $result;
@@ -150,7 +155,6 @@
 	$sql = "DELETE FROM `recipes` WHERE record='".$_POST['record']."';";
 	$result = mysqli_query($connect, $sql);
 	if (! $result) {
-//		syslog(LOG_NOTICE, "db_recipes: ".$sql." result: ".mysqli_error($connect));
 		syslog(LOG_NOTICE, "db_recipes: result: ".mysqli_error($connect));
 	} else {
 		syslog(LOG_NOTICE, "db_recipes: deleted record ".$_POST['record']);
@@ -172,7 +176,10 @@
 		$recipes .=  ',"st_guide":"' . str_replace($escapers, $replacements, $row['st_guide']);
 		$recipes .= '","st_letter":"' . str_replace($escapers, $replacements, $row['st_letter']);
 		$recipes .= '","st_name":"'  . str_replace($escapers, $replacements, $row['st_name']);
-		$recipes .= '","st_og_min":' . floatval($row['st_og_min']);
+		$recipes .= '","st_type":"' . str_replace($escapers, $replacements, $row['st_type']);
+		$recipes .= '","st_category":"' . str_replace($escapers, $replacements, $row['st_category']);
+		$recipes .= '","st_category_number":' . floatval($row['st_category_number']);
+		$recipes .= ',"st_og_min":' . floatval($row['st_og_min']);
 		$recipes .= ',"st_og_max":' . floatval($row['st_og_max']);
 		$recipes .= ',"st_fg_min":' . floatval($row['st_fg_min']);
 		$recipes .= ',"st_fg_max":' . floatval($row['st_fg_max']);
@@ -192,6 +199,8 @@
 		$recipes .= ',"efficiency":' . floatval($row['efficiency']);
 		$recipes .= ',"est_og":' . floatval($row['est_og']);
 		$recipes .= ',"est_fg":' . floatval($row['est_fg']);
+		$recipes .= ',"est_abv":' . floatval($row['est_abv']);
+		$recipes .= ',"est_carb":' . floatval($row['est_carb']);
 		$recipes .= ',"est_color":' . floatval($row['est_color']);
 		$recipes .= ',"color_method":"' . $row['color_method'];
 		$recipes .= '","est_ibu":' . floatval($row['est_ibu']);
--- a/www/js/rec_edit.js	Thu Sep 27 23:13:41 2018 +0200
+++ b/www/js/rec_edit.js	Fri Sep 28 17:29:23 2018 +0200
@@ -56,8 +56,33 @@
 	// tooltips
 	$("#name").jqxTooltip({ content: 'De naam voor dit recept.' });
 	$("#notes").jqxTooltip({ content: 'De uitgebreide opmerkingen over dit recept.' });
+	$("#type").jqxTooltip({ content: 'Het brouw type van dit recept.' });
+	$("#est_og").jqxTooltip({ content: 'Het begin SG wat je wilt bereiken. De moutstort wordt automatisch herberekend.' });
+	$("#est_fg").jqxTooltip({ content: 'Het eind SG. Dit wordt automatisch berekend.' });
+	$("#est_color").jqxTooltip({ content: 'De kleur in EBC. Dit wordt automatisch berekend.' });
+	$("#est_ibu").jqxTooltip({ content: 'De bitterheid in IBU. Dit wordt automatisch berekend.' });
+	$("#est_abv").jqxTooltip({ content: 'Alcohol volume %. Dit wordt automatisch berekend.' });
+	$("#est_carb").jqxTooltip({ content: 'Koolzuur volume. Dit wordt automatisch berekend.' });
+
 	$("#st_name").jqxTooltip({ content: 'De bierstijl naam voor dit recept.'});
-	$("#type").jqxTooltip({ content: 'Het brouw type van dit recept.' });
+	$("#st_letter").jqxTooltip({ content: 'De bierstijl letter voor dit recept.'});
+	$("#st_guide").jqxTooltip({ content: 'De bierstijl gids voor dit recept.'});
+	$("#st_category").jqxTooltip({ content: 'De Amerikaanse bierstijl categorie.'});
+	$("#st_category_number").jqxTooltip({ content: 'De Amerikaanse bierstijl categorie sub nummer.'});
+	$("#st_type").jqxTooltip({ content: 'Het bierstijl type.'});
+	$("#st_og_min").jqxTooltip({ content: 'Het minimum begin SG voor deze bierstijl.'});
+	$("#st_og_max").jqxTooltip({ content: 'Het maximum begin SG voor deze bierstijl.'});
+	$("#st_fg_min").jqxTooltip({ content: 'Het minimum eind SG voor deze bierstijl.'});
+	$("#st_fg_max").jqxTooltip({ content: 'Het maximum eind SG voor deze bierstijl.'});
+	$("#st_color_min").jqxTooltip({ content: 'De minimum kleur voor deze bierstijl.'});
+	$("#st_color_max").jqxTooltip({ content: 'De maximum kleur voor deze bierstijl.'});
+	$("#st_ibu_min").jqxTooltip({ content: 'De minimum bitterheid voor deze bierstijl.'});
+	$("#st_ibu_max").jqxTooltip({ content: 'De maximum bitterheid voor deze bierstijl.'});
+	$("#st_abv_min").jqxTooltip({ content: 'Het minimum alcohol volume % voor deze bierstijl.'});
+	$("#st_abv_max").jqxTooltip({ content: 'Het maximum alcohol volume % voor deze bierstijl.'});
+	$("#st_carb_min").jqxTooltip({ content: 'Het minimum koolzuur volume voor deze bierstijl.'});
+	$("#st_carb_max").jqxTooltip({ content: 'Het maximum koolzuur volume voor deze bierstijl.'});
+
 	// prepare the data
 	var source = {
 		datatype: "json",
@@ -67,6 +92,9 @@
 			{ name: 'st_name', type: 'string' },
 			{ name: 'st_letter', type: 'string' },
 			{ name: 'st_guide', type: 'string' },
+			{ name: 'st_type', type: 'string' },
+			{ name: 'st_category', type: 'string' },
+			{ name: 'st_category_number', type: 'float' },
 			{ name: 'st_og_min', type: 'float' },
 			{ name: 'st_og_max', type: 'float' },
 			{ name: 'st_fg_min', type: 'float' },
@@ -87,10 +115,12 @@
 			{ name: 'efficiency', type: 'float' },
 			{ name: 'est_og', type: 'float' },
 			{ name: 'est_fg', type: 'float' },
+			{ name: 'est_abv', type: 'float' },
 			{ name: 'est_color', type: 'float' },
 			{ name: 'color_method', type: 'string' },
 			{ name: 'est_ibu', type: 'float' },
 			{ name: 'ibu_method', type: 'string' },
+			{ name: 'est_carb', type: 'float' },
 			{ name: 'mash_sparge_temp', type: 'float' },
 			{ name: 'mash_ph', type: 'float' },
 			{ name: 'mash_name', type: 'string' },
@@ -114,6 +144,9 @@
 			$("#st_name").val(dataRecord.st_name);
 			$("#st_letter").val(dataRecord.st_letter);
 			$("#st_guide").val(dataRecord.st_guide);
+			$("#st_category").val(dataRecord.st_category);
+			$("#st_category_number").val(dataRecord.st_category_number);
+			$("#st_type").val(dataRecord.st_type);
 			$("#type").val(dataRecord.type);
 			$("#batch_size").val(dataRecord.batch_size);
 			$("#boil_time").val(dataRecord.boil_time);
@@ -122,10 +155,22 @@
 			$("#st_og_min").val(dataRecord.st_og_min);
 			$("#st_og_max").val(dataRecord.st_og_max);
 			$("#est_fg").val(dataRecord.est_fg);
+			$("#st_fg_min").val(dataRecord.st_fg_min);
+			$("#st_fg_max").val(dataRecord.st_fg_max);
 			$("#est_color").val(dataRecord.est_color);
+			$("#est_abv").val(dataRecord.est_abv);
+			$("#st_abv_min").val(dataRecord.st_abv_min);
+			$("#st_abv_max").val(dataRecord.st_abv_max);
+			$("#st_color_min").val(dataRecord.st_color_min);
+			$("#st_color_max").val(dataRecord.st_color_max);
 			$("#color_method").val(dataRecord.color_method);
 			$("#est_ibu").val(dataRecord.est_ibu);
+			$("#st_ibu_min").val(dataRecord.st_ibu_min);
+			$("#st_ibu_max").val(dataRecord.st_ibu_max);
 			$("#ibu_method").val(dataRecord.ibu_method);
+			$("#est_carb").val(dataRecord.est_carb);
+			$("#st_carb_min").val(dataRecord.st_carb_min);
+			$("#st_carb_max").val(dataRecord.st_carb_max);
 			$("#mash_name").val(dataRecord.mash_name);
 			$("#mash_ph").val(dataRecord.mash_ph);
 			$("#mash_sparge_temp").val(dataRecord.mash_sparge_temp);
@@ -1036,18 +1081,40 @@
 	$("#st_name").jqxInput({ theme: theme, width: 250, height: 23 });
 	$("#st_letter").jqxInput({ theme: theme, width: 100, height: 23 });
 	$("#st_guide").jqxInput({ theme: theme, width: 250, height: 23 });
+	$("#st_category").jqxInput({ theme: theme, width: 250, height: 23 });
+	$("#st_category_number").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 0, readOnly: true });
+	$("#st_type").jqxInput({ theme: theme, width: 90, height: 23 });
 	$("#type").jqxDropDownList({ theme: theme, source: srcType, width: 125, height: 23, dropDownHeight: 95 });
 	$("#batch_size").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 100, height: 23, min: 4, decimalDigits: 1, spinButtons: true, spinButtonsStep: 0.1, symbol: 'L', symbolPosition: 'right' });
-	$("#boil_time").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', template: "success", theme: theme, width: 100, height: 23, min: 4, max: 360, decimalDigits: 0, spinButtons: true });
+	$("#boil_time").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 100, height: 23, min: 4, max: 360, decimalDigits: 0, spinButtons: true });
 	$("#efficiency").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 100, height: 23, min: 40, max: 100, decimalDigits: 0, spinButtons: true, symbol: '%', symbolPosition: 'right'  });
+
 	$("#est_og").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 100, height: 23, min: 1, max: 1.9, decimalDigits: 3, spinButtons: true, spinButtonsStep: 0.001 });
-	$("#st_og_min").jqxNumberInput({ disabled: true, inputMode: 'simple', width: 50, height: 23, decimalDigits: 3, readOnly: true });
+	$("#st_og_min").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 3, readOnly: true });
 	$("#st_og_max").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 3, readOnly: true });
-	$("#est_fg").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 100, height: 23, min: 0.980, max: 1.040, decimalDigits: 3, readOnly: true });
-	$("#est_color").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 100, height: 23, min: 1, max: 200, decimalDigits: 0, spinButtons: true });
+
+	$("#est_fg").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 100, height: 23, decimalDigits: 3, readOnly: true });
+	$("#st_fg_min").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 3, readOnly: true });
+	$("#st_fg_max").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 3, readOnly: true });
+
+	$("#est_abv").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 1, readOnly: true });
+	$("#st_abv_min").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 1, readOnly: true });
+	$("#st_abv_max").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 1, readOnly: true });
+
+	$("#est_color").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 0, readOnly: true });
+	$("#st_color_min").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 0, readOnly: true });
+	$("#st_color_max").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 0, readOnly: true });
 	$("#color_method").jqxDropDownList({ theme: theme, source: srcColor, width: 125, height: 23, dropDownHeight: 95 });
-	$("#est_ibu").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 100, height: 23, min: 0, max: 200, decimalDigits: 0, spinButtons: true });
+
+	$("#est_ibu").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 0, readOnly: true });
+	$("#st_ibu_min").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 0, readOnly: true });
+	$("#st_ibu_max").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 0, readOnly: true });
 	$("#ibu_method").jqxDropDownList({ theme: theme, source: srcIBU, width: 125, height: 23, dropDownHeight: 180 });
+
+	$("#est_carb").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 1, readOnly: true });
+	$("#st_carb_min").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 1, readOnly: true });
+	$("#st_carb_max").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 1, readOnly: true });
+
 	$("#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 });
@@ -1103,6 +1170,9 @@
 			st_name: $('#st_name').val(),
 			st_letter: $('#st_letter').val(),
 			st_guide: $('#st_guide').val(),
+			st_type: $('#st_type').val(),
+			st_category: $('#st_category').val(),
+			st_category_number: parseFloat($("#st_category_number").jqxNumberInput('decimal')),
 			st_og_min: dataRecord.st_og_min,
 			st_og_max: dataRecord.st_og_max,
 			st_fg_min: dataRecord.st_fg_min,
@@ -1121,10 +1191,12 @@
 			efficiency: parseFloat($("#efficiency").jqxNumberInput('decimal')),
 			est_og: parseFloat($("#est_og").jqxNumberInput('decimal')),
 			est_fg: parseFloat($("#est_fg").jqxNumberInput('decimal')),
+			est_abv: parseFloat($("#est_abv").jqxNumberInput('decimal')),
 			est_color: parseFloat($("#est_color").jqxNumberInput('decimal')),
 			color_method: $("#color_method").val(),
 			est_ibu: parseFloat($("#est_ibu").jqxNumberInput('decimal')),
 			ibu_method: $("#ibu_method").val(),
+			est_carb: parseFloat($("#est_carb").jqxNumberInput('decimal')),
 			mash_name: $("#mash_name").val(),
 			mash_ph: parseFloat($("#mash_ph").jqxNumberInput('decimal')),
 			mash_sparge_temp: parseFloat($("#mash_sparge_temp").jqxNumberInput('decimal')),
--- a/www/js/rec_new.js	Thu Sep 27 23:13:41 2018 +0200
+++ b/www/js/rec_new.js	Fri Sep 28 17:29:23 2018 +0200
@@ -164,7 +164,8 @@
 					st_letter: $('#st_style_letter').val(),
 					st_guide: $('#st_style_guide').val(),
 					st_category: $('#st_category').val(),
-					st_category_number: $('#st_category_number').val(),
+					st_category_number: parseFloat($('#st_category_number').jqxNumberInput('decimal')),
+					st_type: $("#st_type").val(),
 					st_og_min: parseFloat($("#st_og_min").jqxNumberInput('decimal')),
 					st_og_max: parseFloat($("#st_og_max").jqxNumberInput('decimal')),
 					st_fg_min: parseFloat($("#st_fg_min").jqxNumberInput('decimal')),
@@ -177,7 +178,6 @@
 					st_carb_max: parseFloat($("#st_carb_max").jqxNumberInput('decimal')),
 					st_abv_min: parseFloat($("#st_abv_min").jqxNumberInput('decimal')),
 					st_abv_max: parseFloat($("#st_abv_max").jqxNumberInput('decimal')),
-					st_type: $("#st_type").val(),
 					type: $("#type").val(),
 					batch_size: 20.0,
 					boil_time: parseFloat($("#boil_time").jqxNumberInput('decimal')),
@@ -185,6 +185,8 @@
 					est_og: parseFloat($("#est_og").jqxNumberInput('decimal')),
 					est_fg: 1.000,
 					est_color: 0,
+					est_abv: 0.0,
+					est_carb: 0.0,
 					color_method: "Morey",
 					est_ibu: 0,
 					ibu_method: "Tinseth",
--- a/www/rec_edit.php	Thu Sep 27 23:13:41 2018 +0200
+++ b/www/rec_edit.php	Fri Sep 28 17:29:23 2018 +0200
@@ -27,21 +27,9 @@
          <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; 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; padding: 3px;">Brouw type:</td>
-	 <td align="left" style="padding: 3px;"><div id="type"></div></td>
-         <td></td>
-	 <td></td>
-         <td></td>
-         <td></td>
+	 <td align="left" colspan="5" style="padding: 3px;"><div id="type"></div></td>
         </tr>
         <tr>
          <td style="vertical-align: top; float: right; padding: 3px;">Brouw volume:</td>
@@ -52,32 +40,53 @@
          <td style="padding: 3px;"><div id="efficiency"></div></td>
 	</tr>
         <tr>
+         <th colspan="6">Bierstijl gegevens</th>
+        </tr>
+        <tr>
+         <td style="vertical-align: top; float: right; padding: 3px;">Stijlgids:</td>
+         <td align="left" style="vertical-align: top; padding: 3px;"><input readonly="1" 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 readonly="1" 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 readonly="1" id="st_letter" /></td>
+        </tr>
+        <tr>
+         <td style="vertical-align: top; float: right; padding: 3px;">Stijl type:</td>
+         <td align="left" style="vertical-align: top; padding: 3px;"><input readonly="1"  id="st_type" /></td>
+         <td style="vertical-align: top; float: right; padding: 3px;">Categorie:</td>
+         <td align="left" style="vertical-align: top; padding: 3px;"><input readonly="1" id="st_category" /></td>
+         <td style="vertical-align: top; float: right; padding: 3px;">Categorie nr:</td>
+         <td style="padding: 3px;"><div id="st_category_number"></div></td>
+        </tr>
+	<tr>
          <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="padding: 3px;"><div style="float: left;" id="est_og"></div><div style="float: left; margin-left: 15px;" id="st_og_min"></div><div style="float: left; margin-left: 5px;" 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="padding: 3px;"><div style="float: left;" id="est_fg"></div><div style="float: left; margin-left: 15px;" id="st_fg_min"></div><div style="float: left; margin-left: 5px;" id="st_fg_max"></div></td>
+         <td style="vertical-align: top; float: right; padding: 3px;">Alcohol vol%:</td>
+         <td style="padding: 3px;"><div style="float: left;" id="est_abv"></div><div style="float: left; margin-left: 15px;" id="st_abv_min"></div><div style="float: left; margin-left: 5px;" id="st_abv_max"></div></td>
+	</tr>
+        <tr>
          <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="padding: 3px;"><div style="float: left;" id="est_color"></div><div style="float: left; margin-left: 15px;" id="st_color_min"></div><div style="float: left; margin-left: 5px;" id="st_color_max"></div></td>
+         <td style="vertical-align: top; float: right; padding: 3px;">Kleur methode:</td>
+	 <td style="padding: 3px;"><div style="float: left;" id="color_method"></div></td>
+         <td style="vertical-align: top; float: right; padding: 3px;">Koolzuur vol:</td>
+         <td style="padding: 3px;"><div style="float: left;" id="est_carb"></div><div style="float: left; margin-left: 15px;" id="st_carb_min"></div><div style="float: left; margin-left: 5px;" id="st_carb_max"></div></td>
+	</tr>
+        <tr>
          <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 style="padding: 3px;"><div style="float: left;" id="est_ibu"></div><div style="float: left; margin-left: 15px;" id="st_ibu_min"></div><div style="float: left; margin-left: 5px;" id="st_ibu_max"></div></td>
+         <td style="vertical-align: top; float: right; padding: 3px;">Bitterheid methode:</td>
+         <td style="padding: 3px;"><div style="float: left;" id="ibu_method"></div></td>
          <td></td>
          <td></td>
         </tr>
        </table>
-       <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" />
+       <div style="float: right; margin-top: 60px; margin-bottom: 10px;">
+        <input style="margin-right: 100px;"  type="button" id="Delete" value="Delete" />
+        <input style="margin-right: 100px;"  type="button" id="Save" value="Save" />
+        <input style="margin-right: 410px;" type="button" id="Cancel" value="Cancel" />
        </div>
       </div>
      </div> <!-- tab algemeen -->

mercurial