Merge branch 'main' into 6-deleted-unused-calendar-tokens

This commit is contained in:
masterElmar
2023-11-20 23:48:43 +01:00
11 changed files with 294 additions and 134 deletions

View File

@@ -6,9 +6,13 @@ export async function getCalender(token: string): Promise<Module[]> {
method: "GET", method: "GET",
}); });
return await fetch(request) return await fetch(request).then((response) => {
.then((response) => { if (response.ok) {
return response.json(); return response
}) .json()
.then((calendarResponse: Calendar) => calendarResponse.modules); .then((calendarResponse: Calendar) => calendarResponse.modules);
} else {
return [];
}
});
} }

View File

@@ -1,141 +1,216 @@
<script lang="ts" setup> <script lang="ts" setup></script>
</script>
<template> <template>
<div class="flex align-items-center justify-content-center flex-column"> <div class="flex align-items-center justify-content-center flex-column">
<div class="flex align-items-center justify-content-center h-4rem m-2"> <div class="flex align-items-center justify-content-center h-4rem m-2">
<h1>{{$t('faqView.headline')}}</h1> <h1>{{ $t("faqView.headline") }}</h1>
</div> </div>
<div class="flex flex-column col-7"> <div class="flex flex-column col-7">
<div class="grid my-2"> <div class="grid my-2">
<div class="col"> <div class="col">
{{$t('faqView.firstQuestion')}} {{ $t("faqView.firstQuestion") }}
</div> </div>
<div class="col"> <div class="col">
{{$t('faqView.firstAnswer')}} {{ $t("faqView.firstAnswer") }}
</div> </div>
</div> </div>
<div class="grid my-2"> <div class="grid my-2">
<div class="col">{{$t('faqView.secondQuestion')}}</div> <div class="col">{{ $t("faqView.secondQuestion") }}</div>
<div class="col"> <div class="col">
{{$t('faqView.secondAnswer')}} {{ $t("faqView.secondAnswer") }}
</div> </div>
</div> </div>
<div class="grid my-2"> <div class="grid my-2">
<div class="col">{{$t('faqView.thirdQuestion')}}</div> <div class="col">{{ $t("faqView.thirdQuestion") }}</div>
<div class="col"> <div class="col">
<Accordion> <Accordion>
<AccordionTab :header="$t('faqView.thirdAnswer.tabTitle')"> <AccordionTab :header="$t('faqView.thirdAnswer.tabTitle')">
<ol> <ol>
<li>{{$t('faqView.thirdAnswer.google.first')}}</li> <li>{{ $t("faqView.thirdAnswer.google.first") }}</li>
<li> <li>
{{$t('faqView.thirdAnswer.google.second')}} {{ $t("faqView.thirdAnswer.google.second") }}
</li> </li>
<li> <li>
{{$t('faqView.thirdAnswer.google.third')}} {{ $t("faqView.thirdAnswer.google.third") }}
</li> </li>
</ol> </ol>
</AccordionTab> </AccordionTab>
<AccordionTab :header="$t('faqView.thirdAnswer.microsoft_outlook.title')"> <AccordionTab
<p>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2010.title')}}</p> :header="$t('faqView.thirdAnswer.microsoft_outlook.title')"
>
<p>
{{
$t("faqView.thirdAnswer.microsoft_outlook.outlook_2010.title")
}}
</p>
<ol> <ol>
<li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2010.first')}}</li> <li>
<li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2010.second')}}</li> {{
<li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2010.third')}}</li> $t(
<li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2010.fourth')}}</li> "faqView.thirdAnswer.microsoft_outlook.outlook_2010.first",
<li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2010.fifth')}}</li> )
}}
</li>
<li>
{{
$t(
"faqView.thirdAnswer.microsoft_outlook.outlook_2010.second",
)
}}
</li>
<li>
{{
$t(
"faqView.thirdAnswer.microsoft_outlook.outlook_2010.third",
)
}}
</li>
<li>
{{
$t(
"faqView.thirdAnswer.microsoft_outlook.outlook_2010.fourth",
)
}}
</li>
<li>
{{
$t(
"faqView.thirdAnswer.microsoft_outlook.outlook_2010.fifth",
)
}}
</li>
</ol> </ol>
<p>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2007.title')}}</p> <p>
{{
$t("faqView.thirdAnswer.microsoft_outlook.outlook_2007.title")
}}
</p>
<ol> <ol>
<li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2007.first')}}</li> <li>
<li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2007.second')}}</li> {{
<li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2007.third')}}</li> $t(
<li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2007.fourth')}}</li> "faqView.thirdAnswer.microsoft_outlook.outlook_2007.first",
<li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2007.fifth')}}</li> )
<li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2007.sixth')}}</li> }}
</li>
<li>
{{
$t(
"faqView.thirdAnswer.microsoft_outlook.outlook_2007.second",
)
}}
</li>
<li>
{{
$t(
"faqView.thirdAnswer.microsoft_outlook.outlook_2007.third",
)
}}
</li>
<li>
{{
$t(
"faqView.thirdAnswer.microsoft_outlook.outlook_2007.fourth",
)
}}
</li>
<li>
{{
$t(
"faqView.thirdAnswer.microsoft_outlook.outlook_2007.fifth",
)
}}
</li>
<li>
{{
$t(
"faqView.thirdAnswer.microsoft_outlook.outlook_2007.sixth",
)
}}
</li>
</ol> </ol>
</AccordionTab> </AccordionTab>
<AccordionTab :header="$t('faqView.thirdAnswer.apple_osx.title')"> <AccordionTab :header="$t('faqView.thirdAnswer.apple_osx.title')">
<ol> <ol>
<li>{{$t('faqView.thirdAnswer.apple_osx.first')}}</li> <li>{{ $t("faqView.thirdAnswer.apple_osx.first") }}</li>
<li>{{$t('faqView.thirdAnswer.apple_osx.second')}}</li> <li>{{ $t("faqView.thirdAnswer.apple_osx.second") }}</li>
<li>{{$t('faqView.thirdAnswer.apple_osx.third')}}</li> <li>{{ $t("faqView.thirdAnswer.apple_osx.third") }}</li>
<li>{{$t('faqView.thirdAnswer.apple_osx.fourth')}}</li> <li>{{ $t("faqView.thirdAnswer.apple_osx.fourth") }}</li>
</ol> </ol>
</AccordionTab> </AccordionTab>
<AccordionTab :header="$t('faqView.thirdAnswer.thunderbird.title')"> <AccordionTab :header="$t('faqView.thirdAnswer.thunderbird.title')">
<ol> <ol>
<li>{{ $t('faqView.thirdAnswer.thunderbird.one') }}</li> <li>{{ $t("faqView.thirdAnswer.thunderbird.one") }}</li>
<li>{{ $t('faqView.thirdAnswer.thunderbird.two') }}</li> <li>{{ $t("faqView.thirdAnswer.thunderbird.two") }}</li>
<li>{{ $t('faqView.thirdAnswer.thunderbird.three') }}</li> <li>{{ $t("faqView.thirdAnswer.thunderbird.three") }}</li>
<li>{{ $t('faqView.thirdAnswer.thunderbird.four') }} </li> <li>{{ $t("faqView.thirdAnswer.thunderbird.four") }}</li>
<li>{{ $t('faqView.thirdAnswer.thunderbird.five') }}</li> <li>{{ $t("faqView.thirdAnswer.thunderbird.five") }}</li>
<li>{{ $t('faqView.thirdAnswer.thunderbird.six') }}</li> <li>{{ $t("faqView.thirdAnswer.thunderbird.six") }}</li>
<li>{{ $t('faqView.thirdAnswer.thunderbird.seven') }}</li> <li>{{ $t("faqView.thirdAnswer.thunderbird.seven") }}</li>
</ol> </ol>
</AccordionTab> </AccordionTab>
<AccordionTab :header="$t('faqView.thirdAnswer.iphone.title')"> <AccordionTab :header="$t('faqView.thirdAnswer.iphone.title')">
<p>{{$t('faqView.thirdAnswer.iphone.description')}}</p> <p>{{ $t("faqView.thirdAnswer.iphone.description") }}</p>
<ol> <ol>
<li>{{$t('faqView.thirdAnswer.iphone.one')}}</li> <li>{{ $t("faqView.thirdAnswer.iphone.one") }}</li>
<li>{{$t('faqView.thirdAnswer.iphone.two')}}</li> <li>{{ $t("faqView.thirdAnswer.iphone.two") }}</li>
<li>{{$t('faqView.thirdAnswer.iphone.three')}}</li> <li>{{ $t("faqView.thirdAnswer.iphone.three") }}</li>
<li>{{$t('faqView.thirdAnswer.iphone.four')}}</li> <li>{{ $t("faqView.thirdAnswer.iphone.four") }}</li>
<li>{{$t('faqView.thirdAnswer.iphone.five')}}</li> <li>{{ $t("faqView.thirdAnswer.iphone.five") }}</li>
<li>{{$t('faqView.thirdAnswer.iphone.six')}}</li> <li>{{ $t("faqView.thirdAnswer.iphone.six") }}</li>
<li>{{$t('faqView.thirdAnswer.iphone.seven')}}</li> <li>{{ $t("faqView.thirdAnswer.iphone.seven") }}</li>
<li>{{$t('faqView.thirdAnswer.iphone.eight')}}</li> <li>{{ $t("faqView.thirdAnswer.iphone.eight") }}</li>
<li>{{$t('faqView.thirdAnswer.iphone.nine')}}</li> <li>{{ $t("faqView.thirdAnswer.iphone.nine") }}</li>
</ol> </ol>
</AccordionTab> </AccordionTab>
<AccordionTab header="Android"> <AccordionTab header="Android">
<p>{{$t('faqView.thirdAnswer.android.description')}}</p> <p>{{ $t("faqView.thirdAnswer.android.description") }}</p>
</AccordionTab> </AccordionTab>
<AccordionTab header="Windows Phone"> <AccordionTab header="Windows Phone">
<p>{{$t('faqView.thirdAnswer.windows_phone.description')}}</p> <p>{{ $t("faqView.thirdAnswer.windows_phone.description") }}</p>
<ol> <ol>
<li>{{$t('faqView.thirdAnswer.windows_phone.one')}}</li> <li>{{ $t("faqView.thirdAnswer.windows_phone.one") }}</li>
<li>{{$t('faqView.thirdAnswer.windows_phone.two')}}</li> <li>{{ $t("faqView.thirdAnswer.windows_phone.two") }}</li>
<li>{{$t('faqView.thirdAnswer.windows_phone.three')}}</li> <li>{{ $t("faqView.thirdAnswer.windows_phone.three") }}</li>
<li>{{$t('faqView.thirdAnswer.windows_phone.four')}}</li> <li>{{ $t("faqView.thirdAnswer.windows_phone.four") }}</li>
<li>{{$t('faqView.thirdAnswer.windows_phone.five')}}</li> <li>{{ $t("faqView.thirdAnswer.windows_phone.five") }}</li>
<li>{{$t('faqView.thirdAnswer.windows_phone.six')}}</li> <li>{{ $t("faqView.thirdAnswer.windows_phone.six") }}</li>
<li>{{$t('faqView.thirdAnswer.windows_phone.seven')}}</li> <li>{{ $t("faqView.thirdAnswer.windows_phone.seven") }}</li>
<li>{{$t('faqView.thirdAnswer.windows_phone.eight')}}</li> <li>{{ $t("faqView.thirdAnswer.windows_phone.eight") }}</li>
</ol> </ol>
</AccordionTab> </AccordionTab>
</Accordion> </Accordion>
</div> </div>
</div> </div>
<div class="grid my-2"> <div class="grid my-2">
<div class="col">{{$t('faqView.fourthQuestion')}}</div> <div class="col">{{ $t("faqView.fourthQuestion") }}</div>
<div class="col">{{$t('faqView.fourthAnswer')}}</div> <div class="col">{{ $t("faqView.fourthAnswer") }}</div>
</div> </div>
<div class="grid my-2"> <div class="grid my-2">
<div class="col">{{$t('faqView.fifthQuestion')}}</div> <div class="col">{{ $t("faqView.fifthQuestion") }}</div>
<div class="col">{{$t('faqView.fifthAnswer')}}</div> <div class="col">{{ $t("faqView.fifthAnswer") }}</div>
</div> </div>
<div class="grid my-2"> <div class="grid my-2">
<div class="col my-2">{{$t('faqView.sixthQuestion')}}</div> <div class="col my-2">{{ $t("faqView.sixthQuestion") }}</div>
<div class="col">{{$t('faqView.sixthAnswer')}}</div> <div class="col">{{ $t("faqView.sixthAnswer") }}</div>
</div> </div>
<div class="grid my-2"> <div class="grid my-2">
<div class="col">{{$t('faqView.seventhQuestion')}}</div> <div class="col">{{ $t("faqView.seventhQuestion") }}</div>
<div class="col">{{$t('faqView.seventhAnswer')}}</div> <div class="col">{{ $t("faqView.seventhAnswer") }}</div>
</div> </div>
<div class="grid my-2"> <div class="grid my-2">
<div class="col">{{$t('faqView.eighthQuestion')}}</div> <div class="col">{{ $t("faqView.eighthQuestion") }}</div>
<div class="col">{{$t('faqView.eighthAnswer')}}</div> <div class="col">{{ $t("faqView.eighthAnswer") }}</div>
</div> </div>
<p> <p>
{{$t('faqView.notFound')}}<br /> {{ $t("faqView.notFound") }}<br />
<a href="/imprint">{{$t('faqView.contact')}}</a> <a href="/imprint">{{ $t("faqView.contact") }}</a>
</p> </p>
</div> </div>
</div> </div>

View File

@@ -1,7 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import {inject} from "vue"; import { inject } from "vue";
import {Module} from "../model/module.ts"; import { Module } from "../model/module.ts";
import {Event} from "../model/event.ts"; import { Event } from "../model/event.ts";
import moment from "moment-timezone"; import moment from "moment-timezone";
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -14,10 +14,10 @@ function formatTimestamp(timestampString: string): string {
const timestamp = moment(timestampString); const timestamp = moment(timestampString);
// Die Zeitzone auf "Europe/Berlin" setzen // Die Zeitzone auf "Europe/Berlin" setzen
const berlinTime = timestamp.tz('Europe/Berlin'); const berlinTime = timestamp.tz("Europe/Berlin");
// Das gewünschte Format für die Ausgabe festlegen // Das gewünschte Format für die Ausgabe festlegen
return berlinTime.format('DD.MM.YYYY HH:mm'); return berlinTime.format("DD.MM.YYYY HH:mm");
} }
function sortModuleEventsByStart(events: Event[]) { function sortModuleEventsByStart(events: Event[]) {
@@ -43,8 +43,14 @@ function sortModuleEventsByStart(events: Event[]) {
<tr> <tr>
<td> <td>
<div class="card"> <div class="card">
<DataTable :value="sortModuleEventsByStart(module.events)" table-style="min-width: 50rem"> <DataTable
<Column field="day" :header="$t('moduleInformation.day')"></Column> :value="sortModuleEventsByStart(module.events)"
table-style="min-width: 50rem"
>
<Column
field="day"
:header="$t('moduleInformation.day')"
></Column>
<Column field="start" :header="$t('moduleInformation.start')"> <Column field="start" :header="$t('moduleInformation.start')">
<template #body="slotProps"> <template #body="slotProps">
{{ formatTimestamp(slotProps.data.start) }} {{ formatTimestamp(slotProps.data.start) }}
@@ -52,12 +58,21 @@ function sortModuleEventsByStart(events: Event[]) {
</Column> </Column>
<Column field="end" :header="$t('moduleInformation.end')"> <Column field="end" :header="$t('moduleInformation.end')">
<template #body="slotProps"> <template #body="slotProps">
{{formatTimestamp( slotProps.data.end) }} {{ formatTimestamp(slotProps.data.end) }}
</template> </template>
</Column> </Column>
<Column field="rooms" :header="$t('moduleInformation.room')"></Column> <Column
<Column field="eventType" :header="$t('moduleInformation.type')"></Column> field="rooms"
<Column field="week" :header="$t('moduleInformation.week')"></Column> :header="$t('moduleInformation.room')"
></Column>
<Column
field="eventType"
:header="$t('moduleInformation.type')"
></Column>
<Column
field="week"
:header="$t('moduleInformation.week')"
></Column>
</DataTable> </DataTable>
</div> </div>
</td> </td>

View File

@@ -1,13 +1,16 @@
<script lang="ts" setup> <script lang="ts" setup>
import { defineAsyncComponent, ref, Ref } from "vue"; import { defineAsyncComponent, ref, Ref } from "vue";
import { Module } from "../../model/module"; import { Module } from "../../model/module.ts";
import { fetchAllModules } from "../../api/fetchCourse"; import { fetchAllModules } from "../../api/fetchCourse.ts";
import moduleStore from "../../store/moduleStore"; import moduleStore from "../../store/moduleStore";
import { MultiSelectAllChangeEvent } from "primevue/multiselect"; import { MultiSelectAllChangeEvent } from "primevue/multiselect";
import router from "../../router"; import router from "../../router";
import { fetchModule } from "../../api/fetchModule"; import { fetchModule } from "../../api/fetchModule.ts";
import { useDialog } from "primevue/usedialog"; import { useDialog } from "primevue/usedialog";
import { useI18n } from "vue-i18n";
const dialog = useDialog(); const dialog = useDialog();
const { t } = useI18n({ useScope: "global" });
const fetchedModules = async () => { const fetchedModules = async () => {
return await fetchAllModules(); return await fetchAllModules();
@@ -70,14 +73,29 @@ const onSelectAllChange = (event: MultiSelectAllChangeEvent) => {
function selectChange() { function selectChange() {
selectAll.value = selectedModules.value.length === modules.value.length; selectAll.value = selectedModules.value.length === modules.value.length;
} }
function itemsLabel(selectedModules: Module[]): string {
return (selectedModules ? selectedModules.length : 0) != 1
? t("additionalModules.modules")
: t("additionalModules.module");
}
function itemsLabelWithNumber(selectedModules: Module[]): string {
return (
selectedModules.length.toString() +
" " +
itemsLabel(selectedModules) +
" " +
t("additionalModules.dropDownFooterSelected")
);
}
</script> </script>
<template> <template>
<div class="flex flex-column"> <div class="flex flex-column">
<div class="flex align-items-center justify-content-center h-4rem m-2"> <div class="flex align-items-center justify-content-center h-4rem m-2">
<h3> <h3>
Select additional Modules that are not listed in the regular semester {{ $t("additionalModules.subTitle") }}
for your Course
</h3> </h3>
</div> </div>
<div class="card flex align-items-center justify-content-center m-2"> <div class="card flex align-items-center justify-content-center m-2">
@@ -90,8 +108,10 @@ function selectChange() {
:virtual-scroller-options="{ itemSize: 70 }" :virtual-scroller-options="{ itemSize: 70 }"
class="custom-multiselect" class="custom-multiselect"
filter filter
placeholder="Select additional modules" :placeholder="$t('additionalModules.dropDown')"
:auto-filter-focus="true" :auto-filter-focus="true"
:show-toggle-all="false"
:selected-items-label="itemsLabelWithNumber(selectedModules)"
@change="selectChange()" @change="selectChange()"
@selectall-change="onSelectAllChange($event)" @selectall-change="onSelectAllChange($event)"
> >
@@ -104,6 +124,7 @@ function selectChange() {
</div> </div>
<div class="flex align-items-center justify-content-center ml-2"> <div class="flex align-items-center justify-content-center ml-2">
<Button <Button
class="small-button"
icon="pi pi-info" icon="pi pi-info"
severity="secondary" severity="secondary"
rounded rounded
@@ -127,7 +148,9 @@ function selectChange() {
</MultiSelect> </MultiSelect>
</div> </div>
<div class="flex align-items-center justify-content-center h-4rem m-2"> <div class="flex align-items-center justify-content-center h-4rem m-2">
<Button @click="nextStep()">Next Step</Button> <Button @click="nextStep()">{{
$t("additionalModules.nextStep")
}}</Button>
</div> </div>
</div> </div>
</template> </template>
@@ -140,4 +163,10 @@ function selectChange() {
:deep(.custom-multiselect li) { :deep(.custom-multiselect li) {
height: unset; height: unset;
} }
.small-button.p-button {
width: 2rem;
height: 2rem;
padding: 0;
}
</style> </style>

View File

@@ -1,13 +1,15 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed, Ref, ref } from "vue"; import { computed, Ref, ref } from "vue";
import { Module } from "../../model/module"; import { Module } from "../../model/module.ts";
import moduleStore from "../../store/moduleStore"; import moduleStore from "../../store/moduleStore";
import { fetchAllModules } from "../../api/fetchCourse"; import { fetchAllModules } from "../../api/fetchCourse.ts";
import { saveIndividualFeed } from "../../api/createFeed"; import { saveIndividualFeed } from "../../api/createFeed.ts";
import tokenStore from "../../store/tokenStore"; import tokenStore from "../../store/tokenStore";
import router from "../../router"; import router from "../../router";
import ModuleTemplateDialog from "../ModuleTemplateDialog.vue"; import ModuleTemplateDialog from "../ModuleTemplateDialog.vue";
import { onlyWhitespace } from "../../helpers/strings.ts"; import { onlyWhitespace } from "../../helpers/strings.ts";
import { useI18n } from "vue-i18n";
const { t } = useI18n({ useScope: "global" });
const tableData = computed(() => const tableData = computed(() =>
moduleStore().modules.map((module: Module) => { moduleStore().modules.map((module: Module) => {
@@ -19,9 +21,9 @@ const tableData = computed(() =>
); );
const columns = ref([ const columns = ref([
{ field: "Course", header: "Course" }, { field: "Course", header: t("moduleInformation.course") },
{ field: "Module", header: "Module" }, { field: "Module", header: t("moduleInformation.module") },
{ field: "Reminder", header: "Reminder" }, { field: "Reminder", header: t("renameModules.reminder") },
]); ]);
const fetchedModules = async () => { const fetchedModules = async () => {
@@ -51,7 +53,7 @@ async function finalStep() {
<template> <template>
<div class="flex flex-column card-container mx-8 mt-2"> <div class="flex flex-column card-container mx-8 mt-2">
<div class="flex align-items-center justify-content-center h-4rem m-2"> <div class="flex align-items-center justify-content-center h-4rem m-2">
<h3>Rename your selected Modules to your liking.</h3> <h3>{{ $t("renameModules.subTitle") }}</h3>
<ModuleTemplateDialog /> <ModuleTemplateDialog />
</div> </div>
<div <div
@@ -65,7 +67,7 @@ async function finalStep() {
> >
<template #header> <template #header>
<div class="flex align-items-center justify-content-end"> <div class="flex align-items-center justify-content-end">
Enable all notifications: {{ $t("renameModules.enableAllNotifications") }}
<InputSwitch <InputSwitch
class="mx-4" class="mx-4"
:model-value=" :model-value="
@@ -152,7 +154,7 @@ async function finalStep() {
<div <div
class="flex align-items-center justify-content-center border-round m-2" class="flex align-items-center justify-content-center border-round m-2"
> >
<Button label="Save Calendar" @click="finalStep()" /> <Button @click="finalStep()">{{ $t("renameModules.nextStep") }}</Button>
</div> </div>
</div> </div>
</template> </template>

View File

@@ -49,7 +49,8 @@
"invalidToken": "Ungültiger Token", "invalidToken": "Ungültiger Token",
"headline": "Bearbeite deinen HTWKalender", "headline": "Bearbeite deinen HTWKalender",
"subTitle": "Füge deinen Link oder Token ein um den Kalender zu bearbeiten", "subTitle": "Füge deinen Link oder Token ein um den Kalender zu bearbeiten",
"loadCalendar": "Kalender laden" "loadCalendar": "Kalender laden",
"noCalendarFound": "Keinen Kalender gefunden"
}, },
"additionalModules": { "additionalModules": {
"subTitle": "Füge weitere Module hinzu die nicht in deinem Studiengang enthalten sind.", "subTitle": "Füge weitere Module hinzu die nicht in deinem Studiengang enthalten sind.",
@@ -63,7 +64,7 @@
"reminder": "Erinnerung", "reminder": "Erinnerung",
"enableAllNotifications": "Alle Benachrichtigungen aktivieren", "enableAllNotifications": "Alle Benachrichtigungen aktivieren",
"subTitle": "Konfigurieren Sie die ausgewählten Module nach Ihren Wünschen.", "subTitle": "Konfigurieren Sie die ausgewählten Module nach Ihren Wünschen.",
"nextStep": "Weiter" "nextStep": "Speichern"
}, },
"moduleTemplateDialog": { "moduleTemplateDialog": {
"explanationOne": "Hier können Module nach Wunsch umbenannt werden, welche dann als Anzeigename im Kalender dargestellt werden.", "explanationOne": "Hier können Module nach Wunsch umbenannt werden, welche dann als Anzeigename im Kalender dargestellt werden.",
@@ -132,13 +133,13 @@
}, },
"thunderbird": { "thunderbird": {
"title": "Thunderbird", "title": "Thunderbird",
"one" : "Erstelle deinen Kalender und kopiere den Link.", "one": "Erstelle deinen Kalender und kopiere den Link.",
"two" : "Im Menü “Termine und Aufgaben” den Punkt “Kalender” wählen. ", "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.", "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.", "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”).", "five": "Im folgenden Fenster lässt du das “Format” wie es ist (“iCalender”).",
"six" : "Unter \"Adresse\" den kopierten Kalenderlink einfügen.", "six": "Unter \"Adresse\" den kopierten Kalenderlink einfügen.",
"seven" : "Anschließend kannst du noch einen Namen vergeben und weitere Einstellungen nach Belieben vornehmen." "seven": "Anschließend kannst du noch einen Namen vergeben und weitere Einstellungen nach Belieben vornehmen."
}, },
"iphone": { "iphone": {
"title": "iPhone", "title": "iPhone",

View File

@@ -49,7 +49,8 @@
"invalidToken": "invalid token", "invalidToken": "invalid token",
"headline": "edit your HTWKalender", "headline": "edit your HTWKalender",
"subTitle": "please enter your link or calendar token", "subTitle": "please enter your link or calendar token",
"loadCalendar": "load calendar" "loadCalendar": "load calendar",
"noCalendarFound": "no calendar found"
}, },
"additionalModules": { "additionalModules": {
"subTitle": "Select additional Modules that are not listed in the regular semester for your Course", "subTitle": "Select additional Modules that are not listed in the regular semester for your Course",
@@ -63,7 +64,7 @@
"reminder": "reminder", "reminder": "reminder",
"enableAllNotifications": "enable all notifications", "enableAllNotifications": "enable all notifications",
"subTitle": "Configure your selected Modules to your liking.", "subTitle": "Configure your selected Modules to your liking.",
"nextStep": "next step" "nextStep": "Save"
}, },
"moduleTemplateDialog": { "moduleTemplateDialog": {
"explanationOne": "Here you can rename your modules to your liking. This will be the name of the event in your calendar.", "explanationOne": "Here you can rename your modules to your liking. This will be the name of the event in your calendar.",

View File

@@ -1,13 +1,13 @@
<script lang="ts" setup> <script lang="ts" setup>
import {defineAsyncComponent, ref, Ref} from "vue"; import { defineAsyncComponent, ref, Ref } from "vue";
import {Module} from "../model/module.ts"; import { Module } from "../model/module.ts";
import {fetchAllModules} from "../api/fetchCourse.ts"; import { fetchAllModules } from "../api/fetchCourse.ts";
import moduleStore from "../store/moduleStore.ts"; import moduleStore from "../store/moduleStore.ts";
import {MultiSelectAllChangeEvent} from "primevue/multiselect"; import { MultiSelectAllChangeEvent } from "primevue/multiselect";
import router from "../router"; import router from "../router";
import {fetchModule} from "../api/fetchModule.ts"; import { fetchModule } from "../api/fetchModule.ts";
import {useDialog} from "primevue/usedialog"; import { useDialog } from "primevue/usedialog";
import {useI18n} from "vue-i18n"; import { useI18n } from "vue-i18n";
const dialog = useDialog(); const dialog = useDialog();
const { t } = useI18n({ useScope: "global" }); const { t } = useI18n({ useScope: "global" });
@@ -76,11 +76,19 @@ function selectChange() {
} }
function itemsLabel(selectedModules: Module[]): string { function itemsLabel(selectedModules: Module[]): string {
return (selectedModules ? selectedModules.length : 0) != 1 ? t("additionalModules.modules") : t("additionalModules.module"); return (selectedModules ? selectedModules.length : 0) != 1
? t("additionalModules.modules")
: t("additionalModules.module");
} }
function itemsLabelWithNumber(selectedModules: Module[]): string { function itemsLabelWithNumber(selectedModules: Module[]): string {
return selectedModules.length.toString() + " " + itemsLabel(selectedModules) + " " + t("additionalModules.dropDownFooterSelected"); return (
selectedModules.length.toString() +
" " +
itemsLabel(selectedModules) +
" " +
t("additionalModules.dropDownFooterSelected")
);
} }
</script> </script>
@@ -104,9 +112,9 @@ function itemsLabelWithNumber(selectedModules: Module[]): string {
:placeholder="$t('additionalModules.dropDown')" :placeholder="$t('additionalModules.dropDown')"
:auto-filter-focus="true" :auto-filter-focus="true"
:show-toggle-all="false" :show-toggle-all="false"
:selected-items-label="itemsLabelWithNumber(selectedModules)"
@change="selectChange()" @change="selectChange()"
@selectall-change="onSelectAllChange($event)" @selectall-change="onSelectAllChange($event)"
:selectedItemsLabel="itemsLabelWithNumber(selectedModules)"
> >
<template #option="slotProps"> <template #option="slotProps">
<div class="flex justify-content-between w-full"> <div class="flex justify-content-between w-full">
@@ -117,6 +125,7 @@ function itemsLabelWithNumber(selectedModules: Module[]): string {
</div> </div>
<div class="flex align-items-center justify-content-center ml-2"> <div class="flex align-items-center justify-content-center ml-2">
<Button <Button
class="small-button"
icon="pi pi-info" icon="pi pi-info"
severity="secondary" severity="secondary"
rounded rounded
@@ -131,8 +140,10 @@ function itemsLabelWithNumber(selectedModules: Module[]): string {
<template #footer> <template #footer>
<div class="py-2 px-3"> <div class="py-2 px-3">
<b>{{ selectedModules ? selectedModules.length : 0 }}</b> <b>{{ selectedModules ? selectedModules.length : 0 }}</b>
{{ itemsLabel(selectedModules) }} item{{
{{ $t("additionalModules.dropDownFooterSelected") }} (selectedModules ? selectedModules.length : 0) > 1 ? "s" : ""
}}
selected.
</div> </div>
</template> </template>
</MultiSelect> </MultiSelect>
@@ -153,4 +164,10 @@ function itemsLabelWithNumber(selectedModules: Module[]): string {
:deep(.custom-multiselect li) { :deep(.custom-multiselect li) {
height: unset; height: unset;
} }
.small-button.p-button {
width: 2rem;
height: 2rem;
padding: 0;
}
</style> </style>

View File

@@ -46,14 +46,22 @@ function loadCalendar(): void {
moduleStore().removeAllModules(); moduleStore().removeAllModules();
tokenStore().setToken(token.value); tokenStore().setToken(token.value);
getCalender(token.value).then((data) => { getCalender(token.value).then((data: Module[]) => {
if (data.length > 0) {
data.forEach((module) => { data.forEach((module) => {
moduleStore().addModule(module); moduleStore().addModule(module);
}); });
modules.value = data; modules.value = data;
});
router.push("/edit-additional-modules"); router.push("/edit-additional-modules");
} else {
toast.add({
severity: "error",
summary: t("editCalendarView.error"),
detail: t("editCalendarView.noCalendarFound"),
life: 3000,
});
}
});
} }
</script> </script>
@@ -77,12 +85,20 @@ function loadCalendar(): void {
<div <div
class="flex align-items-center justify-content-center border-round m-2" class="flex align-items-center justify-content-center border-round m-2"
> >
<InputText v-model="token" type="text" autofocus @keyup.enter="loadCalendar" /> <InputText
v-model="token"
type="text"
autofocus
@keyup.enter="loadCalendar"
/>
</div> </div>
<div <div
class="flex align-items-center justify-content-center border-round m-2" class="flex align-items-center justify-content-center border-round m-2"
> >
<Button :label="$t('editCalendarView.loadCalendar')" @click="loadCalendar" /> <Button
:label="$t('editCalendarView.loadCalendar')"
@click="loadCalendar"
/>
</div> </div>
</div> </div>
</template> </template>

View File

@@ -3,7 +3,7 @@
<template> <template>
<div class="flex align-items-center justify-content-center flex-column"> <div class="flex align-items-center justify-content-center flex-column">
<div class="flex align-items-center justify-content-center h-4rem mt-2"> <div class="flex align-items-center justify-content-center h-4rem mt-2">
<h3 class="text-4xl">{{$t("imprint")}}</h3> <h3 class="text-4xl">{{ $t("imprint") }}</h3>
</div> </div>
<div class="flex flex-column col-7"> <div class="flex flex-column col-7">
<p>nach dem Telemediengesetz (TMG) der Bundesrepublik Deutschland.</p> <p>nach dem Telemediengesetz (TMG) der Bundesrepublik Deutschland.</p>

View File

@@ -3,7 +3,7 @@
<template> <template>
<div class="flex align-items-center justify-content-center flex-column"> <div class="flex align-items-center justify-content-center flex-column">
<div class="flex align-items-center justify-content-center h-4rem mt-2"> <div class="flex align-items-center justify-content-center h-4rem mt-2">
<h3 class="text-4xl">{{$t("privacy")}}</h3> <h3 class="text-4xl">{{ $t("privacy") }}</h3>
</div> </div>
<div class="flex flex-column col-7"> <div class="flex flex-column col-7">
<h1>Datenschutzerklärung</h1> <h1>Datenschutzerklärung</h1>