2a2045c24a
This commit completes the internationalization (i18n) for several key pages within the frontend application. The following pages have been updated to support multiple languages: - AccountPage.vue - SignupPage.vue - ListDetailPage.vue (including items, OCR, expenses, and cost summary) - MyChoresPage.vue - PersonalChoresPage.vue - IndexPage.vue Key changes include: - Extraction of all user-facing strings from these Vue components. - Addition of new translation keys and their English values to `fe/src/i18n/en.json`. - Modification of the Vue components to use the Vue I18n plugin's `$t()` (template) and `t()` (script) functions for displaying translated strings. - Dynamic messages, notifications, and form validation messages are now also internationalized. - The language files `de.json`, `es.json`, and `fr.json` have been updated with the new keys, using the English text as placeholders for future translation. This effort significantly expands the i18n coverage of the application, making it more accessible to a wider audience.
52 lines
1.7 KiB
Vue
52 lines
1.7 KiB
Vue
<template>
|
|
<main class="container page-padding text-center">
|
|
<h1>{{ $t('indexPage.welcomeMessage') }}</h1>
|
|
<p class="mb-3">{{ $t('indexPage.mainPageInfo') }}</p>
|
|
|
|
<!-- The ExampleComponent is not provided, so this section is a placeholder -->
|
|
<div v-if="todos.length" class="card">
|
|
<div class="card-header">
|
|
<h3>{{ $t('indexPage.sampleTodosHeader') }}</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<ul class="item-list">
|
|
<li v-for="todo in todos" :key="todo.id" class="list-item">
|
|
<div class="list-item-content">
|
|
<span class="item-text">{{ todo.id }}: {{ todo.content }}</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<p class="mt-2">{{ $t('indexPage.totalCountLabel') }} {{ meta.totalCount }}</p>
|
|
</div>
|
|
</div>
|
|
<p v-else>{{ $t('indexPage.noTodos') }}</p>
|
|
</main>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import type { Todo, Meta } from '@/components/models'; // Adjusted path if models.ts is in the same directory
|
|
// import ExampleComponent from 'components/ExampleComponent.vue'; // This component is not provided for conversion
|
|
|
|
const { t } = useI18n(); // Added for consistency, though not strictly needed if only $t in template
|
|
|
|
const todos = ref<Todo[]>([
|
|
{ id: 1, content: 'ct1' },
|
|
{ id: 2, content: 'ct2' },
|
|
{ id: 3, content: 'ct3' },
|
|
{ id: 4, content: 'ct4' },
|
|
{ id: 5, content: 'ct5' },
|
|
]);
|
|
|
|
const meta = ref<Meta>({
|
|
totalCount: 1200,
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page-padding { padding: 1rem; }
|
|
.mb-3 { margin-bottom: 1.5rem; }
|
|
.mt-2 { margin-top: 1rem; }
|
|
.text-center { text-align: center; }
|
|
</style> |