Skip to content
This repository was archived by the owner on Sep 1, 2024. It is now read-only.

Commit 5490359

Browse files
dariol83dariol83
committed
HTML test page update
1 parent 163c756 commit 5490359

1 file changed

Lines changed: 110 additions & 27 deletions

File tree

  • eu.dariolucia.reatmetric.driver.httpserver/src/main/resources

‎eu.dariolucia.reatmetric.driver.httpserver/src/main/resources/reatmetric.html‎

Lines changed: 110 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -8,32 +8,78 @@
88
var subParamKey = null;
99
var subMsgKey = null;
1010

11+
var tableBodyVar = null;
12+
13+
var parameterMap = null;
14+
1115
var subIntervalId = null;
1216

17+
function createTable(divToAttach, thTextArray) {
18+
// Table and header
19+
var tableNode = document.createElement('table');
20+
divToAttach.appendChild(tableNode);
21+
var theadNode = document.createElement('thead');
22+
tableNode.appendChild(theadNode);
23+
var trNode = document.createElement('tr');
24+
theadNode.appendChild(trNode);
25+
26+
for(var colname of thTextArray) {
27+
var thNode = document.createElement('th');
28+
thNode.textContent = colname;
29+
trNode.appendChild(thNode);
30+
}
31+
32+
// Create tbody
33+
var tbodyNode = document.createElement('tbody');
34+
tableNode.appendChild(tbodyNode);
35+
return tbodyNode;
36+
}
37+
38+
function addRow(tbodyNode, obj, tdTextArrayKeys) {
39+
var addedTds = new Object();
40+
var pTrNode = document.createElement('tr');
41+
for(var tdkey of tdTextArrayKeys) {
42+
var tdNode = document.createElement('td');
43+
tdNode.textContent = obj[tdkey];
44+
pTrNode.appendChild(tdNode);
45+
addedTds[tdkey] = tdNode;
46+
}
47+
tbodyNode.appendChild(pTrNode);
48+
return addedTds;
49+
}
50+
1351
async function showParameters() {
1452
var divToAttach = document.getElementById('div1');
1553
divToAttach.textContent = '';
54+
55+
var thTextArray = ['Path', 'External ID', 'Description', 'Unit'];
56+
var tdTextArrayKeys = ['path', 'externalId', 'description', 'unit'];
57+
1658
var params = await reatmetric.listParameters();
1759
if(params != null) {
60+
// Create table node
61+
var tbodyNode = createTable(divToAttach, thTextArray)
1862
for(var i = 0; i < params.length; ++i) {
1963
var param = params[i];
20-
var pNode = document.createElement('p');
21-
pNode.textContent = param.path + " (" + param.externalId + "): " + param.description + " - Unit: " + param.unit;
22-
divToAttach.appendChild(pNode);
64+
addRow(tbodyNode, param, tdTextArrayKeys);
2365
}
2466
}
2567
}
2668

2769
async function showEvents() {
2870
var divToAttach = document.getElementById('div1');
2971
divToAttach.textContent = '';
72+
73+
var thTextArray = ['Path', 'External ID', 'Description', 'Severity'];
74+
var tdTextArrayKeys = ['path', 'externalId', 'description', 'severity'];
75+
3076
var events = await reatmetric.listEvents();
3177
if(events != null) {
78+
// Create table node
79+
var tbodyNode = createTable(divToAttach, thTextArray)
3280
for(var i = 0; i < events.length; ++i) {
3381
var event = events[i];
34-
var pNode = document.createElement('p');
35-
pNode.textContent = event.path + " (" + event.externalId + "): " + event.description + " - Severity: " + event.severity;
36-
divToAttach.appendChild(pNode);
82+
addRow(tbodyNode, event, tdTextArrayKeys);
3783
}
3884
}
3985
}
@@ -48,6 +94,10 @@
4894
var divToAttach = document.getElementById('div1');
4995
divToAttach.textContent = '';
5096

97+
// Create table node
98+
var thTextArray = ['Severity', 'Gen. Time', 'Path', 'Route', 'Source'];
99+
tableBodyVar = createTable(divToAttach, thTextArray)
100+
51101
var filter = reatmetric.eventFilter('STATION', null, null, null, null, null, null);
52102

53103
subEvtKey = await reatmetric.registerToEvents(filter);
@@ -64,14 +114,13 @@
64114
if(subEvtKey != null) {
65115
currentEvents = await reatmetric.getEvents(subEvtKey)
66116
}
117+
var tdTextArrayKeys = ['severity', 'gentime', 'path', 'route', 'source'];
118+
67119
if(currentEvents != null) {
68120
console.log("Retrieved " + currentEvents.length + " events");
69-
var divToAttach = document.getElementById('div1');
70121
for(var i = 0; i < currentEvents.length; ++i) {
71122
var event = currentEvents[i];
72-
var pNode = document.createElement('p');
73-
pNode.textContent = event.severity + " (" + event.gentime + "): " + event.path + " - Route: " + event.route + ", Source: " + event.source;
74-
divToAttach.appendChild(pNode);
123+
addRow(tableBodyVar, event, tdTextArrayKeys);
75124
}
76125
}
77126
}
@@ -98,6 +147,11 @@
98147

99148
var filter = reatmetric.parameterFilter('STATION', null, null, null, null, null);
100149

150+
// Create table node
151+
var thTextArray = ['Path', 'Gen. Time', 'Raw Value', 'Eng. Value', 'Validity', 'Alarm State'];
152+
tableBodyVar = createTable(divToAttach, thTextArray)
153+
parameterMap = [];
154+
101155
subParamKey = await reatmetric.registerToStateParameters(filter);
102156
console.log("Parameter subscription key: " + subParamKey);
103157
if(subParamKey != null) {
@@ -107,19 +161,22 @@
107161
}
108162

109163
async function paramRetrieve() {
110-
console.log("Retrieving parameters on key " + subParamKey);
111164
var currentParameters = null;
112165
if(subParamKey != null) {
113166
currentParameters = await reatmetric.getStateParameters(subParamKey)
114167
}
115168
if(currentParameters != null) {
116-
console.log("Retrieved " + currentParameters.length + " parameters");
117-
var divToAttach = document.getElementById('div1');
169+
var paramKeys = ['path', 'gentime', 'raw', 'eng', 'validity', 'alarm'];
118170
for(var i = 0; i < currentParameters.length; ++i) {
119171
var param = currentParameters[i];
120-
var pNode = document.createElement('p');
121-
pNode.textContent = param.alarm + " (" + param.gentime + "): " + param.path + " - Raw Value: " + param.raw + ", Eng. Value: " + param.eng;
122-
divToAttach.appendChild(pNode);
172+
if(parameterMap[param['path']] != null) {
173+
for(var tdkey of paramKeys) {
174+
var theTdArray = parameterMap[param['path']];
175+
theTdArray[tdkey].textContent = param[tdkey];
176+
}
177+
} else {
178+
parameterMap[param['path']] = addRow(tableBodyVar, param, paramKeys);
179+
}
123180
}
124181
}
125182
}
@@ -132,6 +189,7 @@
132189
subIntervalId = null;
133190
await reatmetric.deregisterFromStateParameters(subParamKey);
134191
subParamKey = null;
192+
parameterMap = null;
135193
}
136194

137195
async function subscribeToMessages() {
@@ -144,30 +202,30 @@
144202
var divToAttach = document.getElementById('div1');
145203
divToAttach.textContent = '';
146204

205+
// Create table node
206+
var thTextArray = ['Severity', 'Gen. Time', 'Source', 'Message'];
207+
tableBodyVar = createTable(divToAttach, thTextArray)
208+
147209
var filter = reatmetric.messageFilter(null, null, null, null);
148210

149211
subMsgKey = await reatmetric.registerToMessages(filter);
150-
console.log("Parameter subscription key: " + subMsgKey);
212+
console.log("Message subscription key: " + subMsgKey);
151213
if(subMsgKey != null) {
152214
subIntervalId = setInterval(msgRetrieve, 1000);
153215
console.log("Parameter subscription interval: " + subIntervalId);
154216
}
155217
}
156218

157219
async function msgRetrieve() {
158-
console.log("Retrieving parameters on key " + subParamKey);
159220
var currentMessages = null;
160221
if(subMsgKey != null) {
161222
currentMessages = await reatmetric.getMessages(subMsgKey)
162223
}
163224
if(currentMessages != null) {
164-
console.log("Retrieved " + currentMessages.length + " parameters");
165-
var divToAttach = document.getElementById('div1');
225+
var tdTextArrayKeys = ['severity', 'gentime', 'source', 'message'];
166226
for(var i = 0; i < currentMessages.length; ++i) {
167227
var messg = currentMessages[i];
168-
var pNode = document.createElement('p');
169-
pNode.textContent = messg.severity + " (" + messg.gentime + "): " + messg.text + " - Source: " + messg.source;
170-
divToAttach.appendChild(pNode);
228+
addRow(tableBodyVar, messg, tdTextArrayKeys);
171229
}
172230
}
173231
}
@@ -183,19 +241,44 @@
183241
}
184242

185243
</script>
244+
<style>
245+
.tableFixHead {
246+
overflow-y: auto;
247+
height: 85%;
248+
font-size: 9px;
249+
}
250+
.tableFixHead thead th {
251+
position: sticky;
252+
top: 0;
253+
font-size: 9px;
254+
}
255+
table {
256+
border-collapse: collapse;
257+
width: 100%;
258+
}
259+
th,
260+
td {
261+
padding: 8px 16px;
262+
border: 1px solid #ccc;
263+
font-size: 9px;
264+
}
265+
th {
266+
background: #eee;
267+
}
268+
</style>
186269
</head>
187270
<body>
188271
<button type="button" onclick="showParameters()">Show Parameters</button>
189272
<button type="button" onclick="showEvents()">Show Events</button>
190273
<button type="button" onclick="subscribeToEvents()">Subscribe to events</button>
191-
<button type="button" onclick="unsubscribeFromEvents()">Unsubscribe to events</button>
274+
<button type="button" onclick="unsubscribeFromEvents()">Unsubscribe from events</button>
192275
<button type="button" onclick="subscribeToParameters()">Subscribe to parameters</button>
193-
<button type="button" onclick="unsubscribeFromParameters()">Unsubscribe to events</button>
276+
<button type="button" onclick="unsubscribeFromParameters()">Unsubscribe from parameters</button>
194277
<button type="button" onclick="subscribeToMessages()">Subscribe to messages</button>
195-
<button type="button" onclick="unsubscribeFromMessages()">Unsubscribe to messages</button>
278+
<button type="button" onclick="unsubscribeFromMessages()">Unsubscribe from messages</button>
196279
<hr/>
197280
<br/>
198-
<div id="div1">
281+
<div id="div1" class="tableFixHead">
199282
</div>
200283
<br/>
201284
</body>

0 commit comments

Comments
 (0)