Merge master

src/UI/InputElement/Helpers/DirectionInput.svelte

@@ -63,7 +63,7 @@
   on:touchstart={(e) => onPosChange(e.touches[0].clientX, e.touches[0].clientY)}
 >
   <div class="absolute top-0 left-0 h-full w-full cursor-pointer">
-    <MaplibreMap attribution={false} {map} />
+    <MaplibreMap mapProperties={mla} {map} />
   </div>
 
   <div bind:this={directionElem} class="absolute top-0 left-0 h-full w-full">

src/UI/InputElement/Helpers/LocationInput.svelte

@@ -13,6 +13,7 @@
   import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
   import { createEventDispatcher, onDestroy } from "svelte"
   import Move_arrows from "../../../assets/svg/Move_arrows.svelte"
+  import SmallZoomButtons from "../../Map/SmallZoomButtons.svelte"
 
   /**
    * A visualisation to pick a location on a map background
@@ -83,7 +84,7 @@
 
 <div class="min-h-32 relative h-full cursor-pointer overflow-hidden">
   <div class="absolute top-0 left-0 h-full w-full cursor-pointer">
-    <MaplibreMap center={{ lng: initialCoordinate.lon, lat: initialCoordinate.lat }} {map} />
+    <MaplibreMap center={{ lng: initialCoordinate.lon, lat: initialCoordinate.lat }} {map} mapProperties={mla}/>
   </div>
 
   <div
@@ -95,4 +96,5 @@
   </div>
 
   <DragInvitation hideSignal={mla.location} />
+  <SmallZoomButtons adaptor={mla} />
 </div>

src/UI/InputElement/Helpers/TranslationInput.svelte

@@ -3,6 +3,7 @@
   import LanguageUtils from "../../../Utils/LanguageUtils"
   import { createEventDispatcher, onDestroy } from "svelte"
   import ValidatedInput from "../ValidatedInput.svelte"
+  import { del } from "idb-keyval"
 
   export let value: UIEventSource<Record<string, string>> = new UIEventSource<
     Record<string, string>
@@ -18,14 +19,25 @@
   const allLanguages: string[] = LanguageUtils.usedLanguagesSorted
   let currentLang = new UIEventSource("en")
   const currentVal = new UIEventSource<string>("")
+  /**
+   * Mostly the same as currentVal, but might be the empty string as well
+   */
+  const currentValRaw = new UIEventSource<string>("")
+
   let dispatch = createEventDispatcher<{ submit }>()
 
   function update() {
-    const v = currentVal.data
+    let v = currentValRaw.data
     const l = currentLang.data
+    console.log("Updating translation input for value", v, " and language", l)
     if (<any>translations.data === "" || translations.data === undefined) {
       translations.data = {}
     }
+    if (v === "") {
+      delete translations.data[l]
+      translations.ping()
+      return
+    }
     if (translations.data[l] === v) {
       return
     }
@@ -39,35 +51,52 @@
         translations.data = {}
       }
       translations.data[currentLang] = translations.data[currentLang] ?? ""
-      currentVal.setData(translations.data[currentLang])
+      if (translations.data[currentLang] === "") {
+        delete translations.data[currentLang]
+      }
+      currentVal.setData(translations.data[currentLang] ?? "")
+      currentValRaw.setData(translations.data[currentLang])
     })
   )
 
   onDestroy(
-    currentVal.addCallbackAndRunD(() => {
+    currentValRaw.addCallbackAndRunD(() => {
       update()
     })
   )
-</script>
 
-<div class="interactive m-1 mt-2 flex space-x-1 font-bold">
+</script>
+<div class="flex flex-col gap-y-1">
+  <div class="interactive m-1 mt-2 flex space-x-1 font-bold">
   <span>
     {prefix}
   </span>
-  <select bind:value={$currentLang}>
-    {#each allLanguages as language}
-      <option value={language}>
-        {language}
-      </option>
-    {/each}
-  </select>
-  <ValidatedInput
-    type="string"
-    cls="w-full"
-    value={currentVal}
-    on:submit={() => dispatch("submit")}
-  />
-  <span>
+    <select bind:value={$currentLang}>
+      {#each allLanguages as language}
+        <option value={language}>
+          {language}
+          {#if $translations[language] !== undefined}
+            *
+          {/if}
+        </option>
+      {/each}
+    </select>
+    <ValidatedInput
+      type="string"
+      cls="w-full"
+      value={currentVal}
+      unvalidatedText={currentValRaw}
+      on:submit={() => dispatch("submit")}
+    />
+    <span>
     {postfix}
   </span>
+
+  </div>
+  You have currently set translations for
+  <ul>
+    {#each Object.keys($translations) as l}
+      <li><button class="small" on:click={() => currentLang.setData(l)}><b>{l}:</b> {$translations[l]}</button></li>
+    {/each}
+  </ul>
 </div>

src/UI/InputElement/InputHelpers.ts

@@ -60,6 +60,11 @@ export default class InputHelpers {
         if (!mapProperties.zoom) {
             mapProperties = { ...mapProperties, zoom: new UIEventSource<number>(zoom) }
         }
+        if (!mapProperties.rasterLayer) {
+       /*     mapProperties = {
+                ...mapProperties, rasterLayer: properties?.mapProperties?.rasterLayer
+            }*/
+        }
         return mapProperties
     }
 
@@ -69,11 +74,10 @@ export default class InputHelpers {
     ) {
         const inputHelperOptions = props
         const args = inputHelperOptions.args ?? []
-        const searchKey = <string>args[0] ?? "name"
+        const searchKey: string = <string>args[0] ?? "name"
 
-        const searchFor = <string>(
-            (inputHelperOptions.feature?.properties[searchKey]?.toLowerCase() ?? "")
-        )
+        const searchFor: string = searchKey.split(";").map(k => inputHelperOptions.feature?.properties[k]?.toLowerCase())
+            .find(foundValue => !!foundValue) ?? ""
 
         let searchForValue: UIEventSource<string> = new UIEventSource(searchFor)
         const options: any = args[1]
@@ -121,7 +125,7 @@ export default class InputHelpers {
             value,
             searchText: searchForValue,
             instanceOf,
-            notInstanceOf,
+            notInstanceOf
         })
     }
 }

src/UI/InputElement/LanguagePicker.svelte

@@ -40,11 +40,14 @@
 {#if availableLanguages?.length > 1}
   <form class={twMerge("flex max-w-full items-center pr-4", clss)}>
     <label
+      for="pick-language"
       class="neutral-label flex max-w-full"
       use:ariaLabel={Translations.t.general.pickLanguage}
     >
       <LanguageIcon class="mr-1 h-4 w-4 shrink-0" aria-hidden="true" />
-      <Dropdown cls="max-w-full" value={assignTo}>
+    </label>
+
+      <Dropdown cls="max-w-full" value={assignTo} id="pick-language">
         {#if preferredFiltered}
           {#each preferredFiltered as language}
             <option value={language} class="font-bold">
@@ -70,6 +73,5 @@
           </option>
         {/each}
       </Dropdown>
-    </label>
   </form>
 {/if}

src/UI/InputElement/Validator.ts

@@ -57,8 +57,8 @@ export abstract class Validator {
      *
      * Returns 'undefined' if the element is valid
      */
-    public getFeedback(s: string, _?: () => string): Translation | undefined {
-        if (this.isValid(s)) {
+    public getFeedback(s: string, getCountry?: () => string): Translation | undefined {
+        if (this.isValid(s, getCountry)) {
             return undefined
         }
         const tr = Translations.t.validation[this.name]
@@ -71,7 +71,7 @@ export abstract class Validator {
         return Translations.t.validation[this.name].description
     }
 
-    public isValid(_: string): boolean {
+    public isValid(_: string, getCountry?: () => string): boolean {
         return true
     }
 

src/UI/InputElement/Validators/OpeningHoursValidator.ts

@@ -52,7 +52,4 @@ export default class OpeningHoursValidator extends Validator {
         )
     }
 
-    reformat(s: string, _?: () => string): string {
-        return super.reformat(s, _)
-    }
 }