diff --git a/src/components/Viewer.vue b/src/components/Viewer.vue index ffaa665..73e2279 100644 --- a/src/components/Viewer.vue +++ b/src/components/Viewer.vue @@ -13,7 +13,6 @@ import { createLink, createSequenceLink } from '@/components-viewer/reportLink' import { useI18n } from 'vue-i18n' import { hasASessionCookieDecoded } from '@/utils/auth' import type { ViewerInterface, MapInterface } from '@/views/interfaces/common' - const sequenceStore = useSequenceStore() const { t } = useI18n() let mapIsLoaded = ref(false) diff --git a/src/locales/en.json b/src/locales/en.json index 031e3d0..390ae39 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -90,6 +90,7 @@ "sequence_creation": "Upload", "sequence_creation_tooltip": "Filter by uploaded date", "sequence_date_tooltip": "Filter by shooting date", + "filter_bbox_button": "Search on this area", "sequence_status": "Status", "sequence_published": "Published", "sequence_waiting": "Still processing", diff --git a/src/locales/fr.json b/src/locales/fr.json index 2090b30..2c1b3e6 100644 --- a/src/locales/fr.json +++ b/src/locales/fr.json @@ -90,6 +90,7 @@ "sequence_creation_tooltip": "Filtre par date de versement", "sequence_date_tooltip": "Filtre par date de prise de vue", "reset_filter_button": "Réinitialiser tous les filtres", + "filter_bbox_button": "Chercher dans cette zone", "sequence_status": "Statut", "sequence_published": "Publiée", "sequence_waiting": "En cours de publication", diff --git a/src/locales/hu.json b/src/locales/hu.json index 911f7b3..b326607 100644 --- a/src/locales/hu.json +++ b/src/locales/hu.json @@ -90,6 +90,7 @@ "sequence_creation": "Feltöltés ideje", "sequence_creation_tooltip": "Szűrés feltöltés dátuma szerint", "sequence_date_tooltip": "Szűrés forgatás dátuma szerint", + "filter_bbox_button": "Keresés ezen a területen", "sequence_status": "Állapot", "sequence_published": "Közzétéve", "sequence_waiting": "Feldolgozás alatt", diff --git a/src/views/MySequencesView.vue b/src/views/MySequencesView.vue index f2cac73..1940b75 100644 --- a/src/views/MySequencesView.vue +++ b/src/views/MySequencesView.vue @@ -32,6 +32,22 @@ /> +
+
+
-
+
(null) let sortDate = ref<{ sortBy: string | null }>({ sortBy: null }) let uri = ref('api/users/me/collection?limit=50') let modal = ref() @@ -320,6 +337,25 @@ async function resetAllFilter(): Promise { formatUri() await updateSequence(uri.value) } +async function triggerResetBbox(): Promise { + filterBbox.value = null + formatUri() + await updateSequence(uri.value) +} +function triggerBboxFilter(): void { + if (viewerRef.value) { + isLoading.value = true + const currentBbox = [ + viewerRef.value.viewer._map.getBounds()._ne.lng, + viewerRef.value.viewer._map.getBounds()._ne.lat, + viewerRef.value.viewer._map.getBounds()._sw.lng, + viewerRef.value.viewer._map.getBounds()._sw.lat + ] + filterBbox.value = currentBbox + formatUri() + updateSequence(uri.value) + } +} function displayModal(type: string): void { calendarType.value = type if (modal.value) modal.value.show() @@ -397,6 +433,7 @@ async function updateSequence(uri: string) { userSequences.value = getLinkByRel(data.links, 'child') scrollToElement() isLoading.value = false + if (!userSequences.value.length) noSequencesFound.value = true } catch (e) { userSequences.value = [] noSequencesFound.value = true @@ -501,6 +538,10 @@ onMounted(async () => { }) function formatUri(): void { let params: string[] = [] + if (filterBbox && filterBbox.value) { + const bboxFilter = `${filterBbox.value[0]},${filterBbox.value[1]},${filterBbox.value[2]},${filterBbox.value[3]}` + params = [...params, `&bbox=${bboxFilter}`] + } if (filterDate.value.start && filterDate.value.end) { const rangeFilter = encodeURIComponent( `${filterDate.value.type} BETWEEN '${filterDate.value.start}' AND '${filterDate.value.end}'` @@ -522,13 +563,8 @@ async function updateFilters(value: { }): Promise { isLoading.value = true noSequencesFound.value = false - if (value.start && value.end) { - filterDate.value = { start: value.start, end: value.end, type: value.type } - formatUri() - } else { - uri.value = 'api/users/me/collection?limit=50' - filterDate.value = { end: null, start: null, type: '' } - } + filterDate.value = { start: value.start, end: value.end, type: value.type } + formatUri() await updateSequence(uri.value) } watchEffect(() => { @@ -578,6 +614,17 @@ watchEffect(() => { height: 100%; position: relative; } +.bbox-filter-button { + padding: toRem(2); + width: fit-content; + height: fit-content; + position: relative; +} +.reset-bbox { + position: absolute; + right: 0; + top: toRem(0.5); +} .no-map { display: flex; justify-content: center;