front/MyINPulse-front/src/App.vue

@@ -1,76 +1,18 @@
 <script setup lang="ts">
 import { RouterLink, RouterView } from 'vue-router'
-import HelloWorld from './components/HelloWorld.vue'
-import Header from './components/Header.vue';
-import ProjectComp from './components/Project-comp.vue';
-import CanvasView from './components/canvas/LeanCanvas.vue';
 import ErrorWrapper from "@/views/errorWrapper.vue";
 </script>
 
 <template>
-  <Header />
-  <error-wrapper></error-wrapper>
-  <div id="main">
-      <ProjectComp 
-        v-for="(project, index) in projects" 
-        :key="index"
-        :projectName="project.name"
-        :listName="project.members"
-        :projectLink="project.link"
-      />
-    </div>
-  <div id="canvas">
-      <button @click="$router.push('/canvas')">Voir Canvas</button>
-  </div>
+
+<Header />
+  <!--<nav>
+    <RouterLink to="/">Home</RouterLink> |
+    <RouterLink to="/canvas">Canvas</RouterLink>
+  </nav>-->
+
   <RouterView />
 </template>
 
-<style scoped>
 
-#canvas { /* My shit */
-  margin-top: 20px;
-}
-button {
-  padding: 10px 15px;
-  background-color: #007bff;
-  color: white;
-  border: none;
-  cursor: pointer;
-  border-radius: 5px;
-}
-button:hover {
-  background-color: #0056b3;
-}
 
-</style>
-
-<script lang="ts">
-//import Header from "@/components/Header.vue";
-//import ProjectComp from "@/components/Project-comp.vue";
-
-export default {
-  name: 'App',
-  components: {
-    Header,
-    ProjectComp,
-    CanvasView, // My shit
-  },
-  data() {
-    return {
-      projects: [
-        {
-          name: 'Projet Alpha',
-          link: '/project-alpha.html',//to test
-          members: ['Alice', 'Bob', 'Charlie'],
-        },
-        {
-          name: 'Projet Beta',
-          link: './project-beta.html', //to test
-          members: ['David', 'Eve', 'Frank'],
-        },
-      ],
-    };
-  },
-};
-
-</script>

front/MyINPulse-front/src/components/Agenda.vue

@@ -3,7 +3,7 @@
         <h3>Rendez-vous</h3>
         <table>
         <tbody>
-            <tr v-for=" (p, index) in projectRDV" :key="p" >
+            <tr v-for=" (p, index) in projectRDV" :key="index" >
                 <td>{{ p.projectName }} </td> <td>{{ p.date }}</td> <td>{{ p.lieu }}</td>
             </tr>
         </tbody>
@@ -11,7 +11,7 @@
     </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
     import { defineProps } from "vue";
 
     interface rendezVous{
@@ -23,10 +23,53 @@
     const props = defineProps<{
         projectRDV: rendezVous[]
     }>();
-
 </script>
 
-<style>
+<style scoped>
+ #agenda {   
+    padding: 20px;
+  }
 
-    
+  /* Table Styling */
+ table {
+    width: 100%;
+    border-collapse: collapse;
+    font-family: Arial, sans-serif;
+    text-align: left;
+    margin-top: 20px;
+    border: 1px solid #ccc;
+  }
+  
+  /* Header Row (if exists) */
+  th {
+    background-color: #f4f4f4;
+    padding: 12px;
+    font-weight: bold;
+    border: 1px solid #ccc;
+  }
+  
+  /* Table Body Rows */
+  tbody tr {
+    border-bottom: 1px solid #ddd;
+    transition: background-color 0.2s ease; /* Smooth hover effect */
+  }
+  
+  tbody tr:hover {
+    background-color: #f9f9f9; /* Highlight row on hover */
+  }
+  
+  /* Cells Styling */
+  td {
+    padding: 10px;
+    border: 1px solid #eee;
+    font-size: 14px;
+    vertical-align: middle; /* Align text to middle */
+  }
+  
+  /* First Column Styling */
+  td:first-child {
+    text-align: center;
+    width: 50px; /* Adjust width as needed */
+  }
+ 
 </style>

front/MyINPulse-front/src/components/Project-comp.vue

@@ -110,6 +110,16 @@ const goToLink = () => {
   }
 
 
-
+  button {
+  padding: 10px 15px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  cursor: pointer;
+  border-radius: 5px;
+}
+  button:hover {
+    background-color: #0056b3;
+  }
 
 </style>

front/MyINPulse-front/src/router/router.ts

@@ -12,7 +12,13 @@ const router = createRouter({
       component: () => import('../views/test.vue'),
     },
 
-      // route pour les canvas (made by adnane), in fact the two vue apps are separated for now
+    {
+      path: '/',
+      name: 'Admin-main',
+      component: () => import('../views/AdminMain.vue'),
+    },
+
+// route pour les canvas (made by adnane), in fact the two vue apps are separated for now  
     {
       path: '/canvas',
       name: 'canvas',

front/MyINPulse-front/src/views/AdminMain.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import Header from '../components/Header.vue';
+import Agenda from "../components/Agenda.vue"
+import ProjectComp from '../components/Project-comp.vue';
+</script>
+
+
+<template>
+    <Header />
+    <error-wrapper></error-wrapper>
+    <div id="container"> 
+      <div id="main">
+          <ProjectComp 
+            v-for="(project, index) in projects" 
+            :key="index"
+            :projectName="project.name"
+            :listName="project.members"
+            :projectLink="project.link"
+          />
+      </div>
+  
+      <Agenda :projectRDV="rendezVous" />
+    </div>
+    
+</template>
+
+<script lang="ts">
+
+export default {
+  name: "App",
+  components: {
+    Header,
+    ProjectComp,
+  },
+  data() {
+    return {
+      projects: [
+        {
+          name: "Projet Alpha",
+          link: "/project-alpha.html", // to test
+          members: ["Alice", "Bob", "Charlie"],
+        },
+        {
+          name: "Projet Beta",
+          link: "./project-beta.html", // to test
+          members: ["David", "Eve", "Frank"],
+        },
+      ], 
+
+      rendezVous: [ 
+        { projectName: "Projet Alpha", date: "2025-03-10", lieu: "P106" },
+        { projectName: "Projet Beta", date: "2025-04-15", lieu: "Td10" },
+      ],
+    };
+  },
+};
+
+
+</script>
+
+<style scoped>
+
+#container {
+    margin: 0;
+    display: grid;
+    grid-template-columns: 3fr 1fr; /* Main body takes 3/4, agenda 1/4 */
+    height: 100vh; /* Full viewport height */
+}
+
+button {
+  padding: 10px 15px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  cursor: pointer;
+  border-radius: 5px;
+}
+button:hover {
+  background-color: #0056b3;
+}
+
+</style>