Skip to content

Commit

Permalink
add filtering by category and type
Browse files Browse the repository at this point in the history 
fix map dimensions
  • Loading branch information
@ilgazer
ilgazer committed Nov 26, 2023
1 parent 26ade84 commit 2ad6140
Show file tree
Hide file tree
Showing 5 changed files with 218 additions and 123 deletions.
85 changes: 50 additions & 35 deletions resq/frontend/src/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom";
import { Navbar, Container, Nav } from 'react-bootstrap';
import React, {useEffect, useRef, useState} from 'react';
import {BrowserRouter as Router, Routes, Route, Navigate} from "react-router-dom";
import {Navbar, Container, Nav} from 'react-bootstrap';
import UserRoles from "./pages/UserRoles";
import SignIn from "./pages/SignIn";
import SignUp from "./pages/SignUp";
Expand All @@ -17,50 +17,64 @@ const SmallRedCircle = () =>
height="20"
viewBox="0 0 20 20"
>
<circle cx="10" cy="10" r="8" fill="red" />
<circle cx="10" cy="10" r="8" fill="red"/>
</svg>

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(() => {
window.addEventListener("resize", updateDimensions);
return () => window.removeEventListener("resize", updateDimensions);
}, []);

const setToken = t => {
localStorage.setItem("token", t || "")
_setToken(t)
}

const navLinks = [
{ path: '/map', label: <strong>Map Demo</strong>, component: MapDemo, icon: <SmallRedCircle /> },
{path: '/map', label: <strong>Map Demo</strong>, component: MapDemo, icon: <SmallRedCircle/>},
token && {
path: '/userroles',
label: <strong>User Roles</strong>,
component: UserRoles,
icon: <SmallRedCircle />
icon: <SmallRedCircle/>
},
(role === "responder") && {
path: '/responder',
label: <strong>Responder Panel</strong>,
component: <div>Responder Panel</div>,
icon: <SmallRedCircle />
icon: <SmallRedCircle/>
},
].filter(l => !!l);

const signOut = () => {
setToken(null)
}

const ref = useRef(null)

return (
<Router>
<div>
<Navbar bg="light" variant="light" expand="lg">
<Container>
<Navbar.Brand href="/" style={{ color: 'red', fontWeight: 'bold' }}>
<SmallRedCircle />
<Container ref={ref}>
<Navbar.Brand href="/" style={{color: 'red', fontWeight: 'bold'}}>
<SmallRedCircle/>
ResQ
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Toggle aria-controls="basic-navbar-nav"/>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
{navLinks.map(({ path, label, icon }) => (
{navLinks.map(({path, label, icon}) => (
<Nav.Link key={path} href={path}>
{icon}
{label}
Expand All @@ -70,24 +84,25 @@ function App() {
<Nav className="ml-auto">
{token ?
<>
<Nav.Link key={"/account"} href={"/account"} style={{ "marginLeft": "auto" }}>
<SmallRedCircle />
<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 />
<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 />
style={{"marginLeft": "auto"}}>
<LogoutIcon/>
</Nav.Link>
</> :
<>
<Nav.Link key={'/signin'} href={'/signin'} style={{ "marginLeft": "auto" }}>
<Nav.Link key={'/signin'} href={'/signin'} style={{"marginLeft": "auto"}}>
<strong>Sign In</strong>
</Nav.Link>
<Nav.Link key={'/signup'} href={'/signup'} style={{ "marginLeft": "auto" }}>
<Nav.Link key={'/signup'} href={'/signup'} style={{"marginLeft": "auto"}}>
<strong>Sign Up</strong>
</Nav.Link>
</>
Expand All @@ -96,27 +111,27 @@ function App() {
</Navbar.Collapse>
</Container>
</Navbar>
<main>
<main style={{height: `${height - 57}px`}}>
<Routes>
{navLinks.map(({ path, component }) => (
{navLinks.map(({path, component}) => (
<Route key={path} path={path}
element={React.createElement(component, { token, setToken, role, setRole })} />
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 })} />
<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="/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 })} />
<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>
Expand Down
11 changes: 7 additions & 4 deletions resq/frontend/src/components/DisasterMap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ function mapboxProvider(x, y, z, dpr) {
}`;
}

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

export default function DisasterMap({onPointSelected, markers = [], center}) {
const [zoom, setZoom] = useState(6.5);
Expand All @@ -35,15 +36,15 @@ export default function DisasterMap({onPointSelected, markers = [], center}) {
event.preventDefault()
}}
>
{marker.icon ? <AnnotationIcon icon={marker.icon}/> : <MarkerIcon color={type_colors[marker.type]}/>}
{marker.type==="Annotation" ? <AnnotationIcon icon={marker.category}/> : <MarkerIcon color={type_colors[marker.type]}/>}
</Marker>
);
};

// noinspection JSValidateTypes
return (
<div style={{display: "flex"}}>
<div style={{flexGrow: 100, height: "calc(100vh - 56px)"}}>
<div style={{display: "flex", height: "100%"}}>
<div style={{flexGrow: 100, height: "100%"}}>
<Map
provider={mapboxProvider}
dprs={[1, 2]}
Expand All @@ -60,7 +61,9 @@ export default function DisasterMap({onPointSelected, markers = [], center}) {
setZoom(zoom)
}}>
<ZoomControl/>
{markers.map(renderMarker)}
{markers
.sort(({type})=> -marker_order.indexOf(type))
.map(renderMarker)}
</Map>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions resq/frontend/src/pages/ListCards.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ async function getAddress(latitude, longitude) {
}


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

Expand All @@ -45,8 +45,8 @@ export const AnnotationCard = ({item: {title, short_description, long_descriptio
return <Card variant="outlined">
<CardHeader
avatar={
<Avatar sx={{bgcolor: type_colors["Request"]}} aria-label={icon}>
<AnnotationIcon icon={icon} color={"white"}/>
<Avatar sx={{bgcolor: type_colors["Request"]}} aria-label={category}>
<AnnotationIcon icon={category} color={"white"}/>
</Avatar>
}
titleTypographyProps={{variant: 'h6'}}
Expand Down
Loading

0 comments on commit 2ad6140

Please sign in to comment.