Studio: add delete button for layers

src/UI/Studio/EditLayer.svelte

@@ -9,7 +9,7 @@
   import { Utils } from "../../Utils"
   import type { ConversionMessage } from "../../Models/ThemeConfig/Conversion/Conversion"
   import ErrorIndicatorForRegion from "./ErrorIndicatorForRegion.svelte"
-  import { ChevronRightIcon } from "@rgossiaux/svelte-heroicons/solid"
+  import { ChevronRightIcon, TrashIcon } from "@rgossiaux/svelte-heroicons/solid"
   import SchemaBasedInput from "./SchemaBasedInput.svelte"
   import FloatOver from "../Base/FloatOver.svelte"
   import TagRenderingInput from "./TagRenderingInput.svelte"
@@ -21,6 +21,7 @@
   const layerSchema: ConfigMeta[] = <any>layerSchemaRaw
 
   export let state: EditLayerState
+  export let backToStudio: () => void
   let messages = state.messages
   let hasErrors = messages.mapD(
     (m: ConversionMessage[]) => m.filter((m) => m.level === "error").length
@@ -72,6 +73,10 @@
   })
 
   let highlightedItem: UIEventSource<HighlightedTagRendering> = state.highlightedItem
+  function deleteLayer() {
+      state.delete()
+      backToStudio()
+  }
 </script>
 
 <div class="flex h-screen flex-col">
@@ -113,6 +118,12 @@
         </div>
         <div class="flex flex-col" slot="content0">
           <Region {state} configs={perRegion["Basic"]} />
+          <div class="mt-12">
+            
+          <button on:click={() => deleteLayer()} class="small" >
+            <TrashIcon class="h-6 w-6"/> Delete this layer
+          </button>
+          </div>
         </div>
 
         <div slot="title1" class="flex">

src/UI/Studio/EditLayerState.ts

@@ -107,6 +107,9 @@ export abstract class EditJsonState<T> {
         return entry
     }
 
+    public async delete(){
+        await this.server.delete(this.getId().data, this.category)
+    }
     public getStoreFor<T>(path: ReadonlyArray<string | number>): UIEventSource<T | undefined> {
         const key = path.join(".")
 

src/UI/Studio/StudioServer.ts

@@ -58,7 +58,14 @@ export default class StudioServer {
             return undefined
         }
     }
-
+    async delete(id: string, category: "layers" | "themes") {
+        if (id === undefined || id === "") {
+            return
+        }
+        await fetch(this.urlFor(id, category), {
+            method: "DELETE"
+        })
+    }
     async update(id: string, config: string, category: "layers" | "themes") {
         if (id === undefined || id === "") {
             return

src/UI/StudioGUI.svelte

@@ -260,7 +260,7 @@
         <Loading />
       </div>
     {:else if state === "editing_layer"}
-      <EditLayer state={editLayerState}>
+      <EditLayer state={editLayerState} backToStudio={() => {state = undefined}}>
         <BackButton
           clss="small p-1"
           imageClass="w-8 h-8"
@@ -284,22 +284,23 @@
         </BackButton>
       </EditTheme>
     {/if}
-  </LoginToggle>
-</If>
 
-{#if { intro, tagrenderings: intro_tagrenderings }[$showIntro]?.sections}
-  <FloatOver
-    on:close={() => {
+    {#if { intro, tagrenderings: intro_tagrenderings }[$showIntro]?.sections}
+      <FloatOver
+        on:close={() => {
       showIntro.setData("no")
     }}
-  >
-    <div class="flex h-full p-4 pr-12">
-      <Walkthrough
-        pages={{ intro, tagrenderings: intro_tagrenderings }[$showIntro]?.sections}
-        on:done={() => {
+      >
+        <div class="flex h-full p-4 pr-12">
+          <Walkthrough
+            pages={{ intro, tagrenderings: intro_tagrenderings }[$showIntro]?.sections}
+            on:done={() => {
           showIntro.setData("no")
         }}
-      />
-    </div>
-  </FloatOver>
-{/if}
+          />
+        </div>
+      </FloatOver>
+    {/if}
+
+  </LoginToggle>
+</If>