Merge pull request #68 from hytech-racing/scroll-ui

fixed table sizing with length of notes
hytech-racing · Jan 29, 2025 · 9e76094 · 9e76094
2 parents ec9834f + 2294103
commit 9e76094
Show file tree

Hide file tree

Showing 7 changed files with 199 additions and 38 deletions.
diff --git a/.env b/.env
@@ -1,2 +1 @@
-VITE_API_URL=""
-#api-url:port
+VITE_API_URL=api-url:port
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/DataTable.tsx b/src/components/DataTable.tsx
@@ -1,5 +1,6 @@
 import { Table } from "@mantine/core";
 import { useMantineTheme } from "@mantine/core";
+import { Input, Textarea } from "@mantine/core";
 
 interface DataTableProps {
   data?: MCAPFileInformation[];
@@ -17,7 +18,7 @@ export default function DataTable({
   setSelectedData,
 }: DataTableProps) {
   const theme = useMantineTheme();
-  
+
   const setPreviewData = (file: MCAPFileInformation) => {
     if (selectedRow === file.id) {
       setSelectedRow("");
@@ -30,8 +31,10 @@ export default function DataTable({
 
   // 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 lastDotIndex = fileNameWithExtension.lastIndexOf(".");
+    return lastDotIndex !== -1
+      ? fileNameWithExtension.slice(0, lastDotIndex)
+      : fileNameWithExtension;
   };
 
   const rows = !data ? (
@@ -51,29 +54,61 @@ export default function DataTable({
       <Table.Tr
         key={file.id}
         onClick={() => setPreviewData(file)}
-
         bg={selectedRow === file.id ? theme.primaryColor : ""}
       >
-        <Table.Td>{getFileNameWithoutExtension(file.mcap_files[0].file_name)}</Table.Td>
+        <Table.Td style={{ paddingLeft: "25px", size: "xs" }}>
+          {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>
+        <Table.Td style={{ size: "xs"}}>
+          <Input.Wrapper >
+            <Textarea
+              variant="unstyled"
+              value={file.location}
+              style={{ whiteSpace: "normal", wordWrap: "break-word"}}
+              readOnly
+              autosize
+              placeholder="No Location Available"
+              minRows={1}
+              maxRows={2}
+            />
+          </Input.Wrapper>
+        </Table.Td>
+
+        <Table.Td style={{ paddingRight: "25px" }}>
+          <Input.Wrapper>
+            <Textarea
+              variant="unstyled"
+              value={file.notes}
+              style={{ whiteSpace: "normal", wordWrap: "break-word"}}
+              readOnly
+              autosize
+              placeholder="No Note Available"
+              minRows={1}
+              maxRows={2}
+            />
+          </Input.Wrapper>
+        </Table.Td>
       </Table.Tr>
     ))
   );
   return (
-    <Table.ScrollContainer h="100%" minWidth={800} style={{ overflowY: 'auto' }}>
+    <Table.ScrollContainer
+      h="100%"
+      minWidth={800}
+      style={{ overflowY: "auto" }}
+    >
       <Table
         stickyHeader
         highlightOnHover={data && data.length > 0}
         highlightOnHoverColor={"#F8F9FA"}
       >
         <Table.Thead bg={"#D1BF80"}>
           <Table.Tr>
-            <Table.Th>Name</Table.Th>
+            <Table.Th style={{ paddingLeft: "25px" }}>Name</Table.Th>
             <Table.Th>Date</Table.Th>
             <Table.Th>Location</Table.Th>
-            <Table.Th>Notes</Table.Th>
+            <Table.Th style={{ paddingRight: "25px" }}>Notes</Table.Th>
           </Table.Tr>
         </Table.Thead>
         <Table.Tbody>{rows}</Table.Tbody>

diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx
@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
-import { Modal, Button, Notification, FileInput } from '@mantine/core';
-import '@/css/FileUpload.css';
+import React, { useState } from "react";
+import { Modal, Button, Notification, FileInput } from "@mantine/core";
+import "@/css/FileUpload.css";
 
 interface FileUploadProps {
   uploadUrl: string;
@@ -25,6 +25,24 @@ const FileUpload: React.FC<FileUploadProps> = ({ uploadUrl }) => {
     setError(null);
     setSuccess(null)
     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);
       try {
         const formData = new FormData();
         selectedFiles.forEach(file => {
@@ -57,11 +75,12 @@ const FileUpload: React.FC<FileUploadProps> = ({ uploadUrl }) => {
 
         setSelectedFiles([]);
       } catch (error) {
-        console.error('Upload failed:', error);
-        setError('An error occurred while uploading. Please try again.');
+        console.error("Upload failed:", error);
+        setError("An error occurred while uploading. Please try again.");
       }
-    } else {
-      setError('Please select files to upload.');
+    } catch (error) {
+      setError("Please select files to upload.");
+    }
     }
     setLoading(false);
   };
@@ -86,7 +105,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ uploadUrl }) => {
         onClose={handleClose}
         title="Select files to upload"
         centered
-        style={{ textAlign: "center" }} 
+        style={{ textAlign: "center" }}
       >
         <div className="files">
           <FileInput
@@ -95,7 +114,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ uploadUrl }) => {
             onChange={handleFileChange}
             placeholder="Select files to upload"
             label="Choose files"
-            style={{ display: 'block', margin: '0 auto' }}
+            style={{ display: "block", margin: "0 auto" }}
           />
           {selectedFiles.length > 0 && (
             <div>
@@ -117,7 +136,11 @@ const FileUpload: React.FC<FileUploadProps> = ({ uploadUrl }) => {
           </Notification>
         )}
         {error && (
-          <Notification color="red" onClose={() => setError(null)} style={{ marginTop: 10 }}>
+          <Notification
+            color="red"
+            onClose={() => setError(null)}
+            style={{ marginTop: 10 }}
+          >
             {error}
           </Notification>
         )}

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -1,7 +1,7 @@
 import "@mantine/core/styles.css";
 import "@/css/Navbar.css";
 import { NavLink } from "react-router-dom";
-import FileUpload from "@/components/FileUpload"
+import FileUpload from "@/components/FileUpload";
 
 const mainLinksData = [
   { name: "Files", url: "/" },
@@ -27,6 +27,7 @@ export default function Navbar() {
       />
       {links}
 
+      {/* Once POST API is out -- Currently WIP */}
       <FileUpload uploadUrl={`${import.meta.env.VITE_API_URL}/api/v2/mcaps/bulk_upload`}/>
 
       {/* Optionally render active link or other content here */}

diff --git a/src/components/PreviewCard.tsx b/src/components/PreviewCard.tsx
@@ -113,6 +113,71 @@ function PreviewCard({ selectedData }: PreviewCardProps) {
           <SchemaTable></SchemaTable>
         </Grid.Col>
         <Grid.Col span={3} style={{ position: "relative", padding: "10px" }}>
+          <div style={{ display: "flex", alignItems: "center" }}>
+            <Text size="md" fw={700}>
+              run 2024-18-10.mcap
+            </Text>
+          </div>
+          <div style={{ display: "flex", alignItems: "center" }}>
+            <Text size="xs" fw={700}>
+              Date:{" "}
+            </Text>
+            <span style={{ marginLeft: "5px" }} /> {/* Spacer */}
+            <Text size="xs" fw={400}>
+              Fri, Oct 18, 2024
+            </Text>
+          </div>
+          <div style={{ display: "flex", alignItems: "center" }}>
+            <Text size="xs" fw={700}>
+              Time:{" "}
+            </Text>
+            <span style={{ marginLeft: "5px" }} /> {/* Spacer */}
+            <Text size="xs" fw={400}>
+              12:24:02 PM
+            </Text>
+          </div>
+          <div style={{ display: "flex", alignItems: "center" }}>
+            <Text size="xs" fw={700}>
+              Location:{" "}
+            </Text>
+            <span style={{ marginLeft: "5px" }} /> {/* Spacer */}
+            <Text size="xs" fw={400}>
+              MRDC
+            </Text>
+          </div>
+          <div style={{ display: "flex", alignItems: "center" }}>
+            <Text size="xs" fw={700}>
+              Sensors:{" "}
+            </Text>
+            <span style={{ marginLeft: "5px" }} /> {/* Spacer */}
+            <Text size="xs" fw={400}>
+              aero_sensor_1
+            </Text>
+          </div>
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              position: "absolute",
+              bottom: 0,
+              left: 0,
+              padding: 20,
+              gap: "10px",
+            }}
+          >
+            <div className="previewFileButtons">
+              <DownloadButton
+                buttonText="MAT"
+                fileName={selectedData?.mcap_file_name ?? ""}
+                signedUrl={selectedData?.signed_url ?? null}
+              />
+              <DownloadButton
+                buttonText="MCAP"
+                fileName={selectedData?.mcap_file_name ?? ""}
+                signedUrl={selectedData?.signed_url ?? null}
+              />
+            </div>
+          </div>
           {selectedData ? (
             <>
               <PreviewDataDiv