evening push: add legend

frontend/App.vue

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

frontend/index.js

 import Vue from 'vue';
+import vuetify from './src/plugins/vuetify';
 import App from './App.vue';
-import vuetify from './src/plugins/vuetify'
-import 'regenerator-runtime';
+
 
 //new Vue({ render: createElement => createElement(App) }).$mount('#app');
 new Vue({vuetify, render: createElement => createElement(App)}).$mount('#app')
\ No newline at end of file

frontend/src/Legend.vue

+<template>
+    
+    <div>
+        <p class="font-weight-black">
+            Legend
+        </p>
+        <v-card>
+            <v-card-text>
+                <p class="font-weight-medium">
+                Durchschnittstemperatur Layer 1:
+                </p>
+                <v-range-slider
+                    v-model="range0"
+                    step="1"
+                    :min="daterange[0]"
+                    :max="daterange[1]"
+                    thumb-label="always"
+                    style="margin-top:3em"
+                >
+                </v-range-slider>
+            </v-card-text>
+        </v-card>
+        
+        <v-card style="margin-top:10px;">
+            <v-card-text>
+                <p class="font-weight-medium">
+                    Durchschnittstemperatur Layer 1:
+                </p>
+                <v-checkbox
+                    v-model="checkbox"
+                    :label="`Checkbox 1: ${checkbox.toString()}`"
+                ></v-checkbox>
+                <v-range-slider
+                    v-model="range1"
+                    step="1"
+                    :min="daterange[0]"
+                    :max="daterange[1]"
+                    thumb-label="always"
+                    style="margin-top:3em"
+                >
+                </v-range-slider>
+            </v-card-text>
+        </v-card>
+    </div>
+    
+</template>
+
+
+
+<script lang="ts">
+
+import {Vue, Ref, Component } from 'vue-property-decorator';
+
+@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];
+
+    mounted(){
+        console.log("Legend mounted");
+    }
+
+}
+</script>

frontend/src/WeatherMap.vue

@@ -76,10 +76,9 @@ import 'ol/ol.css';
 import StationLayer from './StationLayer';
 import MapProperties from './MapProperties';
 import StationChartPopup from './StationChartPopup.vue';
-import { component } from 'vue/types/umd';
 
 
-@Component({components:{StationChartPopup})
+@Component({components:{StationChartPopup}})
 export default class WeatherMap extends Vue{
  
     @Ref('weathermap') readonly targetElement!: HTMLElement;