Merge branch 'main' into scroll-ui

.env

@@ -0,0 +1 @@
+VITE_API_URL=https://api-url:port

.github/workflows/build-on-pr.yml

@@ -0,0 +1,25 @@
+name: Build on Pull Request
+
+on:
+  pull_request:
+    branches: ['main']
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    - name: Set up Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version: '20' # Use the Node.js version you're working with
+        cache: 'npm' # Use the Node.js version you're working with
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Build
+      run: npm run build

.github/workflows/main.yml

@@ -39,6 +39,8 @@ jobs:
       - name: Install dependencies
         run: npm ci
       - name: Build
+        env:
+          VITE_API_URL: ${{ secrets.VITE_API_URL }}
         run: npm run build
       - name: Setup Pages
         uses: actions/configure-pages@v4

.gitignore

@@ -23,4 +23,4 @@ dist-ssr
 *.ntvs*
 *.njsproj
 *.sln
-*.sw?
+*.sw?

package.json

@@ -54,7 +54,7 @@
     "storybook": "^8.3.4",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.0.1",
-    "vite": "^5.4.8"
+    "vite": "^5.4.10"
   },
   "lint-staged": {
     "*.{ts,tsx,js,jsx}": [

src/components/DataTable.tsx

@@ -1,14 +1,38 @@
-import { useState } from "react";
 import { Table } from "@mantine/core";
 import { useMantineTheme } from "@mantine/core";
 
 interface DataTableProps {
   data?: MCAPFileInformation[];
+  selectedRow?: string;
+  setSelectedRow: React.Dispatch<React.SetStateAction<string>>;
+  setSelectedData: React.Dispatch<
+    React.SetStateAction<MCAPFileInformation | undefined>
+  >;
 }
 
-export default function DataTable({ data }: DataTableProps) {
+export default function DataTable({
+  data,
+  selectedRow,
+  setSelectedRow,
+  setSelectedData,
+}: DataTableProps) {
   const theme = useMantineTheme();
-  const [selectedRow, setSelectedRow] = useState<string>();
+
+  const setPreviewData = (file: MCAPFileInformation) => {
+    if (selectedRow === file.id) {
+      setSelectedRow("");
+      setSelectedData(undefined);
+    } else {
+      setSelectedRow(file.id);
+      setSelectedData(file);
+    }
+  };
+
+  // Take out when API server team implements filename id in their get route
+  const getFileNameWithoutExtension = (fileNameWithExtension: string) => {
+    const lastDotIndex = fileNameWithExtension.lastIndexOf('.');
+    return lastDotIndex !== -1 ? fileNameWithExtension.slice(0, lastDotIndex) : fileNameWithExtension;
+  };
 
   const rows = !data ? (
     <Table.Tr>
@@ -26,18 +50,19 @@ export default function DataTable({ data }: DataTableProps) {
     data.map((file) => (
       <Table.Tr
         key={file.id}
-        onClick={() => setSelectedRow(file.id)}
-        /*fw={selectedRow === file.id ? "bold" : ""}*/
+        onClick={() => setPreviewData(file)}
+
         bg={selectedRow === file.id ? theme.primaryColor : ""}
       >
-        <Table.Td>{file.mcap_file_name}</Table.Td>
+        <Table.Td>{getFileNameWithoutExtension(file.mcap_files[0].file_name)}</Table.Td>
         <Table.Td>{file.date}</Table.Td>
         <Table.Td>{file.location}</Table.Td>
-        <Table.Td>{file.notes}</Table.Td>
+
+        {/* Change back to notes once notes field is implemented in the server */}
+        <Table.Td>{file.car_model}</Table.Td>
       </Table.Tr>
     ))
   );
-
   return (
     <Table.ScrollContainer
       h="100%"

src/components/FileUpload.tsx

@@ -10,6 +10,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ uploadUrl }) => {
   const [showModal, setShowModal] = useState(false);
   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
   const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
 
   const handleFileChange = (files: File[]) => {
     if (files.length > 0) {
@@ -18,6 +19,8 @@ const FileUpload: React.FC<FileUploadProps> = ({ uploadUrl }) => {
   };
 
   const handleUpload = async () => {
+    setError(null);
+    setSuccess(null)
     if (selectedFiles.length > 0) {
       const formData = new FormData();
       selectedFiles.forEach((file) => {
@@ -37,9 +40,37 @@ const FileUpload: React.FC<FileUploadProps> = ({ uploadUrl }) => {
 
         const data = await response.json();
         console.log("Upload successful:", data);
+      try {
+        const formData = new FormData();
+        selectedFiles.forEach(file => {
+          formData.append('files', file);
+        });
+
+        try {
+            const response = await fetch(uploadUrl, {
+              method: 'POST',
+              body: formData,
+            });
 
+            if (!response.ok) {
+              if (response.status === 503) {
+                const errorMsg = await response.text();
+                setError(`Failed to upload: ${errorMsg} \nTry again in a few minutes!`);
+              } else {
+                const errorMsg = await response.text();
+                setError(`Failed to upload: ${errorMsg}`);
+              }
+            } else {
+              const result = await response.json();
+              setSuccess('File uploaded successfully!');
+              console.log('Upload successful:', result);
+            }
+        } catch (error) {
+          console.error('Error uploading files:', error);
+          setError('An error occurred during file upload.');
+        }
+
         setSelectedFiles([]);
-        handleClose();
       } catch (error) {
         console.error("Upload failed:", error);
         setError("An error occurred while uploading. Please try again.");
@@ -57,6 +88,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ uploadUrl }) => {
     setShowModal(false);
     setSelectedFiles([]);
     setError(null);
+    setSuccess(null)
   };
 
   return (
@@ -95,6 +127,12 @@ const FileUpload: React.FC<FileUploadProps> = ({ uploadUrl }) => {
           Upload
         </Button>
 
+        <Button onClick={handleUpload} style={{ marginTop: 10 }}>Upload</Button>
+        {success && (
+          <Notification color="green" onClose={() => setSuccess(null)} style={{ marginTop: 10 }}>
+            {success}
+          </Notification>
+        )}
         {error && (
           <Notification
             color="red"

src/components/Navbar.tsx

@@ -28,7 +28,8 @@ export default function Navbar() {
       {links}
 
       {/* Once POST API is out -- Currently WIP */}
-      <FileUpload uploadUrl="http://localhost:8080/api/v2/mcap/upload" />
+<!--       <FileUpload uploadUrl="http://localhost:8080/api/v2/mcap/upload" /> -->
+      <FileUpload uploadUrl={`${import.meta.env.VITE_API_URL}/api/v2/mcaps/bulk_upload`}/>
 
       {/* Optionally render active link or other content here */}
       <h3 className="hytechName">{hytechName}</h3>