@ -5,42 +5,67 @@ import "../style/side_menu.css"
import { CSSProperties , useRef } from "react" import { CSSProperties , useRef } from "react"
interface Tactic { interface Tactic {
id : number
id : number
name : string
name : string
creation_date : string
creation_date : string
} }
interface Team { interface Team {
id : number
id : number
name : string
name : string
picture : string
picture : string
main_color : string
main_color : string
second_color : string
second_color : string
} }
export default function Home ( { lastTactics , allTactics , teams , username } : { lastTactics : Tactic [ ] , allTactics : Tactic [ ] , teams : Team [ ] , username : string } ) { export default function Home ( {
lastTactics ,
allTactics ,
teams ,
username ,
} : {
lastTactics : Tactic [ ]
allTactics : Tactic [ ]
teams : Team [ ]
username : string
} ) {
return (
return (
< div id = "main" >
< div id = "main" >
< Title username = { username } / >
< Title username = { username } / >
< Body lastTactics = { lastTactics } allTactics = { allTactics } teams = { teams } / >
< Body
lastTactics = { lastTactics }
allTactics = { allTactics }
teams = { teams }
/ >
< / div >
< / div >
)
)
} }
export function Title ( { username } : { username : string } ) { export function Title ( { username } : { username : string } ) {
return (
return (
< div id = "header" >
< div id = "header" >
< div id = "header-left" >
< div id = "header-left" > < / div >
< / div >
< div id = "header-center" >
< div id = "header-center" >
< h1 id = "IQBall" className = "clickable" onClick = { ( ) = > { location . pathname = "/" } } > < span id = "IQ" > IQ < / span > < span id = "Ball" > Ball < / span > < / h1 >
< h1
id = "IQBall"
className = "clickable"
onClick = { ( ) = > {
location . pathname = "/"
} } >
< span id = "IQ" > IQ < / span >
< span id = "Ball" > Ball < / span >
< / h1 >
< / div >
< / div >
< div id = "header-right" >
< div id = "header-right" >
< div className = "clickable" id = "clickable-header-right" >
< div className = "clickable" id = "clickable-header-right" >
{ /* <AccountSvg id="img-account" /> */ }
{ /* <AccountSvg id="img-account" /> */ }
< img id = "img-account" src = "account.svg" onClick = { ( ) = > { location . pathname = "/settings" } } / >
< img
id = "img-account"
src = "account.svg"
onClick = { ( ) = > {
location . pathname = "/settings"
} }
/ >
< p id = "username" > { username } < / p >
< p id = "username" > { username } < / p >
< / div >
< / div >
< / div >
< / div >
@ -48,37 +73,67 @@ export function Title({username} : {username : string}) {
)
)
} }
export function Body ( { lastTactics , allTactics , teams } : { lastTactics : Tactic [ ] , allTactics : Tactic [ ] , teams : Team [ ] } ) { export function Body ( {
const widthPersonalSpace = 78 ;
lastTactics ,
const widthSideMenu = 100 - widthPersonalSpace
allTactics ,
teams ,
} : {
lastTactics : Tactic [ ]
allTactics : Tactic [ ]
teams : Team [ ]
} ) {
const widthPersonalSpace = 78
const widthSideMenu = 100 - widthPersonalSpace
return (
return (
< div id = "body" >
< div id = "body" >
< PersonalSpace width = { widthPersonalSpace } allTactics = { allTactics } / >
< PersonalSpace width = { widthPersonalSpace } allTactics = { allTactics } / >
< SideMenu width = { widthSideMenu } lastTactics = { lastTactics } teams = { teams } / >
< SideMenu
width = { widthSideMenu }
lastTactics = { lastTactics }
teams = { teams }
/ >
< / div >
< / div >
)
)
} }
export function SideMenu ( { width , lastTactics , teams } : { width : number , lastTactics : Tactic [ ] , teams : Team [ ] } ) { export function SideMenu ( {
width ,
lastTactics ,
teams ,
} : {
width : number
lastTactics : Tactic [ ]
teams : Team [ ]
} ) {
return (
return (
< div id = "sideMenu" style = { {
< div
width : width + "%" ,
id = "sideMenu"
} } >
style = { {
width : width + "%" ,
} } >
< div id = "sideMenuContent" >
< div id = "sideMenuContent" >
< Team teams = { teams } / >
< Team teams = { teams } / >
< Tactic lastTactics = { lastTactics } / >
< Tactic lastTactics = { lastTactics } / >
< / div >
< / div >
< / div >
< / div >
)
)
} }
export function PersonalSpace ( { width , allTactics } : { width : number , allTactics : Tactic [ ] } ) { export function PersonalSpace ( {
width ,
allTactics ,
} : {
width : number
allTactics : Tactic [ ]
} ) {
return (
return (
< div id = "personal-space" style = { {
< div
width : width + "%" ,
id = "personal-space"
} } >
style = { {
< TitlePersonalSpace / >
width : width + "%" ,
< BodyPersonalSpace allTactics = { allTactics } / >
} } >
< TitlePersonalSpace / >
< BodyPersonalSpace allTactics = { allTactics } / >
< / div >
< / div >
)
)
} }
@ -91,157 +146,156 @@ function TitlePersonalSpace() {
)
)
} }
function TableData ( { allTactics } : { allTactics : Tactic [ ] } ) { function TableData ( { allTactics } : { allTactics : Tactic [ ] } ) {
const nbRow = Math . floor ( allTactics . length / 3 ) + 1 ;
const nbRow = Math . floor ( allTactics . length / 3 ) + 1
let listTactic = Array ( nbRow ) ;
let listTactic = Array ( nbRow )
for ( let i = 0 ; i < nbRow ; i ++ ) {
for ( let i = 0 ; i < nbRow ; i ++ ) {
listTactic [ i ] = Array ( 0 ) ;
listTactic [ i ] = Array ( 0 )
}
}
let i = 0 ;
let i = 0
let j = 0 ;
let j = 0
allTactics . forEach ( tactic = > {
allTactics . forEach ( ( tactic ) = > {
listTactic [ i ] . push ( tactic ) ;
listTactic [ i ] . push ( tactic )
j ++ ;
j ++
if ( j === 3 ) {
if ( j === 3 ) {
i ++ ;
i ++
j = 0 ;
j = 0
}
}
} )
} )
i = 0 ;
i = 0
while ( i < nbRow ) {
while ( i < nbRow ) {
listTactic [ i ] = listTactic [ i ] . map ( ( tactic : Tactic ) = >
listTactic [ i ] = listTactic [ i ] . map ( ( tactic : Tactic ) = > (
< td key = { tactic . id } className = "data" onClick = { ( ) = > { location . pathname = "/tactic/" + tactic . id + "/edit" } } > { troncName ( tactic . name , 25 ) } < / td >
< td
) ;
key = { tactic . id }
i ++ ;
className = "data"
onClick = { ( ) = > {
location . pathname = "/tactic/" + tactic . id + "/edit"
} } >
{ troncName ( tactic . name , 25 ) }
< / td >
) )
i ++
}
}
if ( nbRow == 1 ) {
if ( nbRow == 1 ) {
if ( listTactic [ 0 ] . length < 3 ) {
if ( listTactic [ 0 ] . length < 3 ) {
for ( let i = 0 ; i <= 3 - listTactic [ 0 ] . length ; i ++ ) {
for ( let i = 0 ; i <= 3 - listTactic [ 0 ] . length ; i ++ ) {
listTactic [ 0 ] . push ( < td key = { "tdNone" + i } > < / td > ) ;
listTactic [ 0 ] . push ( < td key = { "tdNone" + i } > < / td > )
}
}
}
}
}
}
const data = listTactic . map ( ( tactic , rowIndex ) = >
const data = listTactic . map ( ( tactic , rowIndex ) = > (
< tr key = { rowIndex + "row" } >
< tr key = { rowIndex + "row" } > { tactic } < / tr >
{ tactic }
) )
< / tr >
return data
) ;
return data ;
} }
function BodyPersonalSpace ( { allTactics } : { allTactics : Tactic [ ] } ) { function BodyPersonalSpace ( { allTactics } : { allTactics : Tactic [ ] } ) {
let data ;
let data
if ( allTactics . length == 0 ) {
if ( allTactics . length == 0 ) {
data = (
data = < p > Aucune tactique cr é é ! < / p >
< p > Aucune tactique cr é é ! < / p >
} else {
) ;
data = < TableData allTactics = { allTactics } / >
}
else {
data = ( < TableData allTactics = { allTactics } / > ) ;
}
}
return (
return (
< div id = "bodyPersonalSpace" >
< div id = "bodyPersonalSpace" >
< table >
< table >
< tbody key = "tbody" >
< tbody key = "tbody" > { data } < / tbody >
{ data }
< / tbody >
< / table >
< / table >
< / div >
< / div >
)
)
} }
export function Team ( { teams } : { teams : Team [ ] } ) { export function Team ( { teams } : { teams : Team [ ] } ) {
const listTeam = teams . map ( ( team , rowIndex ) = >
const listTeam = teams . map ( ( team , rowIndex ) = > (
< li
< li key = { "team" + rowIndex } >
key = { "team" + rowIndex }
>
{ team . name }
{ team . name }
< button onClick = { ( ) = > location . pathname = "/team/" + team . id } > open < / button >
< button onClick = { ( ) = > ( location . pathname = "/team/" + team . id ) } >
open
< / button >
< / li >
< / li >
) ;
) )
return (
return (
< div id = "teams" >
< div id = "teams" >
< div className = "titreSideMenu" >
< div className = "titreSideMenu" >
< h2 className = "title" > Mes é quipes < / h2 >
< h2 className = "title" > Mes é quipes < / h2 >
< button className = "new" onClick = { ( ) = > location . pathname = "/team/new" } > + < / button >
< button
className = "new"
onClick = { ( ) = > ( location . pathname = "/team/new" ) } >
+
< / button >
< / div >
< / div >
< SetButtonTeam teams = { teams } / >
< SetButtonTeam teams = { teams } / >
< / div >
< / div >
)
)
} }
export function Tactic ( { lastTactics } : { lastTactics : Tactic [ ] } ) { export function Tactic ( { lastTactics } : { lastTactics : Tactic [ ] } ) {
return (
return (
< div id = "tactic" >
< div id = "tactic" >
< div className = "titreSideMenu" >
< div className = "titreSideMenu" >
< h2 className = "title" > Mes derni è res strat é gies < / h2 >
< h2 className = "title" > Mes derni è res strat é gies < / h2 >
< button className = "new" id = "createTactic" onClick = { ( ) = > ( location . pathname = "/tactic/new" ) } > + < / button >
< button
< / div >
className = "new"
< SetButtonTactic tactics = { lastTactics } / >
id = "createTactic"
onClick = { ( ) = > ( location . pathname = "/tactic/new" ) } >
+
< / button >
< / div >
< SetButtonTactic tactics = { lastTactics } / >
< / div >
< / div >
)
)
} }
function SetButtonTactic ( { tactics } : { tactics : Tactic [ ] } ) {
function SetButtonTactic ( { tactics } : { tactics : Tactic [ ] } ) { const lastTactics = tactics . map ( ( tactic ) = > (
const lastTactics = tactics . map ( tactic = >
< ButtonLastTactic tactic = { tactic } / >
< ButtonLastTactic tactic = { tactic } / >
) ;
) )
return (
return < div className = "SetButton" > { lastTactics } < / div >
< div className = "SetButton" >
{ lastTactics }
< / div >
) ;
} }
function SetButtonTeam ( { teams } : { teams : Team [ ] } ) { function SetButtonTeam ( { teams } : { teams : Team [ ] } ) {
const listTeam = teams . map ( teams = >
const listTeam = teams . map ( ( teams ) = > < ButtonTeam team = { teams } / > )
< ButtonTeam team = { teams } / >
return < div className = "SetButton" > { listTeam } < / div >
) ;
return (
< div className = "SetButton" >
{ listTeam }
< / div >
) ;
} }
function ButtonTeam ( { team } : { team : Team } ) { function ButtonTeam ( { team } : { team : Team } ) {
const name = troncName ( team . name , 20 ) ;
const name = troncName ( team . name , 20 )
return (
return (
< div >
< div >
< div
< div
id = { "ButtonTeam" + team . id }
id = { "ButtonTeam" + team . id }
className = "buttonSideMenu data"
className = "buttonSideMenu data"
onClick = { ( ) = > { location . pathname = "/team/" + team . id } }
onClick = { ( ) = > {
>
location . pathname = "/team/" + team . id
} } >
{ name }
{ name }
< / div >
< / div >
< / div >
< / div >
)
)
} }
function ButtonLastTactic ( { tactic } : { tactic : Tactic } ) { function ButtonLastTactic ( { tactic } : { tactic : Tactic } ) {
const name = troncName ( tactic . name , 20 ) ;
const name = troncName ( tactic . name , 20 )
return (
return (
< div
< div
id = { "Button" + tactic . id }
id = { "Button" + tactic . id }
className = "buttonSideMenu data"
className = "buttonSideMenu data"
onClick = { ( ) = > { location . pathname = "/tactic/" + tactic . id + "/edit" } }
onClick = { ( ) = > {
>
location . pathname = "/tactic/" + tactic . id + "/edit"
} } >
{ name }
{ name }
< / div >
< / div >
) ;
)
} }
function troncName ( name : string , limit : number ) : string { function troncName ( name : string , limit : number ) : string {
if ( name . length > limit ) {
if ( name . length > limit ) {
name = name . substring ( 0 , limit ) + "..." ;
name = name . substring ( 0 , limit ) + "..."
} else {
} else {
name = name ;
name = name
}
}
return name ;
return name
} }
DahmaneYanis
1 year ago