changeset
Finished mash steps editing. Style sheets cleanup.
Tue, 28 Aug 2018 20:54:53 +0200
- author
- Michiel Broek <mbroek@mbse.eu>
- date
- Tue, 28 Aug 2018 20:54:53 +0200
- changeset 40
- b825c675987d
- parent 39
- 400aae9fb0c8
- child 41
- a26a3d63e90f
Finished mash steps editing. Style sheets cleanup.
| README.design | file | annotate | diff | comparison | revisions | |
| www/css/style.css | file | annotate | diff | comparison | revisions | |
| www/js/inv_mash_profiles.js | file | annotate | diff | comparison | revisions | |
| www/mon_fermenter.php | file | annotate | diff | comparison | revisions | |
| www/mon_node.php | file | annotate | diff | comparison | revisions |
--- a/README.design Tue Aug 28 11:30:42 2018 +0200 +++ b/README.design Tue Aug 28 20:54:53 2018 +0200 @@ -32,7 +32,7 @@ inventory_equipments Ok. Ok. inventory_fermentables Ok. Ok. inventory_hops Ok. Ok. -inventory_mash_profiles Ok zonder de steps. +inventory_mash_profiles Ok. Ok. inventory_miscs Ok. inventory_styles Ok. Ok. inventory_suppliers Ok. Ok.
--- a/www/css/style.css Tue Aug 28 11:30:42 2018 +0200 +++ b/www/css/style.css Tue Aug 28 20:54:53 2018 +0200 @@ -1,43 +1,13 @@ /* */ -/* Reset default browser CSS. */ -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, font, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td { - background: transparent; - border: 0; - margin: 0; - padding: 0; - vertical-align: baseline; -} - body { background: #ccc; - color: #000; font-family: Verdana, Arial, sans-serif; - font-size: 12px; margin: 0px; } -#jqxWidget { - width: 1280px; - height: 660px; - float: left; -} - - -#jqxMenu { - border: 2px solid #4297d7; -} - #MainPanel { width: 1278px; @@ -49,36 +19,11 @@ -#header { - width: 1278px; - height: 38px; - float: left; - border: 1px solid #4297d7; - border-radius: 5px 5px 5px 5px; - background: #5c9ccc url(/jqwidgets/styles/images/redmond/ui-bg_gloss-wave_55_5c9ccc_500x100.png) 50% 50% repeat-x; - color: #ffffff; - font-weight: bold; -} - -#title { - width: 1278px; - height: 38px; - float: left; - margin-top: 2px; - font-size: 1.8em; - color: #FFD700; - text-align: center; - font-family: comic sans ms; -} - - - #node_table { width: 600px; background: #353536; margin: 50px; border: 2px solid; - font-size: 12pt; border-color: #888; border-radius: 5px 5px 5px 5px; } @@ -95,19 +40,20 @@ } + .temperature { display: inline-block; - font-size: 12pt; width: 64px; height: 20px; white-space: nowrap; color: #00eeee; } + + .NUM { font-family: "Arial Black", Gadget, sans-serif; color: #00eeee; - border-style: ridge; padding: 2px; margin: 2px; background-color: #212121; @@ -128,6 +74,7 @@ * |+-------------------++--------++-------------------+| * +----------------------------------------------------+ */ + #fermenter_thermometers { width: 720px; height: 295px; @@ -138,6 +85,8 @@ border-radius: 5px 5px 5px 5px; } + + #fermenter_tempdigits { width: 145px; height: 120px; @@ -150,7 +99,7 @@ } - +/* .LEDred_on { margin: 5px auto; width: 12px; @@ -222,4 +171,4 @@ border-radius: 50%; box-shadow: #024 0 0px 1px 1px; } - +*/
--- a/www/js/inv_mash_profiles.js Tue Aug 28 11:30:42 2018 +0200 +++ b/www/js/inv_mash_profiles.js Tue Aug 28 20:54:53 2018 +0200 @@ -44,6 +44,10 @@ $(document).ready(function () { var url = "includes/db_inventory_mash_profiles.php"; + // tooltips + $("#name").jqxTooltip({ content: 'De naam voor dit maisch profiel.' }); + $("#notes").jqxTooltip({ content: 'De uitgebreide opmerkingen over dit maich profiel.' }); + $("#grid").jqxTooltip({ content: 'De maisch stappen in dit profiel.'}); // prepare the data var source = { datatype: "json", @@ -53,12 +57,6 @@ { name: 'name', type: 'string' }, { name: 'notes', type: 'string' }, { name: 'steps', type: 'array' } - // { name: 'step_name', type: 'string', map: 'steps>step_name' }, - // { name: 'step_type', type: 'string', map: 'steps>step_type' }, - // { name: 'step_temp', type: 'float', map: 'steps>step_temp' }, - // { name: 'step_time', type: 'float', map: 'steps>step_time' }, - // { name: 'tamp_time', type: 'float', map: 'steps>ramp_time' }, - // { name: 'end_temp', type: 'float', map: 'steps>end_temp' } ], id: 'record', url: url, @@ -112,7 +110,7 @@ } }; var dataAdapter = new $.jqx.dataAdapter(source); - + // Inline steps editor var editsteps = function (data) { var generaterow = function () { var row = {}; @@ -136,22 +134,9 @@ { name: 'end_temp', type: 'float' } ], addrow: function (rowid, rowdata, position, commit) { - // synchronize with the server - send insert command - // call commit with parameter true if the synchronization with the server is successful - //and with parameter false if the synchronization failed. - // you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB. commit(true); }, deleterow: function (rowid, commit) { - // synchronize with the server - send delete command - // call commit with parameter true if the synchronization with the server is successful - //and with parameter false if the synchronization failed. - commit(true); - }, - updaterow: function (rowid, newdata, commit) { - // synchronize with the server - send update command - // call commit with parameter true if the synchronization with the server is successful - // and with parameter false if the synchronization failed. commit(true); } }; @@ -161,28 +146,18 @@ height: 330, source: stepAdapter, theme: theme, + selectionmode: 'singlerow', + editmode: 'selectedrow', + editable: true, showtoolbar: true, rendertoolbar: function (toolbar) { var me = this; var container = $("<div style='margin: 5px;'></div>"); toolbar.append(container); - container.append('<input id="addrowbutton" type="button" value="Add New Row" />'); - container.append('<input style="margin-left: 5px;" id="deleterowbutton" type="button" value="Delete Selected Row" />'); - container.append('<input style="margin-left: 5px;" id="updaterowbutton" type="button" value="Update Selected Row" />'); - $("#addrowbutton").jqxButton({ theme: theme }); - $("#deleterowbutton").jqxButton({ theme: theme }); - $("#updaterowbutton").jqxButton({ theme: theme }); - // update row. - $("#updaterowbutton").on('click', function () { - var datarow = generaterow(); - var selectedrowindex = $("#grid").jqxGrid('getselectedrowindex'); - var rowscount = $("#grid").jqxGrid('getdatainformation').rowscount; - if (selectedrowindex >= 0 && selectedrowindex < rowscount) { - var id = $("#grid").jqxGrid('getrowid', selectedrowindex); - var commit = $("#grid").jqxGrid('updaterow', id, datarow); - $("#grid").jqxGrid('ensurerowvisible', selectedrowindex); - } - }); + container.append('<input style="margin-left: 100px;" id="addrowbutton" type="button" value="Nieuwe stap" />'); + container.append('<input style="margin-left: 140px;" id="deleterowbutton" type="button" value="Verwijder stap" />'); + $("#addrowbutton").jqxButton({ theme: theme, width: 150 }); + $("#deleterowbutton").jqxButton({ theme: theme, width: 150 }); // create new row. $("#addrowbutton").on('click', function () { var datarow = generaterow(); @@ -200,13 +175,49 @@ }, columns: [ { text: 'Stap naam', datafield: 'step_name' }, - { text: 'Stap type', datafield: 'step_type', width: 100 }, - { text: 'Temperatuur', datafield: 'step_temp', width: 70, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, - { text: 'Eind', datafield: 'end_temp', width: 70, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, - { text: 'Tijd', datafield: 'step_time', width: 70, align: 'right', cellsalign: 'right' }, - { text: 'Stap', datafield: 'ramp_time', width: 70, align: 'right', cellsalign: 'right' } + { text: 'Stap type', datafield: 'step_type', width: 100, columntype: 'dropdownlist', + createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) { + var dataSource = [ "Infusion", "Temperature", "Decoction" ]; + editor.jqxDropDownList({ source: dataSource, dropDownHeight: 95 }); + } + }, + { 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: '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." }; + } + 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; + } + } ] }); + $("#grid").on('cellendedit', function (event) { + $('#grid').jqxGrid('sortby', 'step_temp', 'asc'); + }); }; // initialize the input fields. @@ -289,15 +300,14 @@ $("#Save").jqxButton({ theme: theme }); // update the edited row when the user clicks the 'Save' button. $("#Save").click(function () { + var steprows = $('#grid').jqxGrid('getrows'); if (editrow >= 0) { var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); - var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow); -// $("#name").val(dataRecord.name); var row = { record: rowID, name: $("#name").val(), notes: $("#notes").val(), - steps: dataRecord.steps + steps: steprows }; $('#jqxgrid').jqxGrid('updaterow', rowID, row); $("#popupWindow").jqxWindow('hide'); @@ -306,7 +316,8 @@ var newrow = { record: -1, name: $("#name").val(), - notes: $("#notes").val() + notes: $("#notes").val(), + steps: steprows }; $('#jqxgrid').jqxGrid('addrow', null, newrow); $("#popupWindow").jqxWindow('hide');
--- a/www/mon_fermenter.php Tue Aug 28 11:30:42 2018 +0200 +++ b/www/mon_fermenter.php Tue Aug 28 20:54:53 2018 +0200 @@ -128,10 +128,10 @@ $("#gaugeContainer_chiller").jqxGauge({ disabled: true }); } - html = "<div>SpH <span class='temperature NUM'>" + record.setpoint_high + "</span></div>"; - html += "<div>SpL <span class='temperature NUM'>" + record.setpoint_low + "</span></div>"; - html += "<div>Air <span class='temperature NUM'>" + record.air_temperature + "</span></div>"; - html += "<div>Beer <span class='temperature NUM'>" + record.beer_temperature + "</span></div>"; + html = "<div>SpH <span class='temperature NUM'>" + record.setpoint_high.toFixed(1) + "</span></div>"; + html += "<div>SpL <span class='temperature NUM'>" + record.setpoint_low.toFixed(1) + "</span></div>"; + html += "<div>Air <span class='temperature NUM'>" + record.air_temperature.toFixed(3) + "</span></div>"; + html += "<div>Beer <span class='temperature NUM'>" + record.beer_temperature.toFixed(3) + "</span></div>"; $("#fermenter_tempdigits").html(html); } });
--- a/www/mon_node.php Tue Aug 28 11:30:42 2018 +0200 +++ b/www/mon_node.php Tue Aug 28 20:54:53 2018 +0200 @@ -53,12 +53,12 @@ html += "<tr><td>OS</td><td>" + record.os + " versie: " + record.os_version + "</td></tr>"; html += "<tr><td>Firmware</td><td>" + record.firmware + "</td></tr>"; if (record.online) { - html += "<tr><td>Temperatuur</td><td>" + record.temperature + "°C</td></tr>"; + html += "<tr><td>Temperatuur</td><td>" + record.temperature.toFixed(1) + "°C</td></tr>"; if (record.humidity > 0) { - html += "<tr><td>Vochtigheid</td><td>" + record.humidity + "%</td></tr>"; + html += "<tr><td>Vochtigheid</td><td>" + record.humidity.toFixed(1) + "%</td></tr>"; } if (record.barometer > 0) { - html += "<tr><td>Luchtdruk</td><td>" + record.barometer + "</td></tr>"; + html += "<tr><td>Luchtdruk</td><td>" + record.barometer.toFixed(0) + "</td></tr>"; } if ((record.gps_latitude != 0) && (record.gps_longitude != 0)) { html += "<tr><td>GPS</td><td>"+ record.gps_latitude + " " + record.gps_longitude + " " + record.gps_altitude + "</td></tr>";
