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