Mercurial > gemma
changeset 2596:8774054959a7
client: added Gauges dialog/tool to show waterlevel diagrams
| author | Markus Kottlaender <markus@intevation.de> |
|---|---|
| date | Tue, 12 Mar 2019 12:07:02 +0100 |
| parents | dda4cec8e67b |
| children | 02d5de05291f |
| files | client/src/components/App.vue client/src/components/gauge/Waterlevel.vue client/src/components/toolbar/Toolbar.vue client/src/store/application.js client/src/store/gauges.js client/src/store/map.js |
| diffstat | 6 files changed, 101 insertions(+), 70 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/App.vue Tue Mar 12 11:44:29 2019 +0100 +++ b/client/src/components/App.vue Tue Mar 12 12:07:02 2019 +0100 @@ -3,30 +3,31 @@ <div v-if="isAuthenticated" class="d-flex flex-column userinterface"> <div class="d-flex p-2"> <div class="mr-auto d-flex"> - <Sidebar :routeName="routeName"></Sidebar> + <Sidebar :routeName="routeName" /> <div :class="searchContainer"> - <Search v-if="isMapVisible"></Search> - <Contextbox v-if="isMapVisible"></Contextbox> + <Search v-if="isMapVisible" /> + <Contextbox v-if="isMapVisible" /> </div> </div> <div class="ml-auto d-flex"> <div class="d-flex flex-column align-items-end"> - <Profiles v-if="isMapVisible"></Profiles> - <Pdftool v-if="isMapVisible"></Pdftool> + <Profiles v-if="isMapVisible" /> + <Gauges v-if="isMapVisible" /> + <Pdftool v-if="isMapVisible" /> </div> <div class="d-flex flex-column align-items-end"> - <Identify v-if="isMapVisible"></Identify> - <Layers v-if="isMapVisible"></Layers> + <Identify v-if="isMapVisible" /> + <Layers v-if="isMapVisible" /> </div> - <Toolbar v-if="isMapVisible"></Toolbar> + <Toolbar v-if="isMapVisible" /> </div> </div> - <Zoom v-if="isMapVisible"></Zoom> + <Zoom v-if="isMapVisible" /> <Splitscreen v-if="isMapVisible" /> <MinimizedSplitscreens v-if="isMapVisible" /> </div> <router-view /> - <vue-snotify></vue-snotify> + <vue-snotify /> <Popup /> </div> </template> @@ -95,6 +96,7 @@ }, components: { Profiles: () => import("./fairway/Profiles"), + Gauges: () => import("./gauge/Gauges"), Pdftool: () => import("./Pdftool"), Zoom: () => import("./Zoom"), Identify: () => import("./identify/Identify"),
--- a/client/src/components/gauge/Waterlevel.vue Tue Mar 12 11:44:29 2019 +0100 +++ b/client/src/components/gauge/Waterlevel.vue Tue Mar 12 12:07:02 2019 +0100 @@ -37,18 +37,11 @@ export default { computed: { - ...mapState("gauges", ["selectedGauge"]), + ...mapState("gauges", ["selectedGauge", "waterlevels"]) + }, + watch: { waterlevels() { - let data = []; - let waterlevel = 2.5; - for (let i = 1; i <= 365; i++) { - let date = new Date(); - date.setFullYear(2018); - date.setDate(date.getDate() + i); - waterlevel *= Math.random() * (1.02 - 0.98) + 0.98; - data.push({ date, waterlevel }); - } - return data; + this.drawDiagram(); } }, methods: {
--- a/client/src/components/toolbar/Toolbar.vue Tue Mar 12 11:44:29 2019 +0100 +++ b/client/src/components/toolbar/Toolbar.vue Tue Mar 12 12:07:02 2019 +0100 @@ -6,12 +6,13 @@ (expandToolbar ? 'expanded' : 'collapsed') " > - <Identify class="pointer"></Identify> - <Layers class="pointer"></Layers> - <Profiles class="pointer"></Profiles> - <Linetool class="pointer"></Linetool> - <Polygontool class="pointer"></Polygontool> - <Pdftool class="pointer"></Pdftool> + <Identify class="pointer" /> + <Layers class="pointer" /> + <Profiles class="pointer" /> + <Gauges class="pointer" /> + <Linetool class="pointer" /> + <Polygontool class="pointer" /> + <Pdftool class="pointer" /> </div> <div @click="$store.commit('application/expandToolbar', !expandToolbar)" @@ -120,6 +121,7 @@ Linetool: () => import("./Linetool.vue"), Polygontool: () => import("./Polygontool.vue"), Profiles: () => import("./Profiles.vue"), + Gauges: () => import("./Gauges.vue"), Pdftool: () => import("./Pdftool.vue") }, computed: {
--- a/client/src/store/application.js Tue Mar 12 11:44:29 2019 +0100 +++ b/client/src/store/application.js Tue Mar 12 12:07:02 2019 +0100 @@ -14,6 +14,7 @@ * Bernhard E. Reiter <bernhard.reiter@intevation.de> */ +import Vue from "vue"; import { version } from "../../package.json"; // initial state @@ -36,6 +37,7 @@ showPdfTool: false, showContextBox: false, showProfiles: false, + showGauges: false, contextBoxContent: null, // bottlenecks, imports, staging expandToolbar: false, countries: ["AT", "SK", "HU", "HR", "RS", "BiH", "BG", "RO", "UA"], @@ -89,7 +91,7 @@ }, addSplitscreen: (state, config) => { let index = state.splitscreens.findIndex(s => s.id === config.id); - if (index !== -1) state.splitscreens[index] = config; + if (index !== -1) Vue.set(state.splitscreens, index, config); else state.splitscreens.push(config); }, removeSplitscreen: (state, id) => { @@ -117,6 +119,9 @@ showProfiles: (state, show) => { state.showProfiles = show; }, + showGauges: (state, show) => { + state.showGauges = show; + }, contextBoxContent: (state, context) => { state.contextBoxContent = context; if (context) {
--- a/client/src/store/gauges.js Tue Mar 12 11:44:29 2019 +0100 +++ b/client/src/store/gauges.js Tue Mar 12 12:07:02 2019 +0100 @@ -11,12 +11,15 @@ * Author(s): * Markus Kottländer <markus@intevation.de> */ - -import { getCenter } from "ol/extent"; +import { HTTP } from "@/lib/http"; +import { WFS } from "ol/format.js"; const init = () => { return { - selectedGauge: null + gauges: [], + selectedGauge: null, + waterlevels: [], + loading: false }; }; @@ -25,49 +28,74 @@ namespaced: true, state: init(), mutations: { + gauges: (state, gauges) => { + state.gauges = gauges; + }, selectedGauge: (state, gauge) => { state.selectedGauge = gauge; + }, + waterlevels: (state, data) => { + state.waterlevels = data; + }, + loading: (state, loading) => { + state.loading = loading; } }, actions: { - selectedGauge: ({ commit }, gauge) => { - commit("selectedGauge", gauge); - - // configure splitscreen - let splitscreenConf = { - id: "gauge-waterlevel", - component: "waterlevel", - title: gauge.get("objname"), - icon: "ruler-vertical", - closeCallback: () => { - commit("selectedGauge", null); - }, - expandCallback: () => { - commit( - "map/moveMap", - { - coordinates: getCenter( - gauge - .getGeometry() - .clone() - .transform("EPSG:3857", "EPSG:4326") - .getExtent() - ), - zoom: 17, - preventZoomOut: true - }, - { root: true } - ); + selectedGauge: ({ commit }, name) => { + commit("selectedGauge", name); + commit("application/showGauges", true, { root: true }); + commit("application/showSplitscreen", false, { root: true }); + }, + loadGauges: ({ commit }) => { + return new Promise((resolve, reject) => { + var gaugesFeatureCollectionRequest = new WFS().writeGetFeature({ + srsName: "EPSG:4326", + featureNS: "gemma", + featurePrefix: "gemma", + featureTypes: ["gauges_geoserver"], + outputFormat: "application/json" + }); + HTTP.post( + "/internal/wfs", + new XMLSerializer().serializeToString(gaugesFeatureCollectionRequest), + { + headers: { + "X-Gemma-Auth": localStorage.getItem("token"), + "Content-type": "text/xml; charset=UTF-8" + } + } + ) + .then(response => { + commit("gauges", response.data.features); + resolve(response); + }) + .catch(error => { + reject(error); + }); + }); + }, + loadWaterlevels({ state, commit }, timePeriod) { + return new Promise(resolve => { + if (state.selectedGauge && timePeriod) { + // generate some demo values + setTimeout(() => { + let data = []; + let waterlevel = 2.5; + for (let i = 1; i <= 365; i++) { + let date = new Date(); + date.setFullYear(2018); + date.setDate(date.getDate() + i); + waterlevel *= Math.random() * (1.02 - 0.98) + 0.98; + data.push({ date, waterlevel }); + } + commit("waterlevels", data); + resolve(data); + }, 2000); + } else { + commit("waterlevels", []); } - }; - commit("application/addSplitscreen", splitscreenConf, { - root: true }); - commit("application/activeSplitscreenId", "gauge-waterlevel", { - root: true - }); - commit("application/splitscreenLoading", false, { root: true }); - commit("application/showSplitscreen", true, { root: true }); } } };
--- a/client/src/store/map.js Tue Mar 12 11:44:29 2019 +0100 +++ b/client/src/store/map.js Tue Mar 12 12:07:02 2019 +0100 @@ -793,8 +793,10 @@ // get selected gauge if (/^gauges/.test(id)) { - if (rootState.gauges.selectedGauge !== feature) { - dispatch("gauges/selectedGauge", feature, { + if ( + rootState.gauges.selectedGauge !== feature.get("objname") + ) { + dispatch("gauges/selectedGauge", feature.get("objname"), { root: true }); commit("moveMap", { @@ -808,7 +810,6 @@ zoom: 17, preventZoomOut: true }); - commit("application/showSplitscreen", true, { root: true }); } } }