Skip to content
GitLab
Commit 1c449f7c authored by Martin Bebjak's avatar Martin Bebjak Committed by Jiri Novotny
Browse files

Add AgentDetail Component

parent 21a3e06f
Expand all Show whitespace changes
Inline Side-by-side
ssa-frontend/secret_service_archive/package.json
View file @ 1c449f7c
......@@ -5,6 +5,10 @@
"dependencies": {
"@emotion/react": "^11.9.0",
"@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",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.2.0",
......@@ -14,6 +18,7 @@
"@types/react": "^18.0.9",
"@types/react-dom": "^18.0.3",
"axios": "^0.27.2",
"babel-plugin-macros": "^3.1.0",
"bootstrap": "^5.1.3",
"react": "^18.1.0",
"react-bootstrap": "^2.4.0",
......
ssa-frontend/secret_service_archive/src/babel-plugin-macros.config.js 0 → 100644
View file @ 1c449f7c
module.exports = {
'fontawesome-svg-core': {
'license': 'free'
}
}
\ No newline at end of file
ssa-frontend/secret_service_archive/src/babel.config.js 0 → 100644
View file @ 1c449f7c
module.exports = function (api) {
return {
plugins: ['macros'],
}
}
\ No newline at end of file
ssa-frontend/secret_service_archive/src/components/AgentDetail.tsx
View file @ 1c449f7c
import { useEffect, useState } from "react";
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() {
const [agent, setAgent] = useState<any>(null);
......@@ -28,16 +32,99 @@ export function AgentDetail() {
} else {
return(
<div>
<h2> { agent[`codeName`] } </h2>
<h4>Missions</h4>
<h2>
<img src="https://gitlab.fi.muni.cz/uploads/-/system/project/avatar/23694/271616313_907488703256129_299855329059077184_n.png?width=64"/>
{ agent[`codeName`] }
</h2>
<Accordion defaultActiveKey="0">
<Accordion.Item eventKey="0">
<Accordion.Header><h4>Missions</h4></Accordion.Header>
<Accordion.Body>
<Row xs={1} md={2} xxl={3} className="g-4">
{ agent[`missions`].map((mission: any) => {
return(
<Mission codeName={ mission.missionName.codename }
<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>
)
}
......
ssa-frontend/secret_service_archive/src/components/Mission.tsx
View file @ 1c449f7c
......@@ -4,14 +4,6 @@ import { Link } from 'react-router-dom';
export function Mission (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'
......
ssa-frontend/secret_service_archive/src/components/MissionInAgent.tsx 0 → 100644
View file @ 1c449f7c
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