Merge remote-tracking branch 'origin/master' into AddBranchToCurriculum

frontend/public/i18n/EN.txt

@@ -121,6 +121,7 @@ Curriculum=curriculum
 Credits=Credits
 InscriptionService=I.S.
 faculty=Faculty
+msg.notification.new=You have a new message
 forum.create=Create forum
 forum.create.name=New forum's name
 forum.post.create.name=New post's title 

frontend/public/i18n/FR.txt

@@ -121,6 +121,7 @@ Curriculum=Cursus
 Credits=Credits
 InscriptionService=S.I.
 faculty=Faculté
+msg.notification.new=Vous avez un nouveau message!
 forum.create=Créer un forum
 forum.create.name=Nom du forum
 forum.post.create.name=Titre du post

frontend/src/App.vue

@@ -3,6 +3,7 @@
   import { ref } from 'vue'
   import i18n, { setLang } from './i18n.js'
   import { isLogged } from '@/rest/Users.js'
+	import { notifications, fetchNotifications, archiveNotification } from '@/rest/notifications.js'
 
   import { appList, currentView } from '@/rest/apps.js'
 		var prevURL;
@@ -14,16 +15,20 @@ window.onhashchange = function() {
 }
 const Logged = ref(isLogged());
 
+if(Logged.value){
+	fetchNotifications();
+}
+
 window.addEventListener('hashchange', () => {
  if((location.hash === "#/home" && prevURL === "#/login") || (location.hash === "#/home" && prevURL === "#/profil")){
 		window.location.reload();
  }
 });
   const home=ref(i18n("app.home"))
-  const notifications=ref(i18n("app.notifications"))
   const settings=ref(i18n("app.settings"))
   const login=ref(i18n("app.login"))
   const active=ref(false)
+	const notification = ref(false)
 
 	const apps = ref([])
 	appList().then(e => apps.value = e)
@@ -44,14 +49,17 @@ window.addEventListener('hashchange', () => {
             </a></li>
         <li style="float: right;" title=login>
             <a class="icon" href="#/login">
-                <div class="fa-solid fa-user" :style="Logged ? 'color: orange' : 'haha'" style="margin-top: 7px; margin-bottom: 3px; "></div>
+                <div class="fa-solid fa-user" :style="Logged ? 'color: red' : ''" style="margin-top: 7px; margin-bottom: 3px; "></div>
             </a></li>
-        <li style="float: right;" title=notifications>
-            <a class="icon" href="#Notifications">
-                <div class="fa-solid fa-bell"  style="margin-top: 7px; margin-bottom: 3px;"></div>
+        <li style="float: right;" title=notifications @click="notification = !notification">
+            <a class="icon">
+                <div class="fa-solid fa-bell" :style="notifications.length != 0 ? 'color:orange': '' " style="margin-top: 7px; margin-bottom: 3px;"></div>
+										<ul v-if=notification id="notification">
+												<li v-for="notif in notifications" @click="archiveNotification(notif.id)"> {{ i18n(notif.subject) }} - {{ notif.body }}</li>	
+										</ul>
             </a></li>
         <li @click="active=!active" class="option"style="float: right;" title=settings>
-            <a class="icon" >
+            <a class="icon">
                 <div  class="fa-solid fa-gear"  style="margin-top: 7px; margin-bottom: 3px;"></div>
                 <div v-if="active" class="dropdown">
                   <div class="dropdown-content">{{i18n("app.language")}}</div>
@@ -215,8 +223,6 @@ window.addEventListener('hashchange', () => {
 		background-color: black;
 		border-radius:6px;
 		color:white;
-		transform: translate(0px ,1px);
-		
 	}
 
 	  ul.vertical:hover {
@@ -250,6 +256,32 @@ window.addEventListener('hashchange', () => {
 	  .clyde:hover{
 		  content: url("./assets/angry_clyde.png")
 	  }
+
+		#notification{
+			position: absolute;
+			top: 61px;
+			right: 0;
+			background-color: white;
+			width: 300px;
+			height: 600px;
+			border-radius: 10px;
+			margin: 10px;
+		}
+
+		#notification > li{
+			color: black;
+			list-style: none;
+			font-size: 0.4em;
+			display: block;
+			background-color: #00FF00A0;
+			margin: 1px;
+			border-radius: 42px;
+			padding: 10px;
+		}
+
+		#notification > li:hover{
+				background-color: #00FF0000
+		}
     
 </style>
 

frontend/src/Apps/Forums.vue

@@ -15,7 +15,7 @@ import { fetchedPost, fetchPost, sendAnswer } from '@/rest/forum.js'
 import { getSelf } from '@/rest/Users.js'
 
 const Role = (await getSelf()).role;
-const courses = Role === 'Admin' || Role === 'Secretary' ? await reactive(getCourses()) : await reactive(getUserActualCourses());
+const courses = Role === 'Admin' || Role === 'Secretary' || Role === 'Teacher' ? await reactive(getCourses(Role)) : await reactive(getUserActualCourses());
 const selectedCourse = ref();
 const selectedForum = ref();
 

frontend/src/rest/notifications.js

@@ -0,0 +1,12 @@
+import { ref } from 'vue'
+import { restGet, restPost } from '@/rest/restConsumer.js'
+
+export const notifications = ref([]);
+
+export function fetchNotifications(){
+	restGet("/notifications").then( e => notifications.value = e );
+}
+
+export function archiveNotification(id){
+	restPost("/notifications/" + id).then( e => fetchNotifications() );
+}