From 0e7fd8fe5802e5459c217b9adc5669652d21feac Mon Sep 17 00:00:00 2001
From: Marco Crapts <mcrapts@gmail.com>
Date: Tue, 2 Jul 2019 23:08:17 +0200
Subject: [PATCH] small updates

---
 public/index.html         |  2 +-
 src/components/Chart.vue  | 21 ++++++++++++++-------
 src/components/NavBar.vue |  7 ++++---
 src/utils/helpers.js      |  3 +++
 4 files changed, 22 insertions(+), 11 deletions(-)
 create mode 100644 src/utils/helpers.js
diff --git a/public/index.html b/public/index.html
index 0a21c35..c430e8a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>DHT22</title>
+    <title>dht22</title>
   </head>
   <body>
     <noscript>
diff --git a/src/components/Chart.vue b/src/components/Chart.vue
index c3fe235..a1f4f47 100644
--- a/src/components/Chart.vue
+++ b/src/components/Chart.vue
@@ -3,8 +3,7 @@
     <div class="loader-container" v-if="loading">
       <Loader></Loader>
     </div>
-    <div v-else>
-      <!-- <div>test</div> -->
+    <div class="chart" v-else>
       <div ref="chart"></div>
     </div>
   </div>
@@ -13,6 +12,7 @@
 import Highcharts from 'highcharts'
 import 'highcharts/css/highcharts.scss'
 import Loader from '@/components/Loader'
+import { capitalizeFirstLetter } from '@/utils/helpers'
 
 Highcharts.setOptions({
   time: {
@@ -34,11 +34,15 @@ export default {
     async fetchData() {
       if (this.window.label) {
         this.loading = 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 host = process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : ''
-          const fetchUrl = `${host}/type/${this.type}/startDate/${start}/endDate/${end}/sample/${sample}`
+          const fetchUrl = `${host}/type/${typeApi[this.type]}/startDate/${start}/endDate/${end}/sample/${sample}`
           const response = await fetch(fetchUrl)
           this.data = await response.json()
           this.loading = false
@@ -76,14 +80,14 @@ export default {
         yAxis: {
           labels: {
             formatter() {
-              const suffix = type === 'temperature' ? '°C' : '%'
+              const suffix = type === 'temperatuur' ? '°C' : '%'
               return this.value + suffix
             }
           },
           title: { enabled: false },
           minTickInterval: 0.1
         },
-        series: [{ name: type, data }],
+        series: [{ name: capitalizeFirstLetter(type), data }],
         credits: { enabled: false }
       })
     }
@@ -104,17 +108,20 @@ export default {
 
 <style lang="scss">
 @import "@/style/_variables.scss";
-.chart-container,
-.chart-container div {
+.chart-container, .chart, .chart div {
   // height: 100%;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
 }
+.chart-container {
+  margin-bottom: 24px;
+}
 .loader-container {
   display: flex;
   align-items: center;
   justify-content: center;
+  height: 100%;
 }
 .highcharts-graph {
   stroke-width: 3px;
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 98779f1..9396259 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -1,7 +1,7 @@
 <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>
+      <router-link to="/" class="navbar-item nav-title">dht22</router-link>
       <a
         role="button"
         class="navbar-burger burger"
@@ -31,6 +31,7 @@
   </nav>
 </template>
 <script>
+import { capitalizeFirstLetter } from '@/utils/helpers'
 export default {
   props: ['activeType'],
   data() {
@@ -40,7 +41,7 @@ export default {
   },
   computed: {
     navTypes() {
-      return ['temperature', 'humidity']
+      return ['temperatuur', 'luchtvochtigheid']
     }
   },
   mounted() {
@@ -53,7 +54,7 @@ export default {
       this.toggled = !this.toggled
     },
     capitalizeFirstLetter(string) {
-      return string.charAt(0).toUpperCase() + string.slice(1)
+      return capitalizeFirstLetter(string)
     },
     setType(type) {
       this.toggled = false
diff --git a/src/utils/helpers.js b/src/utils/helpers.js
new file mode 100644
index 0000000..982510e
--- /dev/null
+++ b/src/utils/helpers.js
@@ -0,0 +1,3 @@
+export function capitalizeFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1)
+}
