@@ -44,7 +47,7 @@ async function finalStep() {
>
- Enable all notifications:
+ {{ $t("renameModules.enableAllNotifications") }}
- {{ data[field].userDefinedName }}
+ {{
+ onlyWhitespace(data[field].userDefinedName)
+ ? data[field].name
+ : data[field].userDefinedName
+ }}
-
- Next Step
+ {{ $t("renameModules.nextStep") }}
diff --git a/frontend/src/components/RoomOccupation.vue b/frontend/src/components/RoomOccupation.vue
index 883233a..207bc79 100644
--- a/frontend/src/components/RoomOccupation.vue
+++ b/frontend/src/components/RoomOccupation.vue
@@ -3,9 +3,11 @@ import FullCalendar from "@fullcalendar/vue3";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import timeGridPlugin from "@fullcalendar/timegrid";
-import { computed, ref, Ref, watch } from "vue";
+import { computed, ComputedRef, ref, Ref, watch } from "vue";
import { CalendarOptions, EventInput } from "@fullcalendar/core";
import { fetchEventsByRoomAndDuration } from "../api/fetchRoom.ts";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n({ useScope: "global" });
const props = defineProps({
room: {
@@ -53,84 +55,92 @@ async function getOccupation() {
calendar?.refetchEvents();
}
-const calendarOptions: CalendarOptions = {
- plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
- initialView: "week",
- dayHeaderFormat: { weekday: "short", omitCommas: true },
- slotDuration: "00:15:00",
- eventTimeFormat: {
- hour: "2-digit",
- minute: "2-digit",
- hour12: false,
- },
- views: {
- week: {
- type: "timeGrid",
- slotLabelFormat: {
- hour: "numeric",
- minute: "2-digit",
- omitZeroMinute: false,
- meridiem: false,
- hour12: false,
- },
- dateAlignment: "week",
- titleFormat: { month: "short", day: "numeric" },
- slotMinTime: "06:00:00",
- slotMaxTime: "22:00:00",
+import allLocales from "@fullcalendar/core/locales-all";
- duration: { days: 7 },
- firstDay: 1,
- allDaySlot: false,
- hiddenDays: [0],
+const calendarOptions: ComputedRef
= computed(() => {
+ return {
+ locales: allLocales,
+ locale: t("languageCode"),
+ plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
+ initialView: "week",
+ dayHeaderFormat: { weekday: "short", omitCommas: true },
+ slotDuration: "00:15:00",
+ eventTimeFormat: {
+ hour: "2-digit",
+ minute: "2-digit",
+ hour12: false,
},
- Day: {
- type: "timeGrid",
- slotLabelFormat: {
- hour: "numeric",
- minute: "2-digit",
- omitZeroMinute: false,
- meridiem: false,
- hour12: false,
+ views: {
+ week: {
+ description: "Wochenansicht",
+ type: "timeGrid",
+ slotLabelFormat: {
+ hour: "numeric",
+ minute: "2-digit",
+ omitZeroMinute: false,
+ meridiem: false,
+ hour12: false,
+ },
+ dateAlignment: "week",
+ titleFormat: { month: "short", day: "numeric" },
+ slotMinTime: "06:00:00",
+ slotMaxTime: "22:00:00",
+ duration: { days: 7 },
+ firstDay: 1,
+ allDaySlot: false,
+ hiddenDays: [0],
+ },
+ Day: {
+ type: "timeGrid",
+ slotLabelFormat: {
+ hour: "numeric",
+ minute: "2-digit",
+ omitZeroMinute: false,
+ meridiem: false,
+ hour12: false,
+ },
+ titleFormat: { month: "short", day: "numeric" },
+ slotMinTime: "06:00:00",
+ slotMaxTime: "22:00:00",
+ duration: { days: 1 },
+ allDaySlot: false,
+ hiddenDays: [0],
},
- titleFormat: { month: "short", day: "numeric" },
- slotMinTime: "06:00:00",
- slotMaxTime: "22:00:00",
- duration: { days: 1 },
- allDaySlot: false,
- hiddenDays: [0],
},
- },
- headerToolbar: {
- end: "prev,next today",
- center: "title",
- start: "week,Day",
- },
+ headerToolbar: {
+ end: "prev,next today",
+ center: "title",
+ start: "week,Day",
+ },
- datesSet: function (dateInfo) {
- const view = dateInfo.view;
- const offset = new Date().getTimezoneOffset();
- const startDate = new Date(view.activeStart.getTime() - offset * 60 * 1000);
- const endDate = new Date(view.activeEnd.getTime() - offset * 60 * 1000);
- currentDateFrom.value = startDate.toISOString().split("T")[0];
- currentDateTo.value = endDate.toISOString().split("T")[0];
- getOccupation();
- },
- events: function (_info, successCallback, failureCallback) {
- if (occupations.value.length === 0) {
- failureCallback(new Error("no events"));
- } else {
- successCallback(
- occupations.value.map((event) => {
- return {
- id: event.id.toString(),
- start: event.start,
- end: event.end,
- } as EventInput;
- }),
+ datesSet: function (dateInfo: any) {
+ const view = dateInfo.view;
+ const offset = new Date().getTimezoneOffset();
+ const startDate = new Date(
+ view.activeStart.getTime() - offset * 60 * 1000,
);
- }
- },
-};
+ const endDate = new Date(view.activeEnd.getTime() - offset * 60 * 1000);
+ currentDateFrom.value = startDate.toISOString().split("T")[0];
+ currentDateTo.value = endDate.toISOString().split("T")[0];
+ getOccupation();
+ },
+ events: function (_info: any, successCallback: any, failureCallback: any) {
+ if (occupations.value.length === 0) {
+ failureCallback(new Error("no events"));
+ } else {
+ successCallback(
+ occupations.value.map((event) => {
+ return {
+ id: event.id.toString(),
+ start: event.start,
+ end: event.end,
+ } as EventInput;
+ }),
+ );
+ }
+ },
+ };
+});
- {{ data[field].userDefinedName }}
+ {{
+ onlyWhitespace(data[field].userDefinedName)
+ ? data[field].name
+ : data[field].userDefinedName
+ }}
+
+ {{ data[field] }}
+
diff --git a/frontend/src/helpers/strings.ts b/frontend/src/helpers/strings.ts
new file mode 100644
index 0000000..15ac4c8
--- /dev/null
+++ b/frontend/src/helpers/strings.ts
@@ -0,0 +1,8 @@
+/**
+ * Returns false only if the input argument is a string which contains characters that are not considered a whitespace
+ * @param str - The string to check for whitespace
+ * @returns boolean - true if the string contains only whitespace, false otherwise
+ */
+export function onlyWhitespace(str: string): boolean {
+ return !str || str.length === 0 || /^\s*$/.test(str);
+}
diff --git a/frontend/src/i18n/index.ts b/frontend/src/i18n/index.ts
new file mode 100644
index 0000000..3414b0f
--- /dev/null
+++ b/frontend/src/i18n/index.ts
@@ -0,0 +1,46 @@
+import { createI18n } from "vue-i18n";
+import en from "./translations/en.json";
+import de from "./translations/de.json";
+import localeStore from "../store/localeStore.ts";
+
+export const supportedLocales = {
+ en: { name: "English" },
+ de: { name: "Deutsch" },
+};
+// Private instance of VueI18n object
+let _i18n: any;
+// Initializer
+function setup() {
+ _i18n = createI18n({
+ legacy: false,
+ locale: localeStore().locale,
+ fallbackLocale: "en",
+ messages: {
+ en,
+ de,
+ },
+ });
+ return _i18n;
+}
+
+// Sets the active locale.
+function setLocale(newLocale: any) {
+ _i18n.global.locale = newLocale;
+ setDocumentAttributesFor(newLocale);
+}
+
+function setDocumentAttributesFor(locale: any) {
+ const htmlElement = document.querySelector("html");
+
+ htmlElement?.setAttribute("lang", locale);
+}
+
+// Public interface
+export default {
+ // Expose the VueI18n instance via a getter
+ get vueI18n() {
+ return _i18n;
+ },
+ setup,
+ setLocale,
+};
diff --git a/frontend/src/i18n/messages.ts b/frontend/src/i18n/messages.ts
new file mode 100644
index 0000000..b21be5e
--- /dev/null
+++ b/frontend/src/i18n/messages.ts
@@ -0,0 +1,18 @@
+export default {
+ en: {
+ createCalendar: "Create Calendar",
+ editCalendar: "Edit Calendar",
+ roomFinder: "Room Finder",
+ faq: "FAQ",
+ imprint: "Imprint",
+ privacy: "Privacy Policy",
+ },
+ de: {
+ createCalendar: "Kalender erstellen",
+ editCalendar: "Kalender bearbeiten",
+ roomFinder: "Raumfinder",
+ faq: "FAQ",
+ imprint: "Impressum",
+ privacy: "Datenschutz",
+ },
+};
diff --git a/frontend/src/i18n/translations/de.json b/frontend/src/i18n/translations/de.json
new file mode 100644
index 0000000..4dd8efa
--- /dev/null
+++ b/frontend/src/i18n/translations/de.json
@@ -0,0 +1,184 @@
+{
+ "languageCode": "de",
+ "createCalendar": "Kalender erstellen",
+ "editCalendar": "Kalender bearbeiten",
+ "roomFinder": "Raumfinder",
+ "faq": "FAQ",
+ "imprint": "Impressum",
+ "privacy": "Datenschutz",
+ "english": "Englisch",
+ "german": "Deutsch",
+ "courseSelection": {
+ "headline": "Willkommen beim HTWKalender",
+ "winterSemester": "Wintersemester",
+ "summerSemester": "Sommersemester",
+ "subTitle": "Bitte wähle eine Gruppe und das Semester aus.",
+ "courseDropDown": "Gruppe",
+ "noCoursesAvailable": "Keine Gruppen verfügbar",
+ "semesterDropDown": "Semester"
+ },
+ "roomFinderPage": {
+ "headline": "Raumfinder",
+ "detail": "Bitte wähle einen Raum aus, um die Belegung einzusehen",
+ "dropDownSelect": "Bitte wähle einen Raum aus",
+ "noRoomsAvailable": "Keine Räume verfügbar"
+ },
+ "moduleSelection": {
+ "nextStep": "Weiter",
+ "selectAll": "Alle anwählen",
+ "deselectAll": "Alle abwählen",
+ "selected": "angewählt",
+ "unselected": "abgewählt",
+ "noModulesAvailable": "Keine Module verfügbar",
+ "modules": "Module"
+ },
+ "moduleInformation": {
+ "course": "Kurs",
+ "person": "Dozent",
+ "semester": "Semester",
+ "module": "Modul",
+ "day": "Tag",
+ "start": "Begin",
+ "end": "Ende",
+ "room": "Raum",
+ "type": "Art",
+ "week": "Woche"
+ },
+ "editCalendarView": {
+ "error": "Fehler",
+ "invalidToken": "Ungültiger Token",
+ "headline": "Bearbeite deinen HTWKalender",
+ "subTitle": "Füge deinen Link oder Token ein um den Kalender zu bearbeiten",
+ "loadCalendar": "Kalender laden"
+ },
+ "additionalModules": {
+ "subTitle": "Füge weitere Module hinzu die nicht in deinem Studiengang enthalten sind.",
+ "dropDown": "Wähle weitere Module aus",
+ "module": "Modul",
+ "modules": "Module",
+ "dropDownFooterSelected": "ausgewählt",
+ "nextStep": "Weiter"
+ },
+ "renameModules": {
+ "reminder": "Erinnerung",
+ "enableAllNotifications": "Alle Benachrichtigungen aktivieren",
+ "subTitle": "Konfigurieren Sie die ausgewählten Module nach Ihren Wünschen.",
+ "nextStep": "Weiter"
+ },
+ "moduleTemplateDialog": {
+ "explanationOne": "Hier können Module nach Wunsch umbenannt werden, welche dann als Anzeigename im Kalender dargestellt werden.",
+ "explanationTwo": "Zusätzlich können Sie Benachrichtigungen für jedes Modul einschalten, damit für jeden Termin 15 Minuten vor Beginn einen Erinnerung geschalten wird.",
+ "tableDescription": "Im Modulnamen stehen folgende Platzhalter zur Verfügung:",
+ "placeholder": "Platzhalter",
+ "description": "Beschreibung",
+ "examples": "Beispiele",
+ "moduleConfiguration": "Modulkonfiguration",
+ "mandatory": "Verpflichtend",
+ "optional": "Optional",
+ "lecture": "Vorlesung",
+ "seminar": "Seminar",
+ "exam": "Prüfung/Praktikum",
+ "eventTyp": "Ereignistyp"
+ },
+ "calendarLink": {
+ "copyToastNotification": "Link in Zwischenablage kopiert",
+ "copyToastSummary": "Information",
+ "copyToastError": "Fehler",
+ "copyToastErrorDetail": "Link konnte nicht in Zwischenablage kopiert werden",
+ "copyToClipboard": "Link kopieren",
+ "toGoogleCalendar": "Google Kalender",
+ "toMicrosoftCalendar": "Microsoft Kalender"
+ },
+ "faqView": {
+ "headline": "Fragen und Antworten",
+ "firstQuestion": "Wie funktioniert das Kalender erstellen mit dem HTWKalender?",
+ "firstAnswer": "Die Webseite ermöglicht es deinen HTWK-Stundenplan in eines deiner bevorzugten Kalender-Verwaltungs-Programme (Outlook, Google Kalender, etc.) einzubinden. ",
+ "secondQuestion": "Wie genau funktioniert das alles?",
+ "secondAnswer": "Du wählst deinen Studiengang und das gewünschte Semester aus, danach kannst du aus den dazugehörigen Modulen wählen. Dabei kannst du einzelne Module an/abwählen wie \"Feiertage\" oder Wahlpflichtmodule, die du nicht belegst. Im letzten Schritt wird dir der Link mit dem entsprechenden Token für den von dir erstellenten Kalenders angezeigt. Mit diesem Link kannst du den Kalender abonnieren oder herunterladen. ",
+ "thirdQuestion": "Wie kann ich den Kalender abonnieren?",
+ "thirdAnswer": {
+ "tabTitle": "Google Calendar",
+ "google": {
+ "first": "Erstelle deinen Kalender und kopiere den Link.",
+ "second": "Bei Google Kalender selbst hast du in der linken Seitenleiste eine Sektion namens \"Weitere Kalender\". Dort klickst du das kleine Pfeil-Icon rechts neben dem Schritzug. Im daraufhin erscheinenden Menü gibt es einen Punkt \"Über URL hinzufügen\", den du anklicken musst. ",
+ "third": "Füge den kopierten Kalenderlink ein, klicke auf \"Kalender hinzufügen\" und du bist fertig. "
+ },
+ "microsoft_outlook": {
+ "title": "Mircosoft Outlook",
+ "outlook_2010": {
+ "title": "Unter Outlook 2010:",
+ "first": "Erstelle deinen Kalender und kopiere den Link.",
+ "second": "Klicke auf den Reiter “Start”.",
+ "third": "Dort befindest sich in der Sektion “Kalender verwalten” der Button “Kalender öffnen”, auf den du kicken musst.",
+ "fourth": "Es öffnet sich ein Kontextmenü, in dem du den Punkt “Aus dem Internet” anklickst.",
+ "fifth": "Im daraufhin erscheinenden Fenster kannst du den Link einfügen und mit “OK” bestätigen. Eventuell musst du das Abonnement in einem weiteren Schritt noch bestätigen. Dann bist du fertig."
+ },
+ "outlook_2007": {
+ "title": "Unter Outlook 2007:",
+ "first": "Erstelle deinen Kalender und kopiere den Link.",
+ "second": "Unter “Extras” findest du die “Kontoeinstellungen”.",
+ "third": "Dort auf den Reiter “Internetkalender” klicken.",
+ "fourth": "Auf “Neu” klicken.",
+ "fifth": "Im sich öffnenden Fenster musst du den Link einfügen. Allerdings musst du “http://” durch “webcal://” austauschen.",
+ "sixth": "Spätestens beim nächsten Start sollte der Kalender aktualisiert werden und dir fortan zur Verfügung stehen."
+ }
+ },
+ "apple_osx": {
+ "title": "Calendar (OS X)",
+ "first": "Erstelle deinen Kalender und kopiere den Link.",
+ "second": "Unter “Ablage” findest du den Punkt “Neues Kalenderabonnement” (oder unter Snow Leopard “Abonnieren”).",
+ "third": "Im daraufhin erscheinenden Fenster musst du den kopierten Link einfügen und “abonnieren” klicken.",
+ "fourth": "Anschließend kannst du dem Kalender noch einen Namen geben und bestimmen, wie oft er aktualisiert werden soll. Falls du iCloud auf deinem iPhone o.ä. verwendest, empfehle ich dir bei “Ort” unbedingt “iCloud” zu wählen. So hast du deinen Stundenplan ohne weiteres zutun auch unterwegs immer parat."
+ },
+ "thunderbird": {
+ "title": "Thunderbird",
+ "one" : "Erstelle deinen Kalender und kopiere den Link.",
+ "two" : "Im Menü “Termine und Aufgaben” den Punkt “Kalender” wählen. ",
+ "three" : "Links siehst du die Kalenderübersicht. In diesem Bereich über die rechte Maustaste klicken und im darauf erscheinenden Kontextmenü “Neuer Kalender” anklicken.",
+ "four" : "Du hast die Wahl zwischen “Auf meinem Computer” und “Im Netzwerk”. Bitte letzteres wählen und “Fortsetzen” klicken.",
+ "five" : "Im folgenden Fenster lässt du das “Format” wie es ist (“iCalender”).",
+ "six" : "Unter \"Adresse\" den kopierten Kalenderlink einfügen.",
+ "seven" : "Anschließend kannst du noch einen Namen vergeben und weitere Einstellungen nach Belieben vornehmen."
+ },
+ "iphone": {
+ "title": "iPhone",
+ "description": "Der einfachste Weg unter iOS ist der iCloud-Sync (siehe Anleitung für OS X Kalender). Hier ist der andere Weg: ",
+ "one": "Erstelle deinen Kalender und kopiere den Link.",
+ "two": "Gehe in die “Systemeinstellungen”.",
+ "three": "Dort wählst du “Mail, Kontakte, Kalender”.",
+ "four": "“Account hinzufügen” auswählen.",
+ "five": "Ganz unten tippst du auf “Andere”.",
+ "six": "Der letzte Punkt ist “Kalenderabo hinzufügen”. Dort drauftippen.",
+ "seven": "Im daraufhin erscheinenden Textfeld fügst du den Kalenderlink ein und drückst oben auf “weiter”.",
+ "eight": "Du kannst noch eine “Beschreibung” vergeben. Den Rest solltest du lassen, wie er ist.",
+ "nine": "Nach kurzer Zeit taucht der abonnierte Kalender in der Kalender-App auf."
+ },
+ "android": {
+ "description": "Unter Android ist die Synchronisierung mit dem Google Kalender die einfachste Variante. Schaue bitte in die Google Kalender Anleitung um zu erfahren, wie du den Kalender dort abonnierst. "
+ },
+ "windows_phone": {
+ "description": "Am einfachsten ist unter Windows Phone die Synchronisierung über Outlook.com:",
+ "one": "Erstelle deinen Kalender und kopiere den Link.",
+ "two": "Bei Outlook.com anmelden und in den Kalender wechseln.",
+ "three": "Auf “Subscribe” klicken.",
+ "four": "“Subscribe to a public calendar” auswählen.",
+ "five": "Bei “Calendar URL” den Kalenderlink einfügen.",
+ "six": "Sonstige Einstellungen nach Belieben vornehmen.",
+ "seven": "Auf “Subscribe to calendar” klicken.",
+ "eight": "Das Windows-Phone-Gerät muss mit dem gleichen Outlook.com-Benutzerkonto angemeldet sein. Fortan sollte die Synchronisierung des Kalenders automatisch erfolgen."
+ }
+ },
+ "fourthQuestion": "Kalender abonnieren? Ich will den downloaden!",
+ "fourthAnswer": "Das kannst du gern tun. Nachdem dein persönlicher Stundenplan erstellt wurde, hast du die Möglichkeit ihn herunterzuladen. Außerdem kannst du ihn jederzeit herunterladen, wenn du den generierten Link einfach in deinem Browser aufrufst. Bedenke hierbei, dass heruntergeladene Kalender bzw. Stundenpläne sich nicht aktualisieren werden. Das ist nur möglich, wenn du den Kalender abonnierst. ",
+ "fifthQuestion": "Ich belege zusätzlich Module aus anderen Studiengängen und möchte diese auch in meinem Stundenplan haben. ",
+ "fifthAnswer": "Nachdem du die Möglichkeit hattest, die für deinen Studiengang vorgesehenen Module aus dem Modulhandbuch auszuwählen, wirst du auf eine zweite Seite weitergeleitet. Dort hast du die Möglichkeit, weitere Module aus anderen Studiengängen in deinen Studienplan einzufügen. ",
+ "sixthQuestion": "Aktualisierungs Probleme mit dem Kalender?",
+ "sixthAnswer": " Das liegt vermutlich daran, dass du ihn heruntergeladen statt abonniert hast. Automatisch aktualisieren können sich nur Kalender, die du abonniert hast. Eine Aktualisierung des Kalenders auf dem Server wird alle 3h ab Mitternacht durchgeführt. So wird gewährleistet das alle Veränderungen seitens der HTWK übernommen werden.",
+ "seventhQuestion": "Wie lange ist mein Stundenplan bzw. der Link dorthin gültig?",
+ "seventhAnswer": "Studenpläne sind erstmal nur für die ausgewählten Semester gültig. Da durch Wahlpflichtmodule oder deine Planung sich Veränderungen ergeben können.",
+ "eighthQuestion": "Preis und Entwicklung?",
+ "eighthAnswer": "Die Kosten können durch das selbständiges Hosting vollständig ausgelagert werden. Die Entwicklung soll als aktives Git Projekt auch durch die Community verwaltet werden.",
+ "notFound": "Nicht gefunden, wonach du suchst?",
+ "contact": "Kontakt aufnehmen"
+ }
+}
diff --git a/frontend/src/i18n/translations/en.json b/frontend/src/i18n/translations/en.json
new file mode 100644
index 0000000..641d5b9
--- /dev/null
+++ b/frontend/src/i18n/translations/en.json
@@ -0,0 +1,184 @@
+{
+ "languageCode": "en",
+ "createCalendar": "create calendar",
+ "editCalendar": "edit calendar",
+ "roomFinder": "room finder",
+ "faq": "faq",
+ "imprint": "imprint",
+ "privacy": "privacy",
+ "english": "English",
+ "german": "German",
+ "courseSelection": {
+ "headline": "Welcome to HTWKalender",
+ "winterSemester": "winter semester",
+ "summerSemester": "summer semester",
+ "subTitle": "Please select a course and semester",
+ "courseDropDown": "Please select a course",
+ "noCoursesAvailable": "No courses listed",
+ "semesterDropDown": "Please select a semester"
+ },
+ "roomFinderPage": {
+ "headline": "room finder",
+ "detail": "Please select a room to view the occupancy",
+ "dropDownSelect": "Please select a room",
+ "noRoomsAvailable": "No rooms listed"
+ },
+ "moduleSelection": {
+ "nextStep": "next step",
+ "selectAll": "select all",
+ "deselectAll": "deselect all",
+ "selected": "selected",
+ "unselected": "unselected",
+ "noModulesAvailable": "no modules available",
+ "modules": "modules"
+ },
+ "moduleInformation": {
+ "course": "course",
+ "person": "lecturer",
+ "semester": "semester",
+ "module": "module",
+ "day": "day",
+ "start": "start",
+ "end": "end",
+ "room": "room",
+ "type": "type",
+ "week": "week"
+ },
+ "editCalendarView": {
+ "error": "error",
+ "invalidToken": "invalid token",
+ "headline": "edit your HTWKalender",
+ "subTitle": "please enter your link or calendar token",
+ "loadCalendar": "load calendar"
+ },
+ "additionalModules": {
+ "subTitle": "Select additional Modules that are not listed in the regular semester for your Course",
+ "dropDown": "Select additional modules",
+ "module": "module",
+ "modules": "modules",
+ "dropDownFooterSelected": "selected",
+ "nextStep": "next step"
+ },
+ "renameModules": {
+ "reminder": "reminder",
+ "enableAllNotifications": "enable all notifications",
+ "subTitle": "Configure your selected Modules to your liking.",
+ "nextStep": "next step"
+ },
+ "moduleTemplateDialog": {
+ "explanationOne": "Here you can rename your modules to your liking. This will be the name of the event in your calendar.",
+ "explanationTwo": "Additionally, you can toggle notifications for each module. If you do so, you will be notified 15 minutes before the event starts.",
+ "tableDescription": "You can use the following placeholders in your module names:",
+ "placeholder": "placeholder",
+ "description": "description",
+ "examples": "examples",
+ "moduleConfiguration": "module configuration",
+ "mandatory": "mandatory",
+ "optional": "optional",
+ "lecture": "lecture",
+ "seminar": "seminar",
+ "exam": "exam/internship project",
+ "eventTyp": "event type"
+ },
+ "calendarLink": {
+ "copyToastNotification": "Link copied to clipboard",
+ "copyToastSummary": "information",
+ "copyToastError": "error",
+ "copyToastErrorDetail": "could not copy link to clipboard",
+ "copyToClipboard": "copy to clipboard",
+ "toGoogleCalendar": "to Google Calendar",
+ "toMicrosoftCalendar": "to Microsoft Calendar"
+ },
+ "faqView": {
+ "headline": "faq",
+ "firstQuestion": "How does calendar creation work with HTWKalender?",
+ "firstAnswer": "The website allows you to integrate your HTWK timetable into one of your preferred calendar management programs (Outlook, Google Calendar, etc.).",
+ "secondQuestion": "How does it all work exactly?",
+ "secondAnswer": "You choose your course of study and the desired semester; then, you can select modules associated with it. You can individually select or deselect modules such as 'Holidays' or elective modules you are not taking. In the last step, the link with the corresponding token for your created calendar is displayed. With this link, you can subscribe to or download the calendar.",
+ "thirdQuestion": "How can I subscribe to the calendar?",
+ "thirdAnswer": {
+ "tabTitle": "Google Calendar",
+ "google": {
+ "first": "Create your calendar and copy the link.",
+ "second": "In Google Calendar itself, in the left sidebar, there is a section called 'Other calendars.' There, click the small arrow icon to the right of the text. In the menu that appears, there is an option 'Add by URL' that you need to click.",
+ "third": "Paste the copied calendar link, click 'Add Calendar,' and you're done."
+ },
+ "microsoft_outlook": {
+ "title": "Microsoft Outlook",
+ "outlook_2010": {
+ "title": "Under Outlook 2010:",
+ "first": "Create your calendar and copy the link.",
+ "second": "Click on the 'Home' tab.",
+ "third": "In the 'Manage Calendars' section, there is a 'Open Calendar' button that you need to click.",
+ "fourth": "A context menu opens, where you click on 'From Internet'.",
+ "fifth": "In the window that appears, you can paste the link and confirm with 'OK'. You may need to confirm the subscription in an additional step. Then you're done."
+ },
+ "outlook_2007": {
+ "title": "Under Outlook 2007:",
+ "first": "Create your calendar and copy the link.",
+ "second": "Under 'Tools', you will find 'Account Settings'.",
+ "third": "There, click on the 'Internet Calendars' tab.",
+ "fourth": "Click on 'New.'",
+ "fifth": "In the opening window, you must paste the link. However, you need to replace 'http://' with 'webcal://'.",
+ "sixth": "At the latest, the calendar should be updated on the next start and be available to you from then on."
+ }
+ },
+ "apple_osx": {
+ "title": "Calendar (OS X)",
+ "first": "Create your calendar and copy the link.",
+ "second": "Under 'File', you will find the option 'New Calendar Subscription' (or 'Subscribe' under Snow Leopard).",
+ "third": "In the window that appears, paste the copied link and click 'Subscribe.'",
+ "fourth": "You can then give the calendar a name and determine how often it should be updated. If you use iCloud on your iPhone or similar, I recommend selecting 'iCloud' under 'Location.' This way, your timetable is always available on the go without further action."
+ },
+ "thunderbird": {
+ "title": "Thunderbird",
+ "one": "Create your calendar and copy the link.",
+ "two": "In the 'Events and Tasks' menu, select 'Calendar.'",
+ "three": "On the left, you will see the calendar overview. Click with the right mouse button in this area, and in the context menu that appears, click 'New Calendar.'",
+ "four": "You have the choice between 'On My Computer' and 'On the Network.' Please choose the latter and click 'Continue.'",
+ "five": "In the following window, leave the 'Format' as it is ('iCalendar').",
+ "six": "Paste the copied calendar link under 'Location'.",
+ "seven": "You can then give it a name and make additional settings as desired."
+ },
+ "iphone": {
+ "title": "iPhone",
+ "description": "The easiest way on iOS is through iCloud sync (see instructions for OS X Calendar). Here is another way:",
+ "one": "Create your calendar and copy the link.",
+ "two": "Go to 'Settings'.",
+ "three": "There, select 'Mail, Contacts, Calendars'.",
+ "four": "Select 'Add Account.'",
+ "five": "At the bottom, tap 'Other.'",
+ "six": "The last option is 'Add Subscribed Calendar.' Tap on it.",
+ "seven": "In the text field that appears, paste the calendar link and press 'Next' at the top.",
+ "eight": "You can give it a 'Description.' Leave the rest as it is.",
+ "nine": "After a short time, the subscribed calendar will appear in the Calendar app."
+ },
+ "android": {
+ "description": "Under Android, synchronizing with Google Calendar is the easiest option. Please refer to the Google Calendar instructions to learn how to subscribe to the calendar there."
+ },
+ "windows_phone": {
+ "description": "The easiest way on Windows Phone is synchronization via Outlook.com:",
+ "one": "Create your calendar and copy the link.",
+ "two": "Log in to Outlook.com and switch to the calendar.",
+ "three": "Click on 'Subscribe.'",
+ "four": "Select 'Subscribe to a public calendar.'",
+ "five": "Paste the calendar link under 'Calendar URL.'",
+ "six": "Make other settings as desired.",
+ "seven": "Click on 'Subscribe to calendar.'",
+ "eight": "The Windows Phone device must be logged in with the same Outlook.com user account. From now on, calendar synchronization should occur automatically."
+ }
+ },
+ "fourthQuestion": "Subscribe to the calendar? I want to download it!",
+ "fourthAnswer": "You can certainly do that. After your personal timetable has been created, you have the option to download it. Additionally, you can download it anytime by simply opening the generated link in your browser. Keep in mind that downloaded calendars or timetables will not update. This is only possible if you subscribe to the calendar.",
+ "fifthQuestion": "I am taking additional modules from other courses of study and want them in my timetable.",
+ "fifthAnswer": "After you have had the opportunity to select the modules provided for your course of study from the module handbook, you will be redirected to a second page. There, you have the option to add additional modules from other courses of study to your study plan.",
+ "sixthQuestion": "Updating issues with the calendar?",
+ "sixthAnswer": "This is probably because you downloaded it instead of subscribing. Only calendars that you have subscribed to can update automatically. A server update of the calendar occurs every 3 hours starting from midnight. This ensures that all changes from HTWK are incorporated.",
+ "seventhQuestion": "How long is my timetable or the link to it valid?",
+ "seventhAnswer": "Timetables are initially only valid for the selected semesters, as changes can occur due to elective modules or your planning.",
+ "eighthQuestion": "Cost and development?",
+ "eighthAnswer": "Costs can be completely outsourced through self-hosting. Development is intended to be managed by the community as an active Git project.",
+ "notFound": "Not finding what you're looking for?",
+ "contact": "Get in touch"
+ }
+}
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 3c2c61f..48d5974 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -4,6 +4,7 @@ import App from "./App.vue";
import PrimeVue from "primevue/config";
import Button from "primevue/button";
import Dropdown from "primevue/dropdown";
+import Menu from "primevue/menu";
import Menubar from "primevue/menubar";
import InputText from "primevue/inputtext";
import InputSwitch from "primevue/inputswitch";
@@ -30,6 +31,7 @@ import Column from "primevue/column";
import DynamicDialog from "primevue/dynamicdialog";
import DialogService from "primevue/dialogservice";
import ProgressSpinner from "primevue/progressspinner";
+import i18n from "./i18n";
const app = createApp(App);
const pinia = createPinia();
@@ -39,7 +41,10 @@ app.use(router);
app.use(ToastService);
app.use(pinia);
app.use(DialogService);
+i18n.setup();
+app.use(i18n.vueI18n);
app.component("Button", Button);
+app.component("Menu", Menu);
app.component("Menubar", Menubar);
app.component("Dialog", Dialog);
app.component("Dropdown", Dropdown);
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 95c4864..92cabe8 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -1,15 +1,16 @@
import { createRouter, createWebHistory } from "vue-router";
import Faq from "../components/FaqPage.vue";
-import CourseSelection from "../components/CourseSelection.vue";
-import AdditionalModules from "../components/AdditionalModules.vue";
+import AdditionalModules from "../view/AdditionalModules.vue";
import CalendarLink from "../components/CalendarLink.vue";
-import Imprint from "../components/ImprintPage.vue";
-import PrivacyPolicy from "../components/PrivacyPolicy.vue";
+import Imprint from "../view/ImprintPage.vue";
+import PrivacyPolicy from "../view/PrivacyPolicy.vue";
import RenameModules from "../components/RenameModules.vue";
-import RoomFinder from "../components/RoomFinder.vue";
-import EditCalendarView from "../view/editCalendarView.vue";
+import RoomFinder from "../view/RoomFinder.vue";
+import EditCalendarView from "../view/EditCalendarView.vue";
import EditAdditionalModules from "../components/editCalendar/EditAdditionalModules.vue";
import EditModules from "../components/editCalendar/EditModules.vue";
+import CourseSelection from "../components/CourseSelection.vue";
+import i18n from "../i18n";
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
@@ -69,11 +70,17 @@ const router = createRouter({
name: "rename-modules",
component: RenameModules,
},
- {
- path: "/:catchAll(.*)",
- redirect: "/",
- },
],
});
+router.beforeEach(async (to, from) => {
+ const newLocale = to.params.locale;
+ const prevLocale = from.params.locale;
+ // If the locale hasn't changed, do nothing
+ if (newLocale === prevLocale) {
+ return;
+ }
+ i18n.setLocale(newLocale);
+});
+
export default router;
diff --git a/frontend/src/store/localeStore.ts b/frontend/src/store/localeStore.ts
new file mode 100644
index 0000000..121bfdb
--- /dev/null
+++ b/frontend/src/store/localeStore.ts
@@ -0,0 +1,17 @@
+import { defineStore } from "pinia";
+import { useLocalStorage } from "@vueuse/core";
+
+const localeStore = defineStore("localeStore", {
+ state: () => {
+ return {
+ locale: useLocalStorage("locale", "en"), //useLocalStorage takes in a key of 'count' and default value of 0
+ };
+ },
+ actions: {
+ setLocale(locale: string) {
+ this.locale = locale;
+ },
+ },
+});
+
+export default localeStore;
diff --git a/frontend/src/components/AdditionalModules.vue b/frontend/src/view/AdditionalModules.vue
similarity index 84%
rename from frontend/src/components/AdditionalModules.vue
rename to frontend/src/view/AdditionalModules.vue
index bf08122..f5569c7 100644
--- a/frontend/src/components/AdditionalModules.vue
+++ b/frontend/src/view/AdditionalModules.vue
@@ -1,15 +1,18 @@
@@ -117,8 +128,7 @@ function selectChange(event : MultiSelectChangeEvent) {
- Select additional Modules that are not listed in the regular semester
- for your Course
+ {{ $t("additionalModules.subTitle") }}
@@ -139,7 +149,7 @@ function selectChange(event : MultiSelectChangeEvent) {
:striped-rows="true"
class="w-10"
>
-
+
@@ -202,7 +212,7 @@ function selectChange(event : MultiSelectChangeEvent) {
@click.stop="showInfo(slotProps.data)"
>
-
+
@@ -226,9 +236,14 @@ function selectChange(event : MultiSelectChangeEvent) {
:virtual-scroller-options="{ itemSize: 70 }"
class="custom-multiselect"
filter
+ :placeholder="$t('additionalModules.dropDown')"
+ :auto-filter-focus="true"
+ :show-toggle-all="false"
+ @change="selectChange()"
placeholder="Select additional modules"
@change="selectChange($event)"
@selectall-change="onSelectAllChange($event)"
+ :selectedItemsLabel="itemsLabelWithNumber(selectedModules)"
>
@@ -254,17 +269,17 @@ function selectChange(event : MultiSelectChangeEvent) {
{{ selectedModules ? selectedModules.length : 0 }}
- item{{
- (selectedModules ? selectedModules.length : 0) > 1 ? "s" : ""
- }}
- selected.
+ {{ itemsLabel(selectedModules) }}
+ {{ $t("additionalModules.dropDownFooterSelected") }}
-->
- Next Step
+ {{
+ $t("additionalModules.nextStep")
+ }}
diff --git a/frontend/src/view/editCalendarView.vue b/frontend/src/view/EditCalendarView.vue
similarity index 74%
rename from frontend/src/view/editCalendarView.vue
rename to frontend/src/view/EditCalendarView.vue
index cd848d8..e0fa2dc 100644
--- a/frontend/src/view/editCalendarView.vue
+++ b/frontend/src/view/EditCalendarView.vue
@@ -6,6 +6,9 @@ import { getCalender } from "../api/loadCalendar";
import router from "../router";
import tokenStore from "../store/tokenStore";
import { useToast } from "primevue/usetoast";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n({ useScope: "global" });
+
const toast = useToast();
const token: Ref
= ref("");
@@ -13,7 +16,7 @@ const modules: Ref = ref(moduleStore().modules);
function extractToken(token: string): string {
const tokenRegex = /^[a-z0-9]{15}$/;
- const tokenUriRegex = /(?:\?|&)token=([a-z0-9]{15})(?:&|$)/;
+ const tokenUriRegex = /[?&]token=([a-z0-9]{15})(?:&|$)/;
if (tokenRegex.test(token)) {
return token;
@@ -33,8 +36,8 @@ function loadCalendar(): void {
} catch (e) {
toast.add({
severity: "error",
- summary: "Error",
- detail: "Invalid token",
+ summary: t("editCalendarView.error"),
+ detail: t("editCalendarView.invalidToken"),
life: 3000,
});
return;
@@ -58,10 +61,10 @@ function loadCalendar(): void {
-
- Edit your HTWKalender
+
+ {{ $t("editCalendarView.headline") }}
@@ -69,17 +72,17 @@ function loadCalendar(): void {
-
Please enter your existing calendar token
+
{{ $t("editCalendarView.subTitle") }}
-
-
diff --git a/frontend/src/components/ImprintPage.vue b/frontend/src/view/ImprintPage.vue
similarity index 95%
rename from frontend/src/components/ImprintPage.vue
rename to frontend/src/view/ImprintPage.vue
index d8ff591..0d6c69b 100644
--- a/frontend/src/components/ImprintPage.vue
+++ b/frontend/src/view/ImprintPage.vue
@@ -3,14 +3,15 @@
-
Imprint
+ {{$t("imprint")}}
nach dem Telemediengesetz (TMG) der Bundesrepublik Deutschland.
Kontakt
- Per Email: support@ekresse.de
+ Per Email:
+ support@htwkalender.de
Adresse
diff --git a/frontend/src/components/PrivacyPolicy.vue b/frontend/src/view/PrivacyPolicy.vue
similarity index 99%
rename from frontend/src/components/PrivacyPolicy.vue
rename to frontend/src/view/PrivacyPolicy.vue
index 3c9b4f6..0d44f8c 100644
--- a/frontend/src/components/PrivacyPolicy.vue
+++ b/frontend/src/view/PrivacyPolicy.vue
@@ -3,7 +3,7 @@
-
Privacy policy
+ {{$t("privacy")}}
Datenschutzerklärung
@@ -55,7 +55,7 @@
Deutschland
E-Mail-Adresse:
-
support@ekresse.de
+
support@htwkalender.de
Übersicht der Verarbeitungen
diff --git a/frontend/src/components/RoomFinder.vue b/frontend/src/view/RoomFinder.vue
similarity index 68%
rename from frontend/src/components/RoomFinder.vue
rename to frontend/src/view/RoomFinder.vue
index 35cba3b..98c661c 100644
--- a/frontend/src/components/RoomFinder.vue
+++ b/frontend/src/view/RoomFinder.vue
@@ -1,7 +1,7 @@
+
+
+