node page: display GPS coordinates next to toggle button

This commit is contained in:
Oliver Gerlich 2018-07-16 19:02:11 +02:00
parent 7c60ebddf5
commit 780fce0fc8
2 changed files with 16 additions and 2 deletions

View File

@ -13,6 +13,10 @@ body {
line-height: 1.3; line-height: 1.3;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
} }
.withTextMargins {
margin-left: 0.5em;
margin-right: 0.5em;
}
span.online { span.online {
color: #009ee0; color: #009ee0;
} }

View File

@ -98,6 +98,9 @@ export class NodeView extends View {
if (this.gpsPosition) { if (this.gpsPosition) {
this.updatePosition(this.gpsPosition.latitude, this.gpsPosition.longitude); this.updatePosition(this.gpsPosition.latitude, this.gpsPosition.longitude);
} }
else {
this.gpsStatusText.innerHTML = "";
}
this.btnGPS.innerHTML = 'Start follow position'; this.btnGPS.innerHTML = 'Start follow position';
navigator.geolocation.clearWatch(this.editLocationGPS); navigator.geolocation.clearWatch(this.editLocationGPS);
this.editLocationGPS = null; this.editLocationGPS = null;
@ -105,10 +108,15 @@ export class NodeView extends View {
} }
this.gpsPosition = null; this.gpsPosition = null;
this.btnGPS.innerHTML = 'Following position'; this.btnGPS.innerHTML = 'Stop following';
this.gpsStatusText.innerHTML = "waiting for location...";
if (navigator.geolocation) { if (navigator.geolocation) {
this.editLocationGPS = navigator.geolocation.watchPosition((position) => { 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; this.gpsPosition = position.coords;
const latlng = [position.coords.latitude, position.coords.longitude]; 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'); notify.send('error', 'Browser did not support Location');
} }
}); });
this.gpsStatusText = domlib.newAt(this.el, 'span');
this.gpsStatusText.classList.add('withTextMargins');
} }
updatePosition (lat, lng) { updatePosition (lat, lng) {