Legend.vue

<template>
    
    <div style="height:100%;overflow:auto">
        <p class="text-xs ma-1 ">
            Legende
        </p>
         <v-card  class="mx-1">

            <v-card-text>
                <v-checkbox
                    v-model="stationLayerActive"
                    hide-details
                    @change="$emit('layerVisibility',$event,'stationLayer')"
                    dense
                >
                    <template v-slot:label>
                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" viewBox="0 0 24 24" fill="%23333333"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" stroke="black"/></svg>   
                        Wetterstationen
                    </template>
                </v-checkbox>
                <div style="margin-top:1em;">
                    <div style="float:left;margin-top:5px;">   
                        {{parseInt(this.mapProperties.getTemperatureBound().min)}} °C

                    </div>
                    <div 
                        class="gradient mx-1"
                        :style="{ backgroundImage: createStationColorramp(mapProperties.getTemperatureColorMap()) }"
                    ></div>
                    <div style="float:left;margin-top:5px;">   
                        {{parseInt(this.mapProperties.getTemperatureBound().max)}} °C
                    </div>

                </div>
                <v-slider
                    v-model="mapProperties.stationDate"
                    width="50px"
                    step="1"
                    :min="mapProperties.completeDaterange[0]"
                    :max="mapProperties.completeDaterange[1]"
                    thumb-label="always"
                    thumb-size="29px"
                    style="margin-top:5em;margin-bottom:-25px;"
                    dense
                    @change="$emit('stationUpdate', $event)"
                >
                </v-slider>
                
            </v-card-text>
        </v-card>
        <v-card  class="ma-1">
            <v-card-text>
                <v-checkbox
                    v-model="layer1Active"
                    hide-details
                    dense
                    @change="$emit('layerVisibility',$event,'avgLayer1')"
                >
                    <template v-slot:label>
                        <div>
                            <v-icon>
                                 mdi-checkerboard
                            </v-icon> 
                            Durchschnittstemperatur Layer 1
                        </div>
                    </template>
                </v-checkbox>
                <div style="margin-top:1em;">
                    <div style="float:left;margin-top:5px;">   
                        {{parseInt(this.mapProperties.getTemperatureBound().min)}} °C
                    </div>
                    <div 
                        class="gradient mx-1"
                        :style="{ backgroundImage: createStationColorramp(mapProperties.getMeanColorMap('hex')) }"
                    ></div>
                    <div style="float:left;margin-top:5px;">   
                        {{parseInt(this.mapProperties.getTemperatureBound().max)}} °C
                    </div>
                </div>
                <div ref="legendTemperature1" id="legendTemperature1"></div>
                <v-range-slider
                    v-model="mapProperties.anomalieRange1"
                    step="1"
                    :min="mapProperties.completeDaterange[0]"
                    :max="mapProperties.completeDaterange[1]"
                    thumb-label="always"
                    thumb-size="29px"
                    style="margin-top:1em;width:330px;margin-left:12px;margin-bottom:-25px;"
                    dense
                >
                </v-range-slider>
            </v-card-text>
        </v-card>
        
        <v-card class="ma-1">
            <v-card-text>
                
                <v-checkbox
                    v-model="layer2Active"
                    hide-details
                    @change="$emit('layerVisibility',$event,'avgLayer2')"
                    dense
                >
                    <template v-slot:label>
                        <div>
                            <v-icon>
                                 mdi-checkerboard
                            </v-icon> 
                            Durchschnittstemperatur Layer 2
                        </div>
                    </template>
                </v-checkbox>
                <div style="margin-top:1em;">
                    <div style="float:left;margin-top:5px;">   
                        {{parseInt(this.mapProperties.getTemperatureBound().min)}} °C
                    </div>
                    <div 
                        class="gradient mx-1"
                        :style="{ backgroundImage: createStationColorramp(mapProperties.getMeanColorMap('hex')) }"
                    ></div>
                    <div style="float:left;margin-top:5px;">   
                        {{parseInt(this.mapProperties.getTemperatureBound().max)}} °C
                    </div>
                </div>
                <div ref="legendTemperature2" id="legendTemperature2"></div>
                <v-range-slider
                    v-model="mapProperties.anomalieRange2"
                    step="1"
                    :min="mapProperties.completeDaterange[0]"
                    :max="mapProperties.completeDaterange[1]"
                    thumb-label="always"
                    thumb-size="29px"
                    style="margin-top:1em;width:330px;margin-left:12px;margin-bottom:-25px;"
                    dense
                    
                >
                </v-range-slider>
                <v-progress-linear
                    indeterminate
                    color="blue darken-2"
                    :active="mapProperties._loadLayer2"
                ></v-progress-linear>
            </v-card-text>
        </v-card>
        <v-card class="ma-1">
            <v-card-text>
                <v-checkbox
                    v-model="anomalieLayerActive"
                    hide-details
                    @change="$emit('layerVisibility',$event,'anomalieLayer')"
                    dense
                >
                    <template v-slot:label>
                        <div>
                            <v-icon>
                                 mdi-checkerboard
                            </v-icon> 
                            Temperaturanomalie
                        </div>
                    </template>
                </v-checkbox>
                
                <div style="margin-top:1em;height:30px;">
                    <div style="float:left;margin-top:5px;">   
                        -1 °C
                    </div>
                    <div 
                        class="gradient mx-1"
                        :style="{ backgroundImage: createStationColorramp(mapProperties.getAnomalieColorMap('hex')) }"
                    ></div>
                    <div style="float:left;margin-top:5px;">   
                        3 °C
                    </div>
                </div>

            </v-card-text>
        </v-card>

        <v-btn
        class="ma-1"
        :loading="loading"
        :disabled="loading"
        color="blue"
        @click="$emit('calculateAnomalie')"
        >
            Berechne Anomalie
        </v-btn>
    </div>
    
</template>

<style scoped>

.gradient{
    width:75%;
    float:left;
    height:30px;
    background-color:black;
}

</style>

<script lang="ts">

import {Vue, Ref, Component, Emit, Prop } from 'vue-property-decorator';
import MapProperties from './MapProperties';
import TemperatureLegendChart from './TemperatureLegendChart';
import axios from 'axios'

@Component({})
export default class Legend extends Vue{
    @Prop({type: MapProperties, required: true}) mapProperties: MapProperties;
    private stationLayerActive: boolean = true;
    private layer1Active: boolean = true;
    private layer2Active: boolean = true;
    private anomalieLayerActive: boolean = true;
    private loading: boolean = false;
    
    mounted(){
        console.log("Legend mounted");

        axios.get("http://127.0.0.1:42000/annualMean", {
            headers: {'Access-Control-Allow-Origin': '*'}
        }).then(resp => {
            
            this.mapProperties.completeDaterange = [resp.data[0].date, resp.data[resp.data.length-1].date];

            let tChart1 = new TemperatureLegendChart();
            tChart1.render("legendTemperature1", resp.data);

            let tChart2 = new TemperatureLegendChart();
            tChart2.render("legendTemperature2", resp.data);

        });

    }

    private calculate(): void{
        
        setTimeout(() => (this.mapProperties._loadLayer2 = false), 3000)
        this.mapProperties._loadLayer2 = true;



    }

    private createStationColorramp(colormap: string[]){
        let gradientStyle = 'linear-gradient(to right, ';
        gradientStyle += colormap.join(', ');
        gradientStyle += ')';

        return gradientStyle;

    }

}
</script>