Skip to content

Commit

Permalink
Merge pull request #467 from bounswe/dev
Browse files Browse the repository at this point in the history 
merging dev
  • Loading branch information
@kubraaksux
kubraaksux committed Nov 27, 2023
2 parents 3f98f08 + db173c0 commit 1aca286
Show file tree
Hide file tree
Showing 6 changed files with 497 additions and 270 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
47 changes: 17 additions & 30 deletions resq/frontend/src/components/DisasterMap.js
View file
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
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

0 comments on commit 1aca286

Please sign in to comment.