35 add template dialog component + info button

frontend/src/components/ModuleTemplateDialog.vue

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