MapComplete/src/UI/Studio/EditTheme.svelte

<script lang="ts">
  import { EditThemeState } from "./EditLayerState";
  import type { ConfigMeta } from "./configMeta";
  import { ChevronRightIcon } from "@rgossiaux/svelte-heroicons/solid";
  import type { ConversionMessage } from "../../Models/ThemeConfig/Conversion/Conversion";
  import TabbedGroup from "../Base/TabbedGroup.svelte";
  import ShowConversionMessages from "./ShowConversionMessages.svelte";
  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 config = state.configuration;
  const messages = state.messages;
  const hasErrors = messages.map((m: ConversionMessage[]) => m.filter(m => m.level === "error").length);
  let title = state.getStoreFor(["id"]);
  const wl = window.location;
  const baseUrl = wl.protocol + "//" + wl.host + "/theme.html?userlayout=";

  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)
  }

</script>

<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>

      <ShowConversionMessages messages={$messages}></ShowConversionMessages>

    </div>
  </TabbedGroup>
</div>