Mercurial > gemma
diff client/src/components/map/fairway/Fairwayprofile.vue @ 1372:553aadd97087
new cross profile workflow (WIP)
Needs fixing of some bugs and not so nice looks.
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Tue, 27 Nov 2018 12:59:26 +0100 |
parents | ca33ad696594 |
children | 8b85032ed3cd |
line wrap: on
line diff
--- a/client/src/components/map/fairway/Fairwayprofile.vue Tue Nov 27 12:49:53 2018 +0100 +++ b/client/src/components/map/fairway/Fairwayprofile.vue Tue Nov 27 12:59:26 2018 +0100 @@ -23,94 +23,6 @@ >{{ selectedBottleneck }} ({{ selectedSurvey.date_info }})</h5> <div class="d-flex flex-fill"> <div class="fairwayprofile m-3 mt-0 bg-white flex-grow-1"></div> - <div class="additionalsurveys d-flex flex-column"> - <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" - > - <font-awesome-icon :icon="showLabelInput ? 'times' : 'folder-plus'" size="lg"/> - </button> - <button - v-clipboard:copy="coordinatesForClipboard" - v-clipboard:success="onCopyCoordinates" - class="btn btn-outline-secondary btn-sm ml-2 mt-auto" - > - <font-awesome-icon icon="copy"/> - </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;" - > - <font-awesome-icon icon="check"/> - </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;" - v-if="coordinatesInput" - > - <font-awesome-icon icon="check"/> - </button> - </div> - </small> - </div> </div> </div> </div> @@ -144,20 +56,6 @@ .show .profile height: 50vh - -.waterlevelselection - margin-top: $large-offset - margin-right: $large-offset - -.additionalsurveys - margin-top: $large-offset - margin-bottom: auto - margin-right: $large-offset - margin-left: auto - max-width: 300px - -.additionalsurveys input - margin-right: $small-offset </style> <script> @@ -176,16 +74,14 @@ */ import * as d3 from "d3"; import { mapState, mapGetters } from "vuex"; -import { displayError, displayInfo } from "../../../lib/errors.js"; -import Feature from "ol/Feature"; -import LineString from "ol/geom/LineString"; +import { displayError } from "../../../lib/errors.js"; import debounce from "debounce"; const GROUND_COLOR = "#4A2F06"; export default { name: "fairwayprofile", - props: ["xScale", "yScaleLeft", "yScaleRight", "margin", "additionalSurveys"], + props: ["xScale", "yScaleLeft", "yScaleRight"], data() { return { wait: false, @@ -194,7 +90,13 @@ cutLabel: "", showLabelInput: false, width: null, - height: null + height: null, + margin: { + top: 20, + right: 40, + bottom: 30, + left: 40 + } }; }, computed: { @@ -243,23 +145,9 @@ x => x.level === this.selectedWaterLevel ); return result.color; - }, - coordinatesForClipboard() { - return ( - this.startPoint[1] + - "," + - this.startPoint[0] + - "," + - this.endPoint[1] + - "," + - this.endPoint[0] - ); } }, watch: { - showSplitscreen() { - this.drawDiagram(); - }, currentData() { this.drawDiagram(); }, @@ -277,16 +165,6 @@ }, fairwayCoordinates() { this.drawDiagram(); - }, - selectedBottleneck() { - this.$store.dispatch("fairwayprofile/previousCuts"); - this.cutLabel = - this.selectedBottleneck + " (" + new Date().toISOString() + ")"; - }, - coordinatesSelect(newValue) { - if (newValue) { - this.applyCoordinates(newValue); - } } }, methods: { @@ -542,71 +420,6 @@ if (!clientHeight || !clientWidth) return; this.height = clientHeight; this.width = clientWidth; - }, - onCopyCoordinates() { - displayInfo({ - title: "Success", - message: "Coordinates copied to clipboard!" - }); - }, - applyManualCoordinates() { - const coordinates = this.coordinatesInput - .split(",") - .map(coord => parseFloat(coord.trim())); - this.applyCoordinates([ - coordinates[1], - coordinates[0], - coordinates[3], - coordinates[2] - ]); - }, - applyCoordinates(coordinates) { - // allow only numbers - coordinates = coordinates.filter(c => Number(c) === c); - 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); - } else { - displayError({ - title: "Invalid input", - message: - "Please enter correct coordinates in the format: Lat,Lon,Lat,Lon" - }); - } - }, - 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.' - }); } }, created() {