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 |
|
133 dataRecord.uuid = ''; |
|
134 $('#popupWindow').jqxWindow('open'); |
|
135 }); |
|
136 }, |
|
137 columns: [ |
|
138 { text: 'Address', datafield: 'address', width: 200 }, |
|
139 { text: 'Subdevice', datafield: 'subdevice', width: 100 }, |
|
140 { text: 'Direction', datafield: 'direction', width: 120 }, |
|
141 { text: 'Value', datafield: 'value', width: 80 }, |
|
142 { text: 'Description', datafield: 'description' }, |
|
143 { text: 'Last change', datafield: 'timestamp', width: 200, |
|
144 cellsrenderer: function(index, datafield, value, defaultvalue, column, rowdata) { |
|
145 var date = new Date((value * 1000) - tzoffset).toISOString().slice(0, 19).replace("T", " "); |
|
146 return '<span style="margin: 3px; margin-top: 6px; float: left;">' + date + '</span>'; |
|
147 } |
|
148 }, |
|
149 { text: '', datafield: 'Edit', width: 100, align: 'center', columntype: 'button', cellsrenderer: function() { |
|
150 return 'Edit'; |
|
151 }, buttonclick: function(row) { |
|
152 // open the popup window when the user clicks a button. |
|
153 editrow = row; |
|
154 $('#popupWindow').jqxWindow({ position: { x: 110, y: 15 } }); |
|
155 dataRecord = $('#jqxgrid').jqxGrid('getrowdata', editrow); |
|
156 $('#dev_uuid').val(dataRecord.uuid); |
|
157 $('#dev_description').val(dataRecord.description); |
|
158 $('#dev_type').val(dataRecord.type); |
|
159 $('#dev_direction').val(dataRecord.direction); |
|
160 $('#dev_value').val(dataRecord.value); |
|
161 $('#dev_offset').val(dataRecord.offset); |
|
162 $('#dev_address').val(dataRecord.address); |
|
163 $('#dev_subdevice').val(dataRecord.subdevice); |
|
164 $('#dev_present').val(dataRecord.present); |
|
165 $('#dev_gpiopin').val(dataRecord.gpiopin); |
|
166 $('#dev_inuse').val(dataRecord.inuse); |
|
167 var date = new Date((dataRecord.timestamp * 1000) - tzoffset).toISOString().slice(0, 19).replace("T", " "); |
|
168 $('#dev_timestamp').val(date); |
|
169 $('#dev_comment').val(dataRecord.comment); |
|
170 // show the popup window. |
|
171 $('#popupWindow').jqxWindow('open'); |
|
172 } |
|
173 } |
|
174 ], |
|
175 }); |
|
176 |
|
177 // initialize the popup window and buttons. |
|
178 $('#popupWindow').jqxWindow({ |
|
179 width: 1050, |
|
180 height: 625, |
|
181 resizable: false, |
|
182 theme: theme, |
|
183 isModal: true, |
|
184 autoOpen: false, |
|
185 cancelButton: $('#Cancel'), |
|
186 modalOpacity: 0.40 |
|
187 }); |
|
188 $('#popupWindow').on('open', function() { |
|
189 $('#dev_description').jqxInput('selectAll'); |
|
190 }); |
|
191 $('#Delete').jqxButton({ template: 'danger', width: '90px', theme: theme }); |
|
192 $('#Delete').click(function() { |
|
193 if (editrow >= 0) { |
|
194 // Open a popup to confirm this action. |
|
195 $('#eventWindow').jqxWindow('open'); |
|
196 $('#delOk').click(function() { |
|
197 var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); |
|
198 $('#jqxgrid').jqxGrid('deleterow', rowID); |
|
199 }); |
|
200 } |
|
201 $('#popupWindow').jqxWindow('hide'); |
|
202 }); |
|
203 $('#Cancel').jqxButton({ template: 'primary', width: '90px', theme: theme }); |
|
204 $('#Save').jqxButton({ template: 'success', width: '90px', theme: theme }); |
|
205 $('#Save').click(function() { |
|
206 var row, rowID = -1; |
|
207 if (editrow >= 0) { |
|
208 rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); |
|
209 } |
|
210 row = { |
|
211 uuid: dataRecord.uuid, |
|
212 type: $('#type').val() |
|
213 }; |
|
214 if (editrow >= 0) { |
|
215 $('#jqxgrid').jqxGrid('updaterow', rowID, row); |
|
216 } else { |
|
217 $('#jqxgrid').jqxGrid('addrow', null, row); |
|
218 } |
|
219 $('#popupWindow').jqxWindow('hide'); |
|
220 }); |
|
221 createDelElements(); |
|
222 |
|
223 websocket.onmessage = function(evt) { |
|
224 var msg = evt.data; |
|
225 var obj = JSON.parse(msg); |
|
226 |
|
227 if (obj.ping) { |
|
228 websocket.send('{"pong":' + obj.ping + '}'); |
|
229 } |
|
230 |
|
231 if (obj.type == 'device') { |
|
232 // Use the message to trigger update. |
|
233 $('#jqxgrid').jqxGrid('updatebounddata'); |
|
234 } |
|
235 } |
|
236 }); |
|