Merge pull request #27 from hurricanemark/Phase2-BaselineToSeriousWorks

Phase2 baseline to serious works

Author: hurricanemark

index.js

@@ -31,8 +31,7 @@ app.get('/weatherbit', (req, res) => {
   // console.log('render get weatherbit:');
   // console.dir(req.params)
   // console.dir(req.body);
-  let apikey = encrypt(process.env.WEATHERBIT_KEY);
-  res.render('pages/weatherbit', { key: apikey });
+  res.render('pages/weatherbit');
 })
 
 // Posting data to the client-side requires two API calls.
@@ -181,7 +180,6 @@ function getWeatherBitAirQuality(city) {
 }
 
 
-
 /*
  * Return multiple promises consists of currentConditions and dailyForecast data.
  */
@@ -204,56 +202,12 @@ async function gatherWeatheBits(city) {
   }
 }
 
-// post weather data to the client-side
-app.post('/', (req, res) => {
-    // currentLoc();
-    // console.log(currentLoc);
-    // console.log("Lng: " + longitude + ", Lat: " + latitude);
-    console.dir(req.params);
-    console.dir(req.body);
-
-    return;
-    // call weatherAPI for data
-    let apiKey = process.env.WEATHER_VISUALCROSSING_API_KEY;
-    let city = req.body.locale;
-    let url = process.env.WEATHER_VISUALCROSSING_API_BASE_URI;
-
-    /*VISUALCROSSING_URI=https://weather.visualcrossing.com/VisualCrossingWebServices/rest/services/timeline/${city}?unitGroup=us&contentType=json&key=${apiKey} */
-    let uriStr = `${url}${city}?unitGroup=us&contentType=json&key=${apiKey}`;
-    // console.log(uriStr);
-    try {
-      request(uriStr, async function (err, response, body) {
-        console.log(response.statusCode);
-        
-        if (response.statusCode == 429) {
-          console.log("You have exceeded your API call limit with visualcrossing.com!");
-          res.render('index', { locale: city, status: response.statusCode, data: null,  error: "Visualcrossing API call limit exceeded." });
-        }
-        if (response.statusCode == 400) {
-          res.render('index', { locale: city, status: response.statusCode, data: null,  error: "Please check your input." });
-        } 
-        if (response.statusCode === 200) {
-          
-            let weather = await JSON.parse(body);
-            res.render('index', { locale: city, status: response.statusCode, data: weather, error: null });
-        } else {
-          res.render('index', { locale: city, status: response.statusCode, data: null, error: 'Error, please check your input.'});
-        }
-
-      });
-  
-    } catch (err) {
-      res.render('index', { locale: city, data: null, forecast: null, error: err.message });
-    }
-});
-
-
 // about page
 app.get('/about', function(req, res) {
     res.render('pages/about');
 });
 
-let port = process.env.PORT || 3210;
+let port = process.env.PORT || 3000;
 
 // creating a server that is listening on ${port} for connections.
 app.listen(port, () => {

public/Runtime.JPG

@@ -15,4 +15,17 @@ unixTsToLocalTime = (unix_ts) => {
     return hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
 }
 
+trendingTemperature = (dataArr) => {
+    var sum = 0;
+    for (var item of dataArr) {
+        sum += item.temp;
+    }
+    let average = sum / dataArr.length;
+    let diff = average - dataArr[0].temp;
+    if ( diff > 0 ) {
+        return "Warming trend ahead.";
+    } else {
+        return "Cooling trend ahead.";
+    }
+}
 %>

public/Runtime.PNG

@@ -10,7 +10,7 @@
   <header>
     <%- include('./../partials/header'); %>
   </header>
-  <main onload="">
+  <main>
     <br />
     <div>
       <fieldset>
@@ -36,23 +36,19 @@
                 <br />
                   <strong>Geolocation</strong>: <%= curData.lat %>, <%= curData.lon %>
                 <br />
-                <strong>Time zone: </strong>
-                <%= curData.timezone %>
+                  <strong>Datetime</strong>: <%= curData.ob_time %>
+                <br />
+                <strong>Time zone</strong>: <%= curData.timezone %>
                 <br />
                 <hr />
               </p>
               <table class="styled-table">
                 <tr class="active-row">
-                  <th>Datetime: </th>
+                  <th>Cloud cover(%): </th>
                   <td>
-                    <%= curData.ob_time %>
+                    <%= curData.clouds %>
                   </td>
                 </tr>
-                <th>Cloud cover(%): </th>
-                <td>
-                  <%= curData.clouds %>
-                </td>
-                </tr>
                 <th>Temperature(F): </th>
                 <td>
                   <%= curData.temp %>
@@ -197,11 +193,13 @@
     <div class="row">
       <div class="col-sm-12">
         <h5>Extended Forecast</h5>
+        
         <div class="jumbotron jumbotron-fluid" style="padding:10px 5px 15px 20px;">
           <% if( typeof(error)==="undefined" || foreStatus===400 ){ %>
             <p style="color:gray"> Waiting for data.</p>
             <% } else { %>
-              <table class="styled-table">
+              <div style="color:rgb(18, 83, 175);"><%= trendingTemperature(foreData.data) %></div>
+              <table class="styled-table" style="overflow-x: auto;">
                 <thead>
                   <tr class="w-35">
                     <th style="color:black;"> Date</th>
@@ -210,8 +208,7 @@
                     <th style="color:rgb(27, 119, 223);"> Temperature(°F) </th>
                     <th style="color:rgba(20, 15, 177, 0.474);"> Pressure(㎧)</th>
                     <th style="color:green;"> Humidity</th>
-                    <th style="color:rgb(198, 73, 15);"> Wind Speed</th>
-                    <th style="color:rgb(198, 15, 195);"> Wind Gust</th>
+                    <th style="color:rgb(198, 15, 195);"> Wind</th>
                     <th style="color:rgb(15, 22, 207);"> Cloud Cover(%)</th>
                     <th style="color:rgb(30, 140, 224);"> Visibility</th>
                     <th style="color:rgb(78, 122, 80);"> UV Index</th>
@@ -242,9 +239,6 @@
                         <td style="color:green;">
                           <%= forecast[i].rh %>
                         </td>
-                        <td style="color:rgb(198, 73, 15);">
-                          <%= forecast[i].wind_gust_spd %>
-                        </td>
                         <td style="color:rgb(198, 15, 195);">
                           <%= forecast[i].wind_gust_spd %> <%= forecast[i].wind_cdir %>
                         </td>

views/pages/utils.ejs

@@ -1,6 +1,6 @@
 <!-- This code contains copyright information and uses several classes from Bootstrap for styling. -->
 <p class="text-center text-muted" style="
-    position:fixed;
+
     bottom:0;
     left:20px;
    ">&copy; Copyright 2022 by The Awesome TechRolEmi</p>