Formatting

UI/Popup/TagRendering/TagRenderingQuestion.svelte

@@ -16,7 +16,10 @@
     import {ExclamationIcon} from "@rgossiaux/svelte-heroicons/solid";
     import SpecialTranslation from "./SpecialTranslation.svelte";
     import TagHint from "../TagHint.svelte";
-  import Validators from "../../InputElement/Validators";
+    import LoginToggle from "../../Base/LoginToggle.svelte";
+    import SubtleButton from "../../Base/SubtleButton.svelte";
+    import Loading from "../../Base/Loading.svelte";
+    import type {Writable} from "svelte/store";
 
     export let config: TagRenderingConfig;
     export let tags: UIEventSource<Record<string, string>>;
@@ -55,6 +58,9 @@
     }
 
     let mappings: Mapping[];
+    let searchTerm: Writable<string> = new UIEventSource("")
+    $:{console.log("Seachterm:", $searchTerm)}
+    
     $: {
         mappings = config.mappings?.filter(m => !mappingIsHidden(m));
         try {
@@ -135,9 +141,16 @@
             </div>
         {/if}
 
+
+        {#if config.mappings?.length >= 8}
+            <input type="text" bind:value={$searchTerm}>
+        {/if}
+        
+
         {#if config.freeform?.key && !(mappings?.length > 0)}
             <!-- There are no options to choose from, simply show the input element: fill out the text field -->
             <FreeformInput {config} {tags} feature={selectedElement} value={freeformInput}/>
+            <img src="./assets/svg/search.svg" class="w-4 h-4"/>
         {:else if mappings !== undefined && !config.multiAnswer}
             <!-- Simple radiobuttons as mapping -->
             <div class="flex flex-col">
@@ -145,8 +158,10 @@
                     <!-- Even though we have a list of 'mappings' already, we still iterate over the list as to keep the original indices-->
                     {#if !mappingIsHidden(mapping)  }
                         <label class="flex">
-              <input type="radio" bind:group={selectedMapping} name={"mappings-radio-"+config.id} value={i}>
-              <TagRenderingMapping {mapping} {tags} {state} {selectedElement} {layer}></TagRenderingMapping>
+                            <input type="radio" bind:group={selectedMapping} name={"mappings-radio-"+config.id}
+                                   value={i}>
+                            <TagRenderingMapping {mapping} {tags} {state} {selectedElement}
+                                                 {layer}></TagRenderingMapping>
                         </label>
                     {/if}
                 {/each}
@@ -165,7 +180,8 @@
                 {#each config.mappings as mapping, i (mapping.then)}
                     {#if !mappingIsHidden(mapping)}
                         <label class="flex">
-              <input type="checkbox" name={"mappings-checkbox-"+config.id+"-"+i} bind:checked={checkedMappings[i]}>
+                            <input type="checkbox" name={"mappings-checkbox-"+config.id+"-"+i}
+                                   bind:checked={checkedMappings[i]}>
                             <TagRenderingMapping {mapping} {tags} {state} {selectedElement}></TagRenderingMapping>
                         </label>
                     {/if}
@@ -181,10 +197,19 @@
             </div>
         {/if}
 
+        <LoginToggle {state}>
+            <Loading slot="loading"/>
+            <SubtleButton slot="not-logged-in" on:click={() => state.osmConnection.AttemptLogin()}>
+                <img slot="image" src="./assets/svg/login.svg" class="w-8 h-8"/>
+                <Tr t={Translations.t.general.loginToStart} slot="message"></Tr>
+            </SubtleButton>
+
+
             <TagHint osmConnection={state.osmConnection} tags={selectedTags}></TagHint>
             <div>
                 <!-- TagRenderingQuestion-buttons -->
                 <slot name="cancel"></slot>
+
                 {#if selectedTags !== undefined}
                     <button on:click={onSave}>
                         <Tr t={Translations.t.general.save}></Tr>
@@ -196,6 +221,6 @@
                     </div>
                 {/if}
             </div>
-
+        </LoginToggle>
     </div>
 {/if}