311 lines
10 KiB
Vue
311 lines
10 KiB
Vue
<template>
|
|
<Stack gap="0">
|
|
<!-- Loading -->
|
|
<Section v-if="isLoading" variant="plain" paddingY="lg">
|
|
<Stack align="center" justify="center" gap="4">
|
|
<Spinner />
|
|
<Text tone="muted">{{ t('catalogHub.states.loading') }}</Text>
|
|
</Stack>
|
|
</Section>
|
|
|
|
<!-- Error / Not Found -->
|
|
<Section v-else-if="!hub" variant="plain" paddingY="lg">
|
|
<Card padding="lg">
|
|
<Stack align="center" gap="4">
|
|
<IconCircle tone="primary">
|
|
<Icon name="lucide:map-pin" size="24" />
|
|
</IconCircle>
|
|
<Heading :level="2">{{ t('catalogHub.not_found.title') }}</Heading>
|
|
<Text tone="muted">{{ t('catalogHub.not_found.subtitle') }}</Text>
|
|
<Button @click="navigateTo(localePath('/catalog'))">
|
|
{{ t('catalogHub.actions.back_to_catalog') }}
|
|
</Button>
|
|
</Stack>
|
|
</Card>
|
|
</Section>
|
|
|
|
<template v-else>
|
|
<!-- Map Hero -->
|
|
<MapHero
|
|
:title="hub.name"
|
|
:location="mapLocation"
|
|
:badges="hubBadges"
|
|
/>
|
|
|
|
<!-- Offers Section -->
|
|
<Section v-if="offers.length > 0" variant="plain" paddingY="md">
|
|
<Stack gap="4">
|
|
<Heading :level="2">{{ t('catalogHub.sections.offers.title') }}</Heading>
|
|
<Grid :cols="1" :md="2" :lg="3" :gap="4">
|
|
<OfferCard
|
|
v-for="offer in offers"
|
|
:key="offer.uuid"
|
|
:offer="offer"
|
|
/>
|
|
</Grid>
|
|
</Stack>
|
|
</Section>
|
|
|
|
<!-- Empty offers state -->
|
|
<Section v-else variant="plain" paddingY="md">
|
|
<Card padding="lg">
|
|
<Stack align="center" gap="4">
|
|
<IconCircle tone="primary">
|
|
<Icon name="lucide:package-x" size="24" />
|
|
</IconCircle>
|
|
<Heading :level="3">{{ t('catalogHub.empty.offers.title') }}</Heading>
|
|
<Text tone="muted" align="center">
|
|
{{ t('catalogHub.empty.offers.subtitle') }}
|
|
</Text>
|
|
</Stack>
|
|
</Card>
|
|
</Section>
|
|
|
|
<!-- Suppliers Section -->
|
|
<Section v-if="uniqueSuppliers.length > 0" variant="plain" paddingY="md">
|
|
<Stack gap="4">
|
|
<Heading :level="2">{{ t('catalogHub.sections.suppliers.title') }}</Heading>
|
|
<Grid :cols="1" :md="2" :lg="3" :gap="4">
|
|
<SupplierCard
|
|
v-for="supplier in uniqueSuppliers"
|
|
:key="supplier.teamUuid"
|
|
:supplier="supplier"
|
|
/>
|
|
</Grid>
|
|
</Stack>
|
|
</Section>
|
|
|
|
<!-- Products Section -->
|
|
<Section v-if="uniqueProducts.length > 0" variant="plain" paddingY="md">
|
|
<Stack gap="4">
|
|
<Heading :level="2">{{ t('catalogHub.sections.products.title') }}</Heading>
|
|
<Stack direction="row" gap="2" wrap>
|
|
<NuxtLink
|
|
v-for="product in uniqueProducts"
|
|
:key="product.uuid"
|
|
:to="localePath(`/catalog/products/${product.uuid}`)"
|
|
>
|
|
<Pill variant="primary" class="hover:bg-primary hover:text-white transition-colors cursor-pointer">
|
|
{{ product.name }}
|
|
</Pill>
|
|
</NuxtLink>
|
|
</Stack>
|
|
</Stack>
|
|
</Section>
|
|
|
|
<!-- Nearby Connections -->
|
|
<NearbyConnectionsSection
|
|
:auto-edges="autoEdges"
|
|
:rail-edges="railEdges"
|
|
:hub="currentHubForMap"
|
|
:rail-hub="railHubForMap"
|
|
:auto-route-geometries="autoRouteGeometries"
|
|
:rail-route-geometries="railRouteGeometries"
|
|
/>
|
|
|
|
</template>
|
|
</Stack>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { GetLocationOffersDocument, GetSupplierProfilesDocument } from '~/composables/graphql/public/exchange-generated'
|
|
import { GetNodeConnectionsDocument, GetAutoRouteDocument, GetRailRouteDocument } from '~/composables/graphql/public/geo-generated'
|
|
import type { EdgeType } from '~/composables/graphql/public/geo-generated'
|
|
|
|
interface RouteGeometry {
|
|
toUuid: string
|
|
coordinates: [number, number][]
|
|
}
|
|
|
|
const route = useRoute()
|
|
const localePath = useLocalePath()
|
|
const { t } = useI18n()
|
|
|
|
const isLoading = ref(true)
|
|
const hub = ref<any>(null)
|
|
const railHub = ref<any>(null)
|
|
const offers = ref<any[]>([])
|
|
const allSuppliers = ref<any[]>([])
|
|
const autoEdges = ref<EdgeType[]>([])
|
|
const railEdges = ref<EdgeType[]>([])
|
|
const autoRouteGeometries = ref<RouteGeometry[]>([])
|
|
const railRouteGeometries = ref<RouteGeometry[]>([])
|
|
|
|
const hubId = computed(() => route.params.id as string)
|
|
|
|
// Map location
|
|
const mapLocation = computed(() => ({
|
|
uuid: hub.value?.uuid,
|
|
name: hub.value?.name,
|
|
latitude: hub.value?.latitude,
|
|
longitude: hub.value?.longitude,
|
|
country: hub.value?.country,
|
|
countryCode: hub.value?.countryCode
|
|
}))
|
|
|
|
// Badges for MapHero
|
|
const hubBadges = computed(() => {
|
|
const badges: Array<{ icon?: string; text: string }> = []
|
|
if (hub.value?.country) {
|
|
badges.push({ icon: 'lucide:globe', text: hub.value.country })
|
|
}
|
|
if (offers.value.length > 0) {
|
|
badges.push({ icon: 'lucide:package', text: t('catalogHub.badges.offers', { count: offers.value.length }) })
|
|
}
|
|
if (hub.value?.latitude && hub.value?.longitude) {
|
|
badges.push({ icon: 'lucide:map-pin', text: `${hub.value.latitude.toFixed(2)}°, ${hub.value.longitude.toFixed(2)}°` })
|
|
}
|
|
return badges
|
|
})
|
|
|
|
// Unique suppliers
|
|
const uniqueSuppliers = computed(() => {
|
|
const suppliers = new Map<string, { teamUuid: string; name: string; offersCount: number }>()
|
|
offers.value.forEach(offer => {
|
|
if (offer.teamUuid) {
|
|
const existing = suppliers.get(offer.teamUuid)
|
|
const supplierInfo = allSuppliers.value.find(s => s.teamUuid === offer.teamUuid)
|
|
if (existing) {
|
|
existing.offersCount++
|
|
} else {
|
|
suppliers.set(offer.teamUuid, {
|
|
teamUuid: offer.teamUuid,
|
|
name: supplierInfo?.name || t('catalogHub.labels.default_supplier'),
|
|
offersCount: 1
|
|
})
|
|
}
|
|
}
|
|
})
|
|
return Array.from(suppliers.values())
|
|
})
|
|
|
|
// Unique products
|
|
const uniqueProducts = computed(() => {
|
|
const products = new Map<string, { uuid: string; name: string }>()
|
|
offers.value.forEach(offer => {
|
|
offer.lines?.forEach((line: any) => {
|
|
if (line?.productUuid && line?.productName) {
|
|
products.set(line.productUuid, { uuid: line.productUuid, name: line.productName })
|
|
}
|
|
})
|
|
})
|
|
return Array.from(products.values())
|
|
})
|
|
|
|
// Current hub for NearbyConnectionsSection
|
|
const currentHubForMap = computed(() => ({
|
|
uuid: hub.value?.uuid || '',
|
|
name: hub.value?.name || '',
|
|
latitude: hub.value?.latitude || 0,
|
|
longitude: hub.value?.longitude || 0
|
|
}))
|
|
|
|
const railHubForMap = computed(() => ({
|
|
uuid: railHub.value?.uuid || hub.value?.uuid || '',
|
|
name: railHub.value?.name || hub.value?.name || '',
|
|
latitude: railHub.value?.latitude || hub.value?.latitude || 0,
|
|
longitude: railHub.value?.longitude || hub.value?.longitude || 0
|
|
}))
|
|
|
|
// Load route geometries for edges
|
|
const loadRouteGeometries = async (
|
|
edges: EdgeType[],
|
|
hubLat: number,
|
|
hubLon: number,
|
|
transportType: 'auto' | 'rail'
|
|
): Promise<RouteGeometry[]> => {
|
|
const RouteDocument = transportType === 'auto' ? GetAutoRouteDocument : GetRailRouteDocument
|
|
const routeField = transportType === 'auto' ? 'autoRoute' : 'railRoute'
|
|
|
|
const filteredEdges = edges
|
|
.filter(e => e?.transportType === transportType && e?.toLatitude && e?.toLongitude)
|
|
.sort((a, b) => (a.distanceKm || 0) - (b.distanceKm || 0))
|
|
.slice(0, 12)
|
|
|
|
const routePromises = filteredEdges.map(async (edge) => {
|
|
try {
|
|
const { data: routeDataResponse } = await useServerQuery(
|
|
`hub-route-${transportType}-${edge.toUuid}`,
|
|
RouteDocument,
|
|
{
|
|
fromLat: hubLat,
|
|
fromLon: hubLon,
|
|
toLat: edge.toLatitude!,
|
|
toLon: edge.toLongitude!
|
|
},
|
|
'public',
|
|
'geo'
|
|
)
|
|
|
|
const routeData = routeDataResponse.value?.[routeField]
|
|
if (routeData?.geometry) {
|
|
const geometryArray = typeof routeData.geometry === 'string'
|
|
? JSON.parse(routeData.geometry)
|
|
: routeData.geometry
|
|
|
|
if (Array.isArray(geometryArray) && geometryArray.length > 0) {
|
|
return {
|
|
toUuid: edge.toUuid!,
|
|
coordinates: geometryArray as [number, number][]
|
|
}
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error(`Failed to load ${transportType} route to ${edge.toName}:`, error)
|
|
}
|
|
return null
|
|
})
|
|
|
|
const results = await Promise.all(routePromises)
|
|
return results.filter(Boolean) as RouteGeometry[]
|
|
}
|
|
|
|
try {
|
|
const [{ data: connectionsData }, { data: offersData }, { data: suppliersData }] = await Promise.all([
|
|
useServerQuery('hub-connections', GetNodeConnectionsDocument, { uuid: hubId.value }, 'public', 'geo'),
|
|
useServerQuery('hub-offers', GetLocationOffersDocument, { locationUuid: hubId.value }, 'public', 'exchange'),
|
|
useServerQuery('hub-suppliers', GetSupplierProfilesDocument, {}, 'public', 'exchange')
|
|
])
|
|
|
|
const connectionsResult = connectionsData.value
|
|
hub.value = connectionsResult?.nodeConnections?.hub || null
|
|
railHub.value = connectionsResult?.nodeConnections?.railNode || null
|
|
offers.value = offersData.value?.getOffers || []
|
|
allSuppliers.value = suppliersData.value?.getSupplierProfiles || []
|
|
autoEdges.value = (connectionsResult?.nodeConnections?.autoEdges || []).filter((e): e is EdgeType => e !== null)
|
|
railEdges.value = (connectionsResult?.nodeConnections?.railEdges || []).filter((e): e is EdgeType => e !== null)
|
|
|
|
if (hub.value?.latitude && hub.value?.longitude) {
|
|
const railOrigin = railHub.value || hub.value
|
|
const [autoGeometries, railGeometries] = await Promise.all([
|
|
loadRouteGeometries(autoEdges.value, hub.value.latitude, hub.value.longitude, 'auto'),
|
|
loadRouteGeometries(railEdges.value, railOrigin.latitude, railOrigin.longitude, 'rail')
|
|
])
|
|
autoRouteGeometries.value = autoGeometries
|
|
railRouteGeometries.value = railGeometries
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading hub:', error)
|
|
} finally {
|
|
isLoading.value = false
|
|
}
|
|
|
|
// SEO
|
|
useHead(() => ({
|
|
title: hub.value?.name
|
|
? t('catalogHub.meta.title_with_name', { name: hub.value.name })
|
|
: t('catalogHub.meta.title'),
|
|
meta: [
|
|
{
|
|
name: 'description',
|
|
content: t('catalogHub.meta.description', {
|
|
name: hub.value?.name || '',
|
|
country: hub.value?.country || '',
|
|
offers: offers.value.length,
|
|
suppliers: uniqueSuppliers.value.length
|
|
})
|
|
}
|
|
]
|
|
}))
|
|
</script>
|