Commit 03e4e4b7 authored by Martin Bebjak's avatar Martin Bebjak Committed by Jiri Novotny
Browse files

Add bootstrap

parent 37c0a087
{
"name": "pa165-secret-service-archive",
"lockfileVersion": 2,
"requires": true,
"packages": {}
}
......@@ -14,7 +14,9 @@
"@types/react": "^18.0.9",
"@types/react-dom": "^18.0.3",
"axios": "^0.27.2",
"bootstrap": "^5.1.3",
"react": "^18.1.0",
"react-bootstrap": "^2.4.0",
"react-dom": "^18.1.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
......
......@@ -39,4 +39,10 @@
.agentList {
flex-direction: row;
display: flex;
}
.searchBar {
width: 100%;
display: flex;
align-self: center;margin-left: 30%;
}
\ No newline at end of file
......@@ -7,7 +7,7 @@ import { Footer } from './components/Footer';
function App() {
return (
<div className="App">
<Header/>
{/* <Header/> */}
<Main/>
<Footer/>
</div>
......
import Button from '@mui/material/Button';
import { Card, ListGroup } from 'react-bootstrap';
import serviceImage from './resources/secretservice.png';
import { Link } from 'react-router-dom';
export function Agent (props: any){
return(
<div>
<img src="https://gitlab.fi.muni.cz/uploads/-/system/project/avatar/23694/271616313_907488703256129_299855329059077184_n.png?width=64"></img>
<h3 className="codeName">{ props.codeName }</h3>
<div className="skills">
<h4>Skills</h4>
{ props.skills.map((skill: any) => {
return(
<p>{ skill.description }</p>
)
})}
</div>
<div>
<h4>Trainings</h4>
{ props.trainings.map((training: any) => {
return(
<p> { training.description } </p>
)
})}
</div>
// <div>
// <img src="https://gitlab.fi.muni.cz/uploads/-/system/project/avatar/23694/271616313_907488703256129_299855329059077184_n.png?width=64"></img>
// <h3 className="codeName">{ props.codeName }</h3>
// <div className="skills">
// <h4>Skills</h4>
// { props.skills.map((skill: any) => {
// return(
// <p>{ skill.description }</p>
// )
// })}
// </div>
// <div>
// <h4>Trainings</h4>
// { props.trainings.map((training: any) => {
// return(
// <p> { training.description } </p>
// )
// })}
// </div>
// <Button component={Link} to={"/agent/" + props.agentId}>Got to agent</Button>
// </div>
<Card>
<Card.Header as="h5">
<img src={ serviceImage } width="40px" height="40px"/>
{ props.codeName }
</Card.Header>
<Card.Body>
<ListGroup horizontal>
<ListGroup.Item>
<strong>Skills</strong>
<ListGroup horizontal>
<ListGroup.Item>
<strong>Languages</strong>
<ListGroup variant="flush">
{ props.skills.filter((skill: any) => skill.type === "LANGUAGE").map((skill: any) => {
return(
<ListGroup.Item>{ skill.name }</ListGroup.Item>
)
})}
</ListGroup>
</ListGroup.Item>
<ListGroup.Item>
<strong>Weapons</strong>
<ListGroup variant="flush">
{ props.skills.filter((skill: any) => skill.type === "WEAPON").map((skill: any) => {
return(
<ListGroup.Item>{ skill.name }</ListGroup.Item>
)
})}
</ListGroup>
</ListGroup.Item>
</ListGroup>
</ListGroup.Item>
<ListGroup.Item>
<strong>Trainings</strong>
<ListGroup horizontal>
<ListGroup.Item>
<strong>Easy</strong>
<ListGroup variant="flush">
{ props.trainings.filter((training: any) => training.difficulty === "EASY").map((training: any) => {
return(
<ListGroup.Item>{ training.name }</ListGroup.Item>
)
})}
</ListGroup>
</ListGroup.Item>
<ListGroup.Item>
<strong>Medium</strong>
<ListGroup variant="flush">
{ props.trainings.filter((training: any) => training.difficulty === "MEDIUM").map((training: any) => {
return(
<ListGroup.Item>{ training.name }</ListGroup.Item>
)
})}
</ListGroup>
</ListGroup.Item>
<ListGroup.Item>
<strong>Hard</strong>
<ListGroup variant="flush">
{ props.trainings.filter((training: any) => training.difficulty === "HARD").map((training: any) => {
return(
<ListGroup.Item>{ training.name }</ListGroup.Item>
)
})}
</ListGroup>
</ListGroup.Item>
</ListGroup>
</ListGroup.Item>
</ListGroup>
<Button component={Link} to={"/agent/" + props.agentId}>Got to agent</Button>
</div>
</Card.Body>
</Card>
)
}
\ No newline at end of file
......@@ -25,7 +25,7 @@ export function AgentsList () {
)
} else {
return(
<div className="agentList">
<div>
{ agents.map((agent: any) => {
return(
<Agent codeName={ agent.codeName }
......
import Combobox from "react-widgets/Combobox";
import "react-widgets/styles.css";
import { useState, useCallback, useEffect } from "react";
import axios from 'axios'
import { Agent } from './Agent'
......@@ -59,12 +60,7 @@ export function FindAvailableAgents() {
setCountries(countryData);
});
},[]);
// Set filtrede agents HTML
let content;
if (skills === null && countries === null) {
......@@ -78,7 +74,6 @@ export function FindAvailableAgents() {
<Combobox
onChange={ value => {setPicked({country: value, skill: picked.skill})} }
hideCaret
hideEmptyPopup
data={ countries }
dataKey='id'
textField='name'
......@@ -95,7 +90,7 @@ export function FindAvailableAgents() {
searchForAgent()
} }>Search</button>
</div>
<div className="agentList">
<div>
{ result.map((agent: any) => {
return(
<Agent codeName={ agent.codeName }
......
import { useEffect, useState } from "react";
import axios from 'axios';
import { Agent } from './Agent'
import { AgentInMission } from './AgentInMission'
export function MissionDetail() {
const [mission, setMission] = useState<any>(null);
......@@ -32,7 +32,7 @@ export function MissionDetail() {
<h4>Agents</h4>
{ mission[`agents`].map((agent: any) => {
return(
<Agent codeName={ agent.agentCodeName.codename }
<AgentInMission codeName={ agent.agentCodeName.codename }
startDate={ agent.startDate }
endDate={ agent.endDate }
agentId={ agent.agentCodeName.id }/>
......
import { Component } from 'react';
import { Link } from 'react-router-dom';
import { Navbar, Container, Nav } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Main } from './Main';
import serviceImage from './resources/agentwhitebody.png';
interface INavBarProps{
loggedIn: boolean
......@@ -23,13 +26,32 @@ export class NavBar extends Component<INavBarProps, INavBarState>{
render(){
return(
<div className="navigationBar">
<Link to="/login">Login</Link>
<Link to="/home">Home</Link>
<Link to="/agents">Agents</Link>
<Link to="/missions">Missions</Link>
<Link to="/findAgent">Find Available Agent</Link>
</div>
// <div className="navigationBar">
// <Link to="/login">Login</Link>
// <Link to="/home">Home</Link>
// <Link to="/agents">Agents</Link>
// <Link to="/missions">Missions</Link>
// <Link to="/findAgent">Find Available Agent</Link>
// </div>
<Navbar bg="dark" variant="dark">
<Container>
<Navbar.Brand href="/pa165/home">
<img
alt=""
src={ serviceImage }
width="30"
height="30"
className="d-inline-block align-top"
/>{' '}
Secret Service Archive
</Navbar.Brand>
<Nav className="me-auto">
<Nav.Link href="/pa165/agents">Agents</Nav.Link>
<Nav.Link href="/pa165/missions">Missions</Nav.Link>
<Nav.Link href="/pa165/findAgent">Find Available Agent</Nav.Link>
</Nav>
</Container>
</Navbar>
)
}
}
......@@ -21,6 +21,6 @@
"jsx": "react-jsx"
},
"include": [
"src"
"src",
]
}
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