Add extra check that a feature is added on the right level; automatically add the right level to a new point

UI/BigComponents/RightControls.ts

@@ -3,7 +3,7 @@ import Toggle from "../Input/Toggle";
 import MapControlButton from "../MapControlButton";
 import GeoLocationHandler from "../../Logic/Actors/GeoLocationHandler";
 import Svg from "../../Svg";
-import MapState from "../../Logic/State/MapState";
+import MapState, {GlobalFilter} from "../../Logic/State/MapState";
 import LevelSelector from "../Input/LevelSelector";
 import FeaturePipeline from "../../Logic/FeatureSource/FeaturePipeline";
 import {Utils} from "../../Utils";
@@ -12,6 +12,9 @@ import {RegexTag} from "../../Logic/Tags/RegexTag";
 import {Or} from "../../Logic/Tags/Or";
 import {Tag} from "../../Logic/Tags/Tag";
 import {TagsFilter} from "../../Logic/Tags/TagsFilter";
+import Translations from "../i18n/Translations";
+import {BBox} from "../../Logic/BBox";
+import {OsmFeature} from "../../Models/OsmFeature";
 
 export default class RightControls extends Combine {
 
@@ -50,10 +53,11 @@ export default class RightControls extends Combine {
             if (bbox === undefined) {
                 return []
             }
-            const allElements = state.featurePipeline.GetAllFeaturesAndMetaWithin(bbox);
-            const allLevelsRaw: string[] = [].concat(...allElements.map(allElements => allElements.features.map(f => <string>f.properties["level"])))
-            const allLevels = [].concat(...allLevelsRaw.map(l => TagUtils.LevelsParser(l)))
-            if(allLevels.indexOf("0") < 0){
+            const allElementsUnfiltered: OsmFeature[] = [].concat(... state.featurePipeline.GetAllFeaturesAndMetaWithin(bbox).map(ff => ff.features))
+            const allElements = allElementsUnfiltered.filter(f => BBox.get(f).overlapsWith(bbox))
+            const allLevelsRaw: string[] = allElements.map(f => f.properties["level"])
+            const allLevels = [].concat(...allLevelsRaw.map(l => TagUtils.LevelsParser(l))) 
+            if (allLevels.indexOf("0") < 0) {
                 allLevels.push("0")
             }
             allLevels.sort((a, b) => a < b ? -1 : 1)
@@ -62,40 +66,57 @@ export default class RightControls extends Combine {
         state.globalFilters.data.push({
             filter: {
                 currentFilter: undefined,
-                state: undefined
+                state: undefined,
 
-            }, id: "level"
+            },
+            id: "level",
+            onNewPoint: undefined
         })
         const levelSelect = new LevelSelector(levelsInView)
 
-        const isShown = levelsInView.map(levelsInView => levelsInView.length !== 0 && state.locationControl.data.zoom >= 17,
+        const isShown = levelsInView.map(levelsInView => {
+                if (levelsInView.length == 0) {
+                    return false;
+                }
+                if (state.locationControl.data.zoom <= 16) {
+                    return false;
+                }
+                if (levelsInView.length == 1 && levelsInView[0] == "0") {
+                    return false
+                }
+                return true;
+            },
             [state.locationControl])
 
         function setLevelFilter() {
-            const filter = state.globalFilters.data.find(gf => gf.id === "level")
-            const oldState = filter.filter.state;
+            console.log("Updating levels filter")
+            const filter: GlobalFilter = state.globalFilters.data.find(gf => gf.id === "level")
             if (!isShown.data) {
                 filter.filter = {
                     state: "*",
-                    currentFilter: undefined
+                    currentFilter: undefined,
                 }
+                filter.onNewPoint = undefined
 
             } else {
 
                 const l = levelSelect.GetValue().data
-                let neededLevel : TagsFilter =  new RegexTag("level", new RegExp("(^|;)" + l + "(;|$)"));
-                if(l === "0"){
+                let neededLevel: TagsFilter = new RegexTag("level", new RegExp("(^|;)" + l + "(;|$)"));
+                if (l === "0") {
                     neededLevel = new Or([neededLevel, new Tag("level", "")])
                 }
                 filter.filter = {
                     state: l,
                     currentFilter: neededLevel
                 }
+                const t = Translations.t.general.levelSelection
+                filter.onNewPoint = {
+                    confirmAddNew: t.confirmLevel.PartialSubs({level: l}),
+                    safetyCheck: t.addNewOnLevel.Subs({level: l}),
+                    tags: [new Tag("level", l)]
+                }
             }
-            if(filter.filter.state !== oldState){
-                state.globalFilters.ping();
-                console.log("Level filter is now ", filter?.filter?.currentFilter?.asHumanString(false, false, {}))
-            }
+            state.globalFilters.ping();
             return;
         }
 
@@ -104,12 +125,12 @@ export default class RightControls extends Combine {
             console.log("Is level selector shown?", shown)
             setLevelFilter()
             if (shown) {
-               // levelSelect.SetClass("invisible")
-            } else {
                 levelSelect.RemoveClass("invisible")
+            } else {
+                levelSelect.SetClass("invisible")
             }
         })
-        
+
         levelSelect.GetValue().addCallback(_ => setLevelFilter())
 
         super([new Combine([levelSelect]).SetClass(""), plus, min, geolocationButton].map(el => el.SetClass("m-0.5 md:m-1")))

UI/BigComponents/SimpleAddUI.ts

@@ -25,6 +25,7 @@ import ConfirmLocationOfPoint from "../NewPoint/ConfirmLocationOfPoint";
 import BaseLayer from "../../Models/BaseLayer";
 import Loading from "../Base/Loading";
 import Hash from "../../Logic/Web/Hash";
+import {GlobalFilter} from "../../Logic/State/MapState";
 
 /*
 * The SimpleAddUI is a single panel, which can have multiple states:
@@ -66,7 +67,8 @@ export default class SimpleAddUI extends Toggle {
                     locationControl: UIEventSource<Loc>,
                     filteredLayers: UIEventSource<FilteredLayer[]>,
                     featureSwitchFilter: UIEventSource<boolean>,
-                    backgroundLayer: UIEventSource<BaseLayer>
+                    backgroundLayer: UIEventSource<BaseLayer>,
+                    globalFilters: UIEventSource<GlobalFilter[]>
                 }, 
                 takeLocationFrom?: UIEventSource<{lat: number, lon: number}>
     ) {

UI/NewPoint/ConfirmLocationOfPoint.ts

@@ -15,12 +15,16 @@ import SimpleAddUI, {PresetInfo} from "../BigComponents/SimpleAddUI";
 import BaseLayer from "../../Models/BaseLayer";
 import Img from "../Base/Img";
 import Title from "../Base/Title";
+import {GlobalFilter} from "../../Logic/State/MapState";
+import {VariableUiElement} from "../Base/VariableUIElement";
+import {Tag} from "../../Logic/Tags/Tag";
 
 export default class ConfirmLocationOfPoint extends Combine {
 
 
     constructor(
         state: {
+            globalFilters: UIEventSource<GlobalFilter[]>;
             featureSwitchIsTesting: UIEventSource<boolean>;
             osmConnection: OsmConnection,
             featurePipeline: FeaturePipeline,
@@ -38,8 +42,8 @@ export default class ConfirmLocationOfPoint extends Combine {
         let preciseInput: LocationInput = undefined
         if (preset.preciseInput !== undefined) {
             // Create location input
-            
-            
+
+
             // We uncouple the event source
             const zloc = {...loc, zoom: 19}
             const locationSrc = new UIEventSource(zloc);
@@ -106,7 +110,11 @@ export default class ConfirmLocationOfPoint extends Combine {
         ).SetClass("font-bold break-words")
             .onClick(() => {
                 console.log("The confirmLocationPanel - precise input yielded ", preciseInput?.GetValue()?.data)
-                confirm(preset.tags, preciseInput?.GetValue()?.data ?? loc, preciseInput?.snappedOnto?.data?.properties?.id);
+                const globalFilterTagsToAdd: Tag[][] = state.globalFilters.data.filter(gf => gf.onNewPoint !== undefined)
+                    .map(gf => gf.onNewPoint.tags)
+                const globalTags : Tag[] = [].concat(...globalFilterTagsToAdd)
+                console.log("Global tags to add are: ", globalTags)
+                confirm([...preset.tags, ...globalTags], preciseInput?.GetValue()?.data ?? loc, preciseInput?.snappedOnto?.data?.properties?.id);
             });
 
         if (preciseInput !== undefined) {
@@ -126,7 +134,7 @@ export default class ConfirmLocationOfPoint extends Combine {
                 .onClick(() => filterViewIsOpened.setData(true))
 
 
-        const openLayerOrConfirm = new Toggle(
+        let openLayerOrConfirm = new Toggle(
             confirmButton,
             openLayerControl,
             preset.layerToAddTo.isDisplayed
@@ -152,6 +160,29 @@ export default class ConfirmLocationOfPoint extends Combine {
             closePopup()
         })
 
+
+        // We assume the number of global filters won't change during the run of the program
+        for (let i = 0; i < state.globalFilters.data.length; i++) {
+            const hasBeenCheckedOf = new UIEventSource(false);
+
+            const filterConfirmPanel = new VariableUiElement(
+                state.globalFilters.map(gfs => {
+                        const gf = gfs[i]
+                        const confirm = gf.onNewPoint?.confirmAddNew?.Subs({preset: preset.title})
+                        return new Combine([
+                            gf.onNewPoint?.safetyCheck,
+                            new SubtleButton(Svg.confirm_svg(), confirm).onClick(() => hasBeenCheckedOf.setData(true))
+                        ])
+                    }
+                ))
+
+
+            openLayerOrConfirm = new Toggle(
+                openLayerOrConfirm, filterConfirmPanel,
+                state.globalFilters.map(f => hasBeenCheckedOf.data || f[i]?.onNewPoint === undefined, [hasBeenCheckedOf])
+            )
+        }
+
         const hasActiveFilter = preset.layerToAddTo.appliedFilters
             .map(appliedFilters => {
                 const activeFilters = Array.from(appliedFilters.values()).filter(f => f?.currentFilter !== undefined);
@@ -171,16 +202,16 @@ export default class ConfirmLocationOfPoint extends Combine {
             Translations.t.general.cancel
         ).onClick(cancel)
 
-        
-        let examples : BaseUIElement = undefined;
-        if(preset.exampleImages !== undefined && preset.exampleImages.length > 0){
+
+        let examples: BaseUIElement = undefined;
+        if (preset.exampleImages !== undefined && preset.exampleImages.length > 0) {
             examples = new Combine([
-             new Title( preset.exampleImages.length == 1 ?  Translations.t.general.example :  Translations.t.general.examples),
+                new Title(preset.exampleImages.length == 1 ? Translations.t.general.example : Translations.t.general.examples),
                 new Combine(preset.exampleImages.map(img => new Img(img).SetClass("h-64 m-1 w-auto rounded-lg"))).SetClass("flex flex-wrap items-stretch")
             ])
-            
+
         }
-        
+
         super([
             new Toggle(
                 Translations.t.general.testing.SetClass("alert"),

UI/i18n/Translation.ts

@@ -317,6 +317,19 @@ export class TypedTranslation<T> extends Translation {
             return Utils.SubstituteKeys(template, text, lang);
         }, context)
     }
-    
-    
+
+
+    PartialSubs<X extends string>(text: Partial<T> & Record<X, string>): TypedTranslation<Omit<T, X>> {
+        const newTranslations : Record<string, string> = {}
+        for (const lang in this.translations) {
+            const template = this.translations[lang]
+            if(lang === "_context"){
+            newTranslations[lang] = template
+                continue
+            }
+            newTranslations[lang] = Utils.SubstituteKeys(template, text, lang)
+        }
+        
+        return new TypedTranslation<Omit<T, X>>(newTranslations, this.context)
+    }
 }