Add the structure and some style

1 year ago · eecf0e03c7
parent 15ff5db339
commit eecf0e03c7
4 changed files with 86 additions and 49 deletions
--- 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;
-} */
+
+#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%;
 }
--- 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 (
        <div id="main">
            <Title/>
-            {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>
    )
--- a/front/views/ProfilPage.tsx
+++ b/front/views/ProfilPage.tsx
@ -0,0 +1 @@
+
--- a/src/App/Controller/UserController.php
+++ b/src/App/Controller/UserController.php
@ -24,28 +24,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", []);
    }