|
1 /***************************************************************************** |
|
2 * Copyright (C) 2024 |
|
3 * |
|
4 * Michiel Broek <mbroek at mbse dot eu> |
|
5 * |
|
6 * This file is part of mbsePi-apps |
|
7 * |
|
8 * This is free software; you can redistribute it and/or modify it |
|
9 * under the terms of the GNU General Public License as published by the |
|
10 * Free Software Foundation; either version 2, or (at your option) any |
|
11 * later version. |
|
12 * |
|
13 * BrewCloud is distributed in the hope that it will be useful, but |
|
14 * WITHOUT ANY WARRANTY; without even the implied warranty of |
|
15 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU |
|
16 * General Public License for more details. |
|
17 * |
|
18 * You should have received a copy of the GNU General Public License |
|
19 * along with ThermFerm; see the file COPYING. If not, write to the Free |
|
20 * Software Foundation, 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA. |
|
21 *****************************************************************************/ |
|
22 |
|
23 |
|
24 function createDelElements() { |
|
25 $('#eventWindow').jqxWindow({ |
|
26 theme: theme, |
|
27 position: { x: 490, y: 210 }, |
|
28 width: 300, |
|
29 height: 175, |
|
30 resizable: false, |
|
31 isModal: true, |
|
32 modalOpacity: 0.4, |
|
33 okButton: $('#delOk'), |
|
34 cancelButton: $('#delCancel'), |
|
35 initContent: function() { |
|
36 $('#delOk').jqxButton({ template: 'danger', width: '65px', theme: theme }); |
|
37 $('#delCancel').jqxButton({ template: 'success', width: '65px', theme: theme }); |
|
38 $('#delCancel').focus(); |
|
39 } |
|
40 }); |
|
41 $('#eventWindow').jqxWindow('hide'); |
|
42 } |
|
43 |
|
44 |
|
45 $(document).ready(function() { |
|
46 var dataRecord = {}, |
|
47 source = { |
|
48 datatype: 'json', |
|
49 cache: false, |
|
50 datafields: [ |
|
51 { name: 'uuid', type: 'string' }, |
|
52 { name: 'type', type: 'string' }, |
|
53 { name: 'address', type: 'string' }, |
|
54 { name: 'subdevice', type: 'int' }, |
|
55 { name: 'inuse', type: 'int' }, |
|
56 { name: 'description', type: 'string' }, |
|
57 { name: 'direction', type: 'string' }, |
|
58 { name: 'value', type: 'int' }, |
|
59 { name: 'offset', type: 'int' }, |
|
60 { name: 'present', type: 'string' }, |
|
61 { name: 'gpiopin', type: 'int' }, |
|
62 { name: 'comment', type: 'string' }, |
|
63 { name: 'timestamp', type: 'int' } |
|
64 ], |
|
65 id: 'uuid', |
|
66 url: 'getdevices.php' |
|
67 }, |
|
68 dataAdapter = new $.jqx.dataAdapter(source), |
|
69 editrow = -1, |
|
70 tzoffset = (new Date()).getTimezoneOffset() * 60000; //offset in milliseconds |
|
71 |
|
72 // initialize the input fields. |
|
73 $('#dev_uuid').jqxInput({ theme: theme, width: 480, height: 23 }); |
|
74 $('#dev_description').jqxInput({ theme: theme, width: 800, height: 23 }); |
|
75 $('#dev_type').jqxDropDownList({ |
|
76 theme: theme, |
|
77 source: DeviceTypeAdapter, |
|
78 valueMember: 'mno', |
|
79 displayMember: 'en', |
|
80 width: 180, |
|
81 height: 23, |
|
82 autoDropDownHeight: true |
|
83 }); |
|
84 $('#dev_direction').jqxDropDownList({ |
|
85 theme: theme, |
|
86 source: DeviceDirectionAdapter, |
|
87 valueMember: 'mno', |
|
88 displayMember: 'en', |
|
89 width: 180, |
|
90 height: 23, |
|
91 autoDropDownHeight: true |
|
92 }); |
|
93 $('#dev_value').jqxNumberInput(Spin0dec); |
|
94 $('#dev_offset').jqxNumberInput(Spin0dec); |
|
95 $('#dev_address').jqxInput({ theme: theme, width: 200, height: 23 }); |
|
96 $('#dev_subdevice').jqxNumberInput(SubInt); |
|
97 $('#dev_present').jqxDropDownList({ |
|
98 theme: theme, |
|
99 source: DevicePresentAdapter, |
|
100 valueMember: 'mno', |
|
101 displayMember: 'en', |
|
102 width: 180, |
|
103 height: 23, |
|
104 autoDropDownHeight: true |
|
105 }); |
|
106 $('#dev_gpiopin').jqxNumberInput(GPIOInt); |
|
107 $('#dev_inuse').jqxNumberInput(Show0dec); |
|
108 $('#dev_timestamp').jqxInput({ theme: theme, width: 200, height: 23 }); |
|
109 $('#dev_comment').jqxInput({ theme: theme, width: 800, height: 23 }); |
|
110 |
|
111 // initialize jqxGrid |
|
112 $('#jqxgrid').jqxGrid({ |
|
113 width: 1280, |
|
114 height: 630, |
|
115 source: dataAdapter, |
|
116 theme: theme, |
|
117 showstatusbar: true, |
|
118 renderstatusbar: function(statusbar) { |
|
119 var rowCount = $("#jqxgrid").jqxGrid('getrows').length; |
|
120 statusbar.append('<div style="float: left; margin: 8px; color: orange !important;">Total items: ' + rowCount + '</div>'); |
|
121 var container, addButton, impButton; |
|
122 container = $('<div style="overflow: hidden; position: relative; margin: 5px;"></div>'); |
|
123 addButton = $('<div style="float: right; margin-right: 15px;"><img style="position: relative; margin-top: 2px;" ' + |
|
124 'src="images/add.png"/><span style="margin-left: 4px; position: relative; top: -4px;">Nieuw</span></div>'); |
|
125 container.append(addButton); |
|
126 statusbar.append(container); |
|
127 addButton.jqxButton({ theme: theme, width: 90, height: 17 }); |
|
128 // add new row. |
|
129 addButton.click(function(event) { |
|
130 editrow = -1; |
|
131 $('#popupWindow').jqxWindow({ position: { x: 110, y: 30 } }); |
|
132 $('#dev_uuid').val(''); |
|
133 $('#dev_description').val(''); |
|
134 $('#dev_type').val('NA'); |
|
135 $('#dev_direction').val('UNDEF'); |
|
136 $('#dev_value').val(0); |
|
137 $('#dev_offset').val(0); |
|
138 $('#dev_address').val(''); |
|
139 $('#dev_subdevice').val(0); |
|
140 $('#dev_present').val('UNDEF'); |
|
141 $('#dev_gpiopin').val(-1); |
|
142 $('#dev_inuse').val(0); |
|
143 var now = new Date(); |
|
144 var date = new Date(now - tzoffset).toISOString().slice(0, 19).replace("T", " "); |
|
145 $('#dev_timestamp').val(date); |
|
146 $('#dev_comment').val(''); |
|
147 |
|
148 $('#popupWindow').jqxWindow('open'); |
|
149 }); |
|
150 }, |
|
151 columns: [ |
|
152 { text: 'Address', datafield: 'address', width: 200 }, |
|
153 { text: 'Subdevice', datafield: 'subdevice', width: 100 }, |
|
154 { text: 'Direction', datafield: 'direction', width: 120 }, |
|
155 { text: 'Value', datafield: 'value', width: 80 }, |
|
156 { text: 'Description', datafield: 'description' }, |
|
157 { text: 'Last change', datafield: 'timestamp', width: 200, |
|
158 cellsrenderer: function(index, datafield, value, defaultvalue, column, rowdata) { |
|
159 var date = new Date((value * 1000) - tzoffset).toISOString().slice(0, 19).replace("T", " "); |
|
160 return '<span style="margin: 3px; margin-top: 6px; float: left;">' + date + '</span>'; |
|
161 } |
|
162 }, |
|
163 { text: '', datafield: 'Edit', width: 100, align: 'center', columntype: 'button', cellsrenderer: function() { |
|
164 return 'Edit'; |
|
165 }, buttonclick: function(row) { |
|
166 // open the popup window when the user clicks a button. |
|
167 editrow = row; |
|
168 $('#popupWindow').jqxWindow({ position: { x: 110, y: 15 } }); |
|
169 dataRecord = $('#jqxgrid').jqxGrid('getrowdata', editrow); |
|
170 $('#dev_uuid').val(dataRecord.uuid); |
|
171 $('#dev_description').val(dataRecord.description); |
|
172 $('#dev_type').val(dataRecord.type); |
|
173 $('#dev_direction').val(dataRecord.direction); |
|
174 $('#dev_value').val(dataRecord.value); |
|
175 $('#dev_offset').val(dataRecord.offset); |
|
176 $('#dev_address').val(dataRecord.address); |
|
177 $('#dev_subdevice').val(dataRecord.subdevice); |
|
178 $('#dev_present').val(dataRecord.present); |
|
179 $('#dev_gpiopin').val(dataRecord.gpiopin); |
|
180 $('#dev_inuse').val(dataRecord.inuse); |
|
181 var date = new Date((dataRecord.timestamp * 1000) - tzoffset).toISOString().slice(0, 19).replace("T", " "); |
|
182 $('#dev_timestamp').val(date); |
|
183 $('#dev_comment').val(dataRecord.comment); |
|
184 // show the popup window. |
|
185 $('#popupWindow').jqxWindow('open'); |
|
186 } |
|
187 } |
|
188 ], |
|
189 }); |
|
190 |
|
191 // initialize the popup window and buttons. |
|
192 $('#popupWindow').jqxWindow({ |
|
193 width: 1050, |
|
194 height: 625, |
|
195 resizable: false, |
|
196 theme: theme, |
|
197 isModal: true, |
|
198 autoOpen: false, |
|
199 cancelButton: $('#Cancel'), |
|
200 modalOpacity: 0.40 |
|
201 }); |
|
202 $('#popupWindow').on('open', function() { |
|
203 $('#dev_description').jqxInput('selectAll'); |
|
204 }); |
|
205 $('#Delete').jqxButton({ template: 'danger', width: '90px', theme: theme }); |
|
206 $('#Delete').click(function() { |
|
207 if (editrow >= 0) { |
|
208 // Open a popup to confirm this action. |
|
209 $('#eventWindow').jqxWindow('open'); |
|
210 $('#delOk').click(function() { |
|
211 var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); |
|
212 $('#jqxgrid').jqxGrid('deleterow', rowID); |
|
213 }); |
|
214 } |
|
215 $('#popupWindow').jqxWindow('hide'); |
|
216 }); |
|
217 $('#Cancel').jqxButton({ template: 'primary', width: '90px', theme: theme }); |
|
218 $('#Save').jqxButton({ template: 'success', width: '90px', theme: theme }); |
|
219 $('#Save').click(function() { |
|
220 var row, rowID = -1; |
|
221 if (editrow >= 0) { |
|
222 rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); |
|
223 } |
|
224 row = { |
|
225 uuid: dataRecord.uuid, |
|
226 type: $('#type').val() |
|
227 }; |
|
228 if (editrow >= 0) { |
|
229 $('#jqxgrid').jqxGrid('updaterow', rowID, row); |
|
230 } else { |
|
231 $('#jqxgrid').jqxGrid('addrow', null, row); |
|
232 } |
|
233 $('#popupWindow').jqxWindow('hide'); |
|
234 }); |
|
235 createDelElements(); |
|
236 |
|
237 websocket.onmessage = function(evt) { |
|
238 var msg = evt.data; |
|
239 var obj = JSON.parse(msg); |
|
240 |
|
241 if (obj.ping) { |
|
242 websocket.send('{"pong":' + obj.ping + '}'); |
|
243 } |
|
244 |
|
245 if (obj.type == 'device') { |
|
246 // Use the message to trigger update. |
|
247 $('#jqxgrid').jqxGrid('updatebounddata'); |
|
248 } |
|
249 } |
|
250 }); |