Skip to content

Commit 206df84

Browse files
hurricanemarkhurricanemark
authored
Merge pull request #24 from hurricanemark/Phase2-BaselineToSeriousWorks
Phase2 baseline to serious works
2 parents 0b8f6a4 + 9da8ff4 commit 206df84

File tree

6 files changed

+100
-57
lines changed

6 files changed

+100
-57
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

‎README.md‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -108,9 +108,12 @@ It is a typical NodeJS project layout.
108108

109109
<strong> Generate A Docker Image</strong>
110110

111-
Build a docker image base on the given Dockerfile and .dockerignore is this folder. After successful docker build, run the image to verify correctness. Then it can be pushed to dockerhub or your favorite cloud provider.
111+
If you pulled or cloned this code base, replace my dockerhub username 'marknre' with your own DockerHub's username.
112+
Using the correct DockerHub username ensures error free `docker push` operation.
112113

113-
The Docker container is built and saved to current working directory. Replace tag name 'hurricanemark' with your own github username.
114+
Build a docker image base on the given Dockerfile and .dockerignore is this folder.
115+
After successful docker build, run the image to verify correctness.
116+
Then it can be pushed to dockerhub or your favorite cloud provider.
114117

115118
`docker build -t marknre/techrolemiweatherapp:2.0 .`
116119

‎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)