Feature/owm report mirrored

package.json

@@ -71,7 +71,7 @@
     "vue-material-design-icons": "^4.6.0",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0",
-    "vuex-persistedstate": "^2.7.1",
+    "vuex-persistedstate": "^4.1.0",
     "ws": "^7.3.0"
   },
   "devDependencies": {

src/components/InstrumentControls/Enclosure.vue

@@ -379,17 +379,7 @@
 
     <br>
 
-    <div style="margin-bottom: 1em;">
-      OWM Report
-      <pre>{{ owm_report }}</pre>
-    </div>
-
-    <div style="margin-bottom: 1em;">
-      <b-button @click="showOwmStatus">(alternate method) show OWM Status</b-button>
-    </div>
-    <b-modal v-model="owmModalVisible">
-      <pre>{{ owm_report }}</pre>
-    </b-modal>
+    <OWMReport />
 
     <div
       class="status-toggle-bar"
@@ -414,15 +404,16 @@ import { user_mixin } from '../../mixins/user_mixin'
 import CommandButton from '@/components/FormElements/CommandButton'
 import SimpleDeviceStatus from '@/components/status/SimpleDeviceStatus'
 import StatusVal from '@/components/status/StatusVal'
+import OWMReport from '@/components/status/OWMReport'
 import { mapGetters } from 'vuex'
-import axios from 'axios'
 export default {
   name: 'Enclosure',
   mixins: [commands_mixin, user_mixin],
   components: {
     CommandButton,
     StatusVal,
-    SimpleDeviceStatus
+    SimpleDeviceStatus,
+    OWMReport
   },
   data () {
     return {
@@ -453,22 +444,8 @@ export default {
       skyTempLimitDangerLevel: 90,
       lowestAmbientTemp: '',
       highestAmbientTemp: '',
-
-      owmModalVisible: false,
-      owm_report: '...loading...'
-    }
-  },
-
-  mounted () {
-    this.getOwmReport()
-  },
-  watch: {
-    '$route.params.sitecode' () {
-      this.owm_report = '...loading...'
-      this.getOwmReport()
     }
   },
-
   methods: {
     enclosure_force_roof_state (val) {
       return this.wema_base_command('enclosure', 'force_roof_state', '',
@@ -477,17 +454,6 @@ export default {
         }
       )
     },
-    getOwmReport () {
-      const endpoint = this.$store.state.api_endpoints.status_endpoint + '/' + this.wema_name + '/owm_report'
-      axios.get(endpoint).then(response => {
-        this.owm_report = JSON.parse(response.data.status.owm_report)
-      }).catch(() => {
-        this.owm_report = 'OWM report unavailable'
-      })
-    },
-    showOwmStatus () {
-      this.owmModalVisible = true
-    }
   },
 
   computed: {

src/components/sitepages/SiteHome.vue

@@ -52,6 +52,8 @@
     </div>
 
     <div style="height: 2em;" />
+
+    <OWMReport v-if="userIsAdmin" />
   </div>
 </template>
 
@@ -60,20 +62,25 @@ import { mapGetters } from 'vuex'
 import { commands_mixin } from '../../mixins/commands_mixin'
 import { user_mixin } from '../../mixins/user_mixin'
 import SiteEventsModal from '@/components/SiteEventsModal'
+import OWMReport from '@/components/status/OWMReport'
 
 export default {
   name: 'SiteHome',
   props: ['sitecode'],
   mixins: [commands_mixin, user_mixin],
   components: {
-    SiteEventsModal
+    SiteEventsModal,
+    OWMReport
   },
   computed: {
     ...mapGetters('site_config', [
       'site_latitude',
       'site_longitude',
       'site_name'
-    ])
+    ]),
+    userIsAdmin () {
+      return this.$store.state.user_data.userIsAdmin
+    }
   }
 }
 

src/components/status/OWMReport.vue

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <div style="margin-bottom: 1em;">
+      OWM Report
+      <pre>{{ owmReport }}</pre>
+    </div>
+
+    <div style="margin-bottom: 1em;">
+      <b-button @click="showOwmStatus">
+        (alternate method) show OWM Status
+      </b-button>
+    </div>
+    <b-modal v-model="owmModalVisible">
+      <pre>{{ owmReport }}</pre>
+    </b-modal>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'OWMReport',
+  data () {
+    return {
+      owmModalVisible: false,
+      owmReport: '...loading...'
+    }
+  },
+  computed: {
+    ...mapGetters('site_config', [
+      'wema_name'
+    ])
+  },
+  mounted () {
+    this.getOwmReport()
+  },
+  watch: {
+    '$route.params.sitecode' () {
+      this.owmReport = '...loading...'
+      this.getOwmReport()
+    }
+  },
+  methods: {
+    getOwmReport () {
+      this.$store.dispatch('sitestatus/getLatestOwmReport').then((res) => {
+        this.owmReport = this.$store.getters['sitestatus/owmReport']
+      })
+    },
+    showOwmStatus () {
+      this.owmModalVisible = true
+    }
+  }
+}
+</script>

src/store/index.js

@@ -16,12 +16,22 @@ import user_interface from './modules/user_interface'
 import uiSync from './modules/uiSync'
 
 import UiSyncPlugin from './plugins/ui_sync'
+import createPersistedState from 'vuex-persistedstate'
 
 Vue.use(Vuex)
 
+/**
+ * Todo: research more into other state variables could benefit from a persisted
+ * state and seperate into a module persisting this state to save api calls when page refreshes
+ */
+const dataState = createPersistedState({
+  paths: ['sitestatus.siteOwmReports']
+})
+
 const store = new Vuex.Store({
   plugins: [
-    UiSyncPlugin
+    UiSyncPlugin,
+    dataState
   ],
   modules: {
     site_config,

src/store/modules/sitestatus/index.js

@@ -17,6 +17,7 @@ import selector_getters from './getters/selector_getters'
 import wema_settings_getters from './getters/wema_settings_getters'
 import obs_settings_getters from './getters/obs_settings_getters'
 import accumulated_getters from './getters/accumulated_getters'
+import moment from 'moment'
 
 const hasKey = (obj, key) => { return Object.keys(obj).includes(key) }
 
@@ -30,7 +31,7 @@ const state = {
 
   weather: {},
   enclosure: {},
-
+  siteOwmReports: {},
   forecast: [],
 
   screen: {},
@@ -51,6 +52,12 @@ const getters = {
 
   site: state => state.site,
   now: state => state.now,
+  owmReport: (state, getters, rootState, rootGetters) => {
+    const wema_name = rootGetters['site_config/wema_name']
+    if (wema_name) {
+      return JSON.parse(state.siteOwmReports[wema_name].report)
+    }
+  },
 
   /**
    *  Site operational status:
@@ -267,6 +274,10 @@ const mutations = {
     state.obs_settings = status.obs_settings
   },
 
+  storeNewOwmReport (state, { wema_name, newReport, newTimestamp }) {
+    state.siteOwmReports[wema_name] = { report: newReport, timestamp: newTimestamp }
+  },
+
   status (state, status) {
     state.status = status
     const device_types = [
@@ -311,7 +322,6 @@ const mutations = {
 
     state.forecast = []
   }
-
 }
 
 const actions = {
@@ -403,6 +413,25 @@ const actions = {
     }
   },
 
+  getLatestOwmReport ({ commit, rootState, rootGetters, state }) {
+    const wema_name = rootGetters['site_config/wema_name']
+    if (wema_name) {
+      // request and store a new report if not cached or cached more than 1 hour ago
+      if (!(wema_name in state.siteOwmReports) || moment(state.siteOwmReports[wema_name].timestamp).isBefore(moment().subtract(1, 'hours'))) {
+        return new Promise((resolve, reject) => {
+          const url = rootState.api_endpoints.status_endpoint + `/${wema_name}/owm_report`
+          axios.get(url).then(response => {
+            commit('storeNewOwmReport', { wema_name, newReport: response.data.status.owm_report, newTimestamp: moment() })
+            resolve()
+          }).catch(e => {
+            console.log(e)
+            reject(e)
+          })
+        })
+      }
+    }
+  },
+
   // Reset to empty values. Used for sites without any status available.
   clearStatus ({ commit }) {
     // commit('status',empty_status)