feat(motion): add auto motion sensor calibration to ui (#172)

ui/package.json

@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.0.16",
+    "@radix-ui/react-alert-dialog": "^1.0.3",
     "@radix-ui/react-collapsible": "^1.0.2",
     "@radix-ui/react-select": "^1.2.1",
     "@radix-ui/react-slider": "^1.1.1",

ui/public/locales/de/translation.json

@@ -1,4 +1,8 @@
 {
+  "alertDialog": {
+    "confirm": "Bestätigen",
+    "cancel": "Schließen"
+  },
   "customAnimations": {
     "deleteSuccessful": "Erfolgreich gelöscht!",
     "file": "Datei",
@@ -87,6 +91,12 @@
       "warning": "Warnung",
       "error": "Fehler"
     },
+    "motionSensor": "Bewegungssensor",
+    "motionSensorCalibration": "Kalibrierung",
+    "motionSensorAutoCalibration": "Starte Auto-Kalibrierung",
+    "motionSensorAutoCalibrationTitle": "Möchtest du die automatische Kalibrierung des Bewegungssensors starten?",
+    "motionSensorAutoCalibrationDescription": "Stelle sicher, dass das Fahrzeug geparkt ist und die Innentemperatur zwischen -10°C und 50°C beträgt.",
+    "motionSensorAutoCalibrationSuccessful": "Erfolgreich kalibriert.",
     "power": "Power",
     "regulator": "Regler",
     "regulatorCutoffTemperature": "Abschalttemperatur (°C)",

ui/public/locales/en/translation.json

@@ -1,4 +1,8 @@
 {
+  "alertDialog": {
+    "confirm": "Confirm",
+    "close": "Close"
+  },
   "customAnimations": {
     "deleteSuccessful": "Successfully deleted!",
     "file": "File",
@@ -87,6 +91,12 @@
       "info": "Info",
       "warning": "Warning"
     },
+    "motionSensor": "Motion Sensor",
+    "motionSensorCalibration": "Calibration",
+    "motionSensorAutoCalibration": "Start Auto Calibration",
+    "motionSensorAutoCalibrationTitle": "Do you want to start the automatic calibration of the motion sensor?",
+    "motionSensorAutoCalibrationDescription": "Make sure that the car is parked and the interior temperature is between -10°C and 50°C.",
+    "motionSensorAutoCalibrationSuccessful": "Successfully calibrated.",
     "power": "Power",
     "regulator": "Regulator",
     "regulatorCutoffTemperature": "Shut Down Temperature (°C)",

ui/src/components/AlertDialog.tsx

@@ -0,0 +1,78 @@
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import cx from 'classnames';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+type AlertDialogProps = Omit<
+  AlertDialogPrimitive.AlertDialogProps,
+  'open' | 'onOpenChange'
+> & {
+  title: React.ReactNode;
+  description: React.ReactNode;
+  onConfirm: () => void;
+};
+
+export const AlertDialog = ({
+  children,
+  title,
+  description,
+  onConfirm,
+  ...props
+}: AlertDialogProps): JSX.Element => {
+  const { t } = useTranslation();
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <AlertDialogPrimitive.Root
+      open={isOpen}
+      onOpenChange={setIsOpen}
+      {...props}
+    >
+      <AlertDialogPrimitive.Trigger asChild>
+        {children}
+      </AlertDialogPrimitive.Trigger>
+
+      <AlertDialogPrimitive.Portal>
+        <AlertDialogPrimitive.Overlay className="fixed inset-0 z-20 bg-black/50" />
+        <AlertDialogPrimitive.Content
+          className={cx(
+            'fixed z-50',
+            'w-[95vw] max-w-md rounded-lg p-4 md:w-full',
+            'top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]',
+            'bg-cloud dark:bg-gray',
+            'text-slate dark:text-white',
+            'focus:outline-none focus-visible:ring focus-visible:ring-sky focus-visible:ring-opacity-75',
+          )}
+        >
+          <AlertDialogPrimitive.Title className="text-sm font-medium">
+            {title}
+          </AlertDialogPrimitive.Title>
+          <AlertDialogPrimitive.Description className="mt-2 text-sm font-normal">
+            {description}
+          </AlertDialogPrimitive.Description>
+          <div className="mt-4 flex justify-end space-x-2">
+            <AlertDialogPrimitive.Cancel
+              className={cx(
+                'inline-flex select-none justify-center rounded-md px-4 py-2 text-sm font-medium',
+                'border border-gray bg-transparent dark:border-white/10',
+                'focus:outline-none focus-visible:ring focus-visible:ring-sky focus-visible:ring-opacity-75',
+              )}
+            >
+              {t('alertDialog.close')}
+            </AlertDialogPrimitive.Cancel>
+            <AlertDialogPrimitive.Action
+              onClick={onConfirm}
+              className={cx(
+                'inline-flex select-none justify-center rounded-md px-4 py-2 text-sm font-medium',
+                'bg-sky text-white',
+                'focus:outline-none focus-visible:ring focus-visible:ring-sky focus-visible:ring-opacity-75',
+              )}
+            >
+              {t('alertDialog.confirm')}
+            </AlertDialogPrimitive.Action>
+          </div>
+        </AlertDialogPrimitive.Content>
+      </AlertDialogPrimitive.Portal>
+    </AlertDialogPrimitive.Root>
+  );
+};

ui/src/components/Button.tsx

@@ -1,30 +1,32 @@
+import { forwardRef } from 'react';
 import { twMerge } from 'tailwind-merge';
 
-type ButtonProps = {
+export type ButtonProps = {
   variant?: 'primary' | 'secondary';
   size?: 'small';
 } & React.ButtonHTMLAttributes<HTMLButtonElement>;
 
-export const Button = ({
-  children,
-  className,
-  variant,
-  size,
-  ...props
-}: ButtonProps) => (
-  <button
-    {...props}
-    className={twMerge(
-      'w-full rounded-md',
-      size === 'small' ? ' py-1' : 'py-2',
-      'disabled:opacity-50',
-      'focus:outline-none focus-visible:ring focus-visible:ring-sky focus-visible:ring-opacity-75',
-      props.type === 'reset' || variant === 'secondary'
-        ? 'border border-gray bg-transparent'
-        : 'bg-sky text-white',
-      className,
-    )}
-  >
-    {children}
-  </button>
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ children, className, variant, size, ...props }, forwardedRef) => (
+    <button
+      {...props}
+      ref={forwardedRef}
+      className={twMerge(
+        'w-full rounded-md',
+        size === 'small' ? ' px-2 py-1' : 'px-4 py-2',
+        'disabled:opacity-50',
+        'focus:outline-none focus-visible:ring focus-visible:ring-sky focus-visible:ring-opacity-75',
+        props.type === 'reset' || variant === 'secondary'
+          ? 'border border-gray bg-transparent'
+          : 'bg-sky text-white',
+        className,
+      )}
+    >
+      {children}
+    </button>
+  ),
 );
+
+Button.displayName = 'Button';
+
+export { Button };

ui/src/components/Collapsible.tsx

@@ -49,5 +49,3 @@ export const Collapsible = ({
     </CollapsiblePrimitive.Root>
   );
 };
-
-export default Collapsible;