changeset
Water profile uses POST instead of GET. Added tooltips to the editor screen. Updated the editor screen. Total alkalinity and Bicarbonate update each other. More and smaller columns in the listing screen. Rearranged the editor screen.
Sat, 26 Jan 2019 19:24:36 +0100
- author
- Michiel Broek <mbroek@mbse.eu>
- date
- Sat, 26 Jan 2019 19:24:36 +0100
- changeset 211
- 63d0e40c58b9
- parent 210
- 3ced4934e230
- child 212
- adda48f710cd
Water profile uses POST instead of GET. Added tooltips to the editor screen. Updated the editor screen. Total alkalinity and Bicarbonate update each other. More and smaller columns in the listing screen. Rearranged the editor screen.
--- a/www/includes/db_profile_water.php Sat Jan 26 15:05:27 2019 +0100 +++ b/www/includes/db_profile_water.php Sat Jan 26 19:24:36 2019 +0100 @@ -10,63 +10,59 @@ } mysqli_set_charset($connect, "utf8" ); -// get data and store in a json array -$query = "SELECT * FROM profile_water ORDER BY name"; -if (isset($_GET['insert'])) { - // INSERT COMMAND - $sql = "INSERT INTO `profile_water` SET name='" . mysqli_real_escape_string($connect, $_GET['name']); - $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 .= "';"; +if (isset($_POST['insert']) || isset($_POST['update'])) { + if (isset($_POST['insert'])) { + $sql = "INSERT INTO `profile_water` SET "; + } + if (isset($_POST['update'])) { + $sql = "UPDATE `profile_water` SET "; + } + + $sql .= "name='" . mysqli_real_escape_string($connect, $_POST['name']); + $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']; + 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_profile_water: ".$sql." result: ".mysqli_error($connect)); } else { - syslog(LOG_NOTICE, "db_profile_water: inserted ".$_GET['name']); + if (isset($_POST['update'])) { + syslog(LOG_NOTICE, "db_profile_water: updated record ".$_POST['record']); + } else { + $lastid = mysqli_insert_id($connect); + syslog(LOG_NOTICE, "db_profile_water: inserted record ".$lastid); + } } echo $result; -} else if (isset($_GET['update'])) { - // UPDATE COMMAND - $sql = "UPDATE `profile_water` SET name='" . mysqli_real_escape_string($connect, $_GET['name']); - $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 .= "' WHERE record='" . $_GET['record'] . "';"; +} else if (isset($_POST['delete'])) { + // DELETE COMMAND + $sql = "DELETE FROM `profile_water` WHERE record='".$_POST['record']."';"; $result = mysqli_query($connect, $sql); if (! $result) { syslog(LOG_NOTICE, "db_profile_water: ".$sql." result: ".mysqli_error($connect)); } else { - syslog(LOG_NOTICE, "db_profile_water: updated record ".$_GET['record']); - } - echo $result; - -} else if (isset($_GET['delete'])) { - // DELETE COMMAND - $sql = "DELETE FROM `profile_water` WHERE record='".$_GET['record']."';"; - $result = mysqli_query($connect, $sql); - if (! $result) { - syslog(LOG_NOTICE, "db_profile_water: ".$sql." result: ".mysqli_error($connect)); - } else { - syslog(LOG_NOTICE, "db_profile_water: deleted record ".$_GET['record']); + syslog(LOG_NOTICE, "db_profile_water: deleted record ".$_POST['record']); } echo $result; } else { // SELECT COMMAND + $query = "SELECT * FROM profile_water 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/js/profile_water.js Sat Jan 26 15:05:27 2019 +0100 +++ b/www/js/profile_water.js Sat Jan 26 19:24:36 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,7 +43,22 @@ $(document).ready(function () { + + var dataRecord = {}; + var url = "includes/db_profile_water.php"; + // tooltips + $("#name").jqxTooltip({ content: 'De unieke naam van dit water profiel.' }); + $("#notes").jqxTooltip({ content: 'Extra opmerkingen over dit water.' }); + $("#calcium").jqxTooltip({ content: 'Calcium (Ca).' }); + $("#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. Berekend meteen de Bicarbonaat.' }); + // prepare the data var source = { datatype: "json", @@ -71,6 +86,7 @@ url: url, cache: false, data: data, + type: "POST", success: function (data, status, xhr) { // delete command is executed. commit(true); @@ -87,6 +103,7 @@ url: url, cache: false, data: data, + type: "POST", success: function (data, status, xhr) { commit(true); }, @@ -102,6 +119,7 @@ url: url, cache: false, data: data, + type: "POST", success: function (data, status, xhr) { // update command is executed. commit(true); @@ -113,17 +131,17 @@ } }; // initialize the input fields. - $("#name").jqxInput({ theme: theme, width: 250, 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 }); + $("#name").jqxInput({ theme: theme, width: 640, height: 23 }); + $("#notes").jqxInput({ theme: theme, width: 800, height: 100 }); + $("#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 ); - $("#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 }); var dataAdapter = new $.jqx.dataAdapter(source); var editrow = -1; // initialize jqxGrid @@ -139,40 +157,42 @@ 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 } }); + $("#popupWindow").jqxWindow({ position: { x: 110, y: 30 } }); $("#name").val(''); - $("#calcium").val(''); - $("#bicarbonate").val(''); - $("#sulfate").val(''); - $("#chloride").val(''); - $("#sodium").val(''); - $("#magnesium").val(''); - $("#ph").val(''); + $("#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(''); + $("#total_alkalinity").val(0); $("#popupWindow").jqxWindow('open'); }); }, - filterable: true, + filterable: false, filtermode: 'excel', columns: [ - { text: 'Water Profiel', datafield: 'name', width: 250 }, - { text: 'Opmerkingen', datafield: 'notes', width: 475 }, - { text: 'Natrium', datafield: 'sodium', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, - { text: 'Chloride', datafield: 'chloride', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, - { text: 'Sulfaat', datafield: 'sulfate', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, - { text: 'Zuurgraad', datafield: 'ph', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, - { text: 'Alkaliteit', datafield: 'total_alkalinity', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, - { text: 'Wijzig', datafield: 'Edit', columntype: 'button', cellsrenderer: function () { + { text: 'Water Profiel', datafield: 'name', width: 225 }, + { text: 'Opmerkingen', datafield: 'notes' }, + { text: 'Ca', datafield: 'calcium', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, + { text: 'Mg', datafield: 'magnesium', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, + { text: 'Na', datafield: 'sodium', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, + { text: 'CaCO3', datafield: 'total_alkalinity', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, + { text: 'Cl', datafield: 'chloride', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, + { text: 'SO4', datafield: 'sulfate', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, + { text: 'pH', datafield: 'ph', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, + { text: 'Wijzig', datafield: 'Edit', width: 100, 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); @@ -191,14 +211,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. @@ -210,45 +247,34 @@ } $("#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(), - 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')) - }; + rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); + } + var row = { + record: rowID, + name: $("#name").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')) + }; + if (editrow >= 0) { $('#jqxgrid').jqxGrid('updaterow', rowID, row); - $("#popupWindow").jqxWindow('hide'); } else { - // Insert a record - var newrow = { - record: -1, - name: $("#name").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')) - }; - $('#jqxgrid').jqxGrid('addrow', null, newrow); - $("#popupWindow").jqxWindow('hide'); + $('#jqxgrid').jqxGrid('addrow', null, row); } + $("#popupWindow").jqxWindow('hide'); + location.reload( true ); // reload ourself. }); createDelElements(); });
--- a/www/profile_water.php Sat Jan 26 15:05:27 2019 +0100 +++ b/www/profile_water.php Sat Jan 26 19:24:36 2019 +0100 @@ -13,46 +13,49 @@ <div id="popupWindow"> <div>Wijzig brouwwater profiel.</div> <div style="overflow: hidden;"> - <table> + <table style="width: 100%;"> <tr> <td align="right" style="vertical-align: top;">Water naam:</td> <td align="left" colspan="3" style="vertical-align: top;"><input id="name" /></td> </tr> <tr> - <td align="right" style="vertical-align: top;">Calcium (Ca) mg/l:</td> - <td align="left" style="vertical-align: top;"><input id="calcium" /></td> - <td align="right" style="vertical-align: top;">Magnesium (Mg) mg/l:</td> - <td align="left" style="vertical-align: top;"><input id="magnesium" /></td> - </tr> - <tr> - <td align="right" style="vertical-align: top;">Natrium (Na) mg/l:</td> - <td align="left" style="vertical-align: top;"><input id="sodium" /></td> - <td align="right" style="vertical-align: top;">Chloride (Cl) mg/l:</td> - <td align="left" style="vertical-align: top;"><input id="chloride" /></td> - </tr> - <tr> - <td align="right" style="vertical-align: top;">Sulfaat (CaSO4) mg/l:</td> - <td align="left" style="vertical-align: top;"><input id="sulfate" /></td> - <td align="right" style="vertical-align: top;">Zuurgraad (pH):</td> - <td align="left" style="vertical-align: top;"><input id="ph" /></td> - </tr> - <tr> - <td align="right" style="vertical-align: top;">Bicarbonaat (HCO3) mg/l:</td> <!-- Input for total_alkalinity --> - <td align="left" style="vertical-align: top;"><input id="bicarbonate" /></td> - <td align="right" style="vertical-align: top;">Totale alkaliteit (CaCO3) mg/l:</td> - <td align="left" style="vertical-align: top;"><input id="total_alkalinity" /></td> - </tr> - <tr> <td align="right" style="vertical-align: top;">Opmerkingen:</td> <td align="left" colspan="3"><textarea id="notes"></textarea></td> </tr> <tr> - <td style="padding-top: 10px;" align="right"><input type="button" id="Delete" value="Delete" /></td> + <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;">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> + <td style="vertical-align: top; float: right;">Totale alkaliteit (CaCO3) mg/l:</td> + <td><div id="total_alkalinity"></div></td> + </tr> + <tr> + <td style="padding-top: 110px;" align="right"><input type="button" id="Delete" value="Verwijder" /></td> <td align="right"></td> <td align="right"></td> - <td style="padding-top: 10px;" align="right"> - <input style="margin-right: 5px;" type="button" id="Save" value="Save" /> - <input id="Cancel" type="button" value="Cancel" /> + <td style="padding-top: 110px;" align="left"> + <input style="margin-right: 5px;" type="button" id="Save" value="Sla op" /> + <input id="Cancel" type="button" value="Annuleer" /> </td> </tr> </table>
