diff --git a/locales/de.json b/locales/de.json index 93e7a7d..094ecc1 100644 --- 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": { diff --git a/locales/en.json b/locales/en.json index c2fcf93..e05cef7 100644 --- 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": { diff --git a/src/Screens/Device/deviceTabButton.js b/src/Screens/Device/deviceTabButton.js new file mode 100644 index 0000000..659acac --- /dev/null +++ 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 ( + + + + ); +}; diff --git a/src/Screens/Device/index.js b/src/Screens/Device/index.js index fe73d7f..98e91a2 100644 --- 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 ( - setSelectedView(selectedViewNumber)} - style={[ - { - position: "absolute", - backgroundColor: appContext.appTheme.card.backgroundColor, - borderRadius: 10, - padding: 8, - }, - { top: top }, - left === true ? { left: space } : { right: space }, - ]} - > - - - ); + 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 && ( - - - - - - )} - {appContext.isUserDeveloperModeEnabled ? ( - <> - {selectedView !== 4 && ( - - )} - + ) : ( <> {selectedView !== 4 && ( @@ -107,26 +52,26 @@ export default function DeviceScreen() { )} - setSelectedView(0)} /> - setSelectedView(1)} /> - setSelectedView(2)} /> diff --git a/src/Screens/Device/modals/ActionEdits/Layers/index.js b/src/Screens/Device/modals/ActionEdits/Layers/index.js deleted file mode 100644 index f065fe7..0000000 --- a/src/Screens/Device/modals/ActionEdits/Layers/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import { Text } from "react-native"; - -export default function LayersActionEditModalContent() { - return Layers; -} diff --git a/src/Screens/Device/modals/AddSceneAction/LayerSelection/index.js b/src/Screens/Device/modals/AddSceneAction/LayerSelection/index.js index 980a3be..1480a03 100644 --- 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({ console.log("pressed action")} /> console.log("pressed action")} /> console.log("pressed action")} /> console.log("pressed action")} + /> + + console.log("pressed action")} /> console.log("pressed action")} /> + + console.log("pressed action")} + /> + + console.log("pressed action")} + /> ); } diff --git a/src/Screens/Device/modals/ChooseScene/CreateScene/index.js b/src/Screens/Device/modals/ChooseScene/CreateScene/index.js index 7af8d92..8bfcc2a 100644 --- 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 }) { { - console.log("pressed", item); - appContext.setDevices((arr) => { const newArr = [...arr]; diff --git a/src/Screens/Device/modals/ChooseScene/index.js b/src/Screens/Device/modals/ChooseScene/index.js index e97a201..20c6166 100644 --- 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")} diff --git a/src/Screens/Device/modals/EditActions/Lights/index.js b/src/Screens/Device/modals/EditActions/Lights/index.js new file mode 100644 index 0000000..2ed3169 --- /dev/null +++ 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 ( + <> + + + + + + + + + + ); +} diff --git a/src/Screens/Device/scene.js b/src/Screens/Device/scene.js index 4199e40..8114276 100644 --- 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() { <> 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() { {device.selectedScene === 0 ? ( - + ) : ( {deviceScene.actions.length === 0 ? ( - + ) : ( setModalOpenStates((prevState) => ({ ...prevState, - modalLayersActionEditIsOpen: true, + modalLayersEditActionIsOpen: true, })) } > @@ -164,17 +172,20 @@ export default function SceneView() { color: actionColor, }} /> - Aktion hinzufügen + + {t("screens.device.scenes.buttonAddAction")} + )} + setModalOpen("modalChooseSceneIsOpen", false)} header={ setModalOpen("modalChooseSceneIsOpen", false)} /> } @@ -191,7 +202,7 @@ export default function SceneView() { closeModal={() => setModalOpen("modalCreateSceneIsOpen", false)} header={ setModalOpen("modalCreateSceneIsOpen", false)} /> } @@ -209,7 +220,7 @@ export default function SceneView() { closeModal={() => setModalOpen("modalAddSceneActionIsOpen", false)} header={ setModalOpen("modalAddSceneActionIsOpen", false)} /> } @@ -227,7 +238,7 @@ export default function SceneView() { closeModal={() => setModalOpen("modalLayerSectionIsOpen", false)} header={ setModalOpen("modalLayerSectionIsOpen", false)} /> } @@ -241,17 +252,17 @@ export default function SceneView() { setModalOpen("modalLayersActionEditIsOpen", false)} + isOpen={modalOpenStates.modalLayersEditActionIsOpen} + closeModal={() => setModalOpen("modalLayersEditActionIsOpen", false)} header={ - setModalOpen("modalLayersActionEditIsOpen", false) + setModalOpen("modalLayersEditActionIsOpen", false) } /> } - content={} + content={} /> ); diff --git a/src/utils.js b/src/utils.js index 9b30155..e4faf5e 100644 --- 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) => {