history widget

src/components/Widget/HistoryWidget.tsx

@@ -0,0 +1,21 @@
+import { type HistoryWidget as HistoryWidgetType } from 'src/types/widget';
+
+type HistoryWidgetProps = {
+  widget: HistoryWidgetType;
+};
+
+const HistoryWidget = ({ widget }: HistoryWidgetProps) => {
+  const { id, x, y, w, h, elements } = widget;
+
+  return (
+    <div
+      key={id}
+      style={{ top: y, left: x, width: w, height: h }}
+      className={`absolute bg-[#2D2D30] text-white flex items-center justify-center`}
+    >
+      History Widget
+    </div>
+  );
+};
+
+export default HistoryWidget;

src/components/Widget/Widget.tsx

@@ -1,7 +1,8 @@
 import type { Widget as WidgetType } from 'src/types/widget';
 import ListWidget from 'src/components/Widget/ListWidget';
 import VehicleWidget from 'src/components/Widget/VehicleWidget';
-import MapWarningWidget from './MapWarningWidget';
+import MapWarningWidget from 'src/components/Widget/MapWarningWidget';
+import HistoryWidget from 'src/components/Widget/HistoryWidget';
 
 type WidgetProps = {
   widget: WidgetType;
@@ -16,6 +17,8 @@ const Widget = ({ widget }: WidgetProps) => {
         return <ListWidget widget={widget} />;
       case 'map-warning':
         return <MapWarningWidget widget={widget} />;
+      case 'history':
+        return <HistoryWidget widget={widget} />;
       default:
         return <div>Unknown Widget</div>;
     }

src/pages/LeftScreen.tsx

@@ -25,35 +25,6 @@ const LeftScreen = () => {
       {/* Top Bar */}
       <div className="absolute min-w-[1920px] border-2 border-b-stone-800 min-h-[100px]" />
 
-      {/* Left Video & Map Box */}
-      {/* <div
-        className="absolute top-[150px] left-[50px] flex items-center justify-center flex-col gap-10"
-        style={{
-          height: '900px',
-          width: '600px',
-        }}
-      >
-        <div className="border-2 border-stone-800 min-w-[450px] min-h-[200px] flex items-center justify-center">
-          <img
-            style={{ width: 500 }}
-            src={LeftScreenVideo}
-            alt="Left Bottom Map"
-          />
-        </div>
-        <div className="border-2 border-stone-800 min-w-[450px] min-h-[200px] flex items-center justify-center gap-10">
-          <img
-            style={{ width: 500 }}
-            src={LeftScreenMap}
-            alt="Left Bottom Map"
-          />
-        </div>
-      </div> */}
-
-      {/* Center box */}
-      <div className="min-w-[600px] min-h-[800px] absolute left-[750px] top-[150px] border-2 border-stone-800 flex items-center justify-center">
-        <span className="text-3xl">Additional Details</span>
-      </div>
-
       {/* Maybe just render a WidgetList component? Or a ListWidget component? */}
       {Object.keys(widgets).map((widgetId) => (
         <Widget key={widgetId} widget={widgets[widgetId]} />

src/prototype/utils/initialWidgets.ts

@@ -1,7 +1,7 @@
 import { v4 as uuid } from 'uuid';
 import LeftScreenMap from 'src/assets/left-bottom-map.png';
 import LeftScreenVideo from 'src/assets/left-video.png';
-import { type ListWidget } from 'src/types/widget';
+import type { HistoryWidget, ListWidget } from 'src/types/widget';
 import { type ImageElement } from 'src/types/element';
 
 const videoBoxUuid = uuid();
@@ -61,6 +61,23 @@ const initialLeftScreenWidgets = [
     ],
     maxAmount: 1,
   } satisfies ListWidget,
+
+  // center box widget
+  {
+    id: uuid(),
+    type: 'history',
+    screen: '/pearce-screen',
+    sectionType: 'history',
+    x: 625,
+    y: 150,
+    w: 840,
+    h: 800,
+    canOverlap: false,
+    useElementLocation: false,
+    priority: 10,
+    elements: [],
+    maxAmount: 1,
+  } satisfies HistoryWidget,
 ];
 
 const initialWidgets = [...initialLeftScreenWidgets];

src/types/widget.ts

@@ -46,6 +46,10 @@ export type MapWarningWidget = BaseWidget & {
   type: 'map-warning';
 };
 
+export type HistoryWidget = BaseWidget & {
+  type: 'history';
+};
+
 export type CustomWidget = BaseWidget & {
   type: 'custom';
   // additonal properties...
@@ -56,6 +60,7 @@ export type Widget =
   | VehicleWidget
   | ListWidget
   | GridWidget
+  | HistoryWidget
   | MapWarningWidget;
 
 export type WidgetMap = { [key: string]: Widget };