Mercurial > gemma
changeset 1178:1ffb4b9ca5ee
merge
| author | Markus Kottlaender <markus@intevation.de> |
|---|---|
| date | Thu, 15 Nov 2018 09:30:05 +0100 |
| parents | 48ae4458710d (diff) 2014711330dd (current diff) |
| children | 320e2720fe3d |
| files | client/src/imports/Importqueue.vue client/src/imports/Job.vue |
| diffstat | 2 files changed, 146 insertions(+), 61 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/fairway/Fairwayprofile.vue Wed Nov 14 16:12:30 2018 +0100 +++ b/client/src/fairway/Fairwayprofile.vue Thu Nov 15 09:30:05 2018 +0100 @@ -12,44 +12,73 @@ v-if="showSplitscreen"> <i class="fa fa-times text-danger"></i> </button> - <div class="profile d-flex flex-column"> + <div class="profile d-flex flex-column pr-5"> <h5 class="mb-0 mt-2">{{ selectedBottleneck }} ({{ selectedSurvey.date_info }})</h5> <div class="d-flex flex-fill"> - <div class="fairwayprofile flex-fill"></div> + <div class="fairwayprofile flex-grow-1"></div> <div class="additionalsurveys d-flex flex-column"> - <small class="label">Available Additional Surveys</small> - <select v-model="additionalSurvey"> - <option value="">None</option> - <option - v-for="survey in additionalSurveys" - :key="survey.date_info" - :value="survey" - >{{survey.date_info}}</option> - </select> - <small class="mt-2"> - <b>Start:</b> - <br> - Lat: {{ startPoint[1] }} - <br> - Lon: {{ startPoint[0] }} - <br> - <b>End:</b> - <br> - Lat: {{ endPoint[1] }} - <br> - Lon: {{ endPoint[0] }} - <br> - <button v-clipboard:copy="coordinatesForClipboard" - v-clipboard:success="onCopyCoordinates" - class="btn btn-outline-secondary btn-sm mt-2"> - Copy coordinates - </button><br> - <br> - Enter coordinates - <input class="form-control mt-2" placeholder="Lat,Lon,Lat,Lon" v-model="coordinatesInput" /><br> - <button class="btn btn-sm btn-outline-secondary" @click="applyCoordinates"> - Apply - </button> + <small> + Additional Surveys + <select v-model="additionalSurvey" class="form-control form-control-sm"> + <option value="">None</option> + <option + v-for="survey in additionalSurveys" + :key="survey.date_info" + :value="survey" + >{{survey.date_info}}</option> + </select> + <hr> + <div class="d-flex text-left mb-2"> + <div class="text-nowrap mr-1"> + <b>Start:</b> + <br> + Lat: {{ startPoint[1] }} + <br> + Lon: {{ startPoint[0] }} + </div> + <div class="text-nowrap ml-1"> + <b>End:</b> + <br> + Lat: {{ endPoint[1] }} + <br> + Lon: {{ endPoint[0] }} + </div> + <button class="btn btn-outline-secondary btn-sm ml-2 mt-auto" + @click="showLabelInput = !showLabelInput"> + <i :class="'fa fa-' + (showLabelInput ? 'times' : 'save')"></i> + </button> + <button v-clipboard:copy="coordinatesForClipboard" + v-clipboard:success="onCopyCoordinates" + class="btn btn-outline-secondary btn-sm ml-2 mt-auto"> + <i class="fa fa-copy"></i> + </button> + </div> + <div v-if="showLabelInput"> + Enter label for cross profile: + <div class="position-relative"> + <input class="form-control form-control-sm pr-5" v-model="cutLabel" /><br> + <button class="btn btn-sm btn-outline-secondary position-absolute" + @click="saveCut" + v-if="cutLabel" + style="top: 0; right: 0;"> + <i class="fa fa-check"></i> + </button> + </div> + </div> + Saved cross profiles: + <select class="form-control form-control-sm mb-2" v-model="coordinatesSelect"> + <option></option> + <option v-for="(cut, index) in previousCuts" :value="cut.coordinates" :key="index"> + {{ cut.label }} + </option> + </select> + Enter coordinates manually: + <div class="position-relative"> + <input class="form-control form-control-sm pr-5" placeholder="Lat,Lon,Lat,Lon" v-model="coordinatesInput" /><br> + <button class="btn btn-sm btn-outline-secondary position-absolute" @click="applyManualCoordinates" style="top: 0; right: 0;"> + <i class="fa fa-check"></i> + </button> + </div> </small> </div> </div> @@ -82,19 +111,16 @@ .profile height: 50vh -.label - margin-bottom: $small-offset - .waterlevelselection margin-top: $large-offset margin-right: $large-offset .additionalsurveys - width: 200px margin-top: $large-offset margin-bottom: auto margin-right: $large-offset margin-left: auto + max-width: 300px .additionalsurveys input margin-right: $small-offset @@ -142,7 +168,10 @@ data() { return { wait: false, - coordinatesInput: "" + coordinatesInput: "", + coordinatesSelect: null, + cutLabel: "", + showLabelInput: false }; }, computed: { @@ -157,7 +186,8 @@ "totalLength", "fairwayCoordinates", "waterLevels", - "selectedWaterLevel" + "selectedWaterLevel", + "previousCuts" ]), ...mapState("bottlenecks", ["selectedBottleneck", "selectedSurvey"]), additionalSurvey: { @@ -224,6 +254,14 @@ }, fairwayCoordinates() { this.drawDiagram(); + }, + selectedBottleneck() { + this.$store.dispatch("fairwayprofile/previousCuts"); + this.cutLabel = + this.selectedBottleneck + " (" + new Date().toISOString() + ")"; + }, + coordinatesSelect(newValue) { + this.applyCoordinates(newValue); } }, methods: { @@ -257,6 +295,7 @@ }); }, drawDiagram() { + this.coordinatesSelect = null; const chartDiv = document.querySelector(".fairwayprofile"); d3.select("svg").remove(); let svg = d3.select(chartDiv).append("svg"); @@ -475,27 +514,56 @@ message: "Coordinates copied to clipboard!" }); }, - applyCoordinates() { - if (this.coordinatesInput) { - const coordinates = this.coordinatesInput - .split(",") - .map(coord => parseFloat(coord.trim())); - if (coordinates.length === 4) { - // draw line on map - const cutLayer = this.getLayerByName("Cut Tool"); - cutLayer.data.getSource().clear(); - const cut = new Feature({ - geometry: new LineString([ - [coordinates[1], coordinates[0]], - [coordinates[3], coordinates[2]] - ]).transform("EPSG:4326", "EPSG:3857") - }); - cutLayer.data.getSource().addFeature(cut); + applyManualCoordinates() { + const coordinates = this.coordinatesInput + .split(",") + .map(coord => parseFloat(coord.trim())); + this.applyCoordinates([ + coordinates[1], + coordinates[0], + coordinates[3], + coordinates[2] + ]); + }, + applyCoordinates(coordinates) { + if (coordinates.length === 4) { + // draw line on map + const cutLayer = this.getLayerByName("Cut Tool"); + cutLayer.data.getSource().clear(); + const cut = new Feature({ + geometry: new LineString([ + [coordinates[0], coordinates[1]], + [coordinates[2], coordinates[3]] + ]).transform("EPSG:4326", "EPSG:3857") + }); + cutLayer.data.getSource().addFeature(cut); - // draw diagram - this.$store.dispatch("fairwayprofile/cut", cut); - } + // draw diagram + this.$store.dispatch("fairwayprofile/cut", cut); } + }, + saveCut() { + const previousCuts = + JSON.parse(localStorage.getItem("previousCuts")) || []; + const newEntry = { + label: this.cutLabel, + bottleneckName: this.selectedBottleneck, + coordinates: [...this.startPoint, ...this.endPoint] + }; + const existingEntry = previousCuts.find(cut => { + return JSON.stringify(cut) === JSON.stringify(newEntry); + }); + if (!existingEntry) previousCuts.push(newEntry); + if (previousCuts.length > 100) previousCuts.shift(); + localStorage.setItem("previousCuts", JSON.stringify(previousCuts)); + this.$store.dispatch("fairwayprofile/previousCuts"); + + this.showLabelInput = false; + displayInfo({ + title: "Coordinates saved!", + message: + 'You can now select these coordinates from the "Saved cross profiles" menu to restore this cross profile.' + }); } }, mounted() {
--- a/client/src/store/fairway.js Wed Nov 14 16:12:30 2018 +0100 +++ b/client/src/store/fairway.js Thu Nov 15 09:30:05 2018 +0100 @@ -37,7 +37,8 @@ selectedWaterLevel: DEMOLEVEL, fairwayCoordinates: [], startPoint: null, - endPoint: null + endPoint: null, + previousCuts: [] }, getters: { length: state => { @@ -94,6 +95,9 @@ state.fairwayCoordinates = []; state.startPoint = null; state.endPoint = null; + }, + previousCuts: (state, previousCuts) => { + state.previousCuts = previousCuts; } }, actions: { @@ -184,6 +188,7 @@ commit("application/showSplitscreen", true, { root: true }); }) .catch(error => { + console.log(error); const { status, data } = error.response; displayError({ title: "Backend Error", @@ -191,6 +196,18 @@ }); }); } + }, + previousCuts({ commit, rootState }) { + const previousCuts = + JSON.parse(localStorage.getItem("previousCuts")) || []; + commit( + "previousCuts", + previousCuts.filter(cut => { + return ( + cut.bottleneckName === rootState.bottlenecks.selectedBottleneck + ); + }) + ); } } };