setup grid to display courses

backend/build.gradle.kts

@@ -25,7 +25,6 @@ dependencies {
 	implementation("com.kohlschutter.junixsocket:junixsocket-core:2.9.0")
 	// implementation("org.springframework.session:spring-session-jdbc")
 	developmentOnly("org.springframework.boot:spring-boot-devtools")
-  // developmentOnly("org.springframework.boot:spring-boot-docker-compose")
 	runtimeOnly("org.postgresql:postgresql")
 	testImplementation("org.springframework.boot:spring-boot-starter-test")
 	testImplementation("org.springframework.boot:spring-boot-testcontainers")

backend/src/main/java/ovh/herisson/Clyde/EndPoints/ApplicationsController.java

@@ -47,6 +47,7 @@ public class ApplicationsController {
 
         //if unAuthed
         authorizedApps.add(Applications.Login);
+        authorizedApps.add(Applications.Schedule);
 
 		User user = authServ.getUserFromToken(token);
 		if(user == null)

backend/src/main/java/ovh/herisson/Clyde/Tables/Applications.java

@@ -3,6 +3,7 @@ package ovh.herisson.Clyde.Tables;
 public enum Applications {
     // without any token
     Login,
+    Schedule,
 
     // with any token
     Profile,

frontend/src/App.vue

@@ -25,7 +25,6 @@ window.addEventListener('hashchange', () => {
   const login=ref(i18n("app.login"))
   const active=ref(false)
 
-
 	const apps = ref([])
 	appList().then(e => apps.value = e)
 

frontend/src/Apps/Schedule.vue

@@ -0,0 +1,211 @@
+<script setup>
+  import { ref } from 'vue'
+ 
+  const schedule = [
+    {course:"Math Pour L'info",
+     start:"Wed Mar 27 2024 10:15 GMT+0100",
+     end:"Wed Mar 27 2024 12:15 GMT+0100"},
+    {
+      course:"Calculus",
+      start:"Wed Mar 27 2024 08:00 GMT+0100",
+      end:"Wed Mar 27 2024 10:00 GMT+0100"
+      
+  },
+  {
+      course:"Physique II",
+      start:"Tue Mar 26 2024 10:15 GMT+0100",
+      end:"Tue Mar 26 2024 12:15 GMT+0100"      
+  },
+    {
+      course:"Math Pour L'info",
+      start:"Thu Mar 28 2024 10:15 GMT+0100",
+      end:"Thu Mar 28 2024 12:15 GMT+0100"      
+  }]
+  function formatDate(date) {
+    var d = new Date(date),
+        month = '' + (d.getMonth() + 1),
+        day = '' + d.getDate(),
+        year = d.getFullYear();
+
+    if (month.length < 2) 
+        month = '0' + month;
+    if (day.length < 2) 
+        day = '0' + day;
+
+    return [day, month, year].join('-');
+  }
+  function getMonday(d) {
+    d = new Date(d);
+    var day = d.getDay(),
+    diff = d.getDate() - day + (day == 0 ? -6 : 1);
+    return new Date(d.setDate(diff));
+  }
+
+  function getAnyDays(d){
+
+    var day = new Date(mondayOfWeek.value);
+    day.setDate(day.getDate() + d );
+
+    return day;
+  }
+
+  const mondayOfWeek=ref(getMonday(new Date(schedule[1].start)))
+
+  function isNotCourse(element){
+    return element==null;
+  }
+
+  function durationCourse(element){
+    const hour = element.end.substring(3,5) -element.start.substring(3,5);
+    
+    
+    return (element.end - element.start)%2;
+  }
+  function sortByDate(a, b) {
+    const nameA = a.start; // ignore upper and lowercase
+    const nameB = b.start; // ignore upper and lowercase
+    
+    if (nameA < nameB) {
+      return -1;
+    }
+    if (nameA > nameB) {
+      return 1;
+    }
+    return 0; 
+      }
+
+  function transpose(a) {
+    const trans = [[],[],[],[],[],[]];
+    for(let i = 0; i < 6;i++){
+      for(let j=0; j< 7; j++){
+        if(a[j][i] !== null){
+          trans[i].push(a[j][i]);
+        }
+      }
+    }
+    return trans;
+}
+
+  function matrixFromList(list){
+    const matrix = [[],[],[],[],[],[],[]];
+    for(let key in list){
+      const temp = [];
+      const day = new Date(list[key].start);
+      matrix[day.getDay()].push(list[key]);
+      matrix[day.getDay()].sort((a,b) => sortByDate(a,b));
+    }
+      return matrix;
+  }
+
+  
+  const schedule2 = matrixFromList(schedule);
+  const scheduleByWeek = transpose(schedule2);
+  
+  console.log(scheduleByWeek)
+
+</script>
+<template>
+  <div class="grid">
+    <div class="options" >
+    </div>
+    <div class="schedule">
+      <table class="table">
+        <tr style="background-color:rgb(24,24,24)">
+          <th/>
+          <th class="header">Lundi {{formatDate(getAnyDays(0))}}</th>
+          <th class="header">Mardi {{formatDate(getAnyDays(1))}}</th>
+          <th class="header">Mercredi {{formatDate(getAnyDays(2))}}</th>
+          <th class="header">Jeudi {{formatDate(getAnyDays(3))}}</th>
+          <th class="header">Vendredi {{formatDate(getAnyDays(4))}}</th>
+          <th class="header">Samedi {{formatDate(getAnyDays(5))}}</th>
+          <th class="header">Dimanche {{formatDate(getAnyDays(6))}}</th>
+        </tr>
+        <tr v-for="(n,index) in 12">
+          <th class="hour">{{8 + index}}:00-{{9+index}}:00</th>
+            <td v-for="m in 7"></td>
+        </tr>
+      </table>
+      <div class="courseGrid">
+        <div v-for="i in 7">
+          Test
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped>
+  .grid{
+    display:grid;
+    margin-top:2%;
+    align-items:center;
+    justify-content:center;
+    grid-template-columns:15vw 70vw;
+    column-gap:2.5vw;
+
+    grid-template-areas:"options schedule";
+  }
+  .schedule{
+    position:relative;  
+    border-radius:20px;
+    grid-area:schedule;
+    width:100%;
+    height:85vh;
+    background-color:rgba(255,255,255,0.1);    
+  }
+  .options{
+    border-radius:20px;
+    grid-area:options;
+    background-color:rgba(255,255,255,0.1);
+    width:100%;
+    height:85vh;
+  }
+
+  .table{
+    width:100%;
+    height:100%;
+    border-spacing:0;
+    border-collapse:separate;
+    border-radius: 20px;
+    border: 2px solid black
+  }
+  
+  .hour{
+    background-color:rgb(72,72,72)
+
+  }
+  
+  .header{
+    align-items:center;
+    width:12.5%;
+    color:#FFFFFF;
+  }
+  table th:not(:last-child),
+  table td:not(:last-child) {
+  border-right: 1px solid black;
+  }
+  
+  table tr:not(:last-child)>td,
+  table tr:not(:last-child)>th
+  {
+    border-bottom:1px solid black;
+  }
+  
+  .courseGrid{
+    top:13.75%;   
+    left:12.5%;
+    position:absolute;
+    width:87.5%;
+    height:86.25%; 
+    display:grid;
+    grid-template-columns:repeat(7,1fr);
+      }
+  
+
+  .course{
+    width:100%;
+    height:100%;
+    background-color:rgb(100,0,100);
+  }
+
+  
+</style>

frontend/src/rest/apps.js

@@ -9,8 +9,10 @@ import Profil from "@/Apps/Profil.vue"
 import Courses from "@/Apps/ManageCourses.vue"
 import Users from "@/Apps/UsersList.vue"
 import Students from "@/Apps/StudentsList.vue"
+import Schedule from "@/Apps/Schedule.vue"
 
 const apps = {
+		'/schedule': Schedule,
 		'/login': LoginPage,
 		'/inscription': Inscription,
 		'/profil': Profil,