Add map view toggle for fullWidthMap mode
All checks were successful
Build Docker Image / build (push) Successful in 3m25s
All checks were successful
Build Docker Image / build (push) Successful in 3m25s
- Add MapViewMode type (offers/hubs/suppliers) with cookie storage - Add view toggle button group on full-width map - Update clusterNodeType and mapPointColor based on selected view - Add translations for view options
This commit is contained in:
@@ -36,6 +36,32 @@
|
||||
<div v-if="fullWidthMap" class="hidden lg:flex flex-1 min-h-0 py-4">
|
||||
<div class="w-full">
|
||||
<div class="sticky rounded-xl overflow-hidden shadow-lg" :style="mapStyle">
|
||||
<!-- View mode toggle -->
|
||||
<div class="absolute top-4 left-4 z-10">
|
||||
<div class="btn-group shadow-lg bg-white/90 backdrop-blur rounded-lg">
|
||||
<button
|
||||
class="btn btn-sm"
|
||||
:class="{ 'btn-active': mapViewMode === 'offers' }"
|
||||
@click="setMapViewMode('offers')"
|
||||
>
|
||||
{{ $t('catalog.views.offers') }}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm"
|
||||
:class="{ 'btn-active': mapViewMode === 'hubs' }"
|
||||
@click="setMapViewMode('hubs')"
|
||||
>
|
||||
{{ $t('catalog.views.hubs') }}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm"
|
||||
:class="{ 'btn-active': mapViewMode === 'suppliers' }"
|
||||
@click="setMapViewMode('suppliers')"
|
||||
>
|
||||
{{ $t('catalog.views.suppliers') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<CatalogMap
|
||||
ref="mapRef"
|
||||
@@ -217,6 +243,9 @@
|
||||
<script setup lang="ts">
|
||||
import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
|
||||
|
||||
// Map view mode for full width map
|
||||
const { mapViewMode, setMapViewMode } = useCatalogSearch()
|
||||
|
||||
interface MapItem {
|
||||
uuid: string
|
||||
latitude?: number | null
|
||||
|
||||
Reference in New Issue
Block a user