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() {