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

Add Mission Detail

parent 913892dd
Hide whitespace changes
Inline Side-by-side
ssa-frontend/secret_service_archive/src/components/AgentInMission.tsx
View file @ 32ebb39d
import Button from '@mui/material/Button';
import { Link } from 'react-router-dom';
import { Card, Row, Col, Modal, Button, Placeholder } from 'react-bootstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { regular } from '@fortawesome/fontawesome-svg-core/import.macro';
import { useState, useEffect } from 'react';
import axios from 'axios';
export function AgentInMission (props: any){
const [show, setShow] = useState(false);
const [report, setReport] = useState({
content: null,
id: null,
reportType: null
});
const [reportId, setReportId] = useState(null);
const handleClose = () => {
setShow(false);
}
useEffect(() => {
if (reportId) {
axios.get(`/reports/report` + reportId)
.then(res => {
const reportData = res.data;
setReport(reportData);
});
}
},[reportId]);
function handleShow(id: any){
setReportId(id);
setShow(true);
}
let modal: any;
if (report.id !== reportId) {
modal =
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Placeholder as={Card.Title} animation="glow">
<Placeholder xs={6} />
</Placeholder>
</Modal.Header>
<Modal.Body>
<Placeholder as={Card.Text} animation="glow">
<Placeholder xs={7} /> <Placeholder xs={4} /> <Placeholder xs={4} />{' '}
<Placeholder xs={6} /> <Placeholder xs={8} />
</Placeholder>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
</Modal.Footer>
</Modal>
} else {
modal =
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>{ report.reportType === "AGENT_REPORT" ? "Agent Report" : "Operator Report" }</Modal.Title>
</Modal.Header>
<Modal.Body>{ report.content }</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
</Modal.Footer>
</Modal>
}
return(
<div>
<p className="codeName">{ props.codeName }</p>
<div>
<p>{ props.startDate }</p>
<p>{ props.endDate }</p>
</div>
<Button component={Link} to={"/agent/" + props.agentId}>Got to agent</Button>
</div>
<>
<Card>
<Card.Header>Agent</Card.Header>
<Card.Body>
<Card.Title>{ props.codeName }</Card.Title>
<Card.Text>
From: { props.startDate }
</Card.Text>
<Card.Text>
To: { props.endDate }
</Card.Text>
<Card.Text>
{ props.reports.map((report: any) => {
return(
<Button onClick={ () => handleShow(report.id) }>
<FontAwesomeIcon icon={regular("file")} />
</Button>
)
})}
</Card.Text>
<Link to={"/agent/" + props.agentId}>Got to agent</Link>
</Card.Body>
</Card>
{ modal }
</>
)
}
\ No newline at end of file
ssa-frontend/secret_service_archive/src/components/MissionDetail.tsx
View file @ 32ebb39d
......@@ -2,8 +2,8 @@ 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'
import { Button, ListItem, } from "@mui/material";
import { Card, Row, Col, Container, ListGroup, ListGroupItem } from 'react-bootstrap'
export function MissionDetail() {
const [mission, setMission] = useState<any>(null);
......@@ -46,10 +46,8 @@ export function MissionDetail() {
<h2>
{ mission[`codeName`] }
</h2>
<div style={{textAlign: "start"}}>
<Container fluid className="text-start">
<Row>
{/* TODO text drbnut na zaciatok */}
<Col className="m-4">
<Card>
<Card.Header>Objectives</Card.Header>
......@@ -68,49 +66,94 @@ export function MissionDetail() {
</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">
<Col className="m-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>
<Row>
<Col className="m-4">
<Card>
<Card.Header as="h5">Resources</Card.Header>
<Card.Body>
<Row>
<Col>
<Card.Title >{ mission.countryDetail.name }</Card.Title>
</Col>
{ mission.resources.map((resource:any) => {
return(
<Col md="3">
<Card.Subtitle>
{ resource.name }
</Card.Subtitle>
<Card.Text>
{ resource.description }
</Card.Text>
</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>
</Card.Body>
</Card>
</Col>
</Row>
<Row>
<Col className="m-4">
<Card>
<Card.Header as="h5">Agents</Card.Header>
<Card.Body>
<Row>
{ mission.agents.map((agent: any) => {
return(
<Col md="3">
<AgentInMission codeName={ agent.agentCodeName.codename }
startDate={ agent.startDate }
endDate={ agent.endDate }
reports={ agent.reports }
agentId={ agent.agentCodeName.id }/>
</Col>
)
})}
</Row>
</Col>
</Row>
</Card.Body>
</Card>
</Card.Body>
</Card>
</Col>
</Row>
</div>
</Container>
</div>
)
......
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