Mercurial > gemma
changeset 1015:d2f30a784fb3
feat: add selectfield to fairwayprofile
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 23 Oct 2018 14:28:43 +0200 |
parents | 77202406b1a7 |
children | 0522289e8503 |
files | client/src/application/Main.vue client/src/fairway/Fairwayprofile.vue client/src/fairway/store.js client/src/morphtool/Morphtool.vue |
diffstat | 4 files changed, 49 insertions(+), 13 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/application/Main.vue Tue Oct 23 13:05:47 2018 +0200 +++ b/client/src/application/Main.vue Tue Oct 23 14:28:43 2018 +0200 @@ -2,7 +2,7 @@ <div class="main d-flex flex-column"> <Maplayer :drawMode="drawMode" :split="isSplitscreen" :lat="6155376" :long="1819178" :zoom="11"></Maplayer> <div v-if="isSplitscreen" class="profile d-flex flex-row"> - <FairwayProfile :minAlt="minAlt" maxAlt="maxAlt" :selectedWaterLevel="selectedWaterLevel" :fairwayCoordinates="fairwayCoordinates" :waterLevels="waterLevels" :data="currentProfile" :height="height" :width="width" :xScale="xAxis" :yScaleLeft="yAxisLeft" :yScaleRight="yAxisRight" :margin="margins" :totalLength="totalLength"></FairwayProfile> + <FairwayProfile :additionalSurveys="additionalSurveys" :minAlt="minAlt" maxAlt="maxAlt" :selectedWaterLevel="selectedWaterLevel" :fairwayCoordinates="fairwayCoordinates" :waterLevels="waterLevels" :data="currentProfile" :height="height" :width="width" :xScale="xAxis" :yScaleLeft="yAxisLeft" :yScaleRight="yAxisRight" :margin="margins" :totalLength="totalLength"></FairwayProfile> </div> </div> </template> @@ -47,8 +47,16 @@ "totalLength", "waterLevels", "fairwayCoordinates", - "selectedWaterLevel" + "selectedWaterLevel", + "availableSurveys" ]), + ...mapState("morphstore", ["selectedMorph"]), + additionalSurveys() { + if (!this.availableSurveys) return []; + return this.availableSurveys.surveys.filter(x => { + return x.date_info !== this.selectedMorph.date_info; + }); + }, xAxis() { return [this.xScale.x, this.xScale.y]; }, @@ -95,7 +103,7 @@ const clientWidth = document.querySelector(".profile").clientWidth; if (!clientHeight || !clientWidth) return; this.height = document.querySelector(".profile").clientHeight - 25; - this.width = document.querySelector(".profile").clientWidth - 200; + this.width = document.querySelector(".profile").clientWidth - 220; } } };
--- a/client/src/fairway/Fairwayprofile.vue Tue Oct 23 13:05:47 2018 +0200 +++ b/client/src/fairway/Fairwayprofile.vue Tue Oct 23 14:28:43 2018 +0200 @@ -2,21 +2,39 @@ <div class="profiledisplay d-flex flex-row"> <div class="fairwayprofile"> </div> - <!-- <div class="waterlevelselection d-flex flex-column"> - <div class="form-check" v-for="level in waterLevels" :key="level.level"> - <input class="form-check-input" :id="level.year" @change="setWaterlevel(level)" :value="level.level" type="radio"> - <label class="form-check-label" :for="level.year">{{level.year}}</label> - </div> - </div> --> + <div class="additionalsurveys d-flex flex-column"> + <small class="label">Available Additional Surveys</small> + <select> + <option value="">None</option> + <option v-for="survey in additionalSurveys" :key="survey.date_info"> + {{survey.date_info}} + </option> + </select> + </div> </div> </template> -<style lang="scss"> +<style scoped lang="scss"> +.label { + margin-bottom: $small-offset; +} .waterlevelselection { margin-top: $large-offset; margin-right: $large-offset; } +.additionalsurveys { + width: 300px; + margin-top: $large-offset; + margin-bottom: auto; + margin-right: $large-offset; + margin-left: auto; +} + +.additionalsurveys input { + margin-right: $small-offset; +} + .profiledisplay { width: 100vw; } @@ -24,7 +42,7 @@ .fairwayprofile { background-color: white; margin-left: auto; - margin-right: auto; + margin-right: $offset; margin-top: auto; margin-bottom: auto; } @@ -50,7 +68,8 @@ "fairwayCoordinates", "selectedWaterLevel", "minAlt", - "maxAlt" + "maxAlt", + "additionalSurveys" ], computed: { waterColor() { @@ -84,7 +103,9 @@ } }, methods: { - setWaterlevel() {}, + selectAdditionalSurveyData(e) { + console.log(e); + }, drawDiagram() { const chartDiv = document.querySelector(".fairwayprofile"); d3.select("svg").remove();
--- a/client/src/fairway/store.js Tue Oct 23 13:05:47 2018 +0200 +++ b/client/src/fairway/store.js Tue Oct 23 14:28:43 2018 +0200 @@ -50,6 +50,9 @@ }, setFairwayCoordinates: (state, coordinates) => { state.fairwayCoordinates = coordinates; + }, + clearCurrentProfile: state => { + state.currentProfile = []; } },
--- a/client/src/morphtool/Morphtool.vue Tue Oct 23 13:05:47 2018 +0200 +++ b/client/src/morphtool/Morphtool.vue Tue Oct 23 14:28:43 2018 +0200 @@ -134,6 +134,10 @@ }) .then(response => { this.surveyList = response.data; + this.$store.commit( + "fairwayprofile/setAvailableSurveys", + response.data + ); }) .catch(error => { this.surveyList = null;