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 }