feat(ui): show only available hardware based options

ui/public/locales/de/translation.json

@@ -24,7 +24,12 @@
     "title": "Log-Dateien"
   },
   "notification": {
-    "headline": "Etwas ist schief gelaufen"
+    "error": {
+      "headline": "Etwas ist schief gelaufen"
+    },
+    "warning": {
+      "headline": "Achtung"
+    }
   },
   "settings": {
     "accessPointPassword": "Passwort",
@@ -43,6 +48,7 @@
       "Manual75": "75%",
       "Manual100": "100%"
     },
+    "fanModeAutomaticWithoutTemperatureSensors": "Keine Temperatursensoren sind angeschlossen. Die Lüftergeschwindigkeit wird automatisch auf 100% gesetzt.",
     "language": "Sprache",
     "lightSensorDuration": "Sensor Laufzeit",
     "lightSensorMaxAmbientBrightness": "Maximale Helligkeit",

ui/public/locales/en/translation.json

@@ -24,7 +24,12 @@
     "title": "Log Files"
   },
   "notification": {
-    "headline": "Something went wrong"
+    "error": {
+      "headline": "Something went wrong"
+    },
+    "warning": {
+      "headline": "Warning"
+    }
   },
   "settings": {
     "accessPointPassword": "Password",
@@ -43,6 +48,7 @@
       "Manual75": "75%",
       "Manual100": "100%"
     },
+    "fanModeAutomaticWithoutTemperatureSensors": "No temperature sensors are connected. The fan speed is automatically set to 100%.",
     "language": "Language",
     "lightSensorDuration": "Sensor Duration",
     "lightSensorMaxAmbientBrightness": "Maximum Brightness",

ui/src/components/Notification.tsx

@@ -4,30 +4,43 @@ import { twMerge } from 'tailwind-merge';
 
 type NotificationProps = {
   message: string;
+  state: 'error' | 'warning';
 } & React.HTMLAttributes<HTMLDivElement>;
 
 export const Notification = ({
   message,
   className,
+  state,
   ...props
 }: NotificationProps) => {
   const { t } = useTranslation();
 
+  const isError = state === 'error';
+  const isWarning = state === 'warning';
+
   return (
     <div
       className={twMerge(
-        'mb-6 rounded border-t-4 border-red-500 bg-red-100 px-4 py-3 text-red-900',
+        'mb-6 rounded border-t-4 px-4 py-3',
+        isError && 'border-red-500 bg-red-100 text-red-900',
+        isWarning && 'border-yellow-500 bg-yellow-100 text-yellow-900',
         className,
       )}
       role="alert"
       {...props}
     >
       <div className="flex">
         <div className="py-1">
-          <ExclamationCircleIcon className="mr-4 h-6 w-6 text-red-500" />
+          <ExclamationCircleIcon
+            className={twMerge(
+              'mr-4 h-6 w-6',
+              isError && 'text-red-500',
+              isWarning && 'text-yellow-500',
+            )}
+          />
         </div>
         <div>
-          <p className="font-bold">{t('notification.headline')}</p>
+          <p className="font-bold">{t(`notification.${state}.headline`)}</p>
           <p>{message}</p>
         </div>
       </div>

ui/src/components/Slider.tsx

@@ -26,6 +26,7 @@ export const Slider = <T extends FieldValues>({
       step={1}
       className={twMerge(
         'relative flex h-5 w-64 touch-none items-center',
+        'radix-disabled:opacity-50',
         className,
       )}
       {...props}
@@ -40,7 +41,7 @@ export const Slider = <T extends FieldValues>({
       </SliderPrimitive.Track>
       <SliderPrimitive.Thumb
         className={classNames(
-          'block h-5 w-5 cursor-pointer rounded-full bg-zinc dark:bg-neutral',
+          'block h-5 w-5 cursor-pointer rounded-full bg-zinc radix-disabled:cursor-default dark:bg-neutral',
           'focus:outline-none focus-visible:ring focus-visible:ring-green focus-visible:ring-opacity-75',
         )}
       />

ui/src/mocks/handlers.ts

@@ -1,5 +1,5 @@
 import { rest } from 'msw';
-import type { Fseq, Led, System, Ui, Wifi } from '../pages/api';
+import type { Fseq, Led, System, SystemInfo, Ui, Wifi } from '../pages/api';
 import { throttledRes } from './throttledRes';
 
 const mock: {
@@ -15,7 +15,11 @@ const mock: {
   ui: {
     uiConfig: Ui;
   };
+  info: {
+    system: SystemInfo;
+  };
   motion: {
+    // TODO: Update type
     motionSensorCalibration: {
       accXRaw: number;
       accYRaw: number;
@@ -29,7 +33,7 @@ const mock: {
       gyroXDeg: number;
       gyroYDeg: number;
       gyroZDeg: number;
-    }; // TODO: Update type
+    };
   };
   fseq: {
     fileList: Fseq[];
@@ -93,6 +97,40 @@ const mock: {
       theme: 'dark',
     },
   },
+  info: {
+    system: {
+      socInfo: {
+        chipModel: 'ESP32',
+        chipRevision: 1,
+        cpuCores: 2,
+        cpuClock: 240000000,
+        freeHeap: 265332,
+        flashSize: 4194304,
+        flashSpeed: 40000000,
+        sketchSize: 1161168,
+        freeSketchSpace: 1966080,
+      },
+      tlSystemInfo: {
+        rps: 60,
+        fps: 60,
+        ledCount: 720,
+      },
+      hardwareInfo: {
+        regulatorCount: 2,
+        regulatorVoltage: 5,
+        regulatorCurrentLimit: 6,
+        regulatorCurrentDraw: 2.5,
+        regulatorPowerLimit: 30,
+        regulatorPowerDraw: 15,
+        regulatorTemperature: 50,
+        fanSpeed: 0,
+        mpu6050: 1,
+        ds18b20: 2,
+        bh1750: 1,
+        audioUnit: 1,
+      },
+    },
+  },
   motion: {
     motionSensorCalibration: {
       accXRaw: 0,
@@ -132,6 +170,18 @@ export const handlers = [
     res(ctx.status(200), ctx.json({ status: 200, message: 'ok' })),
   ),
 
+  // ------------------
+  // System Information
+  // ------------------
+
+  rest.get('/api/info/system', (_req, res, ctx) => {
+    console.debug(`Get system information: ${mock.info.system}`);
+    return res(
+      ctx.status(200),
+      ctx.json({ status: 200, message: 'ok', ...mock.info.system }),
+    );
+  }),
+
   // --------------------
   // System Configuration
   // --------------------
@@ -186,9 +236,9 @@ export const handlers = [
     return res(ctx.status(200), ctx.json({ status: 200, message: 'ok' }));
   }),
 
-  // ------------------
+  // ----------------
   // UI Configuration
-  // ------------------
+  // ----------------
 
   rest.get('/api/config/ui', (_req, res, ctx) => {
     console.debug(`Get UI configuration: ${mock.ui}`);
@@ -204,9 +254,9 @@ export const handlers = [
     return res(ctx.status(200), ctx.json({ status: 200, message: 'ok' }));
   }),
 
-  // -----
+  // ---------------------------------------
   // Motion Sensor Calibration Configuration
-  // -----
+  // ---------------------------------------
 
   rest.get('/api/config/motion', (_req, res, ctx) => {
     console.debug(`Get motion configuration: ${mock.motion}`);

ui/src/pages/CustomAnimations.tsx

@@ -153,13 +153,22 @@ const Form = (): JSX.Element => {
       {isUploadSuccess && (
         <Toast title={t('customAnimations.uploadSuccessful')} />
       )}
+
       {isDeleteSuccess && (
         <Toast title={t('customAnimations.deleteSuccessful')} />
       )}
 
-      {isUploadError && <Notification message={uploadError.message} />}
-      {isDeleteError && <Notification message={deleteError.message} />}
-      {isUpdateError && <Notification message={updateError.message} />}
+      {isUploadError && (
+        <Notification state="error" message={uploadError.message} />
+      )}
+
+      {isDeleteError && (
+        <Notification state="error" message={deleteError.message} />
+      )}
+
+      {isUpdateError && (
+        <Notification state="error" message={updateError.message} />
+      )}
 
       {isUploadLoading && <Loading overlay />}