optovia/webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix nav height, view toggle transparency, dynamic map colors by view mode
All checks were successful
Build Docker Image / build (push) Successful in 3m24s
Details

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-01-23 12:17:40 +07:00
parent 655c02d6fc
commit 9d46bab93f
2 changed files with 42 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
app/components/page/CatalogPage.vue
View File

@@ -19,7 +19,7 @@
:items="useServerClustering ? [] : itemsWithCoords"
:clustered-points="useServerClustering ? clusteredNodes : []"
:use-server-clustering="useServerClustering"
:point-color="pointColor"
:point-color="activePointColor"
:hovered-item-id="hoveredId"
:hovered-item="hoveredItem"
@select-item="onMapSelect"
@@ -30,10 +30,10 @@
<!-- View toggle (top RIGHT overlay) - works in both modes -->
<div class="absolute top-4 right-4 z-20 hidden lg:block">
<div class="join bg-base-100/70 backdrop-blur-md shadow-lg rounded-lg border border-base-300/50">
<div class="flex gap-1 bg-black/30 backdrop-blur-md rounded-lg p-1 border border-white/10">
<button
class="btn btn-sm join-item gap-2"
:class="{ 'btn-active': mapViewMode === 'offers' }"
class="flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium transition-colors"
:class="mapViewMode === 'offers' ? 'bg-white/20 text-white' : 'text-white/70 hover:text-white hover:bg-white/10'"
@click="setMapViewMode('offers')"
>
<span class="w-5 h-5 rounded-full flex items-center justify-center" style="background-color: #f97316">
@@ -42,8 +42,8 @@
{{ $t('catalog.views.offers') }}
</button>
<button
class="btn btn-sm join-item gap-2"
:class="{ 'btn-active': mapViewMode === 'hubs' }"
class="flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium transition-colors"
:class="mapViewMode === 'hubs' ? 'bg-white/20 text-white' : 'text-white/70 hover:text-white hover:bg-white/10'"
@click="setMapViewMode('hubs')"
>
<span class="w-5 h-5 rounded-full flex items-center justify-center" style="background-color: #22c55e">
@@ -52,8 +52,8 @@
{{ $t('catalog.views.hubs') }}
</button>
<button
class="btn btn-sm join-item gap-2"
:class="{ 'btn-active': mapViewMode === 'suppliers' }"
class="flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium transition-colors"
:class="mapViewMode === 'suppliers' ? 'bg-white/20 text-white' : 'text-white/70 hover:text-white hover:bg-white/10'"
@click="setMapViewMode('suppliers')"
>
<span class="w-5 h-5 rounded-full flex items-center justify-center" style="background-color: #3b82f6">
@@ -78,32 +78,32 @@
<div class="lg:hidden absolute bottom-0 left-0 right-0 z-20">
<!-- Mobile view toggle -->
<div class="flex justify-end px-4 mb-2">
<div class="join bg-base-100/70 backdrop-blur-md shadow-lg rounded-lg border border-base-300/50">
<div class="flex gap-1 bg-black/30 backdrop-blur-md rounded-lg p-1 border border-white/10">
<button
class="btn btn-xs join-item gap-1"
:class="{ 'btn-active': mapViewMode === 'offers' }"
class="flex items-center justify-center w-8 h-8 rounded-md transition-colors"
:class="mapViewMode === 'offers' ? 'bg-white/20' : 'hover:bg-white/10'"
@click="setMapViewMode('offers')"
>
<span class="w-4 h-4 rounded-full flex items-center justify-center" style="background-color: #f97316">
<Icon name="lucide:shopping-bag" size="10" class="text-white" />
<span class="w-5 h-5 rounded-full flex items-center justify-center" style="background-color: #f97316">
<Icon name="lucide:shopping-bag" size="12" class="text-white" />
</span>
</button>
<button
class="btn btn-xs join-item gap-1"
:class="{ 'btn-active': mapViewMode === 'hubs' }"
class="flex items-center justify-center w-8 h-8 rounded-md transition-colors"
:class="mapViewMode === 'hubs' ? 'bg-white/20' : 'hover:bg-white/10'"
@click="setMapViewMode('hubs')"
>
<span class="w-4 h-4 rounded-full flex items-center justify-center" style="background-color: #22c55e">
<Icon name="lucide:warehouse" size="10" class="text-white" />
<span class="w-5 h-5 rounded-full flex items-center justify-center" style="background-color: #22c55e">
<Icon name="lucide:warehouse" size="12" class="text-white" />
</span>
</button>
<button
class="btn btn-xs join-item gap-1"
:class="{ 'btn-active': mapViewMode === 'suppliers' }"
class="flex items-center justify-center w-8 h-8 rounded-md transition-colors"
:class="mapViewMode === 'suppliers' ? 'bg-white/20' : 'hover:bg-white/10'"
@click="setMapViewMode('suppliers')"
>
<span class="w-4 h-4 rounded-full flex items-center justify-center" style="background-color: #3b82f6">
<Icon name="lucide:factory" size="10" class="text-white" />
<span class="w-5 h-5 rounded-full flex items-center justify-center" style="background-color: #3b82f6">
<Icon name="lucide:factory" size="12" class="text-white" />
</span>
</button>
</div>
@@ -136,6 +136,24 @@ import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
const { mapViewMode, setMapViewMode } = useCatalogSearch()
// Point color based on map view mode
const VIEW_MODE_COLORS = {
offers: '#f97316', // orange
hubs: '#22c55e', // green
suppliers: '#3b82f6' // blue
} as const
const activePointColor = computed(() => VIEW_MODE_COLORS[mapViewMode.value] || VIEW_MODE_COLORS.offers)
// Node type for server clustering based on view mode
const VIEW_MODE_NODE_TYPES = {
offers: 'offer',
hubs: 'logistics',
suppliers: 'supplier'
} as const
const activeClusterNodeType = computed(() => VIEW_MODE_NODE_TYPES[mapViewMode.value] || VIEW_MODE_NODE_TYPES.offers)
interface MapItem {
uuid: string
latitude?: number | null
@@ -170,9 +188,8 @@ const emit = defineEmits<{
'update:hoveredId': [uuid: string | undefined]
}>()
// Server-side clustering
const nodeTypeRef = computed(() => props.clusterNodeType)
const { clusteredNodes, fetchClusters } = useClusteredNodes(undefined, nodeTypeRef)
// Server-side clustering - use computed node type based on view mode
const { clusteredNodes, fetchClusters } = useClusteredNodes(undefined, activeClusterNodeType)
// Map refs
const mapRef = ref<{ flyTo: (lat: number, lng: number, zoom?: number) => void } | null>(null)