mirror of
https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender.git
synced 2026-01-19 04:52:26 +01:00
refactor pages to new folder structure
This commit is contained in:
survellow
54
frontend/src/view/edit/EditAdditionalModules.vue
Normal file
54
frontend/src/view/edit/EditAdditionalModules.vue
Normal file
@@ -0,0 +1,54 @@
|
||||
<!--
|
||||
Calendar implementation for the HTWK Leipzig timetable. Evaluation and display of the individual dates in iCal format.
|
||||
Copyright (C) 2024 HTWKalender support@htwkalender.de
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
-->
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { defineAsyncComponent } from "vue";
|
||||
import moduleStore from "@/store/moduleStore";
|
||||
import router from "@/router";
|
||||
|
||||
const store = moduleStore();
|
||||
const AdditionalModuleTable = defineAsyncComponent(
|
||||
() => import("@/components/AdditionalModuleTable.vue"),
|
||||
);
|
||||
|
||||
async function nextStep() {
|
||||
await router.push("/edit-calendar");
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-column align-items-center w-full mb-7">
|
||||
<div class="flex align-items-center justify-content-center m-2">
|
||||
<h3>
|
||||
{{ $t("additionalModules.subTitle") }}
|
||||
</h3>
|
||||
</div>
|
||||
<AdditionalModuleTable />
|
||||
<div
|
||||
class="flex align-items-center justify-content-end h-4rem m-2 w-full lg:w-10"
|
||||
>
|
||||
<Button
|
||||
:disabled="store.isEmpty()"
|
||||
class="col-12 md:col-4 mb-3 align-self-end"
|
||||
icon="pi pi-arrow-right"
|
||||
:label="$t('additionalModules.nextStep')"
|
||||
@click="nextStep()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
116
frontend/src/view/edit/EditCalendar.vue
Normal file
116
frontend/src/view/edit/EditCalendar.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<!--
|
||||
Calendar implementation for the HTWK Leipzig timetable. Evaluation and display of the individual dates in iCal format.
|
||||
Copyright (C) 2024 HTWKalender support@htwkalender.de
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
-->
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Ref, ref } from "vue";
|
||||
import { Module } from "@/model/module";
|
||||
import moduleStore from "@/store/moduleStore";
|
||||
import { getCalender } from "@/api/loadCalendar";
|
||||
import router from "@/router";
|
||||
import tokenStore from "@/store/tokenStore";
|
||||
import { useToast } from "primevue/usetoast";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import DynamicPage from "@/view/DynamicPage.vue";
|
||||
const { t } = useI18n({ useScope: "global" });
|
||||
|
||||
const toast = useToast();
|
||||
|
||||
const token: Ref<string> = ref("");
|
||||
const modules: Ref<Map<string, Module>> = ref(moduleStore().modules);
|
||||
|
||||
const tokenRegex = /^[a-z0-9]{15}$/;
|
||||
const tokenUriRegex = /[?&]token=([a-z0-9]{15})(?:&|$)/;
|
||||
|
||||
const isToken = (token: string): boolean => {
|
||||
return tokenRegex.test(token) || tokenUriRegex.test(token);
|
||||
};
|
||||
|
||||
function extractToken(token: string): string {
|
||||
if (tokenRegex.test(token)) {
|
||||
return token;
|
||||
}
|
||||
|
||||
const match = tokenUriRegex.exec(token);
|
||||
if (match) {
|
||||
return match[1];
|
||||
}
|
||||
|
||||
throw new Error("Invalid token");
|
||||
}
|
||||
|
||||
function loadCalendar(): void {
|
||||
try {
|
||||
token.value = extractToken(token.value);
|
||||
} catch (e) {
|
||||
toast.add({
|
||||
severity: "error",
|
||||
summary: t("editCalendarView.error"),
|
||||
detail: t("editCalendarView.invalidToken"),
|
||||
life: 3000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
moduleStore().removeAllModules();
|
||||
tokenStore().setToken(token.value);
|
||||
|
||||
getCalender(token.value).then((data: Module[]) => {
|
||||
if (data.length > 0) {
|
||||
data.forEach((module) => {
|
||||
moduleStore().addModule(module);
|
||||
});
|
||||
modules.value = moduleStore().modules;
|
||||
router.push("/edit-calendar");
|
||||
} else {
|
||||
toast.add({
|
||||
severity: "error",
|
||||
summary: t("editCalendarView.error"),
|
||||
detail: t("editCalendarView.noCalendarFound"),
|
||||
life: 3000,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DynamicPage
|
||||
hide-content
|
||||
:headline="$t('editCalendarView.headline')"
|
||||
:sub-title="$t('editCalendarView.subTitle')"
|
||||
icon="pi pi-pencil"
|
||||
:button="{
|
||||
label: $t('editCalendarView.loadCalendar'),
|
||||
icon: 'pi pi-arrow-down',
|
||||
disabled: !isToken(token),
|
||||
onClick: loadCalendar,
|
||||
}"
|
||||
>
|
||||
<template #selection="{ flexSpecs }">
|
||||
<InputText
|
||||
v-model="token"
|
||||
type="text"
|
||||
:class="flexSpecs"
|
||||
autofocus
|
||||
@keyup.enter="loadCalendar"
|
||||
/>
|
||||
</template>
|
||||
</DynamicPage>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
278
frontend/src/view/edit/EditModules.vue
Normal file
278
frontend/src/view/edit/EditModules.vue
Normal file
@@ -0,0 +1,278 @@
|
||||
<!--
|
||||
Calendar implementation for the HTWK Leipzig timetable. Evaluation and display of the individual dates in iCal format.
|
||||
Copyright (C) 2024 HTWKalender support@htwkalender.de
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
-->
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, inject, Ref, ref } from "vue";
|
||||
import { Module } from "@/model/module.ts";
|
||||
import moduleStore from "@/store/moduleStore";
|
||||
import { fetchAllModules } from "@/api/fetchCourse.ts";
|
||||
import { deleteIndividualFeed, saveIndividualFeed } from "@/api/createFeed.ts";
|
||||
import tokenStore from "@/store/tokenStore";
|
||||
import router from "@/router";
|
||||
import ModuleTemplateDialog from "@/components/ModuleTemplateDialog.vue";
|
||||
import { onlyWhitespace } from "@/helpers/strings.ts";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useToast } from "primevue/usetoast";
|
||||
const { t } = useI18n({ useScope: "global" });
|
||||
|
||||
const toast = useToast();
|
||||
const visible = ref(false);
|
||||
|
||||
defineProps({
|
||||
class: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
});
|
||||
|
||||
const store = moduleStore();
|
||||
|
||||
const tableData = computed(() =>
|
||||
store.getAllModules().map((module: Module) => {
|
||||
return {
|
||||
Course: module.course,
|
||||
Module: module,
|
||||
};
|
||||
}),
|
||||
);
|
||||
const mobilePage = inject("mobilePage") as Ref<boolean>;
|
||||
|
||||
const columns = computed(() => [
|
||||
{ field: "Course", header: t("moduleInformation.course") },
|
||||
{ field: "Module", header: t("moduleInformation.module") },
|
||||
{ field: "Reminder", header: t("renameModules.reminder") },
|
||||
]);
|
||||
|
||||
const fetchedModules = async () => {
|
||||
return await fetchAllModules();
|
||||
};
|
||||
|
||||
function deleteModule(module: Module) {
|
||||
moduleStore().removeModule(module);
|
||||
}
|
||||
|
||||
const modules: Ref<Module[]> = ref([]);
|
||||
|
||||
fetchedModules().then(
|
||||
(data) =>
|
||||
(modules.value = data.map((module: Module) => {
|
||||
return module;
|
||||
})),
|
||||
);
|
||||
|
||||
async function finalStep() {
|
||||
await saveIndividualFeed(tokenStore().token, store.getAllModules());
|
||||
await router.push("/calendar-link");
|
||||
}
|
||||
|
||||
async function deleteFeed() {
|
||||
deleteIndividualFeed(tokenStore().token).then(
|
||||
() => {
|
||||
toast.add({
|
||||
severity: "success",
|
||||
summary: t("editCalendarView.toast.success"),
|
||||
detail: t("editCalendarView.toast.successDetail"),
|
||||
life: 3000,
|
||||
});
|
||||
visible.value = false;
|
||||
router.push("/");
|
||||
},
|
||||
() => {
|
||||
toast.add({
|
||||
severity: "error",
|
||||
summary: t("editCalendarView.toast.error"),
|
||||
detail: t("editCalendarView.toast.errorDetail"),
|
||||
life: 3000,
|
||||
});
|
||||
},
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-column align-items-center mb-7">
|
||||
<div class="flex align-items-center justify-content-center m-2 gap-2">
|
||||
<h3>{{ $t("renameModules.subTitle") }}</h3>
|
||||
<ModuleTemplateDialog />
|
||||
</div>
|
||||
<div class="w-full lg:w-8 flex flex-column">
|
||||
<div class="card flex align-items-center justify-content-center my-2">
|
||||
<DataTable
|
||||
:value="tableData"
|
||||
edit-mode="cell"
|
||||
table-class="editable-cells-table"
|
||||
responsive-layout="scroll"
|
||||
:size="mobilePage ? 'small' : 'large'"
|
||||
class="w-full"
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex align-items-center justify-content-end">
|
||||
{{ $t("renameModules.enableAllNotifications") }}
|
||||
<InputSwitch
|
||||
class="mx-4"
|
||||
:model-value="
|
||||
tableData.reduce(
|
||||
(acc, curr) => acc && curr.Module.reminder,
|
||||
true,
|
||||
)
|
||||
"
|
||||
@update:model-value="
|
||||
tableData.forEach(
|
||||
(module) => (module.Module.reminder = $event),
|
||||
)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<Column
|
||||
v-for="col of columns"
|
||||
:key="col.field"
|
||||
:field="col.field"
|
||||
:header="col.header"
|
||||
:class="col.field === 'Reminder' ? 'text-center' : ''"
|
||||
>
|
||||
<!-- Text Body -->
|
||||
<template #body="{ data, field }">
|
||||
<template v-if="field === 'Module'">
|
||||
{{
|
||||
onlyWhitespace(data[field].userDefinedName)
|
||||
? data[field].name
|
||||
: data[field].userDefinedName
|
||||
}}
|
||||
</template>
|
||||
<template v-else-if="field === 'Reminder'">
|
||||
<div class="flex align-items-start">
|
||||
<Button
|
||||
icon="pi pi-bell"
|
||||
:severity="data.Module.reminder ? 'warning' : 'secondary'"
|
||||
rounded
|
||||
outlined
|
||||
class="small-button"
|
||||
@click="data.Module.reminder = !data.Module.reminder"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ data[field] }}
|
||||
</template>
|
||||
</template>
|
||||
<!-- Editor Body -->
|
||||
<template #editor="{ data, field }">
|
||||
<template v-if="field === 'Module'">
|
||||
<InputText
|
||||
v-model="data[field].userDefinedName"
|
||||
class="w-full"
|
||||
autofocus
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="field === 'Reminder'">
|
||||
<div class="flex align-items-start">
|
||||
<Button
|
||||
icon="pi pi-bell"
|
||||
:severity="data.Module.reminder ? 'warning' : 'secondary'"
|
||||
rounded
|
||||
outlined
|
||||
class="small-button"
|
||||
@click="data.Module.reminder = !data.Module.reminder"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ data[field] }}
|
||||
</template>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="module">
|
||||
<template #body="{ data }">
|
||||
<Button
|
||||
icon="pi pi-trash"
|
||||
class="small-button"
|
||||
severity="danger"
|
||||
outlined
|
||||
rounded
|
||||
aria-label="Cancel"
|
||||
@click="deleteModule(data['Module'])"
|
||||
/>
|
||||
</template>
|
||||
</Column>
|
||||
<template #footer>
|
||||
<div
|
||||
class="flex flex-column sm:flex-row flex-wrap justify-content-between gap-2 w-full"
|
||||
>
|
||||
<Button
|
||||
type="button"
|
||||
severity="danger"
|
||||
outlined
|
||||
icon="pi pi-trash"
|
||||
:label="$t('editCalendarView.delete')"
|
||||
@click="visible = true"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
severity="info"
|
||||
outlined
|
||||
icon="pi pi-plus"
|
||||
:label="$t('editCalendarView.addModules')"
|
||||
@click="router.push('edit-additional-modules')"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
severity="success"
|
||||
outlined
|
||||
icon="pi pi-save"
|
||||
:label="$t('editCalendarView.save')"
|
||||
@click="finalStep()"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</DataTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card flex justify-content-center">
|
||||
<Dialog
|
||||
v-model:visible="visible"
|
||||
modal
|
||||
header="Header"
|
||||
:style="{ width: '50rem' }"
|
||||
:breakpoints="{ '1199px': '75vw', '575px': '90vw' }"
|
||||
>
|
||||
<template #header>
|
||||
<div
|
||||
class="inline-flex align-items-center justify-content-center gap-2"
|
||||
>
|
||||
<span class="font-bold white-space-nowrap">{{
|
||||
$t("editCalendarView.dialog.headline")
|
||||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<p class="m-0">{{ $t("editCalendarView.dialog.subTitle") }}</p>
|
||||
<template #footer>
|
||||
<Button
|
||||
:label="$t('editCalendarView.dialog.delete')"
|
||||
severity="danger"
|
||||
icon="pi pi-trash"
|
||||
autofocus
|
||||
@click="deleteFeed()"
|
||||
/>
|
||||
</template>
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
Reference in New Issue
Block a user