Skip to content
GitLab
Commit 09f3a473 authored by Will's avatar Will Committed by Jiri Novotny
Browse files

frontend design, smth new and stuff

parent 32ebb39d
Expand all Hide whitespace changes
Inline Side-by-side
ssa-frontend/secret_service_archive/package.json
View file @ 09f3a473
......@@ -20,6 +20,7 @@
"axios": "^0.27.2",
"babel-plugin-macros": "^3.1.0",
"bootstrap": "^5.1.3",
"bootswatch": "^5.1.3",
"react": "^18.1.0",
"react-bootstrap": "^2.4.0",
"react-dom": "^18.1.0",
......
ssa-frontend/secret_service_archive/src/App.css
View file @ 09f3a473
......@@ -48,8 +48,21 @@
align-items: center;
}
.searchBar {
.searchBarx {
width: 100%;
display: flex;
align-self: center;margin-left: 30%;
}
.kpi {
padding: 5px;
border-left: 4px solid rgb(44, 62, 80);
border-radius: 5px;
text-align: left;
font-size: smaller;
}
.kpi > .card-subtitle {
font-weight: 600;
font-size: .85rem;
}
\ No newline at end of file
ssa-frontend/secret_service_archive/src/App.tsx
View file @ 09f3a473
......@@ -6,7 +6,7 @@ import { Footer } from './components/Footer';
function App() {
return (
<div className="App">
<div className="App" style={{marginBottom: "75px"}}>
{/* <Header/> */}
<Main/>
<Footer/>
......
ssa-frontend/secret_service_archive/src/components/FindAvailableAgents.tsx
View file @ 09f3a473
......@@ -3,6 +3,7 @@ import "react-widgets/styles.css";
import { useState, useCallback, useEffect } from "react";
import axios from 'axios'
import { Agent } from './Agent'
import { Col, Row } from 'react-bootstrap';
export function FindAvailableAgents() {
......@@ -69,27 +70,34 @@ export function FindAvailableAgents() {
)
} else {
return(
<div>
<div className="searchBar">
<Combobox
onChange={ value => {setPicked({country: value, skill: picked.skill})} }
hideCaret
data={ countries.data }
dataKey='id'
textField='name'
placeholder="Choose a country"/>
<Combobox
onChange={ value => {setPicked({country: picked.country, skill: value})} }
hideCaret
hideEmptyPopup
data={ skills.data }
dataKey='id'
textField='description'
placeholder="Choose a skill"/>
<button onClick={ () => {
searchForAgent()
} }>Search</button>
</div>
<div className='container-fluid'>
<Row className="mt-2">
<Col md='12'><h3>Find Agent by Country Experience and Skill</h3></Col>
<Col md='3' className="offset-md-3">
<Combobox
onChange={ value => {setPicked({country: value, skill: picked.skill})} }
hideCaret
data={ countries.data }
dataKey='id'
textField='name'
placeholder="Choose a country"/>
</Col>
<Col md='3'>
<Combobox
onChange={ value => {setPicked({country: picked.country, skill: value})} }
hideCaret
hideEmptyPopup
data={ skills.data }
dataKey='id'
textField='description'
placeholder="Choose a skill"/>
</Col>
<Col md='1' className="mb-2">
<button onClick={ () => {
searchForAgent()
} } className="btn btn-primary">Search</button>
</Col>
</Row>
<div className="agentList">
{ result.data.map((agent: any) => {
return(
......
ssa-frontend/secret_service_archive/src/components/Footer.tsx
View file @ 09f3a473
......@@ -6,8 +6,10 @@ import { Component } from 'react';
export class Footer extends Component{
render() {
return(
<footer className="site-footer">
&copy; 2022 Martin Bebjak, Viliam Juríček, Samuel Kulíšek, Jiří Novotný
<footer className="footer py-3 bg-light" style={{position: "fixed", width: "100%", bottom: "0"}}>
<div className="container">
<span className="text-muted">&copy; 2022 - Martin Bebjak, Viliam Juríček, Samuel Kulíšek, Jiří Novotný</span>
</div>
</footer>
)
}
......
ssa-frontend/secret_service_archive/src/components/LogIn.tsx
View file @ 09f3a473
import { Component } from 'react';
import { Roles, Main } from "./Main";
import { Link } from "react-router-dom";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { solid, regular, brands } from '@fortawesome/fontawesome-svg-core/import.macro';
interface ILogInProps{
main: Main
......@@ -31,15 +35,38 @@ export class LogIn extends Component<ILogInProps, ILogInState>{
// this.props.main.setState(() => ({userRole: Roles.Operator}));
// console.log(this.props.main.state.userRole)
return(
<div>
<h2>Pls LogIn dementore</h2>
<p>email:</p>
<input type="email"
<div className="container-fluid vh-100 mt-4">
<div className="rounded d-flex justify-content-center">
<div className="col-md-4 col-sm-12 shadow-lg p-5 bg-light">
<div className="text-center">
<h3 className="text-primary">Sign In</h3>
</div>
<form>
<div className="p-4">
<div className="input-group mb-3">
<span className="input-group-text bg-primary">
<FontAwesomeIcon icon={solid("envelope")} style={{color:"white"}}/>
</span>
<input type="email" className="form-control" placeholder="Enter email"
onChange={ event => this.setState({ email: event.target.value })}/>
<p>password</p>
<input type="password"
</div>
<div className="input-group mb-3">
<span className="input-group-text bg-primary">
<FontAwesomeIcon icon={solid("key")} style={{color:"white"}}/>
</span>
<input type="password" className="form-control" placeholder="Enter password"
onChange={ event => this.setState({ password: event.target.value })}/>
<button onClick={ this.onLogInClick }>Log In</button>
</div>
<button className="btn btn-primary text-center mt-2" type="submit">
Login
</button>
<p className="text-center mt-5">Don't have an account?&nbsp;
<Link to={"your mum"} className="text-primary">Sign Up</Link>
</p>
</div>
</form>
</div>
</div>
</div>
)
}
......
ssa-frontend/secret_service_archive/src/components/Mission.tsx
View file @ 09f3a473
import Button from '@mui/material/Button';
import { Card, ListGroup,Row, Col } from 'react-bootstrap';
import { Card, ListGroup,Row, Col } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { solid, regular, brands } from '@fortawesome/fontawesome-svg-core/import.macro';
export function Mission (props: any){
return(
<Card bg='Light'
<Card
border='primary'
key='Light'
text='dark'
className="mb-2"
style={{ width: '40%', marginTop: '1rem' }}>
<Row style={{ marginTop:'1rem'}}>
<Col md="auto">
<Card.Img src={ props.countryFlag } style={{ marginLeft: '1rem' }} alt="Card image" />
</Col>
className="mb-2 text-start"
style={{marginTop: '1rem' }}>
<Card.Header className='bg-primary text-white'><Card.Img src={ props.countryFlag } style={{height: "1.5rem", width: "auto"}} alt="Card image" className="me-2"/> { props.codeName}</Card.Header>
<Card.Body className="bg-tranparent">
<Row>
<Col>
<Card.Title>{ props.codeName}</Card.Title>
<Card.Text>
{props.objectives}
</Card.Text>
</Col>
</Row>
<Row style={{ marginTop: '2rem'}}>
<Row style={{ marginTop: '.5rem'}}>
<Col>
<Card.Subtitle className="mb-2">Start Date</Card.Subtitle>
<Card.Text>
{props.startDate}
</Card.Text>
<div className="kpi">
<Card.Subtitle>Start Date</Card.Subtitle>
<Card.Text>{props.startDate}</Card.Text>
</div>
</Col>
<Col>
<Card.Subtitle className="mb-2 ">Duration</Card.Subtitle>
<div className="kpi">
<Card.Subtitle>Duration</Card.Subtitle>
<Card.Text>
{props.duration} days
</Card.Text>
</div>
</Col>
<Col>
<Card.Subtitle className="mb-2 ">Agents</Card.Subtitle>
<div className="kpi">
<Card.Subtitle>Agents</Card.Subtitle>
<Card.Text>
{props.agentsCount}
</Card.Text>
</div>
</Col>
</Row>
<Button component={Link} to={"/mission/" + props.missionId}>Got to mission</Button>
<div className="d-gridx mt-3 text-center">
<Link to={"/mission/" + props.missionId} className="btn btn-outline-primary btn-sm">
<FontAwesomeIcon icon={solid('arrow-up-right-from-square')} /> Go to mission
</Link>
</div>
</Card.Body>
</Card>
)
}
\ No newline at end of file
ssa-frontend/secret_service_archive/src/components/MissionsList.tsx
View file @ 09f3a473
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Mission } from './Mission'
import { Col, Container } from 'react-bootstrap';
export function MissionsList () {
......@@ -25,9 +26,11 @@ export function MissionsList () {
)
} else {
return(
<div className="missionsList" >
<Container fluid>
<div className="row" >
{ missions.data.map((mission: any) => {
return(
<Col md="4">
<Mission codeName={ mission.codeName }
startDate={ mission.startDate }
duration={ mission.durationDays }
......@@ -35,9 +38,11 @@ export function MissionsList () {
countryFlag={ mission.countryDto.flag }
agentsCount={ mission.agentCount }
missionId={ mission.id }/>
</Col>
);
}) }
</div>
</Container>
)
}
}
\ No newline at end of file
ssa-frontend/secret_service_archive/src/components/Navbar.tsx
View file @ 09f3a473
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';
......@@ -26,14 +25,7 @@ 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>
<Navbar bg="dark" variant="dark">
<Navbar bg="primary" variant="dark">
<Container>
<Navbar.Brand href="/pa165/home">
<img
......
ssa-frontend/secret_service_archive/src/index.tsx
View file @ 09f3a473
......@@ -4,6 +4,7 @@ import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from "react-router-dom";
import "bootswatch/dist/flatly/bootstrap.min.css";
const root = ReactDOM.createRoot(
......
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