changeset
Inventory waters: use POST instead of GET. Redesigned web editor page. Total Alkalinity and Bicarbonate update eachother with calculated values.
Fri, 25 Jan 2019 21:58:13 +0100
- author
- Michiel Broek <mbroek@mbse.eu>
- date
- Fri, 25 Jan 2019 21:58:13 +0100
- changeset 205
- 08488ac3bbb1
- parent 204
- 5df88c6dc903
- child 206
- b78e1111fc58
Inventory waters: use POST instead of GET. Redesigned web editor page. Total Alkalinity and Bicarbonate update eachother with calculated values.
--- a/www/includes/db_inventory_water.php Fri Jan 25 20:38:31 2019 +0100 +++ b/www/includes/db_inventory_water.php Fri Jan 25 21:58:13 2019 +0100 @@ -11,69 +11,62 @@ mysqli_set_charset($connect, "utf8" ); -// get data and store in a json array -$query = "SELECT * FROM inventory_waters ORDER BY name"; -if (isset($_GET['insert'])) { - // INSERT COMMAND - $sql = "INSERT INTO `inventory_waters` SET name='" . mysqli_real_escape_string($connect, $_GET['name']); - ($_GET['unlimited_stock'] == 'true') ? $sql .= "', unlimited_stock='1" : $sql .= "', unlimited_stock='0"; - $sql .= "', calcium='" . $_GET['calcium']; - $sql .= "', bicarbonate='" . $_GET['bicarbonate']; - $sql .= "', sulfate='" . $_GET['sulfate']; - $sql .= "', chloride='" . $_GET['chloride']; - $sql .= "', sodium='" . $_GET['sodium']; - $sql .= "', magnesium='" . $_GET['magnesium']; - $sql .= "', ph='" . $_GET['ph']; - $sql .= "', notes='" . mysqli_real_escape_string($connect, $_GET['notes']); - $sql .= "', total_alkalinity='" . $_GET['total_alkalinity']; - $sql .= "', inventory='" . $_GET['inventory']; - $sql .= "', cost='" . $_GET['cost']; - $sql .= "';"; +if (isset($_POST['insert']) || isset($_POST['update'])) { + if (isset($_POST['insert'])) { + $sql = "INSERT INTO `inventory_waters` SET "; + } + if (isset($_POST['update'])) { + $sql = "UPDATE `inventory_waters` SET "; + } + + $sql .= "name='" . mysqli_real_escape_string($connect, $_POST['name']); + ($_POST['unlimited_stock'] == 'true') ? $sql .= "', unlimited_stock='1" : $sql .= "', unlimited_stock='0"; + $sql .= "', calcium='" . $_POST['calcium']; + $sql .= "', bicarbonate='" . $_POST['bicarbonate']; + $sql .= "', sulfate='" . $_POST['sulfate']; + $sql .= "', chloride='" . $_POST['chloride']; + $sql .= "', sodium='" . $_POST['sodium']; + $sql .= "', magnesium='" . $_POST['magnesium']; + $sql .= "', ph='" . $_POST['ph']; + $sql .= "', notes='" . mysqli_real_escape_string($connect, $_POST['notes']); + $sql .= "', total_alkalinity='" . $_POST['total_alkalinity']; + $sql .= "', inventory='" . $_POST['inventory']; + $sql .= "', cost='" . $_POST['cost']; + if (isset($_POST['insert'])) { + $sql .= "';"; + } + if (isset($_POST['update'])) { + $sql .= "' WHERE record='" . $_POST['record'] . "';"; + } + syslog(LOG_NOTICE, $sql); + $result = mysqli_query($connect, $sql); if (! $result) { syslog(LOG_NOTICE, "db_inventory_waters: ".$sql." result: ".mysqli_error($connect)); } else { - syslog(LOG_NOTICE, "db_inventory_waters: inserted ".$_GET['name']); + if (isset($_POST['update'])) { + syslog(LOG_NOTICE, "db_inventory_waters: updated record ".$_POST['record']); + } else { + $lastid = mysqli_insert_id($connect); + syslog(LOG_NOTICE, "db_inventory_waters: inserted record ".$lastid); + } } echo $result; -} else if (isset($_GET['update'])) { - // UPDATE COMMAND - $sql = "UPDATE `inventory_waters` SET name='" . mysqli_real_escape_string($connect, $_GET['name']); - ($_GET['unlimited_stock'] == 'true') ? $sql .= "', unlimited_stock='1" : $sql .= "', unlimited_stock='0"; - $sql .= "', calcium='" . $_GET['calcium']; - $sql .= "', bicarbonate='" . $_GET['bicarbonate']; - $sql .= "', sulfate='" . $_GET['sulfate']; - $sql .= "', chloride='" . $_GET['chloride']; - $sql .= "', sodium='" . $_GET['sodium']; - $sql .= "', magnesium='" . $_GET['magnesium']; - $sql .= "', ph='" . $_GET['ph']; - $sql .= "', notes='" . mysqli_real_escape_string($connect, $_GET['notes']); - $sql .= "', total_alkalinity='" . $_GET['total_alkalinity']; - $sql .= "', inventory='" . $_GET['inventory']; - $sql .= "', cost='" . $_GET['cost']; - $sql .= "' WHERE record='" . $_GET['record'] . "';"; +} else if (isset($_POST['delete'])) { + // DELETE COMMAND + $sql = "DELETE FROM `inventory_waters` WHERE record='".$_POST['record']."';"; $result = mysqli_query($connect, $sql); if (! $result) { syslog(LOG_NOTICE, "db_inventory_waters: ".$sql." result: ".mysqli_error($connect)); } else { - syslog(LOG_NOTICE, "db_inventory_waters: updated record ".$_GET['record']); - } - echo $result; - -} else if (isset($_GET['delete'])) { - // DELETE COMMAND - $sql = "DELETE FROM `inventory_waters` WHERE record='".$_GET['record']."';"; - $result = mysqli_query($connect, $sql); - if (! $result) { - syslog(LOG_NOTICE, "db_inventory_waters: ".$sql." result: ".mysqli_error($connect)); - } else { - syslog(LOG_NOTICE, "db_inventory_waters: deleted record ".$_GET['record']); + syslog(LOG_NOTICE, "db_inventory_waters: deleted record ".$_POST['record']); } echo $result; } else { // SELECT COMMAND + $query = "SELECT * FROM inventory_waters ORDER BY name"; $result = mysqli_query($connect, $query) or die("SQL Error 1: " . mysqli_error($connect)); while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) { $waters[] = array(
--- a/www/inv_waters.php Fri Jan 25 20:38:31 2019 +0100 +++ b/www/inv_waters.php Fri Jan 25 21:58:13 2019 +0100 @@ -13,38 +13,44 @@ <div id="popupWindow"> <div>Wijzig brouwwater.</div> <div style="overflow: hidden;"> - <table> + <table style="width: 100%;"> <tr> <td style="vertical-align: top; float: right;">Water naam:</td> <td align="left" colspan="3" style="vertical-align: top;"><input id="name" /></td> </tr> <tr> + <td style="vertical-align: top; float: right;">Opmerkingen:</td> + <td colspan="3"><textarea id="notes"></textarea></td> + </tr> + <tr> + <td colspan="4"> </td> + </tr> + <tr> <td style="vertical-align: top; float: right;">Calcium (Ca) mg/l:</td> <td><div id="calcium"></div></td> - <td style="vertical-align: top; float: right;">Magnesium (Mg) mg/l:</td> - <td><div id="magnesium"></div></td> - </tr> - <tr> - <td style="vertical-align: top; float: right;">Natrium (Na) mg/l:</td> - <td><div id="sodium"></div></td> <td style="vertical-align: top; float: right;">Chloride (Cl) mg/l:</td> <td><div id="chloride"></div></td> </tr> <tr> + <td style="vertical-align: top; float: right;">Magnesium (Mg) mg/l:</td> + <td><div id="magnesium"></div></td> <td style="vertical-align: top; float: right;">Sulfaat (CaSO4) mg/l:</td> <td><div id="sulfate"></div></td> + </tr> + <tr> + <td style="vertical-align: top; float: right;">Natrium (Na) mg/l:</td> + <td><div id="sodium"></div></td> + <td style="vertical-align: top; float: right;">Bicarbonaat (HCO3) mg/l:</td> <!-- Input for total_alkalinity --> + <td><div id="bicarbonate"></div></td> + </tr> + <tr> <td style="vertical-align: top; float: right;">Zuurgraad (pH):</td> <td><div id="ph"></div></td> - </tr> - <tr> - <td style="vertical-align: top; float: right;">Bicarbonaat (HCO3) mg/l:</td> <!-- Input for total_alkalinity --> - <td><div id="bicarbonate"></div></td> <td style="vertical-align: top; float: right;">Totale alkaliteit (CaCO3) mg/l:</td> <td><div id="total_alkalinity"></div></td> </tr> <tr> - <td style="vertical-align: top; float: right;">Opmerkingen:</td> - <td colspan="3"><textarea id="notes"></textarea></td> + <td colspan="4"> </td> </tr> <tr> <td style="vertical-align: top; float: right;">Onbeperkt op voorraad:</td> @@ -57,10 +63,10 @@ <td><div id="cost"></div></td> </tr> <tr> - <td style="padding-top: 10px; float: right;"><input type="button" id="Delete" value="Delete" /></td> + <td style="padding-top: 110px; float: right;"><input type="button" id="Delete" value="Verwijder" /></td> <td></td> <td></td> - <td style="padding-top: 10px;"><input style="margin-right: 5px;" type="button" id="Save" value="Save" /><input id="Cancel" type="button" value="Cancel" /></td> + <td style="padding-top: 110px;"><input style="margin-right: 5px;" type="button" id="Save" value="Sla op" /><input id="Cancel" type="button" value="Annuleer" /></td> </tr> </table> </div>
--- a/www/js/inv_waters.js Fri Jan 25 20:38:31 2019 +0100 +++ b/www/js/inv_waters.js Fri Jan 25 21:58:13 2019 +0100 @@ -1,5 +1,5 @@ /***************************************************************************** - * Copyright (C) 2014-2018 + * Copyright (C) 2014-2019 * * Michiel Broek <mbroek at mbse dot eu> * @@ -33,8 +33,8 @@ okButton: $('#delOk'), cancelButton: $('#delCancel'), initContent: function () { - $('#delOk').jqxButton({ width: '65px', theme: theme }); - $('#delCancel').jqxButton({ width: '65px', theme: theme }); + $('#delOk').jqxButton({ template: "danger", width: '65px', theme: theme }); + $('#delCancel').jqxButton({ template: "success", width: '65px', theme: theme }); $('#delCancel').focus(); } }); @@ -43,19 +43,22 @@ $(document).ready(function () { + + var dataRecord = {}; + var url = "includes/db_inventory_water.php"; // tooltips $("#name").jqxTooltip({ content: 'De unieke naam van dit brouwwater.' }); $("#notes").jqxTooltip({ content: 'Extra opmerkingen over dit water.' }); $("#unlimited_stock").jqxTooltip({ content: 'Onbeperkte voorraad zoals kraanwater en bronnen.' }); $("#calcium").jqxTooltip({ content: 'Calcium (Ca).' }); - $("#bicarbonate").jqxTooltip({ content: 'Bicarbonaat (HCO3) kan worden gebruikt als invoer voor de Totale alkaliteit.' }); + $("#bicarbonate").jqxTooltip({ content: 'Bicarbonaat (HCO3). Berekend meteen de Totale alkaliteit.' }); $("#sulfate").jqxTooltip({ content: 'Calcium Sulfaat (CaSO4).' }); $("#chloride").jqxTooltip({ content: 'Chloride (Cl).' }); $("#sodium").jqxTooltip({ content: 'Natrium, oftewel keukenzout (Na). In berekeningen ook vaak als Sodium.' }); $("#magnesium").jqxTooltip({ content: 'Magnesium (Mg).' }); $("#ph").jqxTooltip({ content: 'De zuurgraad (pH).' }); - $("#total_alkalinity").jqxTooltip({ content: 'Totale alkaliniteit.' }); + $("#total_alkalinity").jqxTooltip({ content: 'Totale alkaliniteit. Berekend meteen de Bicarbonaat.' }); $("#inventory").jqxTooltip({ content: 'Voorraad in liters.' }); $("#cost").jqxTooltip({ content: 'Kostprijs per liter. 5 cijfers achter de comma zodat het kraanwater er ook in kan.' }); // prepare the data @@ -65,7 +68,7 @@ datafields: [ { name: 'record', type: 'number' }, { name: 'name', type: 'string' }, - { name: 'unlimited_stock', type: 'bool' }, + { name: 'unlimited_stock', type: 'int' }, { name: 'calcium', type: 'float' }, { name: 'bicarbonate', type: 'float' }, { name: 'sulfate', type: 'float' }, @@ -88,6 +91,7 @@ url: url, cache: false, data: data, + type: "POST", success: function (data, status, xhr) { // delete command is executed. commit(true); @@ -104,6 +108,7 @@ url: url, cache: false, data: data, + type: "POST", success: function (data, status, xhr) { commit(true); }, @@ -119,6 +124,7 @@ url: url, cache: false, data: data, + type: "POST", success: function (data, status, xhr) { // update command is executed. commit(true); @@ -130,19 +136,18 @@ } }; // initialize the input fields. - $("#name").jqxInput({ theme: theme, width: 250, height: 23 }); + $("#name").jqxInput({ theme: theme, width: 640, height: 23 }); + $("#notes").jqxInput({ theme: theme, width: 640, height: 100 }); $("#unlimited_stock").jqxCheckBox({ theme: theme, width: 120, height: 23 }); - $("#calcium").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); - $("#bicarbonate").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); - $("#sulfate").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); - $("#chloride").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); - $("#sodium").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); - $("#magnesium").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); - $("#ph").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); - - $("#notes").jqxInput({ theme: theme, width: 640, height: 100 }); - $("#total_alkalinity").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); - $("#inventory").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 70, height: 23, min: 0, decimalDigits: 1, spinButtons: true }); + $("#calcium").jqxNumberInput( Spin1dec1 ); + $("#bicarbonate").jqxNumberInput( Spin1dec1 ); + $("#sulfate").jqxNumberInput( Spin1dec1 ); + $("#chloride").jqxNumberInput( Spin1dec1 ); + $("#sodium").jqxNumberInput( Spin1dec1 ); + $("#magnesium").jqxNumberInput( Spin1dec1 ); + $("#ph").jqxNumberInput( Spin2pH ); + $("#total_alkalinity").jqxNumberInput( Spin1dec1 ); + $("#inventory").jqxNumberInput( Spin1dec1 ); $("#cost").jqxNumberInput({inputMode: 'simple', spinMode: 'simple', theme: theme, width: 110, height: 23, min: 0, decimalDigits: 5, spinButtons: true }); var dataAdapter = new $.jqx.dataAdapter(source); var editrow = -1; @@ -159,40 +164,43 @@ 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;'>Nieuw</span></div>"); container.append(addButton); statusbar.append(container); - addButton.jqxButton({ theme: theme, width: 120, height: 20 }); + addButton.jqxButton({ theme: theme, width: 90, height: 20 }); // add new row. addButton.click(function (event) { editrow = -1; - $("#popupWindow").jqxWindow({ position: { x: 230, y: 30 } }); - $("#name").val(''); - $("#unlimited_stock").val(''); - $("#calcium").val(''); - $("#bicarbonate").val(''); - $("#sulfate").val(''); - $("#chloride").val(''); - $("#sodium").val(''); - $("#magnesium").val(''); - $("#ph").val(''); + $("#popupWindow").jqxWindow({ position: { x: 110, y: 30 } }); + $("#name").val('Nieuw brouwwater'); + $("#unlimited_stock").val(0); + $("#calcium").val(0); + $("#bicarbonate").val(0); + $("#sulfate").val(0); + $("#chloride").val(0); + $("#sodium").val(0); + $("#magnesium").val(0); + $("#ph").val(7); $("#notes").val(''); - $("#total_alkalinity").val(''); - $("#inventory").val(''); - $("#cost").val(''); + $("#total_alkalinity").val(0); + $("#inventory").val(0); + $("#cost").val(0); $("#popupWindow").jqxWindow('open'); }); }, - filterable: true, - filtermode: 'excel', + filterable: false, columns: [ { text: 'Water leverancier', datafield: 'name', width: 225 }, { text: 'Opmerkingen', datafield: 'notes' }, { text: 'Onbeperkt', datafield: 'unlimited_stock', columntype: 'checkbox', width: 80 }, - { text: 'Liters', datafield: 'inventory', width: 70, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, - { text: 'Wijzig', datafield: 'Edit', width: 120, align: 'center', columntype: 'button', cellsrenderer: function () { + { text: 'Voorraad', datafield: 'inventory', width: 100, align: 'right', cellsalign: 'right', cellsformat: 'f1', + cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) { + + } + }, + { 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: 230, y: 30 } }); + $("#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); @@ -214,14 +222,31 @@ } ] }); + + $("#total_alkalinity").on('change', function (event) { + dataRecord.bicarbonate = parseFloat(event.args.value) * 1.22; + $("#bicarbonate").val(dataRecord.bicarbonate); + }); + $("#bicarbonate").on('change', function (event) { + dataRecord.total_alkalinity = parseFloat(event.args.value) * 50 / 61; + $("#total_alkalinity").val(dataRecord.total_alkalinity); + }); + // initialize the popup window and buttons. $("#popupWindow").jqxWindow({ - width: 860, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.40 + width: 1050, + height: 550, + resizable: false, + theme: theme, + isModal: true, + autoOpen: false, + cancelButton: $("#Cancel"), + modalOpacity: 0.40 }); $("#popupWindow").on('open', function () { $("#name").jqxInput('selectAll'); }); - $("#Delete").jqxButton({ theme: theme }); + $("#Delete").jqxButton({ template: "danger", width: '90px', theme: theme }); $("#Delete").click(function () { if (editrow >= 0) { // Open a popup to confirm this action. @@ -233,51 +258,37 @@ } $("#popupWindow").jqxWindow('hide'); }); - $("#Cancel").jqxButton({ theme: theme }); - $("#Save").jqxButton({ theme: theme }); + $("#Cancel").jqxButton({ template: "primary", width: '90px', theme: theme }); + $("#Save").jqxButton({ template: "success", width: '90px', theme: theme }); // update the edited row when the user clicks the 'Save' button. $("#Save").click(function () { + var rowID = -1; if (editrow >= 0) { var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); - var row = { - record: rowID, - name: $("#name").val(), - unlimited_stock: $("#unlimited_stock").val(), - calcium: parseFloat($("#calcium").jqxNumberInput('decimal')), - bicarbonate: parseFloat($("#bicarbonate").jqxNumberInput('decimal')), - sulfate: parseFloat($("#sulfate").jqxNumberInput('decimal')), - chloride: parseFloat($("#chloride").jqxNumberInput('decimal')), - sodium: parseFloat($("#sodium").jqxNumberInput('decimal')), - magnesium: parseFloat($("#magnesium").jqxNumberInput('decimal')), - ph: parseFloat($("#ph").jqxNumberInput('decimal')), - notes: $("#notes").val(), - total_alkalinity: parseFloat($("#total_alkalinity").jqxNumberInput('decimal')), - inventory: parseFloat($("#inventory").jqxNumberInput('decimal')), - cost: parseFloat($("#cost").jqxNumberInput('decimal')) - }; + } + var row = { + record: rowID, + name: $("#name").val(), + unlimited_stock: $("#unlimited_stock").val(), + calcium: parseFloat($("#calcium").jqxNumberInput('decimal')), + bicarbonate: parseFloat($("#bicarbonate").jqxNumberInput('decimal')), + sulfate: parseFloat($("#sulfate").jqxNumberInput('decimal')), + chloride: parseFloat($("#chloride").jqxNumberInput('decimal')), + sodium: parseFloat($("#sodium").jqxNumberInput('decimal')), + magnesium: parseFloat($("#magnesium").jqxNumberInput('decimal')), + ph: parseFloat($("#ph").jqxNumberInput('decimal')), + notes: $("#notes").val(), + total_alkalinity: parseFloat($("#total_alkalinity").jqxNumberInput('decimal')), + inventory: parseFloat($("#inventory").jqxNumberInput('decimal')), + cost: parseFloat($("#cost").jqxNumberInput('decimal')) + }; + if (editrow >= 0) { $('#jqxgrid').jqxGrid('updaterow', rowID, row); - $("#popupWindow").jqxWindow('hide'); } else { - // Insert a record - var newrow = { - record: -1, - name: $("#name").val(), - unlimited_stock: $("#unlimited_stock").val(), - calcium: parseFloat($("#calcium").jqxNumberInput('decimal')), - bicarbonate: parseFloat($("#bicarbonate").jqxNumberInput('decimal')), - sulfate: parseFloat($("#sulfate").jqxNumberInput('decimal')), - chloride: parseFloat($("#chloride").jqxNumberInput('decimal')), - sodium: parseFloat($("#sodium").jqxNumberInput('decimal')), - magnesium: parseFloat($("#magnesium").jqxNumberInput('decimal')), - ph: parseFloat($("#ph").jqxNumberInput('decimal')), - notes: $("#notes").val(), - total_alkalinity: parseFloat($("#total_alkalinity").jqxNumberInput('decimal')), - inventory: parseFloat($("#inventory").jqxNumberInput('decimal')), - cost: parseFloat($("#cost").jqxNumberInput('decimal')) - }; - $('#jqxgrid').jqxGrid('addrow', null, newrow); - $("#popupWindow").jqxWindow('hide'); + $('#jqxgrid').jqxGrid('addrow', null, row); } + $("#popupWindow").jqxWindow('hide'); + location.reload( true ); // reload ourself. }); createDelElements(); });
