-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathweathertable.html
153 lines (136 loc) · 5.36 KB
/
weathertable.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<html>
<head>
<title>Apache Pulsar - Websockets - Data Tables - Weather</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
</head>
<body bgcolor="white" text="black">
<img data-v-c612f5f2="" alt="StreamNative Logo" src="https://streamnative.io/assets/static/sn-logo-vertical-dark.c516648.a34f97839dee38e7499aa0c21d0b2255.png" width="543" data-src="https://streamnative.io/assets/static/sn-logo-vertical-dark.c516648.a34f97839dee38e7499aa0c21d0b2255.png" data-srcset="https://streamnative.io/assets/static/sn-logo-vertical-dark.c516648.a34f97839dee38e7499aa0c21d0b2255.png 543w" data-sizes="(max-width: 543px) 100vw, 543px" class="w-56 mt-4 md:mt-0 g-image g-image--lazy g-image--loaded" srcset="https://streamnative.io/assets/static/sn-logo-vertical-dark.c516648.a34f97839dee38e7499aa0c21d0b2255.png 543w" sizes="(max-width: 543px) 100vw, 543px">
<script>
function IsJsonString(str) {
try {
JSON.parse(str);
} catch (e) {
return false;
}
return true;
}
/// send the information to the server
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = '';
}
};
}
</script>
<br><br>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th><b>Location</th>
<th><b>Obs Time</b></th>
<th><b>Weather</b></th>
<th><b>Temp</b></th>
<th><b>Windchill</b></th>
<th><b>Lat/Long</b></th>
<th><b>Pressure</b></th>
<th><b>Publish Time</b></th>
<th><b> [--] </b></th>
</tr>
</thead>
<tfoot>
<tr>
<th><b>Location</th>
<th><b>Obs Time</b></th>
<th><b>Weather</b></th>
<th><b>Temp</b></th>
<th><b>Windchill</b></th>
<th><b>Lat/Long</b></th>
<th><b>Pressure</b></th>
<th><b>Publish Time</b></th>
<th><b> [--] </b></th>
</tr>
</tfoot>
</table>
<script>
function isEmpty(val){
return (val === undefined || val == null || val.length <= 0) ? true : false;
}
function IsJsonString(str) {
try {
JSON.parse(str);
} catch (e) {
return false;
}
return true;
}
$(document).ready(function() {
var t = $('#example').DataTable();
var wsUri = "ws://pulsar1:8080/ws/v2/consumer/persistent/public/default/weather/weatherreader?subscriptionType=Shared&receiverQueueSize=5000";
websocket = new WebSocket(wsUri);
websocket.onopen = function(evt) {
console.log('open');
};
websocket.onerror = function(evt) {console.log('ERR', evt)};
websocket.onmessage = function(evt) {
var dataPoints = JSON.parse(evt.data);
if ( dataPoints === undefined || dataPoints == null || dataPoints.payload === undefined || dataPoints.payload == null ) {
return;
}
if (IsJsonString(atob(dataPoints.payload))) {
var pulsarMessage = JSON.parse(atob(dataPoints.payload));
if ( pulsarMessage === undefined || pulsarMessage == null ) {
return;
}
var publishTime = " ";
if ( !isEmpty(dataPoints.publishTime) ) {
publishTime = dataPoints.publishTime;
}
var pressure = " ";
if ( !isEmpty(pulsarMessage.pressure_string) ) {
pressure = pulsarMessage.pressure_string;
}
var windchill = " ";
if ( !isEmpty(pulsarMessage.windchill_string) ) {
windchill = pulsarMessage.windchill_string;
}
var imageName = " ";
if(isEmpty(pulsarMessage.icon_url_name)){
imageName = " ";
}
else {
imageName = "<img src=\"" +
pulsarMessage.icon_url_base + pulsarMessage.icon_url_name + "\" border=\"0\">";
}
var obsTime = " ";
if (!isEmpty(pulsarMessage.observation_time)) {
obsTime = pulsarMessage.observation_time;
}
var loc = " ";
if (!isEmpty(pulsarMessage.location) ){
loc = pulsarMessage.location;
}
var weather = " ";
if ( !isEmpty(pulsarMessage.weather) ) {
weather = pulsarMessage.weather;
}
var tempString = " " ;
if ( !isEmpty(pulsarMessage.temperature_string) ) {
tempString = pulsarMessage.temperature_string;
}
var latlong = pulsarMessage.latitude +","+pulsarMessage.longitude;
t.row.add( [ loc, obsTime, weather, tempString, windchill, latlong,
pressure, publishTime,imageName ] ).draw(true );
}
};
} );
</script>
<p>
<p><img src="stylecloud.png" border="0"></p>
</p><br>
© 2021/2022 Tim Spann @PaasDev - datainmotion.dev - streamnative.io
</body>
</html>