From ca919608df1be71b2f05072b19b036ee7b9e65d6 Mon Sep 17 00:00:00 2001
From: MatthewHsu1 <matthewhsu1128@gmail.com>
Date: Thu, 6 Jun 2024 18:30:25 -0700
Subject: [PATCH] Added front end for target matching mechanism.

---
 houston/src/App.tsx               |  4 +-
 houston/src/pages/Layout.css      |  2 +-
 houston/src/pages/Layout.tsx      |  3 +
 houston/src/pages/TargetMatch.css | 95 +++++++++++++++++++++++++++++++
 houston/src/pages/TargetMatch.tsx | 93 ++++++++++++++++++++++++++++++
 5 files changed, 195 insertions(+), 2 deletions(-)
 create mode 100644 houston/src/pages/TargetMatch.css
 create mode 100644 houston/src/pages/TargetMatch.tsx

diff --git a/houston/src/App.tsx b/houston/src/App.tsx
index db65b37..edc5156 100644
--- a/houston/src/App.tsx
+++ b/houston/src/App.tsx
@@ -12,13 +12,14 @@ import Layout from './pages/Layout';
 import Report from './pages/Report';
 import NoPage from './pages/NoPage';
 import Settings from './pages/Settings'
-
+import TargetMatch from "./pages/TargetMatch";
 
 import { ConnectionType, ConnectionStatus } from "./utilities/temp";
 import { SettingsConfig, loadSettings } from "./utilities/settings";
 import { LatLng } from "leaflet";
 import Drop from "./pages/Drop";
 
+
 /**
  * Main React function
  * @returns App
@@ -106,6 +107,7 @@ function App() {
                     <Route path="report" element={<Report />} />
                     <Route path="settings" element={<Settings settings={config} setSettings={setConfig}/>} />
                     <Route path="drop" element={<Drop/>}/>
+                    <Route path="targetmatch" element={<TargetMatch/>} />
 
                     <Route path="*" element={<NoPage />} />
                 </Route>
diff --git a/houston/src/pages/Layout.css b/houston/src/pages/Layout.css
index 654ec50..9d3e358 100644
--- a/houston/src/pages/Layout.css
+++ b/houston/src/pages/Layout.css
@@ -52,7 +52,7 @@ li:has(a.active) {
     transition: background-color var(--std-transition);
 }
 
-nav.topbar li:nth-child(6) {
+nav.topbar li:nth-child(7) {
     margin-right: auto;
 }
 
diff --git a/houston/src/pages/Layout.tsx b/houston/src/pages/Layout.tsx
index 1bd8bd8..33fb9a4 100644
--- a/houston/src/pages/Layout.tsx
+++ b/houston/src/pages/Layout.tsx
@@ -136,6 +136,9 @@ function Layout({statuses}:{statuses:ConnectionStatus[]}) {
                     <li>
                         <NavLink to="/drop" className={checkForActive}>Drop</NavLink>
                     </li>
+                    <li>
+                        <NavLink to="/targetmatch" className={checkForActive}>Target</NavLink>
+                    </li>
                     <Button onClick={handleBottleConnectionStatusModal}>
                         <img
                             src={bottleIcon}
diff --git a/houston/src/pages/TargetMatch.css b/houston/src/pages/TargetMatch.css
new file mode 100644
index 0000000..0531a42
--- /dev/null
+++ b/houston/src/pages/TargetMatch.css
@@ -0,0 +1,95 @@
+.flex-box {
+    display: flex;
+    flex:19;
+    justify-content: center;
+    justify-items: center;
+    align-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+}
+
+.left-box {
+    justify-content: center;
+    justify-items: center;
+    align-items: center;
+    align-content: center;
+    display: flex;
+    flex: 1;
+}
+
+.right-box {
+    justify-content: center;
+    justify-items: center;
+    align-items: center;
+    align-content: center;
+    display: flex;
+    flex: 2;
+}
+
+.form-container {
+    background-color: goldenrod;
+    border-radius: 20px;
+    padding: 20px;
+    text-align: center;     
+}
+
+.bottle {
+    display: flex;
+    align-items: center;
+    gap: 30px;
+}
+
+.input-field {
+    margin: 30px 0;
+    font-size: 30px;
+    padding: 10px;
+    width: 250px;
+    border: 1px solid rgb(253, 76, 0, 0.5);
+    border-top: none;
+    border-left: none;
+    border-right: none;
+    background: rgba(20, 20, 20, .2);
+    color: white;
+    outline: none;
+    caret-color: black;
+}
+
+.submit-button {
+    background-color: initial;
+    background-image: linear-gradient(-180deg, #FF7E31, #E62C03);
+    border-radius: 6px;
+    box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px;
+    color: #FFFFFF;
+    cursor: pointer;
+    display: inline-block;
+    font-family: Inter,-apple-system,system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
+    font-size: x-large;
+    height: 50px;
+    line-height: 40px;
+    outline: 0;
+    overflow: hidden;
+    padding: 0 20px;
+    pointer-events: auto;
+    position: relative;
+    text-align: center;
+    touch-action: manipulation;
+    user-select: none;
+    -webkit-user-select: none;
+    vertical-align: top;
+    white-space: nowrap;
+    width: 25%;
+    z-index: 9;
+    border: 0;
+    transition: box-shadow .2s;
+    margin-top: 5px;
+}
+
+.submit-button:hover {
+    box-shadow: rgba(253, 76, 0, 0.5) 0 3px 8px;
+}
+
+.image-gallery {
+    width: 90%;
+    height: auto;
+}
\ No newline at end of file
diff --git a/houston/src/pages/TargetMatch.tsx b/houston/src/pages/TargetMatch.tsx
new file mode 100644
index 0000000..a9ce8ae
--- /dev/null
+++ b/houston/src/pages/TargetMatch.tsx
@@ -0,0 +1,93 @@
+import "./TargetMatch.css"
+
+import ReactImageGallery from "react-image-gallery";
+import { useState } from "react";
+
+interface LatLng {
+    lat: string;
+    lng: string;
+}
+  
+interface BottleData {
+    [key: string]: LatLng;
+}
+
+/**
+ * @returns Returns manual target matching page.
+ */
+function TargetMatch() {
+    const bottle_list = ['A', 'B', 'C', 'D', 'E'];
+
+    const [lat_lng, set_lat_lng] = useState([
+        { lat: '', lng: '', setLat: (value:number) => handleUpdate(0, 'lat', value), setLng: (value:number) => handleUpdate(0, 'lng', value) },
+        { lat: '', lng: '', setLat: (value:number) => handleUpdate(1, 'lat', value), setLng: (value:number) => handleUpdate(1, 'lng', value) },
+        { lat: '', lng: '', setLat: (value:number) => handleUpdate(2, 'lat', value), setLng: (value:number) => handleUpdate(2, 'lng', value) },
+        { lat: '', lng: '', setLat: (value:number) => handleUpdate(3, 'lat', value), setLng: (value:number) => handleUpdate(3, 'lng', value) },
+        { lat: '', lng: '', setLat: (value:number) => handleUpdate(4, 'lat', value), setLng: (value:number) => handleUpdate(4, 'lng', value) }
+    ]);
+
+    const handleUpdate = (index:number, key:string, value:number) => {
+        set_lat_lng(pre_lat_lng => {
+        const new_lat_lng = [...pre_lat_lng];
+        new_lat_lng[index] = { ...new_lat_lng[index], [key]: value };
+        return new_lat_lng;
+        });
+    };
+
+    const images = [
+        {
+            original: "https://picsum.photos/id/1018/1000/600/",
+            thumbnail: "https://picsum.photos/id/1018/250/150/",
+        },
+        {
+            original: "https://picsum.photos/id/1015/1000/600/",
+            thumbnail: "https://picsum.photos/id/1015/250/150/",
+        },
+        {
+            original: "https://picsum.photos/id/1019/1000/600/",
+            thumbnail: "https://picsum.photos/id/1019/250/150/",
+        },
+    ];
+   
+    const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+        event.preventDefault(); 
+
+        const bottle_data: BottleData = {};
+
+        bottle_list.forEach((bottle:string, index: number) => {
+            bottle_data[`bottle${bottle}`] =  {'lat': lat_lng[index].lat, 'lng': lat_lng[index].lng}
+        });
+                
+        console.log('Form Data:', bottle_data);
+    };
+
+    return (
+        <div className="flex-box">
+            <div className="left-box">
+                <div className="form-container">
+                    <form onSubmit={handleSubmit} >
+                        {
+                            bottle_list.map((bottle, index) => {
+                                return (
+                                    <div className="bottle" key={index}>
+                                        <h1>Bottle {bottle}</h1>
+                                        <input className="input-field" type="number" placeholder="lat" value={lat_lng[index].lat} onChange={(e) => lat_lng[index].setLat(parseInt(e.target.value))} ></input>
+                                        <input className="input-field" type="number" placeholder="lng" value={lat_lng[index].lng} onChange={(e) => lat_lng[index].setLng(parseInt(e.target.value))} ></input>
+                                    </div>
+                                )
+                            })
+                        }
+                        <input className="submit-button" type="submit" value="Submit"></input>
+                    </form>
+                </div>
+            </div>
+            <div className="right-box">
+                <ReactImageGallery items={images} showPlayButton={false}>
+
+                </ReactImageGallery>
+            </div>
+        </div>
+        
+    )
+}
+export default TargetMatch;
\ No newline at end of file