MapComplete/src/UI/InputElement/Helpers/OpeningHoursInput.svelte

<script lang="ts">
  /**
   * Opens the 'Opening hours input' in another top level window
   */
  import { UIEventSource } from "../../../Logic/UIEventSource"
  import PublicHolidaySelector from "../../OpeningHours/PublicHolidaySelector.svelte"
  import OHTable from "./OpeningHours/OHTable.svelte"
  import OpeningHoursState from "../../OpeningHours/OpeningHoursState"
  import Popup from "../../Base/Popup.svelte"
  import Tr from "../../Base/Tr.svelte"
  import Translations from "../../i18n/Translations"
  import Check from "@babeard/svelte-heroicons/mini/Check"
  import { CloseButton } from "flowbite-svelte"
  import Cross from "../../../assets/svg/Cross.svelte"
  import XMark from "@babeard/svelte-heroicons/mini/XMark"

  export let value: UIEventSource<string>
  export let args: string
  let prefix = ""
  let postfix = ""
  if (args) {
    try {
      const data = JSON.stringify(args)
      if (data["prefix"]) {
        prefix = data["prefix"]
      }
      if (data["postfix"]) {
        postfix = data["postfix"]
      }
    } catch (e) {
      console.error("Could not parse arguments")
    }
  }

  const state = new OpeningHoursState(value, prefix, postfix)
  let expanded = new UIEventSource(false)

  function abort() {
    expanded.set(false)
  }
</script>

<Popup bodyPadding="p-0" shown={expanded}>
  <OHTable value={state.normalOhs} />
  <div class="absolute flex w-full justify-center" style="bottom: -3rem">
    <button on:click={() => abort()}>
      <XMark class="m-0 h-6 w-6" />
      <Tr t={Translations.t.general.cancel} />
    </button>
    <button class=" primary" on:click={() => expanded.set(false)}>
      <Check class="m-0 h-6 w-6 shrink-0 p-0" color="white" />
      <Tr t={Translations.t.general.confirm} />
    </button>
  </div>
  <CloseButton
    class="absolute right-0 top-0 z-10"
    style="margin-top: -1.0rem"
    on:click={() => abort()}
  />
</Popup>

<button on:click={() => expanded.set(true)}>Pick opening hours</button>
<PublicHolidaySelector value={state.phSelectorValue} />