Add a form to allow panorama uploads to Pano

app/panorama/page.tsx

@@ -0,0 +1,13 @@
+// Idea: Have people validate their panoramas with their email?
+
+import PanoramaUploadForm from "@/components/PanoramaUpload/PanoramaUpload";
+
+export default async function PanoramaUpload() {
+  return (
+    <>
+      <main>
+        <PanoramaUploadForm />
+      </main>
+    </>
+  );
+}

components/Landing/Landing.tsx

@@ -9,6 +9,7 @@ const Landing = () => {
     { text: "Join Form", link: "/join" },
     { text: "NN Assign Form", link: "/nn-assign" },
     { text: "Query Form", link: "/query" },
+    { text: "Img Upload", link: "/panorama" },
     {
       text: "MeshDB Admin",
       link: process.env.NEXT_PUBLIC_MESHDB_URL + "/admin/",

components/PanoramaDuplicateDialog/PanoramaDuplicateDialog.module.scss

@@ -0,0 +1,17 @@
+.alertTable table {
+  font-family: arial, sans-serif;
+  border-collapse: collapse;
+  width: 100%;
+  margin: 10px 0 0 0;
+}
+
+.alertTable th {
+  background: #eeeee;
+}
+
+.alertTable td,
+th {
+  border: 1px solid #dddddd;
+  text-align: left;
+  padding: 8px;
+}

components/PanoramaDuplicateDialog/PanoramaDuplicateDialog.tsx

@@ -0,0 +1,114 @@
+import * as React from "react";
+import Button from "@mui/material/Button";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogTitle from "@mui/material/DialogTitle";
+import styles from "./PanoramaDuplicateDialog.module.scss";
+import { FormValues } from "../PanoramaUpload/PanoramaUpload";
+
+interface PanoramaDuplicateDialogProps {
+  formSubmission: FormValues;
+  possibleDuplicates: Array<[string, string]>;
+  isDialogOpened: boolean;
+  handleClickUpload: () => void;
+  handleClickCancel: () => void;
+}
+
+// https://mui.com/material-ui/react-dialog/#alerts
+export default function PanoramaDuplicateDialog({
+  formSubmission,
+  possibleDuplicates,
+  isDialogOpened,
+  handleClickUpload,
+  handleClickCancel,
+}: PanoramaDuplicateDialogProps) {
+  return (
+    <React.Fragment>
+      <Dialog
+        open={isDialogOpened}
+        onClose={handleClickCancel}
+        aria-labelledby="alert-dialog-title"
+        aria-describedby="alert-dialog-description"
+      >
+        <DialogTitle color="error" id="alert-dialog-title">
+          {"Possible duplicates detected"}
+        </DialogTitle>
+        <DialogContent>
+          <DialogContentText id="alert-dialog-description">
+            The following images submitted seem to be duplicates of existing
+            images for Install #{formSubmission.installNumber}. Would you like to upload these
+            anyway?
+            <br />
+            <div className={styles.alertTable}>
+              <table>
+                <tr>
+                  <th>Uploaded</th>
+                  <th>Existing Image</th>
+                </tr>
+                {possibleDuplicates.map(([k, v], _) => (
+                  <tr>
+                    <td>
+                      <div
+                        style={{
+                          display: "flex",
+                          flexDirection: "column",
+                          alignItems: "center",
+                        }}
+                      >
+                        <img
+                          src={URL.createObjectURL(formSubmission.dropzoneImages.find((file: File) => file.name === k))}
+                          style={{
+                            display: "block",
+                            marginLeft: "auto",
+                            marginRight: "auto",
+                            height: "100px",
+                          }}
+                        />
+                        {formSubmission.dropzoneImages.find((file: File) => file.name === k).name}
+                      </div>
+                    </td>
+                    <td>
+                      <div
+                        style={{
+                          display: "flex",
+                          flexDirection: "column",
+                          alignItems: "center",
+                        }}
+                      >
+                        <img
+                          src={v}
+                          style={{
+                            display: "block",
+                            marginLeft: "auto",
+                            marginRight: "auto",
+                            height: "100px",
+                          }}
+                        />
+                        <a href={new URL(v).origin + new URL(v).pathname}>
+                          {new URL(v).origin + new URL(v).pathname}
+                        </a>
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </table>
+            </div>
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClickCancel}>Cancel</Button>
+          <Button
+            color="error"
+            variant="contained"
+            onClick={handleClickUpload}
+            autoFocus
+          >
+            Upload
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </React.Fragment>
+  );
+}

components/PanoramaUpload/PanoramaDropzone.module.scss

@@ -0,0 +1,99 @@
+.container {
+  display: flex;
+  flex-direction: row;
+  font-family: sans-serif;
+  justify-content: center;
+
+  margin: 10px;
+  padding: 10px;
+}
+
+.subContainer {
+  width: 75%;
+}
+
+.container > p {
+  font-size: 1rem;
+}
+
+.container > em {
+  font-size: 0.8rem;
+}
+
+.dropzone {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-grow: 1;
+  padding: 20px;
+  border-width: 2px;
+  border-radius: 5px;
+  border-color: #bbbbbb;
+  border-style: dashed;
+  background-color: #eaeaea;
+  color: #adadad;
+  outline: none;
+  transition: border 0.24s ease-in-out;
+}
+
+.dropzone:hover {
+  border-color: #8bc8ff;
+}
+
+.dropzone:focus {
+  border-color: #2196f3;
+}
+
+.dropzone.disabled {
+  opacity: 0.6;
+}
+
+.thumbsContainer {
+  display: "flex";
+  flexdirection: "row";
+  flexwrap: "wrap";
+  margintop: 16;
+  backgroundcolor: red;
+}
+
+.thumb {
+  display: "inline-flex";
+  borderradius: 2;
+  border: "1px solid #eaeaea";
+  marginbottom: 8;
+  marginright: 8;
+  width: 100;
+  height: 100;
+  padding: 4;
+  boxsizing: "border-box";
+}
+
+.thumbInner {
+  display: "flex";
+  minwidth: 0;
+  overflow: "hidden";
+}
+
+.img {
+  display: "block";
+  width: "auto";
+  height: "100%";
+}
+
+.itemList {
+  display: flex;
+  flex-direction: column;
+  padding: 5px;
+}
+
+/*Janky*/
+.itemList h4 {
+  margin: 0px;
+  padding: 0 0 0 24px;
+}
+
+.itemList ul {
+  margin: 0px;
+  white-space: nowrap;
+}

components/PanoramaUpload/PanoramaDropzone.tsx

@@ -0,0 +1,101 @@
+"use client";
+import React, { useCallback, useEffect, useState } from "react";
+import { useDropzone } from "react-dropzone";
+import styles from "./PanoramaDropzone.module.scss";
+
+const thumbsContainer = {
+  display: "flex",
+  flexDirection: "row",
+  flexWrap: "wrap",
+  marginTop: 16,
+};
+
+const thumb = {
+  display: "inline-flex",
+  borderRadius: 2,
+  border: "1px solid #eaeaea",
+  marginBottom: 8,
+  marginRight: 8,
+  width: 100,
+  height: 100,
+  padding: 4,
+  boxSizing: "border-box",
+};
+
+const thumbInner = {
+  display: "flex",
+  minWidth: 0,
+  overflow: "hidden",
+};
+
+const img = {
+  display: "block",
+  width: "auto",
+  height: "100%",
+};
+
+interface PanoramaDropzoneProps {
+  onFileDrop: (dropzoneImages: File[]) => void;
+}
+
+const PanoramaDropzone: React.FC<PanoramaDropzoneProps> = ({ onFileDrop }) => {
+  const [files, setFiles] = useState<File[]>([]);
+
+  const onDrop = useCallback((acceptedFiles: File[]) => {
+    setFiles(acceptedFiles); // Store files locally
+    onFileDrop(acceptedFiles); // Pass files to main form via callback
+  }, [onFileDrop]);
+
+  const { getRootProps, getInputProps } = useDropzone({ onDrop });
+
+  const filenames = files.map((file) => (
+    <li key={file.path}>
+      {file.path} - {file.size} bytes
+    </li>
+  ));
+
+  const thumbs = files.map((file) => (
+    <div style={thumb} key={file.name}>
+      <div style={thumbInner}>
+        <img
+          src={URL.createObjectURL(file)}
+          style={img}
+          // Revoke data uri after image is loaded
+          onLoad={() => {
+            URL.revokeObjectURL(file.preview);
+          }}
+          name={file.path}
+        />
+      </div>
+    </div>
+  ));
+
+  useEffect(() => {
+    // Make sure to revoke the data uris to avoid memory leaks, will run on unmount
+    return () =>
+      files.forEach((file) => URL.revokeObjectURL(file.preview));
+  }, [files]);
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.subContainer}>
+        <div {...getRootProps({ className: styles.dropzone })}>
+          <input {...getInputProps()} />
+          <p>
+            Drag and drop panoramas here;
+            <br />
+            Or click to open the file dialog
+          </p>
+        </div>
+        <div className={styles.thumbsContainer}>{thumbs}</div>
+      </div>
+      {/*XXX (wdn): It would be very cool if I could integrate the file names into the photos.*/}
+      <div className={styles.itemList}>
+        <h4>Files</h4>
+        <ul>{filenames}</ul>
+      </div>
+    </div>
+  );
+}
+
+export default PanoramaDropzone;

components/PanoramaUpload/PanoramaUpload.module.scss

@@ -0,0 +1,29 @@
+.formBody {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  justify-content: center;
+}
+
+.formBody input[type="number"] {
+  border: 1px solid #ccc;
+  padding: 10px;
+  font-size: 16px;
+  box-sizing: border-box;
+  margin-bottom: 10px;
+  border-radius: 4px;
+  outline-offset: 4px;
+}
+
+.formBody button {
+  margin-top: 2px; /* Graphic Design Is My Passion */
+}
+
+.formBody button:hover {
+  opacity: 0.8;
+}
+
+.formBody button[aria-disabled="true"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}