Add enable/disable all button for layers, fix #1407

langs/en.json

@@ -223,6 +223,10 @@
         "example": "Example",
         "examples": "Examples",
         "fewChangesBefore": "Please, answer a few questions of existing features before adding a new feature.",
+        "filterPanel": {
+            "disableAll": "Disable all",
+            "enableAll": "Enable all"
+        },
         "geopermissionDenied": "Using the geolocation was denied",
         "getStartedLogin": "Log in with OpenStreetMap to get started",
         "getStartedNewAccount": " or <a href='https://www.openstreetmap.org/user/new' target='_blank'>create a new account</a>",

src/UI/Base/Checkbox.svelte

@@ -8,6 +8,9 @@
   let _c: boolean = selected.data ?? true
   let id = `checkbox-input-${Math.round(Math.random()*100000000)}`
   $: selected.set(_c)
+  selected.addCallbackD(s => {
+      _c = s
+  })
 </script>
 
 <label class="no-image-background flex items-center gap-1">

src/UI/BigComponents/FilterPanel.svelte

@@ -1,17 +1,49 @@
 <script lang="ts">
-  /**
+    /**
-   * THe panel containing all filter- and layerselection options
+     * THe panel containing all filter- and layerselection options
-   */
+     */
 
-  import OverlayToggle from "./OverlayToggle.svelte"
+    import OverlayToggle from "./OverlayToggle.svelte"
-  import Filterview from "./Filterview.svelte"
+    import Filterview from "./Filterview.svelte"
-  import ThemeViewState from "../../Models/ThemeViewState"
+    import ThemeViewState from "../../Models/ThemeViewState"
-  import Translations from "../i18n/Translations"
+    import Translations from "../i18n/Translations"
-  import Tr from "../Base/Tr.svelte"
+    import Tr from "../Base/Tr.svelte"
-  import Filter from "../../assets/svg/Filter.svelte"
+    import Filter from "../../assets/svg/Filter.svelte"
+
+    export let state: ThemeViewState
+    let layout = state.layout
+    
+    let allEnabled : boolean
+    let allDisabled: boolean
+    
+    function updateEnableState(){
+        allEnabled = true
+        allDisabled = true
+        state.layerState.filteredLayers.forEach((v) => {
+            if(!v.layerDef.name){
+                return
+            }
+            allEnabled &&= v.isDisplayed.data
+            allDisabled &&= !v.isDisplayed.data
+        })
+    }
+    
+    updateEnableState()
+    state.layerState.filteredLayers.forEach((v) => {
+        if(!v.layerDef.name){
+            return
+        }
+       v.isDisplayed.addCallbackD(_ => updateEnableState())
+    })
+    function enableAll(doEnable: boolean){
+        state.layerState.filteredLayers.forEach((v) => {
+            if(!v.layerDef.name){
+                return
+            }
+            v.isDisplayed.setData(doEnable)
+        })
+    }
     
-  export let state: ThemeViewState
-  let layout = state.layout
 </script>
 
 <div class="m-2 flex flex-col">
@@ -27,6 +59,15 @@
       highlightedLayer={state.guistate.highlightedLayerInFilters}
     />
   {/each}
+  <div class="flex self-end mt-1">
+    <button class="small" class:disabled={allEnabled} on:click={() => enableAll(true)}>
+      <Tr t={Translations.t.general.filterPanel.enableAll}/>
+    </button>
+    <button class="small"  class:disabled={allDisabled} on:click={() => enableAll(false)}>
+      <Tr t={Translations.t.general.filterPanel.disableAll}/>
+    </button>
+  </div>
+
   {#each layout.tileLayerSources as tilesource}
     <OverlayToggle
       layerproperties={tilesource}