Studio: theme editing

src/UI/Studio/ChooseLayerToEdit.svelte

@@ -22,7 +22,7 @@
   <slot name="title" />
   <div class="flex flex-wrap">
     {#each Array.from(layerIds) as layer}
-      <NextButton clss="small" on:click={() => dispatch("layerSelected", layer.id)}>
+      <NextButton clss="small" on:click={() => dispatch("layerSelected", layer)}>
         <div class="w-4 h-4 mr-1">
           <Marker icons={fetchIconDescription(layer.id)} />
         </div>

src/UI/Studio/EditLayerState.ts

@@ -209,6 +209,7 @@ export abstract class EditJsonState<T> {
             try {
                 prepare.convert(<T>config, context)
             } catch (e) {
+                console.error(e)
                 context.err(e)
             }
             return context.messages

src/UI/Studio/EditTheme.svelte

@@ -8,7 +8,7 @@
   import Region from "./Region.svelte";
 
   export let state: EditThemeState;
-  let schema: ConfigMeta[] = state.schema.filter(schema => schema.path.length > 0 && schema.path[0] !== "layers");
+  let schema: ConfigMeta[] = state.schema.filter(schema => schema.path.length > 0);
   let config = state.configuration;
   const messages = state.messages;
   const hasErrors = messages.map((m: ConversionMessage[]) => m.filter(m => m.level === "error").length);
@@ -18,47 +18,61 @@
 
   const perRegion: Record<string, ConfigMeta[]> = {};
   for (const schemaElement of schema) {
-    const key = schemaElement.hints.group ?? "no-group"
-    const list = perRegion[key] ?? (perRegion[key] = [])
-    list.push(schemaElement)
+    const key = schemaElement.hints.group ?? "no-group";
+    const list = perRegion[key] ?? (perRegion[key] = []);
+    list.push(schemaElement);
   }
-
+console.log({perRegion, schema})
 </script>
+<div class="flex flex-col h-screen">
+  <div class="w-full flex justify-between my-2">
+    <slot />
+    <h3>Editing theme {$title}</h3>
+    {#if $hasErrors > 0}
+      <div class="alert">{$hasErrors} errors detected</div>
+    {:else}
+      <a class="primary button" href={baseUrl+state.server.urlFor($title, "themes")} target="_blank" rel="noopener">
+        Try it out
+        <ChevronRightIcon class="h-6 w-6 shrink-0" />
+      </a>
+    {/if}
+  </div>
 
-<div class="w-full flex justify-between my-2">
-  <slot />
-  <h3>Editing theme {$title}</h3>
-  {#if $hasErrors > 0}
-    <div class="alert">{$hasErrors} errors detected</div>
-  {:else}
-    <a class="primary button" href={baseUrl+state.server.urlFor($title, "themes")} target="_blank" rel="noopener">
-      Try it out
-      <ChevronRightIcon class="h-6 w-6 shrink-0" />
-    </a>
-  {/if}
-</div>
-
-<div class="m4 h-full overflow-y-auto">
-  {Object.keys(perRegion).join(";")}
-  <TabbedGroup>
-    <div slot="title0">Basic properties</div>
-    <div slot="content0">
-      <Region {state} configs={perRegion["basic"]} path={[]}></Region>
-      <Region {state} configs={perRegion["no-group"]} path={[]}></Region>
-    </div>
-    <div slot="title1">Feature switches</div>
-    <div slot="content1">
-      <Region {state} configs={perRegion["feature_switches"]} path={[]}></Region>
-    </div>
-    <div slot="title2">Configuration file</div>
-    <div slot="content2">
-      <div class="literal-code">
-        {JSON.stringify($config)}
+  <div class="m4 h-full overflow-y-auto">
+    {Object.keys(perRegion).join(";")}
+    <TabbedGroup>
+      <div slot="title0">Basic properties</div>
+      <div slot="content0">
+        <Region configs={perRegion["basic"]} path={[]} {state} title="Basic properties"/>
+        <Region configs={perRegion["start_location"]} path={[]} {state} title="Start location"/>
+        
+      </div>
+      
+      <div slot="title1">Layers</div>
+      <div slot="content1">
+        <Region configs={perRegion["layers"]} path={[]} {state} />
+        
+      </div>
+      <div slot="title2">Feature switches</div>
+      <div slot="content2">
+        <Region configs={perRegion["feature_switches"]} path={[]} {state}></Region>
       </div>
 
-      <ShowConversionMessages messages={$messages}></ShowConversionMessages>
+      <div slot="title3">Advanced options</div>
+      <div slot="content3">
+        <Region configs={perRegion["advanced"]} path={[]} {state}></Region>
+      </div>
+      
+      <div slot="title4">Configuration file</div>
+      <div slot="content4">
+        <div class="literal-code">
+          {JSON.stringify($config)}
+        </div>
+
+        <ShowConversionMessages messages={$messages}></ShowConversionMessages>
+
+      </div>
+    </TabbedGroup>
+  </div>
 
-    </div>
-  </TabbedGroup>
 </div>
-

src/UI/Studio/SchemaBasedArray.svelte

@@ -7,6 +7,7 @@
   import { TrashIcon } from "@babeard/svelte-heroicons/mini";
   import QuestionPreview from "./QuestionPreview.svelte";
   import { Utils } from "../../Utils";
+  import SchemaBasedMultiType from "./SchemaBasedMultiType.svelte";
 
   export let state: EditLayerState;
   export let schema: ConfigMeta;
@@ -105,6 +106,12 @@
     } while (currentIndex !== targetIndex);
   }
 
+  function schemaForMultitype() {
+    const sch = {...schema}
+    sch.hints.typehint = undefined
+    return sch
+  }
+
 
 </script>
 <div class="pl-2">
@@ -168,6 +175,8 @@
             {/if}
 
           </QuestionPreview>
+          {:else if schema.hints.types}
+         <SchemaBasedMultiType {state} path={fusePath(value, [])} schema={schemaForMultitype()}/>
         {:else}
           {#each subparts as subpart}
             <SchemaBasedInput {state} path={fusePath(value, subpart.path)} schema={subpart} />

src/UI/Studio/SchemaBasedInput.svelte

@@ -11,7 +11,7 @@
   export let path: (string | number)[] = [];
   
 </script>
-{#if schema.hints.typehint === "tagrendering[]"}
+{#if schema.hints?.typehint?.endsWith("[]")}
   <!-- We cheat a bit here by matching this 'magical' type... -->
   <SchemaBasedArray {path} {state} {schema} />
 {:else if schema.type === "array" && schema.hints.multianswer === "true"}

src/UI/Studio/SchemaBasedMultiType.svelte

@@ -89,6 +89,8 @@
 
 
   const existingValue = state.getCurrentValueFor(path);
+  let hasOverride = existingValue?.override !== undefined;
+  console.log({existingValue, hasOverride})
   if (hasBooleanOption >= 0 && (existingValue === true || existingValue === false)) {
     tags.setData({ value: "" + existingValue });
   } else if (lastIsString && typeof existingValue === "string") {
@@ -200,18 +202,23 @@
     <h3>{schema.hints.title}</h3>
     <div> {schema.description} </div>
   {/if}
-  <div>
-    <TagRenderingEditable {config} selectedElement={undefined} showQuestionIfUnknown={true} {state} {tags} />
-  </div>
+  {#if hasOverride}
+    This object refers to {existingValue.builtin} and overrides some properties. This cannot be edited with MapComplete
+    Studio
+  {:else}
+    <div>
+      <TagRenderingEditable {config} selectedElement={undefined} showQuestionIfUnknown={true} {state} {tags} />
+    </div>
 
-  {#if chosenOption !== undefined}
-    {#each subSchemas as subschema}
-      <SchemaBasedInput {state} schema={subschema}
-                        path={[...subpath, (subschema?.path?.at(-1) ?? "???")]}></SchemaBasedInput>
-    {/each}
-  {:else if $messages.length > 0}
-    {#each $messages as msg}
-      <div class="alert">{msg.message}</div>
-    {/each}
+    {#if chosenOption !== undefined}
+      {#each subSchemas as subschema}
+        <SchemaBasedInput {state} schema={subschema}
+                          path={[...subpath, (subschema?.path?.at(-1) ?? "???")]}></SchemaBasedInput>
+      {/each}
+    {:else if $messages.length > 0}
+      {#each $messages as msg}
+        <div class="alert">{msg.message}</div>
+      {/each}
+    {/if}
   {/if}
 </div>

src/UI/Studio/StudioServer.ts

@@ -20,12 +20,8 @@ export default class StudioServer {
         }[]
     > {
         const uid = this._userId.data
-        let uidQueryParam = ""
-        if (this._userId.data !== undefined) {
-            uidQueryParam = "?userId=" + uid
-        }
         const { allFiles } = <{ allFiles: string[] }>(
-            await Utils.downloadJson(this.url + "/overview" + uidQueryParam)
+            await Utils.downloadJson(this.url + "/overview")
         )
         const layerOverview: {
             id: string
@@ -33,12 +29,15 @@ export default class StudioServer {
             category: "layers" | "themes"
         }[] = []
         for (let file of allFiles) {
-            let owner = undefined
-            if (file.startsWith("" + uid)) {
-                owner = uid
+            let parts = file.split("/")
+            let owner = Number(parts[0])
+            if (!isNaN(owner)) {
+                parts.splice(0, 1)
                 file = file.substring(file.indexOf("/") + 1)
+            } else {
+                owner = undefined
             }
-            const category = <"layers" | "themes">file.substring(0, file.indexOf("/"))
+            const category = <"layers" | "themes">parts[0]
             const id = file.substring(file.lastIndexOf("/") + 1, file.length - ".json".length)
             if (Constants.priviliged_layers.indexOf(<any>id) > 0) {
                 continue
@@ -48,9 +47,13 @@ export default class StudioServer {
         return layerOverview
     }
 
-    async fetch(layerId: string, category: "layers" | "themes"): Promise<LayerConfigJson> {
+    async fetch(
+        layerId: string,
+        category: "layers" | "themes",
+        uid?: number
+    ): Promise<LayerConfigJson> {
         try {
-            return await Utils.downloadJson(this.urlFor(layerId, category))
+            return await Utils.downloadJson(this.urlFor(layerId, category, uid))
         } catch (e) {
             return undefined
         }
@@ -73,8 +76,8 @@ export default class StudioServer {
         return this.urlFor(id, "layers")
     }
 
-    public urlFor(id: string, category: "layers" | "themes") {
-        const uid = this._userId.data
+    public urlFor(id: string, category: "layers" | "themes", uid?: number) {
+        uid ??= this._userId.data
         const uidStr = uid !== undefined ? "/" + uid : ""
         return `${this.url}${uidStr}/${category}/${id}/${id}.json`
     }