510 lines
11 KiB
TypeScript
510 lines
11 KiB
TypeScript
import { ContextMenu, Host, Button as SwiftUIButton } from "@expo/ui/swift-ui";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
import { SymbolView } from "expo-symbols";
|
|
import React, { useCallback, useEffect, useState } from "react";
|
|
import {
|
|
ActivityIndicator,
|
|
Alert,
|
|
AppState,
|
|
FlatList,
|
|
RefreshControl,
|
|
StyleSheet,
|
|
Text,
|
|
TouchableOpacity,
|
|
View,
|
|
} from "react-native";
|
|
import { useColorScheme } from "../../hooks/use-color-scheme";
|
|
import api from "../../src/services/api";
|
|
import { Device } from "../../src/types";
|
|
import * as Burnt from "burnt";
|
|
|
|
export default function DeviceListScreen() {
|
|
const colorScheme = useColorScheme() ?? "light";
|
|
const isDark = colorScheme === "dark";
|
|
const bgColor = isDark ? "#0b0b0d" : "#f5f5f5";
|
|
const cardBg = isDark ? "#1c1c1e" : "#fff";
|
|
const textColor = isDark ? "#ffffff" : "#333333";
|
|
const subTextColor = isDark ? "#c6c6c8" : "#666666";
|
|
const activityColor = isDark ? "#0A84FF" : "#007AFF";
|
|
|
|
const [devices, setDevices] = useState<Device[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [refreshing, setRefreshing] = useState(false);
|
|
|
|
const fetchDevices = useCallback(async (showLoading = false) => {
|
|
try {
|
|
if (showLoading) setIsLoading(true);
|
|
const data = await api.getDevices();
|
|
setDevices(data);
|
|
} catch (error: any) {
|
|
// For background/periodic refreshes, avoid interruptive alerts
|
|
if (showLoading) {
|
|
Alert.alert("Error", error.message || "Failed to load devices");
|
|
}
|
|
} finally {
|
|
if (showLoading) setIsLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
fetchDevices(true);
|
|
}, [fetchDevices]);
|
|
|
|
useEffect(() => {
|
|
let intervalId: number | null = null;
|
|
|
|
const startPolling = () => {
|
|
if (intervalId !== null) return;
|
|
intervalId = setInterval(() => {
|
|
fetchDevices(false);
|
|
}, 10000) as unknown as number;
|
|
};
|
|
|
|
const stopPolling = () => {
|
|
if (intervalId !== null) {
|
|
clearInterval(intervalId);
|
|
intervalId = null;
|
|
}
|
|
};
|
|
|
|
// Start polling while app is active; pause when backgrounded
|
|
startPolling();
|
|
|
|
const onAppStateChange = (nextAppState: string) => {
|
|
if (nextAppState === "active") {
|
|
startPolling();
|
|
} else {
|
|
stopPolling();
|
|
}
|
|
};
|
|
|
|
const subscription = AppState.addEventListener("change", onAppStateChange);
|
|
|
|
return () => {
|
|
stopPolling();
|
|
subscription.remove();
|
|
};
|
|
}, [fetchDevices]);
|
|
|
|
const onRefresh = async () => {
|
|
setRefreshing(true);
|
|
await fetchDevices(false);
|
|
setRefreshing(false);
|
|
};
|
|
|
|
const handleWake = async (device: Device) => {
|
|
try {
|
|
await api.wakeDevice(device.id);
|
|
Burnt.toast({
|
|
title: "Success",
|
|
preset: "done",
|
|
message: `Waking ${device.name} up.`,
|
|
});
|
|
} catch (error: any) {
|
|
Burnt.toast({
|
|
title: "Error",
|
|
preset: "error",
|
|
message: error.message || `Failed to wake up ${device.name}.`,
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleSleep = async (device: Device) => {
|
|
Alert.alert("Confirm", `Send ${device.name} to sleep?`, [
|
|
{ text: "Cancel", style: "cancel" },
|
|
{
|
|
text: "Sleep",
|
|
style: "destructive",
|
|
onPress: async () => {
|
|
try {
|
|
await api.sleepDevice(device.id);
|
|
Burnt.toast({
|
|
title: "Success",
|
|
preset: "done",
|
|
message: `Sending ${device.name} to sleep.`,
|
|
});
|
|
} catch (error: any) {
|
|
Burnt.toast({
|
|
title: "Error",
|
|
preset: "error",
|
|
message: error.message || `Failed to send ${device.name} to sleep.`,
|
|
});
|
|
}
|
|
},
|
|
},
|
|
]);
|
|
};
|
|
|
|
const handleReboot = async (device: Device) => {
|
|
Alert.alert("Confirm", `Reboot ${device.name}?`, [
|
|
{ text: "Cancel", style: "cancel" },
|
|
{
|
|
text: "Reboot",
|
|
style: "destructive",
|
|
onPress: async () => {
|
|
try {
|
|
await api.rebootDevice(device.id);
|
|
Burnt.toast({
|
|
title: "Success",
|
|
preset: "done",
|
|
message: `Rebooting ${device.name}.`,
|
|
});
|
|
} catch (error: any) {
|
|
Burnt.toast({
|
|
title: "Error",
|
|
preset: "error",
|
|
message: error.message || `Failed to reboot ${device.name}`,
|
|
});
|
|
}
|
|
},
|
|
},
|
|
]);
|
|
};
|
|
|
|
const handleShutdown = async (device: Device) => {
|
|
Alert.alert(
|
|
"Confirm Shutdown",
|
|
`Shutdown ${device.name}? This cannot be undone.`,
|
|
[
|
|
{ text: "Cancel", style: "cancel" },
|
|
{
|
|
text: "Shutdown",
|
|
style: "destructive",
|
|
onPress: async () => {
|
|
try {
|
|
await api.shutdownDevice(device.id);
|
|
Burnt.toast({
|
|
title: "Success",
|
|
preset: "done",
|
|
message: `Shutting down ${device.name}.`,
|
|
});
|
|
} catch (error: any) {
|
|
Burnt.toast({
|
|
title: "Error",
|
|
preset: "error",
|
|
message: error.message || `Failed to shut down ${device.name}.`,
|
|
});
|
|
}
|
|
},
|
|
},
|
|
]
|
|
);
|
|
};
|
|
|
|
const handleDelete = (device: Device) => {
|
|
Alert.alert("Delete Device", `Delete "${device.name}"?`, [
|
|
{
|
|
text: "Cancel",
|
|
style: "cancel",
|
|
onPress: () => {
|
|
// Close alert
|
|
},
|
|
},
|
|
{
|
|
text: "Delete",
|
|
style: "destructive",
|
|
onPress: async () => {
|
|
try {
|
|
await api.deleteDevice(device.id);
|
|
Burnt.toast({
|
|
title: "Success",
|
|
preset: "done",
|
|
message: `Deleted ${device.name} successfully.`,
|
|
});
|
|
fetchDevices(false);
|
|
} catch (error: any) {
|
|
Burnt.toast({
|
|
title: "Error",
|
|
preset: "error",
|
|
message: error.message || `Failed to delete ${device.name}.`,
|
|
});
|
|
}
|
|
},
|
|
},
|
|
]);
|
|
};
|
|
|
|
const getStatusColor = (status: string) => {
|
|
switch (status?.toLowerCase()) {
|
|
case "online":
|
|
return "#4CAF50";
|
|
case "offline":
|
|
return "#f44336";
|
|
default:
|
|
return "#ff9800";
|
|
}
|
|
};
|
|
|
|
const ActionIcon = ({
|
|
name,
|
|
symbolName,
|
|
color,
|
|
onPress,
|
|
fallbackName,
|
|
}: {
|
|
name: string;
|
|
symbolName: string;
|
|
color: string;
|
|
onPress: () => void;
|
|
fallbackName?: string;
|
|
}) => (
|
|
<TouchableOpacity
|
|
style={styles.actionIconContainer}
|
|
onPress={onPress}
|
|
accessibilityLabel={name}
|
|
activeOpacity={0.75}
|
|
>
|
|
<SymbolView
|
|
name={symbolName as any}
|
|
size={20}
|
|
tintColor={color}
|
|
type="monochrome"
|
|
fallback={
|
|
<Ionicons
|
|
name={(fallbackName || "ellipse") as any}
|
|
size={20}
|
|
color={color}
|
|
/>
|
|
}
|
|
style={styles.actionIcon}
|
|
/>
|
|
</TouchableOpacity>
|
|
);
|
|
|
|
const renderDevice = ({ item }: { item: Device }) => (
|
|
<Host>
|
|
<ContextMenu activationMethod="longPress">
|
|
<ContextMenu.Items>
|
|
<SwiftUIButton
|
|
systemImage="trash"
|
|
role="destructive"
|
|
onPress={() => handleDelete(item)}
|
|
>
|
|
Delete Device
|
|
</SwiftUIButton>
|
|
</ContextMenu.Items>
|
|
<ContextMenu.Trigger>
|
|
<View
|
|
style={[
|
|
styles.deviceCard,
|
|
{
|
|
backgroundColor: cardBg,
|
|
shadowColor: isDark ? "rgba(0,0,0,0.6)" : "#000",
|
|
},
|
|
]}
|
|
>
|
|
<View>
|
|
<View style={styles.deviceHeader}>
|
|
<View style={styles.deviceInfo}>
|
|
<Text style={[styles.deviceName, { color: textColor }]}>
|
|
{item.name}
|
|
</Text>
|
|
<Text style={[styles.deviceIP, { color: subTextColor }]}>
|
|
{item.mac}
|
|
</Text>
|
|
</View>
|
|
<SymbolView
|
|
name="circle.fill"
|
|
size={18}
|
|
tintColor={getStatusColor(item.status)}
|
|
animationSpec={{
|
|
effect: { type: "pulse" },
|
|
repeating: true,
|
|
speed: 1,
|
|
}}
|
|
fallback={
|
|
<View
|
|
style={[
|
|
styles.statusDot,
|
|
{ backgroundColor: getStatusColor(item.status) },
|
|
]}
|
|
/>
|
|
}
|
|
style={[
|
|
styles.statusSymbol,
|
|
{
|
|
shadowColor: getStatusColor(item.status),
|
|
shadowOpacity: isDark ? 0.9 : 0.6,
|
|
},
|
|
]}
|
|
/>
|
|
</View>
|
|
|
|
<View style={styles.deviceActions}>
|
|
<ActionIcon
|
|
name="Wake"
|
|
symbolName="bolt.fill"
|
|
fallbackName="flash"
|
|
color="#4CAF50"
|
|
onPress={() => handleWake(item)}
|
|
/>
|
|
<ActionIcon
|
|
name="Sleep"
|
|
symbolName="moon.fill"
|
|
fallbackName="moon"
|
|
color="#FF9800"
|
|
onPress={() => handleSleep(item)}
|
|
/>
|
|
<ActionIcon
|
|
name="Reboot"
|
|
symbolName="arrow.clockwise.circle.fill"
|
|
fallbackName="refresh"
|
|
color="#2196F3"
|
|
onPress={() => handleReboot(item)}
|
|
/>
|
|
<ActionIcon
|
|
name="Shutdown"
|
|
symbolName="power.circle.fill"
|
|
fallbackName="power"
|
|
color="#f44336"
|
|
onPress={() => handleShutdown(item)}
|
|
/>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</ContextMenu.Trigger>
|
|
</ContextMenu>
|
|
</Host>
|
|
);
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<View style={styles.loadingContainer}>
|
|
<ActivityIndicator size="large" color={activityColor} />
|
|
</View>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<View style={[styles.container, { backgroundColor: bgColor }]}>
|
|
<FlatList
|
|
data={devices}
|
|
renderItem={renderDevice}
|
|
keyExtractor={(item) => item.id}
|
|
contentContainerStyle={styles.list}
|
|
refreshControl={
|
|
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
|
|
}
|
|
ListEmptyComponent={
|
|
<View style={styles.emptyContainer}>
|
|
<Text style={[styles.emptyText, { color: subTextColor }]}>
|
|
No devices found
|
|
</Text>
|
|
</View>
|
|
}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: "#f5f5f5",
|
|
},
|
|
headerRight: {
|
|
flexDirection: "row",
|
|
gap: 16,
|
|
},
|
|
headerButton: {
|
|
paddingHorizontal: 8,
|
|
},
|
|
loadingContainer: {
|
|
flex: 1,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
list: {
|
|
padding: 15,
|
|
gap: 15,
|
|
},
|
|
deviceCard: {
|
|
backgroundColor: "#fff",
|
|
borderRadius: 12,
|
|
padding: 15,
|
|
paddingRight: 25,
|
|
shadowColor: "#000",
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 4,
|
|
elevation: 3,
|
|
},
|
|
deviceHeader: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
marginBottom: 12,
|
|
},
|
|
deviceInfo: {
|
|
flex: 1,
|
|
},
|
|
deviceName: {
|
|
fontSize: 18,
|
|
fontWeight: "bold",
|
|
color: "#333",
|
|
marginBottom: 4,
|
|
},
|
|
deviceIP: {
|
|
fontSize: 14,
|
|
color: "#666",
|
|
},
|
|
statusDot: {
|
|
width: 12,
|
|
height: 12,
|
|
borderRadius: 6,
|
|
},
|
|
deviceActions: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "flex-start",
|
|
marginTop: 8,
|
|
paddingBottom: 6,
|
|
},
|
|
actionIconContainer: {
|
|
padding: 6,
|
|
marginRight: 12,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
minWidth: 36,
|
|
minHeight: 36,
|
|
},
|
|
actionIcon: {
|
|
width: 22,
|
|
height: 22,
|
|
},
|
|
actionButtonText: {
|
|
color: "#fff",
|
|
fontWeight: "600",
|
|
fontSize: 12,
|
|
},
|
|
wakeButton: {
|
|
backgroundColor: "#4CAF50",
|
|
},
|
|
sleepButton: {
|
|
backgroundColor: "#FF9800",
|
|
},
|
|
rebootButton: {
|
|
backgroundColor: "#2196F3",
|
|
},
|
|
shutdownButton: {
|
|
backgroundColor: "#f44336",
|
|
},
|
|
statusSymbol: {
|
|
width: 18,
|
|
height: 18,
|
|
borderRadius: 9,
|
|
shadowOffset: { width: 0, height: 0 },
|
|
shadowOpacity: 0.6,
|
|
shadowRadius: 8,
|
|
elevation: 6,
|
|
},
|
|
emptyContainer: {
|
|
alignItems: "center",
|
|
paddingVertical: 50,
|
|
},
|
|
emptyText: {
|
|
fontSize: 16,
|
|
color: "#999",
|
|
},
|
|
});
|