marco/sensor-web-v2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

small updates

Browse Source
This commit is contained in:
Marco Crapts
2019-07-02 23:08:17 +02:00
parent 4cb28af2e5
commit 0e7fd8fe58
4 changed files with 22 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>DHT22</title> <title>dht22</title>
</head> </head>
<body> <body>
<noscript> <noscript>

21
src/components/Chart.vue
View File

@@ -3,8 +3,7 @@
<div class="loader-container" v-if="loading"> <div class="loader-container" v-if="loading">
<Loader></Loader> <Loader></Loader>
</div> </div>
<div v-else> <div class="chart" v-else>
<!-- <div>test</div> -->
<div ref="chart"></div> <div ref="chart"></div>
</div> </div>
</div> </div>
@@ -13,6 +12,7 @@
import Highcharts from 'highcharts' import Highcharts from 'highcharts'
import 'highcharts/css/highcharts.scss' import 'highcharts/css/highcharts.scss'
import Loader from '@/components/Loader' import Loader from '@/components/Loader'
import { capitalizeFirstLetter } from '@/utils/helpers'
Highcharts.setOptions({ Highcharts.setOptions({
time: { time: {
@@ -34,11 +34,15 @@ export default {
async fetchData() { async fetchData() {
if (this.window.label) { if (this.window.label) {
this.loading = true this.loading = true
const typeApi = {
temperatuur: 'temperature',
luchtvochtigheid: 'humidity'
}
try { try {
const [start, end] = [this.window.getStart(), this.window.getEnd()] const [start, end] = [this.window.getStart(), this.window.getEnd()]
const sample = Math.round(((end - start) / 60) / 288) || 1 const sample = Math.round(((end - start) / 60) / 288) || 1
const host = process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : '' 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) const response = await fetch(fetchUrl)
this.data = await response.json() this.data = await response.json()
this.loading = false this.loading = false
@@ -76,14 +80,14 @@ export default {
yAxis: { yAxis: {
labels: { labels: {
formatter() { formatter() {
const suffix = type === 'temperature' ? '°C' : '%' const suffix = type === 'temperatuur' ? '°C' : '%'
return this.value + suffix return this.value + suffix
} }
}, },
title: { enabled: false }, title: { enabled: false },
minTickInterval: 0.1 minTickInterval: 0.1
}, },
series: [{ name: type, data }], series: [{ name: capitalizeFirstLetter(type), data }],
credits: { enabled: false } credits: { enabled: false }
}) })
} }
@@ -104,17 +108,20 @@ export default {
<style lang="scss"> <style lang="scss">
@import "@/style/_variables.scss"; @import "@/style/_variables.scss";
.chart-container, .chart-container, .chart, .chart div {
.chart-container div {
// height: 100%; // height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
} }
.chart-container {
margin-bottom: 24px;
}
.loader-container { .loader-container {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%;
} }
.highcharts-graph { .highcharts-graph {
stroke-width: 3px; stroke-width: 3px;

7
src/components/NavBar.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<nav class="navbar is-primary" role="navigation" aria-label="main navigation"> <nav class="navbar is-primary" role="navigation" aria-label="main navigation">
<div class="navbar-brand"> <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 <a
role="button" role="button"
class="navbar-burger burger" class="navbar-burger burger"
@@ -31,6 +31,7 @@
</nav> </nav>
</template> </template>
<script> <script>
import { capitalizeFirstLetter } from '@/utils/helpers'
export default { export default {
props: ['activeType'], props: ['activeType'],
data() { data() {
@@ -40,7 +41,7 @@ export default {
}, },
computed: { computed: {
navTypes() { navTypes() {
return ['temperature', 'humidity'] return ['temperatuur', 'luchtvochtigheid']
} }
}, },
mounted() { mounted() {
@@ -53,7 +54,7 @@ export default {
this.toggled = !this.toggled this.toggled = !this.toggled
}, },
capitalizeFirstLetter(string) { capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1) return capitalizeFirstLetter(string)
}, },
setType(type) { setType(type) {
this.toggled = false this.toggled = false

3
src/utils/helpers.js Normal file
View File

@@ -0,0 +1,3 @@
export function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1)
}