Merge pull request #32 from hurricanemark/Phase2-BaselineToSeriousWorks

add style="overflow-x:auto; " to make forecast table responsive to resizing

Author: hurricanemark

public/sessionCaching.js

@@ -0,0 +1,52 @@
+function storageAvailable(type) {
+    let storage;
+    try {
+        storage = window[type];
+        const x = '__storage_test__';
+        storage.setItem(x, x);
+        storage.removeItem(x);
+        return true;
+    }
+    catch (e) {
+        return e instanceof DOMException && (
+            // everything except Firefox
+            e.code === 22 ||
+            // Firefox
+            e.code === 1014 ||
+            // test name field too, because code might not be present
+            // everything except Firefox
+            e.name === 'QuotaExceededError' ||
+            // Firefox
+            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
+            // acknowledge QuotaExceededError only if there's something already stored
+            (storage && storage.length !== 0);
+    }
+}
+
+function testStorage(methodString) {
+    let result = document.getElementById("test-caching");
+    if (storageAvailable(methodString)) {
+        
+        // Yippee! We can use localStorage awesomeness
+        // Save data to sessionStorage
+        sessionStorage.setItem("lw_name", "marcus");
+
+        // Get saved data from sessionStorage
+        let data = sessionStorage.getItem("lw_name");
+
+        // alert(methodString +' says my name is ' + data);
+        // Remove saved data from sessionStorage
+        sessionStorage.removeItem("lw_name");
+        result.innerHTML = "Test: " + methodString + " is enabled."
+    }
+    else {
+        // Too bad, no localStorage for us
+        // alert(methodString + ' says Web Storage API is disabled.');
+        result.innerHTML = "Test: " + methodString + ' says Web Storage API is disabled.';
+    }
+}
+
+
+
+testStorage('sessionStorage');
+testStorage('localStorage');

views/pages/utils.ejs

@@ -1,5 +1,8 @@
 <%
+const MOON = '🌙';
+const SUN = '☀️';
 
+// convert unix_timestamp to local datetime
 unixTsToLocalTime = (unix_ts) => {
     // Create a new JavaScript Date object based on the timestamp
     // multiplied by 1000 so that the argument is in milliseconds, not seconds.
@@ -32,4 +35,65 @@ trendingTemperature = (dataArr) => {
         else { return "Considerable warming trend ahead."; }
     }
 }
+
+// check if client allows saving session data
+storageAvailable = (type) => {
+    let storage;
+    try {
+        storage = window[type];
+        const x = '__storage_test__';
+        storage.setItem(x, x);
+        storage.removeItem(x);
+        return true;
+    }
+    catch (e) {
+        return e instanceof DOMException && (
+            // everything except Firefox
+            e.code === 22 ||
+            // Firefox
+            e.code === 1014 ||
+            // test name field too, because code might not be present
+            // everything except Firefox
+            e.name === 'QuotaExceededError' ||
+            // Firefox
+            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
+            // acknowledge QuotaExceededError only if there's something already stored
+            (storage && storage.length !== 0);
+    }
+}
+
+// save data to session memory client-side 
+saveClientData = (key, value) => {
+    if (storageAvailable(String)) {
+        // Yippee! We can use localStorage awesomeness
+        // Save data to sessionStorage
+        sessionStorage.setItem(key, value);
+
+        // Get saved data from sessionStorage
+        let data = sessionStorage.getItem(key);
+
+        alert(methodString +' says my data is ' + data);
+
+    }
+    else {
+        // Too bad, no localStorage for us
+        alert(methodString + ' says Web Storage API is disabled.')
+    }
+}
+
+// retrieve saved session data
+getClientData = (key) => {
+    if (storageAvailable(String)) {
+        return sessionStorage.getItem(key);
+    } else {
+        return null;
+    }
+}
+
+// delete session data
+deleteClientData = (key) => {
+    // Remove saved data from sessionStorage
+    sessionStorage.removeItem(key); 
+}
+
 %>

views/pages/weatherbit.ejs

@@ -32,6 +32,7 @@
           <% if( typeof(error)==="undefined" || curStatus===400 ){ %>
             <p style="color:gray"> Waiting for data.</p>
             <% } else { %>
+
               <p style="color:gray"><strong>City</strong>: <%= curData.city_name %> , <%= curData.state_code %>
                 <br />
                   <strong>Geolocation</strong>: <%= curData.lat %>, <%= curData.lon %>
@@ -190,16 +191,16 @@
     </div>
 
 
-    <div class="row">
+    <div class="row" style="display:flex; flex-flow:row wrap;">
       <div class="col-sm-12">
         <h5>Extended Forecast</h5>
 
-        <div class="jumbotron jumbotron-fluid" style="padding:10px 5px 15px 20px;">
+        <div class="jumbotron jumbotron-fluid"  style="padding:10px 5px 15px 20px; overflow-x:auto;">
           <% if( typeof(error)==="undefined" || foreStatus===400 ){ %>
             <p style="color:gray"> Waiting for data.</p>
             <% } else { %>
               <div style="color:rgb(18, 83, 175);"><%= trendingTemperature(foreData.data) %></div>
-              <table class="styled-table" style="overflow-x: auto;">
+              <table class="styled-table">
                 <thead>
                   <tr class="w-35">
                     <th style="color:black;"> Date</th>