148 lines
4 KiB
TypeScript
148 lines
4 KiB
TypeScript
import { Box } from "@mui/material";
|
|
import DisplayDrawer from "common/DisplayDrawer";
|
|
import MapMarkerSettings from "maps/MapMarkerSettings";
|
|
import { GrainBag as BagModel } from "models/GrainBag";
|
|
//import GrainBag from "pages/grainBag";
|
|
import { pond } from "protobuf-ts/pond";
|
|
import { useGrainBagAPI, useSnackbar } from "providers";
|
|
import React, { useEffect, useState } from "react";
|
|
|
|
interface Props {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
selectedBag: string;
|
|
grainBags: Map<string, BagModel>;
|
|
removeMarker: (key: string) => void;
|
|
updateMarker: (key: string, newSettings: pond.GrainBagSettings) => void;
|
|
moveMap: (long: number, lat: number) => void;
|
|
}
|
|
|
|
export default function GrainBagDrawer(props: Props) {
|
|
const { open, onClose, selectedBag, grainBags, removeMarker, updateMarker, moveMap } = props;
|
|
const [bag, setBag] = useState<BagModel>(BagModel.create());
|
|
const [openMarkerSettings, setOpenMarkerSettings] = useState(false);
|
|
const bagAPI = useGrainBagAPI();
|
|
const { openSnack } = useSnackbar();
|
|
|
|
useEffect(() => {
|
|
let b = grainBags.get(selectedBag);
|
|
if (b) {
|
|
setBag(b);
|
|
}
|
|
}, [selectedBag, grainBags]);
|
|
|
|
const closeDrawer = () => {
|
|
onClose();
|
|
};
|
|
|
|
const displayNext = () => {
|
|
let bagArr = Array.from(grainBags.values());
|
|
let index = bagArr.indexOf(bag);
|
|
let found = false;
|
|
do {
|
|
if (index === bagArr.length - 1) {
|
|
index = 0;
|
|
} else {
|
|
index++;
|
|
}
|
|
let nextBag = bagArr[index];
|
|
let location = nextBag.centerLocation();
|
|
if (
|
|
location !== null &&
|
|
location !== undefined &&
|
|
location.longitude !== 0 &&
|
|
location.longitude !== 0
|
|
) {
|
|
setBag(nextBag);
|
|
moveMap(location.longitude, location.latitude);
|
|
found = true;
|
|
}
|
|
} while (!found);
|
|
};
|
|
|
|
const displayPrev = () => {
|
|
let bagArr = Array.from(grainBags.values());
|
|
let index = bagArr.indexOf(bag);
|
|
let found = false;
|
|
do {
|
|
if (index === 0) {
|
|
index = bagArr.length - 1;
|
|
} else {
|
|
index--;
|
|
}
|
|
let nextBag = bagArr[index];
|
|
let location = nextBag.centerLocation();
|
|
if (
|
|
location !== null &&
|
|
location !== undefined &&
|
|
location.longitude !== 0 &&
|
|
location.longitude !== 0
|
|
) {
|
|
setBag(nextBag);
|
|
moveMap(location.longitude, location.latitude);
|
|
found = true;
|
|
}
|
|
} while (!found);
|
|
};
|
|
|
|
const drawerBody = () => {
|
|
//return <Box>{bag.key() !== "" && <GrainBag bagKey={bag.key()} mobileView />}</Box>;
|
|
return <Box></Box>
|
|
};
|
|
|
|
const update = () => {
|
|
setOpenMarkerSettings(true);
|
|
};
|
|
|
|
const remove = () => {
|
|
let settings = bag.settings;
|
|
settings.startLocation = undefined;
|
|
settings.endLocation = undefined;
|
|
bagAPI
|
|
.updateGrainBag(bag.key(), bag.name(), settings)
|
|
.then(resp => {
|
|
openSnack("Grain bag location removed");
|
|
removeMarker(bag.key());
|
|
})
|
|
.catch(err => {
|
|
openSnack("Failed to remove grain bag location");
|
|
});
|
|
};
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<DisplayDrawer
|
|
open={open}
|
|
onClose={closeDrawer}
|
|
displayNext={displayNext}
|
|
displayPrev={displayPrev}
|
|
title={bag.name()}
|
|
width={"40vw"}
|
|
drawerBody={drawerBody()}
|
|
updateElement={update}
|
|
removeElement={remove}
|
|
/>
|
|
<MapMarkerSettings
|
|
close={() => {
|
|
setOpenMarkerSettings(false);
|
|
}}
|
|
open={openMarkerSettings}
|
|
colourControl
|
|
theme={bag.settings.theme ?? pond.ObjectTheme.create()}
|
|
updateObject={newTheme => {
|
|
let settings = bag.settings;
|
|
settings.theme = newTheme;
|
|
bagAPI
|
|
.updateGrainBag(bag.key(), bag.name(), settings)
|
|
.then(resp => {
|
|
openSnack("marker settings updated");
|
|
updateMarker(bag.key(), settings);
|
|
})
|
|
.catch(() => {
|
|
openSnack("failed to update marker settings");
|
|
});
|
|
}}
|
|
/>
|
|
</React.Fragment>
|
|
);
|
|
}
|