Skip to content

Commit d9d8fb5

Browse files
nothansnothans
committed
Update: Timezone picker and added channel description and custom field labels
1 parent 18a079c commit d9d8fb5

File tree

1 file changed

+52
-12
lines changed

1 file changed

+52
-12
lines changed

‎app/thingspeak.html

Lines changed: 52 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,9 @@
1717
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
1818
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
1919
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
20-
20+
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
21+
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.33/moment-timezone-with-data.min.js"></script>
22+
2123
<style type="text/css">
2224
.feed-row { transition: background-color 2s ease; }
2325
.rgb-cell { transition: color 0.5s ease, background-color 0.5s ease; }
@@ -58,6 +60,20 @@
5860

5961
$(document).ready(function() {
6062

63+
var timezones = moment.tz.names();
64+
var select = document.getElementById("timezone");
65+
var current_tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
66+
67+
for(var i = 0; i < timezones.length; i++) {
68+
var opt = document.createElement('option');
69+
opt.value = timezones[i];
70+
opt.innerHTML = timezones[i];
71+
if(timezones[i] === current_tz) {
72+
opt.selected = true;
73+
}
74+
select.appendChild(opt);
75+
}
76+
6177
// set default inputs
6278
if (!thingspeak['timezone']) {thingspeak['timezone'] = 'Etc/UTC';}
6379

@@ -116,13 +132,14 @@
116132
thingspeak['channel'] = $('#channel').val();
117133
thingspeak['read_api_key'] = $('#read_api_key').val();
118134
thingspeak['results'] = $('#results').val();
119-
thingspeak['timezone'] = $('#timezone').val();
135+
thingspeak['timezone'] = $('#timezone').val() || 'Etc/UTC';
120136

121137
// save to local storage
122138
localStorage.setItem('thingspeak', JSON.stringify(thingspeak));
123139

124140
// clear output
125141
$('#header').html('');
142+
$('#description').html('');
126143
$('#output').html('');
127144

128145
}
@@ -183,6 +200,11 @@
183200
// set headers
184201
$('#header').html(data.channel.name + ' <a href="' + thingspeak['api'] + '" target="_blank"><span class="fas fa-external-link-alt"></span></a>');
185202

203+
// add channel description
204+
if (data.channel.description) {
205+
$('#description').html(data.channel.description);
206+
}
207+
186208
// create table head and body if they do not exist
187209
if ($('#output').find('thead').length == 0) {
188210

@@ -193,14 +215,30 @@
193215
$('#output').find('thead').append("<th>Update Time</th>");
194216

195217
// add header for each field
196-
if (data.channel.hasOwnProperty('field1')) { $('#output').find('thead').append("<th>Field 1</th>"); }
197-
if (data.channel.hasOwnProperty('field2')) { $('#output').find('thead').append("<th>Field 2</th>"); }
198-
if (data.channel.hasOwnProperty('field3')) { $('#output').find('thead').append("<th>Field 3</th>"); }
199-
if (data.channel.hasOwnProperty('field4')) { $('#output').find('thead').append("<th>Field 4</th>"); }
200-
if (data.channel.hasOwnProperty('field5')) { $('#output').find('thead').append("<th>Field 5</th>"); }
201-
if (data.channel.hasOwnProperty('field6')) { $('#output').find('thead').append("<th>Field 6</th>"); }
202-
if (data.channel.hasOwnProperty('field7')) { $('#output').find('thead').append("<th>Field 7</th>"); }
203-
if (data.channel.hasOwnProperty('field8')) { $('#output').find('thead').append("<th>Field 8</th>"); }
218+
if (data.channel.hasOwnProperty('field1')) {
219+
$('#output').find('thead').append("<th>Field 1 <br>" + data.channel.field1 + "</th>");
220+
}
221+
if (data.channel.hasOwnProperty('field2')) {
222+
$('#output').find('thead').append("<th>Field 2 <br>" + data.channel.field2 + "</th>");
223+
}
224+
if (data.channel.hasOwnProperty('field3')) {
225+
$('#output').find('thead').append("<th>Field 3 <br>" + data.channel.field3 + "</th>");
226+
}
227+
if (data.channel.hasOwnProperty('field4')) {
228+
$('#output').find('thead').append("<th>Field 4 <br>" + data.channel.field4 + "</th>");
229+
}
230+
if (data.channel.hasOwnProperty('field5')) {
231+
$('#output').find('thead').append("<th>Field 5 <br>" + data.channel.field5 + "</th>");
232+
}
233+
if (data.channel.hasOwnProperty('field6')) {
234+
$('#output').find('thead').append("<th>Field 6 <br>" + data.channel.field6 + "</th>");
235+
}
236+
if (data.channel.hasOwnProperty('field7')) {
237+
$('#output').find('thead').append("<th>Field 7 <br>" + data.channel.field7 + "</th>");
238+
}
239+
if (data.channel.hasOwnProperty('field8')) {
240+
$('#output').find('thead').append("<th>Field 8 <br>" + data.channel.field8 + "</th>");
241+
}
204242

205243
// add location fields if included
206244
if (thingspeak['location']) {
@@ -729,7 +767,7 @@ <h3 id="channels-header"></h3>
729767
<div class="col-lg-6">
730768
<div class="form-group">
731769
<label class="form-control-label">Timezone</label>
732-
<input type="text" class="form-control feed-form" id="timezone">
770+
<select class="form-control feed-form" id="timezone"></select>
733771
</div>
734772
</div>
735773
</div>
@@ -750,8 +788,10 @@ <h3 id="channels-header"></h3>
750788
</div>
751789
</div>
752790

753-
<div class="card-block">
791+
<div class="card-block" style="padding: 10px;">
754792
<h1 id="header"></h1>
793+
<p id="description"></p>
794+
<h3>Channel Data</h3>
755795

756796
<table class="table table-striped" id="output"></table>
757797
</div>

0 commit comments

Comments
 (0)