{
terminalText.map((str, i) =>
+
+ )
}
export default Report;
\ No newline at end of file
{str}
) diff --git a/houston/src/pages/Control.css b/houston/src/pages/Control.css index d33384f2..7a883c72 100644 --- a/houston/src/pages/Control.css +++ b/houston/src/pages/Control.css @@ -44,6 +44,7 @@ margin-bottom: 20px; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75) inset; overflow: hidden; + user-select: none } .controls-page .data { diff --git a/houston/src/pages/Report.css b/houston/src/pages/Report.css new file mode 100644 index 00000000..5e122983 --- /dev/null +++ b/houston/src/pages/Report.css @@ -0,0 +1,220 @@ +.report-page { + display: flex; + flex: 1; + flex-direction: column; + justify-content: center; + align-items: center; + border: 1px solid black; + padding: 40px; + overflow-y: hidden; + box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75) inset; + user-select: none; +} + +.report-page .left-container { + display: flex; + flex: 19; + flex-direction: row; + width: 100%; + height: 100%; + border-radius: 20px; + align-items: center; + justify-items: center; + justify-content: center; + align-content: center; +} + +.report-page .checkbox-container { + display: flex; + flex-direction: row; + flex: 1; + margin-bottom: 10px; + background-color: var(--light-bg); + height: 100%; + width: 100%; + box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.75) inset; + border-radius: 15px; + justify-content: center; + align-items: center; + text-align: center; + justify-self: center; +} + +.report-page .checkbox { + display: flex; + flex: 50%; + font-size: 1.5dvh; + justify-content: center; +} + +.report-page .checkbox-text { + background-color: var(--highlight); + border-radius: 20px; + box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.75); + padding: 5px; + width: 22dvh; +} + +.report-page .gallery-container { + display: flex; + flex: 1; + border-radius: 20px; + flex-direction: column; + align-items: center; + justify-items: center; + justify-content: center; + align-content: center; +} + +.report-page .unmatched-gallery { + display: flex; + padding: 10px; + justify-content: center; + align-items: center; + flex: 2; + width: 100%; + max-height: 51dvh; + background-color: var(--failure-text); + border-radius: 20px; + margin-bottom: 10px; + box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.75) inset; + flex-wrap: wrap; + overflow-y: scroll; +} + +::-webkit-scrollbar { + display: none; +} + +.report-page .matched-gallery { + padding: 10px; + display: flex; + justify-content: center; + align-items: center; + flex: 1; + width: 100%; + max-height: 26dvh; + background-color: var(--success-text); + border-radius: 20px; + box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.75) inset; + flex-wrap: wrap; + overflow-y: scroll; +} + +.report-page .report-page-map { + display: flex; + flex: 1; + width: 100%; + height: 100%; + border-radius: 20px; + box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75); + margin-left: 25px; +} + +.report-page .image-container { + display: flex; + flex-direction: column; + flex: 1; + border-radius: 15px; + background-color: var(--grey-out-bg); + margin: 5px; + min-width: 18.25dvh; + max-width: 18.25dvh; + min-height: 25dvh; + max-height: 25dvh; + box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.75); +} + +.report-page .image { + align-self: center; + margin: 5px; + flex: 40%; + min-width: 12dvh; + max-width: 12dvh; + min-height: 12dvh; + max-height: 12dvh; + overflow: hidden; +} + +.report-page .image-data { + margin: 0px; + flex: 15%; + font-size: 1.35dvh; + width: 18dvh; + max-height: 4dvh; + margin-left: 5px; + margin-right: 5px; + text-overflow: hidden; + text-wrap: wrap; + user-select: none; +} + +.report-page .image-data-lat-long { + text-align: center; + margin: 0px; + flex: 15%; + font-size: 1.35dvh; + width: 18dvh; + max-height: 4dvh; + margin-left: 5px; + margin-right: 5px; + text-overflow: hidden; + text-wrap: wrap; + user-select: none; +} + +.report-page .button { + max-width: fit-content; + align-self: center; + margin-bottom: 10px; + font-size: 1.2dvh; +} + +@media (max-width: 1500px) { + .report-page { + flex-direction: column; + padding: 25px; + padding-left: 50px; + padding-right: 50px; + } + + .report-page .left-container { + flex-direction: column; + flex: 95%; + } + + .report-page .checkbox-container { + flex: 5%; + max-height: 25dvh; + margin-left: 5px; + margin-right: 5px; + margin: 0px; + } + + .report-page .report-page-map { + flex: 75%; + margin: 0px; + } + + .report-page .gallery-container { + flex-direction: row; + flex: 25%; + margin: 10px; + width: 100%; + } + + .report-page .unmatched-gallery { + flex: 45%; + max-height: 25dvh; + margin: 0px; + margin-left: 5px; + margin-right: 5px; + } + + .report-page .matched-gallery { + flex: 45%; + max-height: 25dvh; + margin-left: 5px; + margin-right: 5px; + } +} \ No newline at end of file diff --git a/houston/src/pages/Report.tsx b/houston/src/pages/Report.tsx index f884c28f..676f1122 100644 --- a/houston/src/pages/Report.tsx +++ b/houston/src/pages/Report.tsx @@ -1,7 +1,230 @@ import React from "react" +import TuasMap from '../components/TuasMap.tsx' +import "./Report.css" +import img1 from '../assets/report-page-images/amogus-1.png' +import img2 from '../assets/report-page-images/amogus-2.png' +import img3 from '../assets/report-page-images/amogus-3.png' +import img4 from '../assets/report-page-images/amogus-4.png' +import img5 from '../assets/report-page-images/amogus-5.png' +import L from 'leaflet'; +import Button from '@mui/material-next/Button'; +import { red, blue, green, yellow, purple, grey } from '@mui/material/colors'; -const Report: React.FC = () => { - returntodo
+export type item = typeof itemA; + +type UpdateItemFunction = (index: number, newId: number) => void; + +interface ImageProps { + item: item; + constItems: item[]; + foundItemIndex: number; + updateItem: UpdateItemFunction; +} + +const button_colors = [red[300], blue[300], green[500], yellow[700], purple[300]]; + +/** + * @param props props + * @param props.item image to be displayed + * @param props.constItems array of items that we are comparing against + * @param props.foundItemIndex index of the item in the foundItemArray + * @param props.updateItem function to update the item + * @returns image container + */ +function Image({item, constItems, foundItemIndex, updateItem}: ImageProps) { + const reassignHandler = () => { + const value = prompt('Enter new Bottle ID'); + let id = item.id; + if (value !== null) { + id = parseInt(value); + } + updateItem(foundItemIndex, id); + } + const match = constItems.find((itemX) => itemX.id === item.id); + const matchColor = constItems.find((itemX) => itemX.id === item.id)?.boxColor; + const matchIndex = constItems.findIndex((itemX) => itemX.id === item.id); + const backgroundColor = {backgroundColor: matchColor}; + return match ? ( +
+ 
+
+ )
+ :
+ [{item.lat}, {item.lng}]
+ {item.bottleLetter !== "null" ?Bottle Letter: {item.bottleLetter}
: null} +Alphanumeric: {item.alphanumericColor} {item.alphanumeric}
+Shape: {item.shapeColor} {item.shape}
+ {item.bottleLetter == "null" ? + + : null} +
+
+
;
+}
+
+class Item {
+ id: number;
+ lat: number;
+ lng: number;
+ image: string;
+ bottleLetter: string;
+ alphanumeric: string;
+ alphanumericColor: string;
+ shape: string;
+ shapeColor: string;
+ boxColor: string;
+
+ constructor(id: number, lat: number, lng: number, image: string, bottleLetter: string, alphanumeric: string, alphanumericColor: string, shape: string, shapeColor: string, boxColor: string) {
+ this.id = id;
+ this.lat = lat;
+ this.lng = lng;
+ this.image = image;
+ this.bottleLetter = bottleLetter;
+ this.alphanumeric = alphanumeric;
+ this.alphanumericColor = alphanumericColor;
+ this.shape = shape;
+ this.shapeColor = shapeColor;
+ this.boxColor = boxColor;
+ }
+}
+
+const itemA = new Item(1, 1.3467, 103.9326, img1, "A", "A", "red", "Circle", "blue", "lightsalmon");
+const itemB = new Item(2, 1.3467, 103.9326, img2, "B", "B", "blue", "Square", "red", "lightblue");
+const itemC = new Item(3, 1.3467, 103.9326, img3, "C", "C", "green", "Triangle", "yellow" , "lightgreen");
+const itemD = new Item(4, 1.3467, 103.9326, img4, "D", "D", "yellow", "Circle", "green", "khaki");
+const itemE = new Item(5, 1.3467, 103.9326, img5, "E", "E", "purple", "Square", "purple", "plum");
+
+
+/**
+ * @returns report page
+ */
+function Report() {
+ const [foundItemArray, setfoundItemArray] = React.useState([
+ new Item(1, 1.3915, 103.8894, img1, "null", "A", "red", "Circle", "blue", ""),
+ new Item(0, 1.3542, 103.8838, img2, "null", "A", "blue", "Square", "red", ""),
+ new Item(0, 1.3485, 103.6357, img3, "null", "B", "green", "Triangle", "yellow", ""),
+ new Item(0, 1.3467, 103.9326, img4, "null", "C", "yellow", "Circle", "green", ""),
+ new Item(5, 1.3581, 103.9326, img5, "null", "D", "purple", "Square", "purple", ""),
+
+ new Item(0, 1.3467, 103.9326, img1, "null", "B", "red", "Circle", "blue", ""),
+ new Item(2, 1.3467, 103.9326, img2, "null", "B", "blue", "Square", "red", ""),
+ new Item(0, 1.3467, 103.9326, img3, "null", "A", "green", "Triangle", "yellow", ""),
+ new Item(0, 1.3467, 103.9326, img4, "null", "C", "yellow", "Circle", "green", ""),
+ new Item(0, 1.3467, 103.9326, img5, "null", "E", "purple", "Square", "purple", ""),
+
+ new Item(0, 1.3467, 103.9326, img1, "null", "E", "red", "Circle", "blue", ""),
+ new Item(0, 1.3467, 103.9326, img2, "null", "D", "blue", "Square", "red", ""),
+ new Item(3, 1.3467, 103.9326, img3, "null", "C", "green", "Triangle", "yellow", ""),
+ new Item(0, 1.3467, 103.9326, img4, "null", "B", "yellow", "Circle", "green", ""),
+ new Item(0, 1.3467, 103.9326, img5, "null", "A", "purple", "Square", "purple", ""),
+
+ new Item(0, 1.3467, 103.9326, img1, "null", "E", "red", "Circle", "blue", ""),
+ new Item(0, 1.3467, 103.9326, img2, "null", "D", "blue", "Square", "red", ""),
+ new Item(0, 1.3467, 103.9326, img3, "null", "B", "green", "Triangle", "yellow", ""),
+ new Item(4, 1.3467, 103.9326, img4, "null", "D", "yellow", "Circle", "green", ""),
+ new Item(0, 1.3467, 103.9326, img5, "null", "A", "purple", "Square", "purple", "")
+ ]);
+
+ const [itemArray, setitemArray] = React.useState([itemA, itemB, itemC, itemD, itemE]);
+
+ const updateItem = (index: number, newId: number) => {
+ const newItems = foundItemArray.map((item, i) => {
+ if (i === index) {
+ return new Item(newId, item.lat, item.lng, item.image, item.bottleLetter, item.alphanumeric, item.alphanumericColor, item.shape, item.shapeColor, item.boxColor);
+ } else if (item.id === newId) {
+ return new Item(0, item.lat, item.lng, item.image, item.bottleLetter, item.alphanumeric, item.alphanumericColor, item.shape, item.shapeColor, item.boxColor);
+ } else
+ return item;
+ });
+ setfoundItemArray(newItems);
+ setitemArray([itemA, itemB, itemC, itemD, itemE]);
+ };
+
+ const matchedItems = foundItemArray.filter(itemTwo =>
+ itemArray.some(itemOne => itemOne.id === itemTwo.id)
+ );
+
+ const unmatchedItems = foundItemArray.filter(itemTwo =>
+ !itemArray.some(itemOne => itemOne.id === itemTwo.id)
+ );
+
+ const [matched, setMatched] = React.useState(true);
+ const [unmatched, setUnmatched] = React.useState(true);
+
+ const matchedStyle = matched ? {backgroundColor: "var(--highlight)"} : {backgroundColor: "#808080", boxShadow: "0 0 10px 0 rgba(0, 0, 0, 0.75) inset"};
+ const unmatchedStyle = unmatched ? {backgroundColor: "var(--highlight)"} : {backgroundColor: "#808080", boxShadow: "0 0 10px 0 rgba(0, 0, 0, 0.75) inset"};
+
+ const matchedArray = matched ? matchedItems : [];
+ const unmatchedArray = unmatched ? unmatchedItems : [];
+
+ const matchedIcons = matched ? matchedArray.map(item =>
+ L.icon({
+ iconUrl: item.image,
+ iconSize: [40, 40],
+ iconAnchor: [20, 20],
+ })
+ ) : [];
+
+ const unmatchedIcons = unmatched ? unmatchedArray.map(item =>
+ L.icon({
+ iconUrl: item.image,
+ iconSize: [40, 40],
+ iconAnchor: [20, 20],
+ })
+ ) : [];
+
+ const handleMatched = () => {
+ setMatched(prevMatched => !prevMatched);
+ }
+
+ const handleUnmatched = () => {
+ setUnmatched(prevUnmatched => !prevUnmatched);
+ }
+
+ return (
+ [{item.lat}, {item.lng}]
+ {item.bottleLetter !== "null" ?Bottle Letter: {item.bottleLetter}
: null} +Alphanumeric: {item.alphanumericColor} {item.alphanumeric}
+Shape: {item.shapeColor} {item.shape}
+ {item.bottleLetter == "null" ? + + : null} +
+
+
+
+ Unmatched Targets
+
+
+ Matched Targets
+
+
+
+
+
+
+ {foundItemArray.map((item, i) => )}
+
+
+ {itemArray.map((item, i) => )}
+
+