Mercurial > gemma
changeset 2643:27933e66e848
client: gauges: use isrs_code as unique id for gauges
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Thu, 14 Mar 2019 13:11:22 +0100 |
parents | ffef5f89b31c |
children | 50cfb12a54a4 |
files | client/src/components/gauge/Gauges.vue client/src/store/gauges.js client/src/store/map.js |
diffstat | 3 files changed, 32 insertions(+), 22 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/gauge/Gauges.vue Thu Mar 14 12:40:52 2019 +0100 +++ b/client/src/components/gauge/Gauges.vue Thu Mar 14 13:11:22 2019 +0100 @@ -20,7 +20,7 @@ </div> <select @change="moveToGauge" - v-model="selectedGaugeName" + v-model="selectedGaugeISRS" class="form-control font-weight-bold" > <option :value="null"> @@ -28,13 +28,13 @@ </option> <option v-for="g in gauges" - :key="g.properties.objname" - :value="g.properties.objname" + :key="g.properties.isrs_code" + :value="g.properties.isrs_code" > - {{ g.properties.objname }} + {{ gaugeLabel(g) }} </option> </select> - <div v-if="selectedGaugeName" class="mt-2"> + <div v-if="selectedGaugeISRS" class="mt-2"> <hr class="mb-1" /> <small class="text-muted"> <translate>Time period</translate>: @@ -103,12 +103,12 @@ ...mapState("application", ["showGauges"]), ...mapState("gauges", ["gauges"]), ...mapGetters("gauges", ["selectedGauge"]), - selectedGaugeName: { + selectedGaugeISRS: { get() { - return this.$store.state.gauges.selectedGaugeName; + return this.$store.state.gauges.selectedGaugeISRS; }, - set(name) { - this.$store.dispatch("gauges/selectedGaugeName", name); + set(isrs) { + this.$store.dispatch("gauges/selectedGaugeISRS", isrs); } } }, @@ -129,10 +129,13 @@ let splitscreenConf = { id: "gauge-waterlevel", component: "waterlevel", - title: this.$gettext("Waterlevel") + ": " + this.selectedGaugeName, + title: + this.$gettext("Waterlevel") + + ": " + + this.gaugeLabel(this.selectedGauge), icon: "ruler-vertical", closeCallback: () => { - this.$store.commit("gauges/selectedGaugeName", null); + this.$store.commit("gauges/selectedGaugeISRS", null); this.$store.commit("gauges/waterlevels", []); }, expandCallback: () => { @@ -154,6 +157,13 @@ this.$store.commit("application/splitscreenLoading", false); this.loading = false; }); + }, + gaugeLabel(gauge) { + let details = gauge.id + .split(".")[1] + .replace(/[()]/g, "") + .split(","); + return `${gauge.properties.objname} (${details[3]})`; } }, mounted() {
--- a/client/src/store/gauges.js Thu Mar 14 12:40:52 2019 +0100 +++ b/client/src/store/gauges.js Thu Mar 14 13:11:22 2019 +0100 @@ -17,7 +17,7 @@ const init = () => { return { gauges: [], - selectedGaugeName: null, + selectedGaugeISRS: null, waterlevels: [], loading: false }; @@ -30,7 +30,7 @@ getters: { selectedGauge: state => { return state.gauges.find( - g => g.properties.objname === state.selectedGaugeName + g => g.properties.isrs_code === state.selectedGaugeISRS ); } }, @@ -38,8 +38,8 @@ gauges: (state, gauges) => { state.gauges = gauges; }, - selectedGaugeName: (state, name) => { - state.selectedGaugeName = name; + selectedGaugeISRS: (state, isrs) => { + state.selectedGaugeISRS = isrs; }, waterlevels: (state, data) => { state.waterlevels = data; @@ -49,8 +49,8 @@ } }, actions: { - selectedGaugeName: ({ commit }, name) => { - commit("selectedGaugeName", name); + selectedGaugeISRS: ({ commit }, isrs) => { + commit("selectedGaugeISRS", isrs); commit("application/showGauges", true, { root: true }); commit("application/showSplitscreen", false, { root: true }); }, @@ -84,7 +84,7 @@ }, loadWaterlevels({ state, commit }, timePeriod) { return new Promise(resolve => { - if (state.selectedGaugeName && timePeriod) { + if (state.selectedGaugeISRS && timePeriod) { // generate some demo values setTimeout(() => { let data = [];
--- a/client/src/store/map.js Thu Mar 14 12:40:52 2019 +0100 +++ b/client/src/store/map.js Thu Mar 14 13:11:22 2019 +0100 @@ -794,12 +794,12 @@ // get selected gauge if (/^gauges/.test(id)) { if ( - rootState.gauges.selectedGaugeName !== - feature.get("objname") + rootState.gauges.selectedGaugeISRS !== + feature.get("isrs_code") ) { dispatch( - "gauges/selectedGaugeName", - feature.get("objname"), + "gauges/selectedGaugeISRS", + feature.get("isrs_code"), { root: true }