feat:#60 added localization for more pages

This commit is contained in:
masterElmar
2023-11-15 17:46:25 +01:00
parent 00399c32d9
commit 7e261438d5
18 changed files with 236 additions and 114 deletions

View File

@@ -7,8 +7,7 @@ import {
import ModuleSelection from "./ModuleSelection.vue";
import { Module } from "../model/module.ts";
import { useI18n } from "vue-i18n";
const { t } = useI18n({ useScope: 'global' })
const { t } = useI18n({ useScope: "global" });
const courses = async () => {
return await fetchCourse();
@@ -16,10 +15,12 @@ const courses = async () => {
const selectedCourse: Ref<{ name: string }> = ref({ name: "" });
const countries: Ref<{ name: string }[]> = ref([]);
const semesters: ComputedRef<{ name: string; value: string }[]> = computed(() =>[
{ name: t('courseSelection.winterSemester'), value: "ws" },
{ name: t('courseSelection.summerSemester'), value: "ss" },
]);
const semesters: ComputedRef<{ name: string; value: string }[]> = computed(
() => [
{ name: t("courseSelection.winterSemester"), value: "ws" },
{ name: t("courseSelection.summerSemester"), value: "ss" },
],
);
const selectedSemester: Ref<{ name: string; value: string }> = ref(
semesters.value[0],
@@ -46,7 +47,7 @@ async function getModules() {
<div class="flex flex-column">
<div class="flex align-items-center justify-content-center h-4rem m-2">
<h3 class="text-4xl">
Welcome to HTWKalender
{{$t("courseSelection.headline")}}
<i
class="pi pi-calendar vertical-align-baseline"
style="font-size: 2rem"
@@ -56,7 +57,7 @@ async function getModules() {
<div
class="flex align-items-center justify-content-center h-4rem border-round m-2"
>
<h5 class="text-2xl">{{ $t('courseSelection.selectCourse') }}</h5>
<h5 class="text-2xl">{{ $t("courseSelection.subTitle") }}</h5>
</div>
<div
class="flex align-items-center justify-content-center border-round m-2"
@@ -67,7 +68,8 @@ async function getModules() {
class="w-full md:w-25rem mx-2"
filter
option-label="name"
placeholder="Select a Course"
:placeholder="$t('courseSelection.courseDropDown')"
:empty-message="$t('courseSelection.noCoursesAvailable')"
@change="getModules()"
:autoFilterFocus="true"
></Dropdown>
@@ -76,7 +78,7 @@ async function getModules() {
:options="semesters"
class="w-full md:w-25rem mx-2"
option-label="name"
placeholder="Select a Semester"
:placeholder="$t('courseSelection.semesterDropDown')"
@change="getModules()"
></Dropdown>
</div>
@@ -91,4 +93,4 @@ async function getModules() {
</div>
</div>
</div>
</template>
</template>