Skip to content

Commit

Permalink
Adds expand option to buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@kshitijrajsharma
kshitijrajsharma committed Sep 10, 2024
1 parent 60eb7a1 commit 45e89ce
Showing 1 changed file with 129 additions and 100 deletions.
229 changes: 129 additions & 100 deletions frontend/src/components/Layout/TrainingDS/DatasetEditor/AOI.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import React, { useContext, useEffect, useState } from "react";
import { Collapse, Box } from "@mui/material";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import ExpandLessIcon from "@mui/icons-material/ExpandLess";
import {
Alert,
Avatar,
Expand Down Expand Up @@ -71,7 +74,11 @@ const AOI = (props) => {
const [fileError, setFileError] = useState(null);
const [geoJsonFile, setGeoJsonFile] = useState(null);
const [fetchError, setFetchError] = useState(null);
const [expandedAoi, setExpandedAoi] = useState(null);

const handleExpandClick = (aoiId) => {
setExpandedAoi(expandedAoi === aoiId ? null : aoiId);
};
let _DATA = usePagination(
props.mapLayers.filter((e) => e.type === "aoi"),
PER_PAGE
Expand Down Expand Up @@ -414,53 +421,43 @@ const AOI = (props) => {
}
/>
<ListItemSecondaryAction>
{/* JOSM Editor Button */}
<Tooltip title="Create map data in JOSM Editor">
<IconButton
aria-label="comments"
sx={{ width: 24, height: 24 }}
className="margin1 transparent"
onClick={async (e) => {
try {
const Imgurl = new URL(
"http://127.0.0.1:8111/imagery"
);
Imgurl.searchParams.set("type", "tms");
Imgurl.searchParams.set(
"title",
props.oamImagery.name
);
Imgurl.searchParams.set(
"url",
props.oamImagery.url
);
const imgResponse = await fetch(Imgurl);
const loadurl = new URL(
"http://127.0.0.1:8111/load_and_zoom"
);
loadurl.searchParams.set(
"bottom",
layer.latlngs[0].lat
);
loadurl.searchParams.set(
"top",
layer.latlngs[1].lat
);
loadurl.searchParams.set(
"left",
layer.latlngs[0].lng
);
loadurl.searchParams.set(
"right",
layer.latlngs[2].lng
);
const loadResponse = await fetch(loadurl);

if (!imgResponse.ok) {
setOpenSnack(true);
}
} catch (error) {
setOpenSnack(true);
}
const Imgurl = new URL(
"http://127.0.0.1:8111/imagery"
);
Imgurl.searchParams.set("type", "tms");
Imgurl.searchParams.set(
"title",
props.oamImagery.name
);
Imgurl.searchParams.set("url", props.oamImagery.url);
const imgResponse = await fetch(Imgurl);

const loadurl = new URL(
"http://127.0.0.1:8111/load_and_zoom"
);
loadurl.searchParams.set(
"bottom",
layer.latlngs[0].lat
);
loadurl.searchParams.set("top", layer.latlngs[1].lat);
loadurl.searchParams.set(
"left",
layer.latlngs[0].lng
);
loadurl.searchParams.set(
"right",
layer.latlngs[2].lng
);
await fetch(loadurl);

if (!imgResponse.ok) setOpenSnack(true);
}}
>
<img
Expand All @@ -470,6 +467,8 @@ const AOI = (props) => {
/>
</IconButton>
</Tooltip>

{/* ID Editor Button */}
<Tooltip title="Create map data in ID Editor">
<IconButton
aria-label="comments"
Expand All @@ -496,96 +495,126 @@ const AOI = (props) => {
/>
</IconButton>
</Tooltip>

{/* Fetch OSM Data */}
<Tooltip title="Fetch OSM data for this TA">
<IconButton
aria-label="comments"
aria-label="fetch OSM data"
sx={{ width: 24, height: 24 }}
className="margin1"
onClick={(e) => {
mutateFetch(layer.aoiId);
}}
>
<MapTwoTone fontSize="small" />
{/* <RefreshIcon fontSize="small" /> */}
</IconButton>
</Tooltip>
<Tooltip title="Download this AOI">
<IconButton
aria-label="comments"
sx={{ width: 24, height: 24 }}
className="margin1"
onClick={(e) => {
mutateDownload(layer.aoiId);
console.log("Downloading AOI as Geojson");
}}
>
<CloudDownloadIcon fontSize="small" />
</IconButton>
</Tooltip>

<Tooltip title="Download Labels in this AOI">
<IconButton
aria-label="comments"
sx={{ width: 24, height: 24 }}
className="margin1"
onClick={(e) => {
mutateDownloadLables(layer.aoiId);
console.log("Downloading AOI Labels as Geojson");
}}
>
<CloudDownloadIcon fontSize="small" />
</IconButton>
</Tooltip>

{/* Zoom to TA */}
<Tooltip title="Zoom to TA">
<IconButton
sx={{ width: 24, height: 24 }}
className="margin1"
edge={"end"}
aria-label="delete"
onClick={(e) => {
const lat =
layer.latlngs.reduce(function (
accumulator,
curValue
) {
return accumulator + curValue.lat;
},
0) / layer.latlngs.length;
layer.latlngs.reduce(
(accumulator, curValue) =>
accumulator + curValue.lat,
0
) / layer.latlngs.length;
const lng =
layer.latlngs.reduce(function (
accumulator,
curValue
) {
return accumulator + curValue.lng;
},
0) / layer.latlngs.length;
layer.latlngs.reduce(
(accumulator, curValue) =>
accumulator + curValue.lng,
0
) / layer.latlngs.length;
props.selectAOIHandler([lat, lng], 17);
}}
>
<ZoomInMap fontSize="small" />
</IconButton>
</Tooltip>
<Tooltip title="Delete TA">

{/* Expand More Options */}
<Tooltip
title={
expandedAoi === layer.aoiId
? "Hide More Options"
: "Show More Options"
}
>
<IconButton
aria-label="comments"
sx={{ width: 24, height: 24 }}
className="margin-left-13"
onClick={(e) => {
mutateDeleteAOI(layer.aoiId, layer.id);
}}
className="margin1"
onClick={() => handleExpandClick(layer.aoiId)}
>
<DeleteIcon fontSize="small" />
{expandedAoi === layer.aoiId ? (
<ExpandLessIcon fontSize="small" />
) : (
<ExpandMoreIcon fontSize="small" />
)}
</IconButton>
</Tooltip>

<input
type="file"
accept=".geojson"
style={{ display: "block" }}
id={`file-input-${layer.aoiId}`}
onChange={(e) => handleFileChange(e, layer.aoiId)}
/>
{/* Collapsible section for more options */}
<Collapse
in={expandedAoi === layer.aoiId}
timeout="auto"
unmountOnExit
>
<Box sx={{ display: "flex", flexDirection: "column" }}>
{/* Download AOI */}
<Tooltip title="Download this AOI">
<IconButton
aria-label="download AOI"
sx={{ width: 24, height: 24 }}
className="margin1"
onClick={(e) => {
mutateDownload(layer.aoiId);
}}
>
<CloudDownloadIcon fontSize="small" />
</IconButton>
</Tooltip>

{/* Download Labels */}
<Tooltip title="Download Labels in this AOI">
<IconButton
aria-label="download labels"
sx={{ width: 24, height: 24 }}
className="margin1"
onClick={(e) => {
mutateDownloadLables(layer.aoiId);
}}
>
<CloudDownloadIcon fontSize="small" />
</IconButton>
</Tooltip>

{/* Delete TA */}
<Tooltip title="Delete TA">
<IconButton
aria-label="delete TA"
sx={{ width: 24, height: 24 }}
className="margin1"
onClick={(e) => {
mutateDeleteAOI(layer.aoiId, layer.id);
}}
>
<DeleteIcon fontSize="small" />
</IconButton>
</Tooltip>

{/* Upload GeoJSON */}
<input
type="file"
accept=".geojson"
style={{ display: "block" }}
id={`file-input-${layer.aoiId}`}
onChange={(e) => handleFileChange(e, layer.aoiId)}
/>
</Box>
</Collapse>
</ListItemSecondaryAction>
</ListItemWithWiderSecondaryAction>
))}
Expand Down

0 comments on commit 45e89ce

Please sign in to comment.