Skip to content

Commit

Permalink
Merge pull request #55 from hytech-racing/secret
Browse files Browse the repository at this point in the history
Secrets and Route connection
  • Loading branch information
aesteri authored Nov 3, 2024
2 parents 1d6dd4d + 1c3f7ac commit 42d40e0
Show file tree
Hide file tree
Showing 12 changed files with 351 additions and 214 deletions.
2 changes: 2 additions & 0 deletions .github/workflows/main.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
23 changes: 5 additions & 18 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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}": [
Expand Down
17 changes: 12 additions & 5 deletions src/components/DataTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default function DataTable({
setSelectedData,
}: DataTableProps) {
const theme = useMantineTheme();

const setPreviewData = (file: MCAPFileInformation) => {
if (selectedRow === file.id) {
setSelectedRow("");
Expand All @@ -28,6 +28,12 @@ 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 rows = !data ? (
<Table.Tr>
<Table.Td colSpan={100} ta="center">
Expand All @@ -45,17 +51,18 @@ export default function DataTable({
<Table.Tr
key={file.id}
onClick={() => setPreviewData(file)}
/*fw={selectedRow === file.id ? "bold" : ""}*/

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%" minWidth={800} style={{ overflowY: 'auto' }}>
<Table
Expand Down
44 changes: 27 additions & 17 deletions src/components/PreviewCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,7 @@ interface PreviewCardProps {

function PreviewCard({ selectedData }: PreviewCardProps) {
const formatDate = (dateString: string) => {
const [month, day, year] = dateString.split("-");
const date = new Date(`${year}-${month}-${day}`);
const date = new Date(dateString);
return date.toLocaleDateString("en-US", {
weekday: "short",
year: "numeric",
Expand All @@ -34,22 +33,29 @@ function PreviewCard({ selectedData }: PreviewCardProps) {
});
};

// 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 imageUrl = selectedData?.content_files?.vn_lat_lon_plot?.[0]?.signed_url ?? "https://camo.githubusercontent.com/25de56138803873d9ea83567c55b9a022ad86d0acb53bb7c733bb038583e2279/68747470733a2f2f6d69726f2e6d656469756d2e636f6d2f76322f726573697a653a6669743a3430302f312a7241676c6b664c4c316676384a6363697a4a33572d512e706e67"; // Fallback to a default image if none exists.

const formatTime = (dateString: string) => {
const [month, day, year] = dateString.split("-");
const date = new Date(`${year}-${month}-${day}T00:00:00`);
const date = new Date(dateString);
return date.toLocaleTimeString("en-US", {
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
hour12: true,
});
};

return (
<div className="preview-container">
<Grid>
<Grid.Col span={3} className="image-column">
<img
src="https://camo.githubusercontent.com/25de56138803873d9ea83567c55b9a022ad86d0acb53bb7c733bb038583e2279/68747470733a2f2f6d69726f2e6d656469756d2e636f6d2f76322f726573697a653a6669743a3430302f312a7241676c6b664c4c316676384a6363697a4a33572d512e706e67"
src={imageUrl}
alt="Preview"
className="preview-image"
/>
Expand All @@ -67,10 +73,10 @@ function PreviewCard({ selectedData }: PreviewCardProps) {
<Grid.Col span={3} style={{ position: "relative", padding: "10px" }}>
{selectedData ? (
<>
<PreviewDataDiv name={selectedData.mcap_file_name} val={""} />
<PreviewDataDiv name={getFileNameWithoutExtension(selectedData.mcap_files[0].file_name)} val={""} />
<PreviewDataDiv
name={"Date"}
val={formatDate(selectedData.date)}
name={"Car Model"}
val={selectedData.car_model ?? "NA"}
/>
<PreviewDataDiv
name={"Time"}
Expand Down Expand Up @@ -100,13 +106,14 @@ function PreviewCard({ selectedData }: PreviewCardProps) {
>
<DownloadButton
buttonText="MCAP"
fileName={selectedData.mcap_file_name}
signedUrl={selectedData.signed_url ?? null}
//One file for now -- can make it dynamically read several files at a time
fileName={selectedData.mcap_files[0].file_name}
signedUrl={selectedData.mcap_files[0].signed_url ?? null}
/>
<DownloadButton
buttonText="MAT"
fileName={selectedData.mcap_file_name}
signedUrl={"#"}
fileName={selectedData.mat_files[0].file_name}
signedUrl={selectedData.mat_files[0].signed_url}
/>
</div>
</>
Expand Down Expand Up @@ -175,6 +182,9 @@ export function DownloadButton({
</Menu.Target>
<Menu.Dropdown>
<Menu.Item
style={{
fontSize: '10px',
}}
leftSection={
<IconFile
style={{ width: rem(16), height: rem(16) }}
Expand Down Expand Up @@ -226,7 +236,7 @@ export const SchemaTable = () => {
handleSearch(e.target.value);
}}
/>
<ScrollArea style={{ height: 200, width: 250 }}>
<ScrollArea style={{ height: 180, width: 250 , padding: 10}}>
{" "}
{/* Scrollable area with height limit */}
<Table
Expand Down
36 changes: 7 additions & 29 deletions src/components/SchemaSearch.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,32 +9,22 @@ interface SchemaSearch {

const SchemaSearch: React.FC<SchemaSearch> = ({ schemas, clear }) => {
const [value, setValue] = useState<string>("");
//const [selectedSchema, setSelected] = useState<string[]>([]);
const [selectedSchemas, setSelectedSchemas] = useState<string[]>([]);

const filteredSchemas = schemas.filter((schema) =>
schema.toLowerCase().includes(value.toLowerCase()),
);
{
/*
const addSchema = (newSchema: string) => {
if (!selectedSchema.includes(newSchema)) {
setSelected([...selectedSchema, newSchema]);
} else {
alert("Schema already selected!");
}
};
*/
}


const clearSchema = () => {
//setSelected([]);
setValue("");
setSelectedSchemas([])
};

const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
if (event.key === "Enter" && filteredSchemas.length > 0) {
setValue(filteredSchemas[0]);
//addSchema(filteredSchemas[0]);
setValue("")
}
};

Expand All @@ -43,29 +33,17 @@ const SchemaSearch: React.FC<SchemaSearch> = ({ schemas, clear }) => {
}, [clear]);

return (
<div>
<div className="schemasearchbutton">
<MultiSelect
label="Schema"
placeholder="Schema name"
data={filteredSchemas}
onKeyDown={handleKeyDown}
value={selectedSchemas}
onChange={setSelectedSchemas}
searchable
size="xs"
/>
<br />
{/*
{selectedSchema.length > 0 && (
<div>
<label>Selected Schema</label>
<ul>
{selectedSchema.map((str, index) => (
<li key={index}>{str}</li>
))}
</ul>
</div>
)}
*/}
</div>
);
};
Expand Down
61 changes: 1 addition & 60 deletions src/components/SearchBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,67 +19,9 @@ function SearchBarWithFilter({
const [beforeDate, setBeforeDate] = useState("");
const [afterDate, setAfterDate] = useState("");
const [clearSchemas, setClearSchemas] = useState(false);
// const [filters] = useState({
// location: "",
// eventType: "",
// beforeDate: "",
// afterDate: "",
// });

// 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;
// };

const schemas = ["Schema1", "Schema2", "Schema3", "Schema4"];

// 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.toLowerCase() === filters.location.toLowerCase();
// const matchesEventType =
// filters.eventType.toLowerCase() === "" ||
// item.event_type?.toLowerCase() === filters.eventType.toLowerCase();
// 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
function handleFilterChange(
e: React.ChangeEvent<HTMLSelectElement | HTMLInputElement>,
Expand All @@ -97,8 +39,6 @@ function SearchBarWithFilter({
filt.filename = value;
}

// console.log("search", filt);

setSearchFilters((prevFilters) => ({
...prevFilters,
notes: filt.notes,
Expand Down Expand Up @@ -231,6 +171,7 @@ function SearchBarWithFilter({
style={{
display: "flex",
gap: "10px",
marginTop: "10px"
}}
>
{/* Clear Button */}
Expand Down
12 changes: 3 additions & 9 deletions src/css/SchemaSearch.css
Original file line number Diff line number Diff line change
@@ -1,10 +1,4 @@
.schema-autocomplete {
padding: 10px;
border-radius: 10px;
border: 1px solid #ddd;
background-color: #fff;
}
.cancel-button {
background-color: #978750;

.schemasearchbutton {
display: "flex";

}
Loading

0 comments on commit 42d40e0

Please sign in to comment.