legend update

frontend/App.vue

 <template>
-  <!--  -->
-  <v-app>
-    <div class="main">
-    <WeatherMap id="weathermap"></WeatherMap>
-    <Legend id="legend"></Legend>
-    </div>
-  </v-app>
+    <v-app>
+      <div class="main">
+        <WeatherMap></WeatherMap>
+      </div>
+    </v-app>
   
 </template>
 
 <style scoped>
     .main {
-        width:  100%;
-        height: 100%;
-    }
-    #legend{
-      width:20%;
-      height:inherit;
-      position:relative;
-      float:left;
-    }
-    #weathermap{
-      width:80%;
-      height:inherit;
-      position:relative;
-      float:left;
+      width:  100%;
+      height: 100%;
     }
 </style>
 
 <script lang="ts">
 import { Component, Vue} from 'vue-property-decorator';
-import 'ol/ol.css';
 import WeatherMap from './src/WeatherMap.vue';
-import Legend from './src/Legend.vue';
 
 @Component({
-    components: {WeatherMap, Legend}
+    components: {WeatherMap}
 })
 export default class App extends Vue{
     name: 'App'

frontend/index.html

@@ -4,7 +4,8 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >
     <title>Temperatures in Germany</title>
-    
+    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
     <style>
       html, body {
         margin: 0;

frontend/index.js

@@ -2,6 +2,21 @@ import Vue from 'vue';
 import vuetify from './src/plugins/vuetify';
 import App from './App.vue';
 
+/* document.addEventListener("DOMContentLoaded", function(){
+    let elApp = document.createElement('div')
+    elApp.innerHTML = '<div></div>'
+    elApp.id = 'my-app'
+
+    document.body.appendChild(elApp)
+
+    new Vue({
+        render: h => h(App),
+        el: elApp.firstChild,
+    })
+
+  
+    
+  }) */
 
 //new Vue({ render: createElement => createElement(App) }).$mount('#app');
-new Vue({vuetify, render: createElement => createElement(App)}).$mount('#app')
\ No newline at end of file
+new Vue({vuetify,render: createElement => createElement(App)}).$mount('#app')
\ No newline at end of file

frontend/package.json

@@ -10,23 +10,36 @@
     "core-js": "^3.18.0",
     "d3": "^7.0.3",
     "ol": "^6.6.1",
+    "public": "^0.1.5",
     "vue": "^2.6.14",
     "vue-class-component": "^7.2.6",
+    "vue-cli-plugin-vuetify": "^2.4.2",
     "vue-decorator": "^1.1.3",
     "vue-hot-reload-api": "^2.3.4",
     "vue-property-decorator": "^9.1.2",
-    "vuetify": "^2.5.8"
+    "vuetify": "^2.5.8",
+    "vuetify-loader": "^1.7.3"
   },
   "devDependencies": {
     "@types/d3": "^7.0.0",
     "@vue/component-compiler-utils": "^3.2.2",
     "parcel": "^2.0.0-rc.0",
     "parcel-bundler": "^1.12.5",
+    "parcel-plugin-static-files-copy": "^2.6.0",
     "regenerator-runtime": "^0.13.9",
+    "sass": "~1.32",
     "typescript": "^4.4.3",
     "vue-template-compiler": "^2.6.14"
   },
   "browserslist": [
     "last 2 Chrome versions"
-  ]
+  ],
+  "staticFiles": {
+    "staticPath": [
+      {
+        "staticPath": "public",
+        "staticOutDir": "public/"
+      }
+    ]
+  }
 }

frontend/src/Legend.vue

 <template>
     
     <div>
-        <p class="font-weight-black">
-            Legend
+        <p class="text-xl-h5 ">
+            Legende
         </p>
-        <v-card>
+         <v-card  class="ma-1">
             <v-card-text>
-                <p class="font-weight-medium">
-                Durchschnittstemperatur Layer 1:
-                </p>
-                <v-range-slider
-                    v-model="range0"
+                
+                <v-checkbox
+                    v-model="stationLayer"
+                    label="Wetterstationen:"
+                    hide-details
+                    @change="layerChanged('stationLayer')"
+                    dense
+                ></v-checkbox>
+                <v-slider
+                    width="50px"
+                    v-model="stationYear"
                     step="1"
                     :min="daterange[0]"
                     :max="daterange[1]"
                     thumb-label="always"
                     style="margin-top:3em"
+                    dense
+                    @change="$emit('stationa', $event)"
+                >
+                </v-slider>
+            </v-card-text>
+        </v-card>
+        <v-card  class="ma-1">
+            <v-card-text>
+                <v-checkbox
+                    v-model="layer1"
+                    label="Durchschnittstemperatur Layer 1:"
+                    hide-details
+                    @change="layerChanged('layer1')"
+                    dense
+                ></v-checkbox>
+                <div ref="legendTemperature1" id="legendTemperature1"></div>
+                <v-range-slider
+                    v-model="range1"
+                    step="1"
+                    :min="daterange[0]"
+                    :max="daterange[1]"
+                    thumb-label="always"
+                    style="margin-top:1em;width:90%;margin-left:20px;"
+                    dense
                 >
                 </v-range-slider>
             </v-card-text>
         </v-card>
         
-        <v-card style="margin-top:10px;">
+        <v-card class="ma-1">
             <v-card-text>
-                <p class="font-weight-medium">
-                    Durchschnittstemperatur Layer 1:
-                </p>
                 <v-checkbox
-                    v-model="checkbox"
-                    :label="`Checkbox 1: ${checkbox.toString()}`"
+                    v-model="layer2"
+                    label="Durchschnittstemperatur Layer 2:"
+                    hide-details
+                    @change="layerChanged('layer2')"
+                    dense
                 ></v-checkbox>
+                <div ref="legendTemperature2" id="legendTemperature2"></div>
                 <v-range-slider
-                    v-model="range1"
+                    v-model="range2"
                     step="1"
                     :min="daterange[0]"
                     :max="daterange[1]"
                     thumb-label="always"
-                    style="margin-top:3em"
+                    style="margin-top:1em;width:90%;margin-left:20px;"
+                    dense
                 >
                 </v-range-slider>
             </v-card-text>
         </v-card>
+        <v-card class="ma-1">
+            <v-card-text>
+                <v-checkbox
+                    v-model="anomalieLayer"
+                    label="Temperaturanomalie"
+                    hide-details
+                    @change="layerChanged('anomalieLayer')"
+                    dense
+                ></v-checkbox>
+            </v-card-text>
+        </v-card>
+
+        <v-btn
+        class="ma-1"
+        :loading="loading"
+        :disabled="loading"
+        color="blue"
+        @click="calculate()"
+        >
+            Berechne Anomalie
+        </v-btn>
     </div>
     
 </template>
@@ -49,17 +102,66 @@
 
 <script lang="ts">
 
-import {Vue, Ref, Component } from 'vue-property-decorator';
+import {Vue, Ref, Component, Emit } from 'vue-property-decorator';
+import { TemperatureSeries } from './StationLayer';
+import TemperatureLegendChart from './TemperatureLegendChart';
 
 @Component({})
 export default class Legend extends Vue{
-    private checkbox: boolean = true;
-    private daterange: number[] = [1900, 2020];
-    private range0: number[] = [1960, 1990];
-    private range1: number[] = [1991, 2020];
-
+    private layer1: boolean = true;
+    private layer2: boolean = true;
+    private stationLayer: boolean = true;
+    private anomalieLayer: boolean = true;
+    private daterange: number[] = [2005, 2014];
+    private range1: number[] = [1960, 1990];
+    private range2: number[] = [1991, 2020];
+    private stationYear: number = 1990;
+    private loading: boolean = false;
+    
     mounted(){
         console.log("Legend mounted");
+
+        let series: TemperatureSeries[] = new Array<TemperatureSeries>();
+        
+        series.push({date: 2005, value: 3});
+        series.push({date: 2006, value: 5});
+        series.push({date: 2007, value: 7});
+        series.push({date: 2008, value: 4});
+        series.push({date: 2009, value: 9});
+        series.push({date: 2010, value: 3});
+        series.push({date: 2011, value: 5});
+        series.push({date: 2012, value: 7});
+        series.push({date: 2013, value: 4});
+        series.push({date: 2014, value: 9});
+
+        let tChart1 = new TemperatureLegendChart();
+        tChart1.render("legendTemperature1", series);
+
+        let tChart2 = new TemperatureLegendChart();
+        tChart2.render("legendTemperature2", series);
+    }
+
+    public layerChanged(layer: any):void{
+        if(layer=="layer1"){
+            console.log("layerChanged "+layer+": "+this.layer1);
+        }else if(layer=="layer2"){
+            console.log("layerChanged "+layer+": "+this.layer2);
+        }else if(layer=="stationLayer"){
+            console.log("layerChanged "+layer+": "+this.stationLayer);
+        }
+        
+    }
+
+    @Emit()
+    protected stationTime(): void{
+
+    }
+
+    private calculate(): void{
+        
+        setTimeout(() => (this.loading = false), 3000)
+        this.loading = true;
+
     }
 
 }

frontend/src/StationLayer.ts

 import VectorLayer from 'ol/layer/Vector';
 import VectorSource from 'ol/source/Vector';
 import GeoJSON from 'ol/format/GeoJSON';
-import {Circle as CircleStyle, Fill, Stroke, Style, Text} from 'ol/style';
+import {Circle as CircleStyle, Fill, Stroke, Style, Text, Icon} from 'ol/style';
 import MapProperties from './MapProperties';
 
 export interface TemperatureSeries{
@@ -13,6 +13,10 @@ export default class StationLayer{
     public static readonly layerName: string = "StationLayer";
     private layer: any;
     private mapProperties: MapProperties;
+    private year: number = 2000; 
+
+    private house = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="%color%"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';
+
 
     constructor(mapProperties: MapProperties){
         this.mapProperties = mapProperties;
@@ -34,11 +38,22 @@ export default class StationLayer{
     protected stationStyle(feature){
 
         let fontSize = 15
-        let label = '\u272A';
+        let label = '';
         if(this.mapProperties.getZoomLevel()>=8){
-            label += "\n"+feature.get("id");
+            label += feature.get("id");
         }
         
+        let iconColor = "blue";
+        //console.log(this.year,": ",feature.get(this.year));
+        let temperature = feature.get(this.year);
+        if(!temperature){
+            iconColor = "black";
+        }else if(temperature>10){
+            iconColor = "red"
+        }else{
+            iconColor = "blue";
+        }
+
         return new Style({
             text: new Text({
                 font: fontSize+'px Helvetica,bold',
@@ -48,7 +63,16 @@ export default class StationLayer{
                 }),
                 offsetY: 0,
                 text: label
-            })
+            }),
+            image: new Icon({
+                color: "rgba(255, 0, 0, .5)",
+                crossOrigin: 'anonymous',
+                // For Internet Explorer 11
+                imgSize: [24, 24],
+                scale: 0.7,
+                //src: './public/home_black_24dp.svg',
+                src: 'data:image/svg+xml;utf8,'+this.house.replace("%color%", iconColor),
+              })
         });
     }
 
@@ -70,4 +94,8 @@ export default class StationLayer{
 
     }
 
+    public newYear(year: number ):void{
+        this.year = year;
+    }
+
 }
\ No newline at end of file

frontend/src/TemperatureLegendChart.ts

+import * as d3 from 'd3';
+import {TemperatureSeries} from './StationLayer';
+
+
+export default class TemperatureLegendChart{
+
+    private d3svg: any;
+
+    private margin = {top: 10, right: 30, bottom: 30, left: 30}
+    private width = 0;
+    private height = 0;
+
+    public render(chartID: string, tSeries: TemperatureSeries[]):void{
+
+        this.width = 350 - this.margin.left - this.margin.right;
+        this.height = 70 - this.margin.top - this.margin.bottom;
+
+        this.d3svg = d3.select("#"+chartID)
+        .append("svg")
+          .attr("width", this.width + this.margin.left + this.margin.right)
+          .attr("height", this.height + this.margin.top + this.margin.bottom)
+        .append("g")
+          .attr("transform", "translate("+this.margin.left+","+this.margin.top+")");
+
+        let xScale = d3.scaleLinear()
+          .domain(d3.extent(tSeries, function(d){return d.date}))
+          .range([0, this.width]);
+
+        this.d3svg.append("g")
+            .attr("transform", "translate(0," + this.height + ")")
+            .call(d3.axisBottom(xScale).ticks(10).tickFormat(d3.format("d"));
+        
+        let yScale = d3.scaleLinear()
+            .domain([d3.min(tSeries, function(d){return d.value}), d3.max(tSeries, function(d){return d.value})])
+            .range([this.height, 0]).nice();
+        
+        let yAxis = d3.axisLeft(yScale).ticks(3);
+        let yAxisContainer = this.d3svg.append("g")
+            .call(yAxis);
+
+
+        this.d3svg.append("path")
+            .datum(tSeries)
+            .attr("fill", "none")
+            .attr("stroke", "steelblue")
+            .attr("stroke-width", 1.5)
+            .attr("d", d3.line()
+              .x(function(d) { return xScale(d.date) })
+              .y(function(d) { return yScale(d.value) })
+              )
+    }
+
+
+
+}
\ No newline at end of file

frontend/src/WeatherMap.vue

 
 <template>
-    <div class="weatherContainer">
-        <div ref="weathermap" class="weathermap" />
+    <div id="weatherContainer">
+        
+        <Legend id="legend" @stationa="stationupdate"></Legend>
+        
+        <div ref="weathermap" id="weathermap" />
 
         <div ref="popup" class="ol-popup">
             <a href="#" ref="popup-closer" class="ol-popup-closer"></a>
@@ -14,10 +17,22 @@
 </template>
 
 <style scoped>
-    .weathermap {
-        width: 100%;
-        height: 100%;
-        position:absolute;
+    #weatherContainer{
+        width:100%;
+        height:100%;
+        position:relative;
+    }
+    #legend{
+      width:20%;
+      height:100%;
+      position:relative;
+      float:right;
+    }
+    #weathermap{
+      width:80%;
+      height:100%;
+      position:relative;
+      float:right;
     }
 
     .ol-popup {
@@ -76,9 +91,9 @@ import 'ol/ol.css';
 import StationLayer from './StationLayer';
 import MapProperties from './MapProperties';
 import StationChartPopup from './StationChartPopup.vue';
+import Legend from './Legend.vue';
 
-
-@Component({components:{StationChartPopup}})
+@Component({components:{Legend, StationChartPopup}})
 export default class WeatherMap extends Vue{
  
     @Ref('weathermap') readonly targetElement!: HTMLElement;
@@ -169,6 +184,11 @@ export default class WeatherMap extends Vue{
         this.map.addLayer(this.stationLayer.getLayer());
     }
 
+    public stationupdate(event){
+        this.stationLayer.newYear(event);    
+
+    }
+
 };
 </script>