Merge pull request #18 from hytech-racing/visuals-ui

Visuals UI

src/App.tsx

@@ -1,15 +1,12 @@
 import "@mantine/core/styles.css";
-import { Center, Code, MantineProvider, Blockquote } from "@mantine/core";
+import { MantineProvider } from "@mantine/core";
 import { theme } from "@/theme";
+import SearchBar from "./components/SearchBar";
 
 export default function App() {
   return (
     <MantineProvider theme={theme}>
-      <Center h="100vh">
-        <Blockquote>
-          Edit <Code>src/App.tsx</Code> to get started.
-        </Blockquote>
-      </Center>
+      <SearchBar />
     </MantineProvider>
   );
 }

src/components/DataCard.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import "@/css/DataCard.css";
+
+type Props = {
+  filteredData: MCAPFileInformation[];
+};
+
+function DataCard({ filteredData }: Props) {
+  return (
+    <>
+      {filteredData.map((item) => (
+        <div className="card-container" key={item.id}>
+          <div className="card">
+            <div className="card-header">
+              <h3>{item.mcap_file_name}</h3>
+              <p className="file-id">ID: {item.id}</p>{" "}
+              {/* Now placed directly under the file name */}
+            </div>
+            <div className="card-content">
+              <p>
+                <strong>Matlab File Name:</strong> {item.matlab_file_name}
+              </p>
+              <p>
+                <strong>Location:</strong> {item.location}
+              </p>
+              <p>
+                <strong>Date:</strong> {item.date}
+              </p>
+              <p>
+                <strong>Event Type:</strong> {item.event_type || "N/A"}
+              </p>
+              <p>
+                <strong>Notes:</strong> {item.notes || "No notes available"}
+              </p>
+            </div>
+            <div className="card-footer">
+              <p>
+                {/* <a href={item.mcap_path}>View MCAP File</a>  LINK TO VIEW MAYBE? */}
+                <p>
+                  <strong>MCAP path:</strong> {item.mcap_path}
+                </p>
+              </p>
+              <p>
+                <p>
+                  <strong>Mat path:</strong> {item.mcap_path}
+                </p>
+              </p>
+            </div>
+          </div>
+        </div>
+      ))}
+    </>
+  );
+}
+
+export default DataCard;

src/components/SearchBar.tsx

@@ -0,0 +1,170 @@
+import React, { useState, useEffect } from "react";
+import { data } from "@/data/sampledata";
+import { eventType, location } from "@/data/dataFilters";
+import "@/css/SearchBar.css";
+// import DataCard from "./DataCard";
+import DataTable from "./DataTable";
+
+function SearchBarWithFilter() {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [filteredData, setFilteredData] = useState<MCAPFileInformation[]>(data);
+  const [filters, setFilters] = useState({
+    location: "",
+    eventType: "",
+    beforeDate: "",
+    afterDate: "",
+  });
+
+  useEffect(() => {
+    // add code to get data from server here
+    // setFilteredData(serverData)
+  }, []);
+
+  // Check if a date is in the valid range
+  const isDateInRange = (
+    dateStr: string,
+    beforeDate: string,
+    afterDate: string,
+  ) => {
+    const itemDate = new Date(dateStr);
+    const before = beforeDate ? new Date(beforeDate) : null;
+    const after = afterDate ? new Date(afterDate) : null;
+
+    if (before && itemDate > before) return false;
+    if (after && itemDate < after) return false;
+
+    return true;
+  };
+
+  // Filter logic
+  const handleSearch = () => {
+    const filtered = data.filter((item) => {
+      // Match search term in multiple fields
+      const matchesSearch =
+        item.mcap_file_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        item.matlab_file_name
+          .toLowerCase()
+          .includes(searchTerm.toLowerCase()) ||
+        item.notes?.toLowerCase().includes(searchTerm.toLowerCase());
+
+      // Match filters
+      const matchesLocation =
+        filters.location === "" || item.location === filters.location;
+      const matchesEventType =
+        filters.eventType === "" || item.event_type === filters.eventType;
+      const matchesDate = isDateInRange(
+        item.date,
+        filters.beforeDate,
+        filters.afterDate,
+      );
+
+      return (
+        matchesSearch && matchesLocation && matchesEventType && matchesDate
+      );
+    });
+    setFilteredData(filtered);
+  };
+
+  // Trigger search on filter or search term change
+  useEffect(() => {
+    handleSearch();
+  }, [searchTerm, filters]);
+
+  // Handle filter changes
+  const handleFilterChange = (e) => {
+    const { name, value } = e.target;
+    setFilters((prevFilters) => ({
+      ...prevFilters,
+      [name]: value,
+    }));
+  };
+
+  return (
+    <div>
+      <div className="search-filter-container">
+        <h1>Search and Filter Data</h1>
+
+        {/* Search Bar */}
+        <input
+          type="text"
+          className="search-bar"
+          placeholder="Search by file name or notes..."
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+        />
+
+        {/* Filter Options */}
+        <div className="filter-options">
+          <label>
+            Location:
+            <select
+              name="location"
+              onChange={handleFilterChange}
+              className="filter-select"
+            >
+              <option value="">All Locations</option>
+              {location.map((locationName, idx) => (
+                <option value={locationName.toLowerCase()} key={idx}>
+                  {locationName}
+                </option>
+              ))}
+            </select>
+          </label>
+
+          <label>
+            Event Type:
+            <select
+              name="eventType"
+              onChange={handleFilterChange}
+              className="filter-select"
+            >
+              <option value="">All Event Types</option>
+              {eventType.map((eventName, idx) => (
+                <option value={eventName.toLowerCase()} key={idx}>
+                  {eventName}
+                </option>
+              ))}
+            </select>
+          </label>
+
+          <label>
+            Before Date:
+            <input
+              type="date"
+              name="beforeDate"
+              onChange={handleFilterChange}
+              className="date-picker"
+              placeholder="Filter by date"
+            />
+          </label>
+
+          <label>
+            After Date:
+            <input
+              type="date"
+              name="afterDate"
+              onChange={handleFilterChange}
+              className="date-picker"
+              placeholder="Filter by date"
+            />
+          </label>
+        </div>
+      </div>
+
+      {/* Display Filtered Data */}
+      <div className="results-container">
+        <div>
+          <h2>Filtered Results:</h2>
+          {filteredData.length === 0 ? (
+            <p>No results found</p>
+          ) : (
+            // <DataCard filteredData={filteredData} />
+            <DataTable data={filteredData} />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default SearchBarWithFilter;

src/css/DataCard.css

@@ -0,0 +1,66 @@
+.card-container {
+  display: flex;
+  justify-content: center;
+  margin: 20px;
+}
+
+.card {
+  background-color: #ffffff;
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  width: 100%;
+  max-width: 800px;
+  padding: 20px;
+}
+
+.card:hover {
+  transform: scale(1.02);
+}
+
+.card-header {
+  border-bottom: 1px solid #f0f0f0;
+  padding-bottom: 10px;
+  margin-bottom: 15px;
+}
+
+.card-header h3 {
+  margin: 0;
+  font-size: 1.5em;
+  color: #333;
+}
+
+.card-header .file-id {
+  font-size: 0.9em;
+  color: #888;
+  margin-top: 5px;
+}
+
+.card-content p {
+  margin: 5px 0;
+  font-size: 1em;
+  color: #555;
+}
+
+.card-content p strong {
+  color: #333;
+}
+
+.card-footer {
+  border-top: 1px solid #f0f0f0;
+  padding-top: 10px;
+  margin-top: 15px;
+}
+
+.card-footer p {
+  font-size: 0.9em;
+  color: #666;
+}
+
+.card-footer a {
+  color: #1e90ff;
+  text-decoration: none;
+}
+
+.card-footer a:hover {
+  text-decoration: underline;
+}