mirror of
https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender.git
synced 2025-08-03 02:09:15 +02:00
Merge remote-tracking branch 'origin/main' into 21-customizable-events
This commit is contained in:
49
frontend/src/components/ModuleTemplateDialog.vue
Normal file
49
frontend/src/components/ModuleTemplateDialog.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<script setup lang="ts">
|
||||
import { Ref, ref } from "vue";
|
||||
|
||||
const helpVisible: Ref<boolean> = ref(false);
|
||||
|
||||
const placeholders = ref([
|
||||
{ placeholder: "%t", description: "Event Type", examples: "V = Vorlesung, S = Seminar, P = Praktikum/Prüfung" },
|
||||
{ placeholder: "%p", description: "Mandatory", examples: "w = optional, p = mandatory" },
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button
|
||||
icon="pi pi-info"
|
||||
class="m-2 small-button"
|
||||
severity="help"
|
||||
rounded
|
||||
outlined
|
||||
size="large"
|
||||
aria-label="Help"
|
||||
@click="helpVisible = true" />
|
||||
<Dialog
|
||||
v-model:visible="helpVisible"
|
||||
header="Module placeholders"
|
||||
>
|
||||
<p>
|
||||
Here you can rename your modules to your liking. This will be the name
|
||||
of the event in your calendar.
|
||||
</p>
|
||||
<p>
|
||||
You can use the following placeholders in your module names:
|
||||
</p>
|
||||
<DataTable
|
||||
:value="placeholders"
|
||||
>
|
||||
<Column field="placeholder" header="Placeholder"></Column>
|
||||
<Column field="description" header="Description"></Column>
|
||||
<Column field="examples" header="Examples"></Column>
|
||||
</DataTable>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.small-button.p-button {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
@@ -3,7 +3,8 @@ import moduleStore from "../store/moduleStore.ts";
|
||||
import { createIndividualFeed } from "../api/createFeed.ts";
|
||||
import router from "../router";
|
||||
import tokenStore from "../store/tokenStore.ts";
|
||||
import { Ref, ref } from "vue";
|
||||
import { ref } from "vue";
|
||||
import ModuleTemplateDialog from "./ModuleTemplateDialog.vue";
|
||||
|
||||
const tableData = ref(
|
||||
moduleStore().modules.map((module) => {
|
||||
@@ -20,13 +21,6 @@ const columns = ref([
|
||||
{ field: "Reminder", header: "Reminder"}
|
||||
]);
|
||||
|
||||
const helpVisible: Ref<boolean> = ref(false);
|
||||
|
||||
const placeholders = ref([
|
||||
{ placeholder: "%t", description: "Event Type", examples: "V = Vorlesung, S = Seminar, P = Praktikum/Prüfung" },
|
||||
{ placeholder: "%p", description: "Mandatory", examples: "w = optional, p = mandatory" },
|
||||
]);
|
||||
|
||||
async function finalStep() {
|
||||
const token: string = await createIndividualFeed(moduleStore().modules);
|
||||
tokenStore().setToken(token);
|
||||
@@ -38,26 +32,7 @@ async function finalStep() {
|
||||
<div class="flex flex-column">
|
||||
<div class="flex align-items-center justify-content-center h-4rem m-2">
|
||||
<h3>Configure your selected Modules to your liking.</h3>
|
||||
<i class="shadow-3 hover:shadow-8 pi pi-info-circle m-2" style="font-size: 1.5rem; color: orange" @click="helpVisible = true"></i>
|
||||
<Dialog
|
||||
v-model:visible="helpVisible"
|
||||
header="Module placeholders"
|
||||
>
|
||||
<p>
|
||||
Here you can rename your modules to your liking. This will be the name
|
||||
of the event in your calendar.
|
||||
</p>
|
||||
<p>
|
||||
You can use the following placeholders in your module names:
|
||||
</p>
|
||||
<DataTable
|
||||
:value="placeholders"
|
||||
>
|
||||
<Column field="placeholder" header="Placeholder"></Column>
|
||||
<Column field="description" header="Description"></Column>
|
||||
<Column field="examples" header="Examples"></Column>
|
||||
</DataTable>
|
||||
</Dialog>
|
||||
<ModuleTemplateDialog />
|
||||
</div>
|
||||
<div class="card flex align-items-center justify-content-center m-2">
|
||||
<DataTable
|
||||
|
@@ -6,6 +6,7 @@ import { fetchAllModules } from "../../api/fetchCourse";
|
||||
import { saveIndividualFeed } from "../../api/createFeed";
|
||||
import tokenStore from "../../store/tokenStore";
|
||||
import router from "../../router";
|
||||
import ModuleTemplateDialog from "../ModuleTemplateDialog.vue";
|
||||
|
||||
const tableData = computed(() =>
|
||||
moduleStore().modules.map((module: Module) => {
|
||||
@@ -48,8 +49,12 @@ async function finalStep() {
|
||||
|
||||
<template>
|
||||
<div class="flex flex-column card-container mx-8 mt-2">
|
||||
<div class="flex align-items-center justify-content-center h-4rem m-2">
|
||||
<h3>Rename your selected Modules to your liking.</h3>
|
||||
<ModuleTemplateDialog />
|
||||
</div>
|
||||
<div
|
||||
class="flex align-items-center justify-content-center border-round m-2"
|
||||
class="card flex align-items-center justify-content-center border-round m-2"
|
||||
>
|
||||
<DataTable
|
||||
:value="tableData"
|
||||
|
Reference in New Issue
Block a user