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

Group hubs by rail/sea in info panel
Some checks failed
Build Docker Image / build (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-02-05 19:37:51 +07:00
parent 71a27a4ab9
commit 4669911162
3 changed files with 50 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
app/components/catalog/InfoPanel.vue
View File

@@ -190,41 +190,46 @@
<div v-if="!loadingHubs && relatedHubs.length === 0" class="text-white/50 text-sm py-2">
{{ $t('catalog.info.noHubs') }}
</div>
<div v-else-if="!loadingHubs" class="space-y-2">
<div v-if="nearestRailHub || nearestSeaHub" class="grid grid-cols-2 gap-2">
<Card v-if="nearestRailHub" padding="small" class="border border-white/10 bg-white/5">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-white/10 flex items-center justify-center">
<Icon name="lucide:train-front" size="16" class="text-white/80" />
</div>
<div class="text-sm text-white/80">Ближайший ЖД хаб</div>
<div v-else-if="!loadingHubs" class="space-y-4">
<template v-if="railHubs.length">
<Card padding="small" class="border border-white/10 bg-white/5">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-white/10 flex items-center justify-center">
<Icon name="lucide:train-front" size="16" class="text-white/80" />
</div>
<div class="text-xs text-white/60">{{ formatDistance(nearestRailHub.distanceKm) }}</div>
<div class="text-sm text-white/80">{{ $t('catalog.info.railHubs') }}</div>
</div>
</Card>
<Card v-if="nearestSeaHub" padding="small" class="border border-white/10 bg-white/5">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-white/10 flex items-center justify-center">
<Icon name="lucide:ship" size="16" class="text-white/80" />
</div>
<div class="text-sm text-white/80">Ближайший морской хаб</div>
</div>
<div class="text-xs text-white/60">{{ formatDistance(nearestSeaHub.distanceKm) }}</div>
</div>
</Card>
</div>
<div class="flex flex-col gap-2">
<HubCard
v-for="(hub, index) in railHubs"
:key="hub.uuid ?? index"
:hub="hub"
selectable
@select="onHubSelect(hub)"
/>
</div>
</template>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
<HubCard
v-for="(hub, index) in relatedHubs"
:key="hub.uuid ?? index"
:hub="hub"
selectable
@select="onHubSelect(hub)"
/>
</div>
<template v-if="seaHubs.length">
<Card padding="small" class="border border-white/10 bg-white/5">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-white/10 flex items-center justify-center">
<Icon name="lucide:ship" size="16" class="text-white/80" />
</div>
<div class="text-sm text-white/80">{{ $t('catalog.info.seaHubs') }}</div>
</div>
</Card>
<div class="flex flex-col gap-2">
<HubCard
v-for="(hub, index) in seaHubs"
:key="hub.uuid ?? index"
:hub="hub"
selectable
@select="onHubSelect(hub)"
/>
</div>
</template>
</div>
</section>
@@ -338,18 +343,13 @@ const formatPrice = (price: number | string) => {
return new Intl.NumberFormat('ru-RU').format(num)
}
const formatDistance = (km?: number | null) => {
if (!km && km !== 0) return ''
return `${Math.round(km).toLocaleString('ru-RU')} км`
}
const railHubs = computed(() =>
relatedHubs.value.filter(h => h.transportTypes?.includes('rail'))
)
const nearestRailHub = computed(() => {
return relatedHubs.value.find(h => h.transportTypes?.includes('rail'))
})
const nearestSeaHub = computed(() => {
return relatedHubs.value.find(h => h.transportTypes?.includes('sea'))
})
const seaHubs = computed(() =>
relatedHubs.value.filter(h => h.transportTypes?.includes('sea'))
)
// Mock KYC teaser data (will be replaced with real data later)
const kycTeaser = computed(() => {