Sat, 22 Sep 2018 15:02:43 +0200
Added miscs inline editor. Switched to http POST because of GET limitations.
/***************************************************************************** * 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.' }); $("#st_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: 'st_name', type: 'string' }, { name: 'st_letter', type: 'string' }, { 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' }, { 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: 'mash_sparge_temp', type: 'float' }, { name: 'mash_ph', type: 'float' }, { name: 'mash_name', type: 'string' }, { name: 'fermentables', type: 'string' }, { name: 'hops', type: 'string' }, { name: 'miscs', type: 'string' }, { name: 'yeasts', type: 'string' }, { name: 'waters', type: 'array' }, { name: 'mashs', 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, type: "POST", 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, type: "POST", 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, type: "POST", 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 fermentables editor var editFermentable = function (data) { var fermentableSource = { localdata: data.fermentables, datatype: "local", datafields: [ { name: 'f_name', type: 'string' }, { name: 'f_origin', type: 'string' }, { name: 'f_supplier', type: 'string' }, { name: 'f_amount', type: 'float' }, { name: 'f_cost', type: 'float' }, { name: 'f_type', type: 'string' }, { name: 'f_yield', type: 'float' }, { name: 'f_color', type: 'float' }, { name: 'f_coarse_fine_diff', type: 'float' }, { name: 'f_moisture', type: 'float' }, { name: 'f_diastatic_power', type: 'float' }, { name: 'f_protein', type: 'float' }, { name: 'f_max_in_batch', type: 'float' }, { name: 'f_graintype', type: 'string' }, { name: 'f_added', type: 'string' }, { name: 'f_dissolved_protein', type: 'float' }, { 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) { commit(true); }, deleterow: function (rowid, commit) { commit(true); } }; var fermentableAdapter = new $.jqx.dataAdapter(fermentableSource); // dropdownlist datasource from inventory_fermentables var fermentableUrl = "getfermentablesources.php"; var fermentableInvSource = { datatype: "json", datafields: [ { name: 'record', type: 'number' }, { name: 'name', type: 'string' }, { 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: 'di_ph', type: 'float' }, { name: 'inventory', type: 'float' }, { name: 'cost', type: 'float' } ], url: fermentableUrl, async: true }; var fermentablelist = new $.jqx.dataAdapter(fermentableInvSource); $("#fermentableGrid").jqxGrid({ width: 960, height: 400, source: fermentableAdapter, theme: theme, selectionmode: 'singlerow', editmode: 'selectedrow', editable: true, localization: getLocalization(), showtoolbar: true, rendertoolbar: function (toolbar) { 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="faddrowbutton"></div>'); container.append('<input style="float: left; margin-left: 230px;" id="fdeleterowbutton" type="button" value="Verwijder mout" />'); // add fermentable from dropdownlist. $("#faddrowbutton").jqxDropDownList({ placeHolder: "Kies mout:", theme: theme, source: fermentablelist, displayMember: "name", width: 150, height: 27, dropDownWidth: 300 }); $("#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. $("#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) { var id = $("#fermentableGrid").jqxGrid('getrowid', selectedrowindex); var commit = $("#fermentableGrid").jqxGrid('deleterow', id); } }); }, 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) { if (value < 0 || value > 100000000000 ) { return { result: false, message: "Volume moet 0-~ zijn" }; } 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 } ] }) }; // Inline hops editor var editHop = function (data) { var hopSource = { localdata: data.hops, datatype: "local", cache: false, datafields: [ { name: 'h_name', type: 'string' }, { name: 'h_origin', type: 'string' }, { name: 'h_amount', type: 'float' }, { name: 'h_cost', type: 'float' }, { name: 'h_type', type: 'string' }, { name: 'h_form', type: 'string' }, { name: 'h_useat', type: 'string' }, { name: 'h_time', type: 'float' }, { name: 'h_alpha', type: 'float' }, { name: 'h_beta', type: 'float' }, { name: 'h_hsi', type: 'float' }, { name: 'h_humulene', type: 'float' }, { name: 'h_carophyllene', type: 'float' }, { name: 'h_cohumulone', type: 'float' }, { name: 'h_myrcene', type: 'float' }, { name: 'h_total_oil', type: 'float' } ], addrow: function (rowid, rowdata, position, commit) { commit(true); }, deleterow: function (rowid, commit) { commit(true); } }; var hopAdapter = new $.jqx.dataAdapter(hopSource); // dropdownlist datasource from inventory_hops var hopUrl = "gethopsources.php"; var hopInvSource = { datatype: "json", datafields: [ { name: 'record', type: 'number' }, { name: 'name', type: 'string' }, { name: 'origin', type: 'string' }, { name: 'type', type: 'string' }, { name: 'alpha', type: 'float' }, { name: 'beta', type: 'float' }, { name: 'humulene', type: 'float' }, { name: 'caryophyllene', type: 'float' }, { name: 'cohumulone', type: 'float' }, { name: 'myrcene', type: 'float' }, { name: 'hsi', type: 'float' }, { name: 'useat', type: 'string' }, { name: 'form', type: 'string' }, { name: 'total_oil', type: 'float' }, { name: 'cost', type: 'float' } ], url: hopUrl, async: true }; var hoplist = new $.jqx.dataAdapter(hopInvSource); $("#hopGrid").jqxGrid({ width: 960, height: 400, source: hopAdapter, theme: theme, selectionmode: 'singlerow', editmode: 'selectedrow', editable: true, localization: getLocalization(), showtoolbar: true, rendertoolbar: function (toolbar) { 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="haddrowbutton"></div>'); container.append('<input style="float: left; margin-left: 230px;" id="hdeleterowbutton" type="button" value="Verwijder hop" />'); // add hop from dropdownlist. $("#haddrowbutton").jqxDropDownList({ placeHolder: "Kies hop:", theme: theme, source: hoplist, displayMember: "name", width: 150, height: 27, dropDownWidth: 300 }); $("#haddrowbutton").on('select', function (event) { if (event.args) { var index = event.args.index; var datarecord = hoplist.records[index]; var row = {}; row["h_name"] = datarecord.name; row["h_origin"] = datarecord.origin; row["h_amount"] = 0; row["h_cost"] = datarecord.cost; row["h_type"] = datarecord.type; row["h_form"] = datarecord.form; row["h_useat"] = datarecord.useat; 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_cohumulone"] = datarecord.cohumulone; row["h_myrcene"] = datarecord.myrcene; row["h_total_oil"] = datarecord.total_oil; var commit = $("#hopGrid").jqxGrid('addrow', null, row); } }); // delete selected hop. $("#hdeleterowbutton").jqxButton({ theme: theme, height: 27, width: 150 }); $("#hdeleterowbutton").on('click', function () { var selectedrowindex = $("#hopGrid").jqxGrid('getselectedrowindex'); var rowscount = $("#hopGrid").jqxGrid('getdatainformation').rowscount; if (selectedrowindex >= 0 && selectedrowindex < rowscount) { var id = $("#hopGrid").jqxGrid('getrowid', selectedrowindex); var commit = $("#hopGrid").jqxGrid('deleterow', id); } }); }, columns: [ { text: 'Hop', editable: false, datafield: 'h_name' }, { 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', datafield: 'h_alpha', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'p1' }, { text: 'Gewicht', datafield: 'h_amount', width: 110, align: 'right', cellsalign: 'right', cellsformat: 'f3', columntype: 'numberinput', validation: function (cell, value) { if (value < 0 || value > 100000000000 ) { return { result: false, message: "Volume moet 0-~ zijn" }; } return true; } }, { text: 'Gebruik', width: 110, align: 'center', cellsalign: 'center', datafield: 'h_useat' }, { text: 'Tijd', datafield: 'h_time', width: 70, align: 'right', cellsalign: 'right', cellsformat: 'f0', columntype: 'numberinput', validation: function (cell, value) { if (value < 0 || value > 100000000000 ) { return { result: false, message: "De tijd moet 0-~ zijn" }; } return true; } // TODO: Only enable editing if Boil, else use fixed values. }, { text: 'IBU', editable: false, datafield: 'ibu', width: 80, align: 'right', cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) { var ibu = toIBU(rowdata.h_useat, rowdata.h_form, parseFloat($("#est_og").jqxNumberInput('decimal')), parseFloat($("#batch_size").jqxNumberInput('decimal')), parseFloat(rowdata.h_amount), parseFloat(rowdata.h_time), parseFloat(rowdata.h_alpha), $("#ibu_method").val() ); return "<div style='margin: 4px;' class='jqx-right-align'>" + dataAdapter.formatNumber(ibu, "f1") + "</div>"; } } ] }) }; // Inline miscs editor var editMisc = function (data) { var miscSource = { localdata: data.miscs, datatype: "local", cache: false, datafields: [ { name: 'm_name', type: 'string' }, { name: 'm_amount', type: 'float' }, { name: 'm_cost', type: 'float' }, { name: 'm_type', type: 'string' }, { name: 'm_use_use', type: 'string' }, { name: 'm_time', type: 'float' }, { name: 'm_amount_is_weight', type: 'bool' } ], addrow: function (rowid, rowdata, position, commit) { commit(true); }, deleterow: function (rowid, commit) { commit(true); } }; var miscAdapter = new $.jqx.dataAdapter(miscSource); // dropdownlist datasource from inventory_miscs var miscUrl = "getmiscsources.php"; var miscInvSource = { datatype: "json", datafields: [ { name: 'record', type: 'number' }, { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'use_use', type: 'string' }, { name: 'amount_is_weight', type: 'bool' }, { name: 'time', type: 'float' }, { name: 'cost', type: 'float' } ], url: miscUrl, async: true }; var misclist = new $.jqx.dataAdapter(miscInvSource); $("#miscGrid").jqxGrid({ width: 960, height: 400, source: miscAdapter, theme: theme, selectionmode: 'singlerow', editmode: 'selectedrow', editable: true, localization: getLocalization(), showtoolbar: true, rendertoolbar: function (toolbar) { 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="maddrowbutton"></div>'); container.append('<input style="float: left; margin-left: 230px;" id="mdeleterowbutton" type="button" value="Verwijder ingredient" />'); // add misc from dropdownlist. $("#maddrowbutton").jqxDropDownList({ placeHolder: "Kies ingredient:", theme: theme, source: misclist, displayMember: "name", width: 150, height: 27, dropDownWidth: 300 }); $("#maddrowbutton").on('select', function (event) { if (event.args) { var index = event.args.index; var datarecord = misclist.records[index]; var row = {}; row["m_name"] = datarecord.name; row["m_amount"] = 0; row["m_cost"] = datarecord.cost; row["m_type"] = datarecord.type; row["m_use_use"] = datarecord.use_use; row["m_time"] = 0; row["m_amount_is_weight"] = datarecord.amount_is_weight; var commit = $("#miscGrid").jqxGrid('addrow', null, row); } }); // delete selected misc. $("#mdeleterowbutton").jqxButton({ theme: theme, height: 27, width: 150 }); $("#mdeleterowbutton").on('click', function () { var selectedrowindex = $("#miscGrid").jqxGrid('getselectedrowindex'); var rowscount = $("#miscGrid").jqxGrid('getdatainformation').rowscount; if (selectedrowindex >= 0 && selectedrowindex < rowscount) { var id = $("#miscGrid").jqxGrid('getrowid', selectedrowindex); var commit = $("#miscGrid").jqxGrid('deleterow', id); } }); }, columns: [ { text: 'Ingredient', editable: false, datafield: 'm_name' }, { text: 'Type', editable: false, width: 120, align: 'center', cellsalign: 'center', datafield: 'm_type' }, { text: 'Gebruik', editable: false, width: 90, align: 'center', cellsalign: 'center', datafield: 'm_use_use' }, { text: 'Gewicht', datafield: 'm_amount', width: 110, align: 'right', cellsalign: 'right', cellsformat: 'f5', columntype: 'numberinput', validation: function (cell, value) { if (value < 0 || value > 100000000000 ) { return { result: false, message: "Volume moet 0-~ zijn" }; } return true; } }, { text: 'Tijd', datafield: 'm_time', width: 70, align: 'right', cellsalign: 'right', cellsformat: 'f0', columntype: 'numberinput', validation: function (cell, value) { if (value < 0 || value > 100000000000 ) { return { result: false, message: "De tijd moet 0-~ zijn" }; } return true; } } ] }) }; // Inline yeasts editor // Inline waters editor var editWater = function (data) { var waterSource = { localdata: data.waters, datatype: "local", datafields: [ { name: 'w_name', type: 'string' }, { name: 'w_amount', type: 'float' }, { name: 'w_calcium', type: 'float' }, { name: 'w_sulfate', type: 'float' }, { name: 'w_chloride', type: 'float' }, { name: 'w_sodium', type: 'float' }, { name: 'w_magnesium', type: 'float' }, { name: 'w_ph', type: 'float' }, { name: 'w_total_alkalinity', type: 'float' }, { name: 'w_cost', type: 'float' }, { name: 'w_default_water', type: 'bool' } ], addrow: function (rowid, rowdata, position, commit) { commit(true); }, deleterow: function (rowid, commit) { commit(true); } }; var waterAdapter = new $.jqx.dataAdapter(waterSource); // dropdownlist datasource from inventory_waters var waterUrl = "getwatersources.php"; var waterInvSource = { datatype: "json", datafields: [ { name: 'record', type: 'number' }, { name: 'name', type: 'string' }, { name: 'unlimited_stock', type: 'bool' }, { name: 'calcium', type: 'float' }, { name: 'sulfate', type: 'float' }, { name: 'chloride', type: 'float' }, { name: 'sodium', type: 'float' }, { name: 'magnesium', type: 'float' }, { name: 'ph', type: 'float' }, { name: 'total_alkalinity', type: 'float' }, { name: 'cost', type: 'float' }, { name: 'default_water', type: 'bool' } ], url: waterUrl, async: true }; var waterlist = new $.jqx.dataAdapter(waterInvSource); $("#waterGrid").jqxGrid({ width: 960, height: 200, source: waterAdapter, theme: theme, selectionmode: 'singlerow', editmode: 'selectedrow', editable: true, localization: getLocalization(), showtoolbar: true, rendertoolbar: function (toolbar) { 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="waddrowbutton"></div>'); container.append('<input style="float: left; margin-left: 230px;" id="wdeleterowbutton" type="button" value="Verwijder water" />'); // add water from dropdownlist. $("#waddrowbutton").jqxDropDownList({ placeHolder: "Kies water:", theme: theme, source: waterlist, displayMember: "name", width: 150, height: 27, dropDownWidth: 300 }); $("#waddrowbutton").on('select', function (event) { if (event.args) { var index = event.args.index; var datarecord = waterlist.records[index]; var row = {}; row["w_name"] = datarecord.name; row["w_amount"] = 0; row["w_calcium"] = datarecord.calcium; row["w_sulfate"] = datarecord.sulfate; row["w_chloride"] = datarecord.chloride; row["w_sodium"] = datarecord.sodium; row["w_magnesium"] = datarecord.magnesium; row["w_ph"] = datarecord.ph; row["w_total_alkalinity"] = datarecord.total_alkalinity; row["w_default_water"] = datarecord.default_water; row["w_cost"] = datarecord.cost; var commit = $("#waterGrid").jqxGrid('addrow', null, row); } }); // delete selected water. // Overgebleven waters in volume verhogen met het verwijderde water. $("#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) { var id = $("#waterGrid").jqxGrid('getrowid', selectedrowindex); var commit = $("#waterGrid").jqxGrid('deleterow', id); } }); }, columns: [ { text: 'Water bron', editable: false, datafield: 'w_name' }, { text: 'Volume', datafield: 'w_amount', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'f1', columntype: 'numberinput', validation: function (cell, value) { if (value < 0 || value > 100000000000 ) { return { result: false, message: "Volume moet 0-~ zijn" }; } return true; } }, // TODO: validator test max is hoeveelheid maischwater. Dan water verdelen voor totaal. { text: 'Ca', editable: false, datafield: 'w_calcium', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, { text: 'Mg', editable: false, datafield: 'w_magnesium', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, { text: 'Na', editable: false, datafield: 'w_sodium', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, { text: 'Tot Alk', editable: false, datafield: 'w_total_alkalinity', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, { text: 'CaSO4', editable: false, datafield: 'w_sulfate', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, { text: 'Cl', editable: false, datafield: 'w_chloride', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, { text: 'pH', editable: false, datafield: 'w_ph', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'f1' } ] }); }; // editWater = function (data) { // inline mash editor // 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 }); $("#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 }); $("#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 }); $("#st_og_min").jqxNumberInput({ disabled: true, inputMode: 'simple', 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 }); $("#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 }); $("#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({ 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(''); $("#st_name").val(''); $("#st_letter").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.052); $("#est_fg").val(1.000); $("#est_color").val(20); $("#color_method").val('Morey'); $("#est_ibu").val(40); $("#ibu_method").val('Tinseth'); $("#mash_sparge_temp").val(78); $("#mash_ph").val(5.4); $("#mash_name").val(''); editFermentable(''); editHop(''); editMisc(''); editWater(''); $("#popupWindow").jqxWindow('open'); }); }, filterable: true, filtermode: 'excel', columns: [ { text: 'Stijlgids', datafield: 'st_guide', width: 120 }, { text: 'Letter', datafield: 'st_letter', width: 60 }, { text: 'Stijl', datafield: 'st_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); $("#st_name").val(dataRecord.st_name); $("#st_letter").val(dataRecord.st_letter); $("#st_guide").val(dataRecord.st_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); $("#st_og_min").val(dataRecord.st_og_min); $("#st_og_max").val(dataRecord.st_og_max); $("#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); $("#mash_name").val(dataRecord.mash_name); $("#mash_ph").val(dataRecord.mash_ph); $("#mash_sparge_temp").val(dataRecord.mash_sparge_temp); editFermentable(dataRecord); editHop(dataRecord); editMisc(dataRecord); editWater(dataRecord); // show the popup window. $("#popupWindow").jqxWindow('open'); } } ], groups: ['st_guide','st_letter' ] }); // initialize the popup window and buttons. $("#popupWindow").jqxWindow({ width: 1202, height: 622, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.40 }); $("#popupWindow").on('open', function () { $("#name").jqxInput('selectAll'); }); // Tabs inside the popup window. $('#jqxTabs').jqxTabs({ theme: theme, autoHeight: false, height: 580, position: 'top' }); $("#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 fermentablerow = $('#fermentableGrid').jqxGrid('getrows'); var hoprow = $('#hopGrid').jqxGrid('getrows'); var miscrow = $('#miscGrid').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, name: $("#name").val(), notes: $("#notes").val(), 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')), 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(), mash_name: $("#mash_name").val(), mash_ph: parseFloat($("#mash_ph").jqxNumberInput('decimal')), mash_sparge_temp: parseFloat($("#mash_sparge_temp").jqxNumberInput('decimal')), fermentables: fermentablerow, hops: hoprow, miscs: miscrow, waters: waterrow }; $('#jqxgrid').jqxGrid('updaterow', rowID, row); } else { // Insert a record var newrow = { record: -1, name: $("#name").val(), notes: $("#notes").val(), 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')), 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(), mash_name: $("#mash_name").val(), mash_ph: parseFloat($("#mash_ph").jqxNumberInput('decimal')), mash_sparge_temp: parseFloat($("#mash_sparge_temp").jqxNumberInput('decimal')), fermentables: fermentablerow, hops: hoprow, miscs: miscrow, waters: waterrow }; $('#jqxgrid').jqxGrid('addrow', null, newrow); } $("#popupWindow").jqxWindow('hide'); }); createDelElements(); });