added languages for device

2023-07-21 01:49:41 +00:00 · 2023-07-21 01:49:41 +00:00 · 893d342a05
parent 4b1bc22008
commit 893d342a05
12 changed files with 382 additions and 125 deletions
--- a/locales/de.json
+++ b/locales/de.json
@ -25,6 +25,47 @@
        "deviceFirmwareVersionText": "Firmware Version",
        "deviceLastUpdatedText": "Letzte Aktualisierung",
        "modalTextInputDeviceNameDescription": "Der Name des Geräts wird lokal auf dem Gerät gespeichert und dient Ihnen dazu, die verbundenen Geräte in der App voneinander zu unterscheiden."
+      },
+      "scenes": {
+        "dropdownSceneSelection": {
+          "label": "Szene",
+          "noSceneSelected": "Keine Szene ausgewählt"
+        },
+        "infoNoSceneSelected": "Keine Szene ausgewählt",
+        "infoNoActionsAvailableInScene": "Keine Aktionen in der Szene vorhanden",
+        "buttonAddAction": "Aktion hinzufügen",
+        "modalChooseScene": {
+          "headerTitle": "Wähle eine Szene aus",
+          "textButtonAddScene": "Neue Szene erstellen"
+        },
+        "modalCreateScene": {
+          "headerTitle": "Szene erstellen",
+          "options": {
+            "emptyScene": "Leere Szene erstellen",
+            "standardScene": "Standard Szene erstellen",
+            "copyExistingScene": "Vorhandene Szene kopieren"
+          }
+        },
+        "modalAddSceneAction": {
+          "headerTitle": "Aktion hinzufügen",
+          "actions": {
+            "layers": "Ebenen",
+            "motor": "Motor",
+            "ambilight": "Ambilight",
+            "waitXSeconds": "Warte X Sekunden",
+            "waitUntilTimeX": "Warten bis Zeit X",
+            "stop": "Stop",
+            "timeControl": "Zeitsteuerung",
+            "waitForConfirmationWithKey": "Warte auf Bestätigung mit Taste",
+            "jumpToScene": "Springe zu Szene"
+          }
+        },
+        "modalLayerSection": {
+          "headerTitle": "Layer auswahl"
+        },
+        "modalLayersEditAction": {
+          "headerTitle": "Ebenen bearbeiten"
+        }
      }
    },
    "settings": {
--- a/locales/en.json
+++ b/locales/en.json
@ -25,6 +25,47 @@
        "deviceFirmwareVersionText": "Firmware Version",
        "deviceLastUpdatedText": "Last updated",
        "modalTextInputDeviceNameDescription": "The name of the device is stored locally on the device and serves you to distinguish the connected devices from each other in the app."
+      },
+      "scenes": {
+        "dropdownSceneSelection": {
+          "label": "Scene",
+          "noSceneSelected": "No scene selected"
+        },
+        "infoNoSceneSelected": "No scene selected",
+        "infoNoActionsAvailableInScene": "No actions available in the scene",
+        "buttonAddAction": "Add action",
+        "modalChooseScene": {
+          "headerTitle": "Choose a scene",
+          "textButtonAddScene": "Create new scene"
+        },
+        "modalCreateScene": {
+          "headerTitle": "Create scene",
+          "options": {
+            "emptyScene": "Create empty scene",
+            "standardScene": "Create standard scene",
+            "copyExistingScene": "Copy an existing scene"
+          }
+        },
+        "modalAddSceneAction": {
+          "headerTitle": "Add action",
+          "actions": {
+            "layers": "Layers",
+            "motor": "Motor",
+            "ambilight": "Ambilight",
+            "waitXSeconds": "Wait X seconds",
+            "waitUntilTimeX": "Wait until time X",
+            "stop": "Stop",
+            "timeControl": "Time control",
+            "waitForConfirmationWithKey": "Wait for confirmation with button",
+            "jumpToScene": "Jump to scene"
+          }
+        },
+        "modalLayerSection": {
+          "headerTitle": "Layer selection"
+        },
+        "modalLayersEditAction": {
+          "headerTitle": "Edit layers"
+        }
      }
    },
    "settings": {
--- a/src/Screens/Device/deviceTabButton.js
+++ b/src/Screens/Device/deviceTabButton.js
@ -0,0 +1,37 @@
+import { useContext } from "react";
+import { AppContext } from "../../utils";
+import { TouchableHighlight, TouchableOpacity } from "react-native";
+import MyIcon from "../../Components/Icon";
+
+const spaceToSide = 10; // left and right
+const top = 35;
+const spaceBetweenButtons = 60;
+
+export const topFirst = top;
+export const topSecond = top + spaceBetweenButtons;
+export const topThird = top + 2 * spaceBetweenButtons;
+
+export const MyDeviceTabButton = ({ top, iconName, iconColor, onPress }) => {
+  const appContext = useContext(AppContext);
+
+  const TouchComponent =
+    appContext.appColorScheme === "dark"
+      ? TouchableHighlight
+      : TouchableOpacity;
+
+  return (
+    <TouchComponent
+      onPress={onPress}
+      style={{
+        position: "absolute",
+        backgroundColor: appContext.appTheme.card.backgroundColor,
+        borderRadius: 10,
+        padding: 8,
+        top: top,
+        right: spaceToSide,
+      }}
+    >
+      <MyIcon name={iconName} size={30} color={iconColor} />
+    </TouchComponent>
+  );
+};
--- a/src/Screens/Device/index.js
+++ b/src/Screens/Device/index.js
@ -1,26 +1,14 @@
 import { useContext, useState } from "react";
-import {
-  Image,
-  ScrollView,
-  StyleSheet,
-  View,
-  Text,
-  TouchableHighlight,
-  TouchableOpacity,
-  ImageBackground,
-} from "react-native";
+import { Image, ScrollView, StyleSheet, View, Text } from "react-native";
 import { AppContext } from "../../utils";
-import MyIcon from "../../Components/Icon";
 import SettingsView from "./settings";
 import SceneView from "./scene";
-
-const spaceToSide = 10; // left and right
-const top = 35;
-const spaceBetweenButtons = 60;
-
-const topFirst = top;
-const topSecond = top + spaceBetweenButtons;
-const topThird = top + 2 * spaceBetweenButtons;
+import {
+  MyDeviceTabButton,
+  topFirst,
+  topSecond,
+  topThird,
+} from "./deviceTabButton";

 export default function DeviceScreen() {
  const appContext = useContext(AppContext);
@ -37,37 +25,10 @@ export default function DeviceScreen() {
    }
  };

-  const MyButton = ({ selectedViewNumber, top, left, space, iconName }) => {
-    const TouchComponent =
-      appContext.appColorScheme === "dark"
-        ? TouchableHighlight
-        : TouchableOpacity;
-
-    return (
-      <TouchComponent
-        onPress={() => setSelectedView(selectedViewNumber)}
-        style={[
-          {
-            position: "absolute",
-            backgroundColor: appContext.appTheme.card.backgroundColor,
-            borderRadius: 10,
-            padding: 8,
-          },
-          { top: top },
-          left === true ? { left: space } : { right: space },
-        ]}
-      >
-        <MyIcon
-          name={iconName}
-          size={30}
-          color={
-            selectedView === selectedViewNumber
-              ? appContext.appTheme.colors.primary
-              : appContext.appTheme.icon
-          }
-        />
-      </TouchComponent>
-    );
+  const getIconColor = (selectedViewNumber) => {
+    return selectedView === selectedViewNumber
+      ? appContext.appTheme.colors.primary
+      : appContext.appTheme.icon;
  };

  return (
@ -77,28 +38,12 @@ export default function DeviceScreen() {
        backgroundColor: appContext.appTheme.backgroundColor,
      }}
    >
-      {selectedView === 4 && (
-        <View>
-          <ImageBackground
-            source={require("../../../assets/image19.png")}
-            resizeMode="contain"
-            style={{ height: 250 }}
-          >
-            <DeviceLedsColor />
-          </ImageBackground>
-        </View>
-      )}
-
      {appContext.isUserDeveloperModeEnabled ? (
-        <>
-          {selectedView !== 4 && (
-            <Image
-              source={require("../../../assets/device.png")}
-              style={styles.image}
-              resizeMode="contain"
-            />
-          )}
-        </>
+        <Image
+          source={require("../../../assets/device.png")}
+          style={styles.image}
+          resizeMode="contain"
+        />
      ) : (
        <>
          {selectedView !== 4 && (
@ -107,26 +52,26 @@ export default function DeviceScreen() {
        </>
      )}

-      <MyButton
+      <MyDeviceTabButton
        iconName={"cog-outline"}
-        left={false}
        selectedViewNumber={0}
-        space={spaceToSide}
        top={topFirst}
+        iconColor={getIconColor(0)}
+        onPress={() => setSelectedView(0)}
      />
-      <MyButton
+      <MyDeviceTabButton
        iconName={"rotate-3d-variant"}
-        left={false}
        selectedViewNumber={1}
-        space={spaceToSide}
        top={topSecond}
+        iconColor={getIconColor(1)}
+        onPress={() => setSelectedView(1)}
      />
-      <MyButton
+      <MyDeviceTabButton
        iconName={"group"}
-        left={false}
        selectedViewNumber={2}
-        space={spaceToSide}
        top={topThird}
+        iconColor={getIconColor(2)}
+        onPress={() => setSelectedView(2)}
      />

      <ScrollView style={{ height: "100%" }}>
--- a/src/Screens/Device/modals/ActionEdits/Layers/index.js
+++ b/src/Screens/Device/modals/ActionEdits/Layers/index.js
@ -1,5 +0,0 @@
-import { Text } from "react-native";
-
-export default function LayersActionEditModalContent() {
-  return <Text>Layers</Text>;
-}
--- a/src/Screens/Device/modals/AddSceneAction/LayerSelection/index.js
+++ b/src/Screens/Device/modals/AddSceneAction/LayerSelection/index.js
@ -1,6 +1,7 @@
 import { useState } from "react";
 import { Text, TouchableHighlight, View } from "react-native";
 import MyButton from "../../../../../Components/Button";
+import { useTranslation } from "react-i18next";

 function Layer({ number, selected, onPress }) {
  return (
@ -38,6 +39,7 @@ function Layer({ number, selected, onPress }) {
 export default function LayerSelectionModalContent({
  openLayersActionEditModal,
 }) {
+  const { t } = useTranslation();
  const [selectedLayer, setSelectedLayer] = useState([]);

  const handleSelectLayerClick = (layerNumber) => {
@ -72,7 +74,7 @@ export default function LayerSelectionModalContent({

      <View style={{ alignItems: "center" }}>
        <MyButton
-          title={"Hinzufügen"}
+          title={t("screens.device.scenes.buttonAddAction")}
          style={{ marginTop: 20, width: 180 }}
          disabled={selectedLayer.length === 0}
          onPress={openLayersActionEditModal}
--- a/src/Screens/Device/modals/AddSceneAction/index.js
+++ b/src/Screens/Device/modals/AddSceneAction/index.js
@ -3,6 +3,7 @@ import { Image, Text, TouchableOpacity, View } from "react-native";
 import { AppContext, AppStyles } from "../../../../utils";
 import MyIcon from "../../../../Components/Icon";
 import { Divider } from "../../../../Components/Divider";
+import { useTranslation } from "react-i18next";

 function Action({ text, iconName, imageSource, onPress }) {
  const appContext = useContext(AppContext);
@ -44,46 +45,76 @@ function Action({ text, iconName, imageSource, onPress }) {
 export default function AddSceneActionModalContent({
  openLayerSelectionModal,
 }) {
+  const { t } = useTranslation();
+
  return (
    <>
      <Action
-        text="Ebenen"
+        text={t("screens.device.scenes.modalAddSceneAction.actions.layers")}
        iconName="lightbulb-on-outline"
        imageSource={require("../../../../../assets/layers.gif")}
        onPress={openLayerSelectionModal}
      />

      <Action
-        text="Motor"
+        text={t("screens.device.scenes.modalAddSceneAction.actions.motor")}
        iconName="axis-z-rotate-counterclockwise"
        imageSource={require("../../../../../assets/motor.gif")}
        onPress={() => console.log("pressed action")}
      />

      <Action
-        text="Ambilight"
+        text={t("screens.device.scenes.modalAddSceneAction.actions.ambilight")}
        iconName="television-ambient-light"
        imageSource={require("../../../../../assets/ambilight.gif")}
        onPress={() => console.log("pressed action")}
      />

      <Action
-        text="Warten"
+        text={t(
+          "screens.device.scenes.modalAddSceneAction.actions.waitXSeconds"
+        )}
        iconName="timer-sand"
        onPress={() => console.log("pressed action")}
      />

      <Action
-        text="Stop"
+        text={t(
+          "screens.device.scenes.modalAddSceneAction.actions.waitUntilTimeX"
+        )}
+        iconName="clock-time-eight-outline"
+        onPress={() => console.log("pressed action")}
+      />
+
+      <Action
+        text={t("screens.device.scenes.modalAddSceneAction.actions.stop")}
        iconName="pause-octagon-outline"
        onPress={() => console.log("pressed action")}
      />

      <Action
-        text="Zeitsteuerung"
+        text={t(
+          "screens.device.scenes.modalAddSceneAction.actions.timeControl"
+        )}
        iconName="timer-cog"
        onPress={() => console.log("pressed action")}
      />
+
+      <Action
+        text={t(
+          "screens.device.scenes.modalAddSceneAction.actions.waitForConfirmationWithKey"
+        )}
+        iconName="gesture-tap-button"
+        onPress={() => console.log("pressed action")}
+      />
+
+      <Action
+        text={t(
+          "screens.device.scenes.modalAddSceneAction.actions.jumpToScene"
+        )}
+        iconName="debug-step-over"
+        onPress={() => console.log("pressed action")}
+      />
    </>
  );
 }
--- a/src/Screens/Device/modals/ChooseScene/CreateScene/index.js
+++ b/src/Screens/Device/modals/ChooseScene/CreateScene/index.js
@ -4,24 +4,28 @@ import {
  DevDeviceId,
  NewEmptyDeviceScene,
 } from "../../../../../utils";
-import { FlatList, View } from "react-native";
+import { FlatList } from "react-native";
 import { MyPickerModalListItem } from "../../../../../Components/Modal";
+import { useTranslation } from "react-i18next";

 export default function CreateSceneModalContent({ closeChooseSceneModals }) {
  const appContext = useContext(AppContext);
+  const { t } = useTranslation();

  const options = [
    {
      id: 0,
-      name: "Leere Szene erstellen",
+      name: t("screens.device.scenes.modalCreateScene.options.emptyScene"),
    },
    {
      id: 1,
-      name: "Standard Szene erstellen",
+      name: t("screens.device.scenes.modalCreateScene.options.standardScene"),
    },
    {
      id: 2,
-      name: "Vorhandene Szene kopieren",
+      name: t(
+        "screens.device.scenes.modalCreateScene.options.copyExistingScene"
+      ),
    },
  ];

@ -33,8 +37,6 @@ export default function CreateSceneModalContent({ closeChooseSceneModals }) {
        <MyPickerModalListItem
          itemName={item.name}
          onPress={() => {
-            console.log("pressed", item);
-
            appContext.setDevices((arr) => {
              const newArr = [...arr];

--- a/src/Screens/Device/modals/ChooseScene/index.js
+++ b/src/Screens/Device/modals/ChooseScene/index.js
@ -1,13 +1,13 @@
-import { useContext, useState } from "react";
+import { useContext } from "react";
 import { FlatList, Text, TouchableOpacity } from "react-native";
 import { AppContext, AppStyles, DevDeviceId } from "../../../../utils";
-import { Divider } from "../../../../Components/Divider";
-import { View } from "react-native";
 import MyIcon from "../../../../Components/Icon";
 import { MyPickerModalListItem } from "../../../../Components/Modal";
+import { useTranslation } from "react-i18next";

 export default function ChooseSceneModalContent({ openCreateSceneModal }) {
  const appContext = useContext(AppContext);
+  const { t } = useTranslation();

  const device = appContext.devices.find((device) => device.id === DevDeviceId);

@ -56,7 +56,7 @@ export default function ChooseSceneModalContent({ openCreateSceneModal }) {
            { color: appContext.appTheme.textSecondary },
          ]}
        >
-          Neue Szene erstellen
+          {t("screens.device.scenes.modalChooseScene.textButtonAddScene")}
        </Text>
      </TouchableOpacity>
    </>
--- a/src/Screens/Device/modals/EditActions/Lights/index.js
+++ b/src/Screens/Device/modals/EditActions/Lights/index.js
@ -0,0 +1,30 @@
+import { Image } from "react-native";
+import {
+  MyDeviceTabButton,
+  topFirst,
+  topSecond,
+} from "../../../deviceTabButton";
+import Card from "../../../../../Components/Card";
+import MyDropdown from "../../../../../Components/Dropdown";
+
+export function LightsEditActionModalContent() {
+  return (
+    <>
+      <Image
+        source={require("../../../../../../assets/device.png")}
+        style={{ width: "100%", height: 200 }}
+        resizeMode="contain"
+      />
+
+      <MyDeviceTabButton iconName="play-network-outline" top={topFirst + 20} />
+      <MyDeviceTabButton
+        iconName="play-box-multiple-outline"
+        top={topSecond + 30}
+      />
+
+      <Card>
+        <MyDropdown label="Wähle einen Modus" selectedItemLabel={"Solid"} />
+      </Card>
+    </>
+  );
+}
--- a/src/Screens/Device/scene.js
+++ b/src/Screens/Device/scene.js
@ -9,7 +9,8 @@ import CreateSceneModalContent from "./modals/ChooseScene/CreateScene";
 import ChooseSceneModalContent from "./modals/ChooseScene";
 import AddSceneActionModalContent from "./modals/AddSceneAction";
 import LayerSelectionModalContent from "./modals/AddSceneAction/LayerSelection";
-import LayersActionEditModalContent from "./modals/ActionEdits/Layers";
+import { useTranslation } from "react-i18next";
+import { LightsEditActionModalContent } from "./modals/EditActions/Lights";

 function NothingSelected({ text }) {
  const appContext = useContext(AppContext);
@ -36,13 +37,14 @@ function NothingSelected({ text }) {

 export default function SceneView() {
  const appContext = useContext(AppContext);
+  const { t } = useTranslation();

  const [modalOpenStates, setModalOpenStates] = useState({
    modalChooseSceneIsOpen: false,
    modalCreateSceneIsOpen: false,
    modalAddSceneActionIsOpen: false,
    modalLayerSectionIsOpen: false,
-    modalLayersActionEditIsOpen: false,
+    modalLayersEditActionIsOpen: false,
  });

  const setModalOpen = (modalName, open) =>
@ -79,13 +81,13 @@ export default function SceneView() {
          () =>
            setModalOpenStates((prevState) => ({
              ...prevState,
-              modalLayersActionEditIsOpen: true,
+              modalLayersEditActionIsOpen: true,
            })),
          600
        )
      : setModalOpenStates((prevState) => ({
          ...prevState,
-          modalLayersActionEditIsOpen: true,
+          modalLayersEditActionIsOpen: true,
        }));
  };

@ -98,11 +100,13 @@ export default function SceneView() {
    <>
      <Card>
        <MyDropdown
-          label={"Szene"}
+          label={t("screens.device.scenes.dropdownSceneSelection.label")}
          onPress={() => setModalOpen("modalChooseSceneIsOpen", true)}
          selectedItemLabel={
            device.selectedScene === 0
-              ? "Keine Szene ausgewählt"
+              ? t(
+                  "screens.device.scenes.dropdownSceneSelection.noSceneSelected"
+                )
              : device.scenes.find((scene) => scene.id === device.selectedScene)
                  .name
          }
@ -110,11 +114,15 @@ export default function SceneView() {
      </Card>

      {device.selectedScene === 0 ? (
-        <NothingSelected text="Keine Szene ausgewählt" />
+        <NothingSelected
+          text={t("screens.device.scenes.infoNoSceneSelected")}
+        />
      ) : (
        <View>
          {deviceScene.actions.length === 0 ? (
-            <NothingSelected text="Keine Aktionen in der Szene vorhanden" />
+            <NothingSelected
+              text={t("screens.device.scenes.infoNoActionsAvailableInScene")}
+            />
          ) : (
            <FlatList
              scrollEnabled={false}
@ -133,7 +141,7 @@ export default function SceneView() {
                      onPress={() =>
                        setModalOpenStates((prevState) => ({
                          ...prevState,
-                          modalLayersActionEditIsOpen: true,
+                          modalLayersEditActionIsOpen: true,
                        }))
                      }
                    >
@ -164,17 +172,20 @@ export default function SceneView() {
                  color: actionColor,
                }}
              />
-              <Text style={{ color: actionColor }}>Aktion hinzufügen</Text>
+              <Text style={{ color: actionColor }}>
+                {t("screens.device.scenes.buttonAddAction")}
+              </Text>
            </View>
          </TouchableOpacity>
        </View>
      )}
+
      <MyModal
        isOpen={modalOpenStates.modalChooseSceneIsOpen}
        closeModal={() => setModalOpen("modalChooseSceneIsOpen", false)}
        header={
          <MyDefaultModalHeader
-            title={"Wähle eine Szene aus"}
+            title={t("screens.device.scenes.modalChooseScene.headerTitle")}
            closeModal={() => setModalOpen("modalChooseSceneIsOpen", false)}
          />
        }
@ -191,7 +202,7 @@ export default function SceneView() {
          closeModal={() => setModalOpen("modalCreateSceneIsOpen", false)}
          header={
            <MyDefaultModalHeader
-              title={"Szene erstellen"}
+              title={t("screens.device.scenes.modalCreateScene.headerTitle")}
              closeModal={() => setModalOpen("modalCreateSceneIsOpen", false)}
            />
          }
@ -209,7 +220,7 @@ export default function SceneView() {
        closeModal={() => setModalOpen("modalAddSceneActionIsOpen", false)}
        header={
          <MyDefaultModalHeader
-            title={"Aktion hinzufügen"}
+            title={t("screens.device.scenes.modalAddSceneAction.headerTitle")}
            closeModal={() => setModalOpen("modalAddSceneActionIsOpen", false)}
          />
        }
@ -227,7 +238,7 @@ export default function SceneView() {
          closeModal={() => setModalOpen("modalLayerSectionIsOpen", false)}
          header={
            <MyDefaultModalHeader
-              title={"Layer auswahl"}
+              title={t("screens.device.scenes.modalLayerSection.headerTitle")}
              closeModal={() => setModalOpen("modalLayerSectionIsOpen", false)}
            />
          }
@ -241,17 +252,17 @@ export default function SceneView() {

      <MyModal
        scrollView
-        isOpen={modalOpenStates.modalLayersActionEditIsOpen}
-        closeModal={() => setModalOpen("modalLayersActionEditIsOpen", false)}
+        isOpen={modalOpenStates.modalLayersEditActionIsOpen}
+        closeModal={() => setModalOpen("modalLayersEditActionIsOpen", false)}
        header={
          <MyDefaultModalHeader
-            title={"Layer Action bearbeiten"}
+            title={t("screens.device.scenes.modalLayersEditAction.headerTitle")}
            closeModal={() =>
-              setModalOpen("modalLayersActionEditIsOpen", false)
+              setModalOpen("modalLayersEditActionIsOpen", false)
            }
          />
        }
-        content={<LayersActionEditModalContent />}
+        content={<LightsEditActionModalContent />}
      />
    </>
  );
--- a/src/utils.js
+++ b/src/utils.js
@ -161,11 +161,133 @@ const appContextPreview = {
  devices: [],
 };

-export const DevDeviceId = 0;
+export const DevDeviceId = "1f21a12a-0bec-4336-99bb-df3f9fc9f537";

-const devData = [
+const devFirmwareData = {
+  firmwareVersion: "v1.0",
+  animationsIn: [
+    {
+      id: 0,
+      name: {
+        de: "Aufblendung",
+        en: "Fade in",
+      },
+      adjustments: [
+        {
+          id: 0,
+          type: "slider",
+          name: {
+            de: "Dauer",
+            en: "Duration",
+          },
+        },
+      ],
+    },
+  ],
+  animationsOut: [
+    {
+      id: 0,
+      name: {
+        de: "Ausblenden",
+        en: "Fade out",
+      },
+      adjustments: [
+        {
+          id: 0,
+          type: "slider",
+          name: {
+            de: "Dauer",
+            en: "Duration",
+          },
+        },
+      ],
+    },
+  ],
+  lightModes: [
+    {
+      id: 0,
+      name: {
+        de: "Einfarbig",
+        en: "Solid",
+      },
+      defaults: [],
+      adjustments: [
+        {
+          id: 0,
+          type: "solidColor",
+        },
+      ],
+    },
+    {
+      id: 1,
+      name: {
+        de: "Zufällig",
+        en: "Random",
+      },
+      defaults: [
+        {
+          type: "color",
+          valeu: "red",
+        },
+        {
+          type: "color",
+          valeu: "orange",
+        },
+        {
+          type: "color",
+          valeu: "blue",
+        },
+      ],
+      adjustments: [
+        {
+          id: 0,
+          type: "multipleColors",
+        },
+      ],
+    },
+    {
+      name: {
+        de: "Regenbogen",
+        en: "Rainbow",
+      },
+      defaults: [],
+      adjustments: [
+        {
+          id: 0,
+          type: "slider",
+          name: {
+            de: "Schnelligkeit des Modus",
+            en: "Speed of the mode",
+          },
+        },
+      ],
+    },
+  ],
+  motorModes: [
+    {
+      name: {
+        de: "Hin und her",
+        en: "Back and forth",
+      },
+      defaults: [],
+      adjustments: [
+        {
+          id: 0,
+          type: "slider",
+          name: {
+            de: "Schnelligkeit von hin und her",
+            en: "Speed of the back and forth",
+          },
+        },
+      ],
+    },
+  ],
+};
+
+const devDevicesData = [
  {
-    id: 0, // deviceId
+    id: "1f21a12a-0bec-4336-99bb-df3f9fc9f537", // deviceId
+    firmwareVersion: "v1.0",
    selectedScene: 0,
    scenes: [
      {
@ -218,7 +340,7 @@ export function AppProvider({ children }) {
  // TODO: only while development
  const [isUserDeveloperModeEnabled, setIsUserDeveloperModeEnabled] =
    useState(false);
-  const [devices, setDevices] = useState(devData);
+  const [devices, setDevices] = useState(devDevicesData);
  const { i18n } = useTranslation();

  const saveAppColorScheme = async (value) => {