Merge pull request #93 from tritonuas/feat/report-page-layout

Report Page Layout

houston/package.json

@@ -12,6 +12,10 @@
     "prepare": "cd .. && husky install houston/.husky"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/material": "^5.14.19",
+    "@mui/material-next": "^6.0.0-alpha.111",
     "@types/react-image-gallery": "^1.2.2",
     "@types/react-modal": "^3.16.2",
     "@uiball/loaders": "^1.3.0",

houston/src/components/TuasMap.tsx

@@ -1,16 +1,21 @@
-import {MapContainer, TileLayer } from "react-leaflet"
+import { MapContainer, Popup, TileLayer, Marker } from "react-leaflet"
 import 'leaflet/dist/leaflet.css'
-
+import { Icon } from 'leaflet';
+import { item } from "../pages/Report.tsx"
 /**
  * Wrapper component around all leaflet maps for the application. Any functionality we do with leaflet should be encased
  * within this class, so that we don't have repeated leaflet code throughout all the files.
  * @param props Props
  * @param props.className class to apply to the map
  * @param props.lat starting latitude of the map
  * @param props.lng starting longitude of the map
+ * @param props.matchedArray array of matched items
+ * @param props.unmatchedArray array of unmatched items
+ * @param props.matchedIcons array of matched icons
+ * @param props.unmatchedIcons array of unmatched icons
  * @returns TuasMap wrapper component
  */
-function TuasMap({className, lat, lng}:{className: string, lat: number, lng: number}) {
+function TuasMap({className, lat, lng, matchedArray=[], unmatchedArray=[], matchedIcons=[], unmatchedIcons=[]}:{className: string, lat: number, lng: number, matchedArray?: item[], unmatchedArray?: item[], matchedIcons?: Icon[], unmatchedIcons?: Icon[]}) {
     return (
         <>
             <MapContainer className={className} center={[lat, lng]} zoom={13} scrollWheelZoom={false}>
@@ -22,6 +27,16 @@ function TuasMap({className, lat, lng}:{className: string, lat: number, lng: num
                     zoomOffset={-1}
                     id= 'mapbox/satellite-v9'
                 />
+                {matchedArray.map((marker) => (
+                    <Marker key={marker.id} position={[marker.lat, marker.lng]} icon={matchedIcons[matchedArray.indexOf(marker)]}>
+                        <Popup>{marker.alphanumericColor} {marker.alphanumeric} {marker.shapeColor} {marker.shape}</Popup>
+                    </Marker>
+                ))}
+                {unmatchedArray.map((marker) => (
+                    <Marker key={marker.id} position={[marker.lat, marker.lng]} icon={unmatchedIcons[unmatchedArray.indexOf(marker)]}>
+                        <Popup>{marker.alphanumericColor} {marker.alphanumeric} {marker.shapeColor} {marker.shape}</Popup>
+                    </Marker>
+                ))}
             </MapContainer>
         </>
     );

houston/src/pages/AntennaTracker.tsx

@@ -31,7 +31,7 @@ function AntennaTracker() {
     return (
         <>
             <main className="atracker-page">
-                <TuasMap className="atracker-map" lat={51} lng={10} />
+                <TuasMap className="atracker-map" lat={51} lng={10}/>
                 <div className="atracker-terminal">
                     {
                         terminalText.map((str, i) => <p key={i}>{str}</p>)

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 {

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;
+    }
+}