ajout de la page de deduction sans logique, avec des tableau accordion sur différentes tabs, le nombre de tabes est dynamic en fonction des joueurs ⚡
Pierre Ferreira
1 year ago
parent
5f57189eaf
commit
6b80d87d2e
@ -0,0 +1,60 @@
|
||||
import React from 'react';
|
||||
|
||||
/* Style */
|
||||
import '../Style/Global.css';
|
||||
//import { useTheme } from '../Style/ThemeContext';
|
||||
|
||||
/* Model */
|
||||
import Stub from '../model/Stub';
|
||||
import Indice from '../model/Indices/Indice';
|
||||
|
||||
|
||||
/* lang */
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
/* Boostrap */
|
||||
import Accordion from 'react-bootstrap/Accordion';
|
||||
import Table from 'react-bootstrap/Table';
|
||||
import Case from './CheckCase';
|
||||
|
||||
|
||||
interface AccordionIndiceComponentProps<T extends Indice> {
|
||||
instance: (new (...args: any[]) => T) | (Function & { prototype: T });
|
||||
head: string;
|
||||
lang: string;
|
||||
}
|
||||
|
||||
const AccordionIndice: React.FC<AccordionIndiceComponentProps<any>> = ({ instance, head, lang }) => {
|
||||
const indices = Stub.GenerateIndice();
|
||||
return (
|
||||
<>
|
||||
<Accordion defaultActiveKey={['0']} alwaysOpen style={{width:'100%'}}>
|
||||
<Accordion.Item eventKey="0">
|
||||
<Accordion.Header>{head}</Accordion.Header>
|
||||
<Accordion.Body>
|
||||
<Table striped bordered hover>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Indice</th>
|
||||
<th>Déduction</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{indices
|
||||
.filter((i) => i instanceof instance)
|
||||
.map((indice, index) => (
|
||||
<tr key={index}>
|
||||
<td>{indice.ToString(lang)}</td>
|
||||
<td><Case/></td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</Table>
|
||||
</Accordion.Body>
|
||||
</Accordion.Item>
|
||||
</Accordion>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default AccordionIndice;
|
||||
@ -0,0 +1,41 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
|
||||
/* style */
|
||||
import { useTheme } from '../Style/ThemeContext';
|
||||
import '../Pages/DeducGrid.css';
|
||||
|
||||
/* res */
|
||||
import Check from '../res/icon/checkboxGreen.png';
|
||||
|
||||
/* trad */
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
|
||||
//@ts-ignore
|
||||
function Case() {
|
||||
const theme = useTheme();
|
||||
|
||||
const [bg, setbg] = useState('whitesmoke');
|
||||
|
||||
//let check = ""; //? avec image
|
||||
//let bg = 'whitesmoke';
|
||||
|
||||
function changeOnCheck(){
|
||||
// if (check == "")check = Check;
|
||||
// else check = "";
|
||||
|
||||
if(bg == "whitesmoke")setbg(theme.colors.tertiary);
|
||||
else setbg("whitesmoke");
|
||||
|
||||
console.log("clic")
|
||||
}
|
||||
|
||||
return (
|
||||
<button className='case' onClick={changeOnCheck} style={{backgroundColor: bg, borderColor:'grey'}}>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export default Case;
|
||||
@ -0,0 +1,17 @@
|
||||
.case{
|
||||
min-width: 50px;
|
||||
min-height: 50px;
|
||||
border: solid 1px whitesmoke;
|
||||
}
|
||||
|
||||
.deducDiv{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sectionAccordion{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
|
||||
}
|
||||
@ -0,0 +1,104 @@
|
||||
import React from 'react';
|
||||
|
||||
|
||||
/* Style */
|
||||
import './DeducGrid.css';
|
||||
import { useTheme } from '../Style/ThemeContext';
|
||||
|
||||
/* Component */
|
||||
|
||||
/* Boostrap */
|
||||
import Accordion from 'react-bootstrap/Accordion';
|
||||
import Table from 'react-bootstrap/Table';
|
||||
import Tab from 'react-bootstrap/Tab';
|
||||
import Tabs from 'react-bootstrap/Tabs';
|
||||
|
||||
/* nav */
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
/* lang */
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import Case from '../Components/CheckCase';
|
||||
|
||||
import Age from '../model/Indices/AgeIndice'
|
||||
import Stub from '../model/Stub';
|
||||
import Edge from '../model/Graph/Edge';
|
||||
import EdgesIndice from '../model/Indices/EdgesIndice';
|
||||
import AccordionIndice from '../Components/AccordionIndice';
|
||||
import AgeIndice from '../model/Indices/AgeIndice';
|
||||
import ColorIndice from '../model/Indices/ColorIndice';
|
||||
import ColorEdgesIndice from '../model/Indices/ColorEdgesIndice';
|
||||
import SportIndice from '../model/Indices/SportIndice';
|
||||
import NbEdgesIndice from '../model/Indices/NbEdgesIndice';
|
||||
import NbSportIndice from '../model/Indices/NbSportIndice';
|
||||
|
||||
function DeducGrid() {
|
||||
const theme = useTheme();
|
||||
//const indices = Stub.GenerateIndice();
|
||||
|
||||
const joueurs = [
|
||||
"bla",
|
||||
"bli",
|
||||
"blou"
|
||||
]
|
||||
|
||||
return (
|
||||
<div style={{margin:'20px'}}>
|
||||
<Tabs defaultActiveKey="home" id="uncontrolled-tab-example" className="mb-3">
|
||||
{joueurs.map((joueur, index) => (
|
||||
<Tab key={index} eventKey={index.toString()} title={`${joueur} ${index + 1}`}>
|
||||
<div className='deducDiv'>
|
||||
<div className='sectionAccordion'>
|
||||
<AccordionIndice instance={AgeIndice} head='Age' lang='fr'/>
|
||||
</div>
|
||||
<div className='sectionAccordion'>
|
||||
<AccordionIndice instance={ColorIndice} head='Couleur de cheveux' lang='fr'/>
|
||||
<AccordionIndice instance={ColorEdgesIndice} head='Couleur de cheveux voisine' lang='fr'/>
|
||||
</div>
|
||||
<div className='sectionAccordion'>
|
||||
<AccordionIndice instance={SportIndice} head='Sport' lang='fr'/>
|
||||
<AccordionIndice instance={NbSportIndice} head='Nombre de Sport' lang='fr'/>
|
||||
</div>
|
||||
<div className='sectionAccordion'>
|
||||
<AccordionIndice instance={EdgesIndice} head='Caractéristique des voisin' lang='fr'/>
|
||||
<AccordionIndice instance={NbEdgesIndice} head='Nombre de voisin' lang='fr'/>
|
||||
</div>
|
||||
</div>
|
||||
</Tab>
|
||||
))}
|
||||
</Tabs>
|
||||
{/* <Tabs
|
||||
defaultActiveKey="home"
|
||||
id="uncontrolled-tab-example"
|
||||
className="mb-3">
|
||||
<Tab eventKey="home" title="Joueur">
|
||||
<div className='deducDiv'>
|
||||
<div className='sectionAccordion'>
|
||||
<AccordionIndice instance={AgeIndice} head='Age' lang='fr'/>
|
||||
</div>
|
||||
<div className='sectionAccordion'>
|
||||
<AccordionIndice instance={ColorIndice} head='Couleur de cheveux' lang='fr'/>
|
||||
<AccordionIndice instance={ColorEdgesIndice} head='Couleur de cheveux voisine' lang='fr'/>
|
||||
</div>
|
||||
<div className='sectionAccordion'>
|
||||
<AccordionIndice instance={SportIndice} head='Sport' lang='fr'/>
|
||||
<AccordionIndice instance={NbSportIndice} head='Nombre de Sport' lang='fr'/>
|
||||
</div>
|
||||
<div className='sectionAccordion'>
|
||||
<AccordionIndice instance={EdgesIndice} head='Caractéristique des voisin' lang='fr'/>
|
||||
<AccordionIndice instance={NbEdgesIndice} head='Nombre de voisin' lang='fr'/>
|
||||
</div>
|
||||
</div>
|
||||
</Tab>
|
||||
<Tab eventKey="profile" title="joueur suivant">
|
||||
tables joueur suivant
|
||||
</Tab>
|
||||
<Tab eventKey="contact" title="joueur suivant">
|
||||
tables joueur suivant
|
||||
</Tab>
|
||||
</Tabs> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DeducGrid;
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue