Add a language-switch system with per-language files
Introduce a hand-rolled i18n layer across all three UIs, each reading its
text from per-language JSON files (English base + Polish + Danish). Nothing
in the converted screens hardcodes English any more.
- Web App (Vue): src/i18n/{en,pl,da}.json + index.js exposing t()/tSplit(),
reactive to the signed-in profile locale. Every view, component, form and
the status labels in lib/format.js go through t().
- API Server panel (Vue): src/i18n/ with its own localStorage-persisted
language (the panel has no user profile) and a header language picker.
Chrome, cards, login and API section titles translated; endpoint reference
descriptions intentionally kept in English. Rebuilt embedded dist.
- Phone App (Flutter): assets/i18n/ + lib/i18n.dart loaded at startup,
driven by AppSettings.locale. Nav, login, lock, dashboard, the full
Settings panel (incl. language picker) and format.dart status labels
translated; remaining detail screens fall back to English.
Language = the language half of the existing BCP-47 locale; the region half
still drives date/number/currency formatting. Missing keys fall back to
English, and plurals use Intl.PluralRules / Intl.plural so Polish gets the
correct one/few/many forms. Settings flags languages without a translation.
Tests updated to assert the localized (Polish) status wording; all pass.
See TRANSLATIONS.md for the format and how to add a language.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
tajniak81
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
ee28b522c7
commit
b6bb6b1df0
@@ -1,6 +1,7 @@
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { api } from "../api";
|
||||
import { t } from "../i18n";
|
||||
import Modal from "./Modal.vue";
|
||||
|
||||
const props = defineProps({ car: { type: Object, default: null } });
|
||||
@@ -69,116 +70,113 @@ async function submit() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal :title="isEdit ? 'Edit car' : 'Add a car'" @close="emit('close')">
|
||||
<Modal :title="isEdit ? t('forms.car.editTitle') : t('forms.car.addTitle')" @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>
|
||||
<form class="space-y-3" @submit.prevent="submit">
|
||||
<div>
|
||||
<label class="dh-label">Name *</label>
|
||||
<label class="dh-label">{{ t("forms.car.name") }}</label>
|
||||
<input v-model="form.name" required placeholder="Toyota Yaris" class="dh-input" />
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
<div>
|
||||
<label class="dh-label">Make</label>
|
||||
<label class="dh-label">{{ t("forms.car.make") }}</label>
|
||||
<input v-model="form.make" placeholder="Toyota" class="dh-input" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="dh-label">Model</label>
|
||||
<label class="dh-label">{{ t("forms.car.model") }}</label>
|
||||
<input v-model="form.model" placeholder="Yaris" class="dh-input" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="dh-label">Year</label>
|
||||
<label class="dh-label">{{ t("forms.car.year") }}</label>
|
||||
<input v-model="form.year" type="number" placeholder="2015" class="dh-input data" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
<div>
|
||||
<label class="dh-label">Registration</label>
|
||||
<label class="dh-label">{{ t("forms.car.registration") }}</label>
|
||||
<input v-model="form.registration" placeholder="ABC 1234" class="dh-input" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="dh-label">Registration country</label>
|
||||
<input v-model="form.registrationCountry" placeholder="Poland" class="dh-input" />
|
||||
<label class="dh-label">{{ t("forms.car.registrationCountry") }}</label>
|
||||
<input v-model="form.registrationCountry" :placeholder="t('forms.car.registrationCountryPlaceholder')" class="dh-input" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="dh-label">VIN</label>
|
||||
<input v-model="form.vin" placeholder="Vehicle Identification Number" maxlength="17" class="dh-input data uppercase" />
|
||||
<label class="dh-label">{{ t("forms.car.vin") }}</label>
|
||||
<input v-model="form.vin" :placeholder="t('forms.car.vinPlaceholder')" maxlength="17" class="dh-input data uppercase" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
<div>
|
||||
<label class="dh-label">Fuel type</label>
|
||||
<label class="dh-label">{{ t("forms.car.fuelType") }}</label>
|
||||
<select v-model="form.fuelType" class="dh-input">
|
||||
<option value="">—</option>
|
||||
<option value="petrol">Petrol (gasoline)</option>
|
||||
<option value="petrol_lpg">Petrol (gasoline) + LPG</option>
|
||||
<option value="diesel">Diesel</option>
|
||||
<option value="diesel_lpg">Diesel + LPG</option>
|
||||
<option value="hybrid">Hybrid</option>
|
||||
<option value="electric">Electric</option>
|
||||
<option value="hydrogen">Hydrogen</option>
|
||||
<option value="">{{ t("common.empty") }}</option>
|
||||
<option value="petrol">{{ t("enums.fuelType.petrol") }}</option>
|
||||
<option value="petrol_lpg">{{ t("enums.fuelType.petrol_lpg") }}</option>
|
||||
<option value="diesel">{{ t("enums.fuelType.diesel") }}</option>
|
||||
<option value="diesel_lpg">{{ t("enums.fuelType.diesel_lpg") }}</option>
|
||||
<option value="hybrid">{{ t("enums.fuelType.hybrid") }}</option>
|
||||
<option value="electric">{{ t("enums.fuelType.electric") }}</option>
|
||||
<option value="hydrogen">{{ t("enums.fuelType.hydrogen") }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="dh-label">Build date</label>
|
||||
<label class="dh-label">{{ t("forms.car.buildDate") }}</label>
|
||||
<input v-model="form.buildDate" type="date" class="dh-input data" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="dh-label">First registration</label>
|
||||
<label class="dh-label">{{ t("forms.car.firstRegistration") }}</label>
|
||||
<input v-model="form.firstRegistrationDate" type="date" class="dh-input data" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<label class="dh-label">Engine oil spec</label>
|
||||
<label class="dh-label">{{ t("forms.car.oilSpec") }}</label>
|
||||
<input v-model="form.oilSpec" placeholder="0W20" class="dh-input" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="dh-label">Current odometer (km)</label>
|
||||
<label class="dh-label">{{ t("forms.car.currentKm") }}</label>
|
||||
<input v-model="form.currentKm" type="number" placeholder="270185" class="dh-input data" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<label class="dh-label">Transmission oil spec</label>
|
||||
<label class="dh-label">{{ t("forms.car.transmissionOilSpec") }}</label>
|
||||
<input v-model="form.transmissionOilSpec" placeholder="Toyota WS" class="dh-input" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="dh-label">Differential oil spec</label>
|
||||
<label class="dh-label">{{ t("forms.car.differentialOilSpec") }}</label>
|
||||
<input v-model="form.differentialOilSpec" placeholder="SAE 75W-90 GL-5" class="dh-input" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<label class="dh-label">Brake fluid spec</label>
|
||||
<label class="dh-label">{{ t("forms.car.brakeFluidSpec") }}</label>
|
||||
<input v-model="form.brakeFluidSpec" placeholder="DOT 4" class="dh-input" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="dh-label">Coolant spec</label>
|
||||
<label class="dh-label">{{ t("forms.car.coolantSpec") }}</label>
|
||||
<input v-model="form.coolantSpec" placeholder="Toyota Super Long Life Coolant" class="dh-input" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<label class="dh-label">Service interval (days)</label>
|
||||
<label class="dh-label">{{ t("forms.car.serviceIntervalDays") }}</label>
|
||||
<input v-model="form.serviceIntervalDays" type="number" class="dh-input data" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="dh-label">Service interval (km)</label>
|
||||
<label class="dh-label">{{ t("forms.car.serviceIntervalKm") }}</label>
|
||||
<input v-model="form.serviceIntervalKm" type="number" class="dh-input data" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="dh-label">Technical check interval (days)</label>
|
||||
<label class="dh-label">{{ t("forms.car.technicalCheckIntervalDays") }}</label>
|
||||
<input v-model="form.technicalCheckIntervalDays" type="number" class="dh-input data" />
|
||||
<p class="mt-1 text-xs text-muted">
|
||||
Prefills each check's next-due date. Any check can override it with the date printed on
|
||||
its certificate.
|
||||
</p>
|
||||
<p class="mt-1 text-xs text-muted">{{ t("forms.car.technicalCheckHint") }}</p>
|
||||
</div>
|
||||
<div class="mt-4 flex justify-end gap-2">
|
||||
<button type="button" class="dh-btn dh-btn-ghost" @click="emit('close')">Cancel</button>
|
||||
<button type="button" class="dh-btn dh-btn-ghost" @click="emit('close')">{{ t("common.cancel") }}</button>
|
||||
<button type="submit" :disabled="saving" class="dh-btn dh-btn-primary">
|
||||
{{ saving ? "Saving…" : isEdit ? "Save changes" : "Add car" }}
|
||||
{{ saving ? t("common.saving") : isEdit ? t("common.saveChanges") : t("forms.car.submit") }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user