Refactoring: refactoring of all Conversions

src/UI/StudioGUI.svelte

@@ -2,35 +2,32 @@
 
 
   import NextButton from "./Base/NextButton.svelte";
-  import { Utils } from "../Utils";
   import { UIEventSource } from "../Logic/UIEventSource";
-  import Constants from "../Models/Constants";
   import ValidatedInput from "./InputElement/ValidatedInput.svelte";
   import EditLayerState from "./Studio/EditLayerState";
   import EditLayer from "./Studio/EditLayer.svelte";
   import Loading from "../assets/svg/Loading.svelte";
+  import Marker from "./Map/Marker.svelte";
+  import { AllSharedLayers } from "../Customizations/AllSharedLayers";
+  import StudioServer from "./Studio/StudioServer";
+  import LoginToggle from "./Base/LoginToggle.svelte";
+  import { OsmConnection } from "../Logic/Osm/OsmConnection";
+  import { QueryParameters } from "../Logic/Web/QueryParameters";
 
 
   export let studioUrl = "http://127.0.0.1:1235";
-  let overview = UIEventSource.FromPromise<{ allFiles: string[] }>(Utils.downloadJson(studioUrl + "/overview"));
-  let layers = overview.map(overview => {
-    if (!overview) {
-      return [];
-    }
-    return overview.allFiles.filter(f => f.startsWith("layers/")
-    ).map(l => l.substring(l.lastIndexOf("/") + 1, l.length - ".json".length))
-      .filter(layerId => Constants.priviliged_layers.indexOf(layerId) < 0);
-  });
+  const studio = new StudioServer(studioUrl);
+  let layers = UIEventSource.FromPromise(studio.fetchLayerOverview());
   let state: undefined | "edit_layer" | "new_layer" | "edit_theme" | "new_theme" | "editing_layer" | "loading" = undefined;
 
-  let initialLayerConfig: undefined;
+  let initialLayerConfig: { id: string };
   let newLayerId = new UIEventSource<string>("");
   let layerIdFeedback = new UIEventSource<string>(undefined);
   newLayerId.addCallbackD(layerId => {
     if (layerId === "") {
       return;
     }
-    if (layers.data.indexOf(layerId) >= 0) {
+    if (layers.data.has(layerId)) {
       layerIdFeedback.setData("This id is already used");
     }
   }, [layers]);
@@ -38,7 +35,28 @@
 
   let editLayerState = new EditLayerState();
 
+  function fetchIconDescription(layerId): any {
+    const icon = AllSharedLayers.getSharedLayersConfigs().get(layerId)?._layerIcon;
+    console.log(icon);
+    return icon;
+  }
+  
+  let osmConnection = new OsmConnection( new OsmConnection({
+    oauth_token: QueryParameters.GetQueryParameter(
+      "oauth_token",
+      undefined,
+      "Used to complete the login"
+    ),
+  }))
+
 </script>
+
+<LoginToggle state={{osmConnection}}>
+   <div slot="not-logged-in" >
+     <NextButton clss="primary">
+       Please log in to use MapComplete Studio
+     </NextButton>
+   </div>
 {#if state === undefined}
   <h1>MapComplete Studio</h1>
   <div class="w-full flex flex-col">
@@ -58,13 +76,16 @@
   </div>
 {:else if state === "edit_layer"}
   <div class="flex flex-wrap">
-    {#each $layers as layerId}
+    {#each Array.from($layers) as layerId}
       <NextButton clss="small" on:click={async () => {
         console.log("Editing layer",layerId)
         state = "loading"
-        initialLayerConfig = await Utils.downloadJson(studioUrl+"/layers/"+layerId+"/"+layerId+".json")
+        initialLayerConfig = await studio.fetchLayer(layerId)
         state = "editing_layer"
        }}>
+        <div class="w-4 h-4 mr-1">
+          <Marker icons={fetchIconDescription(layerId)} />
+        </div>
         {layerId}
       </NextButton>
     {/each}
@@ -76,12 +97,22 @@
       {$layerIdFeedback}
     </div>
   {:else }
-    <NextButton on:click={() => {initialLayerConfig = ({id: newLayerId.data}); state = "editing_layer"}}>
+    <NextButton on:click={async () => {
+      state = "loading"
+      const id = newLayerId.data
+        const createdBy = osmConnection.userDetails.data.name
+      
+      const loaded = await studio.fetchLayer(id, true)
+      initialLayerConfig = loaded ?? {id, credits: createdBy};
+      state = "editing_layer"}}>
       Create this layer
     </NextButton>
   {/if}
 {:else if state === "loading"}
-  <Loading />
+  <div class="w-8 h-8">
+    <Loading />
+  </div>
 {:else if state === "editing_layer"}
   <EditLayer {initialLayerConfig} />
 {/if}
+</LoginToggle>