Skip to content

Commit

Permalink
Merge pull request #567 from bounswe/dev
Browse files Browse the repository at this point in the history 
merge dev to the frontend/back_integrate branch
  • Loading branch information
@kubraaksux
kubraaksux authored Dec 18, 2023
2 parents 8842d71 + e6d19c2 commit 06b529e
Show file tree
Hide file tree
Showing 9 changed files with 114 additions and 83 deletions.
8 changes: 8 additions & 0 deletions resq/.idea/.gitignore
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 6 additions & 0 deletions resq/.idea/misc.xml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 8 additions & 0 deletions resq/.idea/modules.xml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 9 additions & 0 deletions resq/.idea/resq.iml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 6 additions & 0 deletions resq/.idea/vcs.xml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 7 additions & 5 deletions resq/frontend/src/components/AnnotationCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,21 @@ const AnnotationCard = ({ annotation }) => {
.then((name) => setLocationName(name))
.catch((error) => console.error('Error fetching location name:', error));
}
}, [annotation.latitude, annotation.longitude]);
console.log(annotation);

const handleViewMore = () => {
setLongDescription(annotation.long_description || 'Long description not available.');
}, [annotation]);

const handleViewMore = () => {
setLongDescription(item.long_description || 'Long description not available.');
setOpen(true);
};


const handleClose = () => {
setOpen(false);
};


const LongDescriptionDialog = () => (
<Dialog open={open} onClose={handleClose}>
<DialogTitle>{annotation.title}</DialogTitle>
Expand Down Expand Up @@ -70,11 +73,10 @@ const AnnotationCard = ({ annotation }) => {
</Box>
)}

<Button color="primary" onClick={() => handleViewMore(annotation)}>
<Button color="primary" onClick={handleViewMore}>
View More
</Button>

{/* Long Description Dialog */}
<LongDescriptionDialog />
</Box>
);
Expand Down
40 changes: 17 additions & 23 deletions resq/frontend/src/components/Cards/AnnotationCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,39 +4,27 @@ import reverseGeocode from '../Geolocation';

const AnnotationCard = ({ item }) => {
const [locationName, setLocationName] = useState('Unknown Location');
const [open, setOpen] = useState(false); // Added for Dialog control
const [longDescription, setLongDescription] = useState(''); // State to hold long description
const [open, setOpen] = useState(false);
const [longDescription, setLongDescription] = useState('');

useEffect(() => {
if (item.latitude && item.longitude) {
reverseGeocode(item.latitude, item.longitude)
.then((name) => setLocationName(name))
.catch((error) => console.error('Error fetching location name:', error));
}
}, [item.latitude, item.longitude]);

const handleViewMore = () => {
setLongDescription(item.long_description || 'Long description not available.');
setOpen(true); // Open the dialog
};
}, [item]);

const handleViewMore = (e) => {
e.stopPropagation();
setOpen(true);
};

const handleClose = () => {
setOpen(false); // Close the dialog
setOpen(false);
};

// Dialog component to show long description
const LongDescriptionDialog = () => (
<Dialog open={open} onClose={handleClose}>
<DialogTitle>{item.title}</DialogTitle>
<DialogContent>
<DialogContentText>
{longDescription || 'Long description not available.'}
</DialogContentText>
</DialogContent>
</Dialog>
);

return (
<Box
padding={2}
Expand Down Expand Up @@ -69,12 +57,18 @@ const AnnotationCard = ({ item }) => {
</Box>
)}

<Button color="primary" onClick={() => handleViewMore(item)}>
<Button color="primary" onClick={handleViewMore}>
View More
</Button>

{/* Long Description Dialog */}
<LongDescriptionDialog />
<Dialog open={open} onClose={handleClose}>
<DialogTitle>{item.title}</DialogTitle>
<DialogContent>
<DialogContentText>
{longDescription}
</DialogContentText>
</DialogContent>
</Dialog>
</Box>
);
};
Expand Down
18 changes: 9 additions & 9 deletions resq/frontend/src/components/Resource/ResourceAddress.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import React, {useState, useEffect} from 'react';
import {TextField, Button, FormControl, InputLabel, Select, MenuItem, Box} from '@mui/material';
import React, { useState, useEffect } from 'react';
import { TextField, Button, FormControl, InputLabel, Select, MenuItem, Box } from '@mui/material';
import '@fontsource/inter';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import {createTheme, ThemeProvider} from '@mui/material/styles';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import Container from '@mui/material/Container';
import {ResourceContext} from './ResourceContext';
import {useContext} from 'react';
import { ResourceContext } from './ResourceContext';
import { useContext } from 'react';

const customTheme = createTheme({
palette: {
Expand All @@ -19,7 +19,7 @@ const customTheme = createTheme({
},
});

export default function ResourceAddress({resourceData, setResourceData}) {
export default function ResourceAddress({ resourceData, setResourceData }) {
const [address1, setAddress1] = useState("")
const [address2, setAddress2] = useState("")
const [city, setCity] = useState("")
Expand All @@ -44,7 +44,7 @@ export default function ResourceAddress({resourceData, setResourceData}) {
if (data.results && data.results.length > 0) {
const location = data.results[0].geometry.location;
setResourceData(
{...resourceData, latitude: location.lat, longitude: location.lng}
{ ...resourceData, latitude: location.lat, longitude: location.lng }
)
} else {
console.error('Geocoding failed: No results found');
Expand All @@ -64,7 +64,7 @@ export default function ResourceAddress({resourceData, setResourceData}) {
return (
<ThemeProvider theme={customTheme}>
<Container component="main" maxWidth="xs">
<CssBaseline/>
<CssBaseline />
<Box
sx={{
marginTop: 1,
Expand All @@ -76,7 +76,7 @@ export default function ResourceAddress({resourceData, setResourceData}) {
<Typography
component="h1"
variant="h5"
sx={{color: 'red', fontWeight: 'bold', margin: '0'}}
sx={{ color: 'red', fontWeight: 'bold', margin: '0' }}
>
Resource Delivery Address
</Typography>
Expand Down
90 changes: 44 additions & 46 deletions resq/frontend/src/pages/MapPage.js
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,16 @@
// noinspection JSUnusedLocalSymbols

import * as React from 'react';
import {useEffect, useState} from 'react';
import { useEffect, useState } from 'react';
import CssBaseline from '@mui/material/CssBaseline';
import Box from '@mui/material/Box';
import {createTheme, ThemeProvider} from '@mui/material/styles';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import Container from '@mui/material/Container';
import DisasterMap from "../components/DisasterMap";
import {cards} from "../components/Cards/ListCards";
import {AmountSelector, MultiCheckbox} from "../components/MultiCheckbox";
import {DatePicker} from "@mui/x-date-pickers";
import { cards } from "../components/Cards/ListCards";
import { AmountSelector, MultiCheckbox } from "../components/MultiCheckbox";
import { DatePicker } from "@mui/x-date-pickers";
import dayjs from "dayjs";
import {useQuery} from "@tanstack/react-query";
import {getCategoryTree} from "../AppService";
import { useQuery } from "@tanstack/react-query";
import { getCategoryTree } from "../AppService";

const customTheme = createTheme({
palette: {
Expand All @@ -27,7 +25,7 @@ const getAllCategories = categoryTree => {
return item => {
switch (item.type) {
case "Annotation":
return [{id: item?.category, data: item?.category}]
return [{ id: item?.category, data: item?.category }]
default:
return categoryTree.findCategoryWithId(parseInt(item.categoryTreeId))?.getAllParentCategories()
}
Expand Down Expand Up @@ -65,7 +63,7 @@ const makeFilterByCategory = categories => {
}
};

const makeFilterByType = (typeFilter) => item => typeFilter.length === 0 || typeFilter.map(t=>t.id).indexOf(item.type) !== -1
const makeFilterByType = (typeFilter) => item => typeFilter.length === 0 || typeFilter.map(t => t.id).indexOf(item.type) !== -1

const makeFilterByAmount = ([amount]) => {
if (typeof amount !== "string" || amount.indexOf("-") === -1)
Expand All @@ -79,7 +77,7 @@ const makeFilterByAmount = ([amount]) => {
const makeFilterByDateFrom = (dateFrom) => item => dateFrom === null || !dateFrom.isValid() || !(dateFrom > dayjs(item.date))
const makeFilterByDateTo = (dateTo) => item => dateTo === null || !dateTo.isValid() || !(dateTo < dayjs(item.date))

const makeFilterByBounds = ({ne: [ne_lat, ne_lng], sw: [sw_lat, sw_lng]}) =>
const makeFilterByBounds = ({ ne: [ne_lat, ne_lng], sw: [sw_lat, sw_lng] }) =>
function (item) {
return item.latitude <= ne_lat &&
item.longitude <= ne_lng &&
Expand All @@ -88,38 +86,37 @@ const makeFilterByBounds = ({ne: [ne_lat, ne_lng], sw: [sw_lat, sw_lng]}) =>
}


export default function MapPage({allMarkers}) {
const [shownMarkers, setShownMarkers] = useState(allMarkers)
const [selectedPoint, setSelectedPoint] = useState(null)
const [mapCenter, setMapCenter] = useState([39, 34.5])
const MapPage = ({ allMarkers }) => {
const [shownMarkers, setShownMarkers] = useState(allMarkers);
const [selectedPoint, setSelectedPoint] = useState(null);
const [mapCenter, setMapCenter] = useState([39, 34.5]);

const [typeFilter, setTypeFilter] = useState([])
const [dateFromFilter, setDateFromFilter] = useState(null)
const [dateToFilter, setDateToFilter] = useState(null)
const [amountFilter, setAmountFilter] = useState([])
const [categoryFilter, setCategoryFilter] = useState([])
const [mapBounds, setMapBounds] = useState({ne: [0, 0], sw: [0, 0]})
const [typeFilter, setTypeFilter] = useState([]);
const [dateFromFilter, setDateFromFilter] = useState(null);
const [dateToFilter, setDateToFilter] = useState(null);
const [amountFilter, setAmountFilter] = useState([]);
const [categoryFilter, setCategoryFilter] = useState([]);
const [mapBounds, setMapBounds] = useState({ ne: [0, 0], sw: [0, 0] });

const categoryTree = useQuery({queryKey: ['categoryTree'], queryFn: getCategoryTree})
const categoryTree = useQuery({ queryKey: ['categoryTree'], queryFn: getCategoryTree });


useEffect(() => {
if (selectedPoint) {
setMapCenter([selectedPoint.latitude, selectedPoint.longitude]);
}
}, [selectedPoint]);

useEffect(() => setShownMarkers(allMarkers), [allMarkers])

useEffect(() => setShownMarkers(
allMarkers
const filteredMarkers = allMarkers
.filter(makeFilterByCategory(categoryFilter))
.filter(makeFilterByType(typeFilter))
.filter(makeFilterByAmount(amountFilter))
.filter(makeFilterByDateFrom(dateFromFilter))
.filter(makeFilterByDateTo(dateToFilter))
.filter(makeFilterByBounds(mapBounds))
), [allMarkers, amountFilter, categoryFilter, dateFromFilter, dateToFilter, mapBounds, typeFilter])
.filter(makeFilterByBounds(mapBounds));

setShownMarkers(filteredMarkers);
}, [selectedPoint, allMarkers, amountFilter, categoryFilter, dateFromFilter, dateToFilter, mapBounds, typeFilter]);


const choices = new Map([
...allMarkers
Expand All @@ -133,29 +130,29 @@ export default function MapPage({allMarkers}) {
// noinspection JSValidateTypes
return (
<ThemeProvider theme={customTheme}>
<Container maxWidth="100%" style={{height: "100%", display: "flex", flexDirection: "column"}}>
<CssBaseline/>
<Container maxWidth="100%" style={{ height: "100%", display: "flex", flexDirection: "column" }}>
<CssBaseline />
<Box sx={{
display: "flex", flexDirection: "row", flexWrap: 'nowrap', margin: "12px", width: "100%",
justifyContent: "center"
}}>
<MultiCheckbox name={"Type"}
choices={["Annotation", "Resource", "Request"].map(i => ({id: i, data: i}))}
onChosenChanged={setTypeFilter}/>
choices={["Annotation", "Resource", "Request"].map(i => ({ id: i, data: i }))}
onChosenChanged={setTypeFilter} />
<MultiCheckbox name={"Category"}
choices={[...choices.values()]}
onChosenChanged={setCategoryFilter}/>
choices={[...choices.values()]}
onChosenChanged={setCategoryFilter} />
<AmountSelector name={"Amount"}
onChosenChanged={setAmountFilter}/>
onChosenChanged={setAmountFilter} />
<DatePicker
sx={{m: 1}}
sx={{ m: 1 }}
label="From"
format="DD/MM/YYYY"
value={dateFromFilter}
onChange={e => setDateFromFilter(e)}
/>
<DatePicker
sx={{m: 1}}
sx={{ m: 1 }}
label="To"
format="DD/MM/YYYY"
value={dateToFilter}
Expand Down Expand Up @@ -184,17 +181,17 @@ export default function MapPage({allMarkers}) {
}}>
{shownMarkers.map((marker) => {
const SelectedCard = cards[marker.type]
return <div onClick={() => setSelectedPoint(marker)}>< SelectedCard item={marker}/></div>
return <div onClick={() => setSelectedPoint(marker)}>< SelectedCard item={marker} /></div>
})}
</Box>
</Box>
<Box sx={{width: "36px"}}/>
<Box sx={{flexGrow: 100}}>
<Box sx={{ width: "36px" }} />
<Box sx={{ flexGrow: 100 }}>
<DisasterMap markers={shownMarkers}
mapCenter={mapCenter}
setMapCenter={setMapCenter}
onPointSelected={setSelectedPoint}
onBoundsChanged={setMapBounds}
mapCenter={mapCenter}
setMapCenter={setMapCenter}
onPointSelected={setSelectedPoint}
onBoundsChanged={setMapBounds}
/>
</Box>
</Box>
Expand All @@ -203,5 +200,6 @@ export default function MapPage({allMarkers}) {
);
}

export default MapPage;


0 comments on commit 06b529e

Please sign in to comment.