feat:#11 dialog showing placeholders for renaming

frontend/src/components/RenameModules.vue

@@ -3,7 +3,7 @@ import moduleStore from "../store/moduleStore.ts";
 import { createIndividualFeed } from "../api/createFeed.ts";
 import router from "../router";
 import tokenStore from "../store/tokenStore.ts";
-import { ref } from "vue";
+import { Ref, ref } from "vue";
 
 const tableData = ref(
   moduleStore().modules.map((module) => {
@@ -19,6 +19,13 @@ const columns = ref([
   { field: "Module", header: "Module" },
 ]);
 
+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);
@@ -29,7 +36,28 @@ async function finalStep() {
 <template>
   <div class="flex flex-column">
     <div class="flex align-items-center justify-content-center h-4rem m-2">
-      <h3>Rename your selected Modules to your liking.</h3>
+      <h3>Rename your selected Modules to your liking.
+        <i class="pi pi-info-circle" @click="helpVisible = true"></i>
+      </h3>
+      <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>
     </div>
     <div class="card flex align-items-center justify-content-center m-2">
       <DataTable