Add visuals palette to dashboard

dashboard/src/components/AppArea.ts

@@ -1,10 +1,11 @@
 import { Fabricate, FabricateComponent } from 'fabricate.js';
-import { AppState } from '../types';
-import StatRow from './StatRow';
-import AppLoader from './AppLoader';
-import AppCard from './AppCard';
-import DeviceMetrics from './DeviceMetrics';
-import { fetchMetricNames } from '../services/conduitService';
+import { AppState } from '../types.ts';
+import StatRow from './StatRow.ts';
+import AppLoader from './AppLoader.ts';
+import AppCard from './AppCard.ts';
+import DeviceMetrics from './DeviceMetrics.ts';
+import { fetchMetricNames } from '../services/conduitService.ts';
+import VisualsPalette from './VisualsPalette.ts';
 
 declare const fabricate: Fabricate<AppState>;
 
@@ -98,6 +99,7 @@ const AppArea = () => {
         fabricate.conditional((s) => !areAppsLoaded(s), AppLoader),
         fabricate.conditional(areAppsLoaded, RefreshProgressBar),
         fabricate.conditional(areAppsLoaded, DeviceMetrics),
+        fabricate.conditional(areAppsLoaded, VisualsPalette),
         fabricate.conditional(areAppsLoaded, AppCardList),
       ]);
     }, [fabricate.StateKeys.Created, 'selectedDevice']);

dashboard/src/components/AppCard.ts

@@ -1,5 +1,5 @@
 import { Fabricate } from 'fabricate.js';
-import { AppState, DeviceApp } from '../types';
+import { AppState, DeviceApp } from '../types.ts';
 
 declare const fabricate: Fabricate<AppState>;
 

dashboard/src/components/AppLoader.ts

@@ -1,5 +1,5 @@
 import { Fabricate, FabricateComponent } from 'fabricate.js';
-import { AppState } from '../types';
+import { AppState } from '../types.ts';
 
 declare const fabricate: Fabricate<AppState>;
 

dashboard/src/components/DeviceMetrics.ts

@@ -1,10 +1,10 @@
 import { Fabricate, FabricateComponent } from 'fabricate.js';
 import {
   AppState, DataPoint, MetricData,
-} from '../types';
-import Theme from '../theme';
-import { BUCKET_SIZE } from '../constants';
-import { fetchMetric, fetchMetricNames } from '../services/conduitService';
+} from '../types.ts';
+import Theme from '../theme.ts';
+import { BUCKET_SIZE } from '../constants.ts';
+import { fetchMetric, fetchMetricNames } from '../services/conduitService.ts';
 
 declare const fabricate: Fabricate<AppState>;
 

dashboard/src/components/IconButton.ts

@@ -1,5 +1,5 @@
 import { Fabricate, FabricateComponent } from 'fabricate.js';
-import { AppState } from '../types';
+import { AppState } from '../types.ts';
 
 declare const fabricate: Fabricate<AppState>;
 

dashboard/src/components/StatRow.ts

@@ -1,8 +1,8 @@
 import { Fabricate } from 'fabricate.js';
-import { AppState, Device } from '../types';
-import { commandDevice, getTimeAgoStr } from '../util';
-import Theme from '../theme';
-import IconButton from './IconButton';
+import { AppState, Device } from '../types.ts';
+import { commandDevice, getTimeAgoStr } from '../util.ts';
+import Theme from '../theme.ts';
+import IconButton from './IconButton.ts';
 
 declare const fabricate: Fabricate<AppState>;
 

dashboard/src/components/VisualsPalette.ts

@@ -0,0 +1,83 @@
+import { Fabricate, FabricateComponent } from 'fabricate.js';
+import { AppState } from '../types.ts';
+import { sendConduitPacket } from '../services/conduitService.ts';
+
+declare const fabricate: Fabricate<AppState>;
+
+/** Colors for demo */
+const DEMO_COLORS = [
+  [0, 0, 0],        // Black
+  [64, 64, 64],     // Grey
+  [255, 255, 255],  // White
+  [255, 0, 0],      // Red
+  [255, 127, 0],    // Orange
+  [255, 255, 0],    // Yellow
+  [127, 255, 0],    // Lime green
+  [0, 255, 0],      // Green
+  [0, 255, 127],    // Pastel green
+  [0, 255, 255],    // Cyan
+  [0, 127, 255],    // Sky blue
+  [0, 0, 255],      // Blue
+  [127, 0, 255],    // Purple
+  [255, 0, 255],    // Pink
+  [255, 0, 127],    // Hot pink
+];
+
+/**
+ * SwatchButton component.
+ *
+ * @param {object} props - Component props.
+ * @param {number[]} props.color - RGB color.
+ * @returns {HTMLElement} Fabricate component.
+ */
+const SwatchButton = ({ color }: { color: number[] }) => {
+  const [red, green, blue] = color;
+
+  const backgroundColor = `rgb(${red},${green},${blue}`;
+
+  return fabricate('Row')
+    .setStyles({
+      width: '30px',
+      height: '30px',
+      backgroundColor,
+      margin: '3px',
+      cursor: 'pointer',
+    })
+    .onClick((el, state) => {
+      const message = { all: [red, green, blue] };
+      sendConduitPacket(state, { to: 'visuals', topic: 'setAll', message });
+    });
+};
+
+/**
+ * VisualsPalette component.
+ *
+ * @returns {FabricateComponent} VisualsPalette.
+ */
+const VisualsPalette = () => fabricate('Row')
+  .setStyles(({ palette }) => ({
+    flexWrap: 'wrap',
+    width: 'fit-content',
+    border: `solid 2px ${palette.grey6}`,
+    margin: '0px 0px 10px 30px',
+  }))
+  .setNarrowStyles({ width: '100%' })
+  .onCreate(async (el, state) => {
+    const { message } = await sendConduitPacket(state, { to: 'visuals', topic: 'hasLights' });
+
+    if (message.hasLights) {
+      el.setChildren(DEMO_COLORS.map((color) => SwatchButton({ color })));
+    } else {
+      el.setChildren([
+        fabricate('Text')
+          .setStyles(({ fonts }) => ({
+            color: 'white',
+            fontSize: '0.9rem',
+            fontFamily: fonts.body,
+          }))
+          .setText('No lights available'),
+      ]);
+    }
+  });
+
+export default VisualsPalette;

dashboard/src/constants.ts

@@ -1,4 +1,4 @@
-import { AppState } from './types';
+import { AppState } from './types.ts';
 
 /** Fleet host URL */
 export const FLEET_HOST = 'polaris.chrislewis.me.uk';

dashboard/src/index.ts

@@ -1,11 +1,11 @@
 import { Fabricate } from 'fabricate.js';
-import { AppState } from './types';
-import Theme from './theme';
-import { INITIAL_STATE } from './constants';
-import { parseParams } from './util';
-import SideBar from './components/SideBar';
-import AppArea from './components/AppArea';
-import { fetchFleetList } from './services/conduitService';
+import { AppState } from './types.ts';
+import Theme from './theme.ts';
+import { INITIAL_STATE } from './constants.ts';
+import { parseParams } from './util.ts';
+import SideBar from './components/SideBar.ts';
+import AppArea from './components/AppArea.ts';
+import { fetchFleetList } from './services/conduitService.ts';
 
 declare const fabricate: Fabricate<AppState>;
 

dashboard/src/services/conduitService.ts

@@ -2,9 +2,9 @@ import { Fabricate } from 'fabricate.js';
 import {
   AppState, DataPoint, Device, DeviceApp,
   Packet,
-} from '../types';
-import { BUCKET_SIZE, CONDUIT_PORT, FLEET_HOST } from '../constants';
-import { shortDateTime, sortAppByName } from '../util';
+} from '../types.ts';
+import { BUCKET_SIZE, CONDUIT_PORT, FLEET_HOST } from '../constants.ts';
+import { shortDateTime, sortAppByName } from '../util.ts';
 
 declare const fabricate: Fabricate<AppState>;
 
@@ -28,7 +28,9 @@ export const sendConduitPacket = async (
   deviceNameOverride?: string,
   tokenOverride?: string,
 ) => {
-  const { token, selectedDevice, devices, publicIp: currentPublicIp } = state;
+  const {
+    token, selectedDevice, devices, publicIp: currentPublicIp,
+  } = state;
   // const reqStateKey = appRequestStateKey(packet.to);
   // fabricate.update(reqStateKey, 'pending');
 

dashboard/src/util.ts

@@ -1,8 +1,8 @@
 import { Fabricate, FabricateComponent } from 'fabricate.js';
 import {
   AppState, Device, DeviceApp,
-} from './types';
-import { sendConduitPacket } from './services/conduitService';
+} from './types.ts';
+import { sendConduitPacket } from './services/conduitService.ts';
 
 declare const fabricate: Fabricate<AppState>;
 

dashboard/tsconfig.json

@@ -2,7 +2,7 @@
   "include": ["src/**/*"],
   "exclude": ["src/types.ts"],
   "compilerOptions": {
-    "target": "ES2016",
+    "target": "ESNext",
     "module": "NodeNext",
     "outDir": "./dist",
     "esModuleInterop": true,

dashboard/vite.config.js

@@ -11,4 +11,7 @@ export default {
       ],
     }),
   ],
+  server: {
+    port: 54449,
+  },
 };