MapComplete/src/UI/BigComponents/VisualFeedbackPanel.svelte

<script lang="ts">
  /**
   * The visual feedback panel gives visual (and auditive) feedback on the main map view
   */

  import Translations from "../i18n/Translations"
  import ThemeViewState from "../../Models/ThemeViewState"
  import Summary from "./Summary.svelte"
  import Tr from "../Base/Tr.svelte"
  import { UIEventSource } from "../../Logic/UIEventSource"
  import type { KeyNavigationEvent } from "../../Models/MapProperties"
  import MapCenterDetails from "./MapCenterDetails.svelte"

  export let state: ThemeViewState
  const t = Translations.t.general.visualFeedback
  let map = state.mapProperties
  let centerFeatures = state.closestFeatures.features
  let translationWithLength = centerFeatures.mapD(cf => cf.length).mapD(n => {
    if (n === 1) {
      return t.oneFeatureInView
    }
    return t.closestFeaturesAre.Subs({ n })
  })


  let lastAction: UIEventSource<KeyNavigationEvent> = new UIEventSource<KeyNavigationEvent>(
    undefined,
  )
  state.mapProperties.onKeyNavigationEvent((event) => {
    lastAction.setData(event)
  })
  lastAction.stabilized(750).addCallbackAndRunD((_) => lastAction.setData(undefined))
</script>

<div aria-live="assertive" class="p-1 bg-white m-1 rounded">
  {#if $lastAction?.key === "out"}
    <Tr t={t.out.Subs({z: map.zoom.data - 1})} />
  {:else if $lastAction?.key === "in"}
    <Tr t={t.out.Subs({z: map.zoom.data + 1})} />
  {:else if $lastAction !== undefined}
    <Tr t={t[$lastAction.key]} />
  {:else if $centerFeatures?.length === 0}
    <Tr t={t.noCloseFeatures} />
    <MapCenterDetails {state} />
  {:else if $centerFeatures !== undefined}
    <div class="pointer-events-auto">
      <Tr t={$translationWithLength} />
      <MapCenterDetails {state} />
      <div class="grid grid-cols-3 space-x-1 space-y-0.5">
        {#each $centerFeatures.slice(0, 9) as feat, i (feat.properties.id)}
          <Summary {state} feature={feat} {i} />
        {/each}
      </div>
    </div>
  {/if}
</div>