Compare commits

...

2 Commits

Author SHA1 Message Date
Ruslan Bakiev
0337cebc63 Simplify OfferResultCard and use daisyUI Steps
All checks were successful
Build Docker Image / build (push) Successful in 4m42s
- Remove sourceName, latitude, longitude props from OfferResultCard
- Remove LocationMiniMap component (not needed, main map is on the side)
- Convert RouteStepper to use daisyUI steps-horizontal
- Update hub page and CalcResultContent to remove unused props
2026-01-15 00:33:17 +07:00
Ruslan Bakiev
f03554893b Update OfferResultCard: add location, mini map, fix price format
All checks were successful
Build Docker Image / build (push) Successful in 4m30s
- Remove distance from right side (shown in stepper)
- Change price format to symbol + formatted number (e.g. $1,200/тонна)
- Add locationName prop for displaying offer location
- Add LocationMiniMap component for showing point on map
- Update hub page and CalcResultContent to pass coordinates
2026-01-15 00:07:21 +07:00
4 changed files with 46 additions and 30 deletions

View File

@@ -20,12 +20,11 @@
<OfferResultCard
v-for="option in productRouteOptions"
:key="option.sourceUuid"
:source-name="option.sourceName || 'Склад'"
:location-name="getOfferData(option.sourceUuid)?.locationName"
:product-name="productName"
:price-per-unit="getOfferData(option.sourceUuid)?.pricePerUnit"
:currency="getOfferData(option.sourceUuid)?.currency"
:unit="getOfferData(option.sourceUuid)?.unit"
:total-distance="option.distanceKm || 0"
:stages="getRouteStages(option)"
/>
</div>

View File

@@ -1,17 +1,14 @@
<template>
<Card padding="md" interactive @click="$emit('select')">
<!-- Header: Source + Price -->
<div class="flex items-start justify-between mb-2">
<!-- Header: Location + Price -->
<div class="flex items-start justify-between mb-3">
<div>
<Text weight="semibold">{{ sourceName }}</Text>
<Text weight="semibold">{{ locationName || 'Локация' }}</Text>
<Text v-if="productName" tone="muted" size="sm">{{ productName }}</Text>
</div>
<div class="text-right">
<Text v-if="priceDisplay" weight="semibold" class="text-primary text-lg">
{{ priceDisplay }}
</Text>
<Text tone="muted" size="sm">{{ formatDistance(totalDistance) }} км</Text>
</div>
<Text v-if="priceDisplay" weight="semibold" class="text-primary text-lg">
{{ priceDisplay }}
</Text>
</div>
<!-- Route stepper -->
@@ -23,12 +20,11 @@
import type { RouteStage } from './RouteStepper.vue'
const props = withDefaults(defineProps<{
sourceName: string
locationName?: string
productName?: string
pricePerUnit?: number | null
currency?: string | null
unit?: string | null
totalDistance: number
stages?: RouteStage[]
}>(), {
stages: () => []
@@ -40,13 +36,33 @@ defineEmits<{
const priceDisplay = computed(() => {
if (!props.pricePerUnit) return null
const curr = props.currency || 'USD'
const u = props.unit || 'т'
return `${props.pricePerUnit} ${curr}/${u}`
const currSymbol = getCurrencySymbol(props.currency)
const unitName = getUnitName(props.unit)
const formattedPrice = props.pricePerUnit.toLocaleString()
return `${currSymbol}${formattedPrice}/${unitName}`
})
const formatDistance = (km?: number | null) => {
if (!km) return '0'
return Math.round(km).toLocaleString()
const getCurrencySymbol = (currency?: string | null) => {
switch (currency?.toUpperCase()) {
case 'USD': return '$'
case 'EUR': return '€'
case 'RUB': return '₽'
case 'CNY': return '¥'
default: return '$'
}
}
const getUnitName = (unit?: string | null) => {
switch (unit?.toLowerCase()) {
case 'т':
case 'ton':
case 'tonne':
return 'тонна'
case 'кг':
case 'kg':
return 'кг'
default:
return 'тонна'
}
}
</script>

View File

@@ -1,13 +1,14 @@
<template>
<div class="flex items-center gap-1 flex-wrap text-xs">
<template v-for="(stage, index) in stages" :key="index">
<div v-if="index > 0" class="w-3 h-px bg-base-300" />
<div class="flex items-center gap-0.5">
<span>{{ getTransportIcon(stage.transportType) }}</span>
<span class="text-base-content/70">{{ formatDistance(stage.distanceKm) }}км</span>
</div>
</template>
</div>
<ul class="steps steps-horizontal text-xs w-full">
<li
v-for="(stage, index) in stages"
:key="index"
class="step step-primary"
:data-content="getTransportIcon(stage.transportType)"
>
{{ formatDistance(stage.distanceKm) }} км
</li>
</ul>
</template>
<script setup lang="ts">
@@ -27,6 +28,7 @@ const getTransportIcon = (type?: string | null) => {
case 'sea':
return '🚢'
case 'road':
case 'auto':
default:
return '🚛'
}

View File

@@ -60,12 +60,11 @@
<template #card="{ item }">
<OfferResultCard
:source-name="item.name"
:location-name="getOfferData(item.uuid)?.locationName"
:product-name="selectedProductName"
:price-per-unit="getOfferData(item.uuid)?.pricePerUnit"
:currency="getOfferData(item.uuid)?.currency"
:unit="getOfferData(item.uuid)?.unit"
:total-distance="item.distanceKm"
:stages="item.stages"
/>
</template>