Skip to content

Commit

Permalink
dataset edirot enhanced layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@omranlm
omranlm committed Aug 15, 2023
1 parent 93e4728 commit 9153d9c
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 120 deletions.
16 changes: 14 additions & 2 deletions frontend/src/components/Layout/TrainingDS/DatasetEditor/DatasetEditor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import MapActions from "./MapActions";
import axios from "../../../../axios";
import { useMutation } from "react-query";
import { useParams } from "react-router-dom";
import DatasetEditorHeader from "./DatasetEditorHeader";

function DatasetEditor() {
const [mapLayers, setMapLayers] = useState([]);
Expand Down Expand Up @@ -54,7 +55,7 @@ function DatasetEditor() {

return () => {};
}, []);

const [zoom, setZoom] = useState(15);
return (
<>
{isLoading && "Loading ............"}
Expand All @@ -77,9 +78,20 @@ function DatasetEditor() {
setgeoJSON(null);
}}
dataset={dataset}
setZoom={setZoom}
></DatasetMap>
</Grid>
<Grid item xs={6} md={3} className="column2">
<Grid item xs={6} md={3}>
<DatasetEditorHeader
dsId={dataset.id}
dsName={dataset.name}
zoom={zoom}
// editMode={editMode}
oamImagery={oamImagery}
// setEditMode={setEditMode}
mapLayersLength={mapLayers.length}
></DatasetEditorHeader>

<TileServerList
navigateToCenter={navigateToCenter}
addImagery={addImageryHandler}
Expand Down
138 changes: 41 additions & 97 deletions frontend/src/components/Layout/TrainingDS/DatasetEditor/DatasetEditorHeader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,107 +14,51 @@ import MapActions from "./MapActions";
const DatasetEditorHeader = (props) => {
return (
<>
<AppBar
position="fixed"
className="dataset-editor-header MuiAppBar-root2"
>
<Grid container padding={2}>
<Grid item xs={3} height={50}>
<Typography variant="h6" component="h2">
Dataset {props.dsId} : {props.dsName}
</Typography>
</Grid>
<Grid className="card">
<Typography variant="h6" component="h2">
Dataset {props.dsId} : {props.dsName}
</Typography>

<Grid item xs={3}>
<Typography variant="body1" component="h2">
Zoom: {props.zoom && +props.zoom.toFixed(1)}
<br />
{"Editing " + props.editMode}
</Typography>
</Grid>
<Grid item xs={3} className="switcher-margin">
<FormControl component="fieldset">
<RadioGroup
row
aria-label="position"
name="selectedLayer"
defaultValue="aoi"
onChange={(e) => {
console.log("changed", e);
props.setEditMode(e.target.value);
if (e.target.value === "aoi") {
// console.log("leaflet-bar a",document.querySelectorAll(".leaflet-bar a"))
<Typography variant="body1" component="h2">
Zoom: {props.zoom && +props.zoom.toFixed(1)}
</Typography>
{/* <Grid item xs={3}>
<FormControl component="fieldset">
<RadioGroup
row
aria-label="position"
name="selectedLayer"
defaultValue="aoi"
onChange={(e) => {
console.log("changed", e);
props.setEditMode(e.target.value);
if (e.target.value === "aoi") {
// console.log("leaflet-bar a",document.querySelectorAll(".leaflet-bar a"))
document.querySelectorAll(".leaflet-bar a").forEach((e) => {
e.style.backgroundColor = "rgb(51, 136, 255)";
console.log("leaflet-bar a", e.style);
});
} else {
console.log(
"leaflet-bar a",
document.querySelectorAll(".leaflet-bar a")
);
document.querySelectorAll(".leaflet-bar a").forEach((e) => {
e.style.backgroundColor = "rgb(51, 136, 255)";
console.log("leaflet-bar a", e.style);
});
} else {
console.log(
"leaflet-bar a",
document.querySelectorAll(".leaflet-bar a")
);
document.querySelectorAll(".leaflet-bar a").forEach((e) => {
e.style.backgroundColor = "#D73434";
console.log("leaflet-bar a", e.style);
});
}
}}
>
<FormControlLabel
value="aoi"
control={
<Radio color="primary" className="small-radio-aoi" />
}
label="AOIs"
labelPlacement="top"
/>
{/* <FormControlLabel
value="label"
control={
<Radio color="primary" className="small-radio-label" />
}
label="Labels"
labelPlacement="top"
/> */}
</RadioGroup>
</FormControl>
document.querySelectorAll(".leaflet-bar a").forEach((e) => {
e.style.backgroundColor = "#D73434";
console.log("leaflet-bar a", e.style);
});
}
}}
>
</RadioGroup>
</FormControl>
</Grid> */}

{/* <select defaultValue="aoi" id="selectedLayer" onChange={
(e) => {
props.setEditMode(e.target.value)
if (e.target.value === "aoi") {
// console.log("leaflet-bar a",document.querySelectorAll(".leaflet-bar a"))
document.querySelectorAll(".leaflet-bar a").forEach(e => {
e.style.backgroundColor = "rgb(51, 136, 255)"
console.log("leaflet-bar a", e.style)
})
}
else {
console.log("leaflet-bar a", document.querySelectorAll(".leaflet-bar a"))
document.querySelectorAll(".leaflet-bar a").forEach(e => {
e.style.backgroundColor = "#D73434"
console.log("leaflet-bar a", e.style)
})
}
}
}>
<option value="label">Labels</option>
<option value="aoi">AOIs</option>
</select> */}
</Grid>
<Grid item xs={3}>
<MapActions
oamImagery={props.oamImagery}
mapLayersLength={props.mapLayersLength}
></MapActions>
</Grid>
</Grid>
</AppBar>
<MapActions></MapActions>
</Grid>
</>
);
};
Expand Down
33 changes: 12 additions & 21 deletions frontend/src/components/Layout/TrainingDS/DatasetEditor/DatasetMap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -564,6 +564,7 @@ const DatasetMap = (props) => {
const { _animateToZoom } = e.target;
console.log("zoomend", e, _animateToZoom);
setZoom(_animateToZoom);
props.setZoom(_animateToZoom);
},
moveend: (e) => {
const { _animateToZoom, _layers } = e.target;
Expand Down Expand Up @@ -597,16 +598,6 @@ const DatasetMap = (props) => {

return (
<>
<DatasetEditorHeader
dsId={props.dataset.id}
dsName={props.dataset.name}
zoom={zoom}
editMode={editMode}
oamImagery={props.oamImagery}
setEditMode={setEditMode}
mapLayersLength={mapLayers.length}
></DatasetEditorHeader>

{mapError && <span style={{ color: "red" }}> Error: {mapError} </span>}

<MapContainer
Expand All @@ -615,9 +606,13 @@ const DatasetMap = (props) => {
style={{
height: "800px",
width: "100%",
marginTop: "75px",
}}
zoom={zoom}
zoomDelta={0.25}
wheelPxPerZoomLevel={Math.round(36 / 0.5)}
zoomSnap={0}
scrollWheelZoom={true}
// inertia={true}
whenCreated={setMap}
>
<MyComponent />
Expand Down Expand Up @@ -683,16 +678,12 @@ const DatasetMap = (props) => {
<EditControl
position="topleft"
onCreated={(e) => {
console.log(
"selectedLayer",
document.querySelector('input[name="selectedLayer"]:checked')
.value
);
_onCreate(
e,
document.querySelector('input[name="selectedLayer"]:checked')
.value
);
// console.log(
// "selectedLayer",
// document.querySelector('input[name="selectedLayer"]:checked')
// .value
// );
_onCreate(e, "aoi");
}}
onEdited={_onEdited}
onDeleted={_onDeleted}
Expand Down

0 comments on commit 9153d9c

Please sign in to comment.