diff --git a/front_end/public/Frisbyee_logo.ico b/front_end/public/Frisbyee_logo.ico new file mode 100644 index 0000000..62f9ce5 Binary files /dev/null and b/front_end/public/Frisbyee_logo.ico differ diff --git a/front_end/public/Frisbyee_logo.png b/front_end/public/Frisbyee_logo.png new file mode 100644 index 0000000..7b8cad6 Binary files /dev/null and b/front_end/public/Frisbyee_logo.png differ diff --git a/front_end/public/index.html b/front_end/public/index.html index aa069f2..fa76032 100644 --- a/front_end/public/index.html +++ b/front_end/public/index.html @@ -2,7 +2,7 @@ - +
-
- logo -

- Edit src/App.tsx and save to reload. -

- - Learn React - + +

Frisbyee

-
diff --git a/front_end/src/classes.tsx b/front_end/src/classes.tsx index 5147a21..fe3133e 100644 --- a/front_end/src/classes.tsx +++ b/front_end/src/classes.tsx @@ -3,7 +3,7 @@ export type Groupe = "Entrainement" | "Competition" | "Loisir"; export class User{ id!: number; nom!: String; - sessions!: Session[]; //nb: Admin liaison non symétrique /!\ + sessions: Session[] = []; //nb: Admin liaison non symétrique /!\ } export class Admin extends User{ @@ -23,7 +23,7 @@ export class Session{ id!: number; activites!: Activite[]; isRecurent! : Boolean; - Creneau!: Date; + creneau!: Date; coach!: Coach; athletes!: Athlete[] duree! : number; @@ -36,6 +36,27 @@ export class Activite{ session!: Session; theme!: String; data!: Map; - Duree!: number; + duree!: number; -} \ No newline at end of file +} + +export function getUserTest():User{ + const user = new User(); + const s1 = new Session(); + const s2 = new Session(); + const s3 = new Session(); + user.id = 0; + user.nom = "Emilien-Yee NootNoot"; + s1.creneau = new Date(); + s1.id = 1; + var date2 = new Date(); + date2.setDate(date2.getDate() + 2); + s2.creneau = date2; + s2.id = 2; + s3.creneau = date2; + s3.id = 3; + user.sessions.push(s1); + user.sessions.push(s2); + user.sessions.push(s3); + return user; +} diff --git a/front_end/src/components/SwitchThemeColor.tsx b/front_end/src/components/SwitchThemeColor.tsx new file mode 100644 index 0000000..6b92c37 --- /dev/null +++ b/front_end/src/components/SwitchThemeColor.tsx @@ -0,0 +1,38 @@ +import { useState,useEffect } from 'react'; +import './style/SwitchThemeColor.css'; + + +const SwitchThemeColor = () => { + const [theme, setTheme] = useState<'light' | 'dark'>('dark'); + + + /* + Inverse le thème actuel + */ + function switchTheme(){ + const currentTheme = document.documentElement.getAttribute('data-theme'); + const newTheme = currentTheme === 'light' ? 'dark' : 'light' + //const newTheme = window.matchMedia("(prefers-color-scheme: dark)").matches? "dark": "light"; + setTheme(newTheme) + document.documentElement.setAttribute('data-theme', newTheme); + } + + /* + détecte automatiquement le thème du navigateur au démarrage + */ + useEffect(() => { + const newTheme = window.matchMedia("(prefers-color-scheme: dark)").matches? "dark": "light"; + setTheme(newTheme) + document.documentElement.setAttribute('data-theme', newTheme); + }, []); + + return ( +
+ +
+ ); +}; + +export default SwitchThemeColor; \ No newline at end of file diff --git a/front_end/src/components/ent.css b/front_end/src/components/ent.css deleted file mode 100644 index 72b8bff..0000000 --- a/front_end/src/components/ent.css +++ /dev/null @@ -1,5 +0,0 @@ -.ent_colonne { - display: grid; - grid-template-columns: repeat(7, 1fr); - gap: 16px; -} \ No newline at end of file diff --git a/front_end/src/components/ent.tsx b/front_end/src/components/ent.tsx index f70630a..aa445b4 100644 --- a/front_end/src/components/ent.tsx +++ b/front_end/src/components/ent.tsx @@ -1,63 +1,119 @@ -import { useState } from "react" -import { Session, User } from "../classes" +import { useEffect, useState } from "react" +import { getUserTest, Session, User } from "../classes" import { useLocalData } from "../context/useLocalData" -import './ent.css'; -//import {updateSessionsOfUser } from "../requetes"; +import './style/ent.css'; +import {updateSessionsOfUser } from "../requetes"; export const ENT =() =>{ - const {user} = useLocalData() + const {user,setUser} = useLocalData() const [sessions, setSessions] = useState([]) - const [week,setWeek] = useState(new Date()); + const [week,setWeek] = useState(getFirstDay(new Date())); + const week_days:String[] = ["Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi","Dimanche"]; + const week_days_nums:number[] = [1,2,3,4,5,6,0]; - function updateSessions(){ + + function loadSessions(date:Date){ + var maxDate = getNextDay(date,6) + var newWeek: Session[] = [] user.sessions.forEach(session => { - newWeek.push(session); + if(session.creneau >= date && session.creneau <= maxDate){ + newWeek.push(session); + } }); setSessions(newWeek); } - function changeWeek(){ - updateSessions() - setWeek(new Date()); + function changeWeek(date:Date){ + setWeek(date); + loadSessions(date) } + useEffect(() => { + updateWeek(); + },[week]) + async function updateWeek(){ //TODO updateSession //await updateSessionsOfUser(user,null,null); - var newWeek: Session[] = [] - user.sessions.forEach(session => { - newWeek.push(session); - }); - setSessions(newWeek); + loadSessions(week); + setUser(getUserTest()) + } + + + function handlePrev(): void { + changeWeek(getNextDay(week,-7)); + } + + function handleNext(): void { + changeWeek(getNextDay(week,7)); + } + + function getFirstDay(date:Date):Date{ + const numWeek = date.getDay(); + var firstDate:Date; + if(numWeek == 0){ + firstDate = getNextDay(date,-6); + } + else{ + firstDate = getNextDay(date,-numWeek+1); + } + return firstDate; + } + + function getNextDay(date:Date,nb:number):Date{ + var newDate = new Date(date); + newDate.setDate(newDate.getDate() + nb); + return newDate; + } + + function dateToString(date:Date){ + const dd_prefix = date.getDate()<10 ? "0" : ""; + const mm_prefix = date.getMonth()+1<10 ? "0" : ""; + const dd:String = dd_prefix+date.getDate().toString(); + const mm:String = mm_prefix+(date.getMonth()+1).toString(); + const yyyy:String = date.getFullYear().toString(); + return dd+"/"+mm+"/"+yyyy; + } + + function hoursToString(date:Date){ + const hh_prefix = date.getDate()<10 ? "0" : ""; + const mm_prefix = date.getMonth()+1<10 ? "0" : ""; + const hh:String = hh_prefix+date.getHours().toString(); + const mm:String = mm_prefix+date.getMinutes().toString(); + return hh+"h"+mm; + } + + function displaySession(session:Session){ + const sDate = session.creneau; + return( +
+
{sDate.getHours()+"h"+sDate.getMinutes()}
+ {dateToString(sDate)} + +
{session.id}
+
+ ) } return(
-
-
- Lundi -
-
- Mardi - -
-
- Mercredi -
-
- Jeudi -
-
- Vendredi -
-
- Samedi -
-
- Dimanche -
+
+ + +
+
+ + {week_days_nums.map((num,index)=>( +
+ {week_days[index]} {dateToString(getNextDay(week,index))} + {sessions.map((session,index2)=>( + session.creneau.getDay()===num && + displaySession(session) + ))} +
+ ))}
diff --git a/front_end/src/components/style/SwitchThemeColor.css b/front_end/src/components/style/SwitchThemeColor.css new file mode 100644 index 0000000..931dbde --- /dev/null +++ b/front_end/src/components/style/SwitchThemeColor.css @@ -0,0 +1,11 @@ +.ButtonTheme{ + height: 35px; + width: 39px; + color: var(--text); + background-color: var(--tint3); + border-radius: 10px; + margin: 0px; + font-size: 20px; + display: inline; + border-color: var(--accent1); +} diff --git a/front_end/src/components/style/ent.css b/front_end/src/components/style/ent.css new file mode 100644 index 0000000..74c3d28 --- /dev/null +++ b/front_end/src/components/style/ent.css @@ -0,0 +1,46 @@ +.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; +} diff --git a/front_end/src/index.css b/front_end/src/index.css index ec2585e..a5a407b 100644 --- a/front_end/src/index.css +++ b/front_end/src/index.css @@ -1,3 +1,35 @@ +[data-theme='dark']{ + --tint1: #000000; + --tint2: #191c20; + --tint3: #282c34; + --tint4: rgb(53, 59, 72); + + + --text: #FFFFFF; + --text2:#000000; + + --accent1: #44c1ee; + --accent2: #0b235f; + --disable: #030918; +} + +[data-theme='light']{ + --tint1: #FFFFFF; + --tint2: #E8E8EE; + --tint3: #D0D0DD; + --tint4: rgb(181, 181, 194); + + --text: #000000; + --text2:#FFFFFF; + + --accent1: #44c1ee; + --accent2: #113388; + --disable: #061231; + +} + + + body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', diff --git a/front_end/src/requetes.tsx b/front_end/src/requetes.tsx index 570df7e..46c396b 100644 --- a/front_end/src/requetes.tsx +++ b/front_end/src/requetes.tsx @@ -1,5 +1,5 @@ import { Activite, Athlete, Coach, Session, User } from "./classes"; -/*import { useKeycloak } from '@react-keycloak/web' +import { useKeycloak } from '@react-keycloak/web' const { keycloak } = useKeycloak() @@ -7,7 +7,7 @@ const useAuthHeader = () => { return keycloak?.token ? { Authorization: `Bearer ${keycloak.token}` } : {} -}*/ +} //UPDATE /////////////////////////////////////////////////////////