--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/www/js/recipes.js Sat Sep 01 22:24:09 2018 +0200
@@ -0,0 +1,432 @@
+/*****************************************************************************
+ * Copyright (C) 2018
+ *
+ * Michiel Broek <mbroek at mbse dot eu>
+ *
+ * This file is part of BMS
+ *
+ * This is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the
+ * Free Software Foundation; either version 2, or (at your option) any
+ * later version.
+ *
+ * BrewCloud is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with ThermFerm; see the file COPYING. If not, write to the Free
+ * Software Foundation, 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA.
+ *****************************************************************************/
+
+
+function createDelElements() {
+ $('#eventWindow').jqxWindow({
+ theme: theme,
+ position: { x: 490, y: 210 },
+ width: 300,
+ height: 175,
+ resizable: false,
+ isModal: true,
+ modalOpacity: 0.4,
+ okButton: $('#delOk'),
+ cancelButton: $('#delCancel'),
+ initContent: function () {
+ $('#delOk').jqxButton({ width: '65px', theme: theme });
+ $('#delCancel').jqxButton({ width: '65px', theme: theme });
+ $('#delCancel').focus();
+ }
+ });
+ $('#eventWindow').jqxWindow('hide');
+}
+
+
+$(document).ready(function () {
+ var url = "includes/db_recipes.php";
+ // tooltips
+ $("#name").jqxTooltip({ content: 'De naam voor dit recept.' });
+ $("#notes").jqxTooltip({ content: 'De uitgebreide opmerkingen over dit recept.' });
+ $("#style_name").jqxTooltip({ content: 'De bierstijl naam voor dit recept.'});
+ $("#type").jqxTooltip({ content: 'Het brouw type van dit recept.' });
+ // prepare the data
+ var source = {
+ datatype: "json",
+ cache: false,
+ datafields: [
+ { name: 'record', type: 'number' },
+ { name: 'style_name', type: 'string' },
+ { name: 'style_letter', type: 'string' },
+ { name: 'style_guide', type: 'string' },
+ { name: 'name', type: 'string' },
+ { name: 'notes', type: 'string' },
+ { name: 'type', type: 'number' },
+ { name: 'batch_size', type: 'float' },
+ { name: 'boil_time', type: 'float' },
+ { name: 'efficiency', type: 'float' },
+ { name: 'est_og', type: 'float' },
+ { name: 'est_fg', type: 'float' },
+ { name: 'est_color', type: 'float' },
+ { name: 'color_method', type: 'string' },
+ { name: 'est_ibu', type: 'float' },
+ { name: 'ibu_method', type: 'string' },
+ { name: 'json_fermentables', type: 'string' },
+ { name: 'json_hops', type: 'string' },
+ { name: 'json_miscs', type: 'string' },
+ { name: 'json_yeasts', type: 'string' },
+ { name: 'json_waters', type: 'string' },
+ { name: 'json_mash', type: 'string' }
+ ],
+ id: 'record',
+ url: url,
+ deleterow: function (rowid, commit) {
+ // synchronize with the server - send delete command
+ var data = "delete=true&" + $.param({ record: rowid });
+ $.ajax({
+ dataType: 'json',
+ url: url,
+ cache: false,
+ data: data,
+ success: function (data, status, xhr) {
+ // delete command is executed.
+ commit(true);
+ },
+ error: function (jqXHR, textStatus, errorThrown) {
+ commit(false);
+ }
+ });
+ },
+ addrow: function (rowid, rowdata, position, commit) {
+ var data = "insert=true&" + $.param(rowdata);
+ $.ajax({
+ dataType: 'json',
+ url: url,
+ cache: false,
+ data: data,
+ success: function (data, status, xhr) {
+ commit(true);
+ },
+ error: function(jqXHR, textStatus, errorThrown) {
+ commit(false);
+ }
+ });
+ },
+ updaterow: function (rowid, rowdata, commit) {
+ var data = "update=true&" + $.param(rowdata);
+ $.ajax({
+ dataType: 'json',
+ url: url,
+ cache: false,
+ data: data,
+ success: function (data, status, xhr) {
+ // update command is executed.
+ commit(true);
+ },
+ error: function(jqXHR, textStatus, errorThrown) {
+ commit(false);
+ }
+ });
+ }
+ };
+ var dataAdapter = new $.jqx.dataAdapter(source);
+ // Inline steps editor
+/* var editsteps = function (data) {
+ var generaterow = function () {
+ var row = {};
+ row["step_name"] = "Stap 1";
+ row["step_type"] = "Infusion";
+ row["step_temp"] = 62.0;
+ row['step_time'] = 20.0;
+ row['ramp_time'] = 1.0;
+ row['end_temp'] = 62.0;
+ return row;
+ }
+ var stepSource = {
+ localdata: data.steps,
+ datatype: "local",
+ datafields: [
+ { name: 'step_name', type: 'string' },
+ { name: 'step_type', type: 'string' },
+ { name: 'step_temp', type: 'float' },
+ { name: 'step_time', type: 'float' },
+ { name: 'ramp_time', type: 'float' },
+ { name: 'end_temp', type: 'float' }
+ ],
+ addrow: function (rowid, rowdata, position, commit) {
+ commit(true);
+ },
+ deleterow: function (rowid, commit) {
+ commit(true);
+ }
+ };
+ var stepAdapter = new $.jqx.dataAdapter(stepSource);
+ $("#grid").jqxGrid({
+ width: 640,
+ height: 330,
+ source: stepAdapter,
+ theme: theme,
+ selectionmode: 'singlerow',
+ editmode: 'selectedrow',
+ editable: true,
+ showtoolbar: true,
+ rendertoolbar: function (toolbar) {
+ var me = this;
+ var container = $("<div style='margin: 5px;'></div>");
+ toolbar.append(container);
+ container.append('<input style="margin-left: 100px;" id="addrowbutton" type="button" value="Nieuwe stap" />');
+ container.append('<input style="margin-left: 140px;" id="deleterowbutton" type="button" value="Verwijder stap" />');
+ $("#addrowbutton").jqxButton({ theme: theme, width: 150 });
+ $("#deleterowbutton").jqxButton({ theme: theme, width: 150 });
+ // create new row.
+ $("#addrowbutton").on('click', function () {
+ var datarow = generaterow();
+ var commit = $("#grid").jqxGrid('addrow', null, datarow);
+ });
+ // delete row.
+ $("#deleterowbutton").on('click', function () {
+ var selectedrowindex = $("#grid").jqxGrid('getselectedrowindex');
+ var rowscount = $("#grid").jqxGrid('getdatainformation').rowscount;
+ if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
+ var id = $("#grid").jqxGrid('getrowid', selectedrowindex);
+ var commit = $("#grid").jqxGrid('deleterow', id);
+ }
+ });
+ },
+ columns: [
+ { text: 'Stap naam', datafield: 'step_name' },
+ { text: 'Stap type', datafield: 'step_type', width: 100, columntype: 'dropdownlist',
+ createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
+ var dataSource = [ "Infusion", "Temperature", "Decoction" ];
+ editor.jqxDropDownList({ source: dataSource, dropDownHeight: 95 });
+ }
+ },
+ { text: 'Temperatuur', datafield: 'step_temp', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'f1',
+ validation: function (cell, value) {
+ if (value < 35 || value > 80) {
+ return { result: false, message: "De temperatuur moet tussen 35 en 80 zijn." };
+ }
+ return true;
+ }
+ },
+ { text: 'Eind', datafield: 'end_temp', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'f1',
+ validation: function (cell, value) {
+ if (value < 35 || value > 80) {
+ return { result: false, message: "De temperatuur moet tussen 35 en 80 zijn." };
+ }
+ return true;
+ }
+ },
+ { text: 'Tijd', datafield: 'step_time', width: 70, align: 'right', cellsalign: 'right',
+ validation: function (cell, value) {
+ if (value < 1 || value > 360) {
+ return { result: false, message: "De tijd moet tussen 1 en 360 zijn." };
+ }
+ return true;
+ }
+ },
+ { text: 'Stap', datafield: 'ramp_time', width: 70, align: 'right', cellsalign: 'right',
+ validation: function (cell, value) {
+ if (value < 1 || value > 60) {
+ return { result: false, message: "De tijd moet tussen 1 en 60 zijn." };
+ }
+ return true;
+ }
+ }
+ ]
+ });
+ $("#grid").on('cellendedit', function (event) {
+ $('#grid').jqxGrid('sortby', 'step_temp', 'asc');
+ });
+ };
+*/
+ // initialize the input fields.
+ var srcType = [ "All Grain", "Partial Mash", "Extract" ];
+ var srcColor = [ "Morey", "Mosher", "Daniels" ];
+ var srcIBU = [ "Tinseth", "Rager", "Garetz", "Daniels", "Mosher", "Noonan" ];
+ $("#name").jqxInput({ theme: theme, width: 640, height: 23 });
+ $("#notes").jqxInput({ theme: theme, width: 960, height: 200 });
+ $("#style_name").jqxInput({ theme: theme, width: 250, height: 23 });
+ $("#style_letter").jqxInput({ theme: theme, width: 100, height: 23 });
+ $("#style_guide").jqxInput({ theme: theme, width: 250, 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 });
+ $("#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 });
+ $("#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 });
+ $("#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 });
+ $("#ibu_method").jqxDropDownList({ theme: theme, source: srcIBU, width: 125, height: 23, dropDownHeight: 180 });
+ var editrow = -1;
+ // initialize jqxGrid
+ $("#jqxgrid").jqxGrid({
+ width: 1280,
+ height: 630,
+ source: dataAdapter,
+ groupable: true,
+ theme: theme,
+ showstatusbar: true,
+ localization: getLocalization(),
+ renderstatusbar: function (statusbar) {
+ var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
+ var addButton = $("<div style='float: right; margin-right: 15px;'><img style='position: relative; margin-top: 2px;' src='images/add.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Add</span></div>");
+ container.append(addButton);
+ statusbar.append(container);
+ addButton.jqxButton({ theme: theme, width: 120, height: 20 });
+ // add new row.
+ addButton.click(function (event) {
+ editrow = -1;
+ $("#popupWindow").jqxWindow({ position: { x: 40, y: 20 } });
+ $("#name").val('');
+ $("#notes").val('');
+ $("#style_name").val('');
+ $("#style_letter").val('');
+ $("#style_guide").val('');
+ $("#type").val('All Grain');
+ $("#batch_size").val(20);
+ $("#boil_time").val(90);
+ $("#efficiency").val(75);
+ $("#est_og").val(1.062);
+ $("#est_fg").val(1.000);
+ $("#est_color").val(0);
+ $("#color_method").val('Morey');
+ $("#est_ibu").val(0);
+ $("#ibu_method").val('Tinseth');
+ // editsteps('');
+ $("#popupWindow").jqxWindow('open');
+ });
+ },
+ filterable: true,
+ filtermode: 'excel',
+ columns: [
+ { text: 'Stijlgids', datafield: 'style_guide', width: 120 },
+ { text: 'Letter', datafield: 'style_letter', width: 60 },
+ { text: 'Stijl', datafield: 'style_name', width: 150 },
+ { text: 'Naam', datafield: 'name' },
+ { text: 'OG', datafield: 'est_og', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f3' },
+ { text: 'EBC', datafield: 'est_color', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f0' },
+ { text: 'IBU', datafield: 'est_ibu', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f0' },
+ { text: 'Wijzig', datafield: 'Edit', width: 120, align: 'center', columntype: 'button', cellsrenderer: function () {
+ return "Wijzig";
+ }, buttonclick: function (row) {
+ // open the popup window when the user clicks a button.
+ editrow = row;
+ $("#popupWindow").jqxWindow({ position: { x: 40, y: 20 } });
+ // get the clicked row's data and initialize the input fields.
+ var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
+ $("#name").val(dataRecord.name);
+ $("#notes").val(dataRecord.notes);
+ $("#style_name").val(dataRecord.style_name);
+ $("#style_letter").val(dataRecord.style_letter);
+ $("#style_guide").val(dataRecord.style_guide);
+ $("#type").val(dataRecord.type);
+ $("#batch_size").val(dataRecord.batch_size);
+ $("#boil_time").val(dataRecord.boil_time);
+ $("#efficiency").val(dataRecord.efficiency);
+ $("#est_og").val(dataRecord.est_og);
+ $("#est_fg").val(dataRecord.est_fg);
+ $("#est_color").val(dataRecord.est_color);
+ $("#color_method").val(dataRecord.color_method);
+ $("#est_ibu").val(dataRecord.est_ibu);
+ $("#ibu_method").val(dataRecord.ibu_method);
+ // editsteps(dataRecord);
+ // show the popup window.
+ $("#popupWindow").jqxWindow('open');
+ }
+ }
+ ],
+ groups: ['style_guide','style_letter' ]
+ });
+
+ // initialize the popup window and buttons.
+ $("#popupWindow").jqxWindow({
+ width: 1200,
+ height: 620,
+ resizable: false,
+ theme: theme,
+ isModal: true,
+ autoOpen: false,
+ cancelButton: $("#Cancel"),
+ modalOpacity: 0.40
+ });
+
+ // Tabs inside the popup window.
+ $('#jqxTabs').jqxTabs({
+ theme: theme,
+ autoHeight: false,
+ height: 580,
+ position: 'top'
+ });
+
+ $("#popupWindow").on('open', function () {
+ $("#name").jqxInput('selectAll');
+ });
+ $("#Delete").jqxButton({ width: '90px', theme: theme });
+ $("#Delete").click(function () {
+ if (editrow >= 0) {
+ // Open a popup to confirm this action.
+ $('#eventWindow').jqxWindow('open');
+ $("#delOk").click(function () {
+ var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow);
+ $("#jqxgrid").jqxGrid('deleterow', rowID);
+ });
+ }
+ $("#popupWindow").jqxWindow('hide');
+ });
+ $("#Cancel").jqxButton({ width: '90px', theme: theme });
+ $("#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');
+ if (editrow >= 0) {
+ var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow);
+ var row = {
+ record: rowID,
+ name: $("#name").val(),
+ notes: $("#notes").val(),
+ style_name: $('#style_name').val(),
+ style_letter: $('#style_letter').val(),
+ style_guide: $('#style_guide').val(),
+ type: $("#type").val(),
+ batch_size: parseFloat($("#batch_size").jqxNumberInput('decimal')),
+ boil_time: parseFloat($("#boil_time").jqxNumberInput('decimal')),
+ efficiency: parseFloat($("#efficiency").jqxNumberInput('decimal')),
+ est_og: parseFloat($("#est_og").jqxNumberInput('decimal')),
+ est_fg: parseFloat($("#est_fg").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()
+// steps: steprows
+ };
+ $('#jqxgrid').jqxGrid('updaterow', rowID, row);
+ $("#popupWindow").jqxWindow('hide');
+ } else {
+ // Insert a record
+ var newrow = {
+ record: -1,
+ name: $("#name").val(),
+ notes: $("#notes").val(),
+ style_name: $('#style_name').val(),
+ style_letter: $('#style_letter').val(),
+ style_guide: $('#style_guide').val(),
+ type: $("#type").val(),
+ batch_size: parseFloat($("#batch_size").jqxNumberInput('decimal')),
+ boil_time: parseFloat($("#boil_time").jqxNumberInput('decimal')),
+ efficiency: parseFloat($("#efficiency").jqxNumberInput('decimal')),
+ est_og: parseFloat($("#est_og").jqxNumberInput('decimal')),
+ est_fg: parseFloat($("#est_fg").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()
+// steps: steprows
+ };
+ $('#jqxgrid').jqxGrid('addrow', null, newrow);
+ $("#popupWindow").jqxWindow('hide');
+ }
+ });
+ createDelElements();
+});
+