Adding frontend visual side

frontend/src/Apps/Forums.vue

@@ -0,0 +1,138 @@
+<!----------------------------------------------------
+	File: Forums.vue 
+	Author: Anthony Debucquoy 
+	Scope: Extension messagerie
+	Description: Forum des étudiants
+----------------------------------------------------->
+
+<script setup>
+import { ref, reactive } from 'vue'
+import { getCourses } from '@/rest/courses.js'
+import { ForumsOfCurrentCourse, getForumsOfCourse } from '@/rest/forum.js'
+import { PostsOfCurrentForum, getPostsOfForum } from '@/rest/forum.js'
+import { fetchedPost, fetchPost } from '@/rest/forum.js'
+
+const courses = await reactive(getCourses());
+const selectedCourse = ref();
+const selectedForum = ref();
+
+</script>
+
+<template>
+	<div id="app">
+		<div id="ForumSelector">
+			<select id="cours" value="" v-model="selectedCourse"  @change="getForumsOfCourse(selectedCourse)">
+				<option v-for="course in courses" :value="course.courseId">{{course.title}}</option>
+			</select>
+
+			<select id="forum" value="" v-model="selectedForum"  @change="getPostsOfForum(selectedForum)" v-if="ForumsOfCurrentCourse != null">
+				<option v-for="forum in ForumsOfCurrentCourse" :value=forum.id>{{forum.name}}</option>
+			</select>
+		</div>
+		<div id="PostSelector" v-if="PostsOfCurrentForum != null">
+			<div @click="fetchPost(post.id)" class="postItem" v-for="post in PostsOfCurrentForum" :key="post.id">{{ post.name }}</div>
+			<!--button id="createPost" @click="createPost()">+</button-->
+		</div>
+		<div id="PostViewer" v-if="fetchedPost != null">
+			<div id="Post">
+				<h1>{{ fetchedPost.subject }}</h1>
+				{{fetchedPost.content}}
+			</div>
+			<div id="Messages">
+				<p v-for="msg in fetchedPost.messages">{{msg.author}} - {{msg.content}}</p>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+
+#app{
+	display: grid;
+	width: 100%;
+	height: 100%;
+	grid-template: 5em auto / 25% 75%;
+}
+
+#ForumSelector{
+	background-color: #FFFFFF0E;
+	grid-column: 1 / 3;
+	border-radius: 100px;
+	margin: 10px;
+	display: flex;
+	justify-content: space-around;
+}
+
+#ForumSelector select{
+	background-color: #ffa000;
+	border: none;
+	margin: 10px;
+	border-radius: 10px;
+	width: 200px;
+	text-align: center;
+}
+
+#ForumSelector button{
+	background-color: green;
+	border: none;
+	border-radius: 25%;
+	margin: 10px;
+}
+
+#PostSelector{
+	background-color: #FFFFFF0E;
+	border-radius: 0 25px 25px 0;
+	margin: 10px 0 10px 10px;
+	overflow: hidden;
+	padding: 10px;
+
+	display: flex;
+	flex-direction: column;
+
+}
+
+.postItem{
+	color: darkorange;
+	display: flex;
+	font-family: sans-serif;
+	font-weight: bold;
+	height: 4vh;
+	margin: 5px;
+	border-radius: 0 30px 30px 0;
+	align-items: center;
+	justify-content: center;
+	border: 1px solid darkorange;
+}
+
+.postItem:hover{
+	background-color: gray;
+}
+
+#PostViewer{
+	background-color: #FFFFFF0E;
+	border-radius: 25px;
+	margin: 10px;
+
+	max-height: 100%;
+
+	overflow: scroll;
+}
+
+#Post{
+	padding: 25px;
+
+}
+
+#Messages{
+	padding: 25px;
+	border-top: 3px dotted white;
+
+}
+
+#Messages > p {
+
+	background-color: orange;
+}
+
+</style>
+