edt (et pas ent) toujours en cours

front_end/src/App.tsx

@@ -4,7 +4,7 @@ import { ReactKeycloakProvider } from '@react-keycloak/web'
 import keycloak from './keycloak'
 import Login from './components/login';
 import { LocalDataProvider } from './provider/LocalDataProvider';
-import ENT from './components/ent';
+import EDT from './components/edt';
 import SwitchThemeColor from './components/SwitchThemeColor';
 import CreateSession from './components/createSession'
 
@@ -22,7 +22,7 @@ function App() {
             <SwitchThemeColor/>
             <h1>Frisbyee</h1>
             <Login/>
-            <ENT/>
+            <EDT/>
             <CreateSession/>
         </div>
       </LocalDataProvider>

front_end/src/components/edt.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useState } from "react"
 import { getUserTest, Session, User } from "../classes"
 import { useLocalData } from "../context/useLocalData"
-import './style/ent.css';
+import './style/edt.css';
 import {updateSessionsOfUserAPI } from "../requetes";
 
-export const ENT =() =>{
+export const EDT =() =>{
     const {user,setUser} = useLocalData()
     const [sessions, setSessions] = useState<Session[]>([])
     const [week,setWeek] = useState<Date>(getFirstDay(new Date()));
@@ -78,8 +78,8 @@ export const ENT =() =>{
     }
 
     function hoursToString(date:Date){
-        const hh_prefix = date.getDate()<10 ? "0" : "";
+        const hh_prefix = date.getHours()<10 ? "0" : "";
-        const mm_prefix = date.getMonth()+1<10 ? "0" : "";
+        const mm_prefix = date.getMinutes()+1<10 ? "0" : "";
         const hh:String = hh_prefix+date.getHours().toString();
         const mm:String = mm_prefix+date.getMinutes().toString();
         return hh+"h"+mm;
@@ -88,30 +88,34 @@ export const ENT =() =>{
     function displaySession(session:Session){
         const sDate = session.creneau;
         return(
-            <div className="ent_session">
+            <div className="edt_session">
-                <div>{sDate.getHours()+"h"+sDate.getMinutes()}</div>
+                <div>{hoursToString(sDate)}</div>
                 {dateToString(sDate)}
-
+                <button className="edt_button">+</button>
-                <div>{session.id}</div>
             </div>
         )
     }
 
     return(
-        <div className="ent"> 
+        <div className="edt"> 
-            <div className="ent_header">
+            <div className="edt_header">
-                <button className="ent_button" onClick={() =>handlePrev()}>Prev</button>
+                <button className="edt_button_week_select" onClick={() =>handlePrev()}>Prev</button>
-                <button className="ent_button" onClick={() => handleNext()}>Next</button>
+                <button className="edt_button_week_select" onClick={() => handleNext()}>Next</button>
             </div>
-            <div className="ent_colonnes">
+            <div className="edt_colonnes">
 
                 {week_days_nums.map((num,index)=>(
-                    <div className="ent_lines">
+                    <div className="edt_colonne">
-                        {week_days[index]} {dateToString(getNextDay(week,index))}
+                        <div className="edt_day_header">
-                            {sessions.map((session,index2)=>(
+                            <div> {week_days[index]} </div>
-                                session.creneau.getDay()===num &&
+                            <div> {dateToString(getNextDay(week,index))} </div>
-                                displaySession(session)
+                        </div>
-                            ))}
+                        <div className="edt_day_contedt">
+                        {sessions.map((session,index2)=>(
+                            session.creneau.getDay()===num &&
+                            displaySession(session)
+                        ))}
+                        </div>
                     </div>
                 ))}
 
@@ -120,4 +124,4 @@ export const ENT =() =>{
     )
 }
 
-export default ENT
+export default EDT

front_end/src/components/style/edt.css

@@ -0,0 +1,70 @@
+.edt{
+  justify-contedt: cedter;
+  background-color: var(--tint1);
+  border-radius: 30px;
+  padding: 10px;
+}
+
+.edt_header{
+  justify-contedt: cedter;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  /* background-color: #0000FF; */
+  padding-bottom: 10px;
+  gap: 30%;
+}
+
+.edt_colonnes {
+  display: grid;
+  align-items: flex-start;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 16px;
+  color: var(--text);
+  /* background-color: #00FF00; */
+  width: 100%;
+}
+
+.edt_colonne {
+  display: grid;
+  background-color: var(--tint3);
+  border-radius: 20px;
+}
+.edt_day_header{
+  padding: 8px;
+  /* background-color: var(--tint2); */
+  border-radius: 20px;
+  height: 50px;
+  text-align: cedter;
+  font-size: 1em;
+}
+
+.edt_day_contedt{
+  display: grid;
+  gap: 8px;
+  padding: 8px;
+  border-radius: 20px;
+}
+
+
+.edt_session {
+  gap: 8px;
+  background-color: var(--tint4);
+  border-radius: 12px;
+  padding: 8px;
+  height: 80px;
+}
+
+.edt_button_week_select{
+  background-color: var(--tint3);
+  color: var(--text);
+  height: 40px;
+  border-radius: 20px;
+}
+
+
+.edt_button{
+  background-color: var(--tint3);
+  color: var(--text);
+  height: 40px;
+  border-radius: 20px;
+}

front_end/src/components/style/ent.css

@@ -1,46 +0,0 @@
-.ent{
-  justify-content: center;
-  /* background-color: #FF0000; */
-  padding: 10px;
-}
-
-.ent_header{
-  justify-content: center;
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  /* background-color: #0000FF; */
-  padding-bottom: 10px;
-  gap: 30%;
-}
-
-.ent_colonnes {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  gap: 16px;
-  color: var(--text);
-  /* background-color: #00FF00; */
-  width: 100%;
-}
-
-.ent_lines {
-  display: grid;
-  gap: 16px;
-  background-color: var(--tint2);
-  padding: 8px;
-  border-radius: 20px;
-}
-
-
-.ent_session {
-  gap: 5px;
-  background-color: var(--tint3);
-  border-radius: 20px;
-  padding: 8px;
-}
-
-.ent_button{
-  background-color: var(--tint3);
-  color: var(--text);
-  height: 30px;
-  border-radius: 20px;
-}

front_end/src/index.css

@@ -1,8 +1,9 @@
 [data-theme='dark']{
-  --tint1: #000000;
+  --tint0: #000000; /* 0% */
-  --tint2: #191c20;
+  --tint1: #0b0c0e; /* 5% */
-  --tint3: #282c34;
+  --tint2: #16181d; /* 10% */
-  --tint4: rgb(53, 59, 72);
+  --tint3: #21252b; /* 15% */
+  --tint4: #2c313a; /* 20% */
 
 
   --text: #FFFFFF;
@@ -14,10 +15,11 @@
 }
 
 [data-theme='light']{
-  --tint1: #FFFFFF;
+  --tint0: #FFFFFF; /* 100% */
-  --tint2: #E8E8EE;
+  --tint1: #f4f1f1; /* 95% */
-  --tint3: #D0D0DD;
+  --tint2: #e8e4e3; /* 90% */
-  --tint4: rgb(181, 181, 194);
+  --tint3: #ddd6d5; /* 85% */
+  --tint4: #d2c8c6; /* 80% */
 
   --text: #000000;
   --text2:#FFFFFF;