Merge remote-tracking branch 'origin/main' into 21-customizable-events

This commit is contained in:
survellow
2023-11-01 19:19:48 +01:00
3 changed files with 58 additions and 29 deletions

View 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>

View File

@@ -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

View File

@@ -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"