Make Weather Page more useful for Network Monitoring [2/2]

client/package.json

@@ -10,33 +10,35 @@
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
   },
   "dependencies": {
-    "bulma": "^0.6.2",
+    "bulma": "^0.7.1",
     "chart.js": "^2.7.1",
     "chartjs-plugin-annotation": "^0.5.7",
-    "moment": "^2.20.1",
-    "serve-static": "^1.13.1",
+    "moment": "^2.22.1",
+    "serve-static": "^1.13.2",
     "suncalc": "^1.8.0",
     "vue": "^2.5.11",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1",
-    "weathericons": "^2.1.0"
+    "weathericons": "^2.1.0",
+    "node-sass": "^4.9.0"
   },
   "browserslist": [
     "> 1%",
     "last 2 versions",
     "not ie <= 8"
   ],
   "devDependencies": {
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
-    "babel-preset-env": "^1.6.0",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.4",
+    "babel-preset-env": "^1.7.0",
     "babel-preset-stage-3": "^6.24.1",
-    "cross-env": "^5.0.5",
-    "css-loader": "^0.28.7",
-    "eslint": "^4.15.0",
-    "eslint-plugin-html": "^4.0.1",
+    "cross-env": "^5.1.6",
+    "css-loader": "^0.28.11",
+    "eslint": "^4.19.0",
+    "request": "^2.87.0",
+    "eslint-plugin-html": "^4.0.3",
     "file-loader": "^1.1.4",
-    "node-sass": "^4.5.3",
+    "hawk": "^7.0.7",
     "sass-loader": "^6.0.6",
     "vue-loader": "^13.0.5",
     "vue-template-compiler": "^2.4.4",

client/src/App.vue

@@ -1,14 +1,14 @@
 <template>
   <div id="app">
     <section class="section">
-      <div class="container">
+      <div class="container is-fluid is-marginless">
         <div class="columns">
-          <div class="column is-one-quarter">
+          <div class="column is-one-fifth-desktop is-one-half-tablet">
             <div class="fixed">
               <WeatherNav/>
             </div>
           </div>
-          <div class="column">
+          <div class="column is-three-fourths-desktop">
             <router-view/>
           </div>
         </div>
@@ -26,8 +26,10 @@
 <style lang="scss">
   @media screen and (min-width: 1224px){
   .fixed {
-      position: fixed;
-      width: 19rem;
+
+    width: 95%;
+    padding-right: 5px;
+    resize: both
     }
   }
 </style>

client/src/components/NavItem.vue

@@ -1,6 +1,7 @@
 <template>
 <div class="navitem">
   <div class="columns level mini-info">
+    <div class="column status is-one-fifth"> {{site_status}} </div>
     <div class="column place is-two-thirds">
       {{site.name}} {{ site.country }}
     </div>
@@ -19,7 +20,7 @@
   import moment from 'moment';
   export default {
     name: 'NavItem',
-    props: ['site'],
+    props: ['site', 'site_status'],
     computed: {
       mapimg(){
         return require(`../assets/maps/${this.site.code}.png`); // eslint-disable-line no-undef
@@ -39,6 +40,7 @@
     display: none;
   }
   .mini-info {
-    margin-right: 0rem;
+    margin-right: 3rem;
+    padding-right: 3rem;
   }
 </style>

client/src/components/Site.vue

@@ -18,59 +18,59 @@
 
     <div>
       <p class="level-heading heading">Current Values</p>
-      <nav class="level">
+      <nav class="level is-mobile">
         <div class="level-item has-text-centered">
           <div>
             <p class="heading">Air Temp &deg;C</p>
-            <p class="title">{{ datums['Weather Air Temperature Value'].data | latestVal }}</p>
+            <p class="title">{{ this.$options.filters.latestResult(datums['Weather Air Temperature Value'].data, 'Value') }}</p>
           </div>
         </div>
         <div class="level-item has-text-centered">
           <div>
             <p class="heading">Pressure mbar</p>
-            <p class="title">{{ datums['Weather Barometric Pressure Value'].data | latestVal }}</p>
+            <p class="title">{{ this.$options.filters.latestResult(datums['Weather Barometric Pressure Value'].data, 'Value') }}</p>
           </div>
         </div>
       <div class="level-item has-text-centered">
         <div>
           <p class="heading">Dewpoint &deg;C</p>
-          <p class="title">{{ datums['Weather Dew Point Value'].data | latestVal }}</p>
+          <p class="title">{{ this.$options.filters.latestResult(datums['Weather Dew Point Value'].data, 'Value') }}</p>
         </div>
       </div>
       <div class="level-item has-text-centered">
           <div>
             <p class="heading">Humidity %</p>
-            <p class="title">{{ datums['Weather Humidity Value'].data | latestVal }}</p>
+            <p class="title">{{ this.$options.filters.latestResult(datums['Weather Humidity Value'].data, 'Value') }}</p>
           </div>
         </div>
         <div class="level-item has-text-centered">
           <div>
-            <p class="heading">Wind meters per sec</p>
-            <p class="title">{{ datums['Weather Wind Speed Value'].data | latestVal }}</p>
+            <p class="heading">Wind meters/second</p>
+            <p class="title">{{ this.$options.filters.latestResult(datums['Weather Wind Speed Value'].data, 'Value') }}</p>
           </div>
         </div>
         <div class="level-item has-text-centered">
           <div>
             <p class="heading">Wind &deg;E of N</p>
-            <p class="title">{{ datums['Weather Wind Direction Value'].data | latestVal }}&deg;</p>
+            <p class="title">{{ this.$options.filters.latestResult(datums['Weather Wind Direction Value'].data, 'Value') }}&deg;</p>
           </div>
         </div>
         <div class="level-item has-text-centered">
           <div>
             <p class="heading">Brightness mag/arcsec<sup>^</sup>2</p>
-            <p class="title">{{ datums['Weather Sky Brightness Value'].data | latestVal }}</p>
+            <p class="title">{{ this.$options.filters.latestResult(datums['Weather Sky Brightness Value'].data, 'Value') }}</p>
           </div>
         </div>
         <div class="level-item has-text-centered">
           <div>
             <p class="heading">Sky Transparency %</p>
-            <p class="title">{{ datums['Boltwood Transparency Measure'].data | latestVal }}</p>
+            <p class="title">{{ this.$options.filters.latestResult(datums['Boltwood Transparency Measure'].data, 'Value') }}</p>
           </div>
         </div>
         <div class="level-item has-text-centered">
           <div>
             <p class="heading">Sky Temp &deg;C</p>
-            <p class="title">{{ datums['Boltwood Sky Minus Ambient Temperature'].data | latestVal }}</p>
+            <p class="title">{{ this.$options.filters.latestResult(datums['Boltwood Sky Minus Ambient Temperature'].data, 'Value') }}</p>
           </div>
         </div>
       </nav>
@@ -85,7 +85,8 @@
       </h4>
 
       <figure class="image">
-        <Timeline datumid="oktoopen" :suntimes="suntTimes" :timezone="site.tz" datumname="Weather Ok To Open" :cdata="datums['Weather Ok To Open'].data"></Timeline>
+        <Timeline datumid="oktoopen" :suntimes="suntTimes" :timezone="site.tz" datumname="Weather Ok To Open" :cdata="datums['Weather Ok To Open'].data"
+                  :fdata="datums['Weather Failure Reason'].data"></Timeline>
       </figure>
     </section>
 
@@ -96,7 +97,7 @@
       <figure class="image">
           <TimeChart datumid="airtemp" datumname="Air Temperature" unit="C"
                      :cdata="datums['Weather Air Temperature Value'].data"
-                     :limit="limit('Weather Air Temperature Value')">
+                     :limit="limit('Weather Air Temperature Value')" limit_direction="min">
            </TimeChart>
       </figure>
     </section>
@@ -120,7 +121,7 @@
       <figure class="image">
           <TimeChart datumid="transparency" datumname="Boltwood Transparency Measure" unit="%"
                     :cdata="datums['Boltwood Transparency Measure'].data"
-                    :limit="limit('Boltwood Transparency Measure')">
+                    :limit="limit('Boltwood Transparency Measure')" limit_direction="min">
           </TimeChart>
       </figure>
     </section>
@@ -151,12 +152,12 @@
 
     <section class="section section-xsmall">
       <h4 class="is-size-4">Air temperature minus dewpoint
-        <a class="helptoggle is-pulled-right"><sup><small>?</small></sup></a><span class="help is-pulled-right">Dew Point measured by device telemetry.</span>
+        <a class="helptoggle is-pulled-right"><sup><small>?</small></sup></a><span class="help is-pulled-right">Absolute value of difference between Dew Point and Air Temperature.</span>
       </h4>
       <figure class="image">
         <TimeChart datumid="ATminusDP" datumname="Air Temperature minus Dewpoint" unit="C"
-                   :cdata="datumDifference(datums['Weather Air Temperature Value'].data, datums['Weather Dew Point Value'].data)"
-                   :limit="2">
+                   :cdata="datumDifference(datums['Weather Dew Point Value'].data, datums['Weather Air Temperature Value'].data)"
+                   :limit="2" limit_direction="min">
         </TimeChart>
       </figure>
     </section>
@@ -198,8 +199,6 @@
       </figure>
     </section>
 
-
-
   </div>
 </template>
 <script>
@@ -277,7 +276,7 @@ export default {
         'Boltwood Transparency Measure': {
           data: [],
           limit: {
-            default: null
+
           }
         },
 
@@ -297,7 +296,7 @@ export default {
         'Boltwood Transparency Close Threshold': {
           data: [],
           limit: {
-            default: null
+
           }
         }
       }
@@ -357,7 +356,7 @@ export default {
 
       if (datumName == 'Boltwood Transparency Measure')
       { // this datum has a dynamically changing threshold
-          let latest_value = this.$options.filters.latestVal(this.datums['Boltwood Transparency Close Threshold'].data);
+        let latest_value = this.$options.filters.latestResult(this.datums['Boltwood Transparency Close Threshold'].data, 'Value');
           return latest_value;
       }
 
@@ -403,7 +402,7 @@ export default {
       return suntimes_array;
 
 
-    }, // TODO: Rename these to last_sunrise/sunset
+    },
     sunrise(){
       // get last sunrise
       return moment.utc((this.suntTimes.slice(-1)[0].sunrise));
@@ -426,27 +425,26 @@ export default {
   },
 
   filters: {
-    // TODO: Refactor all of the LATEST filters
-    latestVal(values){
-      if (!values || values.length < 1) return 0;
-      let val = values[values.length - 1].Value;
-      return val.toFixed(1);
-    },
-    // needed for string values?
-    latestMsg(messages)
+    latestResult(values, property)
     {
-      if (!messages || messages.length < 1)
+      /**
+       * @param values - an array of values to parse, must contain a property name that matches the property parameter
+       * @param property - the property you wish to extract, either 'Value' or 'ValueString'
+       */
+
+      if (property === 'Value')
       {
-        return '';
+         if (!values || values.length < 1) return 0;
+         let val = values[values.length - 1][property];
+         return val.toFixed(1);
       }
 
-      else{
-        return messages[messages.length - 1].ValueString;
+      else if (property === 'ValueString')
+      {
+        if (!values || values.length < 1 ) return '';
+        return values[values.length -1][property];
       }
-    },
-    parseMsg(msg)
-    {
-      return ((msg === "None" || msg === "Unknown") ? "Open" : msg);
+
     },
 
     cardinal(val){
@@ -479,7 +477,7 @@ export default {
 <style lang="scss">
   .help {
     display: none;
-    margin-right: 20px;
+    margin-right: 0px;
   }
   .helptoggle:hover + .help {
     display: inline;

client/src/components/TimeChart.vue

@@ -7,7 +7,7 @@ import 'chartjs-plugin-annotation';
 import moment from 'moment';
 export default {
   name: 'Timechart',
-  props: ['cdata', 'datumid', 'datumname', 'unit', 'limit', 'max'],
+  props: ['cdata', 'datumid', 'datumname', 'unit', 'limit', 'max', 'limit_direction'],
   computed: {
     chartData(){
       if(!this.cdata) return [];
@@ -62,17 +62,26 @@ export default {
           backgroundColor: '#009ec367',
           label: that.datumname,
           data: that.chartData,
-          cubicInterpolationMode: 'monotone'
+          cubicInterpolationMode: 'monotone',
+          spanGaps: true
         }]
       },
       options: {
+        responsive: true,
         annotation:{
           annotations:[{
+            label:
+              {
+                enabled: true,
+                position: 'left',
+                content: (this.limit_direction === 'min') ? 'minimum' : '',
+                yAdjust: -10,
+              },
             type: 'line',
             mode: 'horizontal',
             scaleID: 'y-axis-0',
             value: this.limit,
-            borderColor: 'red'
+            borderColor: (this.limit_direction === 'min') ? 'green': 'red'
           }]
         },
         legend: {