stuff

2023-07-16 09:46:49 +00:00 · 2023-07-16 09:46:49 +00:00 · 3a8c8369ba
parent 784133fb60
commit 3a8c8369ba
14 changed files with 14545 additions and 79 deletions
--- a/2package-lock.json
+++ b/2package-lock.json
--- a/locales/de.json
+++ b/locales/de.json
@ -21,10 +21,12 @@
        "settingsTitle": "Einstellungen",
        "wifiStandByTitle": "WLAN im Standby",
        "wifiStandByDescription": "Die WLAN-Verbindung bleibt bestehen, auch wenn das Gerät ausgeschaltet ist. Bitte beachten Sie, dass dies zu einem erhöhten Stromverbrauch führen kann.",
-        "deviceInformationTitle": "Geräteinformationen",
-        "deviceModelTitle": "Gerätemodell",
-        "deviceFirmwareVersionTitle": "Firmware Version",
-        "deviceLastUpdatedTitle": "Letzte Aktualisierung"
+        "deviceInformationText": "Geräteinformationen",
+        "deviceNameText": "Gerätename",
+        "deviceModelText": "Gerätemodell",
+        "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."
      }
    },
    "settings": {
--- a/locales/en.json
+++ b/locales/en.json
@ -21,10 +21,12 @@
        "settingsTitle": "Settings",
        "wifiStandByTitle": "WLAN in standby",
        "wifiStandByDescription": "The WLAN connection remains established even if the device is switched off. Please note that this can lead to increased power consumption.",
-        "deviceInformationTitle": "Device information",
-        "deviceModelTitle": "Device model",
-        "deviceFirmwareVersionTitle": "Firmware Version",
-        "deviceLastUpdatedTitle": "Last updated"
+        "deviceInformationText": "Device information",
+        "deviceNameText": "Device name",
+        "deviceModelText": "Device model",
+        "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."
      }
    },
    "settings": {
--- a/package-lock.json
+++ b/package-lock.json
@ -14,6 +14,7 @@
        "@react-navigation/native": "^6.1.7",
        "@react-navigation/native-stack": "^6.9.13",
        "expo": "~48.0.18",
+        "expo-haptics": "~12.2.1",
        "expo-status-bar": "~1.4.4",
        "i18next": "^23.2.11",
        "i18next-browser-languagedetector": "^7.1.0",
@ -7135,6 +7136,14 @@
        "expo": "*"
      }
    },
+    "node_modules/expo-haptics": {
+      "version": "12.2.1",
+      "resolved": "https://registry.npmjs.org/expo-haptics/-/expo-haptics-12.2.1.tgz",
+      "integrity": "sha512-XRZtmIQi901Q4+/cZnVrULRFOqShsgCuSP0SCbVEhnq8sK0OA4jgun12O93Pu5aGvTyoqsAcIArE8tX+8AEqRA==",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
    "node_modules/expo-keep-awake": {
      "version": "12.0.1",
      "resolved": "https://registry.npmjs.org/expo-keep-awake/-/expo-keep-awake-12.0.1.tgz",
@ -7632,19 +7641,6 @@
      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
    },
-    "node_modules/fsevents": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
    "node_modules/function-bind": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
--- a/package.json
+++ b/package.json
@ -27,7 +27,8 @@
    "react-native-safe-area-context": "4.5.0",
    "react-native-screens": "~3.20.0",
    "react-native-tab-view": "^3.5.2",
-    "reanimated-color-picker": "^2.3.1"
+    "reanimated-color-picker": "^2.3.1",
+    "expo-haptics": "~12.2.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
--- a/src/Components/Card/index.js
+++ b/src/Components/Card/index.js
@ -1,6 +1,6 @@
 import { useContext } from "react";
 import { View } from "react-native";
-import { AppContext } from "../../utils";
+import { AppContext, AppStyles } from "../../utils";

 export default function Card({ children }) {
  const appContext = useContext(AppContext);
@ -9,18 +9,20 @@ export default function Card({ children }) {
    <View
      style={{
        paddingTop: 10,
-        paddingLeft: 20,
-        paddingRight: 20,
+        paddingLeft: 10,
+        paddingRight: 10,
        paddingBottom: 10,
      }}
    >
      <View
-        style={{
-          borderRadius: 20,
-          backgroundColor: appContext.appTheme.card.backgroundColor,
-          elevation: 5,
-          padding: 20,
-        }}
+        style={[
+          {
+            borderRadius: 20,
+            backgroundColor: appContext.appTheme.card.backgroundColor,
+            padding: 20,
+          },
+          AppStyles.Shadow,
+        ]}
      >
        {children}
      </View>
--- a/src/Components/PickerModal/index.js
+++ b/src/Components/PickerModal/index.js
@ -178,3 +178,85 @@ export default function PickerModal({
    </Modal>
  );
 }
+
+export function TextInputModal({
+  isOpen,
+  setIsOpen,
+  onTextInputSave,
+  modalTitle,
+  inputTitle,
+  inputDescription,
+}) {
+  const appContext = useContext(AppContext);
+
+  const closeModal = () => setIsOpen(false);
+
+  return (
+    <Modal
+      visible={isOpen}
+      animationType="slide"
+      onRequestClose={() => closeModal()}
+    >
+      <View
+        style={{
+          flex: 1,
+          backgroundColor: appContext.appTheme.backgroundColor,
+        }}
+      >
+        <View
+          style={{
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+            marginTop: 20,
+          }}
+        >
+          <TouchableOpacity onPress={() => closeModal()}>
+            <MyIcon
+              name="chevron-left"
+              size={24}
+              style={{ marginLeft: 20 }}
+              color={appContext.appTheme.icon}
+            />
+          </TouchableOpacity>
+          <Text style={AppStyles.typography20}>{modalTitle}</Text>
+          <TouchableOpacity
+            onPress={() => {
+              closeModal();
+              onTextInputSave();
+            }}
+          >
+            <MyIcon
+              name="check"
+              size={24}
+              style={{ marginRight: 20 }}
+              color={appContext.appTheme.colors.primary}
+            />
+          </TouchableOpacity>
+        </View>
+
+        <View
+          style={{
+            flex: 1,
+            padding: 20,
+          }}
+        >
+          <Text style={{ color: "gray" }}>{inputTitle}</Text>
+          <TextInput
+            style={{
+              height: 40,
+              borderBottomWidth: 1,
+              borderColor: appContext.appTheme.textInputBottomColor,
+            }}
+            value="Turtle"
+          />
+          <Text
+            style={[AppStyles.typography14, { color: "gray", marginTop: 6 }]}
+          >
+            {inputDescription}
+          </Text>
+        </View>
+      </View>
+    </Modal>
+  );
+}
--- a/src/Components/Switch/index.js
+++ b/src/Components/Switch/index.js
@ -1,6 +1,7 @@
 import { useContext } from "react";
 import { Switch } from "react-native";
 import { AppContext } from "../../utils";
+import * as Haptics from "expo-haptics";

 export default function MySwitch({ style, value, onValueChange }) {
  const appContext = useContext(AppContext);
--- a/src/Screens/Device/colorScenes.js
+++ b/src/Screens/Device/colorScenes.js
@ -0,0 +1,86 @@
+import { Dimensions, Text, View } from "react-native";
+import Card from "../../Components/Card";
+import MyIcon from "../../Components/Icon";
+import { useContext } from "react";
+import { AppContext } from "../../utils";
+import { TouchableOpacity } from "react-native-gesture-handler";
+
+const windowDimensions = Dimensions.get("window");
+const screenDimensions = Dimensions.get("screen");
+
+export default function ColorScenesView() {
+  const appContext = useContext(AppContext);
+
+  console.log("wD", windowDimensions, screenDimensions, screenDimensions.width);
+
+  const Leds = ({ style }) => {
+    let elements = [];
+
+    for (let i = 0; i < 16; i++) {
+      elements.push(
+        <View
+          key={i}
+          style={{
+            width: windowDimensions.width / 16 - 5.7,
+            height: windowDimensions.width / 16 - 5.7,
+            backgroundColor: "lime",
+            borderRadius: 4,
+          }}
+        />
+      );
+    }
+
+    return (
+      <View
+        style={[
+          { flexDirection: "row", gap: 2, justifyContent: "center" },
+          style,
+        ]}
+      >
+        {elements}
+      </View>
+    );
+  };
+
+  return (
+    <Card>
+      <Text style={{ textAlign: "center" }}>Rückseite</Text>
+      <Leds />
+      <Leds style={{ marginTop: 2 }} />
+      <Leds style={{ marginTop: 2 }} />
+      <Leds style={{ marginTop: 2 }} />
+      <Text style={{ textAlign: "center" }}>Vorderseite</Text>
+
+      <View style={{ flexDirection: "row" }}>
+        <TouchableOpacity onPress={() => console.log("up")}>
+          <MyIcon
+            name="arrow-up-bold-box"
+            size={36}
+            color={appContext.appTheme.icon}
+          />
+        </TouchableOpacity>
+        <TouchableOpacity onPress={() => console.log("down")}>
+          <MyIcon
+            name="arrow-down-bold-box"
+            size={36}
+            color={appContext.appTheme.icon}
+          />
+        </TouchableOpacity>
+        <TouchableOpacity onPress={() => console.log("left")}>
+          <MyIcon
+            name="arrow-left-bold-box"
+            size={36}
+            color={appContext.appTheme.icon}
+          />
+        </TouchableOpacity>
+        <TouchableOpacity onPress={() => console.log("right")}>
+          <MyIcon
+            name="arrow-right-bold-box"
+            size={36}
+            color={appContext.appTheme.icon}
+          />
+        </TouchableOpacity>
+      </View>
+    </Card>
+  );
+}
--- a/src/Screens/Device/index.js
+++ b/src/Screens/Device/index.js
@ -16,6 +16,7 @@ import MyIcon from "../../Components/Icon";

 const MotorView = lazy(() => import("./motor"));
 const SettingsView = lazy(() => import("./settings"));
+const ColorScenesView = lazy(() => import("./colorScenes"));

 const spaceToSide = 10; // left and right
 const top = 35;
@ -37,6 +38,8 @@ export default function DeviceScreen() {
        return <MotorView />;
      case 3:
        return <SettingsView />;
+      case 4:
+        return <ColorScenesView />;
      default:
        <Text>Not found</Text>;
    }
--- a/src/Screens/Device/light.js
+++ b/src/Screens/Device/light.js
@ -15,8 +15,13 @@ import ColorPicker, {
  InputWidget,
  HueCircular,
  Panel1,
+  Panel3,
+  BrightnessSlider,
+  OpacitySlider,
+  HueSlider,
+  SaturationSlider,
 } from "reanimated-color-picker";
-import { AppContext, AppStyles } from "../../utils";
+import { AppContext, AppStyles, IsPlatformIos } from "../../utils";
 import Card from "../../Components/Card";
 import MySwitch from "../../Components/Switch";
 import MyIcon from "../../Components/Icon";
@ -37,7 +42,7 @@ function ColorLayer({ layerNumber, sharedColor, selected, onPress }) {
    };
  });

-  const contrastColor = useAnimatedStyle(() => {
+  const contrastColorText = useAnimatedStyle(() => {
    const getContrastRatio = (hexColor) => {
      const hex = hexColor.replace("#", "");
      const r = parseInt(hex.substr(0, 2), 16);
@ -49,11 +54,28 @@ function ColorLayer({ layerNumber, sharedColor, selected, onPress }) {

    let obj = {};

-    obj["color"] = getContrastRatio(sharedColor.value);
+    obj.color = getContrastRatio(sharedColor.value);
+
+    return obj;
+  });
+
+  const contrastColorBorder = useAnimatedStyle(() => {
+    const getContrastRatio = (hexColor) => {
+      const hex = hexColor.replace("#", "");
+      const r = parseInt(hex.substr(0, 2), 16);
+      const g = parseInt(hex.substr(2, 2), 16);
+      const b = parseInt(hex.substr(4, 2), 16);
+      const luminance = (r * 0.299 + g * 0.587 + b * 0.114) / 255;
+      return luminance > 0.5 ? "#000000" : "#ffffff";
+    };
+
+    let obj = {};
+
+    //obj.color = getContrastRatio(sharedColor.value);

    if (selected === true) {
-      obj.borderColor = obj.color;
-      obj.borderBottomWidth = 4;
+      obj.borderColor = getContrastRatio(sharedColor.value);
+      obj.borderBottomWidth = 2;
    } else {
      obj.borderBottomWidth = 0;
    }
@ -87,11 +109,19 @@ function ColorLayer({ layerNumber, sharedColor, selected, onPress }) {
          backgroundColorStyle,
        ]}
      >
-        <Animated.Text
-          style={[{ fontSize: 16, fontWeight: "bold" }, contrastColor]}
-        >
-          {layerNumber}
-        </Animated.Text>
+        <Animated.View style={contrastColorBorder}>
+          <Animated.Text
+            style={[
+              {
+                fontSize: 16,
+                fontWeight: "bold",
+              },
+              contrastColorText,
+            ]}
+          >
+            {layerNumber}
+          </Animated.Text>
+        </Animated.View>
      </Animated.View>
    </TouchableHighlight>
  );
@ -141,11 +171,14 @@ export default function LightView() {
      <Card>
        <TouchableOpacity onPress={() => setModalDeviceColorModeVisible(true)}>
          <View
-            style={{
-              flexDirection: "row",
-              alignItems: "center",
-              justifyContent: "space-between",
-            }}
+            style={[
+              {
+                flexDirection: "row",
+                alignItems: "center",
+                justifyContent: "space-between",
+              },
+              IsPlatformIos() && { marginBottom: 10 },
+            ]}
          >
            <View>
              <Text style={{ color: appContext.appTheme.text }}>
@ -180,7 +213,12 @@ export default function LightView() {
          })}
        />

-        <View style={{ flexDirection: "row", alignItems: "center" }}>
+        <View
+          style={[
+            { flexDirection: "row", alignItems: "center" },
+            IsPlatformIos() && { gap: 10 },
+          ]}
+        >
          <MySwitch
            value={switchState}
            onValueChange={(e) => setSwitchState(e)}
@ -210,8 +248,7 @@ export default function LightView() {
        <Animated.View>
          <ColorPicker
            value={selectedColorPickerColor.value}
-            sliderThickness={25}
-            thumbSize={27}
+            thumbSize={26}
            onChange={onColorSelect}
          >
            <View
@ -280,16 +317,14 @@ export default function LightView() {
              />
            </TouchableOpacity>

-            <View style={{ marginLeft: 30, marginRight: 30 }}>
-              <HueCircular
-                containerStyle={{
-                  justifyContent: "center",
-                  backgroundColor: appContext.appTheme.backgroundColor,
-                }}
-                thumbShape="pill"
-              >
-                <Panel1 style={styles.panelStyle} />
-              </HueCircular>
+            <View
+              style={{ flexDirection: "row", justifyContent: "space-evenly" }}
+            >
+              <Panel3 style={{ width: 200 }} />
+
+              <BrightnessSlider style={styles.sliderStyle} vertical reverse />
+
+              <OpacitySlider style={styles.sliderStyle} vertical reverse />
            </View>

            <Swatches
@ -317,17 +352,25 @@ export default function LightView() {
      </Card>

      <Card>
-        <View style={{ flexDirection: "row", alignItems: "center" }}>
-          <MyIcon
-            name="brightness-6"
-            size={24}
-            color={appContext.appTheme.icon}
-          />
-          <Text style={{ color: appContext.appTheme.text, marginLeft: 10 }}>
-            Auto brightness
-          </Text>
+        <View
+          style={{
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+          }}
+        >
+          <View style={{ flexDirection: "row", alignItems: "center" }}>
+            <MyIcon
+              name="brightness-6"
+              size={24}
+              color={appContext.appTheme.icon}
+            />
+            <Text style={{ color: appContext.appTheme.text, marginLeft: 10 }}>
+              Auto brightness
+            </Text>
+          </View>
+
          <MySwitch
-            style={{ flex: 1 }}
            value={switchState}
            onValueChange={(e) => setSwitchState(e)}
          />
@ -416,6 +459,7 @@ const styles = StyleSheet.create({
  sliderStyle: {
    borderRadius: 20,
    marginTop: 20,
+    width: 10,
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
--- a/src/Screens/Device/motor.js
+++ b/src/Screens/Device/motor.js
@ -3,7 +3,7 @@ import Card from "../../Components/Card";
 import { useContext, useState } from "react";
 import MySwitch from "../../Components/Switch";
 import MySlider from "../../Components/Slider";
-import { AppContext } from "../../utils";
+import { AppContext, IsPlatformIos } from "../../utils";
 import MyIcon from "../../Components/Icon";

 export default function MotorView() {
@ -12,7 +12,12 @@ export default function MotorView() {

  return (
    <Card>
-      <View style={{ flexDirection: "row", alignItems: "center" }}>
+      <View
+        style={[
+          { flexDirection: "row", alignItems: "center" },
+          IsPlatformIos() && { gap: 10 },
+        ]}
+      >
        <MySwitch
          value={switchState}
          onValueChange={(e) => setSwitchState(e)}
--- a/src/Screens/Device/settings.js
+++ b/src/Screens/Device/settings.js
@ -1,17 +1,18 @@
-import { Text, View } from "react-native";
+import { Text, TouchableOpacity, View } from "react-native";
 import Card from "../../Components/Card";
 import { useContext, useState } from "react";
 import { AppContext, AppStyles } from "../../utils";
 import { Divider } from "../../Components/Divider";
 import { useTranslation } from "react-i18next";
 import MySwitch from "../../Components/Switch";
+import MyIcon from "../../Components/Icon";
+import { TextInputModal } from "../../Components/PickerModal";

 export default function SettingsView() {
  const appContext = useContext(AppContext);
  const { t } = useTranslation();
-
+  const [modalTextInputVisible, setModalTextInputVisible] = useState(false);
  const [switchState, setSwitchState] = useState(false);
-  const [sliderValue, setSliderValue] = useState(0);

  return (
    <>
@ -70,14 +71,58 @@ export default function SettingsView() {
            },
          ]}
        >
-          {t("screens.device.settings.deviceInformationTitle")}
+          {t("screens.device.settings.deviceInformationText")}
        </Text>
+
+        <View
+          style={{
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+          }}
+        >
+          <View>
+            <Text
+              style={
+                ([AppStyles.typography16], { color: appContext.appTheme.text })
+              }
+            >
+              {t("screens.device.settings.deviceNameText")}
+            </Text>
+            <Text
+              style={
+                ([AppStyles.typography14],
+                { color: appContext.appTheme.textSecondary })
+              }
+            >
+              Turtle
+            </Text>
+          </View>
+
+          <TouchableOpacity onPress={() => setModalTextInputVisible(true)}>
+            <MyIcon name="pencil" size={18} color={appContext.appTheme.icon} />
+          </TouchableOpacity>
+        </View>
+
+        <TextInputModal
+          isOpen={modalTextInputVisible}
+          setIsOpen={setModalTextInputVisible}
+          onTextInputSave={() => console.log("save")}
+          modalTitle={t("screens.device.settings.deviceNameText")}
+          inputTitle={t("screens.device.settings.deviceNameText")}
+          inputDescription={t(
+            "screens.device.settings.modalTextInputDeviceNameDescription"
+          )}
+        />
+
+        <Divider />
+
        <Text
          style={
            ([AppStyles.typography16], { color: appContext.appTheme.text })
          }
        >
-          {t("screens.device.settings.deviceModelTitle")}
+          {t("screens.device.settings.deviceModelText")}
        </Text>
        <Text
          style={
@ -87,13 +132,15 @@ export default function SettingsView() {
        >
          Shimmex Aurora
        </Text>
+
        <Divider />
+
        <Text
          style={
            ([AppStyles.typography16], { color: appContext.appTheme.text })
          }
        >
-          {t("screens.device.settings.deviceFirmwareVersionTitle")}
+          {t("screens.device.settings.deviceFirmwareVersionText")}
        </Text>
        <Text
          style={
@ -103,13 +150,15 @@ export default function SettingsView() {
        >
          1.0.1
        </Text>
+
        <Divider />
+
        <Text
          style={
            ([AppStyles.typography16], { color: appContext.appTheme.text })
          }
        >
-          {t("screens.device.settings.deviceLastUpdatedTitle")}
+          {t("screens.device.settings.deviceLastUpdatedText")}
        </Text>
        <Text
          style={
--- a/src/utils.js
+++ b/src/utils.js
@ -1,7 +1,7 @@
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { createContext, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Appearance, StyleSheet } from "react-native";
+import { Appearance, Platform, StyleSheet } from "react-native";

 export const Constants = {
  defaultLanguage: "de",
@ -31,6 +31,13 @@ export const AppStyles = StyleSheet.create({
    fontSize: 14,
    lineHeight: 20,
  },
+  Shadow: {
+    elevation: 2, // only android
+    shadowColor: "#000", // only ios
+    shadowOffset: { width: 0, height: 1 }, // only ios
+    shadowOpacity: 0.2, // only ios
+    shadowRadius: 1, // only ios
+  },
 });

 const DarkAppTheme = {
@ -206,3 +213,7 @@ export function AppProvider({ children }) {
    </AppContext.Provider>
  );
 }
+
+export function IsPlatformIos() {
+  return Platform.OS === "ios";
+}