UX: add pending changes indicator

This commit is contained in:
Pieter Vander Vennet 2023-10-16 13:38:11 +02:00
parent 09e50464b8
commit d7d6c3142c
6 changed files with 56 additions and 16 deletions

View file

@ -5,23 +5,11 @@ import { Utils } from "../../Utils"
import { Feature } from "geojson"
export default class PendingChangesUploader {
private lastChange: Date
constructor(changes: Changes, selectedFeature: UIEventSource<Feature>) {
const self = this
this.lastChange = new Date()
changes.pendingChanges.addCallback(() => {
self.lastChange = new Date()
changes.pendingChanges.stabilized(Constants.updateTimeoutSec * 1000).addCallback(() => changes.flushChanges("Flushing changes due to timeout"))
window.setTimeout(() => {
const diff = (new Date().getTime() - self.lastChange.getTime()) / 1000
if (Constants.updateTimeoutSec >= diff - 1) {
changes.flushChanges("Flushing changes due to timeout")
}
}, Constants.updateTimeoutSec * 1000)
})
selectedFeature.stabilized(10000).addCallback((feature) => {
selectedFeature.stabilized(1000).addCallback((feature) => {
if (feature === undefined) {
// The popup got closed - we flush
changes.flushChanges("Flushing changes due to popup closed")

View file

@ -26,6 +26,7 @@ export class Changes {
public readonly extraComment: UIEventSource<string> = new UIEventSource(undefined)
public readonly backend: string
public readonly isUploading = new UIEventSource(false)
public readonly errors = new UIEventSource<string[]>([], "upload-errors")
private readonly historicalUserLocations?: FeatureSource
private _nextId: number = -1 // Newly assigned ID's are negative
private readonly previouslyCreated: OsmObject[] = []
@ -128,8 +129,11 @@ export class Changes {
const csNumber = await this.flushChangesAsync()
this.isUploading.setData(false)
console.log("Changes flushed. Your changeset is " + csNumber)
this.errors.setData([])
} catch (e) {
this.isUploading.setData(false)
this.errors.data.push(e)
this.errors.ping()
console.error("Flushing changes failed due to", e)
}
}
@ -415,6 +419,8 @@ export class Changes {
id,
" dropping it from the changes (" + e + ")"
)
this.errors.data.push(e)
this.errors.ping()
return undefined
}
})
@ -572,9 +578,15 @@ export class Changes {
openChangeset.data
)
return await self.flushSelectChanges(pendingChanges, openChangeset)
const result = await self.flushSelectChanges(pendingChanges, openChangeset)
if(result){
this.errors.setData([])
}
return result
} catch (e) {
console.error("Could not upload some changes:", e)
this.errors.data.push(e)
this.errors.ping()
return false
}
})
@ -589,6 +601,8 @@ export class Changes {
"Could not handle changes - probably an old, pending changeset in localstorage with an invalid format; erasing those",
e
)
this.errors.data.push(e)
this.errors.ping()
self.pendingChanges.setData([])
} finally {
self.isUploading.setData(false)