Merge pull request #38 from hytech-racing/file_upload

File upload
hytech-racing · Oct 22, 2024 · c739949 · c739949
2 parents 93c3f09 + a028bc3
commit c739949
Show file tree

Hide file tree

Showing 10 changed files with 222 additions and 33 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/DataTable.tsx b/src/components/DataTable.tsx
@@ -39,7 +39,7 @@ export default function DataTable({ data }: DataTableProps) {
   );
 
   return (
-    <Table.ScrollContainer h="100%" minWidth={800}>
+    <Table.ScrollContainer h="100%" minWidth={800} style={{ overflowY: 'auto' }}>
       <Table
         stickyHeader
         highlightOnHover={data && data.length > 0}

diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx
@@ -0,0 +1,106 @@
+import React, { useState } from 'react';
+import { Modal, Button, Notification, FileInput } from '@mantine/core';
+import '@/css/FileUpload.css';
+
+interface FileUploadProps {
+  uploadUrl: string;
+}
+
+const FileUpload: React.FC<FileUploadProps> = ({ uploadUrl }) => {
+  const [showModal, setShowModal] = useState(false);
+  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleFileChange = (files: File[]) => {
+    if (files.length > 0) {
+      setSelectedFiles((prevFiles) => [...prevFiles, ...files]);
+    }
+  };
+
+  const handleUpload = async () => {
+    if (selectedFiles.length > 0) {
+      const formData = new FormData();
+      selectedFiles.forEach((file) => {
+        formData.append('files', file);
+      });
+
+      try {
+        const response = await fetch(uploadUrl, {
+          method: 'POST',
+          body: formData,
+        });
+
+        if (!response.ok) {
+          setError('Upload failed. Network response was not ok.');
+          return;  
+        }
+
+        const data = await response.json();
+        console.log('Upload successful:', data);
+
+        setSelectedFiles([]);
+        handleClose();
+      } catch (error) {
+        console.error('Upload failed:', error);
+        setError('An error occurred while uploading. Please try again.');
+      }
+    } else {
+      setError('Please select files to upload.');
+    }
+  };
+
+  const toggleModal = () => {
+    setShowModal(!showModal);
+  };
+
+  const handleClose = () => {
+    setShowModal(false);
+    setSelectedFiles([]);
+    setError(null);
+  };
+
+  return (
+    <div>
+      <Button onClick={toggleModal}>Upload Files</Button>
+
+      <Modal
+        opened={showModal}
+        onClose={handleClose}
+        title="Select files to upload"
+        centered
+        style={{ textAlign: "center" }} 
+      >
+        <div className="files">
+          <FileInput
+            multiple
+            accept=".mcap"
+            onChange={handleFileChange}
+            placeholder="Select files to upload"
+            label="Choose files"
+            style={{ display: 'block', margin: '0 auto' }}
+          />
+          {selectedFiles.length > 0 && (
+            <div>
+              <h3>Chosen Files:</h3>
+              <ul>
+                {selectedFiles.map((file, index) => (
+                  <li key={index}>{file.name}</li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </div>
+
+        <Button onClick={handleUpload} style={{ marginTop: 10 }}>Upload</Button>
+
+        {error && (
+          <Notification color="red" onClose={() => setError(null)} style={{ marginTop: 10 }}>
+            {error}
+          </Notification>
+        )}
+      </Modal>
+    </div>
+  );
+};
+
+export default FileUpload;
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -1,6 +1,7 @@
 import "@mantine/core/styles.css";
 import "@/css/Navbar.css";
 import { NavLink } from "react-router-dom";
+import FileUpload from "@/components/FileUpload"
 
 const mainLinksData = [
   { name: "Files", url: "/" },
@@ -25,6 +26,10 @@ export default function Navbar() {
         className="navbar-icon"
       />
       {links}
+
+      {/* Once POST API is out -- Currently WIP */}
+      <FileUpload uploadUrl="http://localhost:8080/api/v2/mcap/upload"/>
+
       {/* Optionally render active link or other content here */}
       <h3 className="hytechName">{hytechName}</h3>
     </nav>

diff --git a/src/components/PreviewCard.tsx b/src/components/PreviewCard.tsx
@@ -77,8 +77,10 @@ function PreviewCard() {
               gap: "10px",
             }}
           >
-            <DownloadButton buttonText="MAT" />
-            <DownloadButton buttonText="MCAP" />
+            <div className='previewFileButtons'>
+              <DownloadButton buttonText="MAT" />
+              <DownloadButton buttonText="MCAP" />
+            </div>
           </div>
         </Grid.Col>
       </Grid>
@@ -185,7 +187,7 @@ export const SchemaTable = () => {
         }}
       />
 
-      <ScrollArea style={{ height: 200, width: 250 }}> {/* Scrollable area with height limit */}
+      <ScrollArea style={{ height: 200, width: 250, padding: 10}}> {/* Scrollable area with height limit */}
         <Table striped highlightOnHover horizontalSpacing="sm" verticalSpacing="0.01rem" withRowBorders withTableBorder withColumnBorders>
           <Table.Thead>
             <Table.Tr>

diff --git a/src/css/FileUpload.css b/src/css/FileUpload.css
@@ -0,0 +1,30 @@
+button {
+    padding: 10px 10px;
+    margin: 3px 3px;
+    border: none;
+    border-radius: 5px;
+    background-color:  #b39e63;
+    color: white;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+button:hover {
+    background-color:  #d4bc79;
+}
+
+ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+h3 {
+    margin-top: 20px;
+}
+
+.files {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    justify-content: center;
+}
diff --git a/src/css/PreviewCard.css b/src/css/PreviewCard.css
@@ -23,3 +23,11 @@
     height: auto; /* Maintains aspect ratio */
     margin: 20px;
 }
+
+@media (max-width: 600px) {
+    .previewFileButtons {
+        display: flex;
+        flex-direction: column;
+
+    }
+  }
diff --git a/src/css/Root.css b/src/css/Root.css
@@ -8,31 +8,33 @@
     background-color: #f0f0f0;
     width: 100%;
     position: fixed;
-    /*so table doesn't cover it - make sure it stays on top of other elements*/
     z-index: 1000;
 }
 
-.search-bar {
-    background-color: #e0e0e0;
-    border-radius: 0;
-}
-
 .main-content {
     display: flex;
     flex: 1;
+    overflow: hidden;
     height: 500px;
     padding-top: 50px;
     flex-direction: column;
 }
 
 .results-container {
     display: flex;
+    flex: 1;
+    overflow: hidden;
     flex-direction: row;
 }
 
+.table-contain-result {
+    flex-grow: 1;
+    overflow-y: auto;
+    padding-bottom: 10px;
+  }
+
 .footer {
     text-align: center;
     background: #9b8b5de5;
     color: white;
 }
-
diff --git a/src/css/SearchBar.css b/src/css/SearchBar.css
@@ -1,27 +1,8 @@
-.results-container {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-   outline-color: #DEE2E6;
-    outline-width: 2px;
-    outline-style: solid;
-}
-
-
-.table-contain-result {
-  text-align: center;
-  flex: 1;
-}
-
-.preview-contain-result {
-  text-align: center;
-}
-
 .Search {
   display: flex;
   max-width: 360px;
   font-size: 15px;
-
+  overflow: auto;
 }
 
 

diff --git a/src/data/sampledata.ts b/src/data/sampledata.ts
@@ -13,6 +13,62 @@ export const data: MCAPFileInformation[] = [
     notes: "car ran!",
     event_type: "acceleration",
   },
+  {
+    id: "0723984238489-21312-4e75e6f76",
+    mcap_file_name: "file5.3.mcap",
+    matlab_file_name: "file5.3.mat",
+    aws_bucket: "bucket",
+    mcap_path: "/path/to/s3/object",
+    mat_path: "/path/to/s3/object",
+    vn_lat_lon_path: "/path/to/s3/object",
+    velocity_plot_path: "/path/to/s3/object",
+    date: "08-16-2024",
+    location: "rome",
+    notes: "car performed nice",
+    event_type: "autocross",
+  },
+  {
+    id: "091823792-2321312-a081",
+    mcap_file_name: "file7.1.mcap",
+    matlab_file_name: "file7.1.mat",
+    aws_bucket: "bucket",
+    mcap_path: "/path/to/s3/object",
+    mat_path: "/path/to/s3/object",
+    vn_lat_lon_path: "/path/to/s3/object",
+    velocity_plot_path: "/path/to/s3/object",
+    date: "08-29-2024",
+    location: "MRDC",
+    notes: "car did jk turn on",
+    event_type: null,
+  },
+  {
+    id: "07a0sdjwne-597f-4637-8b61-6134e75e6f76",
+    mcap_file_name: "file2.3.mcap",
+    matlab_file_name: "file2.3.mat",
+    aws_bucket: "bucket",
+    mcap_path: "/path/to/s3/object",
+    mat_path: "/path/to/s3/object",
+    vn_lat_lon_path: "/path/to/s3/object",
+    velocity_plot_path: "/path/to/s3/object",
+    date: "08-16-2024",
+    location: "rome",
+    notes: "car did not latch",
+    event_type: "autocross",
+  },
+  {
+    id: "605deb4b-44a8-4801-9da6-a671c1d3eccd",
+    mcap_file_name: "file1.3.mcap",
+    matlab_file_name: "file1.3.mat",
+    aws_bucket: "bucket",
+    mcap_path: "/path/to/s3/object",
+    mat_path: "/path/to/s3/object",
+    vn_lat_lon_path: "/path/to/s3/object",
+    velocity_plot_path: "/path/to/s3/object",
+    date: "08-22-2024",
+    location: "MRDC",
+    notes: "car failed",
+    event_type: "acceleration",
+  },
   {
     id: "fb48f265-a44a-4fd5-a873-26cd581950a0",
     mcap_file_name: "file2.mcap",
@@ -97,4 +153,4 @@ export const data: MCAPFileInformation[] = [
     notes: "car did not turn on",
     event_type: null,
   },
-];
+];