MapComplete/src/UI/BigComponents/MenuDrawerIndex.svelte

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

335 lines
12 KiB
Svelte
Raw Normal View History

<script lang="ts">
/**
* All the generic (non-theme/map view specific) components of the drawer, e.g.:
*
* - user settings
* - mapcomplete links
* - ...
*
* But NOT: open ID here, info about the curren theme, ...
* Slots are provided for that
*/
import Translations from "../i18n/Translations"
import { CogIcon, EyeIcon, HeartIcon, TranslateIcon } from "@rgossiaux/svelte-heroicons/solid"
import Page from "../Base/Page.svelte"
import PrivacyPolicy from "./PrivacyPolicy.svelte"
import Tr from "../Base/Tr.svelte"
import LoginToggle from "../Base/LoginToggle.svelte"
import { CloseButton } from "flowbite-svelte"
import { Utils } from "../../Utils"
import Constants from "../../Models/Constants"
import Mastodon from "../../assets/svg/Mastodon.svelte"
import Liberapay from "../../assets/svg/Liberapay.svelte"
import Bug from "../../assets/svg/Bug.svelte"
import CopyrightPanel from "./CopyrightPanel.svelte"
import CopyrightAllIcons from "./CopyrightAllIcons.svelte"
import LanguagePicker from "../InputElement/LanguagePicker.svelte"
import LoginButton from "../Base/LoginButton.svelte"
import SelectedElementView from "./SelectedElementView.svelte"
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
import type { LayerConfigJson } from "../../Models/ThemeConfig/Json/LayerConfigJson"
import usersettings from "../../../public/assets/generated/layers/usersettings.json"
import UserRelatedState from "../../Logic/State/UserRelatedState"
import Favourites from "../Favourites/Favourites.svelte"
import ReviewsOverview from "../Reviews/ReviewsOverview.svelte"
import LogoutButton from "../Base/LogoutButton.svelte"
import Copyright from "../../assets/svg/Copyright.svelte"
import Pencil from "../../assets/svg/Pencil.svelte"
import SidebarUnit from "../Base/SidebarUnit.svelte"
import Squares2x2 from "@babeard/svelte-heroicons/mini/Squares2x2"
import EnvelopeOpen from "@babeard/svelte-heroicons/mini/EnvelopeOpen"
import { UIEventSource } from "../../Logic/UIEventSource"
import MagnifyingGlassCircle from "@babeard/svelte-heroicons/mini/MagnifyingGlassCircle"
import { AndroidPolyfill } from "../../Logic/Web/AndroidPolyfill"
import Forgejo from "../../assets/svg/Forgejo.svelte"
import ChartBar from "@babeard/svelte-heroicons/solid/ChartBar"
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 { ArrowTrendingUp } from "@babeard/svelte-heroicons/solid/ArrowTrendingUp"
import ArrowTopRightOnSquare from "@babeard/svelte-heroicons/mini/ArrowTopRightOnSquare"
import { PhotoIcon } from "@babeard/svelte-heroicons/outline"
import ImageUploadQueue from "../../Logic/ImageProviders/ImageUploadQueue"
import QueuedImagesView from "../Image/QueuedImagesView.svelte"
import InsetSpacer from "../Base/InsetSpacer.svelte"
import UserCircle from "@rgossiaux/svelte-heroicons/solid/UserCircle"
import OfflineManagement from "./OfflineManagement.svelte"
import { GlobeEuropeAfrica } from "@babeard/svelte-heroicons/solid/GlobeEuropeAfrica"
import { onDestroy } from "svelte"
export let state: {
favourites: FavouritesFeatureSource
guistate: MenuState
osmConnection: OsmConnection
theme?: ThemeConfig
featureSwitches: Partial<FeatureSwitchState>
mapProperties?: MapProperties
userRelatedState?: UserRelatedState
}
let userdetails = state.osmConnection.userDetails
let usersettingslayer = new LayerConfig(<LayerConfigJson>usersettings, "usersettings", true)
let featureSwitches = state.featureSwitches
let showHome = featureSwitches?.featureSwitchBackToThemeOverview
let pg = state.guistate.pageStates
export let onlyLink: boolean
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)
})
}
})
let isAndroid = AndroidPolyfill.inAndroid
let nrOfFailedImages = ImageUploadQueue.singleton.imagesInQueue
let failedImagesOpen = pg.failedImages
let loggedIn = state.osmConnection.isLoggedIn
</script>
2025-07-10 18:26:31 +02:00
<div class="low-interaction flex h-full flex-col overflow-hidden" class:hidden={!$shown}>
{#if onlyLink}
<InsetSpacer height={AndroidPolyfill.getInsetSizes().top} />
{/if}
2025-07-10 18:26:31 +02:00
<div class="flex justify-between border-b border-black p-2">
<h2>
<Tr t={t.title} />
</h2>
<CloseButton
on:click={() => {
pg.menu.set(false)
}}
/>
</div>
2025-07-10 18:26:31 +02:00
<div class="flex flex-col gap-y-2 overflow-y-auto px-2 sm:gap-y-3 sm:px-3">
{#if $showHome}
<a class="button flex" class:primary={$loggedIn} href={Utils.HomepageLink()}>
<Squares2x2 class="h-10 w-10" />
{#if Utils.isIframe}
<Tr t={Translations.t.general.seeIndex} />
{:else}
<Tr t={Translations.t.general.backToIndex} />
{/if}
</a>
{/if}
<!-- User related: avatar, settings, favourits, logout -->
<SidebarUnit>
<LoginToggle {state}>
<LoginButton clss="primary" osmConnection={state.osmConnection} slot="not-logged-in" />
2025-08-13 23:06:38 +02:00
<div class="m-2 flex w-full items-center gap-x-4">
{#if $userdetails.img}
<img alt="avatar" src={$userdetails.img} class="h-12 w-12 rounded-full" />
2025-08-13 23:06:38 +02:00
{:else}
<UserCircle class="h-14 w-14" color="gray" />
{/if}
2025-08-13 23:06:38 +02:00
<div class="flex w-full flex-col gap-y-2">
<b>{$userdetails.name}</b>
<LogoutButton clss="as-link small subtle text-sm" osmConnection={state.osmConnection} />
</div>
</div>
</LoginToggle>
<Page {onlyLink} shown={pg.usersettings} bodyPadding="p-0 pb-4">
<svelte:fragment slot="header">
<CogIcon />
<Tr t={UserRelatedState.usersettingsConfig.title.GetRenderValue({})} />
</svelte:fragment>
<!-- All shown components are set by 'usersettings.json', which happily uses some special visualisations created specifically for it -->
<SelectedElementView
highlightedRendering={state.guistate.highlightedUserSetting}
layer={usersettingslayer}
selectedElement={{
2025-07-10 18:26:31 +02:00
type: "Feature",
properties: { id: "settings" },
geometry: { type: "Point", coordinates: [0, 0] },
}}
{state}
tags={state.userRelatedState.preferencesAsTags}
/>
</Page>
{#if $nrOfFailedImages.length > 0 || $failedImagesOpen}
<Page {onlyLink} shown={pg.failedImages} bodyPadding="p-0 pb-4">
<svelte:fragment slot="header">
<PhotoIcon />
<Tr t={Translations.t.imageQueue.menu.Subs({ count: $nrOfFailedImages.length })} />
</svelte:fragment>
<QueuedImagesView {state} />
</Page>
{/if}
<LoginToggle {state} hiddenFail>
{#if state.favourites}
<Page {onlyLink} shown={pg.favourites}>
<svelte:fragment slot="header">
<HeartIcon />
<Tr t={Translations.t.favouritePoi.tab} />
</svelte:fragment>
<h3>
<Tr t={Translations.t.favouritePoi.title} />
</h3>
<div>
<Favourites {state} />
<h3>
<Tr t={Translations.t.reviews.your_reviews} />
</h3>
<ReviewsOverview {state} />
</div>
</Page>
{/if}
</LoginToggle>
<Page {onlyLink} shown={pg.manageOffline} fullscreen>
<svelte:fragment slot="header">
<GlobeEuropeAfrica />
Manage offline basemap
</svelte:fragment>
<OfflineManagement {state} />
</Page>
2025-07-10 18:26:31 +02:00
<LanguagePicker
preferredLanguages={state.userRelatedState.osmConnection.userDetails.mapD(
2025-08-13 23:06:38 +02:00
(ud) => ud.languages,
onDestroy
2025-07-10 18:26:31 +02:00
)}
/>
</SidebarUnit>
<slot name="theme-tools" />
<slot name="location-tools" />
<!-- About MC: various outward links, legal info, ... -->
<SidebarUnit>
<h3>
<Tr t={Translations.t.general.menu.aboutMapComplete} />
</h3>
2025-08-13 23:06:38 +02:00
<a class="flex" href={($isAndroid ? "https://mapcomplete.org" : ".") + "/studio.html"}>
<Pencil class="mr-2 h-6 w-6" />
<Tr t={Translations.t.general.morescreen.createYourOwnTheme} />
</a>
<a class="flex" href="mailto:info@mapcomplete.org">
<EnvelopeOpen class="h-6 w-6" />
<Tr t={Translations.t.general.attribution.emailCreators} />
</a>
<a class="flex" href="https://en.osm.town/@MapComplete" target="_blank">
<Mastodon class="h-6 w-6" />
<Tr t={Translations.t.general.attribution.followOnMastodon} />
</a>
<a class="flex" href="https://liberapay.com/pietervdvn/" target="_blank">
<Liberapay class="h-6 w-6" />
<Tr t={Translations.t.general.attribution.donate} />
</a>
<a
class="flex"
href="https://source.mapcomplete.org/MapComplete/MapComplete/issues"
target="_blank"
>
<Bug class="h-6 w-6" />
<Tr t={Translations.t.general.attribution.openIssueTracker} />
</a>
2025-07-10 18:26:31 +02:00
<a
class="flex"
href="https://source.mapcomplete.org/MapComplete/MapComplete/"
target="_blank"
>
<Forgejo class="h-6 w-6" />
<Tr t={Translations.t.general.attribution.gotoSourceCode} />
</a>
<a class="flex" href={`${Constants.weblate}projects/mapcomplete/`} target="_blank">
<TranslateIcon class="h-6 w-6" />
<Tr t={Translations.t.translations.activateButton} />
</a>
<a
class="flex"
href={window.location.protocol + "//" + window.location.host + "/inspector.html"}
>
<MagnifyingGlassCircle class="mr-2 h-6 w-6" />
<Tr t={Translations.t.inspector.menu} />
</a>
{#if !state.theme}
2025-08-13 23:06:38 +02:00
<a
class="flex"
href={($isAndroid ? "https://mapcomplete.org" : ".") + `/statistics.html`}
target="_blank"
>
<ChartBar class="h-6 w-6" />
2025-07-10 18:26:31 +02:00
<Tr
t={Translations.t.general.attribution.openStatistics.Subs({ theme: "MapComplete" })}
/>
</a>
{/if}
<a class="flex" href={Utils.OsmChaLinkFor(7)} target="_blank">
<ArrowTrendingUp class="mr-2 h-6 w-6" />
<Tr t={Translations.t.general.attribution.openOsmchaLastWeek} />
</a>
</SidebarUnit>
<SidebarUnit>
<h3>
<Tr t={Translations.t.general.menu.legal} />
</h3>
<Page {onlyLink} shown={pg.copyright}>
<svelte:fragment slot="header">
<Copyright />
<Tr t={Translations.t.general.attribution.attributionTitle} />
</svelte:fragment>
<CopyrightPanel {state} />
</Page>
{#if state?.theme}
<Page {onlyLink} shown={pg.copyright_icons}>
<svelte:fragment slot="header">
<Copyright />
<Tr t={Translations.t.general.attribution.iconAttribution.title} />
</svelte:fragment>
<CopyrightAllIcons {state} />
</Page>
{/if}
<Page {onlyLink} shown={pg.privacy}>
<svelte:fragment slot="header">
<EyeIcon />
<Tr t={Translations.t.privacy.title} />
</svelte:fragment>
<PrivacyPolicy {state} />
<a href="./privacy.html" class="button float-right w-fit" target="_blank">
<ArrowTopRightOnSquare class="h-8 w-8" />
</a>
</Page>
</SidebarUnit>
<div class="subtle self-end">
{Constants.vNumber}
{#if $isAndroid}
Android
{/if}
</div>
2025-07-18 14:15:37 +02:00
{#if onlyLink}
<InsetSpacer height={AndroidPolyfill.getInsetSizes().bottom} />
{/if}
</div>
</div>