✨ 🌐 Add Localization feature

src/components/bottom-navbar.vue

@@ -10,19 +10,19 @@ import { RouterLink } from "vue-router";
     <div class="entry">
       <RouterLink to="/timetable">
         <CalendarIcon class="icon" />
-        <span class="title">Timetable</span>
+        <span class="title">{{ $t("title.timetable") }}</span>
       </RouterLink>
     </div>
     <div class="entry">
       <RouterLink to="/substitutions">
         <BellIcon class="icon" />
-        <span class="title">Substitutions</span>
+        <span class="title">{{ $t("title.substitutions") }}</span>
       </RouterLink>
     </div>
     <div class="entry">
       <RouterLink to="/history">
         <ClockIcon class="icon" />
-        <span class="title">History</span>
+        <span class="title">{{ $t("title.history") }}</span>
       </RouterLink>
     </div>
   </div>

src/components/date-selector.vue

@@ -6,10 +6,19 @@ import {
   fetchHistory,
   loading,
 } from "../store";
-import { dayNames } from "../definitions";
 import dayjs from "dayjs";
 import ArrowIcon from "./icons/arrow-icon.vue";
 
+const dayNames = [
+  "days.sunday",
+  "days.monday",
+  "days.tuesday",
+  "days.wednesday",
+  "days.thursday",
+  "days.friday",
+  "days.saturday",
+];
+
 function nextDay() {
   var newDate = dayjs(selectedDate.value).add(1, "day");
   // Skip weekend
@@ -35,7 +44,7 @@ async function changeDate(newDate) {
   <div class="selector">
     <ArrowIcon @click="previousDay" />
     <span class="day" @click="changeDate(dayjs())">
-      {{ dayNames[selectedDay + 1] }},
+      {{ $t(dayNames[selectedDay + 1]) }},
       {{ dayjs(selectedDate).format("DD.MM.YYYY") }}
     </span>
     <ArrowIcon style="transform: rotate(180deg)" @click="nextDay" />

src/components/initial-setup.vue

@@ -2,18 +2,6 @@
 import CalendarIcon from "./icons/calendar-icon.vue";
 
 defineProps({
-  title: {
-    required: true,
-    type: String,
-  },
-  description: {
-    required: true,
-    type: String,
-  },
-  selectPrompt: {
-    required: true,
-    type: String,
-  },
   options: {
     required: true,
     type: Array,
@@ -28,12 +16,12 @@ defineProps({
   <div class="setup-wrapper">
     <div class="content">
       <CalendarIcon class="icon" />
-      <span class="title">{{ title }}</span>
-      <span class="description">{{ description }}</span>
+      <span class="title">{{ $t("timetable.setup.title") }}</span>
+      <span class="description">{{ $t("timetable.setup.description") }}</span>
       <select
         @input="(event) => $emit('update:modelValue', event.target.value)"
       >
-        <option value="none">{{ selectPrompt }}</option>
+        <option value="none">{{ $t("timetable.setup.prompt") }}</option>
         <option v-for="option in options" :value="option" :key="option">
           {{ option }}
         </option>

src/components/titlebar-element.vue

@@ -8,7 +8,7 @@ const route = useRoute();
 const router = useRouter();
 const routeName = computed(() => route.name);
 function goBack() {
-  if (routeName.value != "Settings") return;
+  if (routeName.value != "title.settings") return;
   if (lastRoute.value.name) router.go(-1);
   else router.push("/timetable");
 }
@@ -16,11 +16,11 @@ function goBack() {
 
 <template>
   <div class="titlebar">
-    <span class="title">{{ routeName }}</span>
+    <span class="title">{{ $t(routeName || "") }}</span>
     <div class="settings">
       <RouterLink
         to="/settings"
-        v-show="$route.name != 'Login'"
+        v-show="$route.name != 'title.login'"
         @click="goBack()"
       >
         <MenuIcon />