Mercurial > gemma
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"