Mercurial > gemma
changeset 2389:13de09e30645
fairway_profile: available_waterlevels selection with dummy data added
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 25 Feb 2019 15:51:50 +0100 |
parents | f27b005db9f5 |
children | fde9c0f85455 |
files | client/src/components/fairway/Fairwayprofile.vue client/src/store/fairway.js |
diffstat | 2 files changed, 63 insertions(+), 23 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/Fairwayprofile.vue Mon Feb 25 15:10:13 2019 +0100 +++ b/client/src/components/fairway/Fairwayprofile.vue Mon Feb 25 15:51:50 2019 +0100 @@ -1,26 +1,46 @@ <template> <div :class="['position-relative', { show: showSplitscreen }]"> - <button - class="rounded-bottom bg-white border-0 position-absolute splitscreen-toggle" - @click="$store.commit('application/showSplitscreen', false)" - v-if="showSplitscreen" - > - <font-awesome-icon icon="angle-down" /> - </button> - <button - class="rounded-bottom bg-white border-0 position-absolute clear-selection" - @click="$store.dispatch('fairwayprofile/clearSelection')" - v-if="showSplitscreen" - > - <font-awesome-icon icon="times" class="pointer" /> - </button> <div class="profile bg-white position-relative d-flex flex-column"> - <h5 - class="headline border-bottom mb-0 py-2" - v-if="selectedBottleneck && selectedSurvey" - > - {{ selectedBottleneck }} ({{ selectedSurvey.date_info }}) - </h5> + <div class="d-flex flex-row justify-content-between border-bottom"> + <div class="mt-1 mb-1 d-flex flex-row"> + <small class="text-muted ml-1 mr-1 my-auto text-right" + ><translate>Available Waterlevels</translate></small + > + <select class="form-control" v-model="currentLevel"> + <option + v-for="level in availableWaterlevels" + :value="level" + :key="level" + > + {{ formatSurveyDate(level) }} + </option> + </select> + </div> + <div class="flex-row mr-auto ml-auto"> + <h5 + class="headline mb-0 py-2" + v-if="selectedBottleneck && selectedSurvey" + > + {{ selectedBottleneck }} ({{ selectedSurvey.date_info }}) + </h5> + </div> + <div> + <button + class="rounded-bottom bg-white border-0 splitscreen-toggle" + @click="$store.commit('application/showSplitscreen', false)" + v-if="showSplitscreen" + > + <font-awesome-icon icon="angle-down" /> + </button> + <button + class="rounded-bottom bg-white border-0 clear-selection" + @click="$store.dispatch('fairwayprofile/clearSelection')" + v-if="showSplitscreen" + > + <font-awesome-icon icon="times" class="pointer" /> + </button> + </div> + </div> <div class="d-flex flex-fill"> <div class="loading d-flex justify-content-center align-items-center" @@ -96,6 +116,7 @@ import * as d3 from "d3"; import { mapState, mapGetters } from "vuex"; import debounce from "debounce"; +import { formatSurveyDate } from "@/lib/date.js"; const GROUND_COLOR = "#4A2F06"; @@ -137,6 +158,17 @@ "selectedSurvey", "surveysLoading" ]), + currentLevel: { + get() { + return this.selectedWaterLevel.date; + }, + set(value) { + this.$store.commit("fairwayprofile/setSelectedWaterLevel", value); + } + }, + availableWaterlevels() { + return Object.keys(this.waterLevels); + }, currentData() { if ( !this.selectedSurvey || @@ -188,6 +220,9 @@ } }, methods: { + formatSurveyDate(value) { + return formatSurveyDate(value); + }, drawDiagram() { this.coordinatesSelect = null; const chartDiv = document.querySelector(".fairwayprofile");
--- a/client/src/store/fairway.js Mon Feb 25 15:10:13 2019 +0100 +++ b/client/src/store/fairway.js Mon Feb 25 15:51:50 2019 +0100 @@ -29,6 +29,7 @@ minAlt: 0, maxAlt: 0, currentProfile: {}, + referenceWaterLevel: null, waterLevels: {}, selectedWaterLevel: "", fairwayData: [], @@ -60,7 +61,7 @@ state.additionalSurvey = additionalSurvey; }, setSelectedWaterLevel: (state, level) => { - state.selectedWaterLevel = level; + state.selectedWaterLevel = state.waterLevels[level]; }, profileLoaded: (state, answer) => { const { response, surveyDate } = answer; @@ -75,8 +76,12 @@ const result = prepareProfile({ geoJSON, startPoint, endPoint }); // Use Vue.set() to make new object properties rective // https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats - Vue.set(state.waterLevels, when, { value }); - if (state.selectedWaterLevel === "") state.selectedWaterLevel = when; + const entry = { + date: when, + vaule: value + }; + Vue.set(state.waterLevels, when, entry); + if (state.selectedWaterLevel === "") state.selectedWaterLevel = entry; Vue.set(state.currentProfile, surveyDate, { points: result.points, length: result.lengthPolyLine