Fixes to the geolocation flow

This commit is contained in:
Pieter Vander Vennet 2022-12-23 15:52:22 +01:00
parent b0bbae2ce6
commit bd5e9903bd
3 changed files with 18 additions and 7 deletions

View file

@ -8,6 +8,7 @@ import { UIEventSource } from "../UIEventSource"
/** /**
* The geolocation-handler takes a map-location and a geolocation state. * The geolocation-handler takes a map-location and a geolocation state.
* It'll move the map as appropriate given the state of the geolocation-API * It'll move the map as appropriate given the state of the geolocation-API
* It will also copy the geolocation into the appropriate FeatureSource to display on the map
*/ */
export default class GeoLocationHandler { export default class GeoLocationHandler {
public readonly geolocationState: GeoLocationState public readonly geolocationState: GeoLocationState
@ -117,7 +118,11 @@ export default class GeoLocationHandler {
private CopyGeolocationIntoMapstate() { private CopyGeolocationIntoMapstate() {
const state = this._state const state = this._state
this.geolocationState.currentGPSLocation.addCallbackAndRunD((location) => { this.geolocationState.currentGPSLocation.addCallbackAndRun((location) => {
if (location === undefined) {
state.currentUserLocation?.features?.setData([])
return
}
const feature = { const feature = {
type: "Feature", type: "Feature",
properties: <GeoLocationPointProperties>{ properties: <GeoLocationPointProperties>{

View file

@ -57,7 +57,6 @@ export class GeoLocationState {
if (state === "granted") { if (state === "granted") {
self._previousLocationGrant.setData("true") self._previousLocationGrant.setData("true")
self._grantedThisSession.setData(true) self._grantedThisSession.setData(true)
await self.startWatching()
} }
if (state === "prompt" && self._grantedThisSession.data) { if (state === "prompt" && self._grantedThisSession.data) {
// This is _really_ weird: we had a grant earlier, but it's 'prompt' now? // This is _really_ weird: we had a grant earlier, but it's 'prompt' now?
@ -65,6 +64,7 @@ export class GeoLocationState {
// self.permission.setData("denied") // self.permission.setData("denied")
self._previousLocationGrant.setData("false") self._previousLocationGrant.setData("false")
self.permission.setData("denied") self.permission.setData("denied")
self.currentGPSLocation.setData(undefined)
console.warn("Detected a downgrade in permissions!") console.warn("Detected a downgrade in permissions!")
} }
if (state === "denied") { if (state === "denied") {
@ -72,6 +72,7 @@ export class GeoLocationState {
} }
}) })
console.log("Previous location grant:", this._previousLocationGrant.data)
if (this._previousLocationGrant.data === "true") { if (this._previousLocationGrant.data === "true") {
// A previous visit successfully granted permission. Chance is high that we are allowed to use it again! // A previous visit successfully granted permission. Chance is high that we are allowed to use it again!
@ -80,6 +81,7 @@ export class GeoLocationState {
console.log("Requesting access to GPS as this was previously granted") console.log("Requesting access to GPS as this was previously granted")
this.requestPermission() this.requestPermission()
} }
window["geolocation_state"] = this
} }
/** /**
@ -91,6 +93,7 @@ export class GeoLocationState {
navigator.geolocation.watchPosition( navigator.geolocation.watchPosition(
function (position) { function (position) {
self.currentGPSLocation.setData(position.coords) self.currentGPSLocation.setData(position.coords)
self._previousLocationGrant.setData("true")
}, },
function () { function () {
console.warn("Could not get location with navigator.geolocation") console.warn("Could not get location with navigator.geolocation")
@ -121,12 +124,13 @@ export class GeoLocationState {
navigator?.permissions navigator?.permissions
?.query({ name: "geolocation" }) ?.query({ name: "geolocation" })
.then((status) => { .then((status) => {
console.log("Geolocation permission is ", status.state) console.log("Status update: received geolocation permission is ", status.state)
this.permission.setData(status.state) this.permission.setData(status.state)
const self = this const self = this
status.onchange = function () { status.onchange = function () {
self.permission.setData(status.state) self.permission.setData(status.state)
} }
this.permission.setData("requested")
// We _must_ call 'startWatching', as that is the actual trigger for the popup... // We _must_ call 'startWatching', as that is the actual trigger for the popup...
self.startWatching() self.startWatching()
}) })

View file

@ -28,10 +28,10 @@ export class GeolocationControl extends VariableUiElement {
return Svg.location_locked_svg() return Svg.location_locked_svg()
} }
if (geolocationState.currentGPSLocation.data === undefined) {
if (permission === "prompt") { if (permission === "prompt") {
return Svg.location_empty_svg() return Svg.location_empty_svg()
} }
if (geolocationState.currentGPSLocation === undefined) {
// Position not yet found, but permission is either requested or granted: we spin to indicate activity // Position not yet found, but permission is either requested or granted: we spin to indicate activity
const icon = !geolocationHandler.mapHasMoved.data const icon = !geolocationHandler.mapHasMoved.data
? Svg.location_svg() ? Svg.location_svg()
@ -41,6 +41,8 @@ export class GeolocationControl extends VariableUiElement {
.SetStyle("animation: spin 4s linear infinite;") .SetStyle("animation: spin 4s linear infinite;")
} }
// We have a location, so we show a dot in the center
if ( if (
lastClickWithinThreeSecs.data && lastClickWithinThreeSecs.data &&
geolocationState.permission.data === "granted" geolocationState.permission.data === "granted"