Studio: more work on studio

src/UI/StudioGUI.svelte

@@ -1,7 +1,87 @@
 <script lang="ts">
-    
-    
-import EditLayer from "./Studio/EditLayer.svelte";
-</script>
 
-<EditLayer/>
+
+  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";
+
+
+  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);
+  });
+  let state: undefined | "edit_layer" | "new_layer" | "edit_theme" | "new_theme" | "editing_layer" | "loading" = undefined;
+
+  let initialLayerConfig: undefined;
+  let newLayerId = new UIEventSource<string>("");
+  let layerIdFeedback = new UIEventSource<string>(undefined);
+  newLayerId.addCallbackD(layerId => {
+    if (layerId === "") {
+      return;
+    }
+    if (layers.data.indexOf(layerId) >= 0) {
+      layerIdFeedback.setData("This id is already used");
+    }
+  }, [layers]);
+
+
+  let editLayerState = new EditLayerState();
+
+</script>
+{#if state === undefined}
+  <h1>MapComplete Studio</h1>
+  <div class="w-full flex flex-col">
+
+    <NextButton on:click={() => state = "edit_layer"}>
+      Edit an existing layer
+    </NextButton>
+    <NextButton on:click={() => state = "new_layer"}>
+      Create a new layer
+    </NextButton>
+    <NextButton on:click={() => state = "edit_theme"}>
+      Edit a theme
+    </NextButton>
+    <NextButton on:click={() => state = "new_theme"}>
+      Create a new theme
+    </NextButton>
+  </div>
+{:else if state === "edit_layer"}
+  <div class="flex flex-wrap">
+    {#each $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")
+        state = "editing_layer"
+       }}>
+        {layerId}
+      </NextButton>
+    {/each}
+  </div>
+{:else if state === "new_layer"}
+  <ValidatedInput type="id" value={newLayerId} feedback={layerIdFeedback} />
+  {#if $layerIdFeedback !== undefined}
+    <div class="alert">
+      {$layerIdFeedback}
+    </div>
+  {:else }
+    <NextButton on:click={() => {initialLayerConfig = ({id: newLayerId.data}); state = "editing_layer"}}>
+      Create this layer
+    </NextButton>
+  {/if}
+{:else if state === "loading"}
+  <Loading />
+{:else if state === "editing_layer"}
+  <EditLayer {initialLayerConfig} />
+{/if}