Add WxData class, minimal data population, temporary icons from WATT

gulpfile.js

@@ -9,6 +9,8 @@ const uglify = require('gulp-uglify-es').default;
 gulp.task('js', function () {
   return gulp.src([
     'node_modules/moment/moment.js',
+    'src/js/WxData.js',
+    'src/js/main.js',
     'src/js/**/*.js'
   ])
       .pipe(concat('weatherscan.js'))

src/js/WxData.js

@@ -0,0 +1,114 @@
+let WxData = {
+
+  // Taken from https://digital.wsi.com/products/v3.1/developer_widgets.php?auth=public&country=US&language=en
+  API_BASE: "https://api.weather.com/v1",
+  API_KEY: "089ed4e892fb0dfdf34eb81e6f2521aa",
+
+  /**
+   * Data is saved in the form of data[location][record]
+   */
+  _data: {},
+
+  /**
+   *
+   * @param location
+   * @returns {Promise}
+   */
+  observations: function (location) {
+
+    if (this._data[location] && this._data[location]['observations']) {
+      return new Promise(resolve => resolve(this._data[location]['observations']));
+    }
+
+    return this._loadCurrentConditions(location);
+
+  },
+
+  _apiRequest: function (endpoint, callback) {
+    let self = this;
+    return new Promise(function (resolve, reject) {
+      let xhr = new XMLHttpRequest();
+      xhr.onload = function () {
+        if (this.status >= 200 && this.status < 300) {
+          resolve(xhr.response);
+        } else {
+          reject({
+            status: this.status,
+            statusText: xhr.statusText
+          });
+        }
+      };
+      xhr.onerror = function () {
+        reject({
+          status: this.status,
+          statusText: xhr.statusText
+        });
+      };
+      xhr.open('GET', self.API_BASE + endpoint + '?apiKey=' + self.API_KEY + '&language=en-US&units=e');
+      xhr.send();
+    });
+  },
+
+  /**
+   *
+   * @returns {Promise}
+   * @private
+   */
+  _loadCurrentConditions: function (location) {
+    let self = this;
+    return this._apiRequest('/location/' + location + '/observations.json').then(result => {
+      try {
+        let response = JSON.parse(result);
+        return self.saveRecord(location, 'observations', response.observation);
+      } catch (e) {
+        console.error('Error parsing current conditions');
+        return null;
+      }
+    });
+
+  },
+
+  saveRecord: function (location, type, data) {
+
+    if (typeof this._data !== 'object') {
+      this._data = {};
+    }
+
+    if (!this._data[location]) {
+      this._data[location] = {};
+    }
+
+    this._data[location][type] = data;
+    console.log('Saved ' + type + ' for ' + location);
+    this.saveCache();
+
+    return data;
+  },
+
+  init: function () {
+    this.loadCache();
+  },
+
+  /**
+   * Load data from localStorage
+   */
+  loadCache: function () {
+    try {
+      if (localStorage['wx_data']) {
+        this._data = JSON.parse(localStorage['wx_data']);
+        console.log('Data retrieved from cache');
+      }
+    } catch (e) {
+      console.error('Error parsing data from localStorage');
+    }
+  },
+
+  /**
+   * Save data to localStorage
+   */
+  saveCache: function () {
+    localStorage['wx_data'] = JSON.stringify(this._data);
+    console.log('Data saved in cache');
+  },
+
+};

src/js/main.js

@@ -0,0 +1,8 @@
+WxData.init();
+
+WxData.observations('USNY0483:1:US').then(data => {
+  document.getElementById('city').innerText = data.obs_name;
+  document.getElementById('current-temp').innerText = data.temp;
+  document.getElementById('current-info').innerText = data.wx_phrase;
+  document.getElementById('conditions-icon').src = '/images/watt-icons/icon' + data.wx_icon + '.png';
+});

src/scss/_clock.scss

@@ -1,10 +0,0 @@
-#clock {
-  font-family: 'Interstate Condensed';
-  font-size: 32px;
-  text-align: right;
-  position: absolute;
-  width: 455px;
-  top: 107px;
-  line-height: 38px;
-  letter-spacing: 1px;
-}

src/scss/_misc.scss

@@ -256,88 +256,6 @@ body {
   filter: drop-shadow(0px 2px 2px #000000);
 }
 
-#date-time,
-#city,
-#current-conditions *,
-#date-time * {
-  font-family: 'Interstate';
-  font-weight: bold;
-  text-shadow: none;
-  text-align: right;
-  color: #1B1B1B;
-}
-
-#date-time {
-  position: absolute;
-  top: 98px;
-  width: 457px;
-}
-
-#date-time * {
-  font-family: 'Interstate';
-  font-size: 25px;
-  line-height: 33px;
-}
-
-#time {
-  text-transform: lowercase;
-}
-
-#city {
-  font-size: 37px;
-  padding-top: 26px;
-  position: absolute;
-  text-align: left;
-  margin-left: 140px;
-  width: 311px;
-  height: 91px;
-  top: 284px;
-  left: 0;
-  line-height: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-#current-conditions {
-  font-family: 'Interstate';
-  position: absolute;
-  top: 376px;
-  left: 0;
-  width: 452px;
-  text-align: left;
-}
-
-#conditions-icon {
-  position: absolute;
-  left: 300px;
-  background-size: 100% 100%;
-  width: 144px;
-  height: 145px;
-  background-repeat: no-repeat;
-  top: 394px;
-  z-index: 0;
-}
-
-#now {
-  font-size: 49px;
-  margin: 1.6% 0 0 31%;
-  text-align: left;
-}
-
-#current-temp {
-  font-size: 70px;
-  margin: 4.4% 0 0 0;
-  text-align: center;
-  width: 100%;
-}
-
-#current-info {
-  font-size: 27px;
-  margin: 4.2% 0 0 31%;
-  text-align: left;
-  width: 66%;
-}
-
 #minimap-title {
   font-family: 'Interstate';
   font-weight: bold;
@@ -564,22 +482,6 @@ body {
   width: 66%
 }
 
-#logo-area {
-  position: absolute;
-  width: 31.528%;
-  height: 9.398%;
-  left: 0;
-  top: 83.4%;
-}
-
-#logo-area img {
-  display: block;
-  position: absolute;
-  width: 65%;
-  top: 19%;
-  right: 5%;
-}
-
 #arrow-img {
   display: block;
   position: absolute;

src/scss/_sidebar.scss

@@ -0,0 +1,90 @@
+#date-time,
+#city,
+#current-conditions * {
+  font-family: 'Interstate';
+  font-weight: bold;
+  text-shadow: none;
+  text-align: right;
+  color: #1B1B1B;
+}
+
+#city {
+  font-size: 37px;
+  padding-top: 26px;
+  position: absolute;
+  text-align: left;
+  margin-left: 140px;
+  width: 311px;
+  height: 91px;
+  top: 284px;
+  left: 0;
+  line-height: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+#current-conditions {
+  font-family: 'Interstate';
+  position: absolute;
+  top: 376px;
+  left: 0;
+  width: 452px;
+  text-align: left;
+}
+
+#conditions-icon {
+  position: absolute;
+  left: 300px;
+  background-size: 100% 100%;
+  width: 144px;
+  height: 145px;
+  background-repeat: no-repeat;
+  top: 394px;
+  z-index: 0;
+}
+
+#now {
+  font-size: 49px;
+  margin: 1.6% 0 0 31%;
+  text-align: left;
+}
+
+#current-temp {
+  font-size: 70px;
+  margin: 4.4% 0 0 0;
+  text-align: center;
+  width: 100%;
+}
+
+#current-info {
+  font-size: 27px;
+  margin: 4.2% 0 0 31%;
+  text-align: left;
+  width: 66%;
+}
+
+#clock {
+  font-family: 'Interstate Condensed';
+  font-size: 32px;
+  text-align: right;
+  position: absolute;
+  width: 455px;
+  top: 107px;
+  line-height: 38px;
+  letter-spacing: 1px;
+}
+
+#logo-area {
+  position: absolute;
+  width: 450px;
+  height: 105px;
+  left: 0;
+  top: 900px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#logo-area img {
+  width: 70%;
+}

src/scss/weatherscan.scss

@@ -1,4 +1,4 @@
 @import "fonts";
 @import "slides";
-@import "misc";
-@import "clock";
+@import "sidebar";
+@import "misc";

webroot/index.html

@@ -82,7 +82,7 @@
 
   <div id="city"></div>
 
-  <div id="conditions-icon"></div>
+  <img id="conditions-icon" />
 
   <div id="current-conditions">
     <div id="now">now</div>