Refactoring: move all code files into a src directory

src/UI/Map/RasterLayerOverview.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+  /**
+   * The RasterLayerOverview shows the available 4 categories of maps with a RasterLayerPicker
+   */
+  import { Store, UIEventSource } from "../../Logic/UIEventSource"
+  import type { RasterLayerPolygon } from "../../Models/RasterLayers"
+  import type { MapProperties } from "../../Models/MapProperties"
+  import { Map as MlMap } from "maplibre-gl"
+  import RasterLayerPicker from "./RasterLayerPicker.svelte"
+  import type { EliCategory } from "../../Models/RasterLayerProperties"
+  import UserRelatedState from "../../Logic/State/UserRelatedState"
+  import Translations from "../i18n/Translations"
+  import Tr from "../Base/Tr.svelte"
+
+  export let availableLayers: Store<RasterLayerPolygon[]>
+  export let mapproperties: MapProperties
+  export let userstate: UserRelatedState
+  export let map: Store<MlMap>
+  /**
+   * Used to toggle the background layers on/off
+   */
+  export let visible: UIEventSource<boolean> = undefined
+
+  type CategoryType = "photo" | "map" | "other" | "osmbasedmap"
+  const categories: Record<CategoryType, EliCategory[]> = {
+    photo: ["photo", "historicphoto"],
+    map: ["map", "historicmap"],
+    other: ["other", "elevation"],
+    osmbasedmap: ["osmbasedmap"],
+  }
+
+  function availableForCategory(type: CategoryType): Store<RasterLayerPolygon[]> {
+    const keywords = categories[type]
+    return availableLayers.mapD((available) =>
+      available.filter((layer) => keywords.indexOf(<EliCategory>layer.properties.category) >= 0)
+    )
+  }
+
+  const mapLayers = availableForCategory("map")
+  const osmbasedmapLayers = availableForCategory("osmbasedmap")
+  const photoLayers = availableForCategory("photo")
+  const otherLayers = availableForCategory("other")
+
+  function onApply() {
+    visible.setData(false)
+  }
+
+  function getPref(type: CategoryType): undefined | UIEventSource<string> {
+    return userstate?.osmConnection?.GetPreference("preferred-layer-" + type)
+  }
+</script>
+
+<div class="flex h-full flex-col">
+  <slot name="title">
+    <h2>
+      <Tr t={Translations.t.general.backgroundMap} />
+    </h2>
+  </slot>
+
+  <div class="grid h-full w-full grid-cols-1 gap-2 md:grid-cols-2">
+    <RasterLayerPicker
+      availableLayers={photoLayers}
+      favourite={getPref("photo")}
+      {map}
+      {mapproperties}
+      on:appliedLayer={onApply}
+      {visible}
+    />
+    <RasterLayerPicker
+      availableLayers={mapLayers}
+      favourite={getPref("map")}
+      {map}
+      {mapproperties}
+      on:appliedLayer={onApply}
+      {visible}
+    />
+    <RasterLayerPicker
+      availableLayers={osmbasedmapLayers}
+      favourite={getPref("osmbasedmap")}
+      {map}
+      {mapproperties}
+      on:appliedLayer={onApply}
+      {visible}
+    />
+    <RasterLayerPicker
+      availableLayers={otherLayers}
+      favourite={getPref("other")}
+      {map}
+      {mapproperties}
+      on:appliedLayer={onApply}
+      {visible}
+    />
+  </div>
+</div>