MapComplete/src/UI/BigComponents/MenuDrawer.svelte

<script lang="ts">
  import Translations from "../i18n/Translations"
  import Page from "../Base/Page.svelte"
  import Tr from "../Base/Tr.svelte"
  import If from "../Base/If.svelte"
  import CommunityIndexView from "./CommunityIndexView.svelte"
  import Community from "../../assets/svg/Community.svelte"
  import { Utils } from "../../Utils"
  import DocumentMagnifyingGlass from "@babeard/svelte-heroicons/outline/DocumentMagnifyingGlass"
  import OpenIdEditor from "./OpenIdEditor.svelte"
  import OpenJosm from "../Base/OpenJosm.svelte"
  import MapillaryLink from "./MapillaryLink.svelte"
  import UserRelatedState from "../../Logic/State/UserRelatedState"
  import ArrowDownTray from "@babeard/svelte-heroicons/mini/ArrowDownTray"
  import DownloadPanel from "../DownloadFlow/DownloadPanel.svelte"
  import Share from "@babeard/svelte-heroicons/solid/Share"
  import ShareScreen from "./ShareScreen.svelte"
  import FilterPage from "./FilterPage.svelte"
  import RasterLayerOverview from "../Map/RasterLayerOverview.svelte"
  import ThemeIntroPanel from "./ThemeIntroPanel.svelte"
  import Marker from "../Map/Marker.svelte"
  import { ShareIcon } from "@babeard/svelte-heroicons/mini"
  import SidebarUnit from "../Base/SidebarUnit.svelte"
  import PanoramaxLink from "./PanoramaxLink.svelte"
  import { UIEventSource } from "../../Logic/UIEventSource"
  import ChartBar from "@babeard/svelte-heroicons/solid/ChartBar"
  import QueueList from "@babeard/svelte-heroicons/solid/QueueList"
  import { MenuState } from "../../Models/MenuState"
  import { OsmConnection } from "../../Logic/Osm/OsmConnection"
  import FeatureSwitchState from "../../Logic/State/FeatureSwitchState"
  import ThemeConfig from "../../Models/ThemeConfig/ThemeConfig"
  import type { MapProperties } from "../../Models/MapProperties"
  import FavouritesFeatureSource from "../../Logic/FeatureSource/Sources/FavouritesFeatureSource"
  import Hotkeys from "../Base/Hotkeys"
  import MenuDrawerIndex from "./MenuDrawerIndex.svelte"

  export let onlyLink: boolean
  export let state: {
    favourites: FavouritesFeatureSource
    guistate: MenuState
    osmConnection: OsmConnection
    theme?: ThemeConfig
    featureSwitches: Partial<FeatureSwitchState>
    mapProperties?: MapProperties
    userRelatedState?: UserRelatedState
  }
  let hotkeys = Hotkeys._docs
  let userdetails = state.osmConnection.userDetails

  let theme = state.theme
  let featureSwitches = state.featureSwitches
  let pg = state.guistate.pageStates
  let location = state.mapProperties?.location
  const t = Translations.t.general.menu
  let shown = new UIEventSource(state.guistate.pageStates.menu.data || !onlyLink)
  state.guistate.pageStates.menu.addCallback((isShown) => {
    if (!onlyLink) {
      return true
    }
    if (isShown) {
      shown.setData(true)
    } else {
      Utils.waitFor(250).then(() => {
        shown.setData(state.guistate.pageStates.menu.data)
      })
    }
  })
</script>

<MenuDrawerIndex {state} {onlyLink} >

  <!-- Theme related: documentation links, download, ... -->
  <svelte:fragment slot="theme-tools">
    {#if state.theme}
    <SidebarUnit>
      <h3>
        <Tr t={t.aboutCurrentThemeTitle} />
      </h3>

      <Page {onlyLink} shown={pg.about_theme}>
        <svelte:fragment slot="link">
          <Marker size="h-7 w-7" icons={theme.icon} />
          <Tr t={t.showIntroduction} />
        </svelte:fragment>
        <svelte:fragment slot="header">
          <Marker size="h-8 w-8 mr-3" icons={theme.icon} />
          <Tr t={theme.title} />
        </svelte:fragment>
        <ThemeIntroPanel {state} />
      </Page>

      <FilterPage {onlyLink} {state} />

      <RasterLayerOverview {onlyLink} {state} />

      <Page {onlyLink} shown={pg.share}>
        <svelte:fragment slot="header">
          <Share />
          <Tr t={Translations.t.general.sharescreen.title} />
        </svelte:fragment>
        <ShareScreen {state} />
      </Page>

      {#if state.featureSwitches?.featureSwitchEnableExport}
        <Page {onlyLink} shown={pg.download}>
          <svelte:fragment slot="header">
            <ArrowDownTray />
            <Tr t={Translations.t.general.download.title} />
          </svelte:fragment>
          <DownloadPanel {state} />
        </Page>
      {/if}

      {#if theme.official}
        <a
          class="flex"
          href={"https://source.mapcomplete.org/MapComplete/MapComplete/src/branch/develop/Docs/Themes/" +
            theme.id +
            ".md"}
          target="_blank"
        >
          <DocumentMagnifyingGlass class="h-6 w-6" />
          <Tr
            t={Translations.t.general.attribution.openThemeDocumentation.Subs({
              name: theme.title,
            })}
          />
        </a>

        <a class="flex" href={Utils.OsmChaLinkFor(31, theme.id)} target="_blank">
          <QueueList class="h-6 w-6" />
          <Tr t={Translations.t.general.attribution.openOsmcha.Subs({ theme: theme.title })} />
        </a>
        <a
          class="flex"
          href={`./statistics.html?filter-mapcomplete-changes-theme-search={"search"%3A"${theme.id}"}`}
          target="_blank"
        >
          <ChartBar class="h-6 w-6" />
          <Tr t={Translations.t.general.attribution.openStatistics.Subs({ theme: theme.title })} />
        </a>
      {/if}
    </SidebarUnit>
  {/if}
  </svelte:fragment>


  <!-- Other links and tools for the given location: open iD/JOSM; community index, ... -->
  <svelte:fragment  slot="location-tools">
    {#if state.mapProperties?.location}
      <SidebarUnit>
        <h3>
          <Tr t={t.moreUtilsTitle} />
        </h3>

        <Page {onlyLink} shown={pg.community_index}>
          <svelte:fragment slot="header">
            <Community />
            <Tr t={Translations.t.communityIndex.title} />
          </svelte:fragment>
          <CommunityIndexView location={state.mapProperties.location} />
        </Page>

        <If condition={featureSwitches?.featureSwitchEnableLogin}>
          <OpenIdEditor mapProperties={state.mapProperties} />
          <OpenJosm {state} />
          <PanoramaxLink large={false} mapProperties={state.mapProperties} />
          <MapillaryLink large={false} mapProperties={state.mapProperties} />
        </If>

        <a class="sidebar-button flex" href="geo:{$location.lat},{$location.lon}">
          <ShareIcon />
          <Tr t={t.openHereDifferentApp} />
        </a>
      </SidebarUnit>
    {/if}
  </svelte:fragment>


</MenuDrawerIndex>