From 177788658b8cb5c0b999e6d8da9c3c1cd54e13d6 Mon Sep 17 00:00:00 2001
From: Candid Dauth <cdauth@cdauth.eu>
Date: Wed, 11 Aug 2021 12:19:55 +0200
Subject: [PATCH] Add coordinates to POI info and make them copyable

---
 .../lib/components/marker-info/marker-info.ts |  3 ++-
 .../components/marker-info/marker-info.vue    |  2 +-
 .../components/overpass-info/overpass-info.ts |  3 ++-
 .../overpass-info/overpass-info.vue           |  3 +++
 .../search-result-info/search-result-info.ts  |  3 ++-
 .../search-result-info/search-result-info.vue |  2 +-
 .../ui/coordinates/coordinates.scss           |  9 +++++++
 .../components/ui/coordinates/coordinates.ts  | 27 +++++++++++++++++++
 .../components/ui/coordinates/coordinates.vue |  4 +++
 leaflet/src/utils/icons.ts                    |  2 +-
 10 files changed, 52 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/lib/components/ui/coordinates/coordinates.scss
 create mode 100644 frontend/src/lib/components/ui/coordinates/coordinates.ts
 create mode 100644 frontend/src/lib/components/ui/coordinates/coordinates.vue

diff --git a/frontend/src/lib/components/marker-info/marker-info.ts b/frontend/src/lib/components/marker-info/marker-info.ts
index 4209aca8..7d0bc7fe 100644
--- a/frontend/src/lib/components/marker-info/marker-info.ts
+++ b/frontend/src/lib/components/marker-info/marker-info.ts
@@ -13,10 +13,11 @@ import { flyTo, getZoomDestinationForMarker } from "../../utils/zoom";
 import Icon from "../ui/icon/icon";
 import StringMap from "../../utils/string-map";
 import { Context } from "../facilmap/facilmap";
+import Coordinates from "../ui/coordinates/coordinates";
 
 @WithRender
 @Component({
-	components: { EditMarker, Icon }
+	components: { Coordinates, EditMarker, Icon }
 })
 export default class MarkerInfo extends Vue {
 
diff --git a/frontend/src/lib/components/marker-info/marker-info.vue b/frontend/src/lib/components/marker-info/marker-info.vue
index adba4af0..65d633b1 100644
--- a/frontend/src/lib/components/marker-info/marker-info.vue
+++ b/frontend/src/lib/components/marker-info/marker-info.vue
@@ -5,7 +5,7 @@
 	</h2>
 	<dl class="fm-search-box-collapse-point">
 		<dt class="pos">Coordinates</dt>
-		<dd class="pos">{{marker.lat | round(5)}}, {{marker.lon | round(5)}}</dd>
+		<dd class="pos"><Coordinates :point="marker"></Coordinates></dd>
 
 		<template v-if="marker.ele != null">
 			<dt class="elevation">Elevation</dt>
diff --git a/frontend/src/lib/components/overpass-info/overpass-info.ts b/frontend/src/lib/components/overpass-info/overpass-info.ts
index a01c555b..b4a8ae2c 100644
--- a/frontend/src/lib/components/overpass-info/overpass-info.ts
+++ b/frontend/src/lib/components/overpass-info/overpass-info.ts
@@ -10,10 +10,11 @@ import { MapComponents, MapContext } from "../leaflet-map/leaflet-map";
 import { flyTo, getZoomDestinationForMarker } from "../../utils/zoom";
 import { Context } from "../facilmap/facilmap";
 import { OverpassElement } from "facilmap-leaflet";
+import Coordinates from "../ui/coordinates/coordinates";
 
 @WithRender
 @Component({
-	components: { Icon }
+	components: { Coordinates, Icon }
 })
 export default class OverpassInfo extends Vue {
 
diff --git a/frontend/src/lib/components/overpass-info/overpass-info.vue b/frontend/src/lib/components/overpass-info/overpass-info.vue
index 6d6af324..e8d1afc8 100644
--- a/frontend/src/lib/components/overpass-info/overpass-info.vue
+++ b/frontend/src/lib/components/overpass-info/overpass-info.vue
@@ -4,6 +4,9 @@
 		{{element.tags.name || 'Unnamed POI'}}
 	</h2>
 	<dl class="fm-search-box-collapse-point">
+		<dt>Coordinates</dt>
+		<dd><Coordinates :point="element"></Coordinates></dd>
+
 		<template v-for="(value, key) in element.tags">
 			<dt>{{key}}</dt>
 			<dd v-html="renderOsmTag(key, value)"></dd>
diff --git a/frontend/src/lib/components/search-result-info/search-result-info.ts b/frontend/src/lib/components/search-result-info/search-result-info.ts
index ed078165..e6e5e955 100644
--- a/frontend/src/lib/components/search-result-info/search-result-info.ts
+++ b/frontend/src/lib/components/search-result-info/search-result-info.ts
@@ -11,10 +11,11 @@ import { MapComponents, MapContext } from "../leaflet-map/leaflet-map";
 import { isLineResult, isMarkerResult } from "../../utils/search";
 import { flyTo, getZoomDestinationForSearchResult } from "../../utils/zoom";
 import { Context } from "../facilmap/facilmap";
+import Coordinates from "../ui/coordinates/coordinates";
 
 @WithRender
 @Component({
-	components: { Icon }
+	components: { Coordinates, Icon }
 })
 export default class SearchResultInfo extends Vue {
 
diff --git a/frontend/src/lib/components/search-result-info/search-result-info.vue b/frontend/src/lib/components/search-result-info/search-result-info.vue
index 0ea1b089..8f631498 100644
--- a/frontend/src/lib/components/search-result-info/search-result-info.vue
+++ b/frontend/src/lib/components/search-result-info/search-result-info.vue
@@ -11,7 +11,7 @@
 		<dd v-if="result.address">{{result.address}}</dd>
 
 		<dt v-if="result.type != 'coordinates' && result.lat != null && result.lon != null">Coordinates</dt>
-		<dd v-if="result.type != 'coordinates' && result.lat != null && result.lon != null">{{result.lat | round(5)}}, {{result.lon | round(5)}}</dd>
+		<dd v-if="result.type != 'coordinates' && result.lat != null && result.lon != null"><Coordinates :point="result"></Coordinates></dd>
 
 		<dt v-if="result.elevation != null">Elevation</dt>
 		<dd v-if="result.elevation != null">{{result.elevation}} m</dd>
diff --git a/frontend/src/lib/components/ui/coordinates/coordinates.scss b/frontend/src/lib/components/ui/coordinates/coordinates.scss
new file mode 100644
index 00000000..60fb8107
--- /dev/null
+++ b/frontend/src/lib/components/ui/coordinates/coordinates.scss
@@ -0,0 +1,9 @@
+.fm-coordinates {
+	button {
+		margin-left: 0.5rem;
+		padding: 0 0.25rem;
+		line-height: 1;
+		font-size: 0.85em;
+		vertical-align: top;
+	}
+}
\ No newline at end of file
diff --git a/frontend/src/lib/components/ui/coordinates/coordinates.ts b/frontend/src/lib/components/ui/coordinates/coordinates.ts
new file mode 100644
index 00000000..bb829652
--- /dev/null
+++ b/frontend/src/lib/components/ui/coordinates/coordinates.ts
@@ -0,0 +1,27 @@
+import WithRender from "./coordinates.vue";
+import Vue from "vue";
+import { Component, Prop } from "vue-property-decorator";
+import { Point } from "facilmap-types";
+import "./coordinates.scss";
+import copyToClipboard from "copy-to-clipboard";
+import { round } from "facilmap-utils";
+import Icon from "../icon/icon";
+
+@WithRender
+@Component({
+	components: { Icon }
+})
+export default class Coordinates extends Vue {
+
+	@Prop({ type: String }) point!: Point;
+
+	get formattedCoordinates(): string {
+		return `${round(this.point.lat, 5)}, ${round(this.point.lon, 5)}`;
+	}
+
+	copy(): void {
+		copyToClipboard(this.formattedCoordinates);
+		this.$bvToast.toast("The coordinates were copied to the clipboard.", { variant: "success", title: "Coordinates copied" });
+	}
+
+}
\ No newline at end of file
diff --git a/frontend/src/lib/components/ui/coordinates/coordinates.vue b/frontend/src/lib/components/ui/coordinates/coordinates.vue
new file mode 100644
index 00000000..deed7dbf
--- /dev/null
+++ b/frontend/src/lib/components/ui/coordinates/coordinates.vue
@@ -0,0 +1,4 @@
+<span class="fm-coordinates">
+	<span>{{formattedCoordinates}}</span>
+	<b-button @click="copy()" v-b-tooltip.hover="'Copy to clipboard'"><Icon icon="copy" alt="Copy to clipboard"></Icon></b-button>
+</span>
\ No newline at end of file
diff --git a/leaflet/src/utils/icons.ts b/leaflet/src/utils/icons.ts
index bc89eab1..fd64cf41 100644
--- a/leaflet/src/utils/icons.ts
+++ b/leaflet/src/utils/icons.ts
@@ -15,7 +15,7 @@ for (const key of rawIconsContext.keys() as string[]) {
 }
 
 rawIcons["fontawesome"] = {};
-for (const name of ["arrow-left", "arrow-right", "biking", "car-alt", "chart-line", "info-circle", "slash", "walking"]) {
+for (const name of ["arrow-left", "arrow-right", "biking", "car-alt", "chart-line", "copy", "info-circle", "slash", "walking"]) {
 	rawIcons["fontawesome"][name] = require(`@fortawesome/fontawesome-free/svgs/solid/${name}.svg`);
 }