Merge remote-tracking branch 'refs/remotes/origin/main'
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 44 KiB |
@@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/Frisbyee_logo.ico" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
|
||||
BIN
front_end/public/loading.png
Normal file
BIN
front_end/public/loading.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
@@ -22,7 +22,7 @@ export class Coach extends User{
|
||||
export class Session{
|
||||
id!: number;
|
||||
name!: String;
|
||||
activites!: Activite[];
|
||||
activites: Activite[] = [];
|
||||
isRecurent! : Boolean;
|
||||
creneau!: Date;
|
||||
coach!: Coach;
|
||||
@@ -50,12 +50,20 @@ export function getUserTest():User{
|
||||
user.nom = "Emilien-Yee NootNoot";
|
||||
s1.creneau = new Date();
|
||||
s1.id = 1;
|
||||
s1.name = "Entrainement Frisbee"
|
||||
var date2 = new Date();
|
||||
date2.setDate(date2.getDate() + 2);
|
||||
s2.creneau = date2;
|
||||
s2.id = 2;
|
||||
s2.name = "entraintement2"
|
||||
s3.creneau = date2;
|
||||
s3.id = 3;
|
||||
s3.name = "entraintement3"
|
||||
|
||||
const a1:Activite = new Activite();
|
||||
const a2:Activite = new Activite();
|
||||
s1.activites.push(a1);
|
||||
s1.activites.push(a2);
|
||||
user.sessions.push(s1);
|
||||
user.sessions.push(s2);
|
||||
user.sessions.push(s3);
|
||||
|
||||
34
front_end/src/components/Modal.tsx
Normal file
34
front_end/src/components/Modal.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
import {useEffect } from "react"
|
||||
|
||||
type ModalProps = {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
export function Modal({ isOpen, onClose, children }: ModalProps) {
|
||||
|
||||
|
||||
|
||||
if (!isOpen) return null
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
position: "fixed",
|
||||
inset: 0,
|
||||
backgroundColor: "rgba(0,0,0,0.25)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
zIndex: 1000,
|
||||
}}
|
||||
onClick={onClose}
|
||||
>
|
||||
<div className="modal" onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -3,6 +3,26 @@ import { getUserTest, Session, User } from "../classes"
|
||||
import { useLocalData } from "../context/useLocalData"
|
||||
import './style/edt.css';
|
||||
import {updateSessionsOfUserAPI } from "../requetes";
|
||||
import EdtSession from "./edt_session";
|
||||
|
||||
|
||||
export 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;
|
||||
}
|
||||
|
||||
export function hoursToString(date:Date){
|
||||
const hh_prefix = date.getHours()<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;
|
||||
}
|
||||
|
||||
|
||||
export const EDT =() =>{
|
||||
const {user,setUser} = useLocalData()
|
||||
@@ -68,33 +88,6 @@ export const EDT =() =>{
|
||||
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.getHours()<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;
|
||||
}
|
||||
|
||||
function displaySession(session:Session){
|
||||
const sDate = session.creneau;
|
||||
return(
|
||||
<div className="edt_session">
|
||||
<div>{hoursToString(sDate)}</div>
|
||||
{dateToString(sDate)}
|
||||
<button className="edt_button">+</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return(
|
||||
<div className="edt">
|
||||
@@ -108,12 +101,12 @@ export const EDT =() =>{
|
||||
<div className="edt_colonne">
|
||||
<div className="edt_day_header">
|
||||
<div> {week_days[index]} </div>
|
||||
<div> {dateToString(getNextDay(week,index))} </div>
|
||||
<div className="edt_date"> {dateToString(getNextDay(week,index))} </div>
|
||||
</div>
|
||||
<div className="edt_day_contedt">
|
||||
{sessions.map((session,index2)=>(
|
||||
session.creneau.getDay()===num &&
|
||||
displaySession(session)
|
||||
<EdtSession session={session}/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
59
front_end/src/components/edt_session.tsx
Normal file
59
front_end/src/components/edt_session.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Activite, Session } from '../classes';
|
||||
import { dateToString, hoursToString } from './edt';
|
||||
import './style/edt.css';
|
||||
import { Modal } from './Modal';
|
||||
import Loading from './loading';
|
||||
|
||||
|
||||
type Props = {
|
||||
session:Session;
|
||||
}
|
||||
|
||||
function EdtSession({session}:Props){
|
||||
|
||||
const [open, setOpen] = useState<boolean>(false)
|
||||
const [loading,setLoading] = useState<boolean>(false);
|
||||
|
||||
function handleOpen(): void {
|
||||
setOpen(!open);
|
||||
}
|
||||
|
||||
async function updateActivites(){
|
||||
//TODO
|
||||
//await updateActivitiesOfSessionAPI(session);
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if(open){
|
||||
setLoading(true);
|
||||
updateActivites()
|
||||
}
|
||||
},[open])
|
||||
|
||||
const sDate = session.creneau;
|
||||
return(
|
||||
<div>
|
||||
<div className="edt_session" onClick={() => handleOpen()}>
|
||||
<div className="edt_date">{hoursToString(sDate)}</div>
|
||||
<div>{session.name}</div>
|
||||
</div>
|
||||
{open &&
|
||||
<Modal isOpen={open} onClose={() => setOpen(false)}>
|
||||
<div>{session.name}</div>
|
||||
<div>{hoursToString(sDate)}</div>
|
||||
<div>{dateToString(sDate)}</div>
|
||||
{session.activites.map((activite,index)=>(
|
||||
<div>activite</div>
|
||||
))}
|
||||
|
||||
{loading && <Loading/>}
|
||||
</Modal>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default EdtSession
|
||||
10
front_end/src/components/loading.tsx
Normal file
10
front_end/src/components/loading.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
function Loading(){
|
||||
|
||||
return(
|
||||
<div>
|
||||
<img className="loading" src="/loading.png"></img>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Loading
|
||||
@@ -33,7 +33,7 @@
|
||||
padding: 8px;
|
||||
/* background-color: var(--tint2); */
|
||||
border-radius: 20px;
|
||||
height: 50px;
|
||||
height: 30px;
|
||||
text-align: cedter;
|
||||
font-size: 1em;
|
||||
}
|
||||
@@ -51,20 +51,24 @@
|
||||
background-color: var(--tint4);
|
||||
border-radius: 12px;
|
||||
padding: 8px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.edt_session:hover {
|
||||
background-color: var(--tint2);
|
||||
}
|
||||
|
||||
.edt_session:active {
|
||||
background-color: var(--tint5);
|
||||
}
|
||||
|
||||
.edt_date{
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
.edt_button_week_select{
|
||||
background-color: var(--tint3);
|
||||
background-color: var(--tint2);
|
||||
color: var(--text);
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
|
||||
.edt_button{
|
||||
background-color: var(--tint3);
|
||||
color: var(--text);
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
@@ -4,6 +4,7 @@
|
||||
--tint2: #16181d; /* 10% */
|
||||
--tint3: #21252b; /* 15% */
|
||||
--tint4: #2c313a; /* 20% */
|
||||
--tint5: #373d48; /* 25% */
|
||||
|
||||
|
||||
--text: #FFFFFF;
|
||||
@@ -20,6 +21,7 @@
|
||||
--tint2: #e8e4e3; /* 90% */
|
||||
--tint3: #ddd6d5; /* 85% */
|
||||
--tint4: #d2c8c6; /* 80% */
|
||||
--tint5: #c6bab8; /* 75% */
|
||||
|
||||
--text: #000000;
|
||||
--text2:#FFFFFF;
|
||||
@@ -45,3 +47,23 @@ code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
|
||||
.modal{
|
||||
background-color: var(--tint2);
|
||||
padding: 10px;
|
||||
border-radius: 20px;
|
||||
min-width: 200px;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.loading{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@@ -48,11 +48,11 @@ export async function updateSessionsOfUserAPI(user:Coach|Athlete, min: Date|null
|
||||
export async function updateActivitiesOfSessionAPI(session:Session){
|
||||
try {
|
||||
const response = await api.get<Activite[]>(`/sessions/${session.id}/activities`);
|
||||
return response.data;
|
||||
session.activites = response.data;
|
||||
} catch (error) {
|
||||
console.error("Error fetching activities for session:", error);
|
||||
return [];
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export async function subscribeSessionAPI(user:User, session:Session):Promise<boolean>{
|
||||
|
||||
Reference in New Issue
Block a user