v1.0.0
This commit is contained in:
@@ -1,11 +1,14 @@
|
||||
import React from "react";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { useRouter } from "expo-router";
|
||||
import { View, TouchableOpacity, StyleSheet } from "react-native";
|
||||
import { NativeTabs, Icon, Label } from "expo-router/unstable-native-tabs";
|
||||
import { Icon, Label, NativeTabs } from "expo-router/unstable-native-tabs";
|
||||
import React from "react";
|
||||
import { StyleSheet, TouchableOpacity, View } from "react-native";
|
||||
import { useColorScheme } from "../../hooks/use-color-scheme";
|
||||
|
||||
export function DevicesHeader() {
|
||||
const router = useRouter();
|
||||
const isDark = useColorScheme() === "dark";
|
||||
const activityColor = isDark ? "#0A84FF" : "#007AFF";
|
||||
|
||||
return (
|
||||
<View style={styles.headerRight}>
|
||||
@@ -13,7 +16,7 @@ export function DevicesHeader() {
|
||||
onPress={() => router.push("/scan-devices")}
|
||||
style={styles.headerButton}
|
||||
>
|
||||
<Ionicons name="add-circle-outline" size={24} color="#007AFF" />
|
||||
<Ionicons name="add-circle-outline" size={24} color={activityColor} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
@@ -23,12 +26,12 @@ export default function TabsLayout() {
|
||||
return (
|
||||
<NativeTabs>
|
||||
<NativeTabs.Trigger name="index">
|
||||
<Icon sf="desktopcomputer"/>
|
||||
<Label>Devices</Label>
|
||||
<Icon sf="desktopcomputer" />
|
||||
<Label>Devices</Label>
|
||||
</NativeTabs.Trigger>
|
||||
<NativeTabs.Trigger name="settings">
|
||||
<Icon sf="gear"/>
|
||||
<Label>Settings</Label>
|
||||
<Icon sf="gear" />
|
||||
<Label>Settings</Label>
|
||||
</NativeTabs.Trigger>
|
||||
</NativeTabs>
|
||||
);
|
||||
|
||||
@@ -1,66 +1,111 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
FlatList,
|
||||
TouchableOpacity,
|
||||
StyleSheet,
|
||||
RefreshControl,
|
||||
Alert,
|
||||
ActivityIndicator,
|
||||
} from "react-native";
|
||||
import { ContextMenu, Button as SwiftUIButton, Host } from "@expo/ui/swift-ui";
|
||||
import { useRouter, useLocalSearchParams, Stack } from "expo-router";
|
||||
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";
|
||||
|
||||
function DevicesHeader() {
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<View>
|
||||
<TouchableOpacity onPress={() => router.push("/scan-devices")}>
|
||||
<Ionicons name="add-circle-outline" size={24} color="#007AFF" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
import * as Burnt from "burnt";
|
||||
|
||||
export default function DeviceListScreen() {
|
||||
const router = useRouter();
|
||||
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);
|
||||
|
||||
useEffect(() => {
|
||||
loadDevices();
|
||||
}, []);
|
||||
|
||||
const loadDevices = async () => {
|
||||
const fetchDevices = useCallback(async (showLoading = false) => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
if (showLoading) setIsLoading(true);
|
||||
const data = await api.getDevices();
|
||||
setDevices(data);
|
||||
} catch (error: any) {
|
||||
Alert.alert("Error", error.message || "Failed to load devices");
|
||||
// For background/periodic refreshes, avoid interruptive alerts
|
||||
if (showLoading) {
|
||||
Alert.alert("Error", error.message || "Failed to load devices");
|
||||
}
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
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 loadDevices();
|
||||
await fetchDevices(false);
|
||||
setRefreshing(false);
|
||||
};
|
||||
|
||||
const handleWake = async (device: Device) => {
|
||||
try {
|
||||
await api.wakeDevice(device.id);
|
||||
Alert.alert("Success", `Wake signal sent to ${device.name}`);
|
||||
Burnt.toast({
|
||||
title: "Success",
|
||||
preset: "done",
|
||||
message: `Waking ${device.name} up.`,
|
||||
});
|
||||
} catch (error: any) {
|
||||
Alert.alert("Error", error.message || "Failed to wake device");
|
||||
Burnt.toast({
|
||||
title: "Error",
|
||||
preset: "error",
|
||||
message: error.message || `Failed to wake up ${device.name}.`,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
@@ -73,9 +118,17 @@ export default function DeviceListScreen() {
|
||||
onPress: async () => {
|
||||
try {
|
||||
await api.sleepDevice(device.id);
|
||||
Alert.alert("Success", `Sleep signal sent to ${device.name}`);
|
||||
Burnt.toast({
|
||||
title: "Success",
|
||||
preset: "done",
|
||||
message: `Sending ${device.name} to sleep.`,
|
||||
});
|
||||
} catch (error: any) {
|
||||
Alert.alert("Error", error.message || "Failed to sleep device");
|
||||
Burnt.toast({
|
||||
title: "Error",
|
||||
preset: "error",
|
||||
message: error.message || `Failed to send ${device.name} to sleep.`,
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
@@ -91,9 +144,17 @@ export default function DeviceListScreen() {
|
||||
onPress: async () => {
|
||||
try {
|
||||
await api.rebootDevice(device.id);
|
||||
Alert.alert("Success", `Reboot signal sent to ${device.name}`);
|
||||
Burnt.toast({
|
||||
title: "Success",
|
||||
preset: "done",
|
||||
message: `Rebooting ${device.name}.`,
|
||||
});
|
||||
} catch (error: any) {
|
||||
Alert.alert("Error", error.message || "Failed to reboot device");
|
||||
Burnt.toast({
|
||||
title: "Error",
|
||||
preset: "error",
|
||||
message: error.message || `Failed to reboot ${device.name}`,
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
@@ -112,12 +173,17 @@ export default function DeviceListScreen() {
|
||||
onPress: async () => {
|
||||
try {
|
||||
await api.shutdownDevice(device.id);
|
||||
Alert.alert("Success", `Shutdown signal sent to ${device.name}`);
|
||||
Burnt.toast({
|
||||
title: "Success",
|
||||
preset: "done",
|
||||
message: `Shutting down ${device.name}.`,
|
||||
});
|
||||
} catch (error: any) {
|
||||
Alert.alert(
|
||||
"Error",
|
||||
error.message || "Failed to shutdown device"
|
||||
);
|
||||
Burnt.toast({
|
||||
title: "Error",
|
||||
preset: "error",
|
||||
message: error.message || `Failed to shut down ${device.name}.`,
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
@@ -127,16 +193,31 @@ export default function DeviceListScreen() {
|
||||
|
||||
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);
|
||||
Alert.alert("Success", "Device deleted successfully");
|
||||
loadDevices();
|
||||
Burnt.toast({
|
||||
title: "Success",
|
||||
preset: "done",
|
||||
message: `Deleted ${device.name} successfully.`,
|
||||
});
|
||||
fetchDevices(false);
|
||||
} catch (error: any) {
|
||||
Alert.alert("Error", error.message || "Failed to delete device");
|
||||
Burnt.toast({
|
||||
title: "Error",
|
||||
preset: "error",
|
||||
message: error.message || `Failed to delete ${device.name}.`,
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
@@ -154,6 +235,42 @@ export default function DeviceListScreen() {
|
||||
}
|
||||
};
|
||||
|
||||
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">
|
||||
@@ -167,51 +284,83 @@ export default function DeviceListScreen() {
|
||||
</SwiftUIButton>
|
||||
</ContextMenu.Items>
|
||||
<ContextMenu.Trigger>
|
||||
<View style={styles.deviceCard}>
|
||||
<TouchableOpacity
|
||||
onPress={() => router.push(`/devices/${item.id}`)}
|
||||
activeOpacity={1}
|
||||
>
|
||||
<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}>{item.name}</Text>
|
||||
<Text style={styles.deviceIP}>{item.ip}</Text>
|
||||
<Text style={[styles.deviceName, { color: textColor }]}>
|
||||
{item.name}
|
||||
</Text>
|
||||
<Text style={[styles.deviceIP, { color: subTextColor }]}>
|
||||
{item.mac}
|
||||
</Text>
|
||||
</View>
|
||||
<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.statusDot,
|
||||
{ backgroundColor: getStatusColor(item.status) },
|
||||
styles.statusSymbol,
|
||||
{
|
||||
shadowColor: getStatusColor(item.status),
|
||||
shadowOpacity: isDark ? 0.9 : 0.6,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.deviceActions}>
|
||||
<TouchableOpacity
|
||||
style={[styles.actionButton, styles.wakeButton]}
|
||||
<ActionIcon
|
||||
name="Wake"
|
||||
symbolName="bolt.fill"
|
||||
fallbackName="flash"
|
||||
color="#4CAF50"
|
||||
onPress={() => handleWake(item)}
|
||||
>
|
||||
<Text style={styles.actionButtonText}>Wake</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={[styles.actionButton, styles.sleepButton]}
|
||||
/>
|
||||
<ActionIcon
|
||||
name="Sleep"
|
||||
symbolName="moon.fill"
|
||||
fallbackName="moon"
|
||||
color="#FF9800"
|
||||
onPress={() => handleSleep(item)}
|
||||
>
|
||||
<Text style={styles.actionButtonText}>Sleep</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={[styles.actionButton, styles.rebootButton]}
|
||||
/>
|
||||
<ActionIcon
|
||||
name="Reboot"
|
||||
symbolName="arrow.clockwise.circle.fill"
|
||||
fallbackName="refresh"
|
||||
color="#2196F3"
|
||||
onPress={() => handleReboot(item)}
|
||||
>
|
||||
<Text style={styles.actionButtonText}>Reboot</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={[styles.actionButton, styles.shutdownButton]}
|
||||
/>
|
||||
<ActionIcon
|
||||
name="Shutdown"
|
||||
symbolName="power.circle.fill"
|
||||
fallbackName="power"
|
||||
color="#f44336"
|
||||
onPress={() => handleShutdown(item)}
|
||||
>
|
||||
<Text style={styles.actionButtonText}>Shutdown</Text>
|
||||
</TouchableOpacity>
|
||||
/>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</ContextMenu.Trigger>
|
||||
</ContextMenu>
|
||||
@@ -221,19 +370,13 @@ export default function DeviceListScreen() {
|
||||
if (isLoading) {
|
||||
return (
|
||||
<View style={styles.loadingContainer}>
|
||||
<ActivityIndicator size="large" color="#007AFF" />
|
||||
<ActivityIndicator size="large" color={activityColor} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Stack.Screen
|
||||
options={{
|
||||
title: "Devices",
|
||||
headerRight: () => <DevicesHeader />,
|
||||
}}
|
||||
/>
|
||||
<View style={[styles.container, { backgroundColor: bgColor }]}>
|
||||
<FlatList
|
||||
data={devices}
|
||||
renderItem={renderDevice}
|
||||
@@ -244,7 +387,9 @@ export default function DeviceListScreen() {
|
||||
}
|
||||
ListEmptyComponent={
|
||||
<View style={styles.emptyContainer}>
|
||||
<Text style={styles.emptyText}>No devices found</Text>
|
||||
<Text style={[styles.emptyText, { color: subTextColor }]}>
|
||||
No devices found
|
||||
</Text>
|
||||
</View>
|
||||
}
|
||||
/>
|
||||
@@ -271,12 +416,13 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
list: {
|
||||
padding: 15,
|
||||
gap: 15,
|
||||
},
|
||||
deviceCard: {
|
||||
backgroundColor: "#fff",
|
||||
borderRadius: 12,
|
||||
padding: 15,
|
||||
marginBottom: 15,
|
||||
paddingRight: 25,
|
||||
shadowColor: "#000",
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
@@ -309,14 +455,27 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
deviceActions: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
gap: 8,
|
||||
},
|
||||
actionButton: {
|
||||
flex: 1,
|
||||
paddingVertical: 10,
|
||||
borderRadius: 8,
|
||||
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",
|
||||
@@ -330,10 +489,14 @@ const styles = StyleSheet.create({
|
||||
shutdownButton: {
|
||||
backgroundColor: "#f44336",
|
||||
},
|
||||
actionButtonText: {
|
||||
color: "#fff",
|
||||
fontWeight: "600",
|
||||
fontSize: 12,
|
||||
statusSymbol: {
|
||||
width: 18,
|
||||
height: 18,
|
||||
borderRadius: 9,
|
||||
shadowOffset: { width: 0, height: 0 },
|
||||
shadowOpacity: 0.6,
|
||||
shadowRadius: 8,
|
||||
elevation: 6,
|
||||
},
|
||||
emptyContainer: {
|
||||
alignItems: "center",
|
||||
|
||||
@@ -1,231 +1,251 @@
|
||||
import React from 'react';
|
||||
import AsyncStorage from "@react-native-async-storage/async-storage";
|
||||
import React from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
StyleSheet,
|
||||
ScrollView,
|
||||
TouchableOpacity,
|
||||
Alert,
|
||||
} from 'react-native';
|
||||
import { useAuth } from '../../src/context/AuthContext';
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
Alert,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native";
|
||||
import { useColorScheme } from "../../hooks/use-color-scheme";
|
||||
import { useAuth } from "../../src/context/AuthContext";
|
||||
import { useRouter } from "expo-router";
|
||||
|
||||
export default function SettingsScreen() {
|
||||
const { user, logout } = useAuth();
|
||||
const { user, serverAddress, logout } = useAuth();
|
||||
const router = useRouter();
|
||||
const colorScheme = useColorScheme() ?? "light";
|
||||
const isDark = colorScheme === "dark";
|
||||
const bgColor = isDark ? "#0b0b0d" : "#f5f5f5";
|
||||
const sectionBg = isDark ? "#1c1c1e" : "#fff";
|
||||
const sectionTitleBg = isDark ? "#111111" : "#f9f9f9";
|
||||
const textColor = isDark ? "#fff" : "#333";
|
||||
const subTextColor = isDark ? "#c6c6c8" : "#666";
|
||||
const primary = isDark ? "#0A84FF" : "#007AFF";
|
||||
const destructiveColor = "#f44336";
|
||||
|
||||
const handleLogout = () => {
|
||||
Alert.alert(
|
||||
'Logout',
|
||||
'Are you sure you want to logout?',
|
||||
[
|
||||
{ text: 'Cancel', style: 'cancel' },
|
||||
{
|
||||
text: 'Logout',
|
||||
style: 'destructive',
|
||||
onPress: async () => {
|
||||
await logout();
|
||||
},
|
||||
},
|
||||
]
|
||||
);
|
||||
};
|
||||
const handleLogout = () => {
|
||||
Alert.alert("Logout", "Are you sure you want to logout?", [
|
||||
{ text: "Cancel", style: "cancel" },
|
||||
{
|
||||
text: "Logout",
|
||||
style: "destructive",
|
||||
onPress: async () => {
|
||||
router.replace("/login");
|
||||
await logout();
|
||||
},
|
||||
},
|
||||
]);
|
||||
};
|
||||
|
||||
const handleClearData = () => {
|
||||
Alert.alert(
|
||||
'Clear Data',
|
||||
'This will clear all stored data. Are you sure?',
|
||||
[
|
||||
{ text: 'Cancel', style: 'cancel' },
|
||||
{
|
||||
text: 'Clear',
|
||||
style: 'destructive',
|
||||
onPress: async () => {
|
||||
try {
|
||||
await AsyncStorage.clear();
|
||||
Alert.alert('Success', 'All data cleared');
|
||||
} catch (error) {
|
||||
Alert.alert('Error', 'Failed to clear data');
|
||||
}
|
||||
},
|
||||
},
|
||||
]
|
||||
);
|
||||
};
|
||||
const SettingItem = ({
|
||||
label,
|
||||
value,
|
||||
onPress,
|
||||
}: {
|
||||
label: string;
|
||||
value?: string;
|
||||
onPress?: () => void;
|
||||
}) => (
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.settingItem,
|
||||
{ borderBottomColor: isDark ? "rgba(255,255,255,0.03)" : "#f0f0f0" },
|
||||
]}
|
||||
onPress={onPress}
|
||||
disabled={!onPress}
|
||||
activeOpacity={onPress ? 0.7 : 1}
|
||||
>
|
||||
<Text style={[styles.settingLabel, { color: textColor }]}>{label}</Text>
|
||||
<View style={styles.settingValueContainer}>
|
||||
<Text
|
||||
style={[styles.settingValue, { color: subTextColor }]}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{value}
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
|
||||
const SettingItem = ({
|
||||
label,
|
||||
value,
|
||||
onPress
|
||||
}: {
|
||||
label: string;
|
||||
value?: string;
|
||||
onPress?: () => void;
|
||||
}) => (
|
||||
<TouchableOpacity
|
||||
style={styles.settingItem}
|
||||
onPress={onPress}
|
||||
disabled={!onPress}
|
||||
activeOpacity={onPress ? 0.7 : 1}
|
||||
>
|
||||
<Text style={styles.settingLabel}>{label}</Text>
|
||||
<View style={styles.settingValueContainer}>
|
||||
<Text style={styles.settingValue} numberOfLines={1}>
|
||||
{value || 'N/A'}
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
const ActionButton = ({
|
||||
title,
|
||||
onPress,
|
||||
destructive = false,
|
||||
}: {
|
||||
title: string;
|
||||
onPress: () => void;
|
||||
destructive?: boolean;
|
||||
}) => (
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.actionButton,
|
||||
{ backgroundColor: destructive ? destructiveColor : primary },
|
||||
]}
|
||||
onPress={onPress}
|
||||
>
|
||||
<Text style={styles.actionButtonText}>{title}</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
|
||||
const ActionButton = ({
|
||||
title,
|
||||
onPress,
|
||||
destructive = false,
|
||||
}: {
|
||||
title: string;
|
||||
onPress: () => void;
|
||||
destructive?: boolean;
|
||||
}) => (
|
||||
<TouchableOpacity
|
||||
style={[styles.actionButton, destructive && styles.actionButtonDestructive]}
|
||||
onPress={onPress}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.actionButtonText,
|
||||
destructive && styles.actionButtonTextDestructive,
|
||||
]}
|
||||
>
|
||||
{title}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
return (
|
||||
<ScrollView style={[styles.container, { backgroundColor: bgColor }]}>
|
||||
<View style={styles.content}>
|
||||
<View
|
||||
style={[
|
||||
styles.section,
|
||||
{
|
||||
backgroundColor: sectionBg,
|
||||
shadowColor: isDark ? "rgba(255,255,255,0.02)" : "#000",
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.sectionTitle,
|
||||
{ color: subTextColor, backgroundColor: sectionTitleBg },
|
||||
]}
|
||||
>
|
||||
User Information
|
||||
</Text>
|
||||
<SettingItem label="Username" value={user?.username || "Admin"} />
|
||||
<SettingItem label="Email" value={user?.email || "N/A"} />
|
||||
<SettingItem label="Server URL" value={serverAddress || "N/A"} />
|
||||
</View>
|
||||
|
||||
return (
|
||||
<ScrollView style={styles.container}>
|
||||
<View style={styles.content}>
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>User Information</Text>
|
||||
<SettingItem label="Username" value={user?.username || 'N/A'} />
|
||||
<SettingItem label="Email" value={user?.email || 'N/A'} />
|
||||
<SettingItem
|
||||
label="User ID"
|
||||
value={user?.id || 'N/A'}
|
||||
/>
|
||||
</View>
|
||||
<View
|
||||
style={[
|
||||
styles.section,
|
||||
{
|
||||
backgroundColor: sectionBg,
|
||||
shadowColor: isDark ? "rgba(255,255,255,0.02)" : "#000",
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.sectionTitle,
|
||||
{ color: subTextColor, backgroundColor: sectionTitleBg },
|
||||
]}
|
||||
>
|
||||
App Info
|
||||
</Text>
|
||||
<SettingItem label="Version" value="1.0.0" />
|
||||
<SettingItem label="Build" value="Expo" />
|
||||
</View>
|
||||
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>Server</Text>
|
||||
<SettingItem
|
||||
label="Server URL"
|
||||
value="https://wol.f6knight.duckdns.org"
|
||||
/>
|
||||
<SettingItem
|
||||
label="API Base"
|
||||
value="/api"
|
||||
/>
|
||||
</View>
|
||||
<View
|
||||
style={[
|
||||
styles.section,
|
||||
{
|
||||
backgroundColor: sectionBg,
|
||||
shadowColor: isDark ? "rgba(255,255,255,0.02)" : "#000",
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.sectionTitle,
|
||||
{ color: subTextColor, backgroundColor: sectionTitleBg },
|
||||
]}
|
||||
>
|
||||
Actions
|
||||
</Text>
|
||||
<ActionButton title="Logout" onPress={handleLogout} destructive />
|
||||
</View>
|
||||
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>App Info</Text>
|
||||
<SettingItem label="Version" value="1.0.0" />
|
||||
<SettingItem label="Build" value="Expo" />
|
||||
</View>
|
||||
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>Actions</Text>
|
||||
<ActionButton title="Logout" onPress={handleLogout} destructive />
|
||||
<ActionButton title="Clear All Data" onPress={handleClearData} destructive />
|
||||
</View>
|
||||
|
||||
<View style={styles.footer}>
|
||||
<Text style={styles.footerText}>
|
||||
UpSnap Mobile App
|
||||
</Text>
|
||||
<Text style={styles.footerText}>
|
||||
Connect to your UpSnap server
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
);
|
||||
<View style={styles.footer}>
|
||||
<Text style={[styles.footerText, { color: subTextColor }]}>
|
||||
UpSnap Mobile App
|
||||
</Text>
|
||||
<Text style={[styles.footerText, { color: subTextColor }]}>
|
||||
Connect to your UpSnap server
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#f5f5f5',
|
||||
},
|
||||
content: {
|
||||
padding: 20,
|
||||
},
|
||||
section: {
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: 12,
|
||||
marginBottom: 20,
|
||||
overflow: 'hidden',
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 4,
|
||||
elevation: 3,
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: 14,
|
||||
fontWeight: 'bold',
|
||||
color: '#666',
|
||||
paddingHorizontal: 15,
|
||||
paddingTop: 15,
|
||||
paddingBottom: 10,
|
||||
backgroundColor: '#f9f9f9',
|
||||
},
|
||||
settingItem: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 15,
|
||||
paddingVertical: 15,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#f0f0f0',
|
||||
},
|
||||
settingLabel: {
|
||||
fontSize: 16,
|
||||
color: '#333',
|
||||
flex: 1,
|
||||
},
|
||||
settingValueContainer: {
|
||||
flex: 1,
|
||||
alignItems: 'flex-end',
|
||||
},
|
||||
settingValue: {
|
||||
fontSize: 14,
|
||||
color: '#666',
|
||||
maxWidth: 200,
|
||||
},
|
||||
actionButton: {
|
||||
backgroundColor: '#007AFF',
|
||||
margin: 15,
|
||||
padding: 15,
|
||||
borderRadius: 8,
|
||||
alignItems: 'center',
|
||||
},
|
||||
actionButtonDestructive: {
|
||||
backgroundColor: '#f44336',
|
||||
},
|
||||
actionButtonText: {
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
actionButtonTextDestructive: {
|
||||
color: '#fff',
|
||||
},
|
||||
footer: {
|
||||
alignItems: 'center',
|
||||
paddingVertical: 30,
|
||||
},
|
||||
footerText: {
|
||||
fontSize: 14,
|
||||
color: '#999',
|
||||
marginBottom: 5,
|
||||
},
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: "#f5f5f5",
|
||||
},
|
||||
content: {
|
||||
padding: 20,
|
||||
},
|
||||
section: {
|
||||
backgroundColor: "#fff",
|
||||
borderRadius: 12,
|
||||
marginBottom: 20,
|
||||
overflow: "hidden",
|
||||
shadowColor: "#000",
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 4,
|
||||
elevation: 3,
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: 14,
|
||||
fontWeight: "bold",
|
||||
color: "#666",
|
||||
paddingHorizontal: 15,
|
||||
paddingTop: 15,
|
||||
paddingBottom: 10,
|
||||
backgroundColor: "#f9f9f9",
|
||||
borderTopLeftRadius: 12,
|
||||
borderTopRightRadius: 12,
|
||||
},
|
||||
settingItem: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
paddingHorizontal: 15,
|
||||
paddingVertical: 15,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: "#f0f0f0",
|
||||
},
|
||||
settingLabel: {
|
||||
fontSize: 16,
|
||||
color: "#333",
|
||||
flex: 1,
|
||||
},
|
||||
settingValueContainer: {
|
||||
flex: 1,
|
||||
alignItems: "flex-end",
|
||||
},
|
||||
settingValue: {
|
||||
fontSize: 14,
|
||||
color: "#666",
|
||||
maxWidth: 200,
|
||||
},
|
||||
actionButton: {
|
||||
backgroundColor: "#007AFF",
|
||||
margin: 15,
|
||||
padding: 15,
|
||||
borderRadius: 8,
|
||||
alignItems: "center",
|
||||
},
|
||||
actionButtonDestructive: {
|
||||
backgroundColor: "#f44336",
|
||||
},
|
||||
actionButtonText: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
actionButtonTextDestructive: {
|
||||
color: "#fff",
|
||||
},
|
||||
footer: {
|
||||
alignItems: "center",
|
||||
paddingVertical: 30,
|
||||
},
|
||||
footerText: {
|
||||
fontSize: 14,
|
||||
color: "#999",
|
||||
marginBottom: 5,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,41 +1,77 @@
|
||||
import { StatusBar } from "expo-status-bar";
|
||||
import { AuthProvider, useAuth } from "../src/context/AuthContext";
|
||||
import { useEffect } from "react";
|
||||
import { Stack, useRouter } from "expo-router";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { Stack, useRouter, useSegments } from "expo-router";
|
||||
import { TouchableOpacity, Text } from "react-native";
|
||||
import { useColorScheme } from "../hooks/use-color-scheme";
|
||||
import { AuthProvider } from "../src/context/AuthContext";
|
||||
|
||||
function RootStack() {
|
||||
const router = useRouter();
|
||||
const { isAuthenticated, isLoading } = useAuth();
|
||||
|
||||
useEffect(() => {
|
||||
if (!isLoading) {
|
||||
if (isAuthenticated) {
|
||||
router.replace('/(tabs)');
|
||||
} else {
|
||||
router.replace('/login');
|
||||
}
|
||||
}
|
||||
}, [isAuthenticated, isLoading, router]);
|
||||
function DevicesHeader() {
|
||||
const router = useRouter();
|
||||
const isDark = useColorScheme() === "dark";
|
||||
const activityColor = isDark ? "#0A84FF" : "#007AFF";
|
||||
|
||||
return (
|
||||
<Stack>
|
||||
{isAuthenticated ? (
|
||||
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
|
||||
) : (
|
||||
<Stack.Screen name="login" options={{ headerShown: false }} />
|
||||
)}
|
||||
<Stack.Screen name="add-device" options={{ headerShown: false }} />
|
||||
<Stack.Screen name="scan-devices" options={{ headerShown: false }} />
|
||||
<Stack.Screen name="devices/[id]" />
|
||||
</Stack>
|
||||
<TouchableOpacity
|
||||
onPress={() => router.push("/scan-devices")}
|
||||
style={{ paddingHorizontal: 8 }}
|
||||
>
|
||||
<Ionicons name="add-circle-outline" size={24} color={activityColor} />
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}
|
||||
|
||||
function TabsTitle(props: { title: string }) {
|
||||
const segments = useSegments();
|
||||
const last = segments[segments.length - 1];
|
||||
const isDark = useColorScheme() === "dark";
|
||||
const titleColor = isDark ? "#fff" : "#000";
|
||||
const title = last === "settings" ? "Settings" : props.title;
|
||||
return (
|
||||
<Text style={{ color: titleColor, fontSize: 17, fontWeight: "600" }}>
|
||||
{title}
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
|
||||
export default function RootLayout() {
|
||||
const isDark = useColorScheme() === "dark";
|
||||
const bgColor = isDark ? "#0b0b0d" : "#fff";
|
||||
const titleColor = isDark ? "#fff" : "#000";
|
||||
|
||||
const segments = useSegments();
|
||||
const last = segments[segments.length - 1];
|
||||
const isIndex = last === "(tabs)" || last === undefined;
|
||||
|
||||
return (
|
||||
<AuthProvider>
|
||||
<RootStack />
|
||||
<StatusBar style="auto" />
|
||||
<Stack>
|
||||
{/* Root index that performs auth redirect (app/index.tsx) */}
|
||||
<Stack.Screen name="index" options={{ headerShown: false }} />
|
||||
{/* Tabs parent - render tabs with dynamic header */}
|
||||
<Stack.Screen
|
||||
name="(tabs)"
|
||||
options={
|
||||
{
|
||||
headerTitle: () => <TabsTitle title="Devices" />,
|
||||
headerRight: isIndex ? () => <DevicesHeader /> : undefined,
|
||||
headerRightContainerStyle: isIndex
|
||||
? undefined
|
||||
: { width: 0, paddingRight: 0 },
|
||||
headerStyle: { backgroundColor: bgColor },
|
||||
headerTintColor: titleColor,
|
||||
} as any
|
||||
}
|
||||
/>{" "}
|
||||
<Stack.Screen name="login" options={{ headerShown: false }} />
|
||||
<Stack.Screen
|
||||
name="scan-devices"
|
||||
options={{
|
||||
headerShown: true,
|
||||
headerTitle: () => <TabsTitle title="Scan Devices" />,
|
||||
headerStyle: { backgroundColor: bgColor },
|
||||
headerBackButtonDisplayMode: "minimal",
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
</AuthProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,236 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
Alert,
|
||||
ActivityIndicator,
|
||||
} from 'react-native';
|
||||
import { useRouter } from 'expo-router';
|
||||
import api from '../src/services/api';
|
||||
|
||||
export default function AddDeviceScreen() {
|
||||
const router = useRouter();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
mac: '',
|
||||
ip: '',
|
||||
netmask: '255.255.255.0',
|
||||
broadcast: '',
|
||||
secureOnPassword: '',
|
||||
port: '9',
|
||||
});
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!formData.name || !formData.mac || !formData.ip) {
|
||||
Alert.alert('Error', 'Please fill in all required fields');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await api.createDevice({
|
||||
name: formData.name,
|
||||
mac: formData.mac,
|
||||
ip: formData.ip,
|
||||
netmask: formData.netmask,
|
||||
broadcast: formData.broadcast,
|
||||
secureOnPassword: formData.secureOnPassword,
|
||||
port: parseInt(formData.port) || 9,
|
||||
groups: [],
|
||||
status: 'offline',
|
||||
});
|
||||
Alert.alert('Success', 'Device added successfully');
|
||||
router.back();
|
||||
} catch (error: any) {
|
||||
Alert.alert('Error', error.message || 'Failed to add device');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ScrollView style={styles.container}>
|
||||
<View style={styles.content}>
|
||||
<Text style={styles.header}>Add New Device</Text>
|
||||
|
||||
<View style={styles.form}>
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.label}>Device Name *</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={formData.name}
|
||||
onChangeText={(text) => setFormData({ ...formData, name: text })}
|
||||
placeholder="My PC"
|
||||
autoCapitalize="words"
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.label}>MAC Address *</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={formData.mac}
|
||||
onChangeText={(text) => setFormData({ ...formData, mac: text })}
|
||||
placeholder="00:11:22:33:44:55"
|
||||
autoCapitalize="characters"
|
||||
/>
|
||||
<Text style={styles.hint}>
|
||||
Format: XX:XX:XX:XX:XX:XX
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.label}>IP Address *</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={formData.ip}
|
||||
onChangeText={(text) => setFormData({ ...formData, ip: text })}
|
||||
placeholder="192.168.1.100"
|
||||
keyboardType="numeric"
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.label}>Netmask</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={formData.netmask}
|
||||
onChangeText={(text) => setFormData({ ...formData, netmask: text })}
|
||||
placeholder="255.255.255.0"
|
||||
keyboardType="numeric"
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.label}>Broadcast Address</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={formData.broadcast}
|
||||
onChangeText={(text) => setFormData({ ...formData, broadcast: text })}
|
||||
placeholder="192.168.1.255"
|
||||
keyboardType="numeric"
|
||||
/>
|
||||
<Text style={styles.hint}>
|
||||
Optional: Auto-calculated if left blank
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.label}>SecureOn Password</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={formData.secureOnPassword}
|
||||
onChangeText={(text) => setFormData({ ...formData, secureOnPassword: text })}
|
||||
placeholder="Optional password"
|
||||
secureTextEntry
|
||||
/>
|
||||
<Text style={styles.hint}>
|
||||
Optional: For SecureOn enabled NICs
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.label}>Port</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={formData.port}
|
||||
onChangeText={(text) => setFormData({ ...formData, port: text })}
|
||||
placeholder="9"
|
||||
keyboardType="numeric"
|
||||
/>
|
||||
<Text style={styles.hint}>
|
||||
Default: 9 (Standard Wake-on-LAN port)
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.buttonGroup}>
|
||||
<TouchableOpacity
|
||||
style={[styles.button, styles.cancelButton]}
|
||||
onPress={() => router.back()}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<Text style={styles.buttonText}>Cancel</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={[styles.button, styles.saveButton]}
|
||||
onPress={handleSave}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<Text style={styles.buttonText}>
|
||||
{isLoading ? 'Adding...' : 'Add Device'}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#f5f5f5',
|
||||
},
|
||||
content: {
|
||||
padding: 20,
|
||||
},
|
||||
header: {
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold',
|
||||
color: '#333',
|
||||
marginBottom: 20,
|
||||
textAlign: 'center',
|
||||
},
|
||||
form: {
|
||||
gap: 20,
|
||||
},
|
||||
inputGroup: {
|
||||
gap: 8,
|
||||
},
|
||||
label: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: '#333',
|
||||
},
|
||||
input: {
|
||||
backgroundColor: '#fff',
|
||||
borderWidth: 1,
|
||||
borderColor: '#ddd',
|
||||
borderRadius: 8,
|
||||
padding: 12,
|
||||
fontSize: 16,
|
||||
},
|
||||
hint: {
|
||||
fontSize: 12,
|
||||
color: '#666',
|
||||
},
|
||||
buttonGroup: {
|
||||
flexDirection: 'row',
|
||||
gap: 10,
|
||||
marginTop: 10,
|
||||
},
|
||||
button: {
|
||||
flex: 1,
|
||||
paddingVertical: 15,
|
||||
borderRadius: 8,
|
||||
alignItems: 'center',
|
||||
},
|
||||
cancelButton: {
|
||||
backgroundColor: '#999',
|
||||
},
|
||||
saveButton: {
|
||||
backgroundColor: '#4CAF50',
|
||||
},
|
||||
buttonText: {
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
});
|
||||
@@ -1,350 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
Alert,
|
||||
ActivityIndicator,
|
||||
} from 'react-native';
|
||||
import { useLocalSearchParams, useRouter } from 'expo-router';
|
||||
import api from '../../src/services/api';
|
||||
import { Device } from '../../src/types';
|
||||
|
||||
export default function DeviceDetailsScreen() {
|
||||
const router = useRouter();
|
||||
const { id: deviceId } = useLocalSearchParams<{ id: string }>();
|
||||
|
||||
const [device, setDevice] = useState<Device | null>(null);
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
mac: '',
|
||||
ip: '',
|
||||
netmask: '',
|
||||
broadcast: '',
|
||||
secureOnPassword: '',
|
||||
port: '',
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
loadDevice();
|
||||
}, [deviceId]);
|
||||
|
||||
const loadDevice = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const data = await api.getDevice(deviceId);
|
||||
setDevice(data);
|
||||
setFormData({
|
||||
name: data.name,
|
||||
mac: data.mac,
|
||||
ip: data.ip,
|
||||
netmask: data.netmask || '',
|
||||
broadcast: data.broadcast || '',
|
||||
secureOnPassword: data.secureOnPassword || '',
|
||||
port: String(data.port),
|
||||
});
|
||||
} catch (error: any) {
|
||||
Alert.alert('Error', error.message || 'Failed to load device');
|
||||
router.back();
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!formData.name || !formData.mac || !formData.ip) {
|
||||
Alert.alert('Error', 'Please fill in all required fields');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSaving(true);
|
||||
try {
|
||||
await api.updateDevice(deviceId, {
|
||||
name: formData.name,
|
||||
mac: formData.mac,
|
||||
ip: formData.ip,
|
||||
netmask: formData.netmask,
|
||||
broadcast: formData.broadcast,
|
||||
secureOnPassword: formData.secureOnPassword,
|
||||
port: parseInt(formData.port) || 9,
|
||||
});
|
||||
setIsEditing(false);
|
||||
await loadDevice();
|
||||
Alert.alert('Success', 'Device updated successfully');
|
||||
} catch (error: any) {
|
||||
Alert.alert('Error', error.message || 'Failed to update device');
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
Alert.alert(
|
||||
'Delete Device',
|
||||
'Are you sure you want to delete this device?',
|
||||
[
|
||||
{ text: 'Cancel', style: 'cancel' },
|
||||
{
|
||||
text: 'Delete',
|
||||
style: 'destructive',
|
||||
onPress: async () => {
|
||||
try {
|
||||
await api.deleteDevice(deviceId);
|
||||
Alert.alert('Success', 'Device deleted successfully');
|
||||
router.back();
|
||||
} catch (error: any) {
|
||||
Alert.alert('Error', error.message || 'Failed to delete device');
|
||||
}
|
||||
},
|
||||
},
|
||||
]
|
||||
);
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<View style={styles.loadingContainer}>
|
||||
<ActivityIndicator size="large" color="#007AFF" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ScrollView style={styles.container}>
|
||||
<View style={styles.content}>
|
||||
{isEditing ? (
|
||||
<View style={styles.form}>
|
||||
<Text style={styles.label}>Device Name *</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={formData.name}
|
||||
onChangeText={(text) => setFormData({ ...formData, name: text })}
|
||||
placeholder="Device name"
|
||||
/>
|
||||
|
||||
<Text style={styles.label}>MAC Address *</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={formData.mac}
|
||||
onChangeText={(text) => setFormData({ ...formData, mac: text })}
|
||||
placeholder="00:11:22:33:44:55"
|
||||
autoCapitalize="characters"
|
||||
/>
|
||||
|
||||
<Text style={styles.label}>IP Address *</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={formData.ip}
|
||||
onChangeText={(text) => setFormData({ ...formData, ip: text })}
|
||||
placeholder="192.168.1.100"
|
||||
keyboardType="numeric"
|
||||
/>
|
||||
|
||||
<Text style={styles.label}>Netmask</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={formData.netmask}
|
||||
onChangeText={(text) => setFormData({ ...formData, netmask: text })}
|
||||
placeholder="255.255.255.0"
|
||||
keyboardType="numeric"
|
||||
/>
|
||||
|
||||
<Text style={styles.label}>Broadcast Address</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={formData.broadcast}
|
||||
onChangeText={(text) => setFormData({ ...formData, broadcast: text })}
|
||||
placeholder="192.168.1.255"
|
||||
keyboardType="numeric"
|
||||
/>
|
||||
|
||||
<Text style={styles.label}>SecureOn Password</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={formData.secureOnPassword}
|
||||
onChangeText={(text) => setFormData({ ...formData, secureOnPassword: text })}
|
||||
placeholder="Optional password"
|
||||
/>
|
||||
|
||||
<Text style={styles.label}>Port</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={formData.port}
|
||||
onChangeText={(text) => setFormData({ ...formData, port: text })}
|
||||
placeholder="9"
|
||||
keyboardType="numeric"
|
||||
/>
|
||||
|
||||
<View style={styles.buttonGroup}>
|
||||
<TouchableOpacity
|
||||
style={[styles.button, styles.saveButton]}
|
||||
onPress={handleSave}
|
||||
disabled={isSaving}
|
||||
>
|
||||
<Text style={styles.buttonText}>
|
||||
{isSaving ? 'Saving...' : 'Save'}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={[styles.button, styles.cancelButton]}
|
||||
onPress={() => {
|
||||
setIsEditing(false);
|
||||
setFormData({
|
||||
name: device!.name,
|
||||
mac: device!.mac,
|
||||
ip: device!.ip,
|
||||
netmask: device!.netmask || '',
|
||||
broadcast: device!.broadcast || '',
|
||||
secureOnPassword: device!.secureOnPassword || '',
|
||||
port: String(device!.port),
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Text style={styles.buttonText}>Cancel</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
) : (
|
||||
<View style={styles.details}>
|
||||
<View style={styles.detailRow}>
|
||||
<Text style={styles.detailLabel}>Name</Text>
|
||||
<Text style={styles.detailValue}>{device?.name}</Text>
|
||||
</View>
|
||||
<View style={styles.detailRow}>
|
||||
<Text style={styles.detailLabel}>MAC Address</Text>
|
||||
<Text style={styles.detailValue}>{device?.mac}</Text>
|
||||
</View>
|
||||
<View style={styles.detailRow}>
|
||||
<Text style={styles.detailLabel}>IP Address</Text>
|
||||
<Text style={styles.detailValue}>{device?.ip}</Text>
|
||||
</View>
|
||||
<View style={styles.detailRow}>
|
||||
<Text style={styles.detailLabel}>Netmask</Text>
|
||||
<Text style={styles.detailValue}>{device?.netmask || 'N/A'}</Text>
|
||||
</View>
|
||||
<View style={styles.detailRow}>
|
||||
<Text style={styles.detailLabel}>Broadcast</Text>
|
||||
<Text style={styles.detailValue}>{device?.broadcast || 'N/A'}</Text>
|
||||
</View>
|
||||
<View style={styles.detailRow}>
|
||||
<Text style={styles.detailLabel}>Port</Text>
|
||||
<Text style={styles.detailValue}>{device?.port}</Text>
|
||||
</View>
|
||||
<View style={styles.detailRow}>
|
||||
<Text style={styles.detailLabel}>Status</Text>
|
||||
<Text style={styles.detailValue}>{device?.status}</Text>
|
||||
</View>
|
||||
<View style={styles.detailRow}>
|
||||
<Text style={styles.detailLabel}>Groups</Text>
|
||||
<Text style={styles.detailValue}>
|
||||
{device?.groups?.join(', ') || 'None'}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.buttonGroup}>
|
||||
<TouchableOpacity
|
||||
style={[styles.button, styles.editButton]}
|
||||
onPress={() => setIsEditing(true)}
|
||||
>
|
||||
<Text style={styles.buttonText}>Edit</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={[styles.button, styles.deleteButton]}
|
||||
onPress={handleDelete}
|
||||
>
|
||||
<Text style={styles.buttonText}>Delete</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#f5f5f5',
|
||||
},
|
||||
loadingContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
content: {
|
||||
padding: 20,
|
||||
},
|
||||
form: {
|
||||
gap: 15,
|
||||
},
|
||||
details: {
|
||||
gap: 20,
|
||||
},
|
||||
label: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: '#333',
|
||||
marginBottom: 5,
|
||||
},
|
||||
input: {
|
||||
backgroundColor: '#fff',
|
||||
borderWidth: 1,
|
||||
borderColor: '#ddd',
|
||||
borderRadius: 8,
|
||||
padding: 12,
|
||||
fontSize: 16,
|
||||
},
|
||||
detailRow: {
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: 8,
|
||||
padding: 15,
|
||||
borderWidth: 1,
|
||||
borderColor: '#e0e0e0',
|
||||
},
|
||||
detailLabel: {
|
||||
fontSize: 14,
|
||||
color: '#666',
|
||||
marginBottom: 4,
|
||||
},
|
||||
detailValue: {
|
||||
fontSize: 16,
|
||||
color: '#333',
|
||||
fontWeight: '500',
|
||||
},
|
||||
buttonGroup: {
|
||||
flexDirection: 'row',
|
||||
gap: 10,
|
||||
marginTop: 20,
|
||||
},
|
||||
button: {
|
||||
flex: 1,
|
||||
paddingVertical: 15,
|
||||
borderRadius: 8,
|
||||
alignItems: 'center',
|
||||
},
|
||||
saveButton: {
|
||||
backgroundColor: '#4CAF50',
|
||||
},
|
||||
cancelButton: {
|
||||
backgroundColor: '#999',
|
||||
},
|
||||
editButton: {
|
||||
backgroundColor: '#007AFF',
|
||||
},
|
||||
deleteButton: {
|
||||
backgroundColor: '#f44336',
|
||||
},
|
||||
buttonText: {
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
});
|
||||
21
app/index.tsx
Normal file
21
app/index.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
import { useRouter } from "expo-router";
|
||||
import { StatusBar } from "expo-status-bar";
|
||||
import React, { useEffect } from "react";
|
||||
import { useAuth } from "../src/context/AuthContext";
|
||||
|
||||
export default function IndexRedirect() {
|
||||
const router = useRouter();
|
||||
const { isAuthenticated, isLoading } = useAuth();
|
||||
|
||||
useEffect(() => {
|
||||
if (!isLoading) {
|
||||
if (isAuthenticated) {
|
||||
router.replace("/(tabs)");
|
||||
} else {
|
||||
router.replace("/login");
|
||||
}
|
||||
}
|
||||
}, [isAuthenticated, isLoading, router]);
|
||||
|
||||
return <StatusBar style="auto" />;
|
||||
}
|
||||
358
app/login.tsx
358
app/login.tsx
@@ -1,174 +1,212 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useRouter } from "expo-router";
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
StyleSheet,
|
||||
Alert,
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
ScrollView,
|
||||
} from 'react-native';
|
||||
import { useAuth } from '../src/context/AuthContext';
|
||||
import { useRouter } from 'expo-router';
|
||||
Alert,
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native";
|
||||
import { useColorScheme } from "../hooks/use-color-scheme";
|
||||
import { useAuth } from "../src/context/AuthContext";
|
||||
|
||||
export default function LoginScreen() {
|
||||
const router = useRouter();
|
||||
const [identity, setIdentity] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [isSuperuser, setIsSuperuser] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const { login } = useAuth();
|
||||
const router = useRouter();
|
||||
const colorScheme = useColorScheme() ?? "light";
|
||||
const isDark = colorScheme === "dark";
|
||||
const bgColor = isDark ? "#0b0b0d" : "#f5f5f5";
|
||||
const textColor = isDark ? "#fff" : "#333";
|
||||
const subText = isDark ? "#c6c6c8" : "#666";
|
||||
const inputBg = isDark ? "rgba(255,255,255,0.04)" : "#fff";
|
||||
const borderColor = isDark ? "rgba(255,255,255,0.06)" : "#ddd";
|
||||
const primary = isDark ? "#0A84FF" : "#007AFF";
|
||||
|
||||
const handleLogin = async () => {
|
||||
if (!identity || !password) {
|
||||
Alert.alert('Error', 'Please enter both identity and password');
|
||||
return;
|
||||
}
|
||||
const { serverAddress: storedServerAddress, login } = useAuth();
|
||||
const [serverAddress, setServerAddress] = useState(storedServerAddress || "");
|
||||
const [identity, setIdentity] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await login(identity, password, isSuperuser);
|
||||
router.replace('/');
|
||||
} catch (error: any) {
|
||||
Alert.alert('Login Failed', error.message || 'An error occurred');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
const handleLogin = async () => {
|
||||
if (!serverAddress || !identity || !password) {
|
||||
Alert.alert("Error", "Please enter server address, identity, and password");
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
style={styles.container}
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
||||
>
|
||||
<ScrollView contentContainerStyle={styles.scrollContent}>
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.title}>UpSnap</Text>
|
||||
<Text style={styles.subtitle}>Wake on LAN Mobile</Text>
|
||||
</View>
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await login(serverAddress, identity, password);
|
||||
router.replace("/");
|
||||
} catch (error: any) {
|
||||
Alert.alert("Login Failed", error.message || "An error occurred");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
<View style={styles.form}>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Username or Email"
|
||||
value={identity}
|
||||
onChangeText={setIdentity}
|
||||
autoCapitalize="none"
|
||||
autoCorrect={false}
|
||||
/>
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
style={[styles.container, { backgroundColor: bgColor }]}
|
||||
behavior={Platform.OS === "ios" ? "padding" : "height"}
|
||||
>
|
||||
<ScrollView contentContainerStyle={styles.scrollContent}>
|
||||
<View style={styles.header}>
|
||||
<Text style={[styles.title, { color: textColor }]}>Remote WoL</Text>
|
||||
<Text style={[styles.subtitle, { color: subText }]}>
|
||||
Mobile Frontend for UpSnap
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Password"
|
||||
value={password}
|
||||
onChangeText={setPassword}
|
||||
secureTextEntry
|
||||
autoCapitalize="none"
|
||||
/>
|
||||
<View style={styles.form}>
|
||||
<TextInput
|
||||
style={[
|
||||
styles.input,
|
||||
{ backgroundColor: inputBg, borderColor, color: textColor },
|
||||
]}
|
||||
placeholder="Server Address"
|
||||
placeholderTextColor={subText}
|
||||
value={serverAddress}
|
||||
onChangeText={setServerAddress}
|
||||
autoCapitalize="none"
|
||||
autoCorrect={false}
|
||||
selectionColor={primary}
|
||||
keyboardAppearance={isDark ? "dark" : "light"}
|
||||
/>
|
||||
|
||||
<TouchableOpacity
|
||||
style={styles.checkboxContainer}
|
||||
onPress={() => setIsSuperuser(!isSuperuser)}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<View style={[styles.checkbox, isSuperuser && styles.checkboxChecked]}>
|
||||
{isSuperuser && <Text style={styles.checkmark}>✓</Text>}
|
||||
</View>
|
||||
<Text style={styles.checkboxLabel}>Login as Admin</Text>
|
||||
</TouchableOpacity>
|
||||
<TextInput
|
||||
style={[
|
||||
styles.input,
|
||||
{ backgroundColor: inputBg, borderColor, color: textColor },
|
||||
]}
|
||||
placeholder="Username or Email"
|
||||
placeholderTextColor={subText}
|
||||
value={identity}
|
||||
onChangeText={setIdentity}
|
||||
autoCapitalize="none"
|
||||
autoCorrect={false}
|
||||
selectionColor={primary}
|
||||
keyboardAppearance={isDark ? "dark" : "light"}
|
||||
/>
|
||||
|
||||
<TouchableOpacity
|
||||
style={[styles.button, isLoading && styles.buttonDisabled]}
|
||||
onPress={handleLogin}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<Text style={styles.buttonText}>
|
||||
{isLoading ? 'Logging in...' : 'Login'}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
<TextInput
|
||||
style={[
|
||||
styles.input,
|
||||
{ backgroundColor: inputBg, borderColor, color: textColor },
|
||||
]}
|
||||
placeholder="Password"
|
||||
placeholderTextColor={subText}
|
||||
value={password}
|
||||
onChangeText={setPassword}
|
||||
secureTextEntry
|
||||
autoCapitalize="none"
|
||||
selectionColor={primary}
|
||||
keyboardAppearance={isDark ? "dark" : "light"}
|
||||
/>
|
||||
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.button,
|
||||
isLoading && styles.buttonDisabled,
|
||||
{
|
||||
backgroundColor: isLoading
|
||||
? isDark
|
||||
? "#333"
|
||||
: "#ccc"
|
||||
: primary,
|
||||
},
|
||||
]}
|
||||
onPress={handleLogin}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<Text style={[styles.buttonText, { color: "#fff" }]}>
|
||||
{isLoading ? "Logging in..." : "Login"}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#f5f5f5',
|
||||
},
|
||||
scrollContent: {
|
||||
flexGrow: 1,
|
||||
justifyContent: 'center',
|
||||
padding: 20,
|
||||
},
|
||||
header: {
|
||||
alignItems: 'center',
|
||||
marginBottom: 40,
|
||||
},
|
||||
title: {
|
||||
fontSize: 32,
|
||||
fontWeight: 'bold',
|
||||
color: '#333',
|
||||
marginBottom: 8,
|
||||
},
|
||||
subtitle: {
|
||||
fontSize: 16,
|
||||
color: '#666',
|
||||
},
|
||||
form: {
|
||||
width: '100%',
|
||||
},
|
||||
input: {
|
||||
backgroundColor: '#fff',
|
||||
borderWidth: 1,
|
||||
borderColor: '#ddd',
|
||||
borderRadius: 8,
|
||||
padding: 15,
|
||||
fontSize: 16,
|
||||
marginBottom: 15,
|
||||
},
|
||||
checkboxContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginBottom: 20,
|
||||
},
|
||||
checkbox: {
|
||||
width: 24,
|
||||
height: 24,
|
||||
borderWidth: 2,
|
||||
borderColor: '#007AFF',
|
||||
borderRadius: 4,
|
||||
marginRight: 10,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
checkboxChecked: {
|
||||
backgroundColor: '#007AFF',
|
||||
},
|
||||
checkmark: {
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
checkboxLabel: {
|
||||
fontSize: 16,
|
||||
color: '#333',
|
||||
},
|
||||
button: {
|
||||
backgroundColor: '#007AFF',
|
||||
borderRadius: 8,
|
||||
padding: 15,
|
||||
alignItems: 'center',
|
||||
},
|
||||
buttonDisabled: {
|
||||
backgroundColor: '#ccc',
|
||||
},
|
||||
buttonText: {
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: "#f5f5f5",
|
||||
},
|
||||
scrollContent: {
|
||||
flexGrow: 1,
|
||||
justifyContent: "center",
|
||||
padding: 20,
|
||||
},
|
||||
header: {
|
||||
alignItems: "center",
|
||||
marginBottom: 40,
|
||||
},
|
||||
title: {
|
||||
fontSize: 32,
|
||||
fontWeight: "bold",
|
||||
color: "#333",
|
||||
marginBottom: 8,
|
||||
},
|
||||
subtitle: {
|
||||
fontSize: 16,
|
||||
color: "#666",
|
||||
},
|
||||
form: {
|
||||
width: "100%",
|
||||
},
|
||||
input: {
|
||||
backgroundColor: "#fff",
|
||||
borderWidth: 1,
|
||||
borderColor: "#ddd",
|
||||
borderRadius: 8,
|
||||
padding: 15,
|
||||
fontSize: 16,
|
||||
marginBottom: 15,
|
||||
},
|
||||
checkboxContainer: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
marginBottom: 20,
|
||||
},
|
||||
checkbox: {
|
||||
width: 24,
|
||||
height: 24,
|
||||
borderWidth: 2,
|
||||
borderColor: "#007AFF",
|
||||
borderRadius: 4,
|
||||
marginRight: 10,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
checkboxChecked: {
|
||||
backgroundColor: "#007AFF",
|
||||
},
|
||||
checkmark: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
checkboxLabel: {
|
||||
fontSize: 16,
|
||||
color: "#333",
|
||||
},
|
||||
button: {
|
||||
backgroundColor: "#007AFF",
|
||||
borderRadius: 8,
|
||||
padding: 15,
|
||||
alignItems: "center",
|
||||
},
|
||||
buttonDisabled: {
|
||||
backgroundColor: "#ccc",
|
||||
},
|
||||
buttonText: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,433 +1,356 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useRouter } from "expo-router";
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
FlatList,
|
||||
TouchableOpacity,
|
||||
StyleSheet,
|
||||
Alert,
|
||||
ActivityIndicator,
|
||||
Modal,
|
||||
TextInput,
|
||||
ScrollView,
|
||||
} from 'react-native';
|
||||
import { useRouter } from 'expo-router';
|
||||
import api from '../src/services/api';
|
||||
import { NetworkScanResult } from '../src/types';
|
||||
ActivityIndicator,
|
||||
Alert,
|
||||
FlatList,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native";
|
||||
import { useColorScheme } from "../hooks/use-color-scheme";
|
||||
import api from "../src/services/api";
|
||||
import { NetworkScanResult } from "../src/types";
|
||||
import { SymbolView } from "expo-symbols";
|
||||
import * as Burnt from "burnt";
|
||||
|
||||
export default function ScanDevicesScreen() {
|
||||
const router = useRouter();
|
||||
const [scanning, setScanning] = useState(false);
|
||||
const [devices, setDevices] = useState<NetworkScanResult[]>([]);
|
||||
const [selectedDevice, setSelectedDevice] = useState<NetworkScanResult | null>(null);
|
||||
const [showAddModal, setShowAddModal] = useState(false);
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
mac: '',
|
||||
ip: '',
|
||||
netmask: '255.255.255.0',
|
||||
broadcast: '',
|
||||
secureOnPassword: '',
|
||||
port: '9',
|
||||
});
|
||||
const router = useRouter();
|
||||
const colorScheme = useColorScheme() ?? "light";
|
||||
const isDark = colorScheme === "dark";
|
||||
const bgColor = isDark ? "#0b0b0d" : "#f5f5f5";
|
||||
const cardBg = isDark ? "rgba(255,255,255,0.04)" : "rgba(255, 255, 255, 0.8)";
|
||||
const primary = isDark ? "#0A84FF" : "#007AFF";
|
||||
const primaryPressed = isDark ? "#004BB5" : "#0051CC";
|
||||
const textColor = isDark ? "#fff" : "#333";
|
||||
const subText = isDark ? "#c6c6c8" : "#666";
|
||||
|
||||
const handleScan = async () => {
|
||||
setScanning(true);
|
||||
try {
|
||||
const results = await api.scanNetwork();
|
||||
setDevices(results);
|
||||
} catch (error: any) {
|
||||
Alert.alert('Error', error.message || 'Failed to scan network');
|
||||
} finally {
|
||||
setScanning(false);
|
||||
}
|
||||
};
|
||||
const [scanning, setScanning] = useState(false);
|
||||
const [devices, setDevices] = useState<NetworkScanResult[]>([]);
|
||||
|
||||
const handleAddFromScan = (device: NetworkScanResult) => {
|
||||
const deviceName = device.name || device.hostname || `Device ${device.ip || device.ip_address}`;
|
||||
const deviceIP = device.ip || device.ip_address || '';
|
||||
const deviceMAC = device.mac || device.mac_address || '';
|
||||
const deviceVendor = device.mac_vendor || '';
|
||||
|
||||
setFormData({
|
||||
name: deviceName,
|
||||
mac: deviceMAC,
|
||||
ip: deviceIP,
|
||||
netmask: '255.255.255.0',
|
||||
broadcast: '',
|
||||
secureOnPassword: '',
|
||||
port: '9',
|
||||
});
|
||||
setSelectedDevice(device);
|
||||
setShowAddModal(true);
|
||||
};
|
||||
const handleScan = async () => {
|
||||
setScanning(true);
|
||||
try {
|
||||
const results = await api.scanNetwork();
|
||||
setDevices(results);
|
||||
} catch (error: any) {
|
||||
Alert.alert("Error", error.message || "Failed to scan network");
|
||||
} finally {
|
||||
setScanning(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveDevice = async () => {
|
||||
if (!formData.name || !formData.mac || !formData.ip) {
|
||||
Alert.alert('Error', 'Please fill in all required fields');
|
||||
return;
|
||||
}
|
||||
const handleAddFromScan = async (device: NetworkScanResult) => {
|
||||
const deviceName =
|
||||
device.name ||
|
||||
device.hostname ||
|
||||
`Device ${device.ip || device.ip_address}`;
|
||||
const deviceIP = device.ip || device.ip_address || "";
|
||||
const deviceMAC = device.mac || device.mac_address || "";
|
||||
|
||||
try {
|
||||
await api.createDevice({
|
||||
name: formData.name,
|
||||
mac: formData.mac,
|
||||
ip: formData.ip,
|
||||
netmask: formData.netmask,
|
||||
broadcast: formData.broadcast,
|
||||
secureOnPassword: formData.secureOnPassword,
|
||||
port: parseInt(formData.port) || 9,
|
||||
groups: [],
|
||||
status: 'offline',
|
||||
});
|
||||
Alert.alert('Success', 'Device added successfully');
|
||||
setShowAddModal(false);
|
||||
router.back();
|
||||
} catch (error: any) {
|
||||
Alert.alert('Error', error.message || 'Failed to add device');
|
||||
}
|
||||
};
|
||||
try {
|
||||
await api.createDevice({
|
||||
name: deviceName,
|
||||
mac: deviceMAC,
|
||||
ip: deviceIP,
|
||||
netmask: "255.255.255.0",
|
||||
broadcast: "",
|
||||
secureOnPassword: "",
|
||||
port: 9,
|
||||
groups: [],
|
||||
status: "offline",
|
||||
});
|
||||
Burnt.toast({
|
||||
title: "Success",
|
||||
preset: "done",
|
||||
message: `Added ${deviceName} successfully`,
|
||||
});
|
||||
router.back();
|
||||
} catch (error: any) {
|
||||
Burnt.toast({
|
||||
title: "Error",
|
||||
preset: "error",
|
||||
message: error.message || "Failed to add device",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const renderDevice = ({ item }: { item: NetworkScanResult }) => {
|
||||
const displayName = item.name || item.hostname || 'Unknown Device';
|
||||
const displayIP = item.ip || item.ip_address || '';
|
||||
const displayMAC = item.mac || item.mac_address || '';
|
||||
const displayVendor = item.mac_vendor || '';
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={styles.deviceCard}
|
||||
onPress={() => handleAddFromScan(item)}
|
||||
>
|
||||
<View style={styles.deviceInfo}>
|
||||
<Text style={styles.deviceName} numberOfLines={1}>{displayName}</Text>
|
||||
<Text style={styles.deviceDetail}>{displayIP}</Text>
|
||||
<Text style={styles.deviceDetail}>{displayMAC}</Text>
|
||||
{displayVendor && displayVendor !== 'Unknown' && (
|
||||
<Text style={styles.vendorText}>{displayVendor}</Text>
|
||||
)}
|
||||
</View>
|
||||
<View style={styles.addButton}>
|
||||
<Text style={styles.addButtonText}>+</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
const renderDevice = ({ item }: { item: NetworkScanResult }) => {
|
||||
const displayName = item.name || item.hostname || "Unknown Device";
|
||||
const displayIP = item.ip || item.ip_address || "";
|
||||
const displayMAC = item.mac || item.mac_address || "";
|
||||
const displayVendor = item.mac_vendor || "";
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.headerText}>Network Scan</Text>
|
||||
<Text style={styles.headerSubtext}>
|
||||
Discover devices on your local network
|
||||
</Text>
|
||||
</View>
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
styles.deviceCard,
|
||||
{
|
||||
backgroundColor: cardBg,
|
||||
shadowColor: isDark ? "rgba(255,255,255,0.02)" : "#000",
|
||||
},
|
||||
]}
|
||||
>
|
||||
<View style={styles.deviceInfo}>
|
||||
<Text
|
||||
style={[styles.deviceName, { color: textColor }]}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{displayName}
|
||||
</Text>
|
||||
<Text style={[styles.deviceDetail, { color: subText }]}>
|
||||
{displayIP}
|
||||
</Text>
|
||||
<Text style={[styles.deviceDetail, { color: subText }]}>
|
||||
{displayMAC}
|
||||
</Text>
|
||||
{displayVendor && displayVendor !== "Unknown" && (
|
||||
<Text style={[styles.vendorText, { color: subText }]}>
|
||||
{displayVendor}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
<TouchableOpacity onPress={() => handleAddFromScan(item)}>
|
||||
<SymbolView
|
||||
name="plus.circle.fill"
|
||||
size={20}
|
||||
type="hierarchical"
|
||||
style={styles.addButton}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
<TouchableOpacity
|
||||
style={[styles.scanButton, scanning && styles.scanButtonDisabled]}
|
||||
onPress={handleScan}
|
||||
disabled={scanning}
|
||||
>
|
||||
{scanning ? (
|
||||
<ActivityIndicator color="#fff" />
|
||||
) : (
|
||||
<Text style={styles.scanButtonText}>Scan Network</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
return (
|
||||
<View style={[styles.container, { backgroundColor: bgColor }]}>
|
||||
<View style={styles.header}>
|
||||
<Text style={[styles.headerText, { color: textColor }]}>
|
||||
Add Devices
|
||||
</Text>
|
||||
<Text style={[styles.headerSubtext, { color: subText }]}>
|
||||
Discover devices on your local network
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<Text style={styles.infoText}>
|
||||
Note: This requires the server to have nmap installed and may take several minutes.
|
||||
</Text>
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.scanButton,
|
||||
{
|
||||
backgroundColor: scanning ? primaryPressed : primary,
|
||||
},
|
||||
]}
|
||||
onPress={handleScan}
|
||||
disabled={scanning}
|
||||
>
|
||||
{scanning ? (
|
||||
<ActivityIndicator color="#fff" />
|
||||
) : (
|
||||
<Text style={[styles.scanButtonText, { color: "#fff" }]}>
|
||||
Scan Network
|
||||
</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
|
||||
{devices.length > 0 && (
|
||||
<View style={styles.resultsContainer}>
|
||||
<Text style={styles.resultsHeader}>Discovered Devices ({devices.length})</Text>
|
||||
<FlatList
|
||||
data={devices}
|
||||
renderItem={renderDevice}
|
||||
keyExtractor={(item, index) => `${item.ip || item.ip_address || index}-${index}`}
|
||||
contentContainerStyle={styles.list}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
<Text style={[styles.infoText, { color: subText }]}>
|
||||
Note: This requires the server to have nmap installed and may take
|
||||
several minutes.
|
||||
</Text>
|
||||
|
||||
{devices.length === 0 && !scanning && (
|
||||
<View style={styles.emptyContainer}>
|
||||
<Text style={styles.emptyText}>Tap "Scan Network" to discover devices</Text>
|
||||
</View>
|
||||
)}
|
||||
{devices.length > 0 && (
|
||||
<View style={styles.resultsContainer}>
|
||||
<Text style={[styles.resultsHeader, { color: textColor }]}>
|
||||
Discovered Devices ({devices.length})
|
||||
</Text>
|
||||
<FlatList
|
||||
data={devices}
|
||||
renderItem={renderDevice}
|
||||
keyExtractor={(item, index) =>
|
||||
`${item.ip || item.ip_address || index}-${index}`
|
||||
}
|
||||
contentContainerStyle={styles.list}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<Modal
|
||||
visible={showAddModal}
|
||||
animationType="slide"
|
||||
transparent
|
||||
onRequestClose={() => setShowAddModal(false)}
|
||||
>
|
||||
<View>
|
||||
<View style={styles.modalContent}>
|
||||
<View style={styles.modalHeader}>
|
||||
<Text style={styles.modalTitle}>Add Device</Text>
|
||||
<TouchableOpacity onPress={() => setShowAddModal(false)}>
|
||||
<Text style={styles.closeButton}>✕</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<ScrollView style={styles.modalBody}>
|
||||
<View style={styles.formGroup}>
|
||||
<Text style={styles.label}>Device Name *</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={formData.name}
|
||||
onChangeText={(text) => setFormData({ ...formData, name: text })}
|
||||
placeholder="Device name"
|
||||
/>
|
||||
{selectedDevice?.mac_vendor && (
|
||||
<Text style={styles.hint}>
|
||||
Vendor: {selectedDevice.mac_vendor}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View style={styles.formGroup}>
|
||||
<Text style={styles.label}>MAC Address *</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={formData.mac}
|
||||
onChangeText={(text) => setFormData({ ...formData, mac: text })}
|
||||
placeholder="00:11:22:33:44:55"
|
||||
autoCapitalize="characters"
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.formGroup}>
|
||||
<Text style={styles.label}>IP Address *</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={formData.ip}
|
||||
onChangeText={(text) => setFormData({ ...formData, ip: text })}
|
||||
placeholder="192.168.1.100"
|
||||
keyboardType="numeric"
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.formGroup}>
|
||||
<Text style={styles.label}>Netmask</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={formData.netmask}
|
||||
onChangeText={(text) => setFormData({ ...formData, netmask: text })}
|
||||
placeholder="255.255.255.0"
|
||||
keyboardType="numeric"
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.formGroup}>
|
||||
<Text style={styles.label}>Broadcast Address</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={formData.broadcast}
|
||||
onChangeText={(text) => setFormData({ ...formData, broadcast: text })}
|
||||
placeholder="192.168.1.255"
|
||||
keyboardType="numeric"
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.formGroup}>
|
||||
<Text style={styles.label}>Port</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={formData.port}
|
||||
onChangeText={(text) => setFormData({ ...formData, port: text })}
|
||||
placeholder="9"
|
||||
keyboardType="numeric"
|
||||
/>
|
||||
</View>
|
||||
|
||||
<TouchableOpacity
|
||||
style={styles.saveButton}
|
||||
onPress={handleSaveDevice}
|
||||
>
|
||||
<Text style={styles.saveButtonText}>Add Device</Text>
|
||||
</TouchableOpacity>
|
||||
</ScrollView>
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
</View>
|
||||
);
|
||||
{devices.length === 0 && !scanning && (
|
||||
<View style={styles.emptyContainer}>
|
||||
<Text style={styles.emptyText}>
|
||||
Tap "Scan Network" to discover devices
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#f5f5f5',
|
||||
padding: 20,
|
||||
},
|
||||
header: {
|
||||
marginBottom: 20,
|
||||
},
|
||||
headerText: {
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold',
|
||||
color: '#333',
|
||||
marginBottom: 5,
|
||||
},
|
||||
headerSubtext: {
|
||||
fontSize: 14,
|
||||
color: '#666',
|
||||
},
|
||||
scanButton: {
|
||||
backgroundColor: '#007AFF',
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
alignItems: 'center',
|
||||
marginBottom: 15,
|
||||
},
|
||||
scanButtonDisabled: {
|
||||
backgroundColor: '#ccc',
|
||||
},
|
||||
scanButtonText: {
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
infoText: {
|
||||
fontSize: 12,
|
||||
color: '#999',
|
||||
textAlign: 'center',
|
||||
marginBottom: 20,
|
||||
},
|
||||
resultsContainer: {
|
||||
flex: 1,
|
||||
},
|
||||
resultsHeader: {
|
||||
fontSize: 18,
|
||||
fontWeight: 'bold',
|
||||
color: '#333',
|
||||
marginBottom: 15,
|
||||
},
|
||||
list: {
|
||||
gap: 10,
|
||||
},
|
||||
deviceCard: {
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.8)',
|
||||
borderRadius: 16,
|
||||
padding: 15,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 8,
|
||||
elevation: 3,
|
||||
},
|
||||
deviceInfo: {
|
||||
flex: 1,
|
||||
},
|
||||
deviceName: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
color: '#333',
|
||||
marginBottom: 4,
|
||||
},
|
||||
deviceDetail: {
|
||||
fontSize: 14,
|
||||
color: '#666',
|
||||
marginBottom: 2,
|
||||
},
|
||||
vendorText: {
|
||||
fontSize: 12,
|
||||
color: '#999',
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
addButton: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
backgroundColor: 'rgba(76, 175, 80, 0.9)',
|
||||
borderRadius: 22,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
addButtonText: {
|
||||
color: '#fff',
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
emptyContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
emptyText: {
|
||||
fontSize: 16,
|
||||
color: '#999',
|
||||
textAlign: 'center',
|
||||
},
|
||||
modalBlur: {
|
||||
flex: 1,
|
||||
justifyContent: 'flex-end',
|
||||
},
|
||||
modalContent: {
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
||||
borderTopLeftRadius: 24,
|
||||
borderTopRightRadius: 24,
|
||||
maxHeight: '90%',
|
||||
},
|
||||
modalHeader: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: 20,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: 'rgba(0, 0, 0, 0.1)',
|
||||
},
|
||||
modalTitle: {
|
||||
fontSize: 20,
|
||||
fontWeight: 'bold',
|
||||
color: '#333',
|
||||
},
|
||||
closeButton: {
|
||||
fontSize: 24,
|
||||
color: '#999',
|
||||
padding: 8,
|
||||
},
|
||||
modalBody: {
|
||||
padding: 20,
|
||||
},
|
||||
formGroup: {
|
||||
marginBottom: 16,
|
||||
},
|
||||
label: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: '#333',
|
||||
marginBottom: 8,
|
||||
},
|
||||
input: {
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.8)',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(0, 0, 0, 0.1)',
|
||||
borderRadius: 12,
|
||||
padding: 14,
|
||||
fontSize: 16,
|
||||
},
|
||||
hint: {
|
||||
fontSize: 12,
|
||||
color: '#666',
|
||||
marginTop: 4,
|
||||
},
|
||||
saveButton: {
|
||||
backgroundColor: '#4CAF50',
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
alignItems: 'center',
|
||||
marginTop: 10,
|
||||
},
|
||||
saveButtonText: {
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: "#f5f5f5",
|
||||
padding: 20,
|
||||
},
|
||||
header: {
|
||||
marginBottom: 20,
|
||||
},
|
||||
headerText: {
|
||||
fontSize: 24,
|
||||
fontWeight: "bold",
|
||||
color: "#333",
|
||||
marginBottom: 5,
|
||||
},
|
||||
headerSubtext: {
|
||||
fontSize: 14,
|
||||
color: "#666",
|
||||
},
|
||||
scanButton: {
|
||||
backgroundColor: "#007AFF",
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
alignItems: "center",
|
||||
marginBottom: 15,
|
||||
},
|
||||
scanButtonText: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
infoText: {
|
||||
fontSize: 12,
|
||||
color: "#999",
|
||||
textAlign: "center",
|
||||
marginBottom: 20,
|
||||
},
|
||||
resultsContainer: {
|
||||
flex: 1,
|
||||
},
|
||||
resultsHeader: {
|
||||
fontSize: 18,
|
||||
fontWeight: "bold",
|
||||
color: "#333",
|
||||
marginBottom: 15,
|
||||
},
|
||||
list: {
|
||||
gap: 10,
|
||||
},
|
||||
deviceCard: {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.8)",
|
||||
borderRadius: 16,
|
||||
padding: 15,
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
shadowColor: "#000",
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 8,
|
||||
elevation: 3,
|
||||
},
|
||||
deviceInfo: {
|
||||
flex: 1,
|
||||
},
|
||||
deviceName: {
|
||||
fontSize: 16,
|
||||
fontWeight: "bold",
|
||||
color: "#333",
|
||||
marginBottom: 4,
|
||||
},
|
||||
deviceDetail: {
|
||||
fontSize: 14,
|
||||
color: "#666",
|
||||
marginBottom: 2,
|
||||
},
|
||||
vendorText: {
|
||||
fontSize: 12,
|
||||
color: "#999",
|
||||
fontStyle: "italic",
|
||||
},
|
||||
addButton: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: 22,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
addButtonText: {
|
||||
color: "#fff",
|
||||
fontSize: 24,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
emptyContainer: {
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
emptyText: {
|
||||
fontSize: 16,
|
||||
color: "#999",
|
||||
textAlign: "center",
|
||||
},
|
||||
modalBlur: {
|
||||
flex: 1,
|
||||
justifyContent: "flex-end",
|
||||
},
|
||||
modalContent: {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.95)",
|
||||
borderTopLeftRadius: 24,
|
||||
borderTopRightRadius: 24,
|
||||
maxHeight: "90%",
|
||||
},
|
||||
modalHeader: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
padding: 20,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: "rgba(0, 0, 0, 0.1)",
|
||||
},
|
||||
modalTitle: {
|
||||
fontSize: 20,
|
||||
fontWeight: "bold",
|
||||
color: "#333",
|
||||
},
|
||||
closeButton: {
|
||||
fontSize: 24,
|
||||
color: "#999",
|
||||
padding: 8,
|
||||
},
|
||||
modalBody: {
|
||||
padding: 20,
|
||||
},
|
||||
formGroup: {
|
||||
marginBottom: 16,
|
||||
},
|
||||
label: {
|
||||
fontSize: 14,
|
||||
fontWeight: "600",
|
||||
color: "#333",
|
||||
marginBottom: 8,
|
||||
},
|
||||
input: {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.8)",
|
||||
borderWidth: 1,
|
||||
borderColor: "rgba(0, 0, 0, 0.1)",
|
||||
borderRadius: 12,
|
||||
padding: 14,
|
||||
fontSize: 16,
|
||||
},
|
||||
hint: {
|
||||
fontSize: 12,
|
||||
color: "#666",
|
||||
marginTop: 4,
|
||||
},
|
||||
saveButton: {
|
||||
backgroundColor: "#4CAF50",
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
alignItems: "center",
|
||||
marginTop: 10,
|
||||
},
|
||||
saveButtonText: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user