Jannex
/
expo-app
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

only show dots if a scene is selected

main
alex 2023-08-04 22:16:16 +00:00
parent 69dad08c0a
commit 7ff264d494
1 changed files with 122 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

213
src/Screens/Device/scene.js
View File

@ -44,45 +44,23 @@ export default function SceneView({ navigation }) {
setDevice(GetDevice(appContext.devices)); setDevice(GetDevice(appContext.devices));
if (device !== undefined) { if (device !== undefined) {
if (device.selectedScene !== null) { navigation.setOptions({
navigation.setOptions({ headerRight: () =>
headerRight: () => ( device.selectedScene !== "" ? (
<MyIconButton <MyIconButton
iconName="dots-vertical" iconName="dots-vertical"
iconSize={24} iconSize={24}
style={AppStyles.headerNavigationIcons} style={AppStyles.headerNavigationIcons}
onPress={() => setIsDotsModalOpen(true)} onPress={() => setIsDotsModalOpen(true)}
/> />
), ) : null,
}); });
}
} }
}, [device]) }, [device])
); );
if (device === undefined) return <></>; 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( const deviceSceneActions = appContext.deviceSceneActions.filter(
(a) => a.sceneId === device.selectedScene (a) => a.sceneId === device.selectedScene
); );
@ -142,69 +120,13 @@ export default function SceneView({ navigation }) {
console.log("item", item); console.log("item", item);
return ( return (
<View style={{ marginLeft: 10, marginRight: 10 }}> <ActionListItem
<TouchableOpacity navigation={navigation}
onPress={() => device={device}
navigation.navigate("modalLayersEditAction", { item={item}
actionId: item.actionId, appThemeText={appContext.appTheme.text}
deviceFirmwareVersion: device.firmware.version, appThemeTextSecondary={appContext.appTheme.textSecondary}
}) />
}
>
<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>
); );
}} }}
/> />
@ -227,7 +149,6 @@ export default function SceneView({ navigation }) {
{ {
icon: "trash-can", icon: "trash-can",
label: "Delete scene", label: "Delete scene",
disabled: GetDevice(appContext.devices).selectedScene === "",
onPress: () => { onPress: () => {
appContext.setDeviceScenes((scenes) => appContext.setDeviceScenes((scenes) =>
scenes.filter( 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;
}