changeset
The mash grid now uses a popup editor. There is now a dropdown mash selector to replace the mash scheme.
Fri, 01 Feb 2019 15:30:33 +0100
- author
- Michiel Broek <mbroek@mbse.eu>
- date
- Fri, 01 Feb 2019 15:30:33 +0100
- changeset 228
- 98536f6539ee
- parent 227
- fd6d87d1c9ed
- child 229
- cfd87d51a33c
The mash grid now uses a popup editor. There is now a dropdown mash selector to replace the mash scheme.
--- a/www/import/from_brouwhulp.php Fri Feb 01 11:58:38 2019 +0100 +++ b/www/import/from_brouwhulp.php Fri Feb 01 15:30:33 2019 +0100 @@ -1095,15 +1095,17 @@ echo "Unknown step TYPE " . $step->TYPE . PHP_EOL; if ($step->INFUSE_AMOUNT) - $steps .= ',"step_infuse_amount":"' . floatval($step->INFUSE_AMOUNT) . '"'; + $steps .= ',"step_infuse_amount":' . floatval($step->INFUSE_AMOUNT); + else + $steps .= ',"step_infuse_amount":0'; if ($step->STEP_TEMP) - $steps .= ',"step_temp":"' . floatval($step->STEP_TEMP) . '"'; + $steps .= ',"step_temp":' . floatval($step->STEP_TEMP); if ($step->STEP_TIME) - $steps .= ',"step_time":"' . floatval($step->STEP_TIME) . '"'; + $steps .= ',"step_time":' . floatval($step->STEP_TIME); if ($step->RAMP_TIME) - $steps .= ',"ramp_time":"' . floatval($step->RAMP_TIME) . '"'; + $steps .= ',"ramp_time":' . floatval($step->RAMP_TIME); if ($step->END_TEMP) - $steps .= ',"end_temp":"' . floatval($step->END_TEMP) . '"'; + $steps .= ',"end_temp":' . floatval($step->END_TEMP); $steps .= "}"; } $steps .= ']';
--- a/www/includes/db_recipes.php Fri Feb 01 11:58:38 2019 +0100 +++ b/www/includes/db_recipes.php Fri Feb 01 15:30:33 2019 +0100 @@ -227,16 +227,30 @@ $yeasts .= ']'; $sql .= "', json_yeasts='" . $yeasts; + $mashs = '['; + $comma = FALSE; if (isset($_POST['mashs'])) { $array = $_POST['mashs']; - foreach($array as $key => $item){ - foreach ($disallowed as $disallowed_key) { - unset($array[$key]["$disallowed_key"]); - } + foreach($array as $key => $item) { + if ($comma) + $mashs .= ','; + $comma = TRUE; + $mash = '{"step_name":"' . str_replace($rescapers,$rreplacements,$item['step_name']); + $mash .= '","step_type":' . $item['step_type']; + if (isset($item['step_infuse_amount']) && $item['step_infuse_amount'] != "") + $mash .= ',"step_infuse_amount":' . $item['step_infuse_amount']; + else + $mash .= ',"step_infuse_amount":0'; + $mash .= ',"step_temp":' . $item['step_temp']; + $mash .= ',"step_time":' . $item['step_time']; + $mash .= ',"ramp_time":' . $item['ramp_time']; + $mash .= ',"end_temp":' . $item['end_temp'] . '}'; + syslog(LOG_NOTICE, $mash); + $mashs .= $mash; } - syslog(LOG_NOTICE, "json_mashs: ".str_replace($rescapers,$rreplacements,json_encode($array))); - $sql .= "', json_mashs='" . str_replace($rescapers,$rreplacements,json_encode($array)); } + $mashs .= ']'; + $sql .= "', json_mashs='" . $mashs; if (isset($_POST['insert'])) { $sql .= "';";
--- a/www/js/global.js Fri Feb 01 11:58:38 2019 +0100 +++ b/www/js/global.js Fri Feb 01 15:30:33 2019 +0100 @@ -695,16 +695,16 @@ var waterprofiles = new $.jqx.dataAdapter(waterProfileSource); // dropdownlist datasource from profile_mash -var mashInvSource = { +var mashProfileSource = { datatype: "json", datafields: [ { name: 'record', type: 'number' }, { name: 'name', type: 'string' }, { name: 'steps', type: 'array' } ], - url: "include/db_profile_mash.php" + url: "includes/db_profile_mash.php" }; -var mashlist = new $.jqx.dataAdapter(mashInvSource); +var mashlist = new $.jqx.dataAdapter(mashProfileSource);
--- a/www/js/rec_edit.js Fri Feb 01 11:58:38 2019 +0100 +++ b/www/js/rec_edit.js Fri Feb 01 15:30:33 2019 +0100 @@ -82,6 +82,8 @@ var miscData = {}; var yeastRow = 0; var yeastData = {}; + var mashRow = 0; + var mashData = {}; console.log("record:" + my_record + " return:" + my_return + " theme:" + theme); $("#jqxLoader").jqxLoader({ @@ -2253,13 +2255,11 @@ }, }); $("#mashGrid").jqxGrid({ - width: 960, + width: 1240, height: 400, source: mashAdapter, theme: theme, selectionmode: 'singlerow', - editmode: 'selectedcell', - editable: true, localization: getLocalization(), showtoolbar: true, rendertoolbar: function (toolbar) { @@ -2267,14 +2267,14 @@ var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>"); toolbar.append(container); container.append('<input style="float: left; margin-left: 165px;" id="saddrowbutton" type="button" value="Nieuwe stap" />'); - container.append('<input style="float: left; margin-left: 230px;" id="sdeleterowbutton" type="button" value="Verwijder stap" />'); - $("#saddrowbutton").jqxButton({ theme: theme, height: 27, width: 150 }); + container.append('<input style="float: left; margin-left: 440px;" id="sdeleterowbutton" type="button" value="Verwijder stap" />'); + $("#saddrowbutton").jqxButton({ template: "primary", theme: theme, height: 27, width: 150 }); $("#saddrowbutton").on('click', function () { var datarow = generaterow(); var commit = $("#mashGrid").jqxGrid('addrow', null, datarow); }); // delete selected yeast. - $("#sdeleterowbutton").jqxButton({ theme: theme, height: 27, width: 150 }); + $("#sdeleterowbutton").jqxButton({ template: "danger", theme: theme, height: 27, width: 150 }); $("#sdeleterowbutton").on('click', function () { var selectedrowindex = $("#mashGrid").jqxGrid('getselectedrowindex'); var rowscount = $("#mashGrid").jqxGrid('getdatainformation').rowscount; @@ -2293,51 +2293,38 @@ }, columns: [ { text: 'Stap naam', datafield: 'step_name' }, - { text: 'Stap type', datafield: 'step_type', width: 110, columntype: 'dropdownlist', - createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) { - var dataSource = [ "Infusion", "Temperature", "Decoction" ]; - editor.jqxDropDownList({ source: dataSource, dropDownHeight: 105 }); - } - }, - { 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: 'Stap type', datafield: 'step_type', width: 175, + cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) { + return "<div style='margin: 4px;'>" + MashStepTypeData[value].nl + "</div>"; } }, - { 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." }; + { text: 'Start °C', datafield: 'step_temp', width: 90, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, + { text: 'Eind °C', datafield: 'end_temp', width: 90, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, + { text: 'Tijd', datafield: 'step_time', width: 90, align: 'right', cellsalign: 'right' }, + { text: 'Stap', datafield: 'ramp_time', width: 90, align: 'right', cellsalign: 'right' }, + { text: 'Infuse', datafield: 'step_infuse_amount', width: 90, align: 'right', cellsalign: 'right' }, + { text: 'Wijzig', datafield: 'Edit', columntype: 'button', width: 100, align: 'center', cellsrenderer: function () { + return "Wijzig"; + }, buttonclick: function (row) { + mashRow = row; + mashData = $("#mashGrid").jqxGrid('getrowdata', mashRow); + $("#wstep_name").val(mashData.step_name); + $("#wstep_type").val(mashData.step_type); + $("#wstep_infuse_amount").val(mashData.step_infuse_amount); + $("#wstep_temp").val(mashData.step_temp); + $("#wend_temp").val(mashData.end_temp); + $("#wstep_time").val(mashData.step_time); + $("#wramp_time").val(mashData.ramp_time); + if (mashData.step_type == 0) { + $("#wstep_infuse_amount").show(); + $("#wstep_pmpt").show(); + } else { + $("#wstep_infuse_amount").hide(); + $("#wstep_pmpt").hide(); + } + // show the popup window. + $("#popupMash").jqxWindow('open'); } - 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; - } - }, - { text: 'Infuse', datafield: 'step_infuse_amount', width: 70, align: 'right', cellsalign: 'right', - validation: function (cell, value) { - if (value < 0 || value > 60) { - return { result: false, message: "De waarde moet tussen 0 en 60 zijn." }; - } - return true; - } } ] }); @@ -2998,6 +2985,127 @@ // Tab 6, Maischen $("#mash_name").jqxInput({ theme: theme, width: 320, height: 23 }); + $("#mash_select").jqxDropDownList({ + placeHolder: "Kies schema:", + theme: theme, + source: mashlist, + displayMember: "name", + width: 250, + height: 23, + dropDownWidth: 500, + dropDownHeight: 500, + dropDownHorizontalAlignment: 'right' + }); + $("#mash_select").on('select', function (event) { + if (event.args) { + var index = event.args.index; + // First delete all current steps + var rowIDs = new Array(); + var rows = $("#mashGrid").jqxGrid('getdisplayrows'); + for (var i = 0; i < rows.length; i++) { + var row = rows[i]; + rowIDs.push(row.uid); + } + $("#mashGrid").jqxGrid('deleterow', rowIDs); + // Then add the new steps + var datarecord = mashlist.records[index]; + $("#mash_name").val(datarecord.name); + for (var i = 0; i < datarecord.steps.length; i++) { + var data = datarecord.steps[i]; + var row = {}; + row["step_name"] = data.step_name; + row["step_type"] = data.step_type; + // For now, but this must be smarter. + if (i == 0) + row["step_infuse_amount"] = mash_infuse; + else + row["step_infuse_amount"] = 0; + row["step_temp"] = data.step_temp; + row["end_temp"] = data.end_temp; + row["step_time"] = data.step_time; + row["ramp_time"] = data.ramp_time; + var commit = $("#mashGrid").jqxGrid('addrow', null, row); + } + } + }); + $("#popupMash").jqxWindow({ + width: 800, + height: 350, + position: { x: 230, y: 100 }, + resizable: false, + theme: theme, + isModal: true, + autoOpen: false, + cancelButton: $("#MashReady"), + modalOpacity: 0.40 + }); + $("#MashReady").jqxButton({ template: "success", width: '90px', theme: theme }); + $("#MashReady").click(function () { + $("#mashGrid").jqxGrid('sortby', 'step_temp', 'asc'); + }); + $("#wstep_name").jqxInput({ theme: theme, width: 320, height: 23 }); + $("#wstep_type").jqxDropDownList({ + theme: theme, + source: MashStepTypeAdapter, + valueMember: 'id', + displayMember: 'nl', + width: 180, + height: 23, + autoDropDownHeight: true + }); + $("#wstep_type").on('select', function (event) { + if (event.args) { + var index = event.args.index; + var rowdata = $("#mashGrid").jqxGrid('getrowdata', mashRow); + rowdata.step_type = index; + if (index == 0) { + $("#wstep_infuse_amount").show(); + $("#wstep_pmpt").show(); + } else { + $("#wstep_infuse_amount").hide(); + $("#wstep_pmpt").hide(); + } + mash_infuse = 0; + var rows = $('#mashGrid').jqxGrid('getrows'); + for (var i = 0; i < rows.length; i++) { + var row = rows[i]; + if (row.step_type == 0) // Infusion + mash_infuse += parseFloat(row.step_infuse_amount); + } + } + }); + $("#wstep_temp").jqxNumberInput( Spin1dec5 ); + $('#wstep_temp').on('change', function (event) { + var rowdata = $("#mashGrid").jqxGrid('getrowdata', mashRow); + rowdata.step_temp = parseFloat(event.args.value); + }); + $("#wend_temp").jqxNumberInput( Spin1dec5 ); + $('#wend_temp').on('change', function (event) { + var rowdata = $("#mashGrid").jqxGrid('getrowdata', mashRow); + rowdata.end_temp = parseFloat(event.args.value); + }); + $("#wstep_time").jqxNumberInput( PosInt ); + $('#wstep_time').on('change', function (event) { + var rowdata = $("#mashGrid").jqxGrid('getrowdata', mashRow); + rowdata.step_time = parseFloat(event.args.value); + }); + $("#wramp_time").jqxNumberInput( PosInt ); + $('#wramp_time').on('change', function (event) { + var rowdata = $("#mashGrid").jqxGrid('getrowdata', mashRow); + rowdata.ramp_time = parseFloat(event.args.value); + }); + $("#wstep_infuse_amount").jqxNumberInput( Spin1dec5 ); + $('#wstep_infuse_amount').on('change', function (event) { + var rowdata = $("#mashGrid").jqxGrid('getrowdata', mashRow); + rowdata.step_infuse_amount = parseFloat(event.args.value); + mash_infuse = 0; + var rows = $('#mashGrid').jqxGrid('getrows'); + for (var i = 0; i < rows.length; i++) { + var row = rows[i]; + if (row.step_type == 0) // Infusion + mash_infuse += parseFloat(row.step_infuse_amount); + } + }); // Tab 7, Water $("#tgt_bu").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 74, height: 23, decimalDigits: 2, readOnly: true });
--- a/www/rec_edit.php Fri Feb 01 11:58:38 2019 +0100 +++ b/www/rec_edit.php Fri Feb 01 15:30:33 2019 +0100 @@ -177,12 +177,12 @@ <table style="width: 100%;"> <tr> <td style="vertical-align: top; float: right; padding: 3px;">Maischchema:</td> - <td align="left" colspan="5" style="vertical-align: top; padding: 3px;"><input id="mash_name" /></td> - </tr> - <tr> - <td align="right" style="vertical-align: top; padding: 3px;">Stappen:</td> - <td align="left" colspan="5" style="padding: 3px;"><div id="mashGrid">Graat</div></td> - </tr> + <td align="left" style="vertical-align: top; padding: 3px;"><input id="mash_name" /></td> + <td style="vertical-align: top; float: right; padding: 3px;">Kies ander schema:</td> + <td style="padding: 3px;" colspan="2"><div id="mash_select"></div></td> + </tr> + <tr><td colspan="4"> </td></tr> + <tr><td align="center" colspan="4" style="padding: 3px;"><div id="mashGrid"></div></td></tr> </table> </div> </div> <!-- tab maischen --> @@ -496,6 +496,47 @@ </div> </div> + <div id="popupMash"> + <div>Wijzig maisch stap detail.</div> + <div style="overflow: hidden;"> + <table style="width: 100%;"> + <tr> + <td align="right" style="vertical-align: top;">Stap naam:</td> + <td style="padding: 3px;"><input readonly="1" id="wstep_name" /></div></td> + </tr> + <tr> + <td align="right" style="vertical-align: top;">Stap type:</td> + <td style="padding: 3px;"><div id="wstep_type" /></div></td> + </tr> + <tr> + <td align="right" style="vertical-align: top;">Start temperatuur °C:</td> + <td style="padding: 3px;"><div id="wstep_temp" /></div></td> + </tr> + <tr> + <td align="right" style="vertical-align: top;">Eind temperatuur °C:</td> + <td style="padding: 3px;"><div id="wend_temp"></div></td> + </tr> + <tr> + <td align="right" style="vertical-align: top;">Stap tijd minuten:</td> + <td style="padding: 3px;"><div id="wstep_time"></div></td> + </tr> + <tr> + <td align="right" style="vertical-align: top;">Opwarm tijd minuten:</td> + <td style="padding: 3px;"><div id="wramp_time"></div></td> + </tr> + <tr> + <td align="right" style="vertical-align: top;"><div id="wstep_pmpt">Infusie liters:</div></td> + <td style="padding: 3px;"><div id="wstep_infuse_amount"></div></td> + </tr> + <tr> + <td style="padding-top: 30px;" colspan="2" align="center"> + <input id="MashReady" type="button" value="Sla op" /> + </td> + </tr> + </table> + </div> + </div> + <?php confirm_delete(); page_footer();
