Merge branch 'master' of gitlab.com:mcrapts/sensor-web-v2

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": false,
+  "arrowParens": "always",
+  "singleQuote": true,
+  "printWidth": 120,
+  "trailingComma": "none"
+}

Dockerfile

@@ -3,5 +3,5 @@ WORKDIR /app
 COPY package*.json ./
 RUN npm install
 COPY . .
-RUN npm run build
+RUN npm run build --modern
 CMD ["node", "server"]

package.json

@@ -13,22 +13,21 @@
     "express": "^4.17.1",
     "highcharts": "^7.1.2",
     "mongodb": "^3.2.7",
-    "vue": "^2.6.10",
-    "vue-router": "^3.0.3",
-    "vuex": "^3.0.1"
+    "vue": "^3.0.3",
+    "vue-router": "^4.0.0-rc.5"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.8.0",
-    "@vue/cli-plugin-eslint": "^3.8.0",
-    "@vue/cli-service": "^3.8.0",
+    "@vue/cli-plugin-babel": "^4.5.4",
+    "@vue/cli-plugin-eslint": "^4.5.4",
+    "@vue/cli-service": "^4.5.4",
+    "@vue/compiler-sfc": "^3.0.3",
     "@vue/eslint-config-standard": "^4.0.0",
-    "babel-eslint": "^10.0.1",
+    "babel-eslint": "^10.1.0",
     "bulma": "^0.7.5",
-    "eslint": "^5.16.0",
-    "eslint-plugin-vue": "^5.0.0",
-    "node-sass": "^4.9.0",
-    "sass-loader": "^7.1.0",
-    "vue-template-compiler": "^2.6.10"
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^7.1.0",
+    "node-sass": "^4.12.0",
+    "sass-loader": "^8.0.2"
   },
   "eslintConfig": {
     "root": true,
@@ -36,7 +35,7 @@
       "node": true
     },
     "extends": [
-      "plugin:vue/essential",
+      "plugin:vue/vue3-essential",
       "@vue/standard"
     ],
     "rules": {

src/App.vue

@@ -1,68 +1,3 @@
 <template>
-  <div id="app">
-    <NavBar :activeType="type" @setType="setType"></NavBar>
-    <section class="section">
-      <TimeWindows :activeWindow="window" @setWindow="setWindow"></TimeWindows>
-      <Chart :window="window" :type="type"></Chart>
-    </section>
-  </div>
+  <router-view></router-view>
 </template>
-<script>
-import NavBar from '@/components/NavBar'
-import TimeWindows from '@/components/TimeWindows'
-import Chart from '@/components/Chart'
-export default {
-  components: {
-    NavBar,
-    TimeWindows,
-    Chart
-  },
-  data() {
-    return {
-      type: null,
-      window: {}
-    }
-  },
-  created() {
-    const { type, window } = this.$route.params
-    if (type) this.type = type
-    if (window) this.window = window
-  },
-  methods: {
-    setType(type) {
-      this.type = type
-      this.updateRoute()
-    },
-    setWindow(window) {
-      this.window = window
-      this.updateRoute()
-    },
-    updateRoute() {
-      if (this.type) {
-        this.$router.push({
-          name: 'view',
-          params: {
-            type: this.type,
-            window: this.window.label ? this.window.label.replace(' ', '-') : undefined
-          }
-        })
-      }
-    }
-  }
-}
-</script>
-<style scoped>
-#app {
-  height: 100%;
-}
-#app,
-.section {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-}
-.section {
-  padding-bottom: 0;
-  padding-top: 0;
-}
-</style>

src/components/Chart.vue

@@ -1,10 +1,11 @@
 <template>
   <div class="chart-container">
     <Loader v-if="loading"></Loader>
-    <div class="chart" ref="chart" v-else></div>
+    <div class="chart" id="chart" ref="chart" v-else></div>
   </div>
 </template>
 <script>
+import { ref, watch, toRefs, nextTick } from 'vue'
 import Highcharts from 'highcharts'
 import 'highcharts/css/highcharts.scss'
 import Loader from '@/components/Loader'
@@ -20,46 +21,39 @@ export default {
   components: {
     Loader
   },
-  data() {
-    return {
-      data: [],
-      loading: false
-    }
-  },
-  methods: {
-    async fetchData() {
-      if (this.window.label) {
-        this.loading = true
+  setup(props) {
+    const data = ref([])
+    const loading = ref(false)
+    const chart = ref(null)
+    const { window, type } = toRefs(props)
+
+    const fetchData = async () => {
+      if (window.value && type.value) {
+        loading.value = true
         const typeApi = {
           temperatuur: 'temperature',
           luchtvochtigheid: 'humidity'
         }
         try {
-          const [start, end] = [this.window.getStart(), this.window.getEnd()]
-          const sample = Math.round(((end - start) / 60) / 288) || 1
+          const [start, end] = [window.value.getStart(), window.value.getEnd()]
+          const sample = Math.round((end - start) / 60 / 288) || 1
           const host = process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : ''
-          const fetchUrl = `${host}/type/${typeApi[this.type]}/startDate/${start}/endDate/${end}/sample/${sample}`
+          const fetchUrl = `${host}/type/${typeApi[type.value]}/startDate/${start}/endDate/${end}/sample/${sample}`
           const response = await fetch(fetchUrl)
-          this.data = await response.json()
-          this.loading = false
+          data.value = await response.json()
+          loading.value = false
         } catch (err) {
           console.log(err)
         }
       }
-    },
-    renderChart() {
-      const type = this.type
-      const data = this.data.map(({ date, value }) => ({ x: date * 1000, y: value }))
-      Highcharts.chart(this.$refs.chart, {
+    }
+    const renderChart = () => {
+      const chartData = data.value.map(({ date, value }) => ({ x: date * 1000, y: value }))
+      Highcharts.chart(chart.value, {
         chart: { styledMode: true, marginBottom: 25 },
         title: { text: '' },
         legend: { enabled: false },
-        plotOptions: {
-          series: {
-            animation: false,
-            marker: { enabled: false }
-          }
-        },
+        plotOptions: { series: { animation: false, marker: { enabled: false } } },
         xAxis: {
           type: 'datetime',
           dateTimeLabelFormats: {
@@ -69,41 +63,42 @@ export default {
             hour: '%H:%M',
             day: '%a %e %b',
             week: '%e %b',
-            month: '%b \'%y',
+            month: "%b '%y",
             year: '%Y'
           }
         },
         yAxis: {
           labels: {
             formatter() {
-              const suffix = type === 'temperatuur' ? '°C' : '%'
+              const suffix = type.value === 'temperatuur' ? '°C' : '%'
               return this.value + suffix
             }
           },
           title: { enabled: false },
           minTickInterval: 0.1
         },
-        series: [{ name: capitalizeFirstLetter(type), data }],
+        series: [{ name: capitalizeFirstLetter(type.value), data: chartData }],
         credits: { enabled: false }
       })
     }
-  },
-  watch: {
-    window() {
-      this.fetchData()
-    },
-    type() {
-      this.fetchData()
-    },
-    data() {
-      this.$nextTick(() => this.renderChart())
+    watch([window, type], ([newWindow, newType], [oldWindow, oldType]) => {
+      if (newWindow !== oldWindow || newType !== oldType) {
+        fetchData()
+      }
+    })
+    watch(data, () => {
+      nextTick(() => renderChart())
+    })
+    return {
+      loading,
+      chart
     }
   }
 }
 </script>
 
 <style lang="scss">
-@import "@/style/_variables.scss";
+@import '@/style/_variables.scss';
 .chart-container {
   display: flex;
   flex-direction: column;

src/components/Main.vue

@@ -0,0 +1,74 @@
+<template>
+  <div id="app">
+    <NavBar :activeType="type" @set-type="setType"></NavBar>
+    <section class="section">
+      <TimeWindows :activeWindow="window" @set-window="setWindow"></TimeWindows>
+      <Chart :window="window" :type="type"></Chart>
+    </section>
+    <router-view></router-view>
+  </div>
+</template>
+<script>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import NavBar from '@/components/NavBar'
+import TimeWindows from '@/components/TimeWindows'
+import Chart from '@/components/Chart'
+export default {
+  components: {
+    NavBar,
+    TimeWindows,
+    Chart
+  },
+  setup() {
+    const type = ref(null)
+    const window = ref({})
+    const router = useRouter()
+    const currentRoute = router.currentRoute
+    if (currentRoute.value.params.type) type.value = currentRoute.value.params.type
+    if (currentRoute.value.params.window) window.value = { label: currentRoute.value.params.window }
+    console.log(type.value, window.value)
+    const updateRoute = () => {
+      if (type.value) {
+        const route = {
+          name: 'view',
+          params: {
+            type: type.value,
+            window: window.value.label ? window.value.label.replace(' ', '-') : undefined
+          }
+        }
+        router.push(route)
+      }
+    }
+    const setType = (newType) => {
+      type.value = newType
+      updateRoute()
+    }
+    const setWindow = (newWindow) => {
+      window.value = newWindow
+      updateRoute()
+    }
+    return {
+      type,
+      window,
+      setType,
+      setWindow
+    }
+  }
+}
+</script>
+<style scoped>
+#app {
+  height: 100%;
+}
+#app,
+.section {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+.section {
+  padding-bottom: 0;
+  padding-top: 0;
+}
+</style>

src/components/NavBar.vue

@@ -8,7 +8,7 @@
         aria-label="menu"
         aria-expanded="false"
         data-target="navbarBasicExample"
-        :class="{'is-active': toggled}"
+        :class="{ 'is-active': toggled }"
         @click="toggleMenu"
       >
         <span aria-hidden="true"></span>
@@ -17,60 +17,58 @@
       </a>
     </div>
 
-    <div class="navbar-menu" :class="{'is-active': toggled}">
+    <div class="navbar-menu" :class="{ 'is-active': toggled }">
       <div class="navbar-start">
         <a
           class="navbar-item"
-          :class="{'is-active': type === activeType}"
+          :class="{ 'is-active': type === activeType }"
           :key="type"
           v-for="type in navTypes"
           @click="setType(type)"
-        >{{capitalizeFirstLetter(type)}}</a>
+          >{{ capitalizeFirstLetter(type) }}</a
+        >
       </div>
     </div>
   </nav>
 </template>
 <script>
+import { ref, onMounted } from 'vue'
 import { capitalizeFirstLetter } from '@/utils/helpers'
 export default {
   props: ['activeType'],
-  data() {
+  setup(props, { emit }) {
+    const toggled = ref(false)
+    const navTypes = ref(['temperatuur', 'luchtvochtigheid'])
+    onMounted(() => {
+      if (!props.activeType) {
+        emit('set-type', navTypes.value[0])
+      }
+    })
+    const toggleMenu = () => {
+      toggled.value = !toggled.value
+    }
+    const setType = (type) => {
+      toggled.value = false
+      emit('set-type', type)
+    }
     return {
-      toggled: false
-    }
-  },
-  computed: {
-    navTypes() {
-      return ['temperatuur', 'luchtvochtigheid']
-    }
-  },
-  mounted() {
-    if (!this.activeType) {
-      this.$emit('setType', this.navTypes[0])
-    }
-  },
-  methods: {
-    toggleMenu() {
-      this.toggled = !this.toggled
-    },
-    capitalizeFirstLetter(string) {
-      return capitalizeFirstLetter(string)
-    },
-    setType(type) {
-      this.toggled = false
-      this.$emit('setType', type)
+      capitalizeFirstLetter,
+      navTypes,
+      toggled,
+      toggleMenu,
+      setType
     }
   }
 }
 </script>
 <style scoped lang="scss">
-@import "@/style/_variables.scss";
+@import '@/style/_variables.scss';
 .nav-title {
   font-weight: bold;
 }
 @media screen and (max-width: $navbar-breakpoint) {
   .navbar {
-    position: relative
+    position: relative;
   }
   .navbar-menu {
     position: absolute;

src/components/TimeWindows.vue

@@ -4,75 +4,83 @@
       <li
         v-for="window in windows"
         :key="window.label"
-        @click="$emit('setWindow', window)"
-        :class="{'is-active': window.label === activeWindow.label}"
+        @click="$emit('set-window', window)"
+        :class="{ 'is-active': window.label === activeWindow.label }"
       >
-        <a>{{window.label}}</a>
+        <a>{{ window.label }}</a>
       </li>
     </ul>
   </div>
 </template>
 <script>
+import { ref, onMounted } from 'vue'
 import dayjs from 'dayjs'
 export default {
   props: {
     activeWindow: {
-      type: [Object, String]
+      type: Object
     }
   },
-  data() {
-    return {
-      windows: [{
+  setup(props, { emit }) {
+    const windows = ref([
+      {
         label: 'afgelopen uur',
         getStart: () => dayjs().subtract(1, 'hour').unix(),
         getEnd: () => dayjs().unix(),
         format: 'HH:mm',
         interval: 4
-      }, {
+      },
+      {
         label: '24 uur',
         getStart: () => dayjs().subtract(1, 'days').unix(),
         getEnd: () => dayjs().unix(),
         format: 'HH:mm',
         interval: 4
-      }, {
+      },
+      {
         label: 'vandaag',
         getStart: () => dayjs().startOf('day').add(1, 'day').subtract(24, 'hours').unix(),
         getEnd: () => dayjs().unix(),
         format: 'HH:mm',
         interval: 4
-      }, {
+      },
+      {
         label: '3 dagen',
         getStart: () => dayjs().startOf('day').add(1, 'day').subtract(3, 'days').unix(),
         getEnd: () => dayjs().unix(),
         format: 'ddd D/M',
         interval: 24
-      }, {
+      },
+      {
         label: 'week',
         getStart: () => dayjs().startOf('day').add(1, 'day').subtract(7, 'days').unix(),
         getEnd: () => dayjs().unix(),
         format: 'ddd D/M',
         interval: 24
-      }, {
+      },
+      {
         label: 'maand',
         getStart: () => dayjs().startOf('day').add(1, 'day').subtract(1, 'months').unix(),
         getEnd: () => dayjs().unix(),
         format: 'ddd D/M',
         interval: 24
-      }, {
+      },
+      {
         label: 'jaar',
         getStart: () => dayjs().startOf('day').add(1, 'day').subtract(1, 'year').unix(),
         getEnd: () => dayjs().unix(),
         format: 'ddd D/M',
         interval: 24 * 7
-      }]
-    }
-  },
-  mounted() {
-    if (typeof this.activeWindow === 'string') {
-      const window = this.windows.find(w => w.label === this.activeWindow.replace('-', ' '))
-      this.$emit('setWindow', window)
-    } else if (!this.activeWindow.label) {
-      this.$emit('setWindow', this.windows[1])
+      }
+    ])
+    onMounted(() => {
+      const activeWindow = !props.activeWindow.label
+        ? windows.value[1]
+        : windows.value.find((w) => w.label === props.activeWindow.label.replace('-', ' '))
+      emit('set-window', activeWindow)
+    })
+    return {
+      windows
     }
   }
 }

src/main.js

@@ -1,13 +1,8 @@
-import Vue from 'vue'
+import { createApp } from 'vue'
 import App from '@/App'
 import router from '@/router'
-import store from '@/store'
 import '@/style/style.scss'
 
-Vue.config.productionTip = false
-
-new Vue({
-  router,
-  store,
-  render: h => h(App)
-}).$mount('#app')
+const app = createApp(App)
+app.use(router)
+app.mount('body')

src/router.js

@@ -1,15 +1,13 @@
-import Vue from 'vue'
-import Router from 'vue-router'
-
-Vue.use(Router)
-
-export default new Router({
-  mode: 'history',
+import { createRouter, createWebHistory } from 'vue-router'
+import Main from '@/components/Main'
+export default createRouter({
+  history: createWebHistory(),
   base: process.env.BASE_URL,
   routes: [
     {
-      path: '/:type/:window?',
-      name: 'view'
+      path: '/:type?/:window?',
+      name: 'view',
+      component: Main
     }
   ]
 })

src/store.js

@@ -1,16 +0,0 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
-
-Vue.use(Vuex)
-
-export default new Vuex.Store({
-  state: {
-
-  },
-  mutations: {
-
-  },
-  actions: {
-
-  }
-})