Commit 1c449f7c authored by Martin Bebjak's avatar Martin Bebjak Committed by Jiri Novotny
Browse files

Add AgentDetail Component

parent 21a3e06f
...@@ -5,6 +5,10 @@ ...@@ -5,6 +5,10 @@
"dependencies": { "dependencies": {
"@emotion/react": "^11.9.0", "@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1", "@emotion/styled": "^11.8.1",
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-regular-svg-icons": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@fortawesome/react-fontawesome": "^0.1.18",
"@mui/material": "^5.7.0", "@mui/material": "^5.7.0",
"@testing-library/jest-dom": "^5.16.4", "@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.2.0", "@testing-library/react": "^13.2.0",
...@@ -14,6 +18,7 @@ ...@@ -14,6 +18,7 @@
"@types/react": "^18.0.9", "@types/react": "^18.0.9",
"@types/react-dom": "^18.0.3", "@types/react-dom": "^18.0.3",
"axios": "^0.27.2", "axios": "^0.27.2",
"babel-plugin-macros": "^3.1.0",
"bootstrap": "^5.1.3", "bootstrap": "^5.1.3",
"react": "^18.1.0", "react": "^18.1.0",
"react-bootstrap": "^2.4.0", "react-bootstrap": "^2.4.0",
......
module.exports = {
'fontawesome-svg-core': {
'license': 'free'
}
}
\ No newline at end of file
module.exports = function (api) {
return {
plugins: ['macros'],
}
}
\ No newline at end of file
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import axios from 'axios'; import axios from 'axios';
import { Mission } from './Mission' import { MissionInAgent } from './MissionInAgent'
import { Row, Col, Accordion, ListGroup } from "react-bootstrap";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { solid, regular, brands } from '@fortawesome/fontawesome-svg-core/import.macro';
import { Card } from "@mui/material";
export function AgentDetail() { export function AgentDetail() {
const [agent, setAgent] = useState<any>(null); const [agent, setAgent] = useState<any>(null);
...@@ -28,16 +32,99 @@ export function AgentDetail() { ...@@ -28,16 +32,99 @@ export function AgentDetail() {
} else { } else {
return( return(
<div> <div>
<h2> { agent[`codeName`] } </h2> <h2>
<h4>Missions</h4> <img src="https://gitlab.fi.muni.cz/uploads/-/system/project/avatar/23694/271616313_907488703256129_299855329059077184_n.png?width=64"/>
{ agent[`missions`].map((mission: any) => { { agent[`codeName`] }
return( </h2>
<Mission codeName={ mission.missionName.codename } <Accordion defaultActiveKey="0">
startDate={ mission.startDate } <Accordion.Item eventKey="0">
endDate={ mission.endDate } <Accordion.Header><h4>Missions</h4></Accordion.Header>
missionId={ mission.missionName.id }/> <Accordion.Body>
); <Row xs={1} md={2} xxl={3} className="g-4">
}) } { agent[`missions`].map((mission: any) => {
return(
<Col>
<MissionInAgent codeName={ mission.missionName.codename }
startDate={ mission.startDate }
endDate={ mission.endDate }
missionId={ mission.missionName.id }/>
</Col>
);
}) }
</Row>
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="1">
<Accordion.Header><h4>Languages</h4></Accordion.Header>
<Accordion.Body>
<Row xs={1} md={2} xxl={3} className="g-4">
{ agent[`skills`].filter((skill: any) => skill.type === "LANGUAGE").map((skill: any) => {
return(
<Col>
<li>
{ skill.description }
</li>
</Col>
)
})}
</Row>
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="2">
<Accordion.Header><h4>Weapons</h4></Accordion.Header>
<Accordion.Body>
<Row xs={1} md={2} xxl={3} className="g-4">
{ agent[`skills`].filter((skill: any) => skill.type === "WEAPON").map((skill: any) => {
return(
<Col>
<li>
{ skill.description }
</li>
</Col>
)
})}
</Row>
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="3">
<Accordion.Header><h4>Trainings</h4></Accordion.Header>
<Accordion.Body>
<Row xs={1} md={2} xxl={3} className="g-4">
{ agent[`trainings`].map((training: any) => {
if (training.difficulty === "EASY") {
return(
<Col>
<FontAwesomeIcon icon={regular("star")} />
{ training.description }
</Col>
)
}
if (training.difficulty === "MEDIUM") {
return(
<Col>
<FontAwesomeIcon icon={regular("star")} />
<FontAwesomeIcon icon={regular("star")} />
{ training.description }
</Col>
)
}
if (training.difficulty === "HARD") {
return(
<Col>
<FontAwesomeIcon icon={regular("star")} />
<FontAwesomeIcon icon={regular("star")} />
<FontAwesomeIcon icon={regular("star")} />
{ training.description }
</Col>
)
}
})}
</Row>
</Accordion.Body>
</Accordion.Item>
</Accordion>
</div> </div>
) )
} }
......
...@@ -4,14 +4,6 @@ import { Link } from 'react-router-dom'; ...@@ -4,14 +4,6 @@ import { Link } from 'react-router-dom';
export function Mission (props: any){ export function Mission (props: any){
return( return(
// <div>
// <p className="codeName">{ props.codeName }</p>
// <div>
// <p>{ props.startDate }</p>
// <p>{ props.endDate }</p>
// </div>
// <Button component={Link} to={"/mission/" + props.missionId}>Got to mission</Button>
// </div>
<Card bg='Light' <Card bg='Light'
key='Light' key='Light'
text='dark' text='dark'
......
import Button from '@mui/material/Button';
import { Link } from 'react-router-dom';
import { Card } from 'react-bootstrap';
export function MissionInAgent (props: any){
return(
// <div>
// <p className="codeName">{ props.codeName }</p>
// <div>
// <p>{ props.startDate }</p>
// <p>{ props.endDate }</p>
// </div>
// <Button component={Link} to={"/mission/" + props.missionId}>Got to mission</Button>
// </div>
<Card
bg={'light'}
key={'Light'}
text={'dark' }
style={{ width:"90%", marginLeft:"5%"}}
className="mb-2"
>
<Card.Header>Mission</Card.Header>
<Card.Body>
<Card.Title>{'Light'} {props.codeName} </Card.Title>
<Card.Text>
From: { props.startDate }
</Card.Text>
<Card.Text>
To: { props.endDate }
</Card.Text>
<Button component={Link} to={"/mission/" + props.missionId}>Got to mission</Button>
</Card.Body>
</Card>
)
}
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment