Merge pull request #563 from bmesuere/feature/wbgt-frontend

Add WBGT data to the frontend

dashboard/src/app/weatherProperties.ts

@@ -38,6 +38,14 @@ const weatherProperties = {
     icon: 'mdi-water-percent',
     title: 'Luchtvochtigheid op dit moment',
     unit: '%'
+  },
+  wbgt: {
+    property: 'wbgt',
+    name: 'Gevoelstemperatuur (WBGT)',
+    legend: 'Gevoelstemperatuur (°C)',
+    icon: 'mdi-thermometer-lines',
+    title: 'Gevoelstemperatuur (WBGT) op dit moment',
+    unit: '°C'
   }
 };
 

dashboard/src/components/GraphCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card :loading="loading">
+  <v-card :loading="loading" v-show="hasData">
     <v-list-item two-line>
       <v-list-item-content>
         <v-list-item-title class="mb-1">{{ weatherProperty.name }}</v-list-item-title>
@@ -46,10 +46,18 @@ export default class GraphCard extends Vue {
     return this.graphId || 'weather_graph_' + this.weatherProperty.property;
   }
 
-  get tooltipI () {
+  get tooltipI (): number {
     return this.tooltipPosition.i;
   }
 
+  get hasData (): boolean {
+    if (this.weatherProperty.property === 'wbgt') {
+      // return this.selectedStations.some(s => s.hasWbgt);
+      return this.selectedStations.some(s => s.name === 'vlinder02');
+    }
+    return true;
+  }
+
   // when measurements are updated, we have to manually update the D3 map
   @Watch('measurements')
   measurementsChanged () {

dashboard/src/components/StationCard.vue

@@ -53,7 +53,7 @@
     </v-list-item>
 
     <v-list dense subheader>
-      <v-list-item v-for="p in weatherProperties" :key="p.property">
+      <v-list-item v-for="p in activeProperties" :key="p.property">
         <v-list-item-subtitle :title="p.name"><v-icon class='pr-1'>{{ p.icon }}</v-icon> {{ p.name }}</v-list-item-subtitle>
         <v-list-item-title class="text-right">{{ measurements['status'] == "Offline" ? "-" : measurements[p.property] }} {{ p.unit }}</v-list-item-title>
       </v-list-item>
@@ -66,15 +66,13 @@
 import { Vue, Component, Prop } from 'vue-property-decorator';
 import LandUseGraph from './LandUseGraph.vue';
 
-import { Station, Measurement } from '../app/types';
+import { Station, Measurement, WeatherProperty } from '../app/types';
 import { weatherProperties as wp } from '../app/weatherProperties';
 
 @Component({ components: { LandUseGraph } })
 export default class StationCard extends Vue {
   @Prop() station!: Station;
 
-  weatherProperties = wp;
-
   removeFromList ():void {
     this.$gtag.event('station_deselect', { event_category: 'stations', value: this.station.id });
     this.$store.dispatch('deselectStationById', this.station.id);
@@ -91,6 +89,13 @@ export default class StationCard extends Vue {
   get measurements (): Measurement | {} {
     return (this.$store.state.liveMeasurements as Measurement[]).find(m => m.id === this.station.id) || {};
   }
+
+  get activeProperties (): WeatherProperty[] {
+    // filter the properties where the measurement is null
+    return Object.values(wp)
+      // @ts-ignore
+      .filter((p: WeatherProperty) => this.measurements[p.property as any] !== null);
+  }
 }
 </script>
 

dashboard/src/components/TooltipCard.vue

@@ -20,7 +20,7 @@
 
     <v-list subheader class="px-2">
       <v-row dense>
-      <v-col cols="6" class="pa-0" v-for="p in weatherProperties" :key="p.property">
+      <v-col cols="6" class="pa-0" v-for="p in activeProperties" :key="p.property">
         <v-list-item dense class="px-2" style="min-height: 36px;">
             <v-list-item-subtitle :title="p.name"><v-icon class='pr-1'>{{ p.icon }}</v-icon> {{ measurements['status'] == "Offline" ? "-" : measurements[p.property] }} {{ p.unit }}</v-list-item-subtitle>
         </v-list-item>
@@ -33,17 +33,22 @@
 
 <script lang="ts">
 import { Vue, Component, Prop } from 'vue-property-decorator';
-import { Station, Measurement } from '../app/types';
+import { Station, Measurement, WeatherProperty } from '../app/types';
 import { weatherProperties as wp } from '../app/weatherProperties';
 
 @Component
 export default class TooltipCard extends Vue {
   @Prop() station!: Station;
 
-  weatherProperties = wp;
-
   get measurements (): Measurement | {} {
     return (this.$store.state.liveMeasurements as Measurement[]).find(m => m.id === this.station.id) || {};
   }
+
+  get activeProperties (): WeatherProperty[] {
+    // filter the properties where the measurement is null
+    return Object.values(wp)
+      // @ts-ignore
+      .filter((p: WeatherProperty) => this.measurements[p.property as any] !== null);
+  }
 }
 </script>

dashboard/src/views/Dashboard.vue

@@ -40,6 +40,9 @@
       <v-col cols="12" md="6" lg="4" >
         <GraphCard :weatherProperty="weatherProperties.humidity" :tooltipPosition="tooltipPosition"/>
       </v-col>
+      <v-col cols="12" md="6" lg="4" >
+        <GraphCard :weatherProperty="weatherProperties.wbgt" :tooltipPosition="tooltipPosition"/>
+      </v-col>
     </v-row>
   </v-container>
 </template>