forked from MapComplete/MapComplete
More refactoring and fixes
This commit is contained in:
parent
1bc7d9118a
commit
9877abec17
14 changed files with 375 additions and 151 deletions
|
@ -20,17 +20,15 @@ export default class RememberingSource implements FeatureSource, Tiled {
|
||||||
this.bbox = source.bbox;
|
this.bbox = source.bbox;
|
||||||
|
|
||||||
const empty = [];
|
const empty = [];
|
||||||
this.features = source.features.map(features => {
|
const featureSource = new UIEventSource<{feature: any, freshness: Date}[]>(empty)
|
||||||
|
this.features = featureSource
|
||||||
|
source.features.addCallbackAndRunD(features => {
|
||||||
const oldFeatures = self.features?.data ?? empty;
|
const oldFeatures = self.features?.data ?? empty;
|
||||||
if (features === undefined) {
|
|
||||||
return oldFeatures;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Then new ids
|
// Then new ids
|
||||||
const ids = new Set<string>(features.map(f => f.feature.properties.id + f.feature.geometry.type));
|
const ids = new Set<string>(features.map(f => f.feature.properties.id + f.feature.geometry.type));
|
||||||
// the old data
|
// the old data
|
||||||
const oldData = oldFeatures.filter(old => !ids.has(old.feature.properties.id + old.feature.geometry.type))
|
const oldData = oldFeatures.filter(old => !ids.has(old.feature.properties.id + old.feature.geometry.type))
|
||||||
return [...features, ...oldData];
|
featureSource.setData([...features, ...oldData])
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import osmAuth from "osm-auth";
|
import osmAuth from "osm-auth";
|
||||||
import {Stores, UIEventSource} from "../UIEventSource";
|
import {Store, Stores, UIEventSource} from "../UIEventSource";
|
||||||
import {OsmPreferences} from "./OsmPreferences";
|
import {OsmPreferences} from "./OsmPreferences";
|
||||||
import {ChangesetHandler} from "./ChangesetHandler";
|
import {ChangesetHandler} from "./ChangesetHandler";
|
||||||
import {ElementStorage} from "../ElementStorage";
|
import {ElementStorage} from "../ElementStorage";
|
||||||
|
@ -44,7 +44,7 @@ export class OsmConnection {
|
||||||
}
|
}
|
||||||
public auth;
|
public auth;
|
||||||
public userDetails: UIEventSource<UserDetails>;
|
public userDetails: UIEventSource<UserDetails>;
|
||||||
public isLoggedIn: UIEventSource<boolean>
|
public isLoggedIn: Store<boolean>
|
||||||
public loadingStatus = new UIEventSource<"not-attempted" | "loading" | "error" | "logged-in">("not-attempted")
|
public loadingStatus = new UIEventSource<"not-attempted" | "loading" | "error" | "logged-in">("not-attempted")
|
||||||
public preferencesHandler: OsmPreferences;
|
public preferencesHandler: OsmPreferences;
|
||||||
public readonly _oauth_config: {
|
public readonly _oauth_config: {
|
||||||
|
@ -86,13 +86,15 @@ export class OsmConnection {
|
||||||
ud.totalMessages = 42;
|
ud.totalMessages = 42;
|
||||||
}
|
}
|
||||||
const self = this;
|
const self = this;
|
||||||
this.isLoggedIn = this.userDetails.map(user => user.loggedIn).addCallback(isLoggedIn => {
|
this.isLoggedIn = this.userDetails.map(user => user.loggedIn);
|
||||||
|
this.isLoggedIn.addCallback(isLoggedIn => {
|
||||||
if (self.userDetails.data.loggedIn == false && isLoggedIn == true) {
|
if (self.userDetails.data.loggedIn == false && isLoggedIn == true) {
|
||||||
// We have an inconsistency: the userdetails say we _didn't_ log in, but this actor says we do
|
// We have an inconsistency: the userdetails say we _didn't_ log in, but this actor says we do
|
||||||
// This means someone attempted to toggle this; so we attempt to login!
|
// This means someone attempted to toggle this; so we attempt to login!
|
||||||
self.AttemptLogin()
|
self.AttemptLogin()
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
this._dryRun = options.dryRun ?? new UIEventSource<boolean>(false);
|
this._dryRun = options.dryRun ?? new UIEventSource<boolean>(false);
|
||||||
|
|
||||||
this.updateAuthObject();
|
this.updateAuthObject();
|
||||||
|
|
|
@ -142,7 +142,7 @@ export default class UserRelatedState extends ElementsState {
|
||||||
Locale.language.setData(layoutToUse.language[0]);
|
Locale.language.setData(layoutToUse.language[0]);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.ping();
|
Locale.language.ping();
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
|
@ -18,7 +18,7 @@ export class Stores {
|
||||||
return source;
|
return source;
|
||||||
}
|
}
|
||||||
|
|
||||||
public static FromPromiseWithErr<T>(promise: Promise<T>): Store<{ success: T } | { error: any }>{
|
public static FromPromiseWithErr<T>(promise: Promise<T>): Store<{ success: T } | { error: any }> {
|
||||||
return UIEventSource.FromPromiseWithErr(promise);
|
return UIEventSource.FromPromiseWithErr(promise);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -54,9 +54,9 @@ export class Stores {
|
||||||
* @constructor
|
* @constructor
|
||||||
*/
|
*/
|
||||||
public static ListStabilized<T>(src: Store<T[]>): Store<T[]> {
|
public static ListStabilized<T>(src: Store<T[]>): Store<T[]> {
|
||||||
|
const stable = new UIEventSource<T[]>(undefined)
|
||||||
const stable = new UIEventSource<T[]>(src.data)
|
src.addCallbackAndRun(list => {
|
||||||
src.addCallback(list => {
|
console.trace("Running list stabilization", list)
|
||||||
if (list === undefined) {
|
if (list === undefined) {
|
||||||
stable.setData(undefined)
|
stable.setData(undefined)
|
||||||
return;
|
return;
|
||||||
|
@ -65,6 +65,9 @@ export class Stores {
|
||||||
if (oldList === list) {
|
if (oldList === list) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
if(oldList == list){
|
||||||
|
return;
|
||||||
|
}
|
||||||
if (oldList === undefined || oldList.length !== list.length) {
|
if (oldList === undefined || oldList.length !== list.length) {
|
||||||
stable.setData(list);
|
stable.setData(list);
|
||||||
return;
|
return;
|
||||||
|
@ -97,10 +100,10 @@ export abstract class Store<T> {
|
||||||
this.tag = tag;
|
this.tag = tag;
|
||||||
if ((tag === undefined || tag === "")) {
|
if ((tag === undefined || tag === "")) {
|
||||||
let createStack = Utils.runningFromConsole;
|
let createStack = Utils.runningFromConsole;
|
||||||
if(!Utils.runningFromConsole) {
|
if (!Utils.runningFromConsole) {
|
||||||
createStack = window.location.hostname === "127.0.0.1"
|
createStack = window.location.hostname === "127.0.0.1"
|
||||||
}
|
}
|
||||||
if(createStack) {
|
if (createStack) {
|
||||||
const callstack = new Error().stack.split("\n")
|
const callstack = new Error().stack.split("\n")
|
||||||
this.tag = callstack[1]
|
this.tag = callstack[1]
|
||||||
}
|
}
|
||||||
|
@ -113,25 +116,25 @@ export abstract class Store<T> {
|
||||||
/**
|
/**
|
||||||
* Add a callback function which will run on future data changes
|
* Add a callback function which will run on future data changes
|
||||||
*/
|
*/
|
||||||
abstract addCallback(callback: (data: T) => void);
|
abstract addCallback(callback: (data: T) => void): (() => void);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Adds a callback function, which will be run immediately.
|
* Adds a callback function, which will be run immediately.
|
||||||
* Only triggers if the current data is defined
|
* Only triggers if the current data is defined
|
||||||
*/
|
*/
|
||||||
abstract addCallbackAndRunD(callback: (data: T) => void);
|
abstract addCallbackAndRunD(callback: (data: T) => void): (() => void);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Add a callback function which will run on future data changes
|
* Add a callback function which will run on future data changes
|
||||||
* Only triggers if the data is defined
|
* Only triggers if the data is defined
|
||||||
*/
|
*/
|
||||||
abstract addCallbackD(callback: (data: T) => void);
|
abstract addCallbackD(callback: (data: T) => void): (() => void);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Adds a callback function, which will be run immediately.
|
* Adds a callback function, which will be run immediately.
|
||||||
* Only triggers if the current data is defined
|
* Only triggers if the current data is defined
|
||||||
*/
|
*/
|
||||||
abstract addCallbackAndRun(callback: (data: T) => void);
|
abstract addCallbackAndRun(callback: (data: T) => void): (() => void);
|
||||||
|
|
||||||
public withEqualityStabilized(comparator: (t: T | undefined, t1: T | undefined) => boolean): Store<T> {
|
public withEqualityStabilized(comparator: (t: T | undefined, t1: T | undefined) => boolean): Store<T> {
|
||||||
let oldValue = undefined;
|
let oldValue = undefined;
|
||||||
|
@ -149,6 +152,49 @@ export abstract class Store<T> {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Monadic bind function
|
* Monadic bind function
|
||||||
|
*
|
||||||
|
* // simple test with bound and immutablestores
|
||||||
|
* const src = new UIEventSource<number>(3)
|
||||||
|
* const bound = src.bind(i => new ImmutableStore(i * 2))
|
||||||
|
* let lastValue = undefined;
|
||||||
|
* bound.addCallbackAndRun(v => lastValue = v);
|
||||||
|
* lastValue // => 6
|
||||||
|
* src.setData(21)
|
||||||
|
* lastValue // => 42
|
||||||
|
*
|
||||||
|
* // simple test with bind over a mapped value
|
||||||
|
* const src = new UIEventSource<number>(0)
|
||||||
|
* const srcs : UIEventSource<string>[] = [new UIEventSource<string>("a"), new UIEventSource<string>("b")]
|
||||||
|
* const bound = src.map(i => -i).bind(i => srcs[i])
|
||||||
|
* let lastValue : string = undefined;
|
||||||
|
* bound.addCallbackAndRun(v => lastValue = v);
|
||||||
|
* lastValue // => "a"
|
||||||
|
* src.setData(-1)
|
||||||
|
* lastValue // => "b"
|
||||||
|
* srcs[1].setData("xyz")
|
||||||
|
* lastValue // => "xyz"
|
||||||
|
* srcs[0].setData("def")
|
||||||
|
* lastValue // => "xyz"
|
||||||
|
* src.setData(0)
|
||||||
|
* lastValue // => "def"
|
||||||
|
*
|
||||||
|
*
|
||||||
|
*
|
||||||
|
* // advanced test with bound
|
||||||
|
* const src = new UIEventSource<number>(0)
|
||||||
|
* const srcs : UIEventSource<string>[] = [new UIEventSource<string>("a"), new UIEventSource<string>("b")]
|
||||||
|
* const bound = src.bind(i => srcs[i])
|
||||||
|
* let lastValue : string = undefined;
|
||||||
|
* bound.addCallbackAndRun(v => lastValue = v);
|
||||||
|
* lastValue // => "a"
|
||||||
|
* src.setData(1)
|
||||||
|
* lastValue // => "b"
|
||||||
|
* srcs[1].setData("xyz")
|
||||||
|
* lastValue // => "xyz"
|
||||||
|
* srcs[0].setData("def")
|
||||||
|
* lastValue // => "xyz"
|
||||||
|
* src.setData(0)
|
||||||
|
* lastValue // => "def"
|
||||||
*/
|
*/
|
||||||
public bind<X>(f: ((t: T) => Store<X>)): Store<X> {
|
public bind<X>(f: ((t: T) => Store<X>)): Store<X> {
|
||||||
const mapped = this.map(f)
|
const mapped = this.map(f)
|
||||||
|
@ -195,6 +241,7 @@ export abstract class Store<T> {
|
||||||
|
|
||||||
return newSource;
|
return newSource;
|
||||||
}
|
}
|
||||||
|
|
||||||
public AsPromise(condition?: ((t: T) => boolean)): Promise<T> {
|
public AsPromise(condition?: ((t: T) => boolean)): Promise<T> {
|
||||||
const self = this;
|
const self = this;
|
||||||
condition = condition ?? (t => t !== undefined)
|
condition = condition ?? (t => t !== undefined)
|
||||||
|
@ -215,29 +262,36 @@ export abstract class Store<T> {
|
||||||
export class ImmutableStore<T> extends Store<T> {
|
export class ImmutableStore<T> extends Store<T> {
|
||||||
public readonly data: T;
|
public readonly data: T;
|
||||||
|
|
||||||
|
private static readonly pass: (() => void) = () => {
|
||||||
|
}
|
||||||
|
|
||||||
constructor(data: T) {
|
constructor(data: T) {
|
||||||
super();
|
super();
|
||||||
this.data = data;
|
this.data = data;
|
||||||
}
|
}
|
||||||
|
|
||||||
addCallback(callback: (data: T) => void) {
|
addCallback(callback: (data: T) => void): (() => void) {
|
||||||
// pass: data will never change
|
// pass: data will never change
|
||||||
|
return ImmutableStore.pass
|
||||||
}
|
}
|
||||||
|
|
||||||
addCallbackAndRun(callback: (data: T) => void) {
|
addCallbackAndRun(callback: (data: T) => void): (() => void) {
|
||||||
callback(this.data)
|
callback(this.data)
|
||||||
// no callback registry: data will never change
|
// no callback registry: data will never change
|
||||||
|
return ImmutableStore.pass
|
||||||
}
|
}
|
||||||
|
|
||||||
addCallbackAndRunD(callback: (data: T) => void) {
|
addCallbackAndRunD(callback: (data: T) => void): (() => void) {
|
||||||
if(this.data !== undefined){
|
if (this.data !== undefined) {
|
||||||
callback(this.data)
|
callback(this.data)
|
||||||
}
|
}
|
||||||
// no callback registry: data will never change
|
// no callback registry: data will never change
|
||||||
|
return ImmutableStore.pass
|
||||||
}
|
}
|
||||||
|
|
||||||
addCallbackD(callback: (data: T) => void) {
|
addCallbackD(callback: (data: T) => void): (() => void) {
|
||||||
// pass: data will never change
|
// pass: data will never change
|
||||||
|
return ImmutableStore.pass
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -247,11 +301,196 @@ export class ImmutableStore<T> extends Store<T> {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Keeps track of the callback functions
|
||||||
|
*/
|
||||||
|
class ListenerTracker<T> {
|
||||||
|
private readonly _callbacks: ((t: T) => (boolean | void | any)) [] = [];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Adds a callback which can be called; a function to unregister is returned
|
||||||
|
*/
|
||||||
|
public addCallback(callback: (t: T) => (boolean | void | any)): (() => void) {
|
||||||
|
if (callback === console.log) {
|
||||||
|
// This ^^^ actually works!
|
||||||
|
throw "Don't add console.log directly as a callback - you'll won't be able to find it afterwards. Wrap it in a lambda instead."
|
||||||
|
}
|
||||||
|
this._callbacks.push(callback);
|
||||||
|
|
||||||
|
// Give back an unregister-function!
|
||||||
|
return () => {
|
||||||
|
const index = this._callbacks.indexOf(callback)
|
||||||
|
if (index >= 0) {
|
||||||
|
this._callbacks.splice(index, 1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Call all the callbacks.
|
||||||
|
* Returns the number of registered callbacks
|
||||||
|
*/
|
||||||
|
public ping(data: T): number {
|
||||||
|
let toDelete = undefined
|
||||||
|
let startTime = new Date().getTime() / 1000;
|
||||||
|
for (const callback of this._callbacks) {
|
||||||
|
if (callback(data) === true) {
|
||||||
|
// This callback wants to be deleted
|
||||||
|
// Note: it has to return precisely true in order to avoid accidental deletions
|
||||||
|
if (toDelete === undefined) {
|
||||||
|
toDelete = [callback]
|
||||||
|
} else {
|
||||||
|
toDelete.push(callback)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let endTime = new Date().getTime() / 1000
|
||||||
|
if ((endTime - startTime) > 500) {
|
||||||
|
console.trace("Warning: a ping took more then 500ms; this is probably a performance issue")
|
||||||
|
}
|
||||||
|
if (toDelete !== undefined) {
|
||||||
|
for (const toDeleteElement of toDelete) {
|
||||||
|
this._callbacks.splice(this._callbacks.indexOf(toDeleteElement), 1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return this._callbacks.length
|
||||||
|
}
|
||||||
|
|
||||||
|
length() {
|
||||||
|
return this._callbacks.length
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The mapped store is a helper type which does the mapping of a function.
|
||||||
|
* It'll fuse
|
||||||
|
*/
|
||||||
|
class MappedStore<TIn, T> extends Store<T> {
|
||||||
|
|
||||||
|
private _upstream: Store<TIn>;
|
||||||
|
private _unregisterFromUpstream: (() => void)
|
||||||
|
private _f: (t: TIn) => T;
|
||||||
|
private readonly _extraStores: Store<any>[] | undefined;
|
||||||
|
private _unregisterFromExtraStores: (() => void)[] | undefined
|
||||||
|
|
||||||
|
private _callbacks: ListenerTracker<T> = new ListenerTracker<T>()
|
||||||
|
|
||||||
|
private static readonly pass: () => {}
|
||||||
|
|
||||||
|
|
||||||
|
constructor(upstream: Store<TIn>, f: (t: TIn) => T, extraStores: Store<any>[] = undefined, initialData : T= undefined) {
|
||||||
|
super();
|
||||||
|
this._upstream = upstream;
|
||||||
|
this._f = f;
|
||||||
|
this._data = initialData ?? f(upstream.data)
|
||||||
|
this._extraStores = extraStores;
|
||||||
|
}
|
||||||
|
|
||||||
|
private _data: T;
|
||||||
|
private _callbacksAreRegistered = false
|
||||||
|
|
||||||
|
get data(): T {
|
||||||
|
return this._data
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
map<J>(f: (t: T) => J, extraStores: (Store<any>)[] = undefined): Store<J> {
|
||||||
|
let stores: Store<any>[] = undefined
|
||||||
|
if (extraStores?.length > 0 || this._extraStores?.length > 0) {
|
||||||
|
stores = []
|
||||||
|
}
|
||||||
|
if (extraStores?.length > 0) {
|
||||||
|
stores.push(...extraStores)
|
||||||
|
}
|
||||||
|
if (this._extraStores?.length > 0) {
|
||||||
|
this._extraStores?.forEach(store => {
|
||||||
|
if (stores.indexOf(store) < 0) {
|
||||||
|
stores.push(store)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return new MappedStore(
|
||||||
|
this._upstream,
|
||||||
|
data => f(this._f(data)),
|
||||||
|
stores,
|
||||||
|
f(this._data)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
private unregisterFromUpstream() {
|
||||||
|
console.log("Unregistering callbacks for", this.tag)
|
||||||
|
this._callbacksAreRegistered = false;
|
||||||
|
this._unregisterFromUpstream()
|
||||||
|
this._unregisterFromExtraStores?.forEach(unr => unr())
|
||||||
|
}
|
||||||
|
|
||||||
|
private update(): void {
|
||||||
|
const newData = this._f(this._upstream.data)
|
||||||
|
if (this._data == newData) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this._data = newData
|
||||||
|
this._callbacks.ping(this._data)
|
||||||
|
}
|
||||||
|
|
||||||
|
addCallback(callback: (data: T) => (any | boolean | void)): (() => void) {
|
||||||
|
if (!this._callbacksAreRegistered) {
|
||||||
|
const self = this
|
||||||
|
// This is the first callback that is added
|
||||||
|
// We register this 'map' to the upstream object and all the streams
|
||||||
|
this._unregisterFromUpstream = this._upstream.addCallback(
|
||||||
|
_ => self.update()
|
||||||
|
)
|
||||||
|
this._unregisterFromExtraStores = this._extraStores?.map(store =>
|
||||||
|
store?.addCallback(_ => self.update())
|
||||||
|
)
|
||||||
|
this._callbacksAreRegistered = true;
|
||||||
|
}
|
||||||
|
const unregister = this._callbacks.addCallback(callback)
|
||||||
|
return () => {
|
||||||
|
unregister()
|
||||||
|
if (this._callbacks.length() == 0) {
|
||||||
|
this.unregisterFromUpstream()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
addCallbackAndRun(callback: (data: T) => (any | boolean | void)): (() => void) {
|
||||||
|
const unregister = this.addCallback(callback)
|
||||||
|
const doRemove = callback(this.data)
|
||||||
|
if (doRemove === true) {
|
||||||
|
unregister()
|
||||||
|
return MappedStore.pass
|
||||||
|
}
|
||||||
|
return unregister
|
||||||
|
}
|
||||||
|
|
||||||
|
addCallbackAndRunD(callback: (data: T) => (any | boolean | void)): (() => void) {
|
||||||
|
return this.addCallbackAndRun(data => {
|
||||||
|
if (data !== undefined) {
|
||||||
|
return callback(data)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
addCallbackD(callback: (data: T) => (any | boolean | void)): (() => void) {
|
||||||
|
return this.addCallback(data => {
|
||||||
|
if (data !== undefined) {
|
||||||
|
return callback(data)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
export class UIEventSource<T> extends Store<T> {
|
export class UIEventSource<T> extends Store<T> {
|
||||||
|
|
||||||
public data: T;
|
public data: T;
|
||||||
private _callbacks: ((t: T) => (boolean | void | any)) [] = [];
|
private _callbacks: ListenerTracker<T> = new ListenerTracker<T>()
|
||||||
|
|
||||||
|
private static readonly pass: () => {}
|
||||||
|
|
||||||
constructor(data: T, tag: string = "") {
|
constructor(data: T, tag: string = "") {
|
||||||
super(tag);
|
super(tag);
|
||||||
|
@ -284,13 +523,13 @@ export class UIEventSource<T> extends Store<T> {
|
||||||
* Converts a promise into a UIVentsource, sets the UIEVentSource when the result is calculated.
|
* Converts a promise into a UIVentsource, sets the UIEVentSource when the result is calculated.
|
||||||
* If the promise fails, the value will stay undefined, but 'onError' will be called
|
* If the promise fails, the value will stay undefined, but 'onError' will be called
|
||||||
*/
|
*/
|
||||||
public static FromPromise<T>(promise: Promise<T>, onError :( (e: any) => void) = undefined): UIEventSource<T> {
|
public static FromPromise<T>(promise: Promise<T>, onError: ((e: any) => void) = undefined): UIEventSource<T> {
|
||||||
const src = new UIEventSource<T>(undefined)
|
const src = new UIEventSource<T>(undefined)
|
||||||
promise?.then(d => src.setData(d))
|
promise?.then(d => src.setData(d))
|
||||||
promise?.catch(err => {
|
promise?.catch(err => {
|
||||||
if(onError !== undefined){
|
if (onError !== undefined) {
|
||||||
onError(err)
|
onError(err)
|
||||||
}else{
|
} else {
|
||||||
console.warn("Promise failed:", err);
|
console.warn("Promise failed:", err);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
@ -332,21 +571,33 @@ export class UIEventSource<T> extends Store<T> {
|
||||||
* If the result of the callback is 'true', the callback is considered finished and will be removed again
|
* If the result of the callback is 'true', the callback is considered finished and will be removed again
|
||||||
* @param callback
|
* @param callback
|
||||||
*/
|
*/
|
||||||
public addCallback(callback: ((latestData: T) => (boolean | void | any))): UIEventSource<T> {
|
public addCallback(callback: ((latestData: T) => (boolean | void | any))): (() => void) {
|
||||||
if (callback === console.log) {
|
return this._callbacks.addCallback(callback);
|
||||||
// This ^^^ actually works!
|
|
||||||
throw "Don't add console.log directly as a callback - you'll won't be able to find it afterwards. Wrap it in a lambda instead."
|
|
||||||
}
|
|
||||||
this._callbacks.push(callback);
|
|
||||||
return this;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public addCallbackAndRun(callback: ((latestData: T) => (boolean | void | any))): UIEventSource<T> {
|
public addCallbackAndRun(callback: ((latestData: T) => (boolean | void | any))): (() => void) {
|
||||||
const doDeleteCallback = callback(this.data);
|
const doDeleteCallback = callback(this.data);
|
||||||
if (doDeleteCallback !== true) {
|
if (doDeleteCallback !== true) {
|
||||||
this.addCallback(callback);
|
return this.addCallback(callback);
|
||||||
|
} else {
|
||||||
|
return UIEventSource.pass
|
||||||
}
|
}
|
||||||
return this;
|
}
|
||||||
|
|
||||||
|
public addCallbackAndRunD(callback: (data: T) => void): (() => void) {
|
||||||
|
return this.addCallbackAndRun(data => {
|
||||||
|
if (data !== undefined && data !== null) {
|
||||||
|
return callback(data)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
public addCallbackD(callback: (data: T) => void): (() => void) {
|
||||||
|
return this.addCallback(data => {
|
||||||
|
if (data !== undefined && data !== null) {
|
||||||
|
return callback(data)
|
||||||
|
}
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
public setData(t: T): UIEventSource<T> {
|
public setData(t: T): UIEventSource<T> {
|
||||||
|
@ -354,33 +605,12 @@ export class UIEventSource<T> extends Store<T> {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.data = t;
|
this.data = t;
|
||||||
this.ping();
|
this._callbacks.ping(t)
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
public ping(): void {
|
public ping(): void {
|
||||||
let toDelete = undefined
|
this._callbacks.ping(this.data)
|
||||||
let startTime = new Date().getTime() / 1000;
|
|
||||||
for (const callback of this._callbacks) {
|
|
||||||
if (callback(this.data) === true) {
|
|
||||||
// This callback wants to be deleted
|
|
||||||
// Note: it has to return precisely true in order to avoid accidental deletions
|
|
||||||
if (toDelete === undefined) {
|
|
||||||
toDelete = [callback]
|
|
||||||
} else {
|
|
||||||
toDelete.push(callback)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
let endTime = new Date().getTime() / 1000
|
|
||||||
if ((endTime - startTime) > 500) {
|
|
||||||
console.trace("Warning: a ping of ", this.tag, " took more then 500ms; this is probably a performance issue")
|
|
||||||
}
|
|
||||||
if (toDelete !== undefined) {
|
|
||||||
for (const toDeleteElement of toDelete) {
|
|
||||||
this._callbacks.splice(this._callbacks.indexOf(toDeleteElement), 1)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -388,30 +618,27 @@ export class UIEventSource<T> extends Store<T> {
|
||||||
* Given a function 'f', will construct a new UIEventSource where the contents will always be "f(this.data)'
|
* Given a function 'f', will construct a new UIEventSource where the contents will always be "f(this.data)'
|
||||||
* @param f: The transforming function
|
* @param f: The transforming function
|
||||||
* @param extraSources: also trigger the update if one of these sources change
|
* @param extraSources: also trigger the update if one of these sources change
|
||||||
|
*
|
||||||
|
* const src = new UIEventSource<number>(10)
|
||||||
|
* const store = src.map(i => i * 2)
|
||||||
|
* store.data // => 20
|
||||||
|
* let srcSeen = undefined;
|
||||||
|
* src.addCallback(v => {
|
||||||
|
* console.log("Triggered")
|
||||||
|
* srcSeen = v
|
||||||
|
* })
|
||||||
|
* let lastSeen = undefined
|
||||||
|
* store.addCallback(v => {
|
||||||
|
* console.log("Triggered!")
|
||||||
|
* lastSeen = v
|
||||||
|
* })
|
||||||
|
* src.setData(21)
|
||||||
|
* srcSeen // => 21
|
||||||
|
* lastSeen // => 42
|
||||||
*/
|
*/
|
||||||
public map<J>(f: ((t: T) => J),
|
public map<J>(f: ((t: T) => J),
|
||||||
extraSources: Store<any>[] = []): Store<J> {
|
extraSources: Store<any>[] = []): Store<J> {
|
||||||
const self = this;
|
return new MappedStore(this, f, extraSources);
|
||||||
|
|
||||||
const stack = new Error().stack.split("\n");
|
|
||||||
const callee = stack[1]
|
|
||||||
|
|
||||||
const newSource = new UIEventSource<J>(
|
|
||||||
f(this.data),
|
|
||||||
"map(" + this.tag + ")@" + callee
|
|
||||||
);
|
|
||||||
|
|
||||||
const update = function () {
|
|
||||||
newSource.setData(f(self.data));
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.addCallback(update);
|
|
||||||
for (const extraSource of extraSources) {
|
|
||||||
extraSource?.addCallback(update);
|
|
||||||
}
|
|
||||||
|
|
||||||
return newSource;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -423,9 +650,9 @@ export class UIEventSource<T> extends Store<T> {
|
||||||
* @param allowUnregister: if set, the update will be halted if no listeners are registered
|
* @param allowUnregister: if set, the update will be halted if no listeners are registered
|
||||||
*/
|
*/
|
||||||
public sync<J>(f: ((t: T) => J),
|
public sync<J>(f: ((t: T) => J),
|
||||||
extraSources: Store<any>[],
|
extraSources: Store<any>[],
|
||||||
g: ((j: J, t: T) => T) ,
|
g: ((j: J, t: T) => T),
|
||||||
allowUnregister = false): UIEventSource<J> {
|
allowUnregister = false): UIEventSource<J> {
|
||||||
const self = this;
|
const self = this;
|
||||||
|
|
||||||
const stack = new Error().stack.split("\n");
|
const stack = new Error().stack.split("\n");
|
||||||
|
@ -438,7 +665,7 @@ export class UIEventSource<T> extends Store<T> {
|
||||||
|
|
||||||
const update = function () {
|
const update = function () {
|
||||||
newSource.setData(f(self.data));
|
newSource.setData(f(self.data));
|
||||||
return allowUnregister && newSource._callbacks.length === 0
|
return allowUnregister && newSource._callbacks.length() === 0
|
||||||
}
|
}
|
||||||
|
|
||||||
this.addCallback(update);
|
this.addCallback(update);
|
||||||
|
@ -471,20 +698,4 @@ export class UIEventSource<T> extends Store<T> {
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
addCallbackAndRunD(callback: (data: T) => void) {
|
|
||||||
this.addCallbackAndRun(data => {
|
|
||||||
if (data !== undefined && data !== null) {
|
|
||||||
return callback(data)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
addCallbackD(callback: (data: T) => void) {
|
|
||||||
this.addCallback(data => {
|
|
||||||
if (data !== undefined && data !== null) {
|
|
||||||
return callback(data)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -19,15 +19,15 @@ export default class CombinedInputElement<T, J, X> extends InputElement<X> {
|
||||||
this._b = b;
|
this._b = b;
|
||||||
this._split = split;
|
this._split = split;
|
||||||
this._combined = new Combine([this._a, this._b]);
|
this._combined = new Combine([this._a, this._b]);
|
||||||
this._value = this._a.GetValue().map(
|
this._value = this._a.GetValue().sync(
|
||||||
t => combine(t, this._b?.GetValue()?.data),
|
t => combine(t, this._b?.GetValue()?.data),
|
||||||
[this._b.GetValue()],
|
[this._b.GetValue()],
|
||||||
)
|
x => {
|
||||||
.addCallback(x => {
|
|
||||||
const [t, j] = split(x)
|
const [t, j] = split(x)
|
||||||
this._a.GetValue()?.setData(t)
|
|
||||||
this._b.GetValue()?.setData(j)
|
this._b.GetValue()?.setData(j)
|
||||||
})
|
return t
|
||||||
|
}
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
GetValue(): UIEventSource<X> {
|
GetValue(): UIEventSource<X> {
|
||||||
|
|
|
@ -3,6 +3,7 @@ import BaseUIElement from "../BaseUIElement";
|
||||||
|
|
||||||
export interface ReadonlyInputElement<T> extends BaseUIElement{
|
export interface ReadonlyInputElement<T> extends BaseUIElement{
|
||||||
GetValue(): Store<T>;
|
GetValue(): Store<T>;
|
||||||
|
IsValid(t: T): boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -4,6 +4,7 @@ import {Utils} from "../../Utils";
|
||||||
|
|
||||||
export class RadioButton<T> extends InputElement<T> {
|
export class RadioButton<T> extends InputElement<T> {
|
||||||
private static _nextId = 0;
|
private static _nextId = 0;
|
||||||
|
|
||||||
private readonly value: UIEventSource<T>;
|
private readonly value: UIEventSource<T>;
|
||||||
private _elements: InputElement<T>[];
|
private _elements: InputElement<T>[];
|
||||||
private _selectFirstAsDefault: boolean;
|
private _selectFirstAsDefault: boolean;
|
||||||
|
|
|
@ -11,7 +11,7 @@ export default class Toggle extends VariableUiElement {
|
||||||
|
|
||||||
public readonly isEnabled: Store<boolean>;
|
public readonly isEnabled: Store<boolean>;
|
||||||
|
|
||||||
constructor(showEnabled: string | BaseUIElement, showDisabled: string | BaseUIElement, isEnabled: Store<boolean> = new UIEventSource<boolean>(false)) {
|
constructor(showEnabled: string | BaseUIElement, showDisabled: string | BaseUIElement, isEnabled: Store<boolean>) {
|
||||||
super(
|
super(
|
||||||
isEnabled?.map(isEnabled => isEnabled ? showEnabled : showDisabled)
|
isEnabled?.map(isEnabled => isEnabled ? showEnabled : showDisabled)
|
||||||
);
|
);
|
||||||
|
|
|
@ -25,6 +25,7 @@ import Title from "../Base/Title";
|
||||||
import InputElementMap from "./InputElementMap";
|
import InputElementMap from "./InputElementMap";
|
||||||
import Translations from "../i18n/Translations";
|
import Translations from "../i18n/Translations";
|
||||||
import {Translation} from "../i18n/Translation";
|
import {Translation} from "../i18n/Translation";
|
||||||
|
import BaseLayer from "../../Models/BaseLayer";
|
||||||
|
|
||||||
export class TextFieldDef {
|
export class TextFieldDef {
|
||||||
|
|
||||||
|
@ -71,7 +72,7 @@ export class TextFieldDef {
|
||||||
placeholder?: string | BaseUIElement,
|
placeholder?: string | BaseUIElement,
|
||||||
country?: () => string,
|
country?: () => string,
|
||||||
location?: [number /*lat*/, number /*lon*/],
|
location?: [number /*lat*/, number /*lon*/],
|
||||||
mapBackgroundLayer?: UIEventSource<any>,
|
mapBackgroundLayer?: UIEventSource</*BaseLayer*/ any>,
|
||||||
unit?: Unit,
|
unit?: Unit,
|
||||||
args?: (string | number | boolean)[] // Extra arguments for the inputHelper,
|
args?: (string | number | boolean)[] // Extra arguments for the inputHelper,
|
||||||
feature?: any,
|
feature?: any,
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import {InputElement, ReadonlyInputElement} from "./InputElement";
|
import {ReadonlyInputElement} from "./InputElement";
|
||||||
import {Store} from "../../Logic/UIEventSource";
|
import {Store} from "../../Logic/UIEventSource";
|
||||||
import BaseUIElement from "../BaseUIElement";
|
import BaseUIElement from "../BaseUIElement";
|
||||||
import {VariableUiElement} from "../Base/VariableUIElement";
|
import {VariableUiElement} from "../Base/VariableUIElement";
|
||||||
|
@ -7,9 +7,9 @@ export default class VariableInputElement<T> extends BaseUIElement implements Re
|
||||||
|
|
||||||
private readonly value: Store<T>;
|
private readonly value: Store<T>;
|
||||||
private readonly element: BaseUIElement
|
private readonly element: BaseUIElement
|
||||||
private readonly upstream: Store<InputElement<T>>;
|
private readonly upstream: Store<ReadonlyInputElement<T>>;
|
||||||
|
|
||||||
constructor(upstream: Store<InputElement<T>>) {
|
constructor(upstream: Store<ReadonlyInputElement<T>>) {
|
||||||
super()
|
super()
|
||||||
this.upstream = upstream;
|
this.upstream = upstream;
|
||||||
this.value = upstream.bind(v => v.GetValue())
|
this.value = upstream.bind(v => v.GetValue())
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import {Store, UIEventSource} from "../../Logic/UIEventSource";
|
import {ImmutableStore, Store} from "../../Logic/UIEventSource";
|
||||||
import Translations from "../i18n/Translations";
|
import Translations from "../i18n/Translations";
|
||||||
import {OsmConnection} from "../../Logic/Osm/OsmConnection";
|
import {OsmConnection} from "../../Logic/Osm/OsmConnection";
|
||||||
import Toggle from "../Input/Toggle";
|
import Toggle from "../Input/Toggle";
|
||||||
|
@ -29,7 +29,7 @@ export class SaveButton extends Toggle {
|
||||||
super(
|
super(
|
||||||
save,
|
save,
|
||||||
pleaseLogin,
|
pleaseLogin,
|
||||||
osmConnection?.isLoggedIn ?? new UIEventSource<any>(false)
|
osmConnection?.isLoggedIn ?? new ImmutableStore(false)
|
||||||
)
|
)
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -40,7 +40,7 @@ export default class TagRenderingQuestion extends Combine {
|
||||||
|
|
||||||
constructor(tags: UIEventSource<any>,
|
constructor(tags: UIEventSource<any>,
|
||||||
configuration: TagRenderingConfig,
|
configuration: TagRenderingConfig,
|
||||||
state,
|
state?: FeaturePipelineState,
|
||||||
options?: {
|
options?: {
|
||||||
units?: Unit[],
|
units?: Unit[],
|
||||||
afterSave?: () => void,
|
afterSave?: () => void,
|
||||||
|
@ -50,7 +50,6 @@ export default class TagRenderingQuestion extends Combine {
|
||||||
}
|
}
|
||||||
) {
|
) {
|
||||||
|
|
||||||
|
|
||||||
const applicableMappingsSrc =
|
const applicableMappingsSrc =
|
||||||
Stores.ListStabilized(tags.map(tags => {
|
Stores.ListStabilized(tags.map(tags => {
|
||||||
const applicableMappings: { if: TagsFilter, icon?: string, then: TypedTranslation<object>, ifnot?: TagsFilter, addExtraTags: Tag[] }[] = []
|
const applicableMappings: { if: TagsFilter, icon?: string, then: TypedTranslation<object>, ifnot?: TagsFilter, addExtraTags: Tag[] }[] = []
|
||||||
|
@ -82,12 +81,11 @@ export default class TagRenderingQuestion extends Combine {
|
||||||
|
|
||||||
const feedback = new UIEventSource<Translation>(undefined)
|
const feedback = new UIEventSource<Translation>(undefined)
|
||||||
const inputElement: ReadonlyInputElement<TagsFilter> =
|
const inputElement: ReadonlyInputElement<TagsFilter> =
|
||||||
new VariableInputElement(applicableMappingsSrc.map(applicableMappings =>
|
new VariableInputElement(applicableMappingsSrc.map(applicableMappings => {
|
||||||
TagRenderingQuestion.GenerateInputElement(state, configuration, applicableMappings, applicableUnit, tags, feedback)
|
return TagRenderingQuestion.GenerateInputElement(state, configuration, applicableMappings, applicableUnit, tags, feedback)
|
||||||
|
}
|
||||||
))
|
))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const save = () => {
|
const save = () => {
|
||||||
const selection = inputElement.GetValue().data;
|
const selection = inputElement.GetValue().data;
|
||||||
if (selection) {
|
if (selection) {
|
||||||
|
@ -132,7 +130,7 @@ export default class TagRenderingQuestion extends Combine {
|
||||||
saveButton]).SetClass("flex justify-end flex-wrap-reverse")
|
saveButton]).SetClass("flex justify-end flex-wrap-reverse")
|
||||||
|
|
||||||
]).SetClass("flex mt-2 justify-between"),
|
]).SetClass("flex mt-2 justify-between"),
|
||||||
new Toggle(Translations.t.general.testing.SetClass("alert"), undefined, state.featureSwitchIsTesting)
|
new Toggle(Translations.t.general.testing.SetClass("alert"), undefined, state?.featureSwitchIsTesting)
|
||||||
])
|
])
|
||||||
|
|
||||||
|
|
||||||
|
@ -141,18 +139,17 @@ export default class TagRenderingQuestion extends Combine {
|
||||||
|
|
||||||
|
|
||||||
private static GenerateInputElement(
|
private static GenerateInputElement(
|
||||||
state,
|
state: FeaturePipelineState,
|
||||||
configuration: TagRenderingConfig,
|
configuration: TagRenderingConfig,
|
||||||
applicableMappings: { if: TagsFilter, then: TypedTranslation<object>, icon?: string, ifnot?: TagsFilter, addExtraTags: Tag[] }[],
|
applicableMappings: { if: TagsFilter, then: TypedTranslation<object>, icon?: string, ifnot?: TagsFilter, addExtraTags: Tag[] }[],
|
||||||
applicableUnit: Unit,
|
applicableUnit: Unit,
|
||||||
tagsSource: UIEventSource<any>,
|
tagsSource: UIEventSource<any>,
|
||||||
feedback: UIEventSource<Translation>
|
feedback: UIEventSource<Translation>
|
||||||
): InputElement<TagsFilter> {
|
): ReadonlyInputElement<TagsFilter> {
|
||||||
|
|
||||||
// FreeForm input will be undefined if not present; will already contain a special input element if applicable
|
// FreeForm input will be undefined if not present; will already contain a special input element if applicable
|
||||||
const ff = TagRenderingQuestion.GenerateFreeform(state, configuration, applicableUnit, tagsSource, feedback);
|
const ff = TagRenderingQuestion.GenerateFreeform(state, configuration, applicableUnit, tagsSource, feedback);
|
||||||
|
|
||||||
|
|
||||||
const hasImages = applicableMappings.findIndex(mapping => mapping.icon !== undefined) >= 0
|
const hasImages = applicableMappings.findIndex(mapping => mapping.icon !== undefined) >= 0
|
||||||
let inputEls: InputElement<TagsFilter>[];
|
let inputEls: InputElement<TagsFilter>[];
|
||||||
|
|
||||||
|
@ -370,7 +367,7 @@ export default class TagRenderingQuestion extends Combine {
|
||||||
return new Combine([new Img(mapping.icon).SetClass("mapping-icon-"+(mapping.iconClass ?? "small")), text]).SetClass("flex")
|
return new Combine([new Img(mapping.icon).SetClass("mapping-icon-"+(mapping.iconClass ?? "small")), text]).SetClass("flex")
|
||||||
}
|
}
|
||||||
|
|
||||||
private static GenerateFreeform(state, configuration: TagRenderingConfig, applicableUnit: Unit, tags: UIEventSource<any>, feedback: UIEventSource<Translation>)
|
private static GenerateFreeform(state: FeaturePipelineState, configuration: TagRenderingConfig, applicableUnit: Unit, tags: UIEventSource<any>, feedback: UIEventSource<Translation>)
|
||||||
: InputElement<TagsFilter> {
|
: InputElement<TagsFilter> {
|
||||||
const freeform = configuration.freeform;
|
const freeform = configuration.freeform;
|
||||||
if (freeform === undefined) {
|
if (freeform === undefined) {
|
||||||
|
@ -414,12 +411,12 @@ export default class TagRenderingQuestion extends Combine {
|
||||||
}
|
}
|
||||||
|
|
||||||
const tagsData = tags.data;
|
const tagsData = tags.data;
|
||||||
const feature = state.allElements.ContainingFeatures.get(tagsData.id)
|
const feature = state?.allElements?.ContainingFeatures?.get(tagsData.id)
|
||||||
const center = GeoOperations.centerpointCoordinates(feature)
|
const center = feature != undefined ? GeoOperations.centerpointCoordinates(feature) : [0,0]
|
||||||
const input: InputElement<string> = ValidatedTextField.ForType(configuration.freeform.type).ConstructInputElement({
|
const input: InputElement<string> = ValidatedTextField.ForType(configuration.freeform.type).ConstructInputElement({
|
||||||
country: () => tagsData._country,
|
country: () => tagsData._country,
|
||||||
location: [center[1], center[0]],
|
location: [center[1], center[0]],
|
||||||
mapBackgroundLayer: state.backgroundLayer,
|
mapBackgroundLayer: state?.backgroundLayer,
|
||||||
unit: applicableUnit,
|
unit: applicableUnit,
|
||||||
args: configuration.freeform.helperArgs,
|
args: configuration.freeform.helperArgs,
|
||||||
feature,
|
feature,
|
||||||
|
@ -427,10 +424,12 @@ export default class TagRenderingQuestion extends Combine {
|
||||||
feedback
|
feedback
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Init with correct value
|
||||||
input.GetValue().setData(tagsData[freeform.key] ?? freeform.default);
|
input.GetValue().setData(tagsData[freeform.key] ?? freeform.default);
|
||||||
|
|
||||||
input.GetValue().addCallbackD(v => {
|
// Add a length check
|
||||||
if(v.length >= 255){
|
input.GetValue().addCallbackD((v : string | undefined) => {
|
||||||
|
if(v?.length >= 255){
|
||||||
feedback.setData(Translations.t.validation.tooLong.Subs({count: v.length}))
|
feedback.setData(Translations.t.validation.tooLong.Subs({count: v.length}))
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
@ -441,11 +440,9 @@ export default class TagRenderingQuestion extends Combine {
|
||||||
);
|
);
|
||||||
|
|
||||||
if (freeform.inline) {
|
if (freeform.inline) {
|
||||||
|
|
||||||
inputTagsFilter.SetClass("w-48-imp")
|
inputTagsFilter.SetClass("w-48-imp")
|
||||||
inputTagsFilter = new InputElementWrapper(inputTagsFilter, configuration.render, freeform.key, tags, state)
|
inputTagsFilter = new InputElementWrapper(inputTagsFilter, configuration.render, freeform.key, tags, state)
|
||||||
inputTagsFilter.SetClass("block")
|
inputTagsFilter.SetClass("block")
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return inputTagsFilter;
|
return inputTagsFilter;
|
||||||
|
@ -470,7 +467,8 @@ export default class TagRenderingQuestion extends Combine {
|
||||||
return new FixedUiElement(tagsStr).SetClass("subtle");
|
return new FixedUiElement(tagsStr).SetClass("subtle");
|
||||||
}
|
}
|
||||||
return tagsFilter.asHumanString(true, true, tags.data);
|
return tagsFilter.asHumanString(true, true, tags.data);
|
||||||
}
|
},
|
||||||
|
[state?.osmConnection?.userDetails]
|
||||||
)
|
)
|
||||||
).SetClass("block break-all")
|
).SetClass("block break-all")
|
||||||
}
|
}
|
||||||
|
|
|
@ -91,7 +91,8 @@
|
||||||
"hu": "Mi a neve ennek a nyilvános könyvespolcnak?"
|
"hu": "Mi a neve ennek a nyilvános könyvespolcnak?"
|
||||||
},
|
},
|
||||||
"freeform": {
|
"freeform": {
|
||||||
"key": "name"
|
"key": "name",
|
||||||
|
"inline": true
|
||||||
},
|
},
|
||||||
"mappings": [
|
"mappings": [
|
||||||
{
|
{
|
||||||
|
|
35
test.ts
35
test.ts
|
@ -1,14 +1,25 @@
|
||||||
import {FixedUiElement} from "./UI/Base/FixedUiElement";
|
import {UIEventSource} from "./Logic/UIEventSource";
|
||||||
import Img from "./UI/Base/Img";
|
import TagRenderingQuestion from "./UI/Popup/TagRenderingQuestion";
|
||||||
import { Utils } from "./Utils";
|
import TagRenderingConfig from "./Models/ThemeConfig/TagRenderingConfig";
|
||||||
|
|
||||||
new FixedUiElement("Hi").AttachTo("maindiv")
|
const config = new TagRenderingConfig({
|
||||||
|
question: "What is the name?",
|
||||||
|
render: "The name is {name}",
|
||||||
|
freeform: {
|
||||||
|
key: 'name',
|
||||||
|
inline:true
|
||||||
|
},
|
||||||
|
mappings:[
|
||||||
|
{
|
||||||
|
if:"noname=yes",
|
||||||
|
then: "This feature has no name"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
window.setTimeout(() => {
|
const tags = new UIEventSource<any>({
|
||||||
new FixedUiElement("Loading...").AttachTo("maindiv")
|
name: "current feature name"
|
||||||
// new Img("http://4.bp.blogspot.com/-_vTDmo_fSTw/T3YTV0AfGiI/AAAAAAAAAX4/Zjh2HaoU5Zo/s1600/beautiful%2Bkitten.jpg").AttachTo("maindiv")
|
})
|
||||||
Utils.download("http://127.0.0.1:1234/somedata").then(data => {
|
|
||||||
console.log("Got ", data)
|
new TagRenderingQuestion(
|
||||||
return new FixedUiElement(data).AttachTo("extradiv");
|
tags, config, undefined).AttachTo("maindiv")
|
||||||
})
|
|
||||||
}, 1000)
|
|
Loading…
Reference in a new issue