Skip to content

Commit

Permalink
Merge pull request #469 from bounswe/feature/frontend_add_list_and_fi…
Browse files Browse the repository at this point in the history 
…ltering

Feature/frontend add list and filtering
  • Loading branch information
@kubraaksux
kubraaksux authored Nov 27, 2023
2 parents 9251bae + 3bafb5b commit 7a366c9
Show file tree
Hide file tree
Showing 8 changed files with 401 additions and 205 deletions.
2 changes: 2 additions & 0 deletions resq/frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,13 @@
"@mui/material": "^5.14.14",
"@mui/styled-engine": "^5.14.14",
"@mui/x-data-grid": "^6.18.1",
"@mui/x-date-pickers": "^6.18.2",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.6.0",
"bootstrap": "^5.3.2",
"dayjs": "^1.11.10",
"next": "^14.0.0",
"npm": "^10.2.1",
"pigeon-maps": "^0.21.3",
Expand Down
153 changes: 77 additions & 76 deletions resq/frontend/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import Account from "./pages/Account";
import RoleRequest from "./pages/RoleRequest";
import LogoutIcon from '@mui/icons-material/Logout';
import Request from "./pages/RequestCreation";
import {LocalizationProvider} from "@mui/x-date-pickers";
import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs";

const SmallRedCircle = () =>
<svg
Expand All @@ -23,11 +25,8 @@ const SmallRedCircle = () =>
function App() {
const [token, _setToken] = useState(localStorage.getItem("token"))
const [role, setRole] = useState("")
// eslint-disable-next-line no-unused-vars
const [width, setWidth] = useState(window.innerWidth);
const [height, setHeight] = useState(window.innerHeight);
const updateDimensions = () => {
setWidth(window.innerWidth);
setHeight(window.innerHeight);
}
useEffect(() => {
Expand Down Expand Up @@ -63,81 +62,83 @@ function App() {
const ref = useRef(null)

return (
<Router>
<div>
<Navbar bg="light" variant="light" expand="lg">
<Container ref={ref}>
<Navbar.Brand href="/" style={{color: 'red', fontWeight: 'bold'}}>
<SmallRedCircle/>
ResQ
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav"/>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
{navLinks.map(({path, label, icon}) => (
<Nav.Link key={path} href={path}>
{icon}
{label}
</Nav.Link>
))}
</Nav>
<Nav className="ml-auto">
{token ?
<>
<Nav.Link key={"/account"} href={"/account"} style={{"marginLeft": "auto"}}>
<SmallRedCircle/>
<strong>Account</strong>
</Nav.Link>
<Nav.Link key={"/requestcreation"} href={"/requestcreation"}
style={{"marginLeft": "auto"}}>
<SmallRedCircle/>
<strong>Create Request</strong>
</Nav.Link>
<Nav.Link key={"signout"} href={"#"} onClick={signOut}
style={{"marginLeft": "auto"}}>
<LogoutIcon/>
</Nav.Link>
</> :
<>
<Nav.Link key={'/signin'} href={'/signin'} style={{"marginLeft": "auto"}}>
<strong>Sign In</strong>
</Nav.Link>
<Nav.Link key={'/signup'} href={'/signup'} style={{"marginLeft": "auto"}}>
<strong>Sign Up</strong>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<Router>
<div>
<Navbar bg="light" variant="light" expand="lg">
<Container ref={ref}>
<Navbar.Brand href="/" style={{color: 'red', fontWeight: 'bold'}}>
<SmallRedCircle/>
ResQ
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav"/>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
{navLinks.map(({path, label, icon}) => (
<Nav.Link key={path} href={path}>
{icon}
{label}
</Nav.Link>
))}
</Nav>
<Nav className="ml-auto">
{token ?
<>
<Nav.Link key={"/account"} href={"/account"} style={{"marginLeft": "auto"}}>
<SmallRedCircle/>
<strong>Account</strong>
</Nav.Link>
<Nav.Link key={"/requestcreation"} href={"/requestcreation"}
style={{"marginLeft": "auto"}}>
<SmallRedCircle/>
<strong>Create Request</strong>
</Nav.Link>
<Nav.Link key={"signout"} href={"#"} onClick={signOut}
style={{"marginLeft": "auto"}}>
<LogoutIcon/>
</Nav.Link>
</> :
<>
<Nav.Link key={'/signin'} href={'/signin'} style={{"marginLeft": "auto"}}>
<strong>Sign In</strong>
</Nav.Link>
<Nav.Link key={'/signup'} href={'/signup'} style={{"marginLeft": "auto"}}>
<strong>Sign Up</strong>
</Nav.Link>
</>
}
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
<main style={{height: `${height - 57}px`}}>
<Routes>
{navLinks.map(({path, component}) => (
<Route key={path} path={path}
element={React.createElement(component, {token, setToken, role, setRole})}/>
))}
<Route path="/" element={<Navigate to="/map"/>}/>
<Route path="/rolerequest" state={{token, setToken}}
element={React.createElement(RoleRequest, {token, setToken})}/>
{
token ? <>
<Route path="/account" state={{token, setToken}}
element={React.createElement(Account, {token, setToken})}/>
<Route path="/requestcreation" state={{token, setToken}}
element={React.createElement(Request, {token, setToken})}/>
</>
: <>
<Route path="/signin" state={{token, setToken}}
element={React.createElement(SignIn, {token, setToken})}/>
<Route path="/signup" state={{token, setToken}}
element={React.createElement(SignUp, {token, setToken})}/>
</>
}
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
<main style={{height: `${height - 57}px`}}>
<Routes>
{navLinks.map(({path, component}) => (
<Route key={path} path={path}
element={React.createElement(component, {token, setToken, role, setRole})}/>
))}
<Route path="/" element={<Navigate to="/map"/>}/>
<Route path="/rolerequest" state={{token, setToken}}
element={React.createElement(RoleRequest, {token, setToken})}/>
{
token ? <>
<Route path="/account" state={{token, setToken}}
element={React.createElement(Account, {token, setToken})}/>
<Route path="/requestcreation" state={{token, setToken}}
element={React.createElement(Request, {token, setToken})}/>
</>
: <>
<Route path="/signin" state={{token, setToken}}
element={React.createElement(SignIn, {token, setToken})}/>
<Route path="/signup" state={{token, setToken}}
element={React.createElement(SignUp, {token, setToken})}/>
</>
}
</Routes>
</main>
</div>
</Router>
}
</Routes>
</main>
</div>
</Router>
</LocalizationProvider>
);
}

Expand Down
17 changes: 7 additions & 10 deletions resq/frontend/src/components/DisasterMap.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import {useEffect, useState} from 'react';
import {useState} from 'react';
import {Map, Marker, ZoomControl} from 'pigeon-maps';
import {type_colors} from "../Colors";
import {AnnotationIcon, MarkerIcon} from "./MapIcons";
Expand All @@ -17,13 +17,8 @@ function mapboxProvider(x, y, z, dpr) {

const marker_order = ["Annotation", "Request", "Resource"]

export default function DisasterMap({onPointSelected, markers = [], center}) {
export default function DisasterMap({onPointSelected, markers = [], mapCenter, setMapCenter, onBoundsChanged}) {
const [zoom, setZoom] = useState(6.5);
const [mapCenter, setMapCenter] = useState([39, 34.5])

useEffect(() => {
center && setMapCenter(center);
}, [center])

const renderMarker = (marker) => {
return (
Expand All @@ -36,7 +31,8 @@ export default function DisasterMap({onPointSelected, markers = [], center}) {
event.preventDefault()
}}
>
{marker.type==="Annotation" ? <AnnotationIcon icon={marker.category}/> : <MarkerIcon color={type_colors[marker.type]}/>}
{marker.type === "Annotation" ? <AnnotationIcon icon={marker.category}/> :
<MarkerIcon color={type_colors[marker.type]}/>}
</Marker>
);
};
Expand All @@ -56,13 +52,14 @@ export default function DisasterMap({onPointSelected, markers = [], center}) {
onPointSelected(null);
event.preventDefault()
}}
onBoundsChanged={({center, zoom}) => {
onBoundsChanged={({center, zoom, bounds}) => {
setMapCenter(center)
setZoom(zoom)
onBoundsChanged(bounds)
}}>
<ZoomControl/>
{markers
.sort(({type})=> -marker_order.indexOf(type))
.sort(({type}) => -marker_order.indexOf(type))
.map(renderMarker)}
</Map>
</div>
Expand Down
12 changes: 4 additions & 8 deletions resq/frontend/src/pages/ListCards.js → resq/frontend/src/components/ListCards.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {type_colors} from "../Colors";
import Typography from "@mui/material/Typography";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import styled from "styled-components";
import {AnnotationIcon} from "../components/MapIcons";
import {AnnotationIcon} from "./MapIcons";

const ExpandMore = styled(IconButton)`
transform: ${({expand}) => !expand ? 'rotate(0deg)' : 'rotate(180deg)'};
Expand All @@ -34,7 +34,7 @@ async function getAddress(latitude, longitude) {
}


export const AnnotationCard = ({item: {title, short_description, long_description, latitude, longitude, category}}) => {
export const AnnotationCard = ({item: {title, short_description, long_description, latitude, longitude, category, date}}) => {
const [expanded, setExpanded] = useState(false);
const [locationName, setLocationName] = useState('');

Expand All @@ -61,12 +61,6 @@ export const AnnotationCard = ({item: {title, short_description, long_descriptio
</Typography>
</CardContent>
<OffsetActions disableSpacing>
{/*<IconButton aria-label="add to favorites">
<FavoriteIcon/>
</IconButton>
<IconButton aria-label="share">
<ShareIcon/>
</IconButton>*/}
<ExpandMore
expand={expanded}
onClick={() => setExpanded(!expanded)}
Expand All @@ -78,6 +72,8 @@ export const AnnotationCard = ({item: {title, short_description, long_descriptio
</OffsetActions>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<CardContent>
Added on: {date}
<br/>
{long_description}
</CardContent>
</Collapse>
Expand Down
6 changes: 3 additions & 3 deletions resq/frontend/src/components/MapIcons.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ import * as React from "react";

export const AnnotationIcon = ({icon, color}) =>
({
fire: <LocalFireDepartment style={{pointerEvents: "auto", height: "38.6px"}}/>,
health: <LocalHospital style={{pointerEvents: "auto", height: "38.6px", color: color || "#e00000"}}/>,
closed: <Cancel style={{pointerEvents: "auto", height: "38.6px"}}/>
Fire: <LocalFireDepartment style={{pointerEvents: "auto", height: "38.6px"}}/>,
Health: <LocalHospital style={{pointerEvents: "auto", height: "38.6px", color: color || "#e00000"}}/>,
"Road Closure": <Cancel style={{pointerEvents: "auto", height: "38.6px"}}/>
})[icon]
export const MarkerIcon = ({color}) => (
<svg
Expand Down
Loading

0 comments on commit 7a366c9

Please sign in to comment.