import "../style/home.css" import { CSSProperties } from "react" interface Tactic { id : number name : string creation_date : string } interface Team { id : number name : string picture : string main_color : string second_color : string } export default function Home({ lastTactics, allTactics, teams } : { lastTactics : Tactic[] , allTactics : Tactic[], teams : Team[]}) { console.log(allTactics); return (
<Body lastTactics={lastTactics} allTactics={allTactics} teams={teams}/> </div> ) } export function Title() { return ( <div id="header"> <h1 id="IQBall"><span id="IQ">IQ</span><span id="Ball">Ball</span></h1> </div> ) } export function Body({ lastTactics, allTactics, teams } : { lastTactics : Tactic[], allTactics : Tactic[], teams : Team[]}) { const widthPersonalSpace = 78; const widthSideMenu = 100-widthPersonalSpace return ( <div id="body"> <PersonalSpace width = {widthPersonalSpace} allTactics = {allTactics}/> <SideMenu width = {widthSideMenu} lastTactics={lastTactics} teams={teams} /> </div> ) } export function SideMenu({ width, lastTactics, teams } : { width : number, lastTactics : Tactic[], teams : Team[]}) { return ( <div id="sideMenu" style={{ width : width + "%", }}> <div id="sideMenuContent"> <Team teams={teams}/> <Tactic lastTactics={lastTactics}/> </div> </div> ) } export function PersonalSpace({ width, allTactics }: { width : number, allTactics : Tactic[] }) { return ( <div id="personal-space" style={{ width : width + "%", }}> <TitlePersonalSpace/> <BodyPersonalSpace allTactics = {allTactics}/> </div> ) } function TitlePersonalSpace() { return ( <div id="titlePersonalSpace"> <h2>Espace Personnel</h2> </div> ) } function TableData({allTactics} : {allTactics : Tactic[]} ) { const nbRow = Math.floor(allTactics.length/3)+1; let listTactic = Array(nbRow); for (let i = 0; i < nbRow; i++) { listTactic[i] = Array(0); } let i = 0; let j = 0; allTactics.forEach(tactic => { listTactic[i].push(tactic); j++; if (j === 3) { i++; j = 0; } }) i = 0; while (i < nbRow) { listTactic[i] = listTactic[i].map((tactic : Tactic) => <td key={tactic.id} className="dataTactic" onClick={() => {location.pathname="/tactic/"+tactic.id+"/edit"}}>{troncName(tactic.name, 25)}</td> ); i++; } if (nbRow == 1) { if (listTactic[0].length < 3) { for (let i = 0; i <= 3-listTactic[0].length; i++) { listTactic[0].push(<td key={"tdNone"+i}></td>); } } } console.log(listTactic); const data = listTactic.map((tactic, rowIndex) => <tr key={rowIndex+"row"}> {tactic} </tr> ); return data; } function BodyPersonalSpace({ allTactics } : { allTactics : Tactic[]}) { let data; if (allTactics.length == 0) { data = ( <p>Aucune tactique créé !</p> ); } else { data = (<TableData allTactics={allTactics}/>); } return ( <div id="bodyPersonalSpace"> <table> <tbody key="tbody"> {data} </tbody> </table> </div> ) } export function Team({teams} : {teams : Team[]}) { const listTeam = teams.map((team, rowIndex) => <li key={"team" + rowIndex} > {team.name} <button onClick={() => location.pathname="/team/"+team.id}>open</button> </li> ); return ( <div id="teams"> <div className="titreSideMenu"> <h2 className="title">Mes équipes</h2> <button className="new" onClick={() => location.pathname="/team/new"}>+</button> </div> <SetButtonTeam teams={teams}/> </div> ) } export function Tactic({lastTactics} : { lastTactics : Tactic[]}) { return ( <div id="tactic"> <div className="titreSideMenu"> <h2 className="title">Mes dernières stratégies</h2> <button className="new" id="createTactic" onClick={() => (location.pathname = "/tactic/new")}>+</button> </div> <SetButtonTactic tactics={lastTactics}/> </div> ) } function SetButtonTactic ({tactics} : {tactics : Tactic[]}) { const lastTactics = tactics.map(tactic => <ButtonLastTactic tactic={tactic} /> ); return ( <div className="SetButton"> {lastTactics} </div> ); } function SetButtonTeam({teams} : {teams : Team[]}) { const listTeam = teams.map(teams => <ButtonTeam team={teams} /> ); return ( <div className="SetButton"> {listTeam} </div> ); } function ButtonTeam ({team} : {team : Team}) { const name = troncName(team.name, 20); return ( <div> <div id={"ButtonTeam"+team.id} className="ButtonSideMenu" onClick={() => {location.pathname="/team/"+team.id}} > {name} </div> </div> ) } function ButtonLastTactic ({tactic} : {tactic : Tactic}) { const name = troncName(tactic.name, 20); return ( <div id={"Button"+tactic.id} className="ButtonSideMenu" onClick={() => {location.pathname="/tactic/"+tactic.id+"/edit"}} > {name} </div> ); } function troncName(name: string, limit: number) : string { if (name.length > limit) { name = name.substring(0, limit) + "..."; } else { name = name; } return name; }