Commit 913892dd authored by Martin Bebjak's avatar Martin Bebjak Committed by Jiri Novotny
Browse files

Add Mission Detail

parent 1c449f7c
......@@ -36,7 +36,7 @@ export function AgentDetail() {
<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>
<Accordion.Item eventKey="0">
<Accordion.Header><h4>Missions</h4></Accordion.Header>
<Accordion.Body>
......
import { useEffect, useState } from "react";
import axios from 'axios';
import { AgentInMission } from './AgentInMission'
import { start } from "repl";
import { Button } from "@mui/material";
import { Card, Row, Col } from 'react-bootstrap'
export function MissionDetail() {
const [mission, setMission] = useState<any>(null);
......@@ -27,18 +30,89 @@ export function MissionDetail() {
)
} else {
return(
<div>
<h2> { mission[`codeName`] } </h2>
<h4>Agents</h4>
{ mission[`agents`].map((agent: any) => {
return(
<AgentInMission codeName={ agent.agentCodeName.codename }
startDate={ agent.startDate }
endDate={ agent.endDate }
agentId={ agent.agentCodeName.id }/>
);
}) }
// <div>
// <h2> { mission[`codeName`] } </h2>
// <h4>Agents</h4>
// { mission[`agents`].map((agent: any) => {
// return(
// <AgentInMission codeName={ agent.agentCodeName.codename }
// startDate={ agent.startDate }
// endDate={ agent.endDate }
// agentId={ agent.agentCodeName.id }/>
// );
// }) }
// </div>
<div >
<h2>
{ mission[`codeName`] }
</h2>
<div style={{textAlign: "start"}}>
<Row>
{/* TODO text drbnut na zaciatok */}
<Col className="m-4">
<Card>
<Card.Header>Objectives</Card.Header>
<Card.Body>
<blockquote className="blockquote mb-0">
<p>
{' '}
{mission[`objectives`]}{' '}
</p>
<footer className="blockquote-footer">
Main Operator
</footer>
</blockquote>
</Card.Body>
</Card>
</Col>
</Row>
<Row>
<Col className="mx-4">
<Card>
<Card.Header as="h5">Country</Card.Header>
<Card.Body className="text-center">
<Row>
<Col md="2">
<Card.Img src={mission.countryDetail.flag} />
</Col>
<Col md="10">
<Row>
<Col>
<Card.Title >{ mission.countryDetail.name }</Card.Title>
</Col>
</Row>
<Row className="mt-2">
<Col>
<Card.Subtitle>Continent</Card.Subtitle>
<Card.Text className="mt-1">{ mission.countryDetail.continent }</Card.Text>
</Col>
<Col>
<Card.Subtitle>Population</Card.Subtitle>
<Card.Text className="mt-1">{ mission.countryDetail.population }</Card.Text>
</Col>
<Col>
<Card.Subtitle>Area</Card.Subtitle>
<Card.Text className="mt-1">{ mission.countryDetail.area }</Card.Text>
</Col>
<Col>
<Card.Subtitle>GDP</Card.Subtitle>
<Card.Text className="mt-1">{ mission.countryDetail.gdp }</Card.Text>
</Col>
<Col>
<Card.Subtitle>Capial Coordinates</Card.Subtitle>
<Card.Text className="mt-1">{ mission.countryDetail.capitalCoordinates }</Card.Text>
</Col>
</Row>
</Col>
</Row>
</Card.Body>
</Card>
</Col>
</Row>
</div>
</div>
)
}
}
\ 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