From 7ff264d494d09151b8860f4654dd0f84118b712f Mon Sep 17 00:00:00 2001
From: alex <alex@roese.dev>
Date: Fri, 4 Aug 2023 22:16:16 +0000
Subject: [PATCH] only show dots if a scene is selected

---
 src/Screens/Device/scene.js | 213 +++++++++++++++++++++---------------
 1 file changed, 122 insertions(+), 91 deletions(-)

diff --git a/src/Screens/Device/scene.js b/src/Screens/Device/scene.js
index 1527bdf..1e45be0 100644
--- a/src/Screens/Device/scene.js
+++ b/src/Screens/Device/scene.js
@@ -44,45 +44,23 @@ export default function SceneView({ navigation }) {
       setDevice(GetDevice(appContext.devices));
 
       if (device !== undefined) {
-        if (device.selectedScene !== null) {
-          navigation.setOptions({
-            headerRight: () => (
+        navigation.setOptions({
+          headerRight: () =>
+            device.selectedScene !== "" ? (
               <MyIconButton
                 iconName="dots-vertical"
                 iconSize={24}
                 style={AppStyles.headerNavigationIcons}
                 onPress={() => setIsDotsModalOpen(true)}
               />
-            ),
-          });
-        }
+            ) : null,
+        });
       }
     }, [device])
   );
 
   if (device === undefined) return <></>;
 
-  const getActionTypeIcon = (actionType) => {
-    let iconName = "";
-
-    switch (actionType) {
-      case Constants.actionType.layers:
-        iconName = "lightbulb-on-outline";
-        break;
-      case Constants.actionType.ambilight:
-        iconName = "television-ambient-light";
-        break;
-      case Constants.actionType.motor:
-        iconName = "axis-z-rotate-counterclockwise";
-        break;
-      default:
-        iconName = "help";
-        break;
-    }
-
-    return <MyIcon name={iconName} size={24} />;
-  };
-
   const deviceSceneActions = appContext.deviceSceneActions.filter(
     (a) => a.sceneId === device.selectedScene
   );
@@ -142,69 +120,13 @@ export default function SceneView({ navigation }) {
               console.log("item", item);
 
               return (
-                <View style={{ marginLeft: 10, marginRight: 10 }}>
-                  <TouchableOpacity
-                    onPress={() =>
-                      navigation.navigate("modalLayersEditAction", {
-                        actionId: item.actionId,
-                        deviceFirmwareVersion: device.firmware.version,
-                      })
-                    }
-                  >
-                    <View
-                      style={{
-                        flexDirection: "row",
-                        alignItems: "center",
-                        justifyContent: "space-between",
-                      }}
-                    >
-                      <View
-                        style={{ flexDirection: "row", alignItems: "center" }}
-                      >
-                        {getActionTypeIcon(item.type)}
-                        <View style={{ marginLeft: 12 }}>
-                          <Text
-                            style={{
-                              color: appContext.appTheme.text,
-                            }}
-                          >
-                            Rainbow
-                          </Text>
-
-                          <View
-                            style={{
-                              flexDirection: "row",
-                              alignItems: "center",
-                            }}
-                          >
-                            <Text
-                              style={{
-                                color: appContext.appTheme.textSecondary,
-                              }}
-                            >
-                              Set to
-                            </Text>
-
-                            <MyColorSwatch
-                              style={{ marginLeft: 6 }}
-                              size={16}
-                              backgroundColor={"red"}
-                            />
-                            <MyColorSwatch
-                              size={16}
-                              backgroundColor={"orange"}
-                            />
-                            <MyColorSwatch size={16} backgroundColor={"blue"} />
-                          </View>
-                        </View>
-                      </View>
-
-                      <MyIcon name="menu" size={20} />
-                    </View>
-
-                    <Divider />
-                  </TouchableOpacity>
-                </View>
+                <ActionListItem
+                  navigation={navigation}
+                  device={device}
+                  item={item}
+                  appThemeText={appContext.appTheme.text}
+                  appThemeTextSecondary={appContext.appTheme.textSecondary}
+                />
               );
             }}
           />
@@ -227,7 +149,6 @@ export default function SceneView({ navigation }) {
           {
             icon: "trash-can",
             label: "Delete scene",
-            disabled: GetDevice(appContext.devices).selectedScene === "",
             onPress: () => {
               appContext.setDeviceScenes((scenes) =>
                 scenes.filter(
@@ -265,3 +186,113 @@ export default function SceneView({ navigation }) {
     </>
   );
 }
+
+function ActionListItem({
+  navigation,
+  device,
+  item,
+  appThemeText,
+  appThemeTextSecondary,
+}) {
+  return (
+    <View style={{ marginLeft: 10, marginRight: 10 }}>
+      <TouchableOpacity
+        onPress={() =>
+          navigation.navigate("modalLayersEditAction", {
+            actionId: item.actionId,
+            deviceFirmwareVersion: device.firmware.version,
+          })
+        }
+      >
+        <View
+          style={{
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+          }}
+        >
+          {console.log("itemtype", item.type)}
+          <View style={{ flexDirection: "row", alignItems: "center" }}>
+            <MyIcon name={ActionTypeIconName(item.type)} size={24} />
+
+            <View style={{ marginLeft: 12 }}>
+              <Text
+                style={{
+                  color: appThemeText,
+                }}
+              >
+                {item.modeId === "" ? "???" : item.modeId}
+              </Text>
+
+              <View
+                style={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                }}
+              >
+                <Text
+                  style={{
+                    color: appThemeTextSecondary,
+                  }}
+                >
+                  Set to
+                </Text>
+
+                <MyColorSwatch
+                  style={{ marginLeft: 6 }}
+                  size={16}
+                  backgroundColor={"red"}
+                />
+                <MyColorSwatch size={16} backgroundColor={"orange"} />
+                <MyColorSwatch size={16} backgroundColor={"blue"} />
+              </View>
+            </View>
+          </View>
+
+          <MyIcon name="menu" size={20} />
+        </View>
+
+        <Divider />
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+export function ActionTypeIconName(actionType) {
+  let iconName = "";
+
+  switch (actionType) {
+    case Constants.actionType.layers:
+      iconName = "lightbulb-on-outline";
+      break;
+    case Constants.actionType.ambilight:
+      iconName = "television-ambient-light";
+      break;
+    case Constants.actionType.motor:
+      iconName = "axis-z-rotate-counterclockwise";
+      break;
+    case Constants.actionType.waitXSeconds:
+      iconName = "timer-sand";
+      break;
+    case Constants.actionType.waitUntilTimeX:
+      iconName = "clock-time-eight-outline";
+      break;
+    case Constants.actionType.stop:
+      iconName = "pause-octagon-outline";
+      break;
+    case Constants.actionType.timeControl:
+      iconName = "timer-cog";
+      break;
+    case Constants.actionType.waitForConfirmationWithKey:
+      iconName = "gesture-tap-button";
+      break;
+    case Constants.actionType.jumpToScene:
+      iconName = "debug-step-over";
+      break;
+    default:
+      iconName = "help";
+      break;
+  }
+
+  return iconName;
+}