diff client/src/fairway/Fairwayprofile.vue @ 1163:fb5c83d4ea1d

added copy coordinates button to fairway profile
author Markus Kottlaender <markus@intevation.de>
date Wed, 14 Nov 2018 07:29:51 +0100
parents 74e180ad3d6b
children dc99decbf9e3
line wrap: on
line diff
--- a/client/src/fairway/Fairwayprofile.vue	Tue Nov 13 17:22:32 2018 +0100
+++ b/client/src/fairway/Fairwayprofile.vue	Wed Nov 14 07:29:51 2018 +0100
@@ -39,6 +39,11 @@
                         <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>
                     </small>
                 </div>
             </div>
@@ -112,7 +117,7 @@
  */
 import * as d3 from "d3";
 import { mapState } from "vuex";
-import { displayError } from "../application/lib/errors.js";
+import { displayError, displayInfo } from "../application/lib/errors.js";
 
 const GROUND_COLOR = "#4A2F06";
 
@@ -171,6 +176,17 @@
         x => x.level === this.selectedWaterLevel
       );
       return result.color;
+    },
+    coordinatesForClipboard() {
+      return (
+        this.startPoint[1] +
+        "," +
+        this.startPoint[0] +
+        "," +
+        this.endPoint[1] +
+        "," +
+        this.endPoint[0]
+      );
     }
   },
   data() {
@@ -443,6 +459,12 @@
           .attr("fill-opacity", opacity)
           .attr("d", profileLine);
       }
+    },
+    onCopyCoordinates() {
+      displayInfo({
+        title: "Success",
+        message: "Coordinates copied to clipboard!"
+      });
     }
   },
   mounted() {