kopia lustrzana https://github.com/FacilMap/facilmap
130 wiersze
3.8 KiB
Vue
130 wiersze
3.8 KiB
Vue
<script setup lang="ts">
|
|
import PadSettingsDialog from "../pad-settings-dialog/pad-settings-dialog.vue";
|
|
import storage from "../../utils/storage";
|
|
import ManageBookmarksDialog from "../manage-bookmarks-dialog.vue";
|
|
import OpenMapDialog from "../open-map-dialog.vue";
|
|
import { computed, ref } from "vue";
|
|
import DropdownMenu from "../ui/dropdown-menu.vue";
|
|
import { injectContextRequired, requireClientContext, requireMapContext } from "../facil-map-context-provider/facil-map-context-provider.vue";
|
|
import { normalizePadName } from "facilmap-utils";
|
|
import { useI18n } from "../../utils/i18n";
|
|
|
|
const context = injectContextRequired();
|
|
const client = requireClientContext(context);
|
|
const mapContext = requireMapContext(context);
|
|
const i18n = useI18n();
|
|
|
|
const emit = defineEmits<{
|
|
"hide-sidebar": [];
|
|
}>();
|
|
|
|
const dialog = ref<
|
|
| "open-map"
|
|
| "manage-bookmarks"
|
|
| "create-pad"
|
|
>();
|
|
|
|
const hash = computed(() => {
|
|
const v = mapContext.value;
|
|
return v.hash && v.hash != "#" ? v.hash : `${v.zoom}/${v.center.lat}/${v.center.lng}`;
|
|
});
|
|
|
|
const isBookmarked = computed(() => {
|
|
return !!client.value.padId && storage.bookmarks.some((bookmark) => bookmark.id == client.value.padId);
|
|
});
|
|
|
|
function addBookmark(): void {
|
|
storage.bookmarks.push({ id: client.value.padId!, padId: client.value.padData!.id, name: client.value.padData!.name });
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<DropdownMenu
|
|
tag="li"
|
|
class="nav-item"
|
|
isLink
|
|
:isDisabled="mapContext.interaction"
|
|
buttonClass="nav-link"
|
|
menuClass="dropdown-menu-end"
|
|
:label="i18n.t('toolbox-collab-maps-dropdown.label')"
|
|
>
|
|
<li v-for="bookmark in storage.bookmarks" :key="bookmark.id">
|
|
<a
|
|
class="dropdown-item"
|
|
:class="{ active: bookmark.id == client.padId }"
|
|
:href="`${context.baseUrl}${encodeURIComponent(bookmark.id)}#${hash}`"
|
|
@click.exact.prevent="client.openPad(bookmark.id); emit('hide-sidebar')"
|
|
draggable="false"
|
|
>{{bookmark.customName || normalizePadName(bookmark.name)}}</a>
|
|
</li>
|
|
|
|
<li v-if="storage.bookmarks.length > 0">
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
|
|
<li v-if="client.padData && !isBookmarked">
|
|
<a
|
|
class="dropdown-item"
|
|
href="javascript:"
|
|
@click="addBookmark()"
|
|
draggable="false"
|
|
>{{i18n.t('toolbox-collab-maps-dropdown.bookmark', { padName: normalizePadName(client.padData.name) })}}</a>
|
|
</li>
|
|
|
|
<li v-if="storage.bookmarks.length > 0">
|
|
<a
|
|
class="dropdown-item"
|
|
href="javascript:"
|
|
@click="dialog = 'manage-bookmarks'; emit('hide-sidebar')"
|
|
draggable="false"
|
|
>{{i18n.t('toolbox-collab-maps-dropdown.manage-bookmarks')}}</a>
|
|
</li>
|
|
|
|
<li v-if="(client.padData && !isBookmarked) || storage.bookmarks.length > 0">
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
|
|
<li v-if="!client.padId">
|
|
<a
|
|
class="dropdown-item"
|
|
href="javascript:"
|
|
@click="dialog = 'create-pad'; emit('hide-sidebar')"
|
|
draggable="false"
|
|
>{{i18n.t('toolbox-collab-maps-dropdown.create-map')}}</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a
|
|
class="dropdown-item"
|
|
href="javascript:"
|
|
@click="dialog = 'open-map'; emit('hide-sidebar')"
|
|
draggable="false"
|
|
>{{client.padId ? i18n.t("toolbox-collab-maps-dropdown.open-other-map") : i18n.t("toolbox-collab-maps-dropdown.open-map")}}</a>
|
|
</li>
|
|
|
|
<li v-if="client.padData">
|
|
<a
|
|
class="dropdown-item"
|
|
:href="`${context.baseUrl}#${hash}`"
|
|
@click.exact.prevent="client.openPad(undefined)"
|
|
draggable="false"
|
|
>{{i18n.t("toolbox-collab-maps-dropdown.close-map", { padName: normalizePadName(client.padData.name) })}}</a>
|
|
</li>
|
|
</DropdownMenu>
|
|
|
|
<OpenMapDialog
|
|
v-if="dialog === 'open-map'"
|
|
@hidden="dialog = undefined"
|
|
></OpenMapDialog>
|
|
|
|
<ManageBookmarksDialog
|
|
v-if="dialog === 'manage-bookmarks'"
|
|
@hidden="dialog = undefined"
|
|
></ManageBookmarksDialog>
|
|
|
|
<PadSettingsDialog
|
|
v-if="dialog === 'create-pad'"
|
|
@hidden="dialog = undefined"
|
|
:isCreate="true"
|
|
></PadSettingsDialog>
|
|
</template> |