Mercurial > gemma
comparison 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 |
comparison
equal
deleted
inserted
replaced
1162:fae17a9dee9e | 1163:fb5c83d4ea1d |
---|---|
37 <br> | 37 <br> |
38 Lat: {{ endPoint[1] }} | 38 Lat: {{ endPoint[1] }} |
39 <br> | 39 <br> |
40 Lon: {{ endPoint[0] }} | 40 Lon: {{ endPoint[0] }} |
41 <br> | 41 <br> |
42 <button v-clipboard:copy="coordinatesForClipboard" | |
43 v-clipboard:success="onCopyCoordinates" | |
44 class="btn btn-outline-secondary btn-sm mt-2"> | |
45 Copy coordinates | |
46 </button> | |
42 </small> | 47 </small> |
43 </div> | 48 </div> |
44 </div> | 49 </div> |
45 </div> | 50 </div> |
46 </div> | 51 </div> |
110 * Author(s): | 115 * Author(s): |
111 * Thomas Junk <thomas.junk@intevation.de> | 116 * Thomas Junk <thomas.junk@intevation.de> |
112 */ | 117 */ |
113 import * as d3 from "d3"; | 118 import * as d3 from "d3"; |
114 import { mapState } from "vuex"; | 119 import { mapState } from "vuex"; |
115 import { displayError } from "../application/lib/errors.js"; | 120 import { displayError, displayInfo } from "../application/lib/errors.js"; |
116 | 121 |
117 const GROUND_COLOR = "#4A2F06"; | 122 const GROUND_COLOR = "#4A2F06"; |
118 | 123 |
119 export default { | 124 export default { |
120 name: "fairwayprofile", | 125 name: "fairwayprofile", |
169 waterColor() { | 174 waterColor() { |
170 const result = this.waterLevels.find( | 175 const result = this.waterLevels.find( |
171 x => x.level === this.selectedWaterLevel | 176 x => x.level === this.selectedWaterLevel |
172 ); | 177 ); |
173 return result.color; | 178 return result.color; |
179 }, | |
180 coordinatesForClipboard() { | |
181 return ( | |
182 this.startPoint[1] + | |
183 "," + | |
184 this.startPoint[0] + | |
185 "," + | |
186 this.endPoint[1] + | |
187 "," + | |
188 this.endPoint[0] | |
189 ); | |
174 } | 190 } |
175 }, | 191 }, |
176 data() { | 192 data() { |
177 return { | 193 return { |
178 wait: false | 194 wait: false |
441 .attr("stroke-width", 3) | 457 .attr("stroke-width", 3) |
442 .attr("stroke-opacity", opacity) | 458 .attr("stroke-opacity", opacity) |
443 .attr("fill-opacity", opacity) | 459 .attr("fill-opacity", opacity) |
444 .attr("d", profileLine); | 460 .attr("d", profileLine); |
445 } | 461 } |
462 }, | |
463 onCopyCoordinates() { | |
464 displayInfo({ | |
465 title: "Success", | |
466 message: "Coordinates copied to clipboard!" | |
467 }); | |
446 } | 468 } |
447 }, | 469 }, |
448 mounted() { | 470 mounted() { |
449 this.drawDiagram(); | 471 this.drawDiagram(); |
450 } | 472 } |