changeset
Fixed the utf-8 problems when storing json arrays on the server by using manual encoding. The json-encode function sucks for this project. Added step detail edit screen instead of on grid cell editing. This must go into the product and recipe editors too.
Sun, 27 Jan 2019 17:39:26 +0100
- author
- Michiel Broek <mbroek@mbse.eu>
- date
- Sun, 27 Jan 2019 17:39:26 +0100
- changeset 215
- 83cee005d2d9
- parent 214
- 3e240fd7ef13
- child 216
- fda7286871f2
Fixed the utf-8 problems when storing json arrays on the server by using manual encoding. The json-encode function sucks for this project. Added step detail edit screen instead of on grid cell editing. This must go into the product and recipe editors too.
--- a/www/includes/db_profile_mash.php Sat Jan 26 22:27:28 2019 +0100 +++ b/www/includes/db_profile_mash.php Sun Jan 27 17:39:26 2019 +0100 @@ -26,12 +26,25 @@ $sql .= " `profile_mash` SET name='" . mysqli_real_escape_string($connect, $_POST['name']); $sql .= "', notes='" . mysqli_real_escape_string($connect, $_POST['notes']); $array = $_POST['steps']; - foreach($array as $key => $item){ - foreach ($disallowed as $disallowed_key) { - unset($array[$key]["$disallowed_key"]); - } + $comma = FALSE; + $steps = '['; + foreach($array as $key => $item) { + /* + * Manual encode to json. This eliminates the wrong UTF-8 encodings + * but also removes the unwanted fields. + */ + if ($comma) + $steps.= ','; + $steps .= '{"step_name":"' . str_replace($rescapers,$rreplacements,$item['step_name']); + $steps .= '","step_type":' . $item['step_type']; + $steps .= ',"step_temp":' . $item['step_temp']; + $steps .= ',"end_temp":' . $item['end_temp']; + $steps .= ',"step_time":' . $item['step_time']; + $steps .= ',"ramp_time":' . $item['ramp_time'] . '}'; + $comma = TRUE; } - $sql .= "', steps='" . str_replace($rescapers,$rreplacements,json_encode($array)); + $steps .= ']'; + $sql .= "', steps='" . $steps; if (isset($_POST['insert'])) { $sql .= "';"; }
--- a/www/js/profile_mash.js Sat Jan 26 22:27:28 2019 +0100 +++ b/www/js/profile_mash.js Sun Jan 27 17:39:26 2019 +0100 @@ -43,7 +43,12 @@ $(document).ready(function () { + + var steprow = 0; + var stepData = {}; + var dataRecord = {}; var url = "includes/db_profile_mash.php"; + // tooltips $("#name").jqxTooltip({ content: 'De naam voor dit maisch profiel.' }); $("#notes").jqxTooltip({ content: 'De uitgebreide opmerkingen over dit maisch profiel.' }); @@ -111,6 +116,26 @@ }); } }; + // Initialize the input fields. + $("#m_step_name").jqxInput({ theme: theme, width: 320, height: 23 }); + $("#m_step_type").jqxDropDownList({ + theme: theme, + source: MashStepTypeAdapter, + valueMember: 'id', + displayMember: 'nl', + width: 180, + height: 23, + autoDropDownHeight: true + }); + $("#m_step_temp").jqxNumberInput( Spin1dec5 ); + $("#m_step_temp").jqxNumberInput({ Min: 30, Max: 80 }); + $("#m_end_temp").jqxNumberInput( Spin1dec5 ); + $("#m_end_temp").jqxNumberInput({ Min: 30, Max: 80 }); + $("#m_step_time").jqxNumberInput( PosInt ); + $("#m_step_time").jqxNumberInput({ Min: 1, Max: 120 }); + $("#m_ramp_time").jqxNumberInput( PosInt ); + $("#m_ramp_time").jqxNumberInput({ Min: 1, Max: 30 }); + var dataAdapter = new $.jqx.dataAdapter(source); // Inline steps editor var editsteps = function (data) { @@ -144,13 +169,11 @@ }; var stepAdapter = new $.jqx.dataAdapter(stepSource); $("#grid").jqxGrid({ - width: 800, + width: 1020, height: 330, source: stepAdapter, theme: theme, selectionmode: 'singlerow', - editmode: 'selectedcell', - editable: true, localization: getLocalization(), showtoolbar: true, rendertoolbar: function (toolbar) { @@ -158,7 +181,7 @@ 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: 290px;" id="deleterowbutton" type="button" value="Verwijder stap" />'); + container.append('<input style="margin-left: 450px;" id="deleterowbutton" type="button" value="Verwijder stap" />'); $("#addrowbutton").jqxButton({ template: "primary", theme: theme, width: 150 }); $("#deleterowbutton").jqxButton({ template: "primary", theme: theme, width: 150 }); // create new row. @@ -178,53 +201,32 @@ }, columns: [ { text: 'Stap naam', datafield: 'step_name' }, - { text: 'Stap type', datafield: 'step_type', width: 150, columntype: 'dropdownlist', - createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) { - var dataSource = [ "0", "1", "2" ]; - editor.jqxDropDownList({ - source: dataSource, - dropDownHeight: 95, - dropDownWidth: 120 - }); + { text: 'Stap type', datafield: 'step_type', width: 150, + cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) { + return "<div style='margin: 4px;'>" + MashStepTypeData[value].nl + "</div>"; } }, - { text: 'Temperatuur', datafield: 'step_temp', width: 100, 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 temp', datafield: 'end_temp', width: 100, 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." }; + { text: 'Begin °C', datafield: 'step_temp', width: 100, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, + { text: 'Eind °C', datafield: 'end_temp', width: 100, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, + { text: 'Rusttijd', datafield: 'step_time', width: 80, align: 'right', cellsalign: 'right' }, + { text: 'Opwarmtijd', datafield: 'ramp_time', width: 80, align: 'right', cellsalign: 'right' }, + { text: 'Wijzig', datafield: 'Edit', columntype: 'button', width: 100, align: 'center', cellsrenderer: function () { + return "Wijzig"; + }, buttonclick: function (row) { + steprow = row; + stepData = $("#grid").jqxGrid('getrowdata', steprow); + $("#m_step_name").val(stepData.step_name); + $("#m_step_type").val(stepData.step_type); + $("#m_step_temp").val(stepData.step_temp); + $("#m_end_temp").val(stepData.end_temp); + $("#m_step_time").val(stepData.step_time); + $("#m_ramp_time").val(stepData.ramp_time); + // show the popup window. + $("#popupStep").jqxWindow('open'); } - return true; - } - }, - { text: 'Rusttijd', datafield: 'step_time', width: 80, 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: 'Staptijd', datafield: 'ramp_time', width: 80, 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. @@ -248,7 +250,6 @@ // add new row. addButton.click(function (event) { editrow = -1; - $("#popupWindow").jqxWindow({ position: { x: 110, y: 30 } }); $("#name").val('Nieuw maisch schema'); $("#notes").val(''); editsteps(''); @@ -263,9 +264,7 @@ { text: 'Wijzig', datafield: 'Edit', width: 100, 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: 110, y: 30 } }); // get the clicked row's data and initialize the input fields. var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow); $("#name").val(dataRecord.name); @@ -281,6 +280,7 @@ $("#popupWindow").jqxWindow({ width: 1050, height: 580, + position: { x: 110, y: 30 }, resizable: false, theme: theme, isModal: true, @@ -291,6 +291,31 @@ $("#popupWindow").on('open', function () { $("#name").jqxInput('selectAll'); }); + $("#popupStep").jqxWindow({ + width: 800, + height: 300, + position: { x: 230, y: 100 }, + resizable: false, + theme: theme, + isModal: true, + autoOpen: false, + cancelButton: $("#Ready"), + modalOpacity: 0.40 + }); + + // step detail popup update values. + $("#Ready").jqxButton({ template: "success", width: '90px', theme: theme }); + $("#Ready").click(function () { + $("#grid").jqxGrid('setcellvalue', steprow, 'step_name', $("#m_step_name").val()); + $("#grid").jqxGrid('setcellvalue', steprow, 'step_type', $("#m_step_type").val()); + $("#grid").jqxGrid('setcellvalue', steprow, 'step_temp', $("#m_step_temp").val()); + $("#grid").jqxGrid('setcellvalue', steprow, 'end_temp', $("#m_end_temp").val()); + $("#grid").jqxGrid('setcellvalue', steprow, 'step_time', $("#m_step_time").val()); + $("#grid").jqxGrid('setcellvalue', steprow, 'ramp_time', $("#m_ramp_time").val()); + $('#grid').jqxGrid('sortby', 'step_temp', 'asc'); + }); + + // mash profile popup. $("#Delete").jqxButton({ template: "danger", width: '90px', theme: theme }); $("#Delete").click(function () { if (editrow >= 0) {
--- a/www/profile_mash.php Sat Jan 26 22:27:28 2019 +0100 +++ b/www/profile_mash.php Sun Jan 27 17:39:26 2019 +0100 @@ -24,8 +24,10 @@ <td align="left" colspan="3"><textarea id="notes"></textarea></td> </tr> <tr> - <td align="right" style="vertical-align: top;">Stappen:</td> - <td align="left" colspan="3"><div id="grid">Graat</div></td> + <td colspan="4"> </td> + </tr> + <tr> + <td align="center" colspan="4"><div id="grid"></div></td> </tr> <tr> <td style="padding-top: 10px;" align="right"><input type="button" id="Delete" value="Verwijder" /></td> @@ -40,6 +42,43 @@ </div> </div> + <div id="popupStep"> + <div>Wijzig maisch stap details.</div> + <div style="overflow: hidden;"> + <table style="width: 100%;"> + <tr> + <td align="right" style="vertical-align: top;">Stap naam:</td> + <td align="left" colspan="2" style="vertical-align: top;"><input id="m_step_name" /></td> + </tr> + <tr> + <td align="right" style="vertical-align: top;">Stap type:</td> + <td align="left"><div id="m_step_type"></div></td> + </tr> + <tr> + <td align="right" style="vertical-align: top;">Begin temperatuur °C:</td> + <td align="left"><div id="m_step_temp"></div></td> + </tr> + <tr> + <td align="right" style="vertical-align: top;">Eind temperatuur °C:</td> + <td align="left"><div id="m_end_temp"></div></td> + </tr> + <tr> + <td align="right" style="vertical-align: top;">Rust tijd minuten:</td> + <td align="left"><div id="m_step_time"></div></td> + </tr> + <tr> + <td align="right" style="vertical-align: top;">Opwarm tijd minuten:</td> + <td align="left"><div id="m_ramp_time"></div></td> + </tr> + <tr> + <td style="padding-top: 50px;" colspan="2" align="center"> + <input id="Ready" type="button" value="Sla op" /> + </td> + </tr> + </table> + </div> + </div> + <?php confirm_delete(); page_footer();
