Favourites: tweaking overview; fix upload of properties

assets/svg/center.svg.license

@@ -1,2 +1,2 @@
 SPDX-FileCopyrightText: Pieter Vander Vennet
-SPDX-License-Identifier: CC0
+SPDX-License-Identifier: CC0-1.0

public/css/index-tailwind-output.css

@@ -841,10 +841,6 @@ video {
   margin-right: 3rem;
 }
 
-.mb-4 {
-  margin-bottom: 1rem;
-}
-
 .mt-4 {
   margin-top: 1rem;
 }
@@ -881,6 +877,10 @@ video {
   margin-right: 0.25rem;
 }
 
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
 .ml-1 {
   margin-left: 0.25rem;
 }

src/Logic/FeatureSource/Sources/FavouritesFeatureSource.ts

@@ -109,7 +109,7 @@ export default class FavouritesFeatureSource extends StaticFeatureSource {
             if (!key.startsWith(FavouritesFeatureSource.prefix + id)) {
                 continue
             }
-            const propertyName = key.substring(minLength)
+            const propertyName = key.substring(minLength).replaceAll("__", ":")
             properties[propertyName] = prefs[key]
         }
         return properties

src/UI/Favourites/FavouriteSummary.svelte

@@ -6,6 +6,7 @@
   import { ImmutableStore } from "../../Logic/UIEventSource";
   import { GeoOperations } from "../../Logic/GeoOperations";
   import Center from "../../assets/svg/Center.svelte";
+  import { Utils } from "../../Utils";
 
   export let feature: Feature;
   let properties: Record<string, string> = feature.properties;
@@ -30,15 +31,31 @@
     center()
   }
   
+  const coord = GeoOperations.centerpointCoordinates(feature)
+  const distance = state.mapProperties.location.stabilized(500).mapD(({lon, lat}) => {
+    let meters = Math.round(GeoOperations.distanceBetween(coord, [lon, lat]))
+    
+    if(meters < 1000){
+      return meters +"m"
+    }
+    
+    meters = Math.round(meters / 100)
+    const kmStr = ""+meters
+    
+    
+    return kmStr.substring(0, kmStr.length - 1)+"."+kmStr.substring(kmStr.length-1) +"km"
+  })
   const titleIconBlacklist = ["osmlink","sharelink","favourite_title_icon"]
 
 </script>
 
 <div class="px-1 my-1 border-2 border-dashed border-gray-300 rounded flex justify-between items-center">
   <h3 on:click={() => select()} class="cursor-pointer ml-1 m-0">
-    <TagRenderingAnswer config={titleConfig} layer={favConfig} selectedElement={feature} {tags} />
+    <TagRenderingAnswer extraClasses="underline" config={titleConfig} layer={favConfig} selectedElement={feature} {tags} />
   </h3>
 
+  {$distance}
+  
   <div class="flex items-center">
     {#each favConfig.titleIcons as titleIconConfig}
       {#if (titleIconBlacklist.indexOf(titleIconConfig.id) < 0) && (titleIconConfig.condition?.matchesProperties(properties) ?? true) && (titleIconConfig.metacondition?.matchesProperties( { ...properties, ...state.userRelatedState.preferencesAsTags.data } ) ?? true) && titleIconConfig.IsKnown(properties)}

src/UI/Popup/TagRendering/TagRenderingQuestion.svelte

@@ -140,7 +140,7 @@
       console.log("SelectedTags is undefined, ignoring 'onSave'-event")
       return
     }
-    if (layer === undefined || layer?.source === null) {
+    if (layer === undefined || (layer?.source === null && layer.id !== "favourite")) {
       /**
        * This is a special, priviliged layer.
        * We simply apply the tags onto the records
@@ -159,7 +159,7 @@
 
     dispatch("saved", { config, applied: selectedTags })
     const change = new ChangeTagAction(tags.data.id, selectedTags, tags.data, {
-      theme: state.layout.id,
+      theme: tags.data["_orig_theme"] ??  state.layout.id,
       changeType: "answer",
     })
     freeformInput.setData(undefined)

src/UI/Studio/EditItemButton.svelte

@@ -1,29 +1,30 @@
 <script lang="ts">
-  import { UIEventSource } from "../../Logic/UIEventSource"
+  import { UIEventSource } from "../../Logic/UIEventSource";
-  import { OsmConnection } from "../../Logic/Osm/OsmConnection"
+  import { OsmConnection } from "../../Logic/Osm/OsmConnection";
-  import Marker from "../Map/Marker.svelte"
+  import Marker from "../Map/Marker.svelte";
-  import NextButton from "../Base/NextButton.svelte"
+  import NextButton from "../Base/NextButton.svelte";
-  import { AllKnownLayouts } from "../../Customizations/AllKnownLayouts"
+  import { AllKnownLayouts } from "../../Customizations/AllKnownLayouts";
-  import { AllSharedLayers } from "../../Customizations/AllSharedLayers"
+  import { AllSharedLayers } from "../../Customizations/AllSharedLayers";
-  import { createEventDispatcher } from "svelte"
+  import { createEventDispatcher } from "svelte";
 
-  export let info: { id: string; owner: number }
+  export let info: { id: string; owner: number };
-  export let category: "layers" | "themes"
+  export let category: "layers" | "themes";
-  export let osmConnection: OsmConnection
+  export let osmConnection: OsmConnection;
 
   let displayName = UIEventSource.FromPromise(
     osmConnection.getInformationAboutUser(info.owner)
-  ).mapD((response) => response.display_name)
+  ).mapD((response) => response.display_name);
+
+  let selfId = osmConnection.userDetails.mapD((ud) => ud.uid);
 
-  let selfId = osmConnection.userDetails.mapD((ud) => ud.uid)
   function fetchIconDescription(layerId): any {
     if (category === "themes") {
-      return AllKnownLayouts.allKnownLayouts.get(layerId).icon
+      return AllKnownLayouts.allKnownLayouts.get(layerId).icon;
     }
-    return AllSharedLayers.getSharedLayersConfigs().get(layerId)?._layerIcon
+    return AllSharedLayers.getSharedLayersConfigs().get(layerId)?._layerIcon;
   }
 
-  const dispatch = createEventDispatcher<{ layerSelected: string }>()
+  const dispatch = createEventDispatcher<{ layerSelected: string }>();
 </script>
 
 <NextButton clss="small" on:click={() => dispatch("layerSelected", info)}>
@@ -32,6 +33,12 @@
   </div>
   <b class="px-1">{info.id}</b>
   {#if info.owner && info.owner !== $selfId}
-    (made by {$displayName ?? info.owner})
+    {#if displayName}
+      (made by {$displayName}
+      {#if window.location.host.startsWith("127.0.0.1")}
+        - {info.owner}
+      {/if}
+      )
+    {/if}
   {/if}
 </NextButton>