From 8ab296b675970bee02881042c51f488e10c8111a Mon Sep 17 00:00:00 2001 From: VPN SaaS Dev Date: Sat, 16 May 2026 22:04:00 +0900 Subject: [PATCH] compact vehicle card passport --- web/index.html | 13 ++--- web/static/app.js | 116 +++++++++++++++++++++++++++++++++++------- web/static/styles.css | 42 +++++++++++++++ 3 files changed, 145 insertions(+), 26 deletions(-) diff --git a/web/index.html b/web/index.html index 0128fbe..676d456 100644 --- a/web/index.html +++ b/web/index.html @@ -80,21 +80,16 @@
- Profile quality + Качество данных Старт
-
- Verified history +
+ История и ТО Self-reported -
-
- Maintenance health - Unknown + Unknown
-
-
Готов к работе
diff --git a/web/static/app.js b/web/static/app.js index 0893dfd..e5b89b8 100644 --- a/web/static/app.js +++ b/web/static/app.js @@ -313,6 +313,9 @@ const state = { selectedCarId: null, latestFuel: [], latestService: [], + latestFuelAllTime: [], + latestServiceAllTime: [], + selectedCarHighlights: null, latestExpenses: [], latestStats: null, allStats: null, @@ -329,7 +332,6 @@ const state = { connectedServices: [], adminPendingServices: [], vehicleScore: null, - vehicleTimeline: [], achievements: [], receiptFile: null, serviceWorkerRegistration: null, @@ -901,10 +903,11 @@ function renderCars() { .map( (car) => ` `, @@ -917,6 +920,84 @@ function renderCars() { }); } +function renderSelectedCarHighlights(car) { + const highlights = state.selectedCarHighlights?.carId === car.id ? state.selectedCarHighlights : buildCarHighlights(car, [], []); + const rows = [ + ["Одометр", highlights.odometer], + ["Заправка", highlights.lastFuel], + ["Масло", highlights.lastOil], + ["До масла", highlights.oilRemaining], + ]; + return ` + + ${rows + .map( + ([label, value]) => ` + + ${label} + ${escapeHtml(value)} + + `, + ) + .join("")} + + `; +} + +function buildCarHighlights(car, fuelEntries, serviceEntries) { + const currentOdometer = Number(car?.current_odometer || 0); + const lastFuel = fuelEntries[0] || null; + const lastOil = serviceEntries.find(isOilService) || null; + const oilDueOdometer = oilDueKm(car, lastOil); + const oilRemainingKm = oilDueOdometer != null && car?.current_odometer != null + ? oilDueOdometer - currentOdometer + : null; + return { + carId: car?.id, + odometer: car?.current_odometer != null ? `${formatKm(car.current_odometer)}` : "-", + lastFuel: lastFuel ? `${formatShortDate(lastFuel.entry_date)} · ${formatLiters(lastFuel.liters)}` : "-", + lastOil: lastOil ? formatShortDate(lastOil.entry_date) : "-", + oilRemaining: formatOilRemaining(oilRemainingKm), + }; +} + +function isOilService(item) { + const text = [item?.title, item?.category, item?.notes, item?.service_type].filter(Boolean).join(" ").toLowerCase(); + return /масл|oil|engine_oil/.test(text); +} + +function oilDueKm(car, latestOil) { + if (latestOil?.next_due_odometer != null) return Number(latestOil.next_due_odometer); + const interval = Number(car?.oil_change_interval_km || 0); + if (!interval) return null; + if (latestOil?.odometer != null) return Number(latestOil.odometer) + interval; + if (car?.current_odometer != null) return Number(car.current_odometer) + interval; + return null; +} + +function formatKm(value) { + if (value == null || value === "") return "-"; + return `${Number(value).toLocaleString("ru-RU")} км`; +} + +function formatLiters(value) { + if (value == null || value === "") return "-"; + return `${Number(value).toLocaleString("ru-RU", { maximumFractionDigits: 1 })} л`; +} + +function formatShortDate(value) { + if (!value) return "-"; + const date = new Date(value); + if (Number.isNaN(date.getTime())) return String(value).slice(0, 10); + return date.toLocaleDateString("ru-RU", { day: "2-digit", month: "2-digit", year: "2-digit" }); +} + +function formatOilRemaining(value) { + if (value == null || Number.isNaN(value)) return "-"; + if (value < 0) return `просрочено ${formatKm(Math.abs(value))}`; + return formatKm(value); +} + function setInputValue(form, name, value) { if (!form?.elements[name]) return; const input = form.elements[name]; @@ -1902,11 +1983,9 @@ function updateScore() { ring.style.background = `conic-gradient(#5ee0bd ${score * 3.6}deg, rgba(255,255,255,0.12) 0deg)`; } document.querySelector("#scoreHint").textContent = car - ? "Качество паспорта растет от подтвержденных данных, сервисной истории и точного пробега." + ? "Короткая сводка по полноте данных и готовности к обслуживанию." : t("Добавь авто и первую запись, чтобы видеть точные отчеты"); renderScoreActions(state.vehicleScore?.missing_items || []); - renderAchievements(); - renderVehicleTimeline(); } function scoreLabel(quality, score) { @@ -1938,9 +2017,9 @@ function healthLabel(status) { function renderScoreActions(items) { const root = document.querySelector("#scoreActions"); if (!root) return; - const visible = items.slice(0, 3); + const visible = items.slice(0, 1); if (!visible.length) { - root.innerHTML = `
Паспорт выглядит надежно. Следующий рост даст подтвержденная сервисная история.
`; + root.innerHTML = `
Паспорт готов: ключевые данные, история и ТО собраны достаточно для пилота.
`; return; } root.innerHTML = visible @@ -2339,6 +2418,7 @@ async function applyInitialRoute() { async function selectCar(carId) { state.selectedCarId = carId; + state.selectedCarHighlights = null; renderCars(); fillCarProfileForm(); await loadSelectedCar(); @@ -2348,17 +2428,19 @@ async function loadSelectedCar() { if (!state.selectedCarId) { state.latestFuel = []; state.latestService = []; + state.latestFuelAllTime = []; + state.latestServiceAllTime = []; + state.selectedCarHighlights = null; state.latestExpenses = []; state.latestStats = null; state.allStats = null; state.analytics = null; state.vehicleScore = null; - state.vehicleTimeline = []; state.achievements = []; renderStats(null); return; } - const [stats, allStats, fuel, service, expenses, analytics, vehicleScore] = await Promise.all([ + const [stats, allStats, fuel, service, expenses, analytics, vehicleScore, allFuel, allService] = await Promise.all([ api(`/cars/${state.selectedCarId}/stats${periodQuery()}`), api(`/cars/${state.selectedCarId}/stats${allPeriodQuery()}`), api(`/cars/${state.selectedCarId}/fuel${periodQuery()}`), @@ -2366,20 +2448,20 @@ async function loadSelectedCar() { api(`/cars/${state.selectedCarId}/expenses${periodQuery()}`), api(`/cars/${state.selectedCarId}/analytics`), api(`/my/vehicles/${state.selectedCarId}/score`), - ]); - const [timeline, achievements] = await Promise.all([ - api(`/my/vehicles/${state.selectedCarId}/timeline?limit=30`), - api("/me/achievements"), + api(`/cars/${state.selectedCarId}/fuel?limit=1`), + api(`/cars/${state.selectedCarId}/service?limit=100`), ]); state.latestStats = stats; state.allStats = allStats; state.latestFuel = fuel; state.latestService = service; + state.latestFuelAllTime = allFuel; + state.latestServiceAllTime = allService; state.latestExpenses = expenses; state.analytics = analytics; state.vehicleScore = vehicleScore; - state.vehicleTimeline = timeline; - state.achievements = achievements; + state.selectedCarHighlights = buildCarHighlights(selectedCar(), allFuel, allService); + renderCars(); renderStats(stats); drawCharts(fuel, service, stats); } diff --git a/web/static/styles.css b/web/static/styles.css index 460afd7..27bf62c 100644 --- a/web/static/styles.css +++ b/web/static/styles.css @@ -70,6 +70,7 @@ body.auth-required .shell { } .passport-head small, +.passport-metric small, .passport-metric span, .passport-action span, .achievement-card span, @@ -134,6 +135,11 @@ body.auth-required .shell { font-size: 14px; } +.passport-metric-combo small { + display: block; + margin-top: 2px; +} + .passport-grid, .passport-actions, .achievement-strip { @@ -816,6 +822,36 @@ select:disabled { color: var(--muted); } +.car-key-params { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 6px; + margin-top: 9px; +} + +.car-key-param { + display: grid; + gap: 2px; + min-width: 0; + padding: 7px; + border: 1px solid var(--line); + border-radius: 8px; + background: rgba(255, 255, 255, 0.78); +} + +.car-key-param span { + color: var(--muted); + font-size: 11px; + line-height: 1.2; +} + +.car-key-param strong { + color: var(--text); + font-size: 12px; + line-height: 1.25; + overflow-wrap: anywhere; +} + .car-item.active { border-color: rgba(22, 128, 106, 0.48); background: #e5f4ef; @@ -2159,6 +2195,12 @@ select { white-space: nowrap; } + .car-key-param strong { + white-space: normal; + overflow: visible; + text-overflow: clip; + } + .passport-head { display: grid; grid-template-columns: 1fr auto;