diff -r d4f4762e59b3 -r bb9a06aa9acd www/js/recipes.js
--- a/www/js/recipes.js	Tue Sep 18 23:16:14 2018 +0200
+++ b/www/js/recipes.js	Thu Sep 20 16:19:09 2018 +0200
@@ -170,6 +170,7 @@
 				{ name: 'f_recommend_mash', type: 'bool' },
 				{ name: 'f_add_after_boil', type: 'bool' },
 				{ name: 'f_adjust_to_total_100', type: 'bool' },
+				{ name: 'f_percentage', type: 'float' },
 				{ name: 'f_di_ph', type: 'float' }
 			],
 			addrow: function (rowid, rowdata, position, commit) {
@@ -187,20 +188,22 @@
 			datafields: [
 				{ name: 'record', type: 'number' },
 				{ name: 'name', type: 'string' },
-				{ name: 'cost', type: 'float' },
 				{ name: 'type', type: 'string' },
 				{ name: 'yield', type: 'float' },
 				{ name: 'color', type: 'float' },
+				{ name: 'add_after_boil', type: 'bool' },
+				{ name: 'origin', type: 'string' },
+				{ name: 'supplier', type: 'string' },
 				{ name: 'coarse_fine_diff', type: 'float' },
 				{ name: 'moisture', type: 'float' },
 				{ name: 'diastatic_power', type: 'float' },
 				{ name: 'protein', type: 'float' },
 				{ name: 'max_in_batch', type: 'float' },
+				{ name: 'recommend_mash', type: 'bool' },
 				{ name: 'graintype', type: 'string' },
-				{ name: 'added', type: 'string' },
-				{ name: 'dissolved_protein', type: 'float' },
-				{ name: 'adjust_to_total_100', type: 'bool' },
-				{ name: 'di_ph', type: 'float' }
+				{ name: 'di_ph', type: 'float' },
+				{ name: 'inventory', type: 'float' },
+				{ name: 'cost', type: 'float' }
 			],
 			url: fermentableUrl,
 			async: true
@@ -221,10 +224,10 @@
 				var me = this;
 				var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
 				toolbar.append(container);
-				container.append('<div style="float: left; margin-left: 165px;" id="addrowbutton"></div>');
-				container.append('<input style="float: left; margin-left: 230px;" id="deleterowbutton" type="button" value="Verwijder mout" />');
+				container.append('<div style="float: left; margin-left: 165px;" id="faddrowbutton"></div>');
+				container.append('<input style="float: left; margin-left: 230px;" id="fdeleterowbutton" type="button" value="Verwijder mout" />');
 				// add fermentable from dropdownlist.
-				$("#addrowbutton").jqxDropDownList({
+				$("#faddrowbutton").jqxDropDownList({
 					placeHolder: "Kies mout:",
 					theme: theme,
 					source: fermentablelist,
@@ -233,22 +236,44 @@
 					height: 27,
 					dropDownWidth: 300
 				});
-				$("#addrowbutton").on('select', function (event) {
+				$("#faddrowbutton").on('select', function (event) {
 					if (event.args) {
 						var index = event.args.index;
 						var datarecord = fermentablelist.records[index];
 						var row = {};
 						row["f_name"] = datarecord.name;
+						row["f_origin"] = datarecord.origin;
+						row["f_supplier"] = datarecord.supplier;
 						row["f_amount"] = 0;
 						row["f_cost"] = datarecord.cost;
+						row["f_type"] = datarecord.type;
+						row["f_yield"] = datarecord.yield;
+						row["f_color"] = datarecord.color;
+						row["f_coarse_fine_diff"] = datarecord.coarse_fine_diff;
+						row["f_moisture"] = datarecord.moisture;
+						row["f_diastatic_power"] = datarecord.diastatic_power;
+						row["f_protein"] = datarecord.protein;
+						row["f_max_in_batch"] = datarecord.max_in_batch;
+						row["f_graintype"] = datarecord.graintype;
+						if (datarecord.type == "Sugar") {
+							row["f_added"] = "Boil";
+						} else {
+							row["f_added"] = "Mash";
+						}
+						row["f_dissolved_protein"] = 0;
+						row["f_recommend_mash"] = datarecord.recommend_mash;
+						row["f_add_after_boil"] = datarecord.add_after_boil;
+						row["f_adjust_to_total_100"] = 0;
+						row["f_percentage"] = 0;
+						row["f_di_ph"] = datarecord.di_ph;
 						var commit = $("#fermentableGrid").jqxGrid('addrow', null, row);
 					}
 				});
 
 				// delete selected fermentable.
 				// Precentage aanpassen basis mout.
-				$("#deleterowbutton").jqxButton({ theme: theme, height: 27, width: 150 });
-				$("#deleterowbutton").on('click', function () {
+				$("#fdeleterowbutton").jqxButton({ theme: theme, height: 27, width: 150 });
+				$("#fdeleterowbutton").on('click', function () {
 					var selectedrowindex = $("#fermentableGrid").jqxGrid('getselectedrowindex');
 					var rowscount = $("#fermentableGrid").jqxGrid('getdatainformation').rowscount;
 					if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
@@ -260,6 +285,7 @@
 			columns: [
 				{ text: 'Mout/suiker', editable: false, datafield: 'f_name' },
 				{ text: 'Type', editable: false, width: 100, datafield: 'f_type' },
+				{ text: 'Opbrengst', datafield: 'f_yield', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'p1' },
 				{ text: 'Gewicht', datafield: 'f_amount', width: 110, align: 'right', cellsalign: 'right', cellsformat: 'f3',
 				  columntype: 'numberinput',
 				  validation: function (cell, value) {
@@ -268,7 +294,17 @@
 				  	}
 				  	return true;
 				  }
-				}
+				},
+				{ text: 'Procent', datafield: 'f_percentage', width: 110, align: 'right', cellsalign: 'right', cellsformat: 'p3',
+				  columntype: 'numberinput',
+				  validation: function (cell, value) {
+					if (value < 0 || value > 100) {
+						return { result: false, message: "Percentage moet 0-100 zijn" };
+					}
+					return true;
+				  }
+				},
+				{ text: '100%', datafield: 'f_adjust_to_total_100', columntype: 'checkbox', width: 80 }
 			]
 		})
 	};
@@ -342,10 +378,10 @@
 				var me = this;
 				var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
 				toolbar.append(container);
-				container.append('<div style="float: left; margin-left: 165px;" id="addrowbutton"></div>');
-				container.append('<input style="float: left; margin-left: 230px;" id="deleterowbutton" type="button" value="Verwijder water" />');
+				container.append('<div style="float: left; margin-left: 165px;" id="waddrowbutton"></div>');
+				container.append('<input style="float: left; margin-left: 230px;" id="wdeleterowbutton" type="button" value="Verwijder water" />');
 				// add water from dropdownlist.
-				$("#addrowbutton").jqxDropDownList({
+				$("#waddrowbutton").jqxDropDownList({
 					placeHolder: "Kies water:",
 					theme: theme,
 					source: waterlist,
@@ -354,7 +390,7 @@
 					height: 27,
 					dropDownWidth: 300
 				});
-				$("#addrowbutton").on('select', function (event) {
+				$("#waddrowbutton").on('select', function (event) {
 					if (event.args) {
 						var index = event.args.index;
 						var datarecord = waterlist.records[index];
@@ -376,8 +412,8 @@
 
 				// delete selected water.
 				// Overgebleven waters in volume verhogen met het verwijderde water.
-				$("#deleterowbutton").jqxButton({ theme: theme, height: 27, width: 150 });
-				$("#deleterowbutton").on('click', function () {
+				$("#wdeleterowbutton").jqxButton({ theme: theme, height: 27, width: 150 });
+				$("#wdeleterowbutton").on('click', function () {
 					var selectedrowindex = $("#waterGrid").jqxGrid('getselectedrowindex');
 					var rowscount = $("#waterGrid").jqxGrid('getdatainformation').rowscount;
 					if (selectedrowindex >= 0 && selectedrowindex < rowscount) {