Skip to content
GitLab
Commit ad4ddc80 authored by Martin Bebjak's avatar Martin Bebjak
Browse files

Add pagination & Homepage

parent b40909c0
Expand all Hide whitespace changes
Inline Side-by-side
ssa-frontend/secret_service_archive/src/components/AgentsList.tsx
View file @ ad4ddc80
......@@ -2,6 +2,9 @@ import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Agent } from './Agent'
import { useNavigate } from 'react-router-dom';
import { Row, Col, Button, Container } from 'react-bootstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { solid } from '@fortawesome/fontawesome-svg-core/import.macro';
export function AgentsList () {
......@@ -20,7 +23,7 @@ export function AgentsList () {
setAgents(agentData);
});
console.log(agents)
},[]);
},[page]);
if (agents === null) {
return(
......@@ -30,7 +33,7 @@ export function AgentsList () {
)
} else {
return(
<div className="agentList" >
<Container fluid>
{ agents.data.map((agent: any) => {
return(
<Agent codeName={ agent.codeName }
......@@ -39,7 +42,22 @@ export function AgentsList () {
agentId={ agent.id }/>
);
}) }
</div>
<Row>
<Col md="2">
<Button onClick={ () => setPage(page - 1) } disabled={ page === 0} variant="outline-dark">
<FontAwesomeIcon icon={solid('angle-left')} /> Previous
</Button>
</Col>
<Col md="8">
<p> Page {page + 1} of { agents.totalPageCount}</p>
</Col>
<Col md="2">
<Button onClick={ () => setPage(page + 1) } disabled={ page === agents.totalPageCount - 1} variant="outline-dark">
Next <FontAwesomeIcon icon={solid('angle-right')} />
</Button>
</Col>
</Row>
</Container>
)
}
}
\ No newline at end of file
ssa-frontend/secret_service_archive/src/components/Base.tsx
View file @ ad4ddc80
export function Base () {
import { Link } from 'react-router-dom';
import { Container, Card } from 'react-bootstrap';
export function Base (props: any) {
return(
<div>
<h2>Welcome to Secret Service Archive</h2>
<h5>Please Log In to continue</h5>
<p>
Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Curabitur bibendum justo non orci. Nunc tincidunt ante vitae massa. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Fusce nibh. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Fusce nibh. Nam quis nulla. Donec vitae arcu. Suspendisse nisl. Nunc tincidunt ante vitae massa. Mauris tincidunt sem sed arcu. Phasellus faucibus molestie nisl. Curabitur sagittis hendrerit ante. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Fusce consectetuer risus a nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. In rutrum. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Quisque porta. Aliquam erat volutpat. Quisque tincidunt scelerisque libero. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla non lectus sed nisl molestie malesuada. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Nulla non arcu lacinia neque faucibus fringilla. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc tincidunt ante vitae massa. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam erat volutpat. Etiam neque.
</p>
</div>
<Container>
<Card>
<Card.Body>
<Card.Title as="h1" className="cover-heading">Welcome to Secret Service Archive</Card.Title>
<Card.Text>
This web page helps to view archivated files from secret agents.
</Card.Text>
<Card.Text>
Please Log In to continoue browsing this website.
</Card.Text>
<div className="d-gridx mt-3 text-center">
<Link to={"/login"} className="btn btn-outline-primary btn-xl">
Log In
</Link>
</div>
</Card.Body>
</Card>
</Container>
)
}
\ No newline at end of file
ssa-frontend/secret_service_archive/src/components/FindAvailableAgents.tsx
View file @ ad4ddc80
......@@ -32,7 +32,7 @@ export function FindAvailableAgents() {
if (picked.skill !== null && (picked.country === null || picked.country === '')){
console.log("skill", picked.skill)
axios.get(`/agents/skills/` + picked.skill.id + `?page=1&pageSize=5`)
axios.get(`/agents/skills/` + picked.skill.id + `?page=0&pageSize=5`)
.then(res => {
if (res.status == 403) {
navigate('/forbidden');
......
ssa-frontend/secret_service_archive/src/components/Home.tsx
View file @ ad4ddc80
interface IHomeProps{
userName: string
}
import { Link } from 'react-router-dom';
import { Container, Card, CardGroup, Row, Col } from 'react-bootstrap';
export function Home (props: IHomeProps) {
export function Home (props: any) {
return(
<div>
<h4>Welcome { props.userName } to Secret Service Archive</h4>
<p>Pellentesque arcu. Suspendisse nisl. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Praesent dapibus. Maecenas sollicitudin. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Curabitur bibendum justo non orci. Ut tempus purus at lorem. Vestibulum fermentum tortor id mi. Nulla pulvinar eleifend sem. Praesent id justo in neque elementum ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean id metus id velit ullamcorper pulvinar.
Morbi scelerisque luctus velit. Mauris metus. Donec ipsum massa, ullamcorper in, auctor et, scelerisque sed, est. Mauris dictum facilisis augue. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Nulla non arcu lacinia neque faucibus fringilla. Aliquam ornare wisi eu metus. Fusce nibh. Integer imperdiet lectus quis justo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Phasellus faucibus molestie nisl.
Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. In enim a arcu imperdiet malesuada. Nullam sit amet magna in magna gravida vehicula. Vivamus luctus egestas leo. Duis pulvinar. Sed convallis magna eu sem. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Integer imperdiet lectus quis justo. Aenean vel massa quis mauris vehicula lacinia. Etiam egestas wisi a erat. Praesent id justo in neque elementum ultrices. Duis condimentum augue id magna semper rutrum. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus.
</p>
</div>
<Container>
<Row className="my-4">
<Col>
<Card>
<Card.Body>
<Card.Title as="h1" className="cover-heading">Welcome { props.userName } to Secret Service Archive</Card.Title>
<Card.Text>
This web page helps to view archivated files from secret agents.
</Card.Text>
</Card.Body>
</Card>
</Col>
</Row>
<Row className="my-4">
<Col>
<CardGroup>
<Card>
<Card.Body>
<Row>
<Col md="3">
<Card.Img src="https://gitlab.fi.muni.cz/uploads/-/system/project/avatar/23694/271616313_907488703256129_299855329059077184_n.png?width=64" />
</Col>
<Col className="text-start d-flex align-items-center">
<Card.Title>View all agent</Card.Title>
</Col>
</Row>
<Card.Text>
You can explore your agent details.
</Card.Text>
<div className="d-gridx mt-3 text-center">
<Link to={"/agents"} className="btn btn-outline-primary btn-m">
Visit Agents
</Link>
</div>
</Card.Body>
<Card.Footer>
<small className="text-muted">Available for operator</small>
</Card.Footer>
</Card>
<Card>
<Card.Body>
<Row>
<Col md="3">
<Card.Img src="https://icons-for-free.com/download-icon-desire+game+goal+mission+sport+target+icon-1320184914414056998_512.png" />
</Col>
<Col className="text-start d-flex align-items-center">
<Card.Title>View all missions</Card.Title>
</Col>
</Row>
<Card.Text>
You can explore ongoing and finished missions.
</Card.Text>
<div className="d-gridx mt-3 text-center">
<Link to={"/missions"} className="btn btn-outline-primary btn-m">
Visit Missions
</Link>
</div>
</Card.Body>
<Card.Footer>
<small className="text-muted">Available for all agents </small>
</Card.Footer>
</Card>
<Card>
<Card.Body>
<Row>
<Col md="3">
<Card.Img src="https://gitlab.fi.muni.cz/uploads/-/system/project/avatar/23694/271616313_907488703256129_299855329059077184_n.png?width=64" />
</Col>
<Col className="text-start d-flex align-items-center">
<Card.Title>Find Available Agents</Card.Title>
</Col>
</Row>
<Card.Text>
You can find agnets, which are currently free.
</Card.Text>
<div className="d-gridx mt-3 text-center">
<Link to={"/agents"} className="btn btn-outline-primary btn-m">
Find Free Agents
</Link>
</div>
</Card.Body>
<Card.Footer>
<small className="text-muted">Available for operator</small>
</Card.Footer>
</Card>
</CardGroup>
</Col>
</Row>
</Container>
)
}
\ No newline at end of file
ssa-frontend/secret_service_archive/src/components/Main.tsx
View file @ ad4ddc80
......@@ -45,7 +45,7 @@ export class Main extends Component<IMainProps, IMainState>{
<Routes>
<Route path="/login" element={ <LogIn main={ this }/> }/>
<Route path="/" element={ <Base /> }/>
<Route path="/home" element={ <Home userName="Jozin"/> }/>
<Route path="/home" element={ <Home userName="USER"/> }/>
<Route path="/agents" element={ <AgentsList/> }/>
<Route path="/missions" element={ <MissionsList/> }/>
<Route path="/findAgent" element={ <FindAvailableAgents/> }/>
......
ssa-frontend/secret_service_archive/src/components/MissionsList.tsx
View file @ ad4ddc80
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Mission } from './Mission'
import { Col, Container } from 'react-bootstrap';
import { useNavigate } from 'react-router-dom';
import { Col, Container, Pagination, Row, Button } from 'react-bootstrap';
import { useNavigate, Link } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { regular, solid } from '@fortawesome/fontawesome-svg-core/import.macro';
export function MissionsList () {
......@@ -12,7 +14,7 @@ export function MissionsList () {
const navigate = useNavigate();
useEffect(() => {
axios.get(`/missions/allMissions?page=` + page + `&pageSize=20`)
axios.get(`/missions/allMissions?page=` + page + `&pageSize=18`)
.then(res => {
if (res.status == 403) {
navigate('/forbidden');
......@@ -21,7 +23,7 @@ export function MissionsList () {
setMissions(agentData);
});
console.log(missions)
},[]);
},[page]);
if (missions === null) {
return(
......@@ -47,6 +49,21 @@ export function MissionsList () {
);
}) }
</div>
<Row>
<Col md="2">
<Button onClick={ () => setPage(page - 1) } disabled={ page === 0} variant="outline-dark">
<FontAwesomeIcon icon={solid('angle-left')} /> Previous
</Button>
</Col>
<Col md="8">
<p> Page {page + 1} of { missions.totalPageCount}</p>
</Col>
<Col md="2">
<Button onClick={ () => setPage(page + 1) } disabled={ page === missions.totalPageCount - 1} variant="outline-dark">
Next <FontAwesomeIcon icon={solid('angle-right')} />
</Button>
</Col>
</Row>
</Container>
)
}
......
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