Legend.vue

<template>
    
    <div>
        <p class="text-xl-h5 ">
            Legende
        </p>
         <v-card  class="ma-1">
            <v-card-text>
                
                <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 class="ma-1">
            <v-card-text>
                <v-checkbox
                    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="range2"
                    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 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>



<script lang="ts">

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

    }

}
</script>