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
@@ -2,6 +2,7 @@
|
||||
import { ref, computed } from "vue";
|
||||
import { api } from "../api";
|
||||
import { formatKm } from "../lib/format.js";
|
||||
import { t } from "../i18n";
|
||||
import Modal from "./Modal.vue";
|
||||
|
||||
const props = defineProps({
|
||||
@@ -15,13 +16,7 @@ const isEdit = !!props.reminder;
|
||||
const saving = ref(false);
|
||||
const error = ref("");
|
||||
|
||||
const TYPES = [
|
||||
{ value: "maintenance", label: "Maintenance" },
|
||||
{ value: "document", label: "Document renewal" },
|
||||
{ value: "service", label: "Service" },
|
||||
{ value: "inspection", label: "Inspection" },
|
||||
{ value: "other", label: "Other" },
|
||||
];
|
||||
const TYPE_VALUES = ["maintenance", "document", "service", "inspection", "other"];
|
||||
|
||||
const form = ref({
|
||||
title: props.reminder?.title ?? "",
|
||||
@@ -44,7 +39,7 @@ const isRecurring = computed(() => Number(form.value.repeatDays) > 0 || Number(f
|
||||
|
||||
async function submit() {
|
||||
if (!hasTrigger.value) {
|
||||
error.value = "Set a due date, a due odometer reading, or both.";
|
||||
error.value = t("forms.reminder.noTrigger");
|
||||
return;
|
||||
}
|
||||
saving.value = true;
|
||||
@@ -78,70 +73,65 @@ function payload() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal :title="isEdit ? 'Edit reminder' : 'Add reminder'" @close="emit('close')">
|
||||
<Modal :title="isEdit ? t('forms.reminder.editTitle') : t('forms.reminder.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">Title *</label>
|
||||
<input v-model="form.title" required placeholder="Swap to winter tyres" class="dh-input" />
|
||||
<label class="dh-label">{{ t("forms.reminder.title") }}</label>
|
||||
<input v-model="form.title" required :placeholder="t('forms.reminder.titlePlaceholder')" class="dh-input" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="dh-label">Type</label>
|
||||
<label class="dh-label">{{ t("forms.reminder.type") }}</label>
|
||||
<select v-model="form.type" class="dh-input">
|
||||
<option v-for="t in TYPES" :key="t.value" :value="t.value">{{ t.label }}</option>
|
||||
<option v-for="v in TYPE_VALUES" :key="v" :value="v">{{ t(`enums.reminderType.${v}`) }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<fieldset class="rounded-control border border-subtle p-3">
|
||||
<legend class="eyebrow px-1">Remind me</legend>
|
||||
<legend class="eyebrow px-1">{{ t("forms.reminder.remindMe") }}</legend>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<label class="dh-label">On date</label>
|
||||
<label class="dh-label">{{ t("forms.reminder.onDate") }}</label>
|
||||
<input v-model="form.dueDate" type="date" class="dh-input data" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="dh-label">At odometer (km)</label>
|
||||
<label class="dh-label">{{ t("forms.reminder.atOdometer") }}</label>
|
||||
<input v-model="form.dueKm" type="number" min="0" placeholder="30000" class="dh-input data" />
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-1.5 text-xs text-muted">
|
||||
Set either or both — with both, whichever comes first wins.
|
||||
<span v-if="car?.currentKm"> The car is at {{ formatKm(car.currentKm) }} now.</span>
|
||||
{{ t("forms.reminder.triggerHint") }}
|
||||
<span v-if="car?.currentKm"> {{ t("forms.reminder.currentKm", { km: formatKm(car.currentKm) }) }}</span>
|
||||
</p>
|
||||
</fieldset>
|
||||
|
||||
<fieldset class="rounded-control border border-subtle p-3">
|
||||
<legend class="eyebrow px-1">Repeat (optional)</legend>
|
||||
<legend class="eyebrow px-1">{{ t("forms.reminder.repeat") }}</legend>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<label class="dh-label">Every … days</label>
|
||||
<label class="dh-label">{{ t("forms.reminder.everyDays") }}</label>
|
||||
<input v-model="form.repeatDays" type="number" min="0" placeholder="365" class="dh-input data" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="dh-label">Every … km</label>
|
||||
<label class="dh-label">{{ t("forms.reminder.everyKm") }}</label>
|
||||
<input v-model="form.repeatKm" type="number" min="0" placeholder="15000" class="dh-input data" />
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-1.5 text-xs text-muted">
|
||||
<template v-if="isRecurring">
|
||||
Marking this done will roll it forward instead of closing it.
|
||||
</template>
|
||||
<template v-else>
|
||||
Leave blank for a one-off reminder that closes when you mark it done.
|
||||
</template>
|
||||
{{ isRecurring ? t("forms.reminder.recurringHint") : t("forms.reminder.oneOffHint") }}
|
||||
</p>
|
||||
</fieldset>
|
||||
|
||||
<div>
|
||||
<label class="dh-label">Notes</label>
|
||||
<label class="dh-label">{{ t("forms.reminder.notes") }}</label>
|
||||
<input v-model="form.notes" class="dh-input" />
|
||||
</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 || !hasTrigger" class="dh-btn dh-btn-primary">
|
||||
{{ saving ? "Saving…" : isEdit ? "Save changes" : "Add reminder" }}
|
||||
{{ saving ? t("common.saving") : isEdit ? t("common.saveChanges") : t("forms.reminder.submit") }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user