Skip to content

Commit 9da8ff4

Browse files
aescleveraesclever
committed
modified: .gitignore
 modified: crypto.js modified: index.js new file: public/utils.ejs -- function for unix-timestamp to local timestamp modified: views/pages/weatherbit.ejs
1 parent 3dac0a4 commit 9da8ff4

File tree

5 files changed

+95
-55
lines changed

5 files changed

+95
-55
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,5 @@ node_modules
33
public/ePub
44
views/header2.ejs
55
index-temp.ejs
6+
utils.js
7+
public/AirQIdx_Guide.png

‎crypto.js‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,21 @@ const decrypt = (data) => {
88
return CryptoJS.enc.Base64.parse(data).toString(CryptoJS.enc.Utf8);
99
};
1010

11+
const toLocalDt = (unix_ts) => {
12+
// Create a new JavaScript Date object based on the timestamp
13+
// multiplied by 1000 so that the argument is in milliseconds, not seconds.
14+
var date = new Date(unix_ts * 1000);
15+
// Hours part from the timestamp
16+
var hours = date.getHours();
17+
// Minutes part from the timestamp
18+
var minutes = "0" + date.getMinutes();
19+
// Seconds part from the timestamp
20+
var seconds = "0" + date.getSeconds();
21+
22+
// Will display time in 10:30:23 format
23+
return hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
24+
}
25+
1126
function test() {
1227
let enStr = encrypt("e88e1a8096cd4897b79b230a9c49b243");
1328
console.log("Encrypted Key: " + enStr);
@@ -16,4 +31,4 @@ function test() {
1631
}
1732

1833
// test();
19-
export {encrypt, decrypt};
34+
export {encrypt, decrypt, toLocalDt};

‎index.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ dotenv.config()
33
import request from 'request';
44
import express from 'express';
55
import bodyParser from 'body-parser';
6-
import {encrypt, decrypt} from './crypto.js'
6+
import {encrypt, decrypt} from './crypto.js';
7+
78

89
// Create network routing
910
const app = express();
@@ -31,7 +32,7 @@ app.get('/weatherbit', (req, res) => {
3132
// console.dir(req.params)
3233
// console.dir(req.body);
3334
let apikey = encrypt(process.env.WEATHERBIT_KEY);
34-
res.render('pages/weatherbit', { key: apikey});
35+
res.render('pages/weatherbit', { key: apikey });
3536
})
3637

3738
// Posting data to the client-side requires two API calls.

‎public/utils.ejs‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<%
2+
3+
unixTsToLocalTime = (unix_ts) => {
4+
// Create a new JavaScript Date object based on the timestamp
5+
// multiplied by 1000 so that the argument is in milliseconds, not seconds.
6+
var date = new Date(unix_ts * 1000);
7+
// Hours part from the timestamp
8+
var hours = date.getHours();
9+
// Minutes part from the timestamp
10+
var minutes = "0" + date.getMinutes();
11+
// Seconds part from the timestamp
12+
var seconds = "0" + date.getSeconds();
13+
14+
// Will display time in 10:30:23 format
15+
return hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
16+
}
17+
18+
%>

‎views/pages/weatherbit.ejs‎

Lines changed: 56 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,14 @@
33

44
<head>
55
<%- include('./../partials/head'); %>
6+
<%- include ('./../../public/utils'); %>
67
</head>
78

89
<body class="container">
910
<header>
1011
<%- include('./../partials/header'); %>
1112
</header>
12-
<main>
13+
<main onload="">
1314
<br />
1415
<div>
1516
<fieldset>
@@ -27,7 +28,7 @@
2728
<div class="row">
2829
<div class="col-sm-6">
2930
<h5>Current Conditions</h5>
30-
<div class="jumbotron jumbotron-fluid">
31+
<div class="jumbotron jumbotron-fluid" style="padding:10px 5px 15px 20px;">
3132
<% if( typeof(error)==="undefined" || curStatus===400 ){ %>
3233
<p style="color:gray"> Waiting for data.</p>
3334
<% } else { %>
@@ -62,7 +63,7 @@
6263
<%= curData.app_temp %>
6364
</td>
6465
</tr>
65-
<th>Relative humidity (%): </th>
66+
<th>Relative humidity(%): </th>
6667
<td>
6768
<%= curData.rh %>
6869
</td>
@@ -84,12 +85,7 @@
8485
</tr>
8586
<th>Wind Speed(m/s): </th>
8687
<td>
87-
<%= curData.wind_spd %>
88-
</td>
89-
</tr>
90-
<th>Wind Direction: </th>
91-
<td>
92-
<%= curData.wind_cdir_full %>
88+
<%= curData.wind_spd %> <%= curData.wind_cdir_full %>
9389
</td>
9490
</tr>
9591
<th>Snowfall(mm/hr): </th>
@@ -121,27 +117,38 @@
121117
122118
<% } %>
123119
</div>
120+
<br />
124121
</div>
125122

126123

127124

128125
<div class="col-sm-6">
129126
<h5>Current Air Quality</h5>
130-
<div class="jumbotron jumbotron-fluid">
127+
<div class="jumbotron jumbotron-fluid" style="padding:10px 5px 15px 20px;">
131128
<% if( typeof(error)==="undefined" || airqStatus===400 ) { %>
132129
<p style="color:gray"> Waiting for data.</p>
133130
<% } else { %>
134131
<p style="color:gray"><strong>Local hourly</strong>: <%= airqData.timestamp_local.split('T')[1] %>
135-
<br />
132+
136133
137134
</p>
138135
<hr />
139136
<table class="styled-table">
140137
<tr>
141138
<th>Air Quality Index: </th>
142-
<td>
143-
<%= airqData.aqi %>
144-
</td>
139+
<% if (airqData.aqi <= 50) { %>
140+
<td style="color:green;"> <%= airqData.aqi %> (Good)</td>
141+
<% } else if (airqData.api >= 51 && airqData.api <= 100) { %>
142+
<td style="color:yellow;"> <%= airqData.aqi %> (Moderate)</td>
143+
<% } else if (airqData.api >= 101 && airqData.api <= 150) { %>
144+
<td style="color:brown;"> <%= airqData.aqi %> (Sensitive to Alergy)</td>
145+
<% } else if (airqData.api >= 151 && airqData.api <= 200) { %>
146+
<td style="color:red;"> <%= airqData.aqi %> (Unhealthy)</td>
147+
<% } else if (airqData.api >= 201 && airqData.api <= 300) { %>
148+
<td style="color:purple;"> <%= airqData.aqi %> (Very unhealthy)</td>
149+
<% } else if (airqData.api >= 301) { %>
150+
<td style="color:rgb(50, 6, 6);"> <%= airqData.aqi %> (Hazardous)</td>
151+
<% } %>
145152
</tr>
146153
<tr>
147154
<th>O3 Concentration(µg/m³): </th>
@@ -190,76 +197,70 @@
190197
<div class="row">
191198
<div class="col-sm-12">
192199
<h5>Extended Forecast</h5>
193-
<div class="jumbotron jumbotron-fluid">
200+
<div class="jumbotron jumbotron-fluid" style="padding:10px 5px 15px 20px;">
194201
<% if( typeof(error)==="undefined" || foreStatus===400 ){ %>
195202
<p style="color:gray"> Waiting for data.</p>
196203
<% } else { %>
197204
<table class="styled-table">
198205
<thead>
199206
<tr class="w-35">
200-
<th>Date</th>
201-
<th>Condition</th>
202-
<th>Max/Min Temperature</th>
203-
<th>Temperature(F)</th>
204-
<th>Pressure</th>
205-
<th>Humidity</th>
206-
<th>Wind Gust</th>
207-
<th>Wind Speed</th>
208-
<th>Wind Direction</th>
209-
<th>Cloud Cover</th>
210-
<th>Visibility</th>
211-
<th>UV Index</th>
212-
<th>Sunrise/Sunset</th>
213-
<th>Moonphase</th>
207+
<th style="color:black;"> Date</th>
208+
<th style="color:rgb(27, 142, 191);"> Condition</th>
209+
<th style="color:rgb(41, 27, 191);"> Max/Min Temperature(°F)</th>
210+
<th style="color:rgb(27, 119, 223);"> Temperature(°F) </th>
211+
<th style="color:rgba(20, 15, 177, 0.474);"> Pressure(㎧)</th>
212+
<th style="color:green;"> Humidity</th>
213+
<th style="color:rgb(198, 73, 15);"> Wind Speed</th>
214+
<th style="color:rgb(198, 15, 195);"> Wind Gust</th>
215+
<th style="color:rgb(15, 22, 207);"> Cloud Cover(%)</th>
216+
<th style="color:rgb(30, 140, 224);"> Visibility</th>
217+
<th style="color:rgb(78, 122, 80);"> UV Index</th>
218+
<th style="color:rgb(165, 58, 58);"> Sunrise/Sunset</th>
219+
<th style="color:rgb(32, 24, 24);"> Moonphase</th>
214220
</tr>
215221
</thead>
222+
216223
<% let forecast=foreData.data; %>
217224
<% for (let i=0; i < forecast.length; i++) { %>
218225
<tbody>
219226
<tr class="active-row">
220-
<td>
227+
<td style="color:black;">
221228
<%= forecast[i].datetime %>
222229
</td>
223-
<td>
230+
<td style="color:rgb(27, 142, 191);">
224231
<%= forecast[i].weather.description %>
225232
</td>
226-
<td>
227-
<%= forecast[i].app_max_temp %> , <%= forecast[i].app_min_temp %>
233+
<td style="color:rgb(41, 27, 191);">
234+
<%= forecast[i].app_max_temp %>/<%= forecast[i].app_min_temp %>
228235
</td>
229-
<td>
236+
<td style="color:rgb(27, 119, 223);">
230237
<%= forecast[i].temp %>
231238
</td>
232-
<td>
233-
<%= forecast[i].slp %>
239+
<td style="color:rgb(15, 22, 207);">
240+
<%= forecast[i].pres %>
234241
</td>
235-
<td>
242+
<td style="color:green;">
236243
<%= forecast[i].rh %>
237244
</td>
238-
<td>
239-
<%= forecast[i].windgust %>
240-
</td>
241-
<td>
242-
<%= forecast[i].wind_spd %>
243-
</td>
244-
<td>
245+
<td style="color:rgb(198, 73, 15);">
245246
<%= forecast[i].wind_gust_spd %>
246247
</td>
247-
<td>
248-
<%= forecast[i].wind_cdir_full %>
248+
<td style="color:rgb(198, 15, 195);">
249+
<%= forecast[i].wind_gust_spd %> <%= forecast[i].wind_cdir %>
249250
</td>
250-
<td>
251+
<td style="color:rgb(15, 22, 207);">
251252
<%= forecast[i].clouds %>
252253
</td>
253-
<td>
254+
<td style="color:rgb(30, 140, 224);">
254255
<%= forecast[i].vis %>
255256
</td>
256-
<td>
257+
<td style="color:rgb(78, 122, 80);">
257258
<%= forecast[i].uv %>
258259
</td>
259-
<td>
260-
<%= forecast[i].sunrise_ts %> , <%= forecast[i].sunset_ts %>
260+
<td style="color:rgb(165, 58, 58);">
261+
<%= unixTsToLocalTime(forecast[i].sunrise_ts) %> / <%= unixTsToLocalTime(forecast[i].sunset_ts) %>
261262
</td>
262-
<td>
263+
<td style="color:rgb(32, 24, 24);">
263264
<%= forecast[i].moon_phase_lunation %>
264265
</td>
265266
</tr>
@@ -274,6 +275,9 @@
274275
<% let longi, lati = "" %>
275276
<script>
276277
let longi, lati = "";
278+
279+
280+
277281
function getGeoLocation() {
278282
279283
// Store the element where the page displays the result

0 commit comments

Comments
 (0)