From 780fce0fc83019f4641f0e86a9fbbf3cfe7bb2f1 Mon Sep 17 00:00:00 2001
From: Oliver Gerlich <oliver.gerlich@gmx.de>
Date: Mon, 16 Jul 2018 19:02:11 +0200
Subject: [PATCH] node page: display GPS coordinates next to toggle button

---
 webroot/css/styles.less |  4 ++++
 webroot/js/view/node.js | 14 ++++++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/webroot/css/styles.less b/webroot/css/styles.less
index 571873d..948dd53 100644
--- a/webroot/css/styles.less
+++ b/webroot/css/styles.less
@@ -13,6 +13,10 @@ body {
 	line-height: 1.3;
 	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
 }
+.withTextMargins {
+	margin-left: 0.5em;
+	margin-right: 0.5em;
+}
 span.online {
 	color: #009ee0;
 }
diff --git a/webroot/js/view/node.js b/webroot/js/view/node.js
index e112bcc..16c8828 100644
--- a/webroot/js/view/node.js
+++ b/webroot/js/view/node.js
@@ -98,6 +98,9 @@ export class NodeView extends View {
 				if (this.gpsPosition) {
 					this.updatePosition(this.gpsPosition.latitude, this.gpsPosition.longitude);
 				}
+				else {
+					this.gpsStatusText.innerHTML = "";
+				}
 				this.btnGPS.innerHTML = 'Start follow position';
 				navigator.geolocation.clearWatch(this.editLocationGPS);
 				this.editLocationGPS = null;
@@ -105,10 +108,15 @@ export class NodeView extends View {
 			}
 
 			this.gpsPosition = null;
-			this.btnGPS.innerHTML = 'Following position';
+			this.btnGPS.innerHTML = 'Stop following';
+			this.gpsStatusText.innerHTML = "waiting for location...";
 			if (navigator.geolocation) {
 				this.editLocationGPS = navigator.geolocation.watchPosition((position) => {
-					this.btnGPS.innerHTML = 'Stop following';
+					this.gpsStatusText.innerHTML = "GPS location at " +
+						new Date(position.timestamp).toLocaleTimeString() + ": " +
+						position.coords.latitude.toFixed(5) + " / " +
+						position.coords.longitude.toFixed(5);
+
 					this.gpsPosition = position.coords;
 					const latlng = [position.coords.latitude, position.coords.longitude];
 
@@ -132,6 +140,8 @@ export class NodeView extends View {
 				notify.send('error', 'Browser did not support Location');
 			}
 		});
+		this.gpsStatusText = domlib.newAt(this.el, 'span');
+		this.gpsStatusText.classList.add('withTextMargins');
 	}
 
 	updatePosition (lat, lng) {