Mercurial > gemma
view client/src/components/layers/Layers.vue @ 5627:7768f14f6535 729-node-js-newer-version
Transformed scss variables into css custom properties
author | Luisa Beerboom <lbeerboom@intevation.de> |
---|---|
date | Tue, 09 May 2023 13:17:58 +0200 |
parents | fbffb3d7e336 |
children |
line wrap: on
line source
<template> <div :class="[ 'box ui-element rounded bg-white text-nowrap', { expanded: showLayers } ]" > <div class="position-relative" style="width: 17rem; min-height: 350px;"> <UIBoxHeader icon="layer-group" :title="label" :closeCallback="close" :actions="[ { callback: refreshLayers, icon: sourcesLoading ? 'spinner' : 'sync' } ]" /> <div class="small" v-if="openLayersMaps.length"> <Layerselect layerId="OPENSTREETMAP" /> <Layerselect layerId="INLANDECDIS" /> <Layerselect layerId="WATERWAYAREA" /> <Layerselect layerId="STRETCHES" /> <Layerselect layerId="SECTIONS" /> <Layerselect layerId="BOTTLENECKS" /> <Layerselect layerId="BOTTLENECKISOLINE" /> <Layerselect layerId="DIFFERENCES" /> <Layerselect layerId="FAIRWAYDIMENSIONSLOS3" /> <Layerselect layerId="FAIRWAYDIMENSIONSLOS2" /> <Layerselect layerId="FAIRWAYDIMENSIONSLOS1" /> <Layerselect layerId="WATERWAYAXIS" /> <Layerselect layerId="WATERWAYPROFILES" /> <Layerselect layerId="BOTTLENECKSTATUS" /> <Layerselect layerId="BOTTLENECKFAIRWAYAVAILABILITY" /> <Layerselect v-if="!showTimeSlider" layerId="DATAAVAILABILITY" /> <Layerselect layerId="DISTANCEMARKS" /> <Layerselect layerId="DISTANCEMARKSAXIS" /> <Layerselect layerId="GAUGES" /> <Layerselect layerId="FAIRWAYMARKS" /> <Layerselect v-if="reviewActive" layerId="FDREVIEWLAYER" /> </div> <UISpinnerOverlay v-else style="top: 34px;" /> </div> </div> </template> <script> /* This is Free Software under GNU Affero General Public License v >= 3.0 * without warranty, see README.md and license for details. * * SPDX-License-Identifier: AGPL-3.0-or-later * License-Filename: LICENSES/AGPL-3.0.txt * * Copyright (C) 2018 by via donau * – Österreichische Wasserstraßen-Gesellschaft mbH * Software engineering by Intevation GmbH * * Author(s): * Thomas Junk <thomas.junk@intevation.de> * Markus Kottländer <markus.kottlaender@intevation.de> */ import { mapState, mapGetters } from "vuex"; export default { components: { Layerselect: () => import("./Layerselect") }, computed: { ...mapState("application", ["showLayers", "showTimeSlider"]), ...mapState("map", ["openLayersMaps", "reviewActive"]), ...mapGetters("map", ["openLayersMap"]), label() { return this.$gettext("Map Layers"); }, sourcesLoading() { let counter = 0; this.openLayersMaps.forEach(map => { let layers = map.getLayers().getArray(); for (let i = 0; i < layers.length; i++) { if (layers[i].getSource().loading) counter++; } }); return counter; } }, watch: { showTimeSlider() { if (!this.showTimeSlider) return; const availabilityLayer = this.openLayersMap().getLayer( "DATAAVAILABILITY" ); availabilityLayer.setVisible(false); }, reviewActive() { if (!this.reviewActive) { const fairwaydimensionLayer = this.openLayersMap().getLayer( "FDREVIEWLAYER" ); fairwaydimensionLayer.setVisible(false); } } }, methods: { close() { this.$store.commit("application/showLayers", false); }, refreshLayers() { this.$store.commit("application/setLayerRefreshedTime", new Date()); this.$store.commit("map/startRefreshLayers"); this.$store.commit("gauges/deleteNashSutcliffeCache"); this.$store.dispatch("map/refreshLayers"); this.$nextTick(() => { this.$store.commit("map/finishRefreshLayers"); }); } } }; </script>