changeset 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 fae17a9dee9e
children dc99decbf9e3
files client/package.json client/src/fairway/Fairwayprofile.vue client/src/main.js client/yarn.lock
diffstat 4 files changed, 65 insertions(+), 1 deletions(-) [+]
line wrap: on
line diff
--- a/client/package.json	Tue Nov 13 17:22:32 2018 +0100
+++ b/client/package.json	Wed Nov 14 07:29:51 2018 +0100
@@ -31,6 +31,7 @@
     "purgecss-webpack-plugin": "^1.2.1",
     "v-tooltip": "^2.0.0-rc.33",
     "vue": "^2.5.16",
+    "vue-clipboard2": "^0.2.1",
     "vue-color": "^2.6.0",
     "vue-highlightjs": "^1.3.3",
     "vue-router": "^3.0.1",
--- 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() {
--- a/client/src/main.js	Tue Nov 13 17:22:32 2018 +0100
+++ b/client/src/main.js	Wed Nov 14 07:29:51 2018 +0100
@@ -31,12 +31,15 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import VueClipboard from "vue-clipboard2";
 
 library.add(faEye, faEyeSlash);
 Vue.component("font-awesome-icon", FontAwesomeIcon);
 
 Vue.use(VTooltip);
 
+Vue.use(VueClipboard);
+
 var toastrConfigs = {
   position: "bottom center",
   showDuration: 2000,
--- a/client/yarn.lock	Tue Nov 13 17:22:32 2018 +0100
+++ b/client/yarn.lock	Wed Nov 14 07:29:51 2018 +0100
@@ -2455,6 +2455,15 @@
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
   integrity sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=
 
+clipboard@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.4.tgz#836dafd66cf0fea5d71ce5d5b0bf6e958009112d"
+  integrity sha512-Vw26VSLRpJfBofiVaFb/I8PVfdI1OxKcYShe6fm0sP/DtmiWQNCjhM/okTvdCo0G+lMMm1rMYbk4IK4x1X+kgQ==
+  dependencies:
+    good-listener "^1.2.2"
+    select "^1.1.2"
+    tiny-emitter "^2.0.0"
+
 clipboardy@^1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/clipboardy/-/clipboardy-1.2.3.tgz#0526361bf78724c1f20be248d428e365433c07ef"
@@ -3571,6 +3580,11 @@
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
 
+delegate@^3.1.2:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
+  integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==
+
 delegates@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
@@ -4935,6 +4949,13 @@
     lodash "~4.17.10"
     minimatch "~3.0.2"
 
+good-listener@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
+  integrity sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=
+  dependencies:
+    delegate "^3.1.2"
+
 graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6:
   version "4.1.15"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.15.tgz#ffb703e1066e8a0eeaa4c8b80ba9253eeefbfb00"
@@ -9429,6 +9450,11 @@
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
   integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=
 
+select@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
+  integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=
+
 selenium-server@^3.14.0:
   version "3.141.0"
   resolved "https://registry.yarnpkg.com/selenium-server/-/selenium-server-3.141.0.tgz#20e550518a36a50d05f11741e6cdf6a0597c09c9"
@@ -10225,6 +10251,11 @@
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tiny-emitter@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.0.2.tgz#82d27468aca5ade8e5fd1e6d22b57dd43ebdfb7c"
+  integrity sha512-2NM0auVBGft5tee/OxP4PI3d8WItkDM+fPnaRAVo6xTDI2knbz9eC5ArWGqtGlYqiH3RU5yMpdyTTO7MguC4ow==
+
 tinycolor2@^1.1.2:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
@@ -10670,6 +10701,13 @@
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
   integrity sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=
 
+vue-clipboard2@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/vue-clipboard2/-/vue-clipboard2-0.2.1.tgz#9f06690af1c98aef344be1fc4beb00cdc5307ee1"
+  integrity sha512-n6ie/0g0bKohmLlC/5ja1esq2Q0jQ5hWmhNSZcvCsWfDeDnVARjl6cBB9p72XV1nlVfuqsZcfV8HTjjZAIlLBA==
+  dependencies:
+    clipboard "^2.0.0"
+
 vue-color@^2.6.0:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/vue-color/-/vue-color-2.7.0.tgz#31e898370a5786fd6c3007388cb7242db6ba6988"