Chore: housekeeping: lint

src/UI/Image/AttributedImage.svelte

@@ -1,30 +1,34 @@
 <script lang="ts">
-    /**
-     * Shows an image with attribution
-     */
-    import ImageAttribution from "./ImageAttribution.svelte"
-    import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
-    import { Mapillary } from "../../Logic/ImageProviders/Mapillary"
+  /**
+   * Shows an image with attribution
+   */
+  import ImageAttribution from "./ImageAttribution.svelte"
+  import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
+  import { Mapillary } from "../../Logic/ImageProviders/Mapillary"
 
-    export let image: ProvidedImage
-    let fallbackImage: string = undefined
-    if (image.provider === Mapillary.singleton) {
-        fallbackImage = "./assets/svg/blocked.svg"
-    }
+  export let image: ProvidedImage
+  let fallbackImage: string = undefined
+  if (image.provider === Mapillary.singleton) {
+    fallbackImage = "./assets/svg/blocked.svg"
+  }
 
-    let imgEl: HTMLImageElement
-    export let imgClass: string = undefined
+  let imgEl: HTMLImageElement
+  export let imgClass: string = undefined
 </script>
 
-
 <div class="relative">
-  <img bind:this={imgEl} src={image.url} class={imgClass ?? ""} on:error={(event) => {
-    if(fallbackImage){
-      imgEl.src = fallbackImage
-    }
-  }}>
+  <img
+    bind:this={imgEl}
+    src={image.url}
+    class={imgClass ?? ""}
+    on:error={(event) => {
+      if (fallbackImage) {
+        imgEl.src = fallbackImage
+      }
+    }}
+  />
 
   <div class="absolute bottom-0 left-0">
-    <ImageAttribution {image}/>
+    <ImageAttribution {image} />
   </div>
 </div>

src/UI/Image/ImageAttribution.svelte

@@ -1,32 +1,32 @@
 <script lang="ts">
-    import { LicenseInfo } from "../../Logic/ImageProviders/LicenseInfo"
-    import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
-    import { Store, UIEventSource } from "../../Logic/UIEventSource"
-    import ToSvelte from "../Base/ToSvelte.svelte"
-    import { EyeIcon } from "@rgossiaux/svelte-heroicons/solid"
-
-    /**
-     * A small element showing the attribution of a single image
-     */
-    export let image: ProvidedImage
-    let license: Store<LicenseInfo> = UIEventSource.FromPromise(image.provider?.DownloadAttribution(image.url))
-    let icon = image.provider?.SourceIcon(image.id)?.SetClass("block h-8 w-8 pr-2")
+  import { LicenseInfo } from "../../Logic/ImageProviders/LicenseInfo"
+  import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
+  import { Store, UIEventSource } from "../../Logic/UIEventSource"
+  import ToSvelte from "../Base/ToSvelte.svelte"
+  import { EyeIcon } from "@rgossiaux/svelte-heroicons/solid"
 
+  /**
+   * A small element showing the attribution of a single image
+   */
+  export let image: ProvidedImage
+  let license: Store<LicenseInfo> = UIEventSource.FromPromise(
+    image.provider?.DownloadAttribution(image.url)
+  )
+  let icon = image.provider?.SourceIcon(image.id)?.SetClass("block h-8 w-8 pr-2")
 </script>
 
-
 {#if $license !== undefined}
-  <div class="flex bg-black text-white text-sm p-0.5 pl-5 pr-3 rounded-lg no-images">
-
+  <div class="no-images flex rounded-lg bg-black p-0.5 pl-5 pr-3 text-sm text-white">
     {#if icon !== undefined}
       <ToSvelte construct={icon} />
     {/if}
 
-
     <div class="flex flex-col">
       {#if $license.title}
         {#if $license.informationLocation}
-          <a href={$license.informationLocation} target="_blank" rel="noopener nofollower">{$license.title}</a>
+          <a href={$license.informationLocation} target="_blank" rel="noopener nofollower">
+            {$license.title}
+          </a>
         {:else}
           $license.title
         {/if}
@@ -39,7 +39,6 @@
       {/if}
 
       <div class="flex justify-between">
-
         {#if $license.license !== undefined || $license.licenseShortName !== undefined}
           <div>
             {$license?.license ?? $license?.licenseShortName}
@@ -55,12 +54,10 @@
 
       {#if $license.views}
         <div class="flex justify-around self-center">
-        <EyeIcon class="w-4 h-4 pr-1"/>
+          <EyeIcon class="h-4 w-4 pr-1" />
           {$license.views}
         </div>
       {/if}
-
     </div>
   </div>
-
 {/if}

src/UI/Image/ImageOperations.svelte

@@ -1,42 +1,45 @@
-<script lang="ts">/**
- * The 'imageOperations' previews an image and offers some extra tools (e.g. download)
- */
+<script lang="ts">
+  /**
+   * The 'imageOperations' previews an image and offers some extra tools (e.g. download)
+   */
 
-import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
-import ImageAttribution from "./ImageAttribution.svelte"
-import ImagePreview from "./ImagePreview.svelte"
-import { DownloadIcon } from "@rgossiaux/svelte-heroicons/solid"
-import { Utils } from "../../Utils"
-import { twMerge } from "tailwind-merge";
+  import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
+  import ImageAttribution from "./ImageAttribution.svelte"
+  import ImagePreview from "./ImagePreview.svelte"
+  import { DownloadIcon } from "@rgossiaux/svelte-heroicons/solid"
+  import { Utils } from "../../Utils"
+  import { twMerge } from "tailwind-merge"
 
-export let image: ProvidedImage
-export let clss: string = undefined
-async function download() {
-    const response = await fetch(image.url_hd ?? image.url )
+  export let image: ProvidedImage
+  export let clss: string = undefined
+  async function download() {
+    const response = await fetch(image.url_hd ?? image.url)
     const blob = await response.blob()
     Utils.offerContentsAsDownloadableFile(blob, new URL(image.url).pathname.split("/").at(-1), {
-        mimetype: "image/jpg",
+      mimetype: "image/jpg",
     })
-}
-
+  }
 </script>
 
-<div class={twMerge("w-full h-full relative", clss)}>
-  <div class="absolute top-0 left-0 w-full h-full overflow-hidden panzoom-container focusable">
-    <ImagePreview image={image} />
+<div class={twMerge("relative h-full w-full", clss)}>
+  <div class="panzoom-container focusable absolute top-0 left-0 h-full w-full overflow-hidden">
+    <ImagePreview {image} />
   </div>
-  <div class="absolute bottom-0 left-0 w-full pointer-events-none flex flex-wrap justify-between items-end">
-    <div class="pointer-events-auto w-fit opacity-50 hover:opacity-100 transition-colors duration-200 m-1">
-      <ImageAttribution image={image} />
+  <div
+    class="pointer-events-none absolute bottom-0 left-0 flex w-full flex-wrap items-end justify-between"
+  >
+    <div
+      class="pointer-events-auto m-1 w-fit opacity-50 transition-colors duration-200 hover:opacity-100"
+    >
+      <ImageAttribution {image} />
     </div>
 
     <button
-      class="no-image-background flex items-center pointer-events-auto bg-black opacity-50 hover:opacity-100 text-white transition-colors duration-200"
-      on:click={() => download()}>
-      <DownloadIcon class="w-6 h-6 px-2 opacity-100" />
+      class="no-image-background pointer-events-auto flex items-center bg-black text-white opacity-50 transition-colors duration-200 hover:opacity-100"
+      on:click={() => download()}
+    >
+      <DownloadIcon class="h-6 w-6 px-2 opacity-100" />
       Download
     </button>
   </div>
-
-
 </div>

src/UI/Image/ImagePreview.svelte

@@ -1,28 +1,27 @@
 <script lang="ts">
+  /**
+   * The image preview allows to drag and zoom in to the image
+   */
+  import panzoom from "panzoom"
+  import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
 
-    /**
-     * The image preview allows to drag and zoom in to the image
-     */
-    import panzoom from "panzoom"
-    import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
+  export let image: ProvidedImage
+  let panzoomInstance = undefined
+  let panzoomEl: HTMLElement
 
-    export let image : ProvidedImage
-    let panzoomInstance = undefined
-    let panzoomEl: HTMLElement
-
-    $: {
-        if (panzoomEl) {
-            panzoomInstance = panzoom(panzoomEl, { bounds: true,
-                boundsPadding: 0.49,
-                minZoom: 1,
-                maxZoom: 25,
-                initialZoom: 1.2
-            })
-        } else {
-            panzoomInstance?.dispose()
-        }
+  $: {
+    if (panzoomEl) {
+      panzoomInstance = panzoom(panzoomEl, {
+        bounds: true,
+        boundsPadding: 0.49,
+        minZoom: 1,
+        maxZoom: 25,
+        initialZoom: 1.2,
+      })
+    } else {
+      panzoomInstance?.dispose()
     }
-
+  }
 </script>
 
-<img bind:this={panzoomEl} src={image.url_hd ?? image.url} class="w-fit h-fit panzoom-image"/>
+<img bind:this={panzoomEl} src={image.url_hd ?? image.url} class="panzoom-image h-fit w-fit" />

src/UI/Image/LinkableImage.svelte

@@ -1,21 +1,21 @@
 <script lang="ts">
-    import { Store } from "../../Logic/UIEventSource"
-    import type { OsmTags } from "../../Models/OsmFeature"
-    import type { SpecialVisualizationState } from "../SpecialVisualization"
-    import type { P4CPicture } from "../../Logic/Web/NearbyImagesSearch"
-    import AllImageProviders from "../../Logic/ImageProviders/AllImageProviders"
-    import LinkImageAction from "../../Logic/Osm/Actions/LinkImageAction"
-    import ChangeTagAction from "../../Logic/Osm/Actions/ChangeTagAction"
-    import { Tag } from "../../Logic/Tags/Tag"
-    import { GeoOperations } from "../../Logic/GeoOperations"
-    import type { Feature } from "geojson"
-    import Translations from "../i18n/Translations"
-    import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
-    import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
-    import AttributedImage from "./AttributedImage.svelte"
-    import SpecialTranslation from "../Popup/TagRendering/SpecialTranslation.svelte"
+  import { Store } from "../../Logic/UIEventSource"
+  import type { OsmTags } from "../../Models/OsmFeature"
+  import type { SpecialVisualizationState } from "../SpecialVisualization"
+  import type { P4CPicture } from "../../Logic/Web/NearbyImagesSearch"
+  import AllImageProviders from "../../Logic/ImageProviders/AllImageProviders"
+  import LinkImageAction from "../../Logic/Osm/Actions/LinkImageAction"
+  import ChangeTagAction from "../../Logic/Osm/Actions/ChangeTagAction"
+  import { Tag } from "../../Logic/Tags/Tag"
+  import { GeoOperations } from "../../Logic/GeoOperations"
+  import type { Feature } from "geojson"
+  import Translations from "../i18n/Translations"
+  import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
+  import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
+  import AttributedImage from "./AttributedImage.svelte"
+  import SpecialTranslation from "../Popup/TagRendering/SpecialTranslation.svelte"
 
-    export let tags: Store<OsmTags>
+  export let tags: Store<OsmTags>
   export let lon: number
   export let lat: number
   export let state: SpecialVisualizationState
@@ -29,10 +29,10 @@
   const t = Translations.t.image.nearby
   const c = [lon, lat]
   const providedImage: ProvidedImage = {
-      url: image.thumbUrl ?? image.pictureUrl,
-      provider: AllImageProviders.byName(image.provider),
-      date: new Date(image.date),
-      id: Object.values(image.osmTags)[0]
+    url: image.thumbUrl ?? image.pictureUrl,
+    provider: AllImageProviders.byName(image.provider),
+    date: new Date(image.date),
+    id: Object.values(image.osmTags)[0],
   }
   let distance = Math.round(
     GeoOperations.distanceBetween([image.coordinates.lng, image.coordinates.lat], c)
@@ -44,7 +44,7 @@
     const url = image.osmTags[key]
     if (isLinked) {
       const action = new LinkImageAction(currentTags.id, key, url, tags, {
-        theme: tags.data._orig_theme ??  state.layout.id,
+        theme: tags.data._orig_theme ?? state.layout.id,
         changeType: "link-image",
       })
       state.changes.applyAction(action)
@@ -65,7 +65,7 @@
 
 <div class="flex w-fit shrink-0 flex-col">
   <div on:click={() => state.previewedImage.setData(providedImage)} class="cursor-zoom-in">
-    <AttributedImage image={providedImage} imgClass="max-h-64 w-auto"/>
+    <AttributedImage image={providedImage} imgClass="max-h-64 w-auto" />
   </div>
   {#if linkable}
     <label>

src/UI/Image/NearbyImages.svelte

@@ -1,43 +1,44 @@
 <script lang="ts">
-    /**
-     * Show nearby images which can be clicked
-     */
-    import type { OsmTags } from "../../Models/OsmFeature"
-    import { Store, UIEventSource } from "../../Logic/UIEventSource"
-    import type { SpecialVisualizationState } from "../SpecialVisualization"
-    import type { P4CPicture } from "../../Logic/Web/NearbyImagesSearch"
-    import NearbyImagesSearch from "../../Logic/Web/NearbyImagesSearch"
-    import LinkableImage from "./LinkableImage.svelte"
-    import type { Feature } from "geojson"
-    import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
-    import Loading from "../Base/Loading.svelte"
-    import AllImageProviders from "../../Logic/ImageProviders/AllImageProviders"
-    import Tr from "../Base/Tr.svelte"
-    import Translations from "../i18n/Translations"
-    import LoginToggle from "../Base/LoginToggle.svelte"
+  /**
+   * Show nearby images which can be clicked
+   */
+  import type { OsmTags } from "../../Models/OsmFeature"
+  import { Store, UIEventSource } from "../../Logic/UIEventSource"
+  import type { SpecialVisualizationState } from "../SpecialVisualization"
+  import type { P4CPicture } from "../../Logic/Web/NearbyImagesSearch"
+  import NearbyImagesSearch from "../../Logic/Web/NearbyImagesSearch"
+  import LinkableImage from "./LinkableImage.svelte"
+  import type { Feature } from "geojson"
+  import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
+  import Loading from "../Base/Loading.svelte"
+  import AllImageProviders from "../../Logic/ImageProviders/AllImageProviders"
+  import Tr from "../Base/Tr.svelte"
+  import Translations from "../i18n/Translations"
+  import LoginToggle from "../Base/LoginToggle.svelte"
 
-    export let tags: Store<OsmTags>
-    export let state: SpecialVisualizationState
-    export let lon: number
-    export let lat: number
-    export let feature: Feature
+  export let tags: Store<OsmTags>
+  export let state: SpecialVisualizationState
+  export let lon: number
+  export let lat: number
+  export let feature: Feature
 
-    export let linkable: boolean = true
-    export let layer: LayerConfig
+  export let linkable: boolean = true
+  export let layer: LayerConfig
 
-    let imagesProvider = new NearbyImagesSearch(
-        {
-            lon,
-            lat,
-            allowSpherical: new UIEventSource<boolean>(false),
-            blacklist: AllImageProviders.LoadImagesFor(tags),
-        },
-        state.indexedFeatures,
-    )
+  let imagesProvider = new NearbyImagesSearch(
+    {
+      lon,
+      lat,
+      allowSpherical: new UIEventSource<boolean>(false),
+      blacklist: AllImageProviders.LoadImagesFor(tags),
+    },
+    state.indexedFeatures
+  )
 
-    let images: Store<P4CPicture[]> = imagesProvider.store.map((images) => images.slice(0, 20))
-    let allDone = imagesProvider.allDone
+  let images: Store<P4CPicture[]> = imagesProvider.store.map((images) => images.slice(0, 20))
+  let allDone = imagesProvider.allDone
 </script>
+
 <LoginToggle {state}>
   <div class="interactive border-interactive rounded-2xl p-2">
     <div class="flex justify-between">
@@ -53,9 +54,9 @@
     {:else}
       <div class="flex w-full space-x-1 overflow-x-auto" style="scroll-snap-type: x proximity">
         {#each $images as image (image.pictureUrl)}
-        <span class="w-fit shrink-0" style="scroll-snap-align: start">
-          <LinkableImage {tags} {image} {state} {lon} {lat} {feature} {layer} {linkable} />
-        </span>
+          <span class="w-fit shrink-0" style="scroll-snap-align: start">
+            <LinkableImage {tags} {image} {state} {lon} {lat} {feature} {layer} {linkable} />
+          </span>
         {/each}
       </div>
     {/if}

src/UI/Image/NearbyImagesCollapsed.svelte

@@ -1,37 +1,39 @@
 <script lang="ts">
-  import { Store } from "../../Logic/UIEventSource";
-  import type { OsmTags } from "../../Models/OsmFeature";
-  import type { SpecialVisualizationState } from "../SpecialVisualization";
-  import type { Feature } from "geojson";
-  import LayerConfig from "../../Models/ThemeConfig/LayerConfig";
-  import Translations from "../i18n/Translations";
-  import Tr from "../Base/Tr.svelte";
-  import NearbyImages from "./NearbyImages.svelte";
-  import { XCircleIcon } from "@babeard/svelte-heroicons/solid";
-  import Camera_plus from "../../assets/svg/Camera_plus.svelte";
-  import LoginToggle from "../Base/LoginToggle.svelte";
+  import { Store } from "../../Logic/UIEventSource"
+  import type { OsmTags } from "../../Models/OsmFeature"
+  import type { SpecialVisualizationState } from "../SpecialVisualization"
+  import type { Feature } from "geojson"
+  import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
+  import Translations from "../i18n/Translations"
+  import Tr from "../Base/Tr.svelte"
+  import NearbyImages from "./NearbyImages.svelte"
+  import { XCircleIcon } from "@babeard/svelte-heroicons/solid"
+  import Camera_plus from "../../assets/svg/Camera_plus.svelte"
+  import LoginToggle from "../Base/LoginToggle.svelte"
 
-  export let tags: Store<OsmTags>;
-  export let state: SpecialVisualizationState;
-  export let lon: number;
-  export let lat: number;
-  export let feature: Feature;
+  export let tags: Store<OsmTags>
+  export let state: SpecialVisualizationState
+  export let lon: number
+  export let lat: number
+  export let feature: Feature
 
-  export let linkable: boolean = true;
-  export let layer: LayerConfig;
-  const t = Translations.t.image.nearby;
+  export let linkable: boolean = true
+  export let layer: LayerConfig
+  const t = Translations.t.image.nearby
 
-  let expanded = false;
+  let expanded = false
 </script>
-<LoginToggle {state}>
 
+<LoginToggle {state}>
   {#if expanded}
     <NearbyImages {tags} {state} {lon} {lat} {feature} {linkable}>
-      <button slot="corner"
-              class="h-6 w-6 cursor-pointer no-image-background p-0 border-none"
-              on:click={() => {
-        expanded = false
-        }}>
+      <button
+        slot="corner"
+        class="no-image-background h-6 w-6 cursor-pointer border-none p-0"
+        on:click={() => {
+          expanded = false
+        }}
+      >
         <XCircleIcon />
       </button>
     </NearbyImages>
@@ -39,8 +41,8 @@
     <button
       class="flex w-full items-center"
       on:click={() => {
-      expanded = true
-    }}
+        expanded = true
+      }}
     >
       <Camera_plus class="mr-2 block h-8 w-8 p-1" />
       <Tr t={t.seeNearby} />

src/UI/Image/UploadImage.svelte

@@ -1,47 +1,47 @@
 <script lang="ts">
-    /**
-     * Shows an 'upload'-button which will start the upload for this feature
-     */
+  /**
+   * Shows an 'upload'-button which will start the upload for this feature
+   */
 
-    import type { SpecialVisualizationState } from "../SpecialVisualization"
-    import { ImmutableStore, Store } from "../../Logic/UIEventSource"
-    import type { OsmTags } from "../../Models/OsmFeature"
-    import LoginToggle from "../Base/LoginToggle.svelte"
-    import Translations from "../i18n/Translations"
-    import Tr from "../Base/Tr.svelte"
-    import UploadingImageCounter from "./UploadingImageCounter.svelte"
-    import FileSelector from "../Base/FileSelector.svelte"
-    import Camera_plus from "../../assets/svg/Camera_plus.svelte"
-    import LoginButton from "../Base/LoginButton.svelte"
+  import type { SpecialVisualizationState } from "../SpecialVisualization"
+  import { ImmutableStore, Store } from "../../Logic/UIEventSource"
+  import type { OsmTags } from "../../Models/OsmFeature"
+  import LoginToggle from "../Base/LoginToggle.svelte"
+  import Translations from "../i18n/Translations"
+  import Tr from "../Base/Tr.svelte"
+  import UploadingImageCounter from "./UploadingImageCounter.svelte"
+  import FileSelector from "../Base/FileSelector.svelte"
+  import Camera_plus from "../../assets/svg/Camera_plus.svelte"
+  import LoginButton from "../Base/LoginButton.svelte"
 
-    export let state: SpecialVisualizationState
+  export let state: SpecialVisualizationState
 
-    export let tags: Store<OsmTags>
-    export let targetKey: string = undefined
-    /**
-     * Image to show in the button
-     * NOT the image to upload!
-     */
-    export let image: string = undefined
-    if (image === "") {
-        image = undefined
-    }
-    export let labelText: string = undefined
-    const t = Translations.t.image
-
-    let licenseStore = state?.userRelatedState?.imageLicense ?? new ImmutableStore("CC0")
-
-    function handleFiles(files: FileList) {
-        for (let i = 0; i < files.length; i++) {
-            const file = files.item(i)
-            console.log("Got file", file.name)
-            try {
-                state?.imageUploadManager.uploadImageAndApply(file, tags, targetKey)
-            } catch (e) {
-                alert(e)
-            }
-        }
+  export let tags: Store<OsmTags>
+  export let targetKey: string = undefined
+  /**
+   * Image to show in the button
+   * NOT the image to upload!
+   */
+  export let image: string = undefined
+  if (image === "") {
+    image = undefined
+  }
+  export let labelText: string = undefined
+  const t = Translations.t.image
+
+  let licenseStore = state?.userRelatedState?.imageLicense ?? new ImmutableStore("CC0")
+
+  function handleFiles(files: FileList) {
+    for (let i = 0; i < files.length; i++) {
+      const file = files.item(i)
+      console.log("Got file", file.name)
+      try {
+        state?.imageUploadManager.uploadImageAndApply(file, tags, targetKey)
+      } catch (e) {
+        alert(e)
+      }
     }
+  }
 </script>
 
 <LoginToggle {state}>
@@ -56,7 +56,7 @@
       multiple={true}
       on:submit={(e) => handleFiles(e.detail)}
     >
-      <div class="flex items-center" >
+      <div class="flex items-center">
         {#if image !== undefined}
           <img src={image} aria-hidden="true" />
         {:else}
@@ -71,14 +71,14 @@
     </FileSelector>
     <div class="text-sm">
       <button
-        class="link small "
+        class="link small"
         on:click={() => {
           state.guistate.openUsersettings("picture-license")
         }}
       >
         <Tr t={t.currentLicense.Subs({ license: $licenseStore })} />
       </button>
-        <Tr t={t.respectPrivacy} />
+      <Tr t={t.respectPrivacy} />
     </div>
   </div>
 </LoginToggle>

src/UI/Image/UploadingImageCounter.svelte

@@ -15,7 +15,7 @@
   export let state: SpecialVisualizationState
   export let tags: Store<OsmTags> = undefined
   export let featureId = tags?.data?.id
-  if(featureId === undefined){
+  if (featureId === undefined) {
     throw "No tags or featureID given"
   }
   export let showThankYou: boolean = true