Cars: create a car from a manufacturer service, with a per-car data tab
A car can now be imported straight from the account its owner already has
with the manufacturer, and every reading that service exposes shows up on
the car's own tab. MyToyota is the first provider.
API Server — internal/api/vehicleproviders.go adds a generic layer over a
plugin that can enumerate vehicles and read data about them. Adding the
next manufacturer is one vehicleSource adapter plus a line in
vehicleSources(): no new endpoints, no Web App changes.
GET /api/vehicle-providers providers + connect state
GET /api/vehicle-providers/{p}/vehicles the caller's vehicles
POST /api/vehicle-providers/{p}/import create a car from one
GET /api/cars/{id}/provider live snapshot for the tab
POST /api/cars/{id}/provider link / unlink a car
POST /api/cars/{id}/provider/sync re-apply provider data
Two properties shape it. Credentials are always the caller's own, resolved
through the same global -> org -> user cascade as the integration settings,
so a shared car shows provider data only when that vehicle is on the
viewer's account — the owner's credentials are never borrowed. And upstream
shapes are not modelled: these are unofficial APIs, so the layer searches
payloads by key name for the readings worth promoting (odometer, fuel,
battery, range) and flattens the rest to dotted key/value pairs alongside
the raw JSON. A renamed field costs one blank value, not a broken page.
The Toyota gate and its wording now live in toyotaSource, so the older
/api/integrations/toyota/vehicles endpoint and the new ones cannot drift.
Manager.InvokeBatchWith shares one transient plugin instance across a batch
of actions. The tab pulls seven capabilities, and InvokeWith builds a fresh
instance per call — which for a connector that authenticates lazily means a
fresh OAuth login per call. Batching logs in once.
cars gains provider + provider_vehicle_id (schema.go and
setup-pocketbase.mjs both). carPayload deliberately omits them, so an
ordinary car edit can neither reassign the car nor break its link;
carProviderPayload writes the link on its own.
Web App — Dashboard grows an "import from service" button beside "add car",
shown only once an account is connected, opening CarImportModal: pick the
vehicle, choose what to pull (identity / fuel type / dates / odometer, all
on by default), import. ProviderPanel becomes the car's first tab, ahead of
Information, labelled with the service: headline readings, the vehicle
record, one card per capability with its raw response, and an offer to take
the provider's odometer when it is ahead of the stored one. On an unlinked
car the tab instead offers to link it, VIN-matched. Info stays the default
selection — landing on the provider tab would fire a login on every car
page view. Full en/pl/da translations.
Tests cover the payload walking, Toyota normalization, import-selection
defaults, and — through the real handler chain against a stand-in
PocketBase — that every route is registered and that a closed gate is soft
on a listing (200 + a reason the UI can show) but hard on a write (4xx, so
a caller cannot read the reply as a created car).
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
tajniak81
co-authored by
Claude Opus 5
Claude Opus 5
parent
47a9aef466
commit
358ee68f94
@@ -231,6 +231,35 @@ export const api = {
|
||||
saveToyota: (body) => request("/integrations/toyota", { method: "PUT", body: JSON.stringify(body) }),
|
||||
testToyota: () => request("/integrations/toyota/health", { method: "POST" }),
|
||||
|
||||
// Vehicle providers — manufacturer services a car can be created from, and the
|
||||
// data feed behind a car's provider tab. Every call runs server-side under the
|
||||
// caller's *own* connected account (the same cascade the Settings integrations
|
||||
// use), so a car shared from someone else only shows provider data when that
|
||||
// vehicle is on this user's account too.
|
||||
//
|
||||
// listVehicleProviders reports each provider with a `connected` flag and, when
|
||||
// it isn't, a `detail` sentence explaining what to do about it — the list is
|
||||
// never an error, so the UI can offer "connect in Settings" instead.
|
||||
listVehicleProviders: () => request("/vehicle-providers").then((r) => r.providers),
|
||||
listProviderVehicles: (provider) =>
|
||||
request(`/vehicle-providers/${encodeURIComponent(provider)}/vehicles`),
|
||||
// include selects what to pull; omit it entirely to fetch everything available.
|
||||
importProviderVehicle: (provider, body) =>
|
||||
request(`/vehicle-providers/${encodeURIComponent(provider)}/import`, {
|
||||
method: "POST",
|
||||
body: JSON.stringify(body),
|
||||
}),
|
||||
|
||||
// One car's live provider snapshot: the vehicle record, headline readings, and
|
||||
// every section the plugin can fetch (each with its flattened fields and the
|
||||
// raw payload). linkCarProvider attaches an existing car to a vehicle — pass an
|
||||
// empty provider to detach; syncCarProvider re-applies provider data to the car.
|
||||
getCarProvider: (carId) => request(`/cars/${carId}/provider`),
|
||||
linkCarProvider: (carId, body) =>
|
||||
request(`/cars/${carId}/provider`, { method: "POST", body: JSON.stringify(body) }),
|
||||
syncCarProvider: (carId, body = {}) =>
|
||||
request(`/cars/${carId}/provider/sync`, { method: "POST", body: JSON.stringify(body) }),
|
||||
|
||||
// Anker Solix (V1 Smart EV Charger) — same cascade as Toyota. getAnkerSolix
|
||||
// returns the resolved view (effective/own/locked per field, secrets and
|
||||
// inherited emails masked); saveAnkerSolix writes the caller's editable layer;
|
||||
|
||||
@@ -0,0 +1,217 @@
|
||||
<script setup>
|
||||
// Create a car from a vehicle on a connected manufacturer account (MyToyota
|
||||
// today; the endpoints are generic, so the next provider needs no changes here).
|
||||
//
|
||||
// The three steps are one screen on purpose: with a single connected service and
|
||||
// one car on it, importing is two clicks — pick the vehicle, press Import — and
|
||||
// the data checkboxes are there for the person who would rather type the plate
|
||||
// themselves. Everything is checked by default, because "fetch what you can" is
|
||||
// what someone importing a car is asking for.
|
||||
import { ref, computed, onMounted, watch } from "vue";
|
||||
import { api } from "../api";
|
||||
import { t } from "../i18n";
|
||||
import Modal from "./Modal.vue";
|
||||
|
||||
const emit = defineEmits(["saved", "close", "open-car"]);
|
||||
|
||||
const providers = ref([]);
|
||||
const provider = ref("");
|
||||
const vehicles = ref([]);
|
||||
const selectedId = ref("");
|
||||
const name = ref("");
|
||||
const loading = ref(true);
|
||||
const loadingVehicles = ref(false);
|
||||
const importing = ref(false);
|
||||
const error = ref("");
|
||||
// Why the provider can't be used right now (not connected, org switch off, …).
|
||||
// The server phrases this; the UI just shows it.
|
||||
const detail = ref("");
|
||||
|
||||
// Every group on by default — see the note above.
|
||||
const include = ref({ identity: true, fuelType: true, dates: true, odometer: true });
|
||||
|
||||
const connected = computed(() => providers.value.filter((p) => p.connected));
|
||||
const current = computed(() => providers.value.find((p) => p.id === provider.value) || null);
|
||||
const selected = computed(() => vehicles.value.find((v) => v.id === selectedId.value) || null);
|
||||
const canImport = computed(() => !!selected.value && !selected.value.linkedCarId && !importing.value);
|
||||
|
||||
async function loadProviders() {
|
||||
loading.value = true;
|
||||
error.value = "";
|
||||
try {
|
||||
providers.value = await api.listVehicleProviders();
|
||||
provider.value = connected.value[0]?.id || providers.value[0]?.id || "";
|
||||
} catch (e) {
|
||||
error.value = e.message;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadVehicles() {
|
||||
vehicles.value = [];
|
||||
selectedId.value = "";
|
||||
detail.value = "";
|
||||
if (!provider.value) return;
|
||||
if (!current.value?.connected) {
|
||||
detail.value = current.value?.detail || "";
|
||||
return;
|
||||
}
|
||||
|
||||
loadingVehicles.value = true;
|
||||
error.value = "";
|
||||
try {
|
||||
const res = await api.listProviderVehicles(provider.value);
|
||||
vehicles.value = res.vehicles || [];
|
||||
detail.value = res.unavailable ? res.detail || "" : "";
|
||||
// Preselect the first vehicle that isn't in the garage already — with one
|
||||
// car on the account that is the whole selection step.
|
||||
selectedId.value = vehicles.value.find((v) => !v.linkedCarId)?.id || "";
|
||||
} catch (e) {
|
||||
error.value = e.message;
|
||||
} finally {
|
||||
loadingVehicles.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// The name field tracks the selected vehicle until the user types their own.
|
||||
const nameEdited = ref(false);
|
||||
watch(selected, (v) => {
|
||||
if (!nameEdited.value) name.value = v?.name || "";
|
||||
});
|
||||
watch(provider, loadVehicles);
|
||||
|
||||
function subtitle(v) {
|
||||
return [v.make, v.model, v.year || ""].filter(Boolean).join(" ");
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
if (!canImport.value) return;
|
||||
importing.value = true;
|
||||
error.value = "";
|
||||
try {
|
||||
const res = await api.importProviderVehicle(provider.value, {
|
||||
vehicleId: selected.value.id,
|
||||
name: name.value.trim(),
|
||||
include: include.value,
|
||||
});
|
||||
emit("saved", res.car, res.warnings || []);
|
||||
} catch (e) {
|
||||
error.value = e.message;
|
||||
} finally {
|
||||
importing.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await loadProviders();
|
||||
await loadVehicles();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal :title="t('forms.import.title')" @close="emit('close')">
|
||||
<p v-if="error" class="mb-3 rounded-control bg-danger-soft px-3 py-2 text-sm font-medium text-danger">{{ error }}</p>
|
||||
<p v-if="loading" class="text-sm text-muted">{{ t("common.loading") }}</p>
|
||||
|
||||
<template v-else-if="providers.length === 0">
|
||||
<p class="text-sm text-muted">{{ t("forms.import.noProviders") }}</p>
|
||||
<div class="mt-4 flex justify-end">
|
||||
<button type="button" class="dh-btn dh-btn-ghost" @click="emit('close')">{{ t("common.cancel") }}</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<form v-else class="space-y-4" @submit.prevent="submit">
|
||||
<p class="text-sm text-muted">{{ t("forms.import.subtitle") }}</p>
|
||||
|
||||
<!-- Service picker. Hidden while there is only one to pick. -->
|
||||
<div v-if="providers.length > 1">
|
||||
<label class="dh-label">{{ t("forms.import.service") }}</label>
|
||||
<select v-model="provider" class="dh-input">
|
||||
<option v-for="p in providers" :key="p.id" :value="p.id" :disabled="!p.connected">
|
||||
{{ p.label }}{{ p.connected ? "" : " — " + t("forms.import.notConnected") }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<p v-if="detail" class="rounded-control bg-warning-soft px-3 py-2 text-sm text-warning">{{ detail }}</p>
|
||||
|
||||
<!-- Vehicles on the account -->
|
||||
<div>
|
||||
<label class="dh-label">{{ t("forms.import.selectVehicle") }}</label>
|
||||
<p v-if="loadingVehicles" class="text-sm text-muted">{{ t("forms.import.loadingVehicles") }}</p>
|
||||
<p v-else-if="!detail && vehicles.length === 0" class="text-sm text-muted">{{ t("forms.import.noVehicles") }}</p>
|
||||
|
||||
<ul v-else-if="vehicles.length" class="space-y-2">
|
||||
<li v-for="v in vehicles" :key="v.id">
|
||||
<label
|
||||
class="flex cursor-pointer items-start gap-3 rounded-control border p-3 transition-colors"
|
||||
:class="selectedId === v.id ? 'border-accent bg-sunken' : 'border-subtle hover:bg-sunken'">
|
||||
<input
|
||||
v-model="selectedId"
|
||||
type="radio"
|
||||
:value="v.id"
|
||||
:disabled="!!v.linkedCarId"
|
||||
class="mt-1"
|
||||
/>
|
||||
<span class="min-w-0 flex-1">
|
||||
<span class="block truncate font-medium text-strong">{{ v.name }}</span>
|
||||
<span class="block truncate text-xs text-muted">{{ subtitle(v) }}</span>
|
||||
<span v-if="v.registration || v.vin" class="data mt-0.5 block truncate text-xs text-muted">
|
||||
{{ [v.registration, v.vin].filter(Boolean).join(" · ") }}
|
||||
</span>
|
||||
<span v-if="v.linkedCarId" class="mt-1 inline-flex items-center gap-2">
|
||||
<span class="dh-badge dh-badge-neutral">{{ t("forms.import.alreadyInGarage") }}</span>
|
||||
<button
|
||||
type="button"
|
||||
class="text-xs font-medium text-brandtext hover:underline"
|
||||
@click.prevent="emit('open-car', v.linkedCarId)">
|
||||
{{ t("common.open") }}
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<template v-if="selected">
|
||||
<div>
|
||||
<label class="dh-label">{{ t("forms.import.name") }}</label>
|
||||
<input v-model="name" required class="dh-input" @input="nameEdited = true" />
|
||||
</div>
|
||||
|
||||
<fieldset class="rounded-control border border-subtle p-3">
|
||||
<legend class="eyebrow px-1">{{ t("forms.import.dataTitle") }}</legend>
|
||||
<p class="mb-2 text-xs text-muted">{{ t("forms.import.dataHint") }}</p>
|
||||
<label class="flex items-center gap-2 py-1 text-sm text-body">
|
||||
<input v-model="include.identity" type="checkbox" />
|
||||
<span>{{ t("forms.import.includeIdentity") }}</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-2 py-1 text-sm text-body">
|
||||
<input v-model="include.fuelType" type="checkbox" />
|
||||
<span>{{ t("forms.import.includeFuelType") }}</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-2 py-1 text-sm text-body">
|
||||
<input v-model="include.dates" type="checkbox" />
|
||||
<span>{{ t("forms.import.includeDates") }}</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-2 py-1 text-sm text-body">
|
||||
<input v-model="include.odometer" type="checkbox" />
|
||||
<span>{{ t("forms.import.includeOdometer") }}</span>
|
||||
</label>
|
||||
<p class="mt-2 text-xs text-muted">
|
||||
{{ t("forms.import.moreData", { label: current?.label || "" }) }}
|
||||
</p>
|
||||
</fieldset>
|
||||
</template>
|
||||
|
||||
<div class="flex justify-end gap-2">
|
||||
<button type="button" class="dh-btn dh-btn-ghost" @click="emit('close')">{{ t("common.cancel") }}</button>
|
||||
<button type="submit" :disabled="!canImport" class="dh-btn dh-btn-primary">
|
||||
{{ importing ? t("forms.import.importing") : t("forms.import.submit") }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
</template>
|
||||
@@ -0,0 +1,342 @@
|
||||
<script setup>
|
||||
// The connected-service tab on a car: everything the manufacturer's own app
|
||||
// knows about it, fetched live.
|
||||
//
|
||||
// Two things shape what you see below. The data is read under *this* user's
|
||||
// account — so a car shared from someone else shows nothing here unless the
|
||||
// vehicle is on this user's account too, and the panel says so rather than
|
||||
// failing. And the sections are whatever the plugin exposes, rendered from the
|
||||
// server's flattened key/value pairs plus the raw payload: nothing here knows a
|
||||
// single upstream field name, so a provider adding a field surfaces it without a
|
||||
// change to this file.
|
||||
import { ref, computed, watch, onMounted } from "vue";
|
||||
import { api } from "../api";
|
||||
import { t } from "../i18n";
|
||||
import { formatDateTime, formatKm } from "../lib/format.js";
|
||||
|
||||
const props = defineProps({
|
||||
car: { type: Object, required: true },
|
||||
canWrite: { type: Boolean, default: false },
|
||||
// The provider's display name, already resolved by the parent for the tab
|
||||
// label. Passed in so the heading reads "MyToyota" from the first frame rather
|
||||
// than flashing the raw plugin name while the snapshot loads.
|
||||
providerLabel: { type: String, default: "" },
|
||||
});
|
||||
const emit = defineEmits(["car-updated"]);
|
||||
|
||||
const snap = ref(null);
|
||||
const loading = ref(false);
|
||||
const error = ref("");
|
||||
const syncing = ref(false);
|
||||
|
||||
// Connect flow, for a car that has no link yet (a car added by hand, or one from
|
||||
// before this feature existed).
|
||||
const providers = ref([]);
|
||||
const linkProvider = ref("");
|
||||
const linkVehicles = ref([]);
|
||||
const linkVehicleId = ref("");
|
||||
const linkLoading = ref(false);
|
||||
const linking = ref(false);
|
||||
|
||||
const linked = computed(() => !!props.car.provider);
|
||||
const label = computed(
|
||||
() => snap.value?.label || props.providerLabel || currentProvider.value?.label || props.car.provider || ""
|
||||
);
|
||||
const currentProvider = computed(() => providers.value.find((p) => p.id === linkProvider.value) || null);
|
||||
const connectable = computed(() => providers.value.filter((p) => p.connected));
|
||||
|
||||
// Sections that actually reported something come first; the empty and failed ones
|
||||
// still render, below, so it is clear they were asked and what came back.
|
||||
const sections = computed(() => snap.value?.sections || []);
|
||||
|
||||
async function load() {
|
||||
if (!linked.value) return;
|
||||
loading.value = true;
|
||||
error.value = "";
|
||||
try {
|
||||
snap.value = await api.getCarProvider(props.car.id);
|
||||
} catch (e) {
|
||||
error.value = e.message;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadProviders() {
|
||||
try {
|
||||
providers.value = await api.listVehicleProviders();
|
||||
linkProvider.value = connectable.value[0]?.id || "";
|
||||
} catch (e) {
|
||||
error.value = e.message;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadLinkVehicles() {
|
||||
linkVehicles.value = [];
|
||||
linkVehicleId.value = "";
|
||||
if (!linkProvider.value) return;
|
||||
linkLoading.value = true;
|
||||
try {
|
||||
const res = await api.listProviderVehicles(linkProvider.value);
|
||||
linkVehicles.value = res.vehicles || [];
|
||||
// Prefer the vehicle whose VIN matches the car — usually the only guess needed.
|
||||
const vin = (props.car.vin || "").trim().toUpperCase();
|
||||
const match = vin && linkVehicles.value.find((v) => (v.vin || "").toUpperCase() === vin);
|
||||
linkVehicleId.value = match?.id || linkVehicles.value[0]?.id || "";
|
||||
} catch (e) {
|
||||
error.value = e.message;
|
||||
} finally {
|
||||
linkLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
watch(linkProvider, loadLinkVehicles);
|
||||
|
||||
async function connect() {
|
||||
if (!linkVehicleId.value) return;
|
||||
linking.value = true;
|
||||
error.value = "";
|
||||
try {
|
||||
const car = await api.linkCarProvider(props.car.id, {
|
||||
provider: linkProvider.value,
|
||||
vehicleId: linkVehicleId.value,
|
||||
});
|
||||
emit("car-updated", car);
|
||||
await load();
|
||||
} catch (e) {
|
||||
error.value = e.message;
|
||||
} finally {
|
||||
linking.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function disconnect() {
|
||||
if (!confirm(t("car.provider.unlinkConfirm", { label: label.value }))) return;
|
||||
error.value = "";
|
||||
try {
|
||||
const car = await api.linkCarProvider(props.car.id, { provider: "", vehicleId: "" });
|
||||
snap.value = null;
|
||||
emit("car-updated", car);
|
||||
await loadProviders();
|
||||
await loadLinkVehicles();
|
||||
} catch (e) {
|
||||
error.value = e.message;
|
||||
}
|
||||
}
|
||||
|
||||
// Only the odometer is written back: it is the one provider reading the rest of
|
||||
// the app computes from (service intervals, km-triggered reminders), and it is
|
||||
// the one the user would otherwise retype after every drive.
|
||||
async function applyOdometer() {
|
||||
syncing.value = true;
|
||||
error.value = "";
|
||||
try {
|
||||
const res = await api.syncCarProvider(props.car.id, {
|
||||
include: { identity: false, fuelType: false, dates: false, odometer: true },
|
||||
});
|
||||
emit("car-updated", res.car);
|
||||
await load();
|
||||
} catch (e) {
|
||||
error.value = e.message;
|
||||
} finally {
|
||||
syncing.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function metricLabel(key) {
|
||||
return t(`car.provider.metrics.${key}`);
|
||||
}
|
||||
function sectionLabel(id) {
|
||||
return t(`car.provider.sections.${id}`);
|
||||
}
|
||||
function prettyJSON(raw) {
|
||||
try {
|
||||
return JSON.stringify(raw, null, 2);
|
||||
} catch {
|
||||
return String(raw);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
if (linked.value) {
|
||||
await load();
|
||||
} else {
|
||||
await loadProviders();
|
||||
await loadLinkVehicles();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section>
|
||||
<p v-if="error" class="mb-4 rounded-control bg-danger-soft px-4 py-3 text-sm font-medium text-danger">{{ error }}</p>
|
||||
|
||||
<!-- ── Linked: the live snapshot ─────────────────────────────────────── -->
|
||||
<template v-if="linked">
|
||||
<div class="mb-3 flex flex-wrap items-center justify-between gap-3">
|
||||
<div>
|
||||
<h2 class="text-lg font-bold tracking-[-0.02em] text-strong">{{ label }}</h2>
|
||||
<p class="text-sm text-muted">{{ t("car.provider.subtitle", { label }) }}</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="dh-btn dh-btn-ghost !px-3 !py-1.5" :disabled="loading" @click="load">
|
||||
{{ loading ? t("car.provider.refreshing") : t("car.provider.refresh") }}
|
||||
</button>
|
||||
<button v-if="canWrite" class="dh-btn dh-btn-ghost !px-3 !py-1.5 text-danger" @click="disconnect">
|
||||
{{ t("car.provider.unlink") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p v-if="loading && !snap" class="text-muted">{{ t("common.loading") }}</p>
|
||||
|
||||
<template v-else-if="snap">
|
||||
<!-- The provider can't be reached for this car: say why, don't fail. -->
|
||||
<div v-if="snap.unavailable" class="rounded-card border border-dashed border-default p-8 text-center">
|
||||
<p class="text-sm text-warning">{{ snap.detail }}</p>
|
||||
<p class="mt-2 text-xs text-muted">{{ t("car.provider.own") }}</p>
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<!-- Headline readings -->
|
||||
<div v-if="snap.metrics?.length" class="dh-card mb-4 p-6">
|
||||
<p class="eyebrow mb-3">{{ t("car.provider.readings") }}</p>
|
||||
<dl class="grid grid-cols-2 gap-4 text-sm sm:grid-cols-4">
|
||||
<div v-for="m in snap.metrics" :key="m.key">
|
||||
<dt class="eyebrow">{{ metricLabel(m.key) }}</dt>
|
||||
<dd class="mt-0.5 data text-lg font-bold text-strong">
|
||||
{{ m.value }}<span v-if="m.unit" class="ml-1 text-sm font-medium text-muted">{{ m.unit }}</span>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<!-- The provider's odometer is ahead of the stored one: offer to take it. -->
|
||||
<div
|
||||
v-if="snap.suggestedCurrentKm && canWrite"
|
||||
class="mb-4 flex flex-wrap items-center justify-between gap-3 rounded-control bg-sunken px-4 py-3">
|
||||
<p class="text-sm text-body">
|
||||
{{ t("car.provider.odometerSuggest", { label, km: formatKm(snap.suggestedCurrentKm) }) }}
|
||||
</p>
|
||||
<button class="dh-btn dh-btn-primary !px-3 !py-1.5" :disabled="syncing" @click="applyOdometer">
|
||||
{{ syncing ? t("car.provider.updatingOdometer") : t("car.provider.updateOdometer") }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- The vehicle record itself -->
|
||||
<div v-if="snap.vehicle" class="dh-card mb-4 p-6">
|
||||
<div class="flex flex-wrap items-start justify-between gap-4">
|
||||
<div>
|
||||
<p class="eyebrow">{{ t("car.provider.vehicle") }}</p>
|
||||
<p class="mt-0.5 font-bold text-strong">{{ snap.vehicle.name }}</p>
|
||||
<p class="text-sm text-muted">
|
||||
{{ [snap.vehicle.make, snap.vehicle.model, snap.vehicle.year || ''].filter(Boolean).join(' ') }}
|
||||
</p>
|
||||
<p v-if="snap.vehicle.vin" class="data mt-0.5 text-xs text-muted">{{ snap.vehicle.vin }}</p>
|
||||
</div>
|
||||
<img
|
||||
v-if="snap.vehicle.imageUrl"
|
||||
:src="snap.vehicle.imageUrl"
|
||||
alt=""
|
||||
class="h-20 max-w-full rounded-control object-contain"
|
||||
/>
|
||||
</div>
|
||||
<details v-if="snap.vehicle.fields?.length" class="mt-4">
|
||||
<summary class="cursor-pointer text-xs font-semibold text-brandtext hover:underline">
|
||||
{{ t("car.provider.allFields") }}
|
||||
</summary>
|
||||
<dl class="mt-3 divide-y divide-subtle text-sm">
|
||||
<div v-for="f in snap.vehicle.fields" :key="f.key" class="flex gap-4 py-1.5">
|
||||
<dt class="data w-1/2 shrink-0 break-all text-xs text-muted">{{ f.key }}</dt>
|
||||
<dd class="min-w-0 break-words text-body">{{ f.value }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- One card per capability the plugin exposes -->
|
||||
<div class="space-y-4">
|
||||
<div v-for="sec in sections" :key="sec.id" class="dh-card p-6">
|
||||
<div class="mb-3 flex items-center justify-between gap-3">
|
||||
<h3 class="font-semibold text-strong">{{ sectionLabel(sec.id) }}</h3>
|
||||
<span v-if="sec.status === 'error'" class="dh-badge dh-badge-warning">{{ sec.error }}</span>
|
||||
</div>
|
||||
|
||||
<p v-if="sec.status === 'empty'" class="text-sm text-muted">{{ t("car.provider.sectionEmpty") }}</p>
|
||||
|
||||
<template v-else-if="sec.status === 'ok'">
|
||||
<dl class="divide-y divide-subtle text-sm">
|
||||
<div v-for="f in sec.fields" :key="f.key" class="flex gap-4 py-1.5">
|
||||
<dt class="data w-1/2 shrink-0 break-all text-xs text-muted">{{ f.key }}</dt>
|
||||
<dd class="min-w-0 break-words text-body">{{ f.value }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<p v-if="sec.truncated" class="mt-2 text-xs text-warning">
|
||||
{{ t("car.provider.truncated", { n: sec.fields.length }) }}
|
||||
</p>
|
||||
<details v-if="sec.raw" class="mt-3">
|
||||
<summary class="cursor-pointer text-xs font-semibold text-brandtext hover:underline">
|
||||
{{ t("car.provider.raw") }}
|
||||
</summary>
|
||||
<pre class="mt-2 max-h-96 overflow-auto rounded-control bg-sunken p-3 text-xs text-body">{{ prettyJSON(sec.raw) }}</pre>
|
||||
</details>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="mt-4 text-xs text-muted">
|
||||
{{ t("car.provider.updated", { time: formatDateTime(snap.fetchedAt) }) }} · {{ t("car.provider.own") }}
|
||||
</p>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- ── Not linked: offer to connect this car to a vehicle ────────────── -->
|
||||
<template v-else>
|
||||
<div class="dh-card p-6">
|
||||
<h2 class="text-lg font-bold tracking-[-0.02em] text-strong">{{ t("car.provider.connectTitle") }}</h2>
|
||||
|
||||
<p v-if="connectable.length === 0" class="mt-2 text-sm text-muted">{{ t("car.provider.noProviders") }}</p>
|
||||
<RouterLink
|
||||
v-if="connectable.length === 0"
|
||||
to="/settings"
|
||||
class="mt-3 inline-block text-sm font-medium text-brandtext hover:underline">
|
||||
{{ t("car.provider.settingsLink") }}
|
||||
</RouterLink>
|
||||
|
||||
<template v-else>
|
||||
<p class="mt-1 text-sm text-muted">{{ t("car.provider.connectHint") }}</p>
|
||||
|
||||
<div class="mt-4 grid gap-3 sm:grid-cols-2">
|
||||
<div v-if="connectable.length > 1">
|
||||
<label class="dh-label">{{ t("forms.import.service") }}</label>
|
||||
<select v-model="linkProvider" class="dh-input">
|
||||
<option v-for="p in connectable" :key="p.id" :value="p.id">{{ p.label }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="dh-label">{{ t("forms.import.selectVehicle") }}</label>
|
||||
<p v-if="linkLoading" class="text-sm text-muted">{{ t("forms.import.loadingVehicles") }}</p>
|
||||
<p v-else-if="linkVehicles.length === 0" class="text-sm text-muted">{{ t("forms.import.noVehicles") }}</p>
|
||||
<select v-else v-model="linkVehicleId" class="dh-input">
|
||||
<option v-for="v in linkVehicles" :key="v.id" :value="v.id">
|
||||
{{ v.name }}{{ v.vin ? " · " + v.vin : "" }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex justify-end">
|
||||
<button
|
||||
v-if="canWrite"
|
||||
class="dh-btn dh-btn-primary"
|
||||
:disabled="!linkVehicleId || linking"
|
||||
@click="connect">
|
||||
{{ linking ? t("car.provider.connecting") : t("car.provider.connectSubmit") }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</section>
|
||||
</template>
|
||||
@@ -11,6 +11,7 @@
|
||||
"saved": "Gemt ✓",
|
||||
"loading": "Indlæser…",
|
||||
"edit": "Rediger",
|
||||
"open": "Åbn",
|
||||
"remove": "Fjern",
|
||||
"delete": "Slet",
|
||||
"done": "Færdig",
|
||||
@@ -87,6 +88,7 @@
|
||||
"title": "Dine biler",
|
||||
"subtitle": "Serviceoverblik og servicehistorik.",
|
||||
"addCar": "Tilføj bil",
|
||||
"importCar": "Importér fra tjeneste",
|
||||
"empty": "Ingen biler endnu. Klik på {action} for at komme i gang.",
|
||||
"shared": "Delt",
|
||||
"sharedReadOnly": "Delt · skrivebeskyttet",
|
||||
@@ -242,6 +244,7 @@
|
||||
"sharedReadOnly": "Delt · skrivebeskyttet",
|
||||
|
||||
"tabs": {
|
||||
"connected": "Tilsluttet tjeneste",
|
||||
"info": "Oplysninger",
|
||||
"services": "Servicehistorik",
|
||||
"technical": "Synshistorik",
|
||||
@@ -252,6 +255,50 @@
|
||||
"reminders": "Påmindelser"
|
||||
},
|
||||
|
||||
"provider": {
|
||||
"subtitle": "Live-data fra din {label}-konto.",
|
||||
"refresh": "Opdater",
|
||||
"refreshing": "Opdaterer…",
|
||||
"updated": "Opdateret {time}",
|
||||
"vehicle": "Køretøj",
|
||||
"readings": "Aktuelle målinger",
|
||||
"noData": "{label} returnerede ingen data for denne bil.",
|
||||
"raw": "Rå svar",
|
||||
"allFields": "Alle oplyste felter",
|
||||
"truncated": "Kun de første {n} felter er vist — resten findes i det rå svar nedenfor.",
|
||||
"sectionEmpty": "Intet oplyst.",
|
||||
"own": "Kun din egen konto bruges, så loginoplysninger deles aldrig sammen med en bil.",
|
||||
"odometerSuggest": "{label} oplyser {km}, altså mere end bilens gemte kilometerstand.",
|
||||
"updateOdometer": "Opdater kilometerstand",
|
||||
"updatingOdometer": "Opdaterer…",
|
||||
"unlink": "Afbryd",
|
||||
"unlinkConfirm": "Afbryd denne bil fra {label}? Intet gemt slettes.",
|
||||
"connectTitle": "Forbind denne bil til en tjeneste",
|
||||
"connectHint": "Vælg det køretøj på din konto, der svarer til denne bil. Dens data vises så her.",
|
||||
"connectSubmit": "Forbind køretøj",
|
||||
"connecting": "Forbinder…",
|
||||
"noProviders": "Ingen producentkonto er tilsluttet. Tilføj en under Indstillinger › Integrationer.",
|
||||
"settingsLink": "Åbn Indstillinger",
|
||||
"sections": {
|
||||
"telemetry": "Kilometerstand og rækkevidde",
|
||||
"electric": "Batteri og opladning",
|
||||
"status": "Døre, ruder og lys",
|
||||
"health": "Køretøjets tilstand",
|
||||
"location": "Sidst kendte position",
|
||||
"serviceHistory": "Servicehistorik hos forhandler",
|
||||
"notifications": "Notifikationer"
|
||||
},
|
||||
"metrics": {
|
||||
"odometer": "Kilometerstand",
|
||||
"fuelLevel": "Brændstofniveau",
|
||||
"fuelRange": "Rækkevidde",
|
||||
"batteryLevel": "Batteri",
|
||||
"evRange": "Elektrisk rækkevidde",
|
||||
"chargingStatus": "Opladning",
|
||||
"location": "Position"
|
||||
}
|
||||
},
|
||||
|
||||
"info": {
|
||||
"oilSpec": "Motorolie-specifikation",
|
||||
"transmissionOil": "Gearolie",
|
||||
@@ -454,6 +501,29 @@
|
||||
"submit": "Tilføj bil"
|
||||
},
|
||||
|
||||
"import": {
|
||||
"title": "Importér en bil",
|
||||
"subtitle": "Opret en bil ud fra et køretøj på din producentkonto. Alt, hvad der kan læses, udfyldes for dig.",
|
||||
"service": "Tjeneste",
|
||||
"loadingVehicles": "Indlæser dine køretøjer…",
|
||||
"noVehicles": "Ingen køretøjer på denne konto.",
|
||||
"notConnected": "Ikke tilsluttet",
|
||||
"noProviders": "Ingen producentkonto er tilsluttet. Tilføj en under Indstillinger › Integrationer.",
|
||||
"alreadyInGarage": "Allerede i din garage",
|
||||
"selectVehicle": "Køretøj",
|
||||
"dataTitle": "Hvad skal importeres",
|
||||
"dataHint": "Fjern fluebenet ved det, du helst selv vil udfylde.",
|
||||
"includeIdentity": "Mærke, model, årgang, nummerplade og VIN",
|
||||
"includeFuelType": "Brændstoftype",
|
||||
"includeDates": "Produktions- og første registreringsdato",
|
||||
"includeOdometer": "Aktuel kilometerstand",
|
||||
"name": "Bilens navn",
|
||||
"submit": "Importér bil",
|
||||
"importing": "Importerer…",
|
||||
"warningOdometer": "Tjenesten oplyste ingen kilometerstand — indtast den selv på bilen.",
|
||||
"moreData": "Resten af det, tjenesten oplyser, er fortsat tilgængeligt på bilens {label}-fane."
|
||||
},
|
||||
|
||||
"service": {
|
||||
"addTitle": "Tilføj servicepost",
|
||||
"editTitle": "Rediger servicepost",
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
"saved": "Saved ✓",
|
||||
"loading": "Loading…",
|
||||
"edit": "Edit",
|
||||
"open": "Open",
|
||||
"remove": "Remove",
|
||||
"delete": "Delete",
|
||||
"done": "Done",
|
||||
@@ -105,6 +106,7 @@
|
||||
"title": "Your cars",
|
||||
"subtitle": "Maintenance overview and service history.",
|
||||
"addCar": "Add car",
|
||||
"importCar": "Import from service",
|
||||
"empty": "No cars yet. Click {action} to get started.",
|
||||
"shared": "Shared",
|
||||
"sharedReadOnly": "Shared · read-only",
|
||||
@@ -317,6 +319,7 @@
|
||||
"sharedReadOnly": "Shared · read-only",
|
||||
|
||||
"tabs": {
|
||||
"connected": "Connected service",
|
||||
"info": "Information",
|
||||
"services": "Service history",
|
||||
"technical": "Technical check history",
|
||||
@@ -327,6 +330,50 @@
|
||||
"reminders": "Reminders"
|
||||
},
|
||||
|
||||
"provider": {
|
||||
"subtitle": "Live data from your {label} account.",
|
||||
"refresh": "Refresh",
|
||||
"refreshing": "Refreshing…",
|
||||
"updated": "Updated {time}",
|
||||
"vehicle": "Vehicle",
|
||||
"readings": "Current readings",
|
||||
"noData": "{label} returned no data for this car.",
|
||||
"raw": "Raw response",
|
||||
"allFields": "All reported fields",
|
||||
"truncated": "Only the first {n} fields are listed — the raw response below has the rest.",
|
||||
"sectionEmpty": "Nothing reported.",
|
||||
"own": "Only your own account is used, so credentials are never shared with a car.",
|
||||
"odometerSuggest": "{label} reports {km}, ahead of this car's stored reading.",
|
||||
"updateOdometer": "Update odometer",
|
||||
"updatingOdometer": "Updating…",
|
||||
"unlink": "Disconnect",
|
||||
"unlinkConfirm": "Disconnect this car from {label}? Nothing already saved is deleted.",
|
||||
"connectTitle": "Connect this car to a service",
|
||||
"connectHint": "Pick the vehicle on your account that matches this car. Its data then appears here.",
|
||||
"connectSubmit": "Connect vehicle",
|
||||
"connecting": "Connecting…",
|
||||
"noProviders": "No manufacturer account is connected. Add one in Settings › Integrations.",
|
||||
"settingsLink": "Open Settings",
|
||||
"sections": {
|
||||
"telemetry": "Odometer & range",
|
||||
"electric": "Battery & charging",
|
||||
"status": "Doors, windows & lights",
|
||||
"health": "Vehicle health",
|
||||
"location": "Last known location",
|
||||
"serviceHistory": "Dealer service history",
|
||||
"notifications": "Notifications"
|
||||
},
|
||||
"metrics": {
|
||||
"odometer": "Odometer",
|
||||
"fuelLevel": "Fuel level",
|
||||
"fuelRange": "Range",
|
||||
"batteryLevel": "Battery",
|
||||
"evRange": "Electric range",
|
||||
"chargingStatus": "Charging",
|
||||
"location": "Position"
|
||||
}
|
||||
},
|
||||
|
||||
"info": {
|
||||
"oilSpec": "Engine oil spec",
|
||||
"transmissionOil": "Transmission oil",
|
||||
@@ -529,6 +576,29 @@
|
||||
"submit": "Add car"
|
||||
},
|
||||
|
||||
"import": {
|
||||
"title": "Import a car",
|
||||
"subtitle": "Create a car from a vehicle on your manufacturer account. Everything it can read is filled in for you.",
|
||||
"service": "Service",
|
||||
"loadingVehicles": "Loading your vehicles…",
|
||||
"noVehicles": "No vehicles on this account.",
|
||||
"notConnected": "Not connected",
|
||||
"noProviders": "No manufacturer account is connected. Add one in Settings › Integrations.",
|
||||
"alreadyInGarage": "Already in your garage",
|
||||
"selectVehicle": "Vehicle",
|
||||
"dataTitle": "What to import",
|
||||
"dataHint": "Uncheck anything you would rather fill in yourself.",
|
||||
"includeIdentity": "Make, model, year, registration and VIN",
|
||||
"includeFuelType": "Fuel type",
|
||||
"includeDates": "Build and first-registration dates",
|
||||
"includeOdometer": "Current odometer",
|
||||
"name": "Car name",
|
||||
"submit": "Import car",
|
||||
"importing": "Importing…",
|
||||
"warningOdometer": "The service did not report an odometer reading — enter it yourself on the car.",
|
||||
"moreData": "The rest of what this service reports stays available on the car's {label} tab."
|
||||
},
|
||||
|
||||
"service": {
|
||||
"addTitle": "Add service record",
|
||||
"editTitle": "Edit service record",
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
"saved": "Zapisano ✓",
|
||||
"loading": "Ładowanie…",
|
||||
"edit": "Edytuj",
|
||||
"open": "Otwórz",
|
||||
"remove": "Usuń",
|
||||
"delete": "Usuń",
|
||||
"done": "Gotowe",
|
||||
@@ -89,6 +90,7 @@
|
||||
"title": "Twoje samochody",
|
||||
"subtitle": "Przegląd serwisowy i historia napraw.",
|
||||
"addCar": "Dodaj samochód",
|
||||
"importCar": "Importuj z serwisu",
|
||||
"empty": "Nie masz jeszcze samochodów. Kliknij {action}, aby zacząć.",
|
||||
"shared": "Udostępniony",
|
||||
"sharedReadOnly": "Udostępniony · tylko do odczytu",
|
||||
@@ -246,6 +248,7 @@
|
||||
"sharedReadOnly": "Udostępniony · tylko do odczytu",
|
||||
|
||||
"tabs": {
|
||||
"connected": "Połączona usługa",
|
||||
"info": "Informacje",
|
||||
"services": "Historia serwisowa",
|
||||
"technical": "Historia przeglądów",
|
||||
@@ -256,6 +259,50 @@
|
||||
"reminders": "Przypomnienia"
|
||||
},
|
||||
|
||||
"provider": {
|
||||
"subtitle": "Dane na żywo z Twojego konta {label}.",
|
||||
"refresh": "Odśwież",
|
||||
"refreshing": "Odświeżanie…",
|
||||
"updated": "Zaktualizowano {time}",
|
||||
"vehicle": "Pojazd",
|
||||
"readings": "Aktualne odczyty",
|
||||
"noData": "{label} nie zwróciło żadnych danych dla tego samochodu.",
|
||||
"raw": "Surowa odpowiedź",
|
||||
"allFields": "Wszystkie zgłoszone pola",
|
||||
"truncated": "Wypisano tylko pierwsze {n} pól — pozostałe znajdziesz w surowej odpowiedzi poniżej.",
|
||||
"sectionEmpty": "Brak danych.",
|
||||
"own": "Używane jest wyłącznie Twoje własne konto, więc dane logowania nigdy nie są udostępniane wraz z samochodem.",
|
||||
"odometerSuggest": "{label} podaje {km}, czyli więcej niż zapisany przebieg tego samochodu.",
|
||||
"updateOdometer": "Zaktualizuj przebieg",
|
||||
"updatingOdometer": "Aktualizowanie…",
|
||||
"unlink": "Odłącz",
|
||||
"unlinkConfirm": "Odłączyć ten samochód od {label}? Żadne zapisane dane nie zostaną usunięte.",
|
||||
"connectTitle": "Połącz ten samochód z usługą",
|
||||
"connectHint": "Wybierz pojazd ze swojego konta, który odpowiada temu samochodowi. Jego dane pojawią się tutaj.",
|
||||
"connectSubmit": "Połącz pojazd",
|
||||
"connecting": "Łączenie…",
|
||||
"noProviders": "Nie połączono żadnego konta producenta. Dodaj je w Ustawieniach › Integracje.",
|
||||
"settingsLink": "Otwórz Ustawienia",
|
||||
"sections": {
|
||||
"telemetry": "Przebieg i zasięg",
|
||||
"electric": "Akumulator i ładowanie",
|
||||
"status": "Drzwi, szyby i światła",
|
||||
"health": "Stan pojazdu",
|
||||
"location": "Ostatnia znana lokalizacja",
|
||||
"serviceHistory": "Historia serwisowa u dealera",
|
||||
"notifications": "Powiadomienia"
|
||||
},
|
||||
"metrics": {
|
||||
"odometer": "Przebieg",
|
||||
"fuelLevel": "Poziom paliwa",
|
||||
"fuelRange": "Zasięg",
|
||||
"batteryLevel": "Akumulator",
|
||||
"evRange": "Zasięg elektryczny",
|
||||
"chargingStatus": "Ładowanie",
|
||||
"location": "Pozycja"
|
||||
}
|
||||
},
|
||||
|
||||
"info": {
|
||||
"oilSpec": "Specyfikacja oleju silnikowego",
|
||||
"transmissionOil": "Olej przekładniowy",
|
||||
@@ -468,6 +515,29 @@
|
||||
"submit": "Dodaj samochód"
|
||||
},
|
||||
|
||||
"import": {
|
||||
"title": "Importuj samochód",
|
||||
"subtitle": "Utwórz samochód na podstawie pojazdu z Twojego konta u producenta. Wszystko, co da się odczytać, zostanie wypełnione automatycznie.",
|
||||
"service": "Usługa",
|
||||
"loadingVehicles": "Wczytywanie Twoich pojazdów…",
|
||||
"noVehicles": "Brak pojazdów na tym koncie.",
|
||||
"notConnected": "Nie połączono",
|
||||
"noProviders": "Nie połączono żadnego konta producenta. Dodaj je w Ustawieniach › Integracje.",
|
||||
"alreadyInGarage": "Już w Twoim garażu",
|
||||
"selectVehicle": "Pojazd",
|
||||
"dataTitle": "Co zaimportować",
|
||||
"dataHint": "Odznacz to, co wolisz wpisać samodzielnie.",
|
||||
"includeIdentity": "Marka, model, rok, rejestracja i VIN",
|
||||
"includeFuelType": "Rodzaj paliwa",
|
||||
"includeDates": "Data produkcji i pierwszej rejestracji",
|
||||
"includeOdometer": "Aktualny przebieg",
|
||||
"name": "Nazwa samochodu",
|
||||
"submit": "Importuj samochód",
|
||||
"importing": "Importowanie…",
|
||||
"warningOdometer": "Usługa nie podała przebiegu — wpisz go samodzielnie w samochodzie.",
|
||||
"moreData": "Pozostałe dane z tej usługi pozostają dostępne w karcie {label} samochodu."
|
||||
},
|
||||
|
||||
"service": {
|
||||
"addTitle": "Dodaj wpis serwisowy",
|
||||
"editTitle": "Edytuj wpis serwisowy",
|
||||
|
||||
@@ -29,6 +29,18 @@ export function formatDate(value) {
|
||||
}
|
||||
}
|
||||
|
||||
// A timestamp rather than a date: the date in the user's chosen format plus the
|
||||
// clock time in their region's convention. For the places where freshness is the
|
||||
// whole point — a live reading pulled from a manufacturer service means little
|
||||
// without the minute it was taken.
|
||||
export function formatDateTime(value) {
|
||||
if (!value) return "—";
|
||||
const d = new Date(value);
|
||||
if (isNaN(d)) return "—";
|
||||
const time = d.toLocaleTimeString(prefs.locale || undefined, { hour: "2-digit", minute: "2-digit" });
|
||||
return `${formatDate(value)} ${time}`;
|
||||
}
|
||||
|
||||
// Every number we render goes through here so the grouping separator follows
|
||||
// the user's chosen region rather than the browser's own locale — otherwise the
|
||||
// odometer disagrees with the dates and costs beside it.
|
||||
|
||||
@@ -23,6 +23,7 @@ import MaintenanceFormModal from "../components/MaintenanceFormModal.vue";
|
||||
import DocumentFormModal from "../components/DocumentFormModal.vue";
|
||||
import ReminderFormModal from "../components/ReminderFormModal.vue";
|
||||
import ShareModal from "../components/ShareModal.vue";
|
||||
import ProviderPanel from "../components/ProviderPanel.vue";
|
||||
|
||||
const props = defineProps({ id: { type: String, required: true } });
|
||||
const router = useRouter();
|
||||
@@ -76,6 +77,23 @@ const isReadOnly = computed(() => car.value?.access === "read");
|
||||
|
||||
const activeTab = ref("info");
|
||||
|
||||
// Connected-service tab. It leads the bar — ahead of Information — because for a
|
||||
// car imported from a manufacturer account that is the live view of the car,
|
||||
// while everything to its right is the record the user keeps by hand.
|
||||
//
|
||||
// It shows for a linked car (labelled with the service, "MyToyota") and also for
|
||||
// an unlinked one as long as the user has some account connected, where it offers
|
||||
// to link this car to a vehicle on it. A user with nothing connected never sees
|
||||
// the tab at all.
|
||||
const providers = ref([]);
|
||||
const providerLabel = computed(() => {
|
||||
const linked = providers.value.find((p) => p.id === car.value?.provider);
|
||||
return linked?.label || car.value?.provider || t("car.tabs.connected");
|
||||
});
|
||||
const showProviderTab = computed(
|
||||
() => !!car.value?.provider || providers.value.some((p) => p.connected)
|
||||
);
|
||||
|
||||
// Count of reminders wanting attention, surfaced on the tab so it is visible
|
||||
// without opening it — the whole point of a reminder.
|
||||
const dueReminders = computed(
|
||||
@@ -85,6 +103,7 @@ const dueReminders = computed(
|
||||
// Computed, not a plain array: t() reads the reactive locale, so the tab labels
|
||||
// have to re-evaluate when the language changes.
|
||||
const TABS = computed(() => [
|
||||
...(showProviderTab.value ? [{ key: "provider", label: providerLabel.value }] : []),
|
||||
{ key: "info", label: t("car.tabs.info") },
|
||||
{ key: "services", label: t("car.tabs.services") },
|
||||
{ key: "technical", label: t("car.tabs.technical") },
|
||||
@@ -125,6 +144,14 @@ async function load() {
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
// Which manufacturer services the user has connected — it decides whether the
|
||||
// connected-service tab appears. Fired separately and failure-tolerant: a
|
||||
// plugin being down must not take the car page with it.
|
||||
api
|
||||
.listVehicleProviders()
|
||||
.then((list) => (providers.value = list))
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
function openAddService() {
|
||||
@@ -364,6 +391,13 @@ async function onCarSaved(updated) {
|
||||
car.value = updated;
|
||||
}
|
||||
|
||||
// The provider panel writes to the car too — it links/unlinks the connected
|
||||
// service and can take the odometer from it, which moves km-triggered reminders.
|
||||
async function onCarUpdated(updated) {
|
||||
car.value = updated;
|
||||
reminders.value = await api.listCarReminders(props.id);
|
||||
}
|
||||
|
||||
function openDeleteCar() {
|
||||
deleteConfirmText.value = "";
|
||||
showDeleteCar.value = true;
|
||||
@@ -470,8 +504,18 @@ onMounted(load);
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Connected service (MyToyota, …). Mounted only when its tab is open, so
|
||||
opening a car never triggers a login against the manufacturer. -->
|
||||
<ProviderPanel
|
||||
v-if="activeTab === 'provider'"
|
||||
:car="car"
|
||||
:can-write="canWrite"
|
||||
:provider-label="car.provider ? providerLabel : ''"
|
||||
@car-updated="onCarUpdated"
|
||||
/>
|
||||
|
||||
<!-- Information -->
|
||||
<section v-if="activeTab === 'info'">
|
||||
<section v-else-if="activeTab === 'info'">
|
||||
<div class="dh-card p-6">
|
||||
<dl class="grid grid-cols-2 gap-4 text-sm sm:grid-cols-4">
|
||||
<div><dt class="eyebrow">{{ t("car.info.oilSpec") }}</dt><dd class="mt-0.5 font-medium text-strong">{{ car.oilSpec || t("common.empty") }}</dd></div>
|
||||
|
||||
@@ -5,12 +5,18 @@ import { api } from "../api";
|
||||
import { formatDate, formatKm, serviceStatus } from "../lib/format.js";
|
||||
import { t, tSplit } from "../i18n";
|
||||
import CarFormModal from "../components/CarFormModal.vue";
|
||||
import CarImportModal from "../components/CarImportModal.vue";
|
||||
|
||||
const router = useRouter();
|
||||
const cars = ref([]);
|
||||
const loading = ref(true);
|
||||
const error = ref("");
|
||||
const showAdd = ref(false);
|
||||
const showImport = ref(false);
|
||||
|
||||
// Importing only makes sense once a manufacturer account is connected, so the
|
||||
// button appears only then rather than leading to a dead end.
|
||||
const canImport = ref(false);
|
||||
|
||||
async function load() {
|
||||
loading.value = true;
|
||||
@@ -37,6 +43,15 @@ function onSaved(car) {
|
||||
router.push({ name: "car", params: { id: car.id } });
|
||||
}
|
||||
|
||||
// An imported car lands on its own page like a hand-added one. A warning means a
|
||||
// field the service couldn't supply (an odometer it doesn't report); the car is
|
||||
// created either way, so say what to fill in rather than block the import.
|
||||
function onImported(car, warnings) {
|
||||
showImport.value = false;
|
||||
if (warnings?.includes("odometer")) alert(t("forms.import.warningOdometer"));
|
||||
router.push({ name: "car", params: { id: car.id } });
|
||||
}
|
||||
|
||||
// Service-life progress: how far the car is through its km service interval.
|
||||
// Returns a { pct, tone } or null when there isn't enough data to compute it.
|
||||
const TONE_COLOR = {
|
||||
@@ -55,7 +70,14 @@ function serviceLife(car) {
|
||||
return { pct, tone: TONE_COLOR[serviceStatus(car.latest, car).key] || TONE_COLOR.unknown };
|
||||
}
|
||||
|
||||
onMounted(load);
|
||||
onMounted(() => {
|
||||
load();
|
||||
// Failure-tolerant: a plugin problem must not stop the garage from rendering.
|
||||
api
|
||||
.listVehicleProviders()
|
||||
.then((list) => (canImport.value = list.some((p) => p.connected)))
|
||||
.catch(() => {});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -66,10 +88,16 @@ onMounted(load);
|
||||
<h1 class="text-3xl font-bold tracking-[-0.03em] text-strong">{{ t("dashboard.title") }}</h1>
|
||||
<p class="mt-1 text-sm text-muted">{{ t("dashboard.subtitle") }}</p>
|
||||
</div>
|
||||
<button class="dh-btn dh-btn-primary" @click="showAdd = true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" class="h-4 w-4"><path stroke-linecap="round" stroke-linejoin="round" d="M12 5v14M5 12h14" /></svg>
|
||||
{{ t("dashboard.addCar") }}
|
||||
</button>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<button v-if="canImport" class="dh-btn dh-btn-ghost" @click="showImport = true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" class="h-4 w-4"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3v12m0 0-4-4m4 4 4-4M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2" /></svg>
|
||||
{{ t("dashboard.importCar") }}
|
||||
</button>
|
||||
<button class="dh-btn dh-btn-primary" @click="showAdd = true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" class="h-4 w-4"><path stroke-linecap="round" stroke-linejoin="round" d="M12 5v14M5 12h14" /></svg>
|
||||
{{ t("dashboard.addCar") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p v-if="error" class="mb-4 rounded-control bg-danger-soft px-4 py-3 text-sm font-medium text-danger">{{ error }}</p>
|
||||
@@ -141,5 +169,11 @@ onMounted(load);
|
||||
</div>
|
||||
|
||||
<CarFormModal v-if="showAdd" @saved="onSaved" @close="showAdd = false" />
|
||||
<CarImportModal
|
||||
v-if="showImport"
|
||||
@saved="onImported"
|
||||
@open-car="(id) => router.push({ name: 'car', params: { id } })"
|
||||
@close="showImport = false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user