Fix: hide some elements of the UI if they are disabled by a featureSwitch

src/Logic/FeatureSource/Sources/LastClickFeatureSource.ts

@@ -12,57 +12,57 @@ import { OsmTags } from "../../../Models/OsmFeature";
  * Based on a lon/lat UIEVentSource, will generate the corresponding feature with the correct properties
  */
 export class LastClickFeatureSource implements WritableFeatureSource {
-    public readonly features: UIEventSource<Feature[]> = new UIEventSource<Feature[]>([])
+    public readonly features: UIEventSource<Feature[]> = new UIEventSource<Feature[]>([]);
-    private i: number = 0
+    public readonly hasNoteLayer: boolean;
-    private readonly hasNoteLayer: string
+    public readonly renderings: string[];
-    private readonly renderings: string[];
+    public readonly hasPresets: boolean;
-    private readonly hasPresets: string;
+    private i: number = 0;
 
     constructor(location: Store<{ lon: number; lat: number }>, layout: LayoutConfig) {
-        this.hasNoteLayer = layout.layers.some((l) => l.id === "note") ? "yes" : "no"
+        this.hasNoteLayer = layout.layers.some((l) => l.id === "note");
-        this.hasPresets=  layout.layers.some((l) => l.presets?.length > 0) ? "yes" : "no"
+        this.hasPresets = layout.layers.some((l) => l.presets?.length > 0);
-        const allPresets: BaseUIElement[] = []
+        const allPresets: BaseUIElement[] = [];
         for (const layer of layout.layers)
             for (let i = 0; i < (layer.presets ?? []).length; i++) {
-                const preset = layer.presets[i]
+                const preset = layer.presets[i];
-                const tags = new ImmutableStore(TagUtils.KVtoProperties(preset.tags))
+                const tags = new ImmutableStore(TagUtils.KVtoProperties(preset.tags));
                 const { html } = layer.mapRendering[0].RenderIcon(tags, false, {
                     noSize: true,
-                    includeBadges: false,
+                    includeBadges: false
-                })
+                });
-                allPresets.push(html)
+                allPresets.push(html);
             }
 
         this.renderings = Utils.Dedup(
             allPresets.map((uiElem) =>
                 Utils.runningFromConsole ? "" : uiElem.ConstructElement().innerHTML
             )
-        )
+        );
 
         location.addCallbackAndRunD(({ lon, lat }) => {
-            this.features.setData([this.createFeature(lon, lat)])
+            this.features.setData([this.createFeature(lon, lat)]);
-        })
+        });
     }
 
     public createFeature(lon: number, lat: number): Feature<Point, OsmTags> {
         const properties: OsmTags = {
             lastclick: "yes",
             id: "last_click_" + this.i,
-            has_note_layer: this.hasNoteLayer ,
+            has_note_layer: this.hasNoteLayer ? "yes" : "no",
-            has_presets:this.hasPresets ,
+            has_presets: this.hasPresets ? "yes" : "no",
             renderings: this.renderings.join(""),
             number_of_presets: "" + this.renderings.length,
-            first_preset: this.renderings[0],
+            first_preset: this.renderings[0]
-        }
+        };
-       this. i++
+        this.i++;
 
         return <Feature<Point, OsmTags>>{
             type: "Feature",
             properties,
             geometry: {
                 type: "Point",
-                coordinates: [lon, lat],
+                coordinates: [lon, lat]
-            },
+            }
-        }
+        };
     }
 }

src/Logic/State/FeatureSwitchState.ts

@@ -99,7 +99,7 @@ export default class FeatureSwitchState extends OsmConnectionFeatureSwitches {
         )
         this.featureSwitchCommunityIndex = FeatureSwitchUtils.initSwitch(
             "fs-community-index",
-            true,
+            this.featureSwitchEnableLogin.data,
             "Disables/enables the button to get in touch with the community"
         )
         this.featureSwitchExtraLinkEnabled = FeatureSwitchUtils.initSwitch(

src/Models/ThemeViewState.ts

@@ -338,7 +338,6 @@ export default class ThemeViewState implements SpecialVisualizationState {
     );
 
     this.initActors();
-   // TODO remove this.addLastClick(lastClick);
     this.drawSpecialLayers();
     this.initHotkeys();
     this.miscSetup();
@@ -417,6 +416,10 @@ export default class ThemeViewState implements SpecialVisualizationState {
       }
     );
 
+    this.featureSwitches.featureSwitchBackgroundSelection.addCallbackAndRun(enable => {
+        if(!enable){
+            return
+        }
         Hotkeys.RegisterHotkey(
             {
                 nomod: "b"
@@ -428,7 +431,6 @@ export default class ThemeViewState implements SpecialVisualizationState {
                 }
             }
         );
-
         Hotkeys.RegisterHotkey(
             { shift: "O" },
             Translations.t.hotkeyDocumentation.selectMapnik,
@@ -463,6 +465,12 @@ export default class ThemeViewState implements SpecialVisualizationState {
             Translations.t.hotkeyDocumentation.selectAerial,
             () => setLayerCategory("photo")
         );
+        return true
+    })
+
+
+
+
   }
 
   private addLastClick(last_click: LastClickFeatureSource) {

src/UI/Base/TabbedGroup.svelte

@@ -3,16 +3,28 @@
      * Thin wrapper around 'TabGroup' which binds the state
      */
 
-  import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@rgossiaux/svelte-headlessui"
+    import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@rgossiaux/svelte-headlessui";
-  import { UIEventSource } from "../../Logic/UIEventSource"
+    import { ImmutableStore, Store, UIEventSource } from "../../Logic/UIEventSource";
-  import { twJoin } from "tailwind-merge"
+    import { twJoin } from "tailwind-merge";
 
-  export let tab: UIEventSource<number>
+    /**
-  let tabElements: HTMLElement[] = []
+     * If a condition is given for a certain tab, it will only be shown if this condition is true.
-  $: tabElements[$tab]?.click()
+     * E.g.
+     * condition3 = new ImmutableStore(false) will always hide tab3 (the fourth tab)
+     */
+    let tr = new ImmutableStore(true)
+    export let condition0: Store<boolean> = tr
+    export let condition1: Store<boolean> = tr
+    export let condition2: Store<boolean> = tr
+    export let condition3: Store<boolean> = tr
+    export let condition4: Store<boolean> = tr
+    
+    export let tab: UIEventSource<number>;
+    let tabElements: HTMLElement[] = [];
+    $: tabElements[$tab]?.click();
     $: {
         if (tabElements[tab.data]) {
-      window.setTimeout(() => tabElements[tab.data].click(), 50)
+            window.setTimeout(() => tabElements[tab.data].click(), 50);
         }
     }
 </script>
@@ -29,41 +41,31 @@
   >
     <div class="interactive sticky top-0 flex items-center justify-between">
       <TabList class="flex flex-wrap">
-        {#if $$slots.title1}
+        <Tab class={({ selected }) => twJoin("tab", selected && "primary", !$condition0 && "hidden")}>
-          <Tab class={({ selected }) => twJoin("tab", selected && "primary")}>
           <div bind:this={tabElements[0]} class="flex">
             <slot name="title0">Tab 0</slot>
           </div>
         </Tab>
-        {/if}
+        <Tab class={({ selected }) => twJoin("tab", selected && "primary", !$condition1 && "hidden")}>
-        {#if $$slots.title1}
-          <Tab class={({ selected }) => twJoin("tab", selected && "primary")}>
           <div bind:this={tabElements[1]} class="flex">
             <slot name="title1" />
           </div>
         </Tab>
-        {/if}
+        <Tab class={({ selected }) => twJoin("tab", selected && "primary", !$condition2 && "hidden")}>
-        {#if $$slots.title2}
-          <Tab class={({ selected }) => twJoin("tab", selected && "primary")}>
           <div bind:this={tabElements[2]} class="flex">
             <slot name="title2" />
           </div>
         </Tab>
-        {/if}
+        <Tab class={({ selected }) => twJoin("tab", selected && "primary", !$condition3 && "hidden")}>
-        {#if $$slots.title3}
-          <Tab class={({ selected }) => twJoin("tab", selected && "primary")}>
           <div bind:this={tabElements[3]} class="flex">
             <slot name="title3" />
           </div>
         </Tab>
-        {/if}
+        <Tab class={({ selected }) => twJoin("tab", selected && "primary", !$condition4 && "hidden")}>
-        {#if $$slots.title4}
-          <Tab class={({ selected }) => twJoin("tab", selected && "primary")}>
           <div bind:this={tabElements[4]} class="flex">
             <slot name="title4" />
           </div>
         </Tab>
-        {/if}
       </TabList>
       <slot name="post-tablist" />
     </div>
@@ -75,16 +77,24 @@
           </slot>
         </TabPanel>
         <TabPanel class="tabpanel">
-          <slot name="content1" />
+          <slot name="content1">
+            <div />
+          </slot>
         </TabPanel>
         <TabPanel class="tabpanel">
-          <slot name="content2" />
+          <slot name="content2">
+            <div />
+          </slot>
         </TabPanel>
         <TabPanel class="tabpanel">
-          <slot name="content3" />
+          <slot name="content3">
+            <div />
+          </slot>
         </TabPanel>
         <TabPanel class="tabpanel">
-          <slot name="content4" />
+          <slot name="content4">
+            <div />
+          </slot>
         </TabPanel>
       </TabPanels>
     </div>

src/UI/BigComponents/ThemeIntroPanel.svelte

@@ -1,45 +1,46 @@
 <script lang="ts">
-  import Translations from "../i18n/Translations"
+    import Translations from "../i18n/Translations";
-  import Svg from "../../Svg"
+    import Svg from "../../Svg";
-  import Tr from "../Base/Tr.svelte"
+    import Tr from "../Base/Tr.svelte";
-  import NextButton from "../Base/NextButton.svelte"
+    import NextButton from "../Base/NextButton.svelte";
-  import Geosearch from "./Geosearch.svelte"
+    import Geosearch from "./Geosearch.svelte";
-  import ToSvelte from "../Base/ToSvelte.svelte"
+    import ToSvelte from "../Base/ToSvelte.svelte";
-  import ThemeViewState from "../../Models/ThemeViewState"
+    import ThemeViewState from "../../Models/ThemeViewState";
-  import { Store, UIEventSource } from "../../Logic/UIEventSource"
+    import { Store, UIEventSource } from "../../Logic/UIEventSource";
-  import { SearchIcon } from "@rgossiaux/svelte-heroicons/solid"
+    import { SearchIcon } from "@rgossiaux/svelte-heroicons/solid";
-  import { twJoin } from "tailwind-merge"
+    import { twJoin } from "tailwind-merge";
-  import { Utils } from "../../Utils"
+    import { Utils } from "../../Utils";
-  import type { GeolocationPermissionState } from "../../Logic/State/GeoLocationState"
+    import type { GeolocationPermissionState } from "../../Logic/State/GeoLocationState";
+    import If from "../Base/If.svelte";
 
     /**
      * The theme introduction panel
      */
-  export let state: ThemeViewState
+    export let state: ThemeViewState;
-  let layout = state.layout
+    let layout = state.layout;
-  let selectedElement = state.selectedElement
+    let selectedElement = state.selectedElement;
-  let selectedLayer = state.selectedLayer
+    let selectedLayer = state.selectedLayer;
 
-  let triggerSearch: UIEventSource<any> = new UIEventSource<any>(undefined)
+    let triggerSearch: UIEventSource<any> = new UIEventSource<any>(undefined);
-  let searchEnabled = false
+    let searchEnabled = false;
 
     let geopermission: Store<GeolocationPermissionState> =
-    state.geolocation.geolocationState.permission
+        state.geolocation.geolocationState.permission;
-  let currentGPSLocation = state.geolocation.geolocationState.currentGPSLocation
+    let currentGPSLocation = state.geolocation.geolocationState.currentGPSLocation;
 
-  geopermission.addCallback((perm) => console.log(">>>> Permission", perm))
+    geopermission.addCallback((perm) => console.log(">>>> Permission", perm));
 
     function jumpToCurrentLocation() {
-    const glstate = state.geolocation.geolocationState
+        const glstate = state.geolocation.geolocationState;
         if (glstate.currentGPSLocation.data !== undefined) {
-      const c: GeolocationCoordinates = glstate.currentGPSLocation.data
+            const c: GeolocationCoordinates = glstate.currentGPSLocation.data;
-      state.guistate.themeIsOpened.setData(false)
+            state.guistate.themeIsOpened.setData(false);
-      const coor = { lon: c.longitude, lat: c.latitude }
+            const coor = { lon: c.longitude, lat: c.latitude };
-      state.mapProperties.location.setData(coor)
+            state.mapProperties.location.setData(coor);
         }
         if (glstate.permission.data !== "granted") {
-      glstate.requestPermission()
+            glstate.requestPermission();
-      return
+            return;
         }
     }
 </script>
@@ -62,7 +63,9 @@
       </div>
     </NextButton>
 
+
     <div class="flex w-full flex-wrap sm:flex-nowrap">
+      <If condition={state.featureSwitches.featureSwitchGeolocation}>
         {#if $currentGPSLocation !== undefined || $geopermission === "prompt"}
           <button class="flex w-full items-center gap-x-2" on:click={jumpToCurrentLocation}>
             <ToSvelte construct={Svg.crosshair_svg().SetClass("w-8 h-8")} />
@@ -94,7 +97,10 @@
             <Tr t={Translations.t.general.waitingForLocation} />
           </button>
         {/if}
+      </If>
 
+
+      <If condition={state.featureSwitches.featureSwitchSearch}>
         <div class=".button low-interaction m-1 flex w-full items-center gap-x-2 rounded border p-2">
           <div class="w-full">
             <Geosearch
@@ -117,6 +123,7 @@
             <SearchIcon class="h-6 w-6" />
           </button>
         </div>
+      </If>
     </div>
   </div>
 

src/UI/ThemeViewGUI.svelte

@@ -169,19 +169,28 @@
   <!-- bottom controls -->
   <div class="flex w-full items-end justify-between px-4">
     <div class="flex flex-col">
-      <span>
+      <If condition={featureSwitches.featureSwitchEnableLogin}>
+        {#if state.lastClickObject.hasPresets || state.lastClickObject.hasNoteLayer}
           <button class="w-fit pointer-events-auto" on:click={() => {state.openNewDialog()}}>
+            {#if state.lastClickObject.hasPresets}
               <Tr t={Translations.t.general.add.title} />
+            {:else}
+              <Tr t={Translations.t.notes.addAComment} />
+            {/if}
           </button>
-      </span>
+        {/if}
+      </If>
 
       <div class="flex">
         <!-- bottom left elements -->
+        <If condition={state.featureSwitches.featureSwitchFilter}>
           <MapControlButton on:click={() => state.guistate.openFilterView()}>
             <ToSvelte construct={Svg.filter_svg().SetClass("h-6 w-6")} />
           </MapControlButton>
-
+        </If>
+        <If condition={state.featureSwitches.featureSwitchBackgroundSelection}>
           <OpenBackgroundSelectorButton hideTooltip={true} {state} />
+        </If>
         <a
           class="bg-black-transparent pointer-events-auto h-fit max-h-12 cursor-pointer self-end overflow-hidden rounded-2xl pl-1 pr-2 text-white opacity-50 hover:opacity-100"
           on:click={() => {
@@ -269,7 +278,7 @@
   <!-- Theme menu -->
   <FloatOver on:close={() => state.guistate.themeIsOpened.setData(false)}>
     <span slot="close-button"><!-- Disable the close button --></span>
-    <TabbedGroup tab={state.guistate.themeViewTabIndex}>
+    <TabbedGroup condition1={state.featureSwitches.featureSwitchFilter} tab={state.guistate.themeViewTabIndex}>
       <div slot="post-tablist">
         <XCircleIcon
           class="mr-2 h-8 w-8"
@@ -287,10 +296,8 @@
       </div>
 
       <div class="flex" slot="title1">
-        <If condition={state.featureSwitches.featureSwitchFilter}>
         <ToSvelte construct={Svg.filter_svg().SetClass("w-4 h-4")} />
         <Tr t={Translations.t.general.menu.filter} />
-        </If>
       </div>
 
       <div class="m-2 flex flex-col" slot="content1">
@@ -310,6 +317,7 @@
           />
         {/each}
       </div>
+
       <div class="flex" slot="title2">
         <If condition={state.featureSwitches.featureSwitchEnableExport}>
           <ToSvelte construct={Svg.download_svg().SetClass("w-4 h-4")} />
@@ -356,7 +364,8 @@
   <!-- Menu page -->
   <FloatOver on:close={() =>      state.guistate.menuIsOpened.setData(false)    }>
     <span slot="close-button"><!-- Hide the default close button --></span>
-    <TabbedGroup tab={state.guistate.menuViewTabIndex}>
+    <TabbedGroup condition1={featureSwitches.featureSwitchEnableLogin} condition2={state.featureSwitches. featureSwitchCommunityIndex}
+                 tab={state.guistate.menuViewTabIndex}>
       <div slot="post-tablist">
         <XCircleIcon
           class="mr-2 h-8 w-8"
@@ -431,7 +440,6 @@
       <div class="m-2" slot="content2">
         <CommunityIndexView location={state.mapProperties.location} />
       </div>
-
       <div class="flex" slot="title3">
         <EyeIcon class="w-6" />
         <Tr t={Translations.t.privacy.title} />
@@ -442,12 +450,15 @@
 
       <Tr slot="title4" t={Translations.t.advanced.title} />
       <div class="m-2 flex flex-col" slot="content4">
+        <If condition={featureSwitches.featureSwitchEnableLogin}>
           <OpenIdEditor mapProperties={state.mapProperties} />
           <ToSvelte
             construct={() =>
             new OpenJosm(state.osmConnection, state.mapProperties.bounds).SetClass("w-full")}
           />
           <MapillaryLink mapProperties={state.mapProperties} />
+        </If>
+
         <ToSvelte construct={Hotkeys.generateDocumentationDynamic} />
       </div>
     </TabbedGroup>