MapComplete/src/UI/Studio/QuestionPreview.svelte

<script lang="ts">
  import type { ConfigMeta } from "./configMeta";
  import EditLayerState from "./EditLayerState";
  import * as questions from "../../assets/generated/layers/questions.json";
  import { ImmutableStore, Store } from "../../Logic/UIEventSource";
  import TagRenderingEditable from "../Popup/TagRendering/TagRenderingEditable.svelte";
  import TagRenderingConfig from "../../Models/ThemeConfig/TagRenderingConfig";
  import nmd from "nano-markdown";
  import type {
    QuestionableTagRenderingConfigJson
  } from "../../Models/ThemeConfig/Json/QuestionableTagRenderingConfigJson.js";
  import type { TagRenderingConfigJson } from "../../Models/ThemeConfig/Json/TagRenderingConfigJson";
  import FromHtml from "../Base/FromHtml.svelte";
  import ShowConversionMessage from "./ShowConversionMessage.svelte";
  import NextButton from "../Base/NextButton.svelte";

  export let state: EditLayerState;
  export let path: ReadonlyArray<string | number>;
  export let schema: ConfigMeta;
  let value = state.getStoreFor(path);

  let perId: Record<string, TagRenderingConfigJson[]> = {};
  for (let tagRendering of questions.tagRenderings) {
    if (tagRendering.labels) {
      for (let label of tagRendering.labels) {
        perId[label] = (perId[label] ?? []).concat(tagRendering);
      }
    }
    perId[tagRendering.id] = [tagRendering];
  }

  let configJson: Store<QuestionableTagRenderingConfigJson[]> = value.map(x => {
    if (typeof x === "string") {
      return perId[x];
    } else {
      return [x];
    }
  });
  let configs: Store<TagRenderingConfig[]> = configJson.map(configs => {
    if (!configs) {
      return [{ error: "No configuartions found" }];
    }
    console.log("Regenerating configs");
    return configs.map(config => {
      try {
        return new TagRenderingConfig(config);
      } catch (e) {
        return { error: e };
      }
    });
  });
  let id: Store<string> = value.mapD(c => {
    if (c?.id) {
      return c.id;
    }
    if (typeof c === "string") {
      return c;
    }
    return undefined;
  });

  let tags = state.testTags;

  let messages = state.messagesFor(path);

  let description = schema.description;
  if (description) {
    try {
      description = nmd(description);
    } catch (e) {
      console.error("Could not convert description to markdown", { description });
    }
  }
</script>

<div class="flex">

  <div class="flex flex-col interactive border-interactive m-4 w-full">

    {#if $id}
      TagRendering {$id}
    {/if}
    <NextButton clss="primary" on:click={() => state.highlightedItem.setData({path, schema})}>
      {#if schema.hints.question}
        {schema.hints.question}
      {/if}
    </NextButton>
    {#if description}
      <FromHtml src={description} />
    {/if}
    {#each $messages as message}
      <ShowConversionMessage {message} />
    {/each}

    <slot class="self-end my-4"></slot>


  </div>

  <div class="flex flex-col w-full m-4">
    <h3>Preview of this question</h3>
    {#each $configs as config}
      {#if config.error !== undefined}
        <div class="alert">Could not create a preview of this tagRendering: {config.error}</div>
      {:else}
        {#if config.condition && !config.condition.matchesProperties($tags)}
          This tagRendering is currently not shown. It will appear if the feature matches the condition
          <b>
            <FromHtml src={config.condition.asHumanString(true, false, {})} />
          </b>
          
          Try to answer the relevant question above
          {:else if config.metacondition && !config.metacondition.matchesProperties($tags)}
            This tagRendering is currently not shown. It will appear if the feature matches the metacondition
            <b>
              <FromHtml src={config.metacondition.asHumanString(true, false, {})} />
            </b>
          For a breakdown of usable meta conditions, go to a mapcomplete theme > settings and enable debug-data. The meta-tags will appear at the bottom 
        {:else}
          <TagRenderingEditable
            selectedElement={state.exampleFeature}
            config={config} editingEnabled={new ImmutableStore(true)} showQuestionIfUnknown={true}
            {state}
            {tags}></TagRenderingEditable>
        {/if}
      {/if}
    {/each}
  </div>


</div>