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 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>

21
src/components/Chart.vue
View File

@@ -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;

7
src/components/NavBar.vue
View File

@@ -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

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)
}