Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

merging dev #467

Merged
merged 4 commits into from
Nov 27, 2023
+497 −270
Merged

merging dev #467

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e724aa9
Created annotations type of map item
ilgazer Nov 26, 2023
26ade84
Add list of cards and filtering dropdown component
ilgazer Nov 26, 2023
2ad6140
add filtering by category and type
ilgazer Nov 26, 2023
db173c0
Merge pull request #461 from bounswe/feature/frontend_add_list_and_fi…
kubraaksux Nov 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 50 additions & 35 deletions resq/frontend/src/App.js
View file
Open in desktop
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
47 changes: 17 additions & 30 deletions resq/frontend/src/components/DisasterMap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import * as React from 'react';
import {useState} from 'react';
import {useEffect, useState} from 'react';
import {Map, Marker, ZoomControl} from 'pigeon-maps';
import {type_colors} from "../Colors";
import {AnnotationIcon, MarkerIcon} from "./MapIcons";

const MAPBOX_TOKEN = "pk.eyJ1IjoiaWxnYXplciIsImEiOiJjbG80Nzg4Z3gwMjZ4MmtxcTR3bGI5enR3In0.QdNftxZYpJ79K0M0DfYHUw"
const MAPBOX_STYLE = "mapbox/streets-v12"
Expand All @@ -14,31 +15,15 @@ function mapboxProvider(x, y, z, dpr) {
}`;
}

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

const MarkerIcon = ({color}) => (
<svg
width={33}
height="38.689655172413794"
viewBox="0 0 61 71"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g style={{pointerEvents: "auto"}}>
<path
d="M52 31.5C52 36.8395 49.18 42.314 45.0107 47.6094C40.8672 52.872 35.619 57.678 31.1763 61.6922C30.7916 62.0398 30.2084 62.0398 29.8237 61.6922C25.381 57.678 20.1328 52.872 15.9893 47.6094C11.82 42.314 9 36.8395 9 31.5C9 18.5709 18.6801 9 30.5 9C42.3199 9 52 18.5709 52 31.5Z"
fill={color}
stroke="white"
strokeWidth={4}
/>
<circle cx="30.5" cy="30.5" r="8.5" fill="white" opacity="0.6"/>
</g>
</svg>
);


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

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

const renderMarker = (marker) => {
return (
Expand All @@ -51,32 +36,34 @@ export default function DisasterMap({onPointSelected, markers = []}) {
event.preventDefault()
}}
>
{<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]}
//height={window.innerHeight - (ref?.y || 48)}
//width={ref?.offsetWidth || 100}
center={center}
center={mapCenter}
zoom={zoom}
onClick={({event}) => {
onPointSelected(null);
event.preventDefault()
}}
onBoundsChanged={({center, zoom}) => {
setCenter(center)
setMapCenter(center)
setZoom(zoom)
}}>
<ZoomControl/>
{markers.map(renderMarker)}
{markers
.sort(({type})=> -marker_order.indexOf(type))
.map(renderMarker)}
</Map>
</div>
</div>
Expand Down
28 changes: 28 additions & 0 deletions resq/frontend/src/components/MapIcons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import {Cancel, LocalFireDepartment, LocalHospital} from "@mui/icons-material";
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"}}/>
})[icon]
export const MarkerIcon = ({color}) => (
<svg
width={33}
height="38.689655172413794"
viewBox="0 0 61 71"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g style={{pointerEvents: "auto"}}>
<path
d="M52 31.5C52 36.8395 49.18 42.314 45.0107 47.6094C40.8672 52.872 35.619 57.678 31.1763 61.6922C30.7916 62.0398 30.2084 62.0398 29.8237 61.6922C25.381 57.678 20.1328 52.872 15.9893 47.6094C11.82 42.314 9 36.8395 9 31.5C9 18.5709 18.6801 9 30.5 9C42.3199 9 52 18.5709 52 31.5Z"
fill={color}
stroke="white"
strokeWidth={4}
/>
<circle cx="30.5" cy="30.5" r="8.5" fill="white" opacity="0.6"/>
</g>
</svg>
);
Loading
Loading