first commit

src/App.vue

@@ -1,29 +1,35 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
-    <router-view/>
+    <NavBar :activeType="type" @setType="setType"></NavBar>
+    <section class="section">
+      <TimeWindows :activeWindow="window" @setWindow="setWindow" ></TimeWindows>
+      <Chart :window="window" :type="type"></Chart>
+    </section>
   </div>
 </template>
-
-<style lang="scss">
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-#nav {
-  padding: 30px;
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-    &.router-link-exact-active {
-      color: #42b983;
+<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: {},
+      window: {}
+    }
+  },
+  methods: {
+    setType(type) {
+      this.type = type
+    },
+    setWindow(window) {
+      this.window = window
     }
   }
 }
-</style>
+</script>

src/components/Chart.vue

@@ -0,0 +1,43 @@
+<template>
+  <div ref="chart">chart</div>
+</template>
+<script>
+export default {
+  props: ['window', 'type'],
+  data() {
+    return {
+      data: []
+    }
+  },
+  methods: {
+    async fetchData() {
+      if (this.window.label) {
+        try {
+          const [start, end] = [this.window.getStart(), this.window.getEnd()]
+          const sample = Math.round(((end - start) / 60) / 288) || 1
+          const host = 'http://localhost:3000'
+          const fetchUrl = `${host}/type/${this.type}/startDate/${start}/endDate/${end}/sample/${sample}`
+          const response = await fetch(fetchUrl)
+          this.data = await response.json()
+        } catch (err) {
+          console.log(err)
+        }
+      }
+    },
+    renderChart() {
+      console.log('render chart', this.data)
+    }
+  },
+  watch: {
+    window() {
+      this.fetchData()
+    },
+    type() {
+      this.fetchData()
+    },
+    data() {
+      this.renderChart()
+    }
+  }
+}
+</script>

src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/NavBar.vue

@@ -0,0 +1,65 @@
+<template>
+  <nav class="navbar is-primary" role="navigation" aria-label="main navigation">
+    <div class="navbar-brand">
+      <router-link to="/" class="navbar-item nav-title">DHT22</router-link>
+      <a
+        role="button"
+        class="navbar-burger burger"
+        aria-label="menu"
+        aria-expanded="false"
+        data-target="navbarBasicExample"
+        :class="{'is-active': toggled}"
+        @click="toggleMenu"
+      >
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+      </a>
+    </div>
+
+    <div class="navbar-menu" :class="{'is-active': toggled}">
+      <div class="navbar-start">
+        <a
+          class="navbar-item"
+          :class="{'is-active': type === activeType}"
+          :key="type"
+          v-for="type in navTypes"
+          @click="$emit('setType', type)"
+        >{{capitalizeFirstLetter(type)}}</a>
+      </div>
+    </div>
+  </nav>
+</template>
+<script>
+export default {
+  props: ['activeType'],
+  data() {
+    return {
+      toggled: false
+    }
+  },
+  computed: {
+    navTypes() {
+      return ['temperature', 'humidity']
+    }
+  },
+  mounted() {
+    if (!this.activeType.label) {
+      this.$emit('setType', this.navTypes[0])
+    }
+  },
+  methods: {
+    toggleMenu() {
+      this.toggled = !this.toggled
+    },
+    capitalizeFirstLetter(string) {
+      return string.charAt(0).toUpperCase() + string.slice(1)
+    }
+  }
+}
+</script>
+<style scoped>
+.nav-title {
+  font-weight: bold;
+}
+</style>

src/components/TimeWindows.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="tabs is-centered">
+    <ul>
+      <li
+        v-for="window in windows"
+        :key="window.label"
+        @click="$emit('setWindow', window)"
+        :class="{'is-active': window.label === activeWindow.label}"
+      >
+        <a>{{window.label}}</a>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+import dayjs from 'dayjs'
+export default {
+  props: ['activeWindow'],
+  data() {
+    return {
+      windows: [{
+        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 (!this.activeWindow.label) {
+      this.$emit('setWindow', this.windows[1])
+    }
+  }
+}
+</script>

src/main.js

@@ -1,7 +1,8 @@
 import Vue from 'vue'
-import App from './App.vue'
-import router from './router'
-import store from './store'
+import App from '@/App'
+import router from '@/router'
+import store from '@/store'
+import '@/style.scss'
 
 Vue.config.productionTip = false
 

src/router.js

@@ -1,6 +1,5 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import Home from './views/Home.vue'
 
 Vue.use(Router)
 
@@ -9,17 +8,8 @@ export default new Router({
   base: process.env.BASE_URL,
   routes: [
     {
-      path: '/',
-      name: 'home',
-      component: Home
-    },
-    {
-      path: '/about',
-      name: 'about',
-      // route level code-splitting
-      // this generates a separate chunk (about.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
+      path: '/:type/:window?',
+      name: 'view'
     }
   ]
 })

src/style.scss

@@ -0,0 +1,2 @@
+@charset "utf-8";
+@import "~bulma/bulma";

src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/Home.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
-export default {
-  name: 'home',
-  components: {
-    HelloWorld
-  }
-}
-</script>