Mercurial > bms / file comparison

comparison: www/js/profile_water.js

www/js/profile_water.js

changeset 522
35675eadc655
parent 494
af28ebe4a779
child 662
4bb005694ce7
equal deleted inserted replaced
519:c6021dd94afb 522:35675eadc655
20 * Software Foundation, 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA. 20 * Software Foundation, 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA.
21 *****************************************************************************/ 21 *****************************************************************************/
22 22
23 23
24 function createDelElements() { 24 function createDelElements() {
25 $('#eventWindow').jqxWindow({ 25 $('#eventWindow').jqxWindow({
26 theme: theme, 26 theme: theme,
27 position: { x: 490, y: 210 }, 27 position: { x: 490, y: 210 },
28 width: 300, 28 width: 300,
29 height: 175, 29 height: 175,
30 resizable: false, 30 resizable: false,
31 isModal: true, 31 isModal: true,
32 modalOpacity: 0.4, 32 modalOpacity: 0.4,
33 okButton: $('#delOk'), 33 okButton: $('#delOk'),
34 cancelButton: $('#delCancel'), 34 cancelButton: $('#delCancel'),
35 initContent: function () { 35 initContent: function() {
36 $('#delOk').jqxButton({ template: "danger", width: '65px', theme: theme }); 36 $('#delOk').jqxButton({ template: 'danger', width: '65px', theme: theme });
37 $('#delCancel').jqxButton({ template: "success", width: '65px', theme: theme }); 37 $('#delCancel').jqxButton({ template: 'success', width: '65px', theme: theme });
38 $('#delCancel').focus(); 38 $('#delCancel').focus();
39 } 39 }
40 }); 40 });
41 $('#eventWindow').jqxWindow('hide'); 41 $('#eventWindow').jqxWindow('hide');
42 } 42 }
43 43
44 44
45 $(document).ready(function () { 45 $(document).ready(function() {
46 46
47 // tooltips 47 var dataRecord = {},
48 $("#name").jqxTooltip({ content: 'De unieke naam van dit water profiel.' }); 48 url = 'includes/db_profile_water.php',
49 $("#notes").jqxTooltip({ content: 'Extra opmerkingen over dit water.' }); 49 source = {
50 $("#calcium").jqxTooltip({ content: 'Calcium (Ca).' }); 50 datatype: 'json',
51 $("#bicarbonate").jqxTooltip({ content: 'Bicarbonaat (HCO3). Berekend meteen de Totale alkaliteit.' }); 51 cache: false,
52 $("#sulfate").jqxTooltip({ content: 'Calcium Sulfaat (CaSO4).' }); 52 datafields: [
53 $("#chloride").jqxTooltip({ content: 'Chloride (Cl).' }); 53 { name: 'record', type: 'number' },
54 $("#sodium").jqxTooltip({ content: 'Natrium, oftewel keukenzout (Na). In berekeningen ook vaak als Sodium.' }); 54 { name: 'name', type: 'string' },
55 $("#magnesium").jqxTooltip({ content: 'Magnesium (Mg).' }); 55 { name: 'calcium', type: 'float' },
56 $("#ph").jqxTooltip({ content: 'De zuurgraad (pH).' }); 56 { name: 'bicarbonate', type: 'float' },
57 $("#total_alkalinity").jqxTooltip({ content: 'Totale alkaliniteit. Berekend meteen de Bicarbonaat.' }); 57 { name: 'sulfate', type: 'float' },
58 58 { name: 'chloride', type: 'float' },
59 var dataRecord = {}, 59 { name: 'sodium', type: 'float' },
60 url = 'includes/db_profile_water.php', 60 { name: 'magnesium', type: 'float' },
61 source = { 61 { name: 'ph', type: 'float' },
62 datatype: "json", 62 { name: 'notes', type: 'string' },
63 cache: false, 63 { name: 'total_alkalinity', type: 'float' }
64 datafields: [ 64 ],
65 { name: 'record', type: 'number' }, 65 id: 'record',
66 { name: 'name', type: 'string' }, 66 url: url,
67 { name: 'calcium', type: 'float' }, 67 deleterow: function(rowid, commit) {
68 { name: 'bicarbonate', type: 'float' }, 68 // synchronize with the server - send delete command
69 { name: 'sulfate', type: 'float' }, 69 var data = 'delete=true&' + $.param({ record: rowid });
70 { name: 'chloride', type: 'float' }, 70 $.ajax({
71 { name: 'sodium', type: 'float' }, 71 dataType: 'json',
72 { name: 'magnesium', type: 'float' }, 72 url: url,
73 { name: 'ph', type: 'float' }, 73 cache: false,
74 { name: 'notes', type: 'string' }, 74 data: data,
75 { name: 'total_alkalinity', type: 'float' } 75 type: 'POST',
76 ], 76 success: function(data, status, xhr) {
77 id: 'record', 77 commit(true);
78 url: url, 78 location.reload(true);
79 deleterow: function (rowid, commit) { 79 },
80 // synchronize with the server - send delete command 80 error: function(jqXHR, textStatus, errorThrown) {
81 var data = "delete=true&" + $.param({ record: rowid }); 81 commit(false);
82 $.ajax({ 82 }
83 dataType: 'json', 83 });
84 url: url, 84 },
85 cache: false, 85 addrow: function(rowid, rowdata, position, commit) {
86 data: data, 86 var data = 'insert=true&' + $.param(rowdata);
87 type: "POST", 87 $.ajax({
88 success: function (data, status, xhr) { 88 dataType: 'json',
89 commit(true); 89 url: url,
90 location.reload( true ); 90 cache: false,
91 }, 91 data: data,
92 error: function (jqXHR, textStatus, errorThrown) { 92 type: 'POST',
93 commit(false); 93 success: function(data, status, xhr) {
94 } 94 commit(true);
95 }); 95 location.reload(true);
96 }, 96 },
97 addrow: function (rowid, rowdata, position, commit) { 97 error: function(jqXHR, textStatus, errorThrown) {
98 var data = "insert=true&" + $.param(rowdata); 98 commit(false);
99 $.ajax({ 99 }
100 dataType: 'json', 100 });
101 url: url, 101 },
102 cache: false, 102 updaterow: function(rowid, rowdata, commit) {
103 data: data, 103 var data = 'update=true&' + $.param(rowdata);
104 type: "POST", 104 $.ajax({
105 success: function (data, status, xhr) { 105 dataType: 'json',
106 commit(true); 106 url: url,
107 location.reload( true ); 107 cache: false,
108 }, 108 data: data,
109 error: function(jqXHR, textStatus, errorThrown) { 109 type: 'POST',
110 commit(false); 110 success: function(data, status, xhr) {
111 } 111 commit(true);
112 }); 112 location.reload(true);
113 }, 113 },
114 updaterow: function (rowid, rowdata, commit) { 114 error: function(jqXHR, textStatus, errorThrown) {
115 var data = "update=true&" + $.param(rowdata); 115 commit(false);
116 $.ajax({ 116 }
117 dataType: 'json', 117 });
118 url: url, 118 }
119 cache: false, 119 },
120 data: data, 120 dataAdapter = new $.jqx.dataAdapter(source),
121 type: "POST", 121 editrow = -1;
122 success: function (data, status, xhr) { 122
123 commit(true); 123 // tooltips
124 location.reload( true ); 124 $('#name').jqxTooltip({ content: 'De unieke naam van dit water profiel.' });
125 }, 125 $('#notes').jqxTooltip({ content: 'Extra opmerkingen over dit water.' });
126 error: function(jqXHR, textStatus, errorThrown) { 126 $('#calcium').jqxTooltip({ content: 'Calcium (Ca).' });
127 commit(false); 127 $('#bicarbonate').jqxTooltip({ content: 'Bicarbonaat (HCO3). Berekend meteen de Totale alkaliteit.' });
128 } 128 $('#sulfate').jqxTooltip({ content: 'Calcium Sulfaat (CaSO4).' });
129 }); 129 $('#chloride').jqxTooltip({ content: 'Chloride (Cl).' });
130 } 130 $('#sodium').jqxTooltip({ content: 'Natrium, oftewel keukenzout (Na). In berekeningen ook vaak als Sodium.' });
131 }, 131 $('#magnesium').jqxTooltip({ content: 'Magnesium (Mg).' });
132 dataAdapter = new $.jqx.dataAdapter(source), 132 $('#ph').jqxTooltip({ content: 'De zuurgraad (pH).' });
133 editrow = -1; 133 $('#total_alkalinity').jqxTooltip({ content: 'Totale alkaliniteit. Berekend meteen de Bicarbonaat.' });
134 134
135 // initialize the input fields. 135 // initialize the input fields.
136 $("#name").jqxInput({ theme: theme, width: 640, height: 23 }); 136 $('#name').jqxInput({ theme: theme, width: 640, height: 23 });
137 $("#notes").jqxInput({ theme: theme, width: 800, height: 100 }); 137 $('#notes').jqxInput({ theme: theme, width: 800, height: 100 });
138 $("#calcium").jqxNumberInput( Spin1dec ); 138 $('#calcium').jqxNumberInput(Spin1dec);
139 $("#bicarbonate").jqxNumberInput( Spin1dec ); 139 $('#bicarbonate').jqxNumberInput(Spin1dec);
140 $("#sulfate").jqxNumberInput( Spin1dec ); 140 $('#sulfate').jqxNumberInput(Spin1dec);
141 $("#chloride").jqxNumberInput( Spin1dec ); 141 $('#chloride').jqxNumberInput(Spin1dec);
142 $("#sodium").jqxNumberInput( Spin1dec ); 142 $('#sodium').jqxNumberInput(Spin1dec);
143 $("#magnesium").jqxNumberInput( Spin1dec ); 143 $('#magnesium').jqxNumberInput(Spin1dec);
144 $("#ph").jqxNumberInput( Spin2pH ); 144 $('#ph').jqxNumberInput(Spin2pH);
145 $("#total_alkalinity").jqxNumberInput( Spin1dec ); 145 $('#total_alkalinity').jqxNumberInput(Spin1dec);
146 146
147 // initialize jqxGrid 147 // initialize jqxGrid
148 $("#jqxgrid").jqxGrid({ 148 $('#jqxgrid').jqxGrid({
149 width: 1280, 149 width: 1280,
150 height: 630, 150 height: 630,
151 source: dataAdapter, 151 source: dataAdapter,
152 theme: theme, 152 theme: theme,
153 showstatusbar: true, 153 showstatusbar: true,
154 renderstatusbar: function (statusbar) { 154 renderstatusbar: function(statusbar) {
155 var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>"), 155 var container = $('<div style="overflow: hidden; position: relative; margin: 5px;"></div>'),
156 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>"); 156 addButton = $('<div style="float: right; margin-right: 15px;"><img style="position: relative; margin-top: 2px;" ' +
157 container.append(addButton); 157 'src="images/add.png"/><span style="margin-left: 4px; position: relative; top: -3px;">Nieuw</span></div>');
158 statusbar.append(container); 158 container.append(addButton);
159 addButton.jqxButton({ theme: theme, width: 90, height: 20 }); 159 statusbar.append(container);
160 // add new row. 160 addButton.jqxButton({ theme: theme, width: 90, height: 20 });
161 addButton.click(function (event) { 161 // add new row.
162 editrow = -1; 162 addButton.click(function(event) {
163 $("#popupWindow").jqxWindow({ position: { x: 110, y: 30 } }); 163 editrow = -1;
164 $("#name").val(''); 164 $('#popupWindow').jqxWindow({ position: { x: 110, y: 30 } });
165 $("#calcium").val(0); 165 $('#name').val('');
166 $("#bicarbonate").val(0); 166 $('#calcium').val(0);
167 $("#sulfate").val(0); 167 $('#bicarbonate').val(0);
168 $("#chloride").val(0); 168 $('#sulfate').val(0);
169 $("#sodium").val(0); 169 $('#chloride').val(0);
170 $("#magnesium").val(0); 170 $('#sodium').val(0);
171 $("#ph").val(7); 171 $('#magnesium').val(0);
172 $("#notes").val(''); 172 $('#ph').val(7);
173 $("#total_alkalinity").val(0); 173 $('#notes').val('');
174 $("#popupWindow").jqxWindow('open'); 174 $('#total_alkalinity').val(0);
175 }); 175 $('#popupWindow').jqxWindow('open');
176 }, 176 });
177 filterable: false, 177 },
178 filtermode: 'excel', 178 filterable: false,
179 columns: [ 179 filtermode: 'excel',
180 { text: 'Water Profiel', datafield: 'name', width: 225 }, 180 columns: [
181 { text: 'Opmerkingen', datafield: 'notes' }, 181 { text: 'Water Profiel', datafield: 'name', width: 225 },
182 { text: 'Ca', datafield: 'calcium', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, 182 { text: 'Opmerkingen', datafield: 'notes' },
183 { text: 'Mg', datafield: 'magnesium', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, 183 { text: 'Ca', datafield: 'calcium', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f1' },
184 { text: 'Na', datafield: 'sodium', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, 184 { text: 'Mg', datafield: 'magnesium', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f1' },
185 { text: 'CaCO3', datafield: 'total_alkalinity', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, 185 { text: 'Na', datafield: 'sodium', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f1' },
186 { text: 'Cl', datafield: 'chloride', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, 186 { text: 'CaCO3', datafield: 'total_alkalinity', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f1' },
187 { text: 'SO4', datafield: 'sulfate', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, 187 { text: 'Cl', datafield: 'chloride', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f1' },
188 { text: 'pH', datafield: 'ph', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f1' }, 188 { text: 'SO4', datafield: 'sulfate', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f1' },
189 { text: '', datafield: 'Edit', width: 100, columntype: 'button', cellsrenderer: function () { 189 { text: 'pH', datafield: 'ph', width: 60, align: 'right', cellsalign: 'right', cellsformat: 'f1' },
190 return "Wijzig"; 190 { text: '', datafield: 'Edit', width: 100, columntype: 'button',
191 }, buttonclick: function (row) { 191 cellsrenderer: function() {
192 // open the popup window when the user clicks a button. 192 return 'Wijzig';
193 editrow = row; 193 }, buttonclick: function(row) {
194 $("#popupWindow").jqxWindow({ position: { x: 110, y: 30 } }); 194 // open the popup window when the user clicks a button.
195 // get the clicked row's data and initialize the input fields. 195 editrow = row;
196 dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow); 196 $('#popupWindow').jqxWindow({ position: { x: 110, y: 30 } });
197 $("#name").val(dataRecord.name); 197 // get the clicked row's data and initialize the input fields.
198 $("#calcium").val(dataRecord.calcium); 198 dataRecord = $('#jqxgrid').jqxGrid('getrowdata', editrow);
199 $("#bicarbonate").val(dataRecord.bicarbonate); 199 $('#name').val(dataRecord.name);
200 $("#sulfate").val(dataRecord.sulfate); 200 $('#calcium').val(dataRecord.calcium);
201 $("#chloride").val(dataRecord.chloride); 201 $('#bicarbonate').val(dataRecord.bicarbonate);
202 $("#sodium").val(dataRecord.sodium); 202 $('#sulfate').val(dataRecord.sulfate);
203 $("#magnesium").val(dataRecord.magnesium); 203 $('#chloride').val(dataRecord.chloride);
204 $("#ph").val(dataRecord.ph); 204 $('#sodium').val(dataRecord.sodium);
205 $("#notes").val(dataRecord.notes); 205 $('#magnesium').val(dataRecord.magnesium);
206 $("#total_alkalinity").val(dataRecord.total_alkalinity); 206 $('#ph').val(dataRecord.ph);
207 // show the popup window. 207 $('#notes').val(dataRecord.notes);
208 $("#popupWindow").jqxWindow('open'); 208 $('#total_alkalinity').val(dataRecord.total_alkalinity);
209 } 209 // show the popup window.
210 } 210 $('#popupWindow').jqxWindow('open');
211 ] 211 }
212 }); 212 }
213 213 ]
214 $("#total_alkalinity").on('change', function (event) { 214 });
215 dataRecord.bicarbonate = parseFloat(event.args.value) * 1.22; 215
216 $("#bicarbonate").val(dataRecord.bicarbonate); 216 $('#total_alkalinity').on('change', function(event) {
217 }); 217 dataRecord.bicarbonate = parseFloat(event.args.value) * 1.22;
218 $("#bicarbonate").on('change', function (event) { 218 $('#bicarbonate').val(dataRecord.bicarbonate);
219 dataRecord.total_alkalinity = parseFloat(event.args.value) * 50 / 61; 219 });
220 $("#total_alkalinity").val(dataRecord.total_alkalinity); 220 $('#bicarbonate').on('change', function(event) {
221 }); 221 dataRecord.total_alkalinity = parseFloat(event.args.value) * 50 / 61;
222 222 $('#total_alkalinity').val(dataRecord.total_alkalinity);
223 // initialize the popup window and buttons. 223 });
224 $("#popupWindow").jqxWindow({ 224
225 width: 1050, 225 // initialize the popup window and buttons.
226 height: 550, 226 $('#popupWindow').jqxWindow({
227 resizable: false, 227 width: 1050,
228 theme: theme, 228 height: 550,
229 isModal: true, 229 resizable: false,
230 autoOpen: false, 230 theme: theme,
231 cancelButton: $("#Cancel"), 231 isModal: true,
232 modalOpacity: 0.40 232 autoOpen: false,
233 }); 233 cancelButton: $('#Cancel'),
234 $("#popupWindow").on('open', function () { 234 modalOpacity: 0.40
235 $("#name").jqxInput('selectAll'); 235 });
236 }); 236 $('#popupWindow').on('open', function() {
237 $("#Delete").jqxButton({ template: "danger", width: '90px', theme: theme }); 237 $('#name').jqxInput('selectAll');
238 $("#Delete").click(function () { 238 });
239 if (editrow >= 0) { 239 $('#Delete').jqxButton({ template: 'danger', width: '90px', theme: theme });
240 // Open a popup to confirm this action. 240 $('#Delete').click(function() {
241 $('#eventWindow').jqxWindow('open'); 241 if (editrow >= 0) {
242 $("#delOk").click(function () { 242 // Open a popup to confirm this action.
243 var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); 243 $('#eventWindow').jqxWindow('open');
244 $("#jqxgrid").jqxGrid('deleterow', rowID); 244 $('#delOk').click(function() {
245 }); 245 var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow);
246 } 246 $('#jqxgrid').jqxGrid('deleterow', rowID);
247 $("#popupWindow").jqxWindow('hide'); 247 });
248 }); 248 }
249 $("#Cancel").jqxButton({ template: "primary", width: '90px', theme: theme }); 249 $('#popupWindow').jqxWindow('hide');
250 $("#Save").jqxButton({ template: "success", width: '90px', theme: theme }); 250 });
251 // update the edited row when the user clicks the 'Save' button. 251 $('#Cancel').jqxButton({ template: 'primary', width: '90px', theme: theme });
252 $("#Save").click(function () { 252 $('#Save').jqxButton({ template: 'success', width: '90px', theme: theme });
253 var row, rowID = -1; 253 // update the edited row when the user clicks the 'Save' button.
254 if (editrow >= 0) { 254 $('#Save').click(function() {
255 rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); 255 var row, rowID = -1;
256 } 256 if (editrow >= 0) {
257 row = { 257 rowID = $('#jqxgrid').jqxGrid('getrowid', editrow);
258 record: rowID, 258 }
259 name: $("#name").val(), 259 row = {
260 calcium: parseFloat($("#calcium").jqxNumberInput('decimal')), 260 record: rowID,
261 bicarbonate: parseFloat($("#bicarbonate").jqxNumberInput('decimal')), 261 name: $('#name').val(),
262 sulfate: parseFloat($("#sulfate").jqxNumberInput('decimal')), 262 calcium: parseFloat($('#calcium').jqxNumberInput('decimal')),
263 chloride: parseFloat($("#chloride").jqxNumberInput('decimal')), 263 bicarbonate: parseFloat($('#bicarbonate').jqxNumberInput('decimal')),
264 sodium: parseFloat($("#sodium").jqxNumberInput('decimal')), 264 sulfate: parseFloat($('#sulfate').jqxNumberInput('decimal')),
265 magnesium: parseFloat($("#magnesium").jqxNumberInput('decimal')), 265 chloride: parseFloat($('#chloride').jqxNumberInput('decimal')),
266 ph: parseFloat($("#ph").jqxNumberInput('decimal')), 266 sodium: parseFloat($('#sodium').jqxNumberInput('decimal')),
267 notes: $("#notes").val(), 267 magnesium: parseFloat($('#magnesium').jqxNumberInput('decimal')),
268 total_alkalinity: parseFloat($("#total_alkalinity").jqxNumberInput('decimal')) 268 ph: parseFloat($('#ph').jqxNumberInput('decimal')),
269 }; 269 notes: $('#notes').val(),
270 if (editrow >= 0) { 270 total_alkalinity: parseFloat($('#total_alkalinity').jqxNumberInput('decimal'))
271 $('#jqxgrid').jqxGrid('updaterow', rowID, row); 271 };
272 } else { 272 if (editrow >= 0) {
273 $('#jqxgrid').jqxGrid('addrow', null, row); 273 $('#jqxgrid').jqxGrid('updaterow', rowID, row);
274 } 274 } else {
275 $("#popupWindow").jqxWindow('hide'); 275 $('#jqxgrid').jqxGrid('addrow', null, row);
276 }); 276 }
277 createDelElements(); 277 $('#popupWindow').jqxWindow('hide');
278 });
279 createDelElements();
278 }); 280 });
279 281

Mercurial Repository: bms

mercurial