latest code

software/tracksight/frontend/src/app/testing/components/FaultFilters.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react'
+
+import { DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-menu'
+import { Button } from '@/components/ui/button'
+import {
+	DropdownMenu,
+	DropdownMenuCheckboxItem,
+	DropdownMenuContent,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+
+type Checked = DropdownMenuCheckboxItemProps['checked']
+
+export function DropdownMenuCheckboxes() {
+	const [showStatusBar, setShowStatusBar] = React.useState<Checked>(true)
+	const [showActivityBar, setShowActivityBar] = React.useState<Checked>(false)
+	const [showPanel, setShowPanel] = React.useState<Checked>(false)
+
+	return (
+		<DropdownMenu>
+			<DropdownMenuTrigger asChild>
+				<Button variant='outline'> {'<'}</Button>
+			</DropdownMenuTrigger>
+			<DropdownMenuContent className='w-56'>
+				<DropdownMenuLabel>Appearance</DropdownMenuLabel>
+				<DropdownMenuSeparator />
+				<DropdownMenuCheckboxItem
+					checked={showStatusBar}
+					onCheckedChange={setShowStatusBar}>
+					Status Bar
+				</DropdownMenuCheckboxItem>
+				<DropdownMenuCheckboxItem
+					checked={showActivityBar}
+					onCheckedChange={setShowActivityBar}
+					disabled>
+					Activity Bar
+				</DropdownMenuCheckboxItem>
+				<DropdownMenuCheckboxItem
+					checked={showPanel}
+					onCheckedChange={setShowPanel}>
+					Panel
+				</DropdownMenuCheckboxItem>
+			</DropdownMenuContent>
+		</DropdownMenu>
+	)
+}

software/tracksight/frontend/src/app/testing/components/Live.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+const Live: React.FC = () => {
+	return (
+		<div className='absolute flex flex-row z-10 top-0 bottom-0 right-12'>
+			<div className='flex flex-row items-center bg-green-500 m-2 px-2 py-1 h-fit rounded-lg'>
+				<div className='bg-red-500 w-3 h-3 rounded-full mr-1' />
+				<p className='font-semibold'>LIVE</p>
+			</div>
+			<div className='bg-green-500 w-1.5 h-full' />
+		</div>
+	)
+}
+
+export default Live
+
+// TODO: Make this Live bar movable in the future

software/tracksight/frontend/src/app/testing/components/LiveFault.tsx

@@ -0,0 +1,101 @@
+import React, { useState, useEffect } from 'react'
+import { DropdownMenuCheckboxes } from './FaultFilters'
+
+const LiveFault: React.FC = () => {
+	// ! TO Be Replaced
+	const [faults, setFaults] = useState<boolean[]>([false, false, false])
+	const [width, setWidth] = useState<number>(9) // Can't set 0, so buffering
+
+	useEffect(() => {
+		const updateScale = () => {
+			setWidth((prev) => prev + 103)
+		}
+
+		const interval = setInterval(updateScale, 1000)
+		return () => clearInterval(interval)
+	}, [])
+
+	const FaultBar: React.FC<{ fault: boolean; index: number }> = ({
+		fault,
+		index,
+	}) => {
+		return (
+			<div className='flex justify-center w-full h-4 my-2'>
+				{fault ? (
+					<p
+						className='bg-blue-500 px-6 py-2 h-6 rounded-full text-white text-center font-bold '
+						style={{ width: `${width}px` }}>
+						{fault.toString() + index}
+					</p>
+				) : (
+					<span
+						className='bg-black px-6 py-2 h-1 rounded-full'
+						style={{ width: `${width}px` }}></span>
+				)}
+			</div>
+		)
+	}
+
+	// ! DEBUGGING: REMOVE
+	const toggleFault = (key: number) => {
+		var newFaults = [...faults]
+		newFaults[key] = !newFaults[key]
+
+		setFaults(newFaults)
+	}
+
+	// ! DEBUGGING: REMOVE
+	const FaultButton: React.FC<{ fault: boolean; index: number }> = ({
+		fault,
+		index,
+	}) => {
+		return (
+			<button
+				className='bg-cyan-200 dark:bg-cyan-800 pr-2 rounded-md px-2 mx-1'
+				onClick={() => {
+					toggleFault(index)
+				}}>
+				{index + ': ' + faults[index]}
+			</button>
+		)
+	}
+
+	const FilterFaults: React.FC<{ fault: boolean; index: number }> = ({
+		fault,
+		index,
+	}) => {
+		return (
+			<button
+				className='bg-cyan-200 dark:bg-cyan-800 pr-2 rounded-md px-2 mx-1'
+				onClick={() => {
+					toggleFault(index)
+				}}>
+				{index + ': ' + faults[index]}
+			</button>
+		)
+	}
+
+	return (
+		<div className='bg-gray-200 dark:bg-gray-700 w-full'>
+			<div className='flex flex-row justify-end'>
+				<div className='flex flex-col pr-9'>
+					{/* Below is the actual faults graph */}
+					{faults.map((fault, index) => {
+						return <FaultBar fault={fault} index={index} key={index} />
+					})}
+				</div>
+				<div className='p-2'>TBD{/* <DropdownMenuCheckboxes /> */}</div>
+			</div>
+			{/* //! TODO: REMOVE AFTER TESTING */}
+			<div className='flex justify-start'>
+				<p className='pr-2'>Toggle Faults: </p>
+				{faults.map((button, index) => {
+					return <FaultButton fault={button} index={index} key={index} />
+				})}
+				<p className='pr-2'>Reset: </p>
+			</div>
+		</div>
+	)
+}
+
+export default LiveFault

software/tracksight/frontend/src/app/testing/components/MouseTest.tsx

@@ -0,0 +1,7 @@
+import React, { useState } from 'react'
+
+const MouseTest: React.FC = () => {
+	return <></>
+}
+
+export default MouseTest

software/tracksight/frontend/src/app/testing/components/Timer.tsx

@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from 'react'
+
+const TimeBar: React.FC = () => {
+	const [times, setTimes] = useState<string[]>([])
+
+	useEffect(() => {
+		const interval = setInterval(() => {
+			const now = new Date()
+			const currentTime = now.toLocaleTimeString().split(' ')[0]
+
+			setTimes((prevTimes) => {
+				const updatedTimes = [...prevTimes, currentTime]
+				if (updatedTimes.length > 15) {
+					updatedTimes.shift()
+				}
+
+				return updatedTimes
+			})
+		}, 1000)
+
+		return () => clearInterval(interval)
+	}, [])
+
+	return (
+		<div className='bg-gray-100 dark:bg-gray-800 py-2 pr-14 h-10'>
+			<div className='flex justify-end gap-10'>
+				{times.map((time, index) => (
+					<div key={index} className='text-center'>
+						{time}
+					</div>
+				))}
+			</div>
+		</div>
+	)
+}
+
+export default TimeBar

software/tracksight/frontend/src/app/testing/page.tsx

@@ -0,0 +1,22 @@
+'use client'
+
+import LiveFault from './components/LiveFault'
+import Timer from './components/Timer'
+import Live from './components/Live'
+
+// import MouseTest from './components/MouseTest'
+
+const TestingPage = () => {
+	return (
+		<div>
+			<Live />
+			{/* <MouseTest /> */}
+			<Timer />
+			<LiveFault />
+		</div>
+	)
+}
+
+export default TestingPage
+
+// TODO: Consider using ScrollArea https://ui.shadcn.com/docs/components/scroll-area