diff --git a/front/style/home.css b/front/style/home.css index e175e68..198c2af 100644 --- a/front/style/home.css +++ b/front/style/home.css @@ -1,10 +1,44 @@ -/* #header { - background-color: var(--white); - transition: box-shadow .3s linear; - outline: 0; - box-shadow: 0 10px 15px #00000026; -} */ - -#header { - -} \ No newline at end of file + +#main { + margin-left : 2%; + margin-right: 2%; + border : solid 2px purple; + display: flex; + flex-direction: column; + +} + +button { + border-radius: 100%; +} + +#header { + text-align: center; + background-color: green; + margin : 0px; +} + +#body { + display: flex; + flex-direction: row; + border : solid 10px yellow; + margin:0px + } + +#personal-space { + background-color: red; +} + +#sideMenu { + background-color: blue; + +} + +#ps-title { + text-align: center; +} + +#sideMenu h2 { + display: inline-block; + margin-right : 5%; +} diff --git a/front/views/Home.tsx b/front/views/Home.tsx index 1deedec..8a4efb7 100644 --- a/front/views/Home.tsx +++ b/front/views/Home.tsx @@ -1,24 +1,17 @@ import "../style/home.css" +import { CSSProperties } from "react" interface Tactic { id : number name : string - creationDate : number + creation_date : string } -export default function Home({ - tactics -} : { - tactics : Tactic[] -}) { - console.log(tactics); +export default function Home({ lastTactics } : { lastTactics : Tactic[] }) { return (
- {tactics.map(tactic => ( - <div>{tactic.name}</div> - ))} - <Body tactics={tactics}/> + <Body lastTactics={lastTactics}/> </div> ) } @@ -27,18 +20,41 @@ export function Title() { return ( <div id="header"> <h1 id="IQBall"><span id="IQ">IQ</span><span id="B">B</span>all</h1> - <img src=""></img> </div> ) } +export function Body({ lastTactics } : { lastTactics : Tactic[] }) { + const widthPersonalSpace = 70; + const widthSideMenu = 100-widthPersonalSpace + return ( + <div id="body"> + <PersonalSpace width = {widthPersonalSpace}/> + <SideMenu width = {widthSideMenu} lastTactics={lastTactics} /> + + </div> + ) +} +export function SideMenu({ width, lastTactics } : { width : number, lastTactics : Tactic[] }) { -export function Body({tactics} : {tactics : Tactic[]}) { return ( - <div id="body"> + <div id="sideMenu" style={{ + width : width + "%", + }}> <Team/> - <Tactic tactics={tactics}/> + <Tactic lastTactics={lastTactics}/> + </div> + ) +} + + +export function PersonalSpace({ width }: { width : number }) { + return ( + <div id="personal-space" style={{ + width : width + "%", + }}> + <h2 id="ps-title">Espace Personnel</h2> </div> ) } @@ -47,28 +63,29 @@ export function Team() { return ( <div id="team"> <h2>Mes équipes</h2> - <button id="createTeam">+</button> + <button onClick={() => location.pathname="/tactic/new"}>+</button> </div> ) } -export function Tactic({tactics} : { tactics : Tactic[]}) { - const listTactic = tactics.map(tactic => +export function Tactic({lastTactics} : { lastTactics : Tactic[]}) { + + const listTactic = lastTactics.map(tactic => <li key = {tactic.id} > - {tactic.name} : {tactic.creationDate} + {tactic.name} : {tactic.creation_date} + <button onClick={() => {location.pathname="/tactic/"+tactic.id+"/edit"}}>open</button> </li> - ); + ); return ( <div id="tactic"> <div id="titreTactic"> - <h2>Mes stratégies</h2> + <h2>Mes cinq dernières stratégies</h2> <button id="createTactic" onClick={() => (location.pathname = "/tactic/new")}>+</button> <ul> {listTactic} </ul> - </div> </div> ) diff --git a/front/views/ProfilPage.tsx b/front/views/ProfilPage.tsx new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/front/views/ProfilPage.tsx @@ -0,0 +1 @@ + diff --git a/src/App/Controller/UserController.php b/src/App/Controller/UserController.php index 84e9440..e17b357 100644 --- a/src/App/Controller/UserController.php +++ b/src/App/Controller/UserController.php @@ -22,28 +22,13 @@ class UserController { */ public function home(SessionHandle $session): ViewHttpResponse { $lastTactic = $this->tactics->getLast(5); - var_dump($lastTactic); + // var_dump($lastTactic); return ViewHttpResponse::react("views/Home.tsx", [ - "tactics" => $lastTactic + "lastTactics" => $lastTactic ]); // return ViewHttpResponse::react("views/Home.tsx", []); } - private function listTacticToJson(array $listTactic) : array { - $jsonReturn = []; - foreach ($listTactic as $tactic){ - //var_dump($tactic); - $jsonTactic = [ - "id" => $tactic["id"], - "name" => $tactic["name"], - "creationDate" => $tactic["creation_date"] - ]; - array_push($jsonReturn, $jsonTactic); - } - // var_dump($jsonReturn); - return $jsonReturn; - } - public function homeTwig(SessionHandle $session): ViewHttpResponse { return ViewHttpResponse::twig("home.twig", []); }