misc: init
This commit is contained in:
216
README.md
216
README.md
@@ -1,50 +1,200 @@
|
|||||||
# Welcome to your Expo app 👋
|
# UpSnap Mobile
|
||||||
|
|
||||||
This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
|
A React Native Expo app that connects to an UpSnap server and provides mobile access to all Wake-on-LAN features.
|
||||||
|
|
||||||
## Get started
|
## Features
|
||||||
|
|
||||||
1. Install dependencies
|
- 🔌 **Device Management**: View, add, edit, and delete devices
|
||||||
|
- 💤 **Power Control**: Wake, sleep, reboot, and shutdown devices remotely
|
||||||
|
- 🔍 **Network Scanning**: Discover devices on your local network
|
||||||
|
- 👤 **Authentication**: Secure login with username/email and password
|
||||||
|
- 📱 **Mobile-First UI**: Touch-optimized interface designed for phones
|
||||||
|
- 🎨 **Clean Design**: Modern, intuitive interface with visual status indicators
|
||||||
|
|
||||||
```bash
|
## Setup
|
||||||
npm install
|
|
||||||
```
|
|
||||||
|
|
||||||
2. Start the app
|
### Prerequisites
|
||||||
|
|
||||||
```bash
|
- Node.js installed
|
||||||
npx expo start
|
- Expo CLI installed (`npm install -g expo-cli`)
|
||||||
```
|
- An UpSnap server instance running (e.g., https://wol.f6knight.duckdns.org/)
|
||||||
|
|
||||||
In the output, you'll find options to open the app in a
|
### Installation
|
||||||
|
|
||||||
- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
|
|
||||||
- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
|
|
||||||
- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
|
|
||||||
- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
|
|
||||||
|
|
||||||
You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
|
|
||||||
|
|
||||||
## Get a fresh project
|
|
||||||
|
|
||||||
When you're ready, run:
|
|
||||||
|
|
||||||
|
1. Install dependencies:
|
||||||
```bash
|
```bash
|
||||||
npm run reset-project
|
npm install
|
||||||
```
|
```
|
||||||
|
|
||||||
This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
|
2. Start the development server:
|
||||||
|
```bash
|
||||||
|
npm start
|
||||||
|
```
|
||||||
|
|
||||||
## Learn more
|
3. Run on your preferred platform:
|
||||||
|
- iOS: Press `i` in the terminal or run `npm run ios`
|
||||||
|
- Android: Press `a` in the terminal or run `npm run android`
|
||||||
|
- Web: Press `w` in the terminal or run `npm run web`
|
||||||
|
|
||||||
To learn more about developing your project with Expo, look at the following resources:
|
## Usage
|
||||||
|
|
||||||
- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
|
### First Time Setup
|
||||||
- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
|
|
||||||
|
|
||||||
## Join the community
|
1. Open the app
|
||||||
|
2. Enter your UpSnap server credentials:
|
||||||
|
- Username or Email
|
||||||
|
- Password
|
||||||
|
- Check "Login as Admin" if you're an admin user
|
||||||
|
3. Tap "Login"
|
||||||
|
|
||||||
Join our community of developers creating universal apps.
|
### Device Management
|
||||||
|
|
||||||
- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
|
#### Adding a Device
|
||||||
- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.
|
|
||||||
|
1. Tap the "+ Add" button in the Devices screen
|
||||||
|
2. Fill in the required fields:
|
||||||
|
- Device Name (e.g., "My PC")
|
||||||
|
- MAC Address (format: XX:XX:XX:XX:XX:XX)
|
||||||
|
- IP Address
|
||||||
|
- Optional: Netmask, Broadcast Address, SecureOn Password, Port
|
||||||
|
3. Tap "Add Device"
|
||||||
|
|
||||||
|
#### Scanning for Devices
|
||||||
|
|
||||||
|
1. Tap the "Scan" button in the Devices screen
|
||||||
|
2. Wait for the network scan to complete
|
||||||
|
3. Tap on a discovered device to add it to your list
|
||||||
|
|
||||||
|
#### Managing Devices
|
||||||
|
|
||||||
|
- **View Devices**: Scroll through the list on the main screen
|
||||||
|
- **Device Details**: Tap on a device card to view and edit details
|
||||||
|
- **Wake Device**: Tap the green "Wake" button on a device card
|
||||||
|
- **Sleep Device**: Tap the orange "Sleep" button
|
||||||
|
- **Reboot Device**: Tap the blue "Reboot" button
|
||||||
|
- **Shutdown Device**: Tap the red "Shutdown" button
|
||||||
|
|
||||||
|
### Status Indicators
|
||||||
|
|
||||||
|
- 🟢 Green dot: Device is online
|
||||||
|
- 🔴 Red dot: Device is offline
|
||||||
|
- 🟠 Orange dot: Status unknown
|
||||||
|
|
||||||
|
## Screens
|
||||||
|
|
||||||
|
### Login Screen
|
||||||
|
- Username/email and password fields
|
||||||
|
- Admin login option
|
||||||
|
- Persistent authentication using AsyncStorage
|
||||||
|
|
||||||
|
### Devices Screen
|
||||||
|
- List of all devices with status indicators
|
||||||
|
- Quick action buttons for each device
|
||||||
|
- Pull-to-refresh for updating status
|
||||||
|
- Add device and scan network buttons
|
||||||
|
|
||||||
|
### Device Details Screen
|
||||||
|
- View all device information
|
||||||
|
- Edit device details
|
||||||
|
- Delete device option
|
||||||
|
|
||||||
|
### Add Device Screen
|
||||||
|
- Manual device entry form
|
||||||
|
- All required and optional fields
|
||||||
|
- Input validation
|
||||||
|
|
||||||
|
### Scan Devices Screen
|
||||||
|
- Network scanning functionality
|
||||||
|
- List of discovered devices
|
||||||
|
- Quick add to device list
|
||||||
|
|
||||||
|
### Settings Screen
|
||||||
|
- User information display
|
||||||
|
- Server configuration
|
||||||
|
- Logout option
|
||||||
|
- Clear data option
|
||||||
|
|
||||||
|
## API Integration
|
||||||
|
|
||||||
|
The app connects to an UpSnap server via its REST API:
|
||||||
|
|
||||||
|
- **Authentication**: `/api/collections/users/auth-with-password` or `/api/collections/_superusers/auth-with-password`
|
||||||
|
- **Devices**: `/api/collections/devices/records`
|
||||||
|
- **Wake**: `/api/upsnap/wake/:id`
|
||||||
|
- **Sleep**: `/api/collections/upsnap/sleep/:id`
|
||||||
|
- **Reboot**: `/api/upsnap/reboot/:id`
|
||||||
|
- **Shutdown**: `/api/upsnap/shutdown/:id`
|
||||||
|
- **Scan**: `/api/upsnap/scan`
|
||||||
|
|
||||||
|
## Project Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
src/
|
||||||
|
├── components/ # Reusable components
|
||||||
|
├── context/ # React context providers (AuthContext)
|
||||||
|
├── navigation/ # Navigation setup
|
||||||
|
├── screens/ # All app screens
|
||||||
|
│ ├── LoginScreen.tsx
|
||||||
|
│ ├── DeviceListScreen.tsx
|
||||||
|
│ ├── DeviceDetailsScreen.tsx
|
||||||
|
│ ├── AddDeviceScreen.tsx
|
||||||
|
│ ├── ScanDevicesScreen.tsx
|
||||||
|
│ └── SettingsScreen.tsx
|
||||||
|
├── services/ # API service
|
||||||
|
│ └── api.ts
|
||||||
|
└── types/ # TypeScript type definitions
|
||||||
|
└── index.ts
|
||||||
|
```
|
||||||
|
|
||||||
|
## Tech Stack
|
||||||
|
|
||||||
|
- **React Native**: Cross-platform mobile framework
|
||||||
|
- **Expo**: Development platform
|
||||||
|
- **TypeScript**: Type safety
|
||||||
|
- **React Navigation**: Navigation library
|
||||||
|
- **AsyncStorage**: Local data persistence
|
||||||
|
|
||||||
|
## Server Configuration
|
||||||
|
|
||||||
|
The app is pre-configured to connect to:
|
||||||
|
- Server URL: `https://wol.f6knight.duckdns.org`
|
||||||
|
- API Base: `/api`
|
||||||
|
|
||||||
|
To change the server URL, modify the `API_BASE_URL` constant in `src/services/api.ts`.
|
||||||
|
|
||||||
|
## Security Notes
|
||||||
|
|
||||||
|
- Authentication tokens are stored securely in AsyncStorage
|
||||||
|
- All API calls require authentication
|
||||||
|
- Destructive actions (sleep, reboot, shutdown) require confirmation
|
||||||
|
- Never expose your UpSnap server to the open web without proper security measures
|
||||||
|
|
||||||
|
## Troubleshooting
|
||||||
|
|
||||||
|
### Login Issues
|
||||||
|
|
||||||
|
- Verify your username/email and password are correct
|
||||||
|
- Check if you need to log in as admin
|
||||||
|
- Ensure your UpSnap server is accessible
|
||||||
|
|
||||||
|
### Network Scan Issues
|
||||||
|
|
||||||
|
- Network scanning requires the server to have `nmap` installed
|
||||||
|
- Scanning may take several minutes to complete
|
||||||
|
- Make sure your device and server are on the same network
|
||||||
|
|
||||||
|
### Device Control Issues
|
||||||
|
|
||||||
|
- Verify the device's MAC address is correct
|
||||||
|
- Ensure Wake-on-LAN is enabled in the device's BIOS/UEFI
|
||||||
|
- Check that the device is on the same network as the server
|
||||||
|
- For sleep/shutdown/reboot, ensure the device has the required agent installed
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
This project is a mobile companion to UpSnap, which is licensed under the MIT License.
|
||||||
|
|
||||||
|
## Credits
|
||||||
|
|
||||||
|
- UpSnap: https://github.com/seriousm4x/UpSnap
|
||||||
|
- Built with React Native and Expo
|
||||||
|
|||||||
3
app.json
3
app.json
@@ -9,7 +9,8 @@
|
|||||||
"userInterfaceStyle": "automatic",
|
"userInterfaceStyle": "automatic",
|
||||||
"newArchEnabled": true,
|
"newArchEnabled": true,
|
||||||
"ios": {
|
"ios": {
|
||||||
"supportsTablet": true
|
"supportsTablet": true,
|
||||||
|
"bundleIdentifier": "com.anonymous.remote-wol"
|
||||||
},
|
},
|
||||||
"android": {
|
"android": {
|
||||||
"adaptiveIcon": {
|
"adaptiveIcon": {
|
||||||
|
|||||||
@@ -1,35 +1,45 @@
|
|||||||
import { Tabs } from 'expo-router';
|
import React from "react";
|
||||||
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 { HapticTab } from '@/components/haptic-tab';
|
export function DevicesHeader() {
|
||||||
import { IconSymbol } from '@/components/ui/icon-symbol';
|
const router = useRouter();
|
||||||
import { Colors } from '@/constants/theme';
|
|
||||||
import { useColorScheme } from '@/hooks/use-color-scheme';
|
|
||||||
|
|
||||||
export default function TabLayout() {
|
return (
|
||||||
const colorScheme = useColorScheme();
|
<View style={styles.headerRight}>
|
||||||
|
<TouchableOpacity
|
||||||
return (
|
onPress={() => router.push("/scan-devices")}
|
||||||
<Tabs
|
style={styles.headerButton}
|
||||||
screenOptions={{
|
>
|
||||||
tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
|
<Ionicons name="add-circle-outline" size={24} color="#007AFF" />
|
||||||
headerShown: false,
|
</TouchableOpacity>
|
||||||
tabBarButton: HapticTab,
|
</View>
|
||||||
}}>
|
);
|
||||||
<Tabs.Screen
|
|
||||||
name="index"
|
|
||||||
options={{
|
|
||||||
title: 'Home',
|
|
||||||
tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Tabs.Screen
|
|
||||||
name="explore"
|
|
||||||
options={{
|
|
||||||
title: 'Explore',
|
|
||||||
tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Tabs>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export default function TabsLayout() {
|
||||||
|
return (
|
||||||
|
<NativeTabs>
|
||||||
|
<NativeTabs.Trigger name="index">
|
||||||
|
<Icon sf="desktopcomputer"/>
|
||||||
|
<Label>Devices</Label>
|
||||||
|
</NativeTabs.Trigger>
|
||||||
|
<NativeTabs.Trigger name="settings">
|
||||||
|
<Icon sf="gear"/>
|
||||||
|
<Label>Settings</Label>
|
||||||
|
</NativeTabs.Trigger>
|
||||||
|
</NativeTabs>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
headerRight: {
|
||||||
|
flexDirection: "row",
|
||||||
|
gap: 16,
|
||||||
|
},
|
||||||
|
headerButton: {
|
||||||
|
paddingHorizontal: 8,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|||||||
@@ -1,112 +0,0 @@
|
|||||||
import { Image } from 'expo-image';
|
|
||||||
import { Platform, StyleSheet } from 'react-native';
|
|
||||||
|
|
||||||
import { Collapsible } from '@/components/ui/collapsible';
|
|
||||||
import { ExternalLink } from '@/components/external-link';
|
|
||||||
import ParallaxScrollView from '@/components/parallax-scroll-view';
|
|
||||||
import { ThemedText } from '@/components/themed-text';
|
|
||||||
import { ThemedView } from '@/components/themed-view';
|
|
||||||
import { IconSymbol } from '@/components/ui/icon-symbol';
|
|
||||||
import { Fonts } from '@/constants/theme';
|
|
||||||
|
|
||||||
export default function TabTwoScreen() {
|
|
||||||
return (
|
|
||||||
<ParallaxScrollView
|
|
||||||
headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}
|
|
||||||
headerImage={
|
|
||||||
<IconSymbol
|
|
||||||
size={310}
|
|
||||||
color="#808080"
|
|
||||||
name="chevron.left.forwardslash.chevron.right"
|
|
||||||
style={styles.headerImage}
|
|
||||||
/>
|
|
||||||
}>
|
|
||||||
<ThemedView style={styles.titleContainer}>
|
|
||||||
<ThemedText
|
|
||||||
type="title"
|
|
||||||
style={{
|
|
||||||
fontFamily: Fonts.rounded,
|
|
||||||
}}>
|
|
||||||
Explore
|
|
||||||
</ThemedText>
|
|
||||||
</ThemedView>
|
|
||||||
<ThemedText>This app includes example code to help you get started.</ThemedText>
|
|
||||||
<Collapsible title="File-based routing">
|
|
||||||
<ThemedText>
|
|
||||||
This app has two screens:{' '}
|
|
||||||
<ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> and{' '}
|
|
||||||
<ThemedText type="defaultSemiBold">app/(tabs)/explore.tsx</ThemedText>
|
|
||||||
</ThemedText>
|
|
||||||
<ThemedText>
|
|
||||||
The layout file in <ThemedText type="defaultSemiBold">app/(tabs)/_layout.tsx</ThemedText>{' '}
|
|
||||||
sets up the tab navigator.
|
|
||||||
</ThemedText>
|
|
||||||
<ExternalLink href="https://docs.expo.dev/router/introduction">
|
|
||||||
<ThemedText type="link">Learn more</ThemedText>
|
|
||||||
</ExternalLink>
|
|
||||||
</Collapsible>
|
|
||||||
<Collapsible title="Android, iOS, and web support">
|
|
||||||
<ThemedText>
|
|
||||||
You can open this project on Android, iOS, and the web. To open the web version, press{' '}
|
|
||||||
<ThemedText type="defaultSemiBold">w</ThemedText> in the terminal running this project.
|
|
||||||
</ThemedText>
|
|
||||||
</Collapsible>
|
|
||||||
<Collapsible title="Images">
|
|
||||||
<ThemedText>
|
|
||||||
For static images, you can use the <ThemedText type="defaultSemiBold">@2x</ThemedText> and{' '}
|
|
||||||
<ThemedText type="defaultSemiBold">@3x</ThemedText> suffixes to provide files for
|
|
||||||
different screen densities
|
|
||||||
</ThemedText>
|
|
||||||
<Image
|
|
||||||
source={require('@/assets/images/react-logo.png')}
|
|
||||||
style={{ width: 100, height: 100, alignSelf: 'center' }}
|
|
||||||
/>
|
|
||||||
<ExternalLink href="https://reactnative.dev/docs/images">
|
|
||||||
<ThemedText type="link">Learn more</ThemedText>
|
|
||||||
</ExternalLink>
|
|
||||||
</Collapsible>
|
|
||||||
<Collapsible title="Light and dark mode components">
|
|
||||||
<ThemedText>
|
|
||||||
This template has light and dark mode support. The{' '}
|
|
||||||
<ThemedText type="defaultSemiBold">useColorScheme()</ThemedText> hook lets you inspect
|
|
||||||
what the user's current color scheme is, and so you can adjust UI colors accordingly.
|
|
||||||
</ThemedText>
|
|
||||||
<ExternalLink href="https://docs.expo.dev/develop/user-interface/color-themes/">
|
|
||||||
<ThemedText type="link">Learn more</ThemedText>
|
|
||||||
</ExternalLink>
|
|
||||||
</Collapsible>
|
|
||||||
<Collapsible title="Animations">
|
|
||||||
<ThemedText>
|
|
||||||
This template includes an example of an animated component. The{' '}
|
|
||||||
<ThemedText type="defaultSemiBold">components/HelloWave.tsx</ThemedText> component uses
|
|
||||||
the powerful{' '}
|
|
||||||
<ThemedText type="defaultSemiBold" style={{ fontFamily: Fonts.mono }}>
|
|
||||||
react-native-reanimated
|
|
||||||
</ThemedText>{' '}
|
|
||||||
library to create a waving hand animation.
|
|
||||||
</ThemedText>
|
|
||||||
{Platform.select({
|
|
||||||
ios: (
|
|
||||||
<ThemedText>
|
|
||||||
The <ThemedText type="defaultSemiBold">components/ParallaxScrollView.tsx</ThemedText>{' '}
|
|
||||||
component provides a parallax effect for the header image.
|
|
||||||
</ThemedText>
|
|
||||||
),
|
|
||||||
})}
|
|
||||||
</Collapsible>
|
|
||||||
</ParallaxScrollView>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
headerImage: {
|
|
||||||
color: '#808080',
|
|
||||||
bottom: -90,
|
|
||||||
left: -35,
|
|
||||||
position: 'absolute',
|
|
||||||
},
|
|
||||||
titleContainer: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
gap: 8,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@@ -1,98 +1,346 @@
|
|||||||
import { Image } from 'expo-image';
|
import React, { useState, useEffect } from "react";
|
||||||
import { Platform, StyleSheet } from 'react-native';
|
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 { Ionicons } from "@expo/vector-icons";
|
||||||
|
import api from "../../src/services/api";
|
||||||
|
import { Device } from "../../src/types";
|
||||||
|
|
||||||
import { HelloWave } from '@/components/hello-wave';
|
function DevicesHeader() {
|
||||||
import ParallaxScrollView from '@/components/parallax-scroll-view';
|
const router = useRouter();
|
||||||
import { ThemedText } from '@/components/themed-text';
|
|
||||||
import { ThemedView } from '@/components/themed-view';
|
|
||||||
import { Link } from 'expo-router';
|
|
||||||
|
|
||||||
export default function HomeScreen() {
|
return (
|
||||||
return (
|
<View>
|
||||||
<ParallaxScrollView
|
<TouchableOpacity onPress={() => router.push("/scan-devices")}>
|
||||||
headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
|
<Ionicons name="add-circle-outline" size={24} color="#007AFF" />
|
||||||
headerImage={
|
</TouchableOpacity>
|
||||||
<Image
|
</View>
|
||||||
source={require('@/assets/images/partial-react-logo.png')}
|
);
|
||||||
style={styles.reactLogo}
|
}
|
||||||
/>
|
|
||||||
}>
|
|
||||||
<ThemedView style={styles.titleContainer}>
|
|
||||||
<ThemedText type="title">Welcome!</ThemedText>
|
|
||||||
<HelloWave />
|
|
||||||
</ThemedView>
|
|
||||||
<ThemedView style={styles.stepContainer}>
|
|
||||||
<ThemedText type="subtitle">Step 1: Try it</ThemedText>
|
|
||||||
<ThemedText>
|
|
||||||
Edit <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> to see changes.
|
|
||||||
Press{' '}
|
|
||||||
<ThemedText type="defaultSemiBold">
|
|
||||||
{Platform.select({
|
|
||||||
ios: 'cmd + d',
|
|
||||||
android: 'cmd + m',
|
|
||||||
web: 'F12',
|
|
||||||
})}
|
|
||||||
</ThemedText>{' '}
|
|
||||||
to open developer tools.
|
|
||||||
</ThemedText>
|
|
||||||
</ThemedView>
|
|
||||||
<ThemedView style={styles.stepContainer}>
|
|
||||||
<Link href="/modal">
|
|
||||||
<Link.Trigger>
|
|
||||||
<ThemedText type="subtitle">Step 2: Explore</ThemedText>
|
|
||||||
</Link.Trigger>
|
|
||||||
<Link.Preview />
|
|
||||||
<Link.Menu>
|
|
||||||
<Link.MenuAction title="Action" icon="cube" onPress={() => alert('Action pressed')} />
|
|
||||||
<Link.MenuAction
|
|
||||||
title="Share"
|
|
||||||
icon="square.and.arrow.up"
|
|
||||||
onPress={() => alert('Share pressed')}
|
|
||||||
/>
|
|
||||||
<Link.Menu title="More" icon="ellipsis">
|
|
||||||
<Link.MenuAction
|
|
||||||
title="Delete"
|
|
||||||
icon="trash"
|
|
||||||
destructive
|
|
||||||
onPress={() => alert('Delete pressed')}
|
|
||||||
/>
|
|
||||||
</Link.Menu>
|
|
||||||
</Link.Menu>
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<ThemedText>
|
export default function DeviceListScreen() {
|
||||||
{`Tap the Explore tab to learn more about what's included in this starter app.`}
|
const router = useRouter();
|
||||||
</ThemedText>
|
const [devices, setDevices] = useState<Device[]>([]);
|
||||||
</ThemedView>
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
<ThemedView style={styles.stepContainer}>
|
const [refreshing, setRefreshing] = useState(false);
|
||||||
<ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText>
|
|
||||||
<ThemedText>
|
useEffect(() => {
|
||||||
{`When you're ready, run `}
|
loadDevices();
|
||||||
<ThemedText type="defaultSemiBold">npm run reset-project</ThemedText> to get a fresh{' '}
|
}, []);
|
||||||
<ThemedText type="defaultSemiBold">app</ThemedText> directory. This will move the current{' '}
|
|
||||||
<ThemedText type="defaultSemiBold">app</ThemedText> to{' '}
|
const loadDevices = async () => {
|
||||||
<ThemedText type="defaultSemiBold">app-example</ThemedText>.
|
try {
|
||||||
</ThemedText>
|
setIsLoading(true);
|
||||||
</ThemedView>
|
const data = await api.getDevices();
|
||||||
</ParallaxScrollView>
|
setDevices(data);
|
||||||
);
|
} catch (error: any) {
|
||||||
|
Alert.alert("Error", error.message || "Failed to load devices");
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onRefresh = async () => {
|
||||||
|
setRefreshing(true);
|
||||||
|
await loadDevices();
|
||||||
|
setRefreshing(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleWake = async (device: Device) => {
|
||||||
|
try {
|
||||||
|
await api.wakeDevice(device.id);
|
||||||
|
Alert.alert("Success", `Wake signal sent to ${device.name}`);
|
||||||
|
} catch (error: any) {
|
||||||
|
Alert.alert("Error", error.message || "Failed to wake device");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
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);
|
||||||
|
Alert.alert("Success", `Sleep signal sent to ${device.name}`);
|
||||||
|
} catch (error: any) {
|
||||||
|
Alert.alert("Error", error.message || "Failed to sleep device");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
};
|
||||||
|
|
||||||
|
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);
|
||||||
|
Alert.alert("Success", `Reboot signal sent to ${device.name}`);
|
||||||
|
} catch (error: any) {
|
||||||
|
Alert.alert("Error", error.message || "Failed to reboot device");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
};
|
||||||
|
|
||||||
|
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);
|
||||||
|
Alert.alert("Success", `Shutdown signal sent to ${device.name}`);
|
||||||
|
} catch (error: any) {
|
||||||
|
Alert.alert(
|
||||||
|
"Error",
|
||||||
|
error.message || "Failed to shutdown device"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = (device: Device) => {
|
||||||
|
Alert.alert("Delete Device", `Delete "${device.name}"?`, [
|
||||||
|
{
|
||||||
|
text: "Delete",
|
||||||
|
style: "destructive",
|
||||||
|
onPress: async () => {
|
||||||
|
try {
|
||||||
|
await api.deleteDevice(device.id);
|
||||||
|
Alert.alert("Success", "Device deleted successfully");
|
||||||
|
loadDevices();
|
||||||
|
} catch (error: any) {
|
||||||
|
Alert.alert("Error", error.message || "Failed to delete device");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusColor = (status: string) => {
|
||||||
|
switch (status?.toLowerCase()) {
|
||||||
|
case "online":
|
||||||
|
return "#4CAF50";
|
||||||
|
case "offline":
|
||||||
|
return "#f44336";
|
||||||
|
default:
|
||||||
|
return "#ff9800";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
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}>
|
||||||
|
<TouchableOpacity
|
||||||
|
onPress={() => router.push(`/devices/${item.id}`)}
|
||||||
|
activeOpacity={1}
|
||||||
|
>
|
||||||
|
<View style={styles.deviceHeader}>
|
||||||
|
<View style={styles.deviceInfo}>
|
||||||
|
<Text style={styles.deviceName}>{item.name}</Text>
|
||||||
|
<Text style={styles.deviceIP}>{item.ip}</Text>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={[
|
||||||
|
styles.statusDot,
|
||||||
|
{ backgroundColor: getStatusColor(item.status) },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={styles.deviceActions}>
|
||||||
|
<TouchableOpacity
|
||||||
|
style={[styles.actionButton, styles.wakeButton]}
|
||||||
|
onPress={() => handleWake(item)}
|
||||||
|
>
|
||||||
|
<Text style={styles.actionButtonText}>Wake</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
<TouchableOpacity
|
||||||
|
style={[styles.actionButton, styles.sleepButton]}
|
||||||
|
onPress={() => handleSleep(item)}
|
||||||
|
>
|
||||||
|
<Text style={styles.actionButtonText}>Sleep</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
<TouchableOpacity
|
||||||
|
style={[styles.actionButton, styles.rebootButton]}
|
||||||
|
onPress={() => handleReboot(item)}
|
||||||
|
>
|
||||||
|
<Text style={styles.actionButtonText}>Reboot</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
<TouchableOpacity
|
||||||
|
style={[styles.actionButton, styles.shutdownButton]}
|
||||||
|
onPress={() => handleShutdown(item)}
|
||||||
|
>
|
||||||
|
<Text style={styles.actionButtonText}>Shutdown</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
</ContextMenu.Trigger>
|
||||||
|
</ContextMenu>
|
||||||
|
</Host>
|
||||||
|
);
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<View style={styles.loadingContainer}>
|
||||||
|
<ActivityIndicator size="large" color="#007AFF" />
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={styles.container}>
|
||||||
|
<Stack.Screen
|
||||||
|
options={{
|
||||||
|
title: "Devices",
|
||||||
|
headerRight: () => <DevicesHeader />,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<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}>No devices found</Text>
|
||||||
|
</View>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
titleContainer: {
|
container: {
|
||||||
flexDirection: 'row',
|
flex: 1,
|
||||||
alignItems: 'center',
|
backgroundColor: "#f5f5f5",
|
||||||
gap: 8,
|
},
|
||||||
},
|
headerRight: {
|
||||||
stepContainer: {
|
flexDirection: "row",
|
||||||
gap: 8,
|
gap: 16,
|
||||||
marginBottom: 8,
|
},
|
||||||
},
|
headerButton: {
|
||||||
reactLogo: {
|
paddingHorizontal: 8,
|
||||||
height: 178,
|
},
|
||||||
width: 290,
|
loadingContainer: {
|
||||||
bottom: 0,
|
flex: 1,
|
||||||
left: 0,
|
justifyContent: "center",
|
||||||
position: 'absolute',
|
alignItems: "center",
|
||||||
},
|
},
|
||||||
|
list: {
|
||||||
|
padding: 15,
|
||||||
|
},
|
||||||
|
deviceCard: {
|
||||||
|
backgroundColor: "#fff",
|
||||||
|
borderRadius: 12,
|
||||||
|
padding: 15,
|
||||||
|
marginBottom: 15,
|
||||||
|
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",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
gap: 8,
|
||||||
|
},
|
||||||
|
actionButton: {
|
||||||
|
flex: 1,
|
||||||
|
paddingVertical: 10,
|
||||||
|
borderRadius: 8,
|
||||||
|
alignItems: "center",
|
||||||
|
},
|
||||||
|
wakeButton: {
|
||||||
|
backgroundColor: "#4CAF50",
|
||||||
|
},
|
||||||
|
sleepButton: {
|
||||||
|
backgroundColor: "#FF9800",
|
||||||
|
},
|
||||||
|
rebootButton: {
|
||||||
|
backgroundColor: "#2196F3",
|
||||||
|
},
|
||||||
|
shutdownButton: {
|
||||||
|
backgroundColor: "#f44336",
|
||||||
|
},
|
||||||
|
actionButtonText: {
|
||||||
|
color: "#fff",
|
||||||
|
fontWeight: "600",
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
emptyContainer: {
|
||||||
|
alignItems: "center",
|
||||||
|
paddingVertical: 50,
|
||||||
|
},
|
||||||
|
emptyText: {
|
||||||
|
fontSize: 16,
|
||||||
|
color: "#999",
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
231
app/(tabs)/settings.tsx
Normal file
231
app/(tabs)/settings.tsx
Normal file
@@ -0,0 +1,231 @@
|
|||||||
|
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';
|
||||||
|
|
||||||
|
export default function SettingsScreen() {
|
||||||
|
const { user, logout } = useAuth();
|
||||||
|
|
||||||
|
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 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}
|
||||||
|
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, destructive && styles.actionButtonDestructive]}
|
||||||
|
onPress={onPress}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
style={[
|
||||||
|
styles.actionButtonText,
|
||||||
|
destructive && styles.actionButtonTextDestructive,
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
{title}
|
||||||
|
</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
);
|
||||||
|
|
||||||
|
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}>
|
||||||
|
<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}>
|
||||||
|
<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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
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,
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -1,24 +1,41 @@
|
|||||||
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
|
import { StatusBar } from "expo-status-bar";
|
||||||
import { Stack } from 'expo-router';
|
import { AuthProvider, useAuth } from "../src/context/AuthContext";
|
||||||
import { StatusBar } from 'expo-status-bar';
|
import { useEffect } from "react";
|
||||||
import 'react-native-reanimated';
|
import { Stack, useRouter } from "expo-router";
|
||||||
|
|
||||||
import { useColorScheme } from '@/hooks/use-color-scheme';
|
function RootStack() {
|
||||||
|
const router = useRouter();
|
||||||
|
const { isAuthenticated, isLoading } = useAuth();
|
||||||
|
|
||||||
export const unstable_settings = {
|
useEffect(() => {
|
||||||
anchor: '(tabs)',
|
if (!isLoading) {
|
||||||
};
|
if (isAuthenticated) {
|
||||||
|
router.replace('/(tabs)');
|
||||||
|
} else {
|
||||||
|
router.replace('/login');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [isAuthenticated, isLoading, router]);
|
||||||
|
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
export default function RootLayout() {
|
export default function RootLayout() {
|
||||||
const colorScheme = useColorScheme();
|
return (
|
||||||
|
<AuthProvider>
|
||||||
return (
|
<RootStack />
|
||||||
<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
|
<StatusBar style="auto" />
|
||||||
<Stack>
|
</AuthProvider>
|
||||||
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
|
);
|
||||||
<Stack.Screen name="modal" options={{ presentation: 'modal', title: 'Modal' }} />
|
|
||||||
</Stack>
|
|
||||||
<StatusBar style="auto" />
|
|
||||||
</ThemeProvider>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
236
app/add-device.tsx
Normal file
236
app/add-device.tsx
Normal file
@@ -0,0 +1,236 @@
|
|||||||
|
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',
|
||||||
|
},
|
||||||
|
});
|
||||||
350
app/devices/[id].tsx
Normal file
350
app/devices/[id].tsx
Normal file
@@ -0,0 +1,350 @@
|
|||||||
|
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',
|
||||||
|
},
|
||||||
|
});
|
||||||
174
app/login.tsx
Normal file
174
app/login.tsx
Normal file
@@ -0,0 +1,174 @@
|
|||||||
|
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';
|
||||||
|
|
||||||
|
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 handleLogin = async () => {
|
||||||
|
if (!identity || !password) {
|
||||||
|
Alert.alert('Error', 'Please enter both identity and password');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
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>
|
||||||
|
|
||||||
|
<View style={styles.form}>
|
||||||
|
<TextInput
|
||||||
|
style={styles.input}
|
||||||
|
placeholder="Username or Email"
|
||||||
|
value={identity}
|
||||||
|
onChangeText={setIdentity}
|
||||||
|
autoCapitalize="none"
|
||||||
|
autoCorrect={false}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<TextInput
|
||||||
|
style={styles.input}
|
||||||
|
placeholder="Password"
|
||||||
|
value={password}
|
||||||
|
onChangeText={setPassword}
|
||||||
|
secureTextEntry
|
||||||
|
autoCapitalize="none"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<TouchableOpacity
|
||||||
|
style={[styles.button, isLoading && styles.buttonDisabled]}
|
||||||
|
onPress={handleLogin}
|
||||||
|
disabled={isLoading}
|
||||||
|
>
|
||||||
|
<Text style={styles.buttonText}>
|
||||||
|
{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',
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
import { Link } from 'expo-router';
|
|
||||||
import { StyleSheet } from 'react-native';
|
|
||||||
|
|
||||||
import { ThemedText } from '@/components/themed-text';
|
|
||||||
import { ThemedView } from '@/components/themed-view';
|
|
||||||
|
|
||||||
export default function ModalScreen() {
|
|
||||||
return (
|
|
||||||
<ThemedView style={styles.container}>
|
|
||||||
<ThemedText type="title">This is a modal</ThemedText>
|
|
||||||
<Link href="/" dismissTo style={styles.link}>
|
|
||||||
<ThemedText type="link">Go to home screen</ThemedText>
|
|
||||||
</Link>
|
|
||||||
</ThemedView>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
container: {
|
|
||||||
flex: 1,
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
padding: 20,
|
|
||||||
},
|
|
||||||
link: {
|
|
||||||
marginTop: 15,
|
|
||||||
paddingVertical: 15,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
433
app/scan-devices.tsx
Normal file
433
app/scan-devices.tsx
Normal file
@@ -0,0 +1,433 @@
|
|||||||
|
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';
|
||||||
|
|
||||||
|
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 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 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 handleSaveDevice = async () => {
|
||||||
|
if (!formData.name || !formData.mac || !formData.ip) {
|
||||||
|
Alert.alert('Error', 'Please fill in all required fields');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
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');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
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>
|
||||||
|
|
||||||
|
<TouchableOpacity
|
||||||
|
style={[styles.scanButton, scanning && styles.scanButtonDisabled]}
|
||||||
|
onPress={handleScan}
|
||||||
|
disabled={scanning}
|
||||||
|
>
|
||||||
|
{scanning ? (
|
||||||
|
<ActivityIndicator color="#fff" />
|
||||||
|
) : (
|
||||||
|
<Text style={styles.scanButtonText}>Scan Network</Text>
|
||||||
|
)}
|
||||||
|
</TouchableOpacity>
|
||||||
|
|
||||||
|
<Text style={styles.infoText}>
|
||||||
|
Note: This requires the server to have nmap installed and may take several minutes.
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
{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>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{devices.length === 0 && !scanning && (
|
||||||
|
<View style={styles.emptyContainer}>
|
||||||
|
<Text style={styles.emptyText}>Tap "Scan Network" to discover devices</Text>
|
||||||
|
</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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
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',
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
import { Href, Link } from 'expo-router';
|
|
||||||
import { openBrowserAsync, WebBrowserPresentationStyle } from 'expo-web-browser';
|
|
||||||
import { type ComponentProps } from 'react';
|
|
||||||
|
|
||||||
type Props = Omit<ComponentProps<typeof Link>, 'href'> & { href: Href & string };
|
|
||||||
|
|
||||||
export function ExternalLink({ href, ...rest }: Props) {
|
|
||||||
return (
|
|
||||||
<Link
|
|
||||||
target="_blank"
|
|
||||||
{...rest}
|
|
||||||
href={href}
|
|
||||||
onPress={async (event) => {
|
|
||||||
if (process.env.EXPO_OS !== 'web') {
|
|
||||||
// Prevent the default behavior of linking to the default browser on native.
|
|
||||||
event.preventDefault();
|
|
||||||
// Open the link in an in-app browser.
|
|
||||||
await openBrowserAsync(href, {
|
|
||||||
presentationStyle: WebBrowserPresentationStyle.AUTOMATIC,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
import { BottomTabBarButtonProps } from '@react-navigation/bottom-tabs';
|
|
||||||
import { PlatformPressable } from '@react-navigation/elements';
|
|
||||||
import * as Haptics from 'expo-haptics';
|
|
||||||
|
|
||||||
export function HapticTab(props: BottomTabBarButtonProps) {
|
|
||||||
return (
|
|
||||||
<PlatformPressable
|
|
||||||
{...props}
|
|
||||||
onPressIn={(ev) => {
|
|
||||||
if (process.env.EXPO_OS === 'ios') {
|
|
||||||
// Add a soft haptic feedback when pressing down on the tabs.
|
|
||||||
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
|
|
||||||
}
|
|
||||||
props.onPressIn?.(ev);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
import Animated from 'react-native-reanimated';
|
|
||||||
|
|
||||||
export function HelloWave() {
|
|
||||||
return (
|
|
||||||
<Animated.Text
|
|
||||||
style={{
|
|
||||||
fontSize: 28,
|
|
||||||
lineHeight: 32,
|
|
||||||
marginTop: -6,
|
|
||||||
animationName: {
|
|
||||||
'50%': { transform: [{ rotate: '25deg' }] },
|
|
||||||
},
|
|
||||||
animationIterationCount: 4,
|
|
||||||
animationDuration: '300ms',
|
|
||||||
}}>
|
|
||||||
👋
|
|
||||||
</Animated.Text>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,79 +0,0 @@
|
|||||||
import type { PropsWithChildren, ReactElement } from 'react';
|
|
||||||
import { StyleSheet } from 'react-native';
|
|
||||||
import Animated, {
|
|
||||||
interpolate,
|
|
||||||
useAnimatedRef,
|
|
||||||
useAnimatedStyle,
|
|
||||||
useScrollOffset,
|
|
||||||
} from 'react-native-reanimated';
|
|
||||||
|
|
||||||
import { ThemedView } from '@/components/themed-view';
|
|
||||||
import { useColorScheme } from '@/hooks/use-color-scheme';
|
|
||||||
import { useThemeColor } from '@/hooks/use-theme-color';
|
|
||||||
|
|
||||||
const HEADER_HEIGHT = 250;
|
|
||||||
|
|
||||||
type Props = PropsWithChildren<{
|
|
||||||
headerImage: ReactElement;
|
|
||||||
headerBackgroundColor: { dark: string; light: string };
|
|
||||||
}>;
|
|
||||||
|
|
||||||
export default function ParallaxScrollView({
|
|
||||||
children,
|
|
||||||
headerImage,
|
|
||||||
headerBackgroundColor,
|
|
||||||
}: Props) {
|
|
||||||
const backgroundColor = useThemeColor({}, 'background');
|
|
||||||
const colorScheme = useColorScheme() ?? 'light';
|
|
||||||
const scrollRef = useAnimatedRef<Animated.ScrollView>();
|
|
||||||
const scrollOffset = useScrollOffset(scrollRef);
|
|
||||||
const headerAnimatedStyle = useAnimatedStyle(() => {
|
|
||||||
return {
|
|
||||||
transform: [
|
|
||||||
{
|
|
||||||
translateY: interpolate(
|
|
||||||
scrollOffset.value,
|
|
||||||
[-HEADER_HEIGHT, 0, HEADER_HEIGHT],
|
|
||||||
[-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75]
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
scale: interpolate(scrollOffset.value, [-HEADER_HEIGHT, 0, HEADER_HEIGHT], [2, 1, 1]),
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Animated.ScrollView
|
|
||||||
ref={scrollRef}
|
|
||||||
style={{ backgroundColor, flex: 1 }}
|
|
||||||
scrollEventThrottle={16}>
|
|
||||||
<Animated.View
|
|
||||||
style={[
|
|
||||||
styles.header,
|
|
||||||
{ backgroundColor: headerBackgroundColor[colorScheme] },
|
|
||||||
headerAnimatedStyle,
|
|
||||||
]}>
|
|
||||||
{headerImage}
|
|
||||||
</Animated.View>
|
|
||||||
<ThemedView style={styles.content}>{children}</ThemedView>
|
|
||||||
</Animated.ScrollView>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
container: {
|
|
||||||
flex: 1,
|
|
||||||
},
|
|
||||||
header: {
|
|
||||||
height: HEADER_HEIGHT,
|
|
||||||
overflow: 'hidden',
|
|
||||||
},
|
|
||||||
content: {
|
|
||||||
flex: 1,
|
|
||||||
padding: 32,
|
|
||||||
gap: 16,
|
|
||||||
overflow: 'hidden',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@@ -1,60 +0,0 @@
|
|||||||
import { StyleSheet, Text, type TextProps } from 'react-native';
|
|
||||||
|
|
||||||
import { useThemeColor } from '@/hooks/use-theme-color';
|
|
||||||
|
|
||||||
export type ThemedTextProps = TextProps & {
|
|
||||||
lightColor?: string;
|
|
||||||
darkColor?: string;
|
|
||||||
type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link';
|
|
||||||
};
|
|
||||||
|
|
||||||
export function ThemedText({
|
|
||||||
style,
|
|
||||||
lightColor,
|
|
||||||
darkColor,
|
|
||||||
type = 'default',
|
|
||||||
...rest
|
|
||||||
}: ThemedTextProps) {
|
|
||||||
const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text');
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Text
|
|
||||||
style={[
|
|
||||||
{ color },
|
|
||||||
type === 'default' ? styles.default : undefined,
|
|
||||||
type === 'title' ? styles.title : undefined,
|
|
||||||
type === 'defaultSemiBold' ? styles.defaultSemiBold : undefined,
|
|
||||||
type === 'subtitle' ? styles.subtitle : undefined,
|
|
||||||
type === 'link' ? styles.link : undefined,
|
|
||||||
style,
|
|
||||||
]}
|
|
||||||
{...rest}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
default: {
|
|
||||||
fontSize: 16,
|
|
||||||
lineHeight: 24,
|
|
||||||
},
|
|
||||||
defaultSemiBold: {
|
|
||||||
fontSize: 16,
|
|
||||||
lineHeight: 24,
|
|
||||||
fontWeight: '600',
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
fontSize: 32,
|
|
||||||
fontWeight: 'bold',
|
|
||||||
lineHeight: 32,
|
|
||||||
},
|
|
||||||
subtitle: {
|
|
||||||
fontSize: 20,
|
|
||||||
fontWeight: 'bold',
|
|
||||||
},
|
|
||||||
link: {
|
|
||||||
lineHeight: 30,
|
|
||||||
fontSize: 16,
|
|
||||||
color: '#0a7ea4',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
import { View, type ViewProps } from 'react-native';
|
|
||||||
|
|
||||||
import { useThemeColor } from '@/hooks/use-theme-color';
|
|
||||||
|
|
||||||
export type ThemedViewProps = ViewProps & {
|
|
||||||
lightColor?: string;
|
|
||||||
darkColor?: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
export function ThemedView({ style, lightColor, darkColor, ...otherProps }: ThemedViewProps) {
|
|
||||||
const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, 'background');
|
|
||||||
|
|
||||||
return <View style={[{ backgroundColor }, style]} {...otherProps} />;
|
|
||||||
}
|
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
import { PropsWithChildren, useState } from 'react';
|
|
||||||
import { StyleSheet, TouchableOpacity } from 'react-native';
|
|
||||||
|
|
||||||
import { ThemedText } from '@/components/themed-text';
|
|
||||||
import { ThemedView } from '@/components/themed-view';
|
|
||||||
import { IconSymbol } from '@/components/ui/icon-symbol';
|
|
||||||
import { Colors } from '@/constants/theme';
|
|
||||||
import { useColorScheme } from '@/hooks/use-color-scheme';
|
|
||||||
|
|
||||||
export function Collapsible({ children, title }: PropsWithChildren & { title: string }) {
|
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
|
||||||
const theme = useColorScheme() ?? 'light';
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ThemedView>
|
|
||||||
<TouchableOpacity
|
|
||||||
style={styles.heading}
|
|
||||||
onPress={() => setIsOpen((value) => !value)}
|
|
||||||
activeOpacity={0.8}>
|
|
||||||
<IconSymbol
|
|
||||||
name="chevron.right"
|
|
||||||
size={18}
|
|
||||||
weight="medium"
|
|
||||||
color={theme === 'light' ? Colors.light.icon : Colors.dark.icon}
|
|
||||||
style={{ transform: [{ rotate: isOpen ? '90deg' : '0deg' }] }}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ThemedText type="defaultSemiBold">{title}</ThemedText>
|
|
||||||
</TouchableOpacity>
|
|
||||||
{isOpen && <ThemedView style={styles.content}>{children}</ThemedView>}
|
|
||||||
</ThemedView>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
heading: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
alignItems: 'center',
|
|
||||||
gap: 6,
|
|
||||||
},
|
|
||||||
content: {
|
|
||||||
marginTop: 6,
|
|
||||||
marginLeft: 24,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@@ -1,32 +0,0 @@
|
|||||||
import { SymbolView, SymbolViewProps, SymbolWeight } from 'expo-symbols';
|
|
||||||
import { StyleProp, ViewStyle } from 'react-native';
|
|
||||||
|
|
||||||
export function IconSymbol({
|
|
||||||
name,
|
|
||||||
size = 24,
|
|
||||||
color,
|
|
||||||
style,
|
|
||||||
weight = 'regular',
|
|
||||||
}: {
|
|
||||||
name: SymbolViewProps['name'];
|
|
||||||
size?: number;
|
|
||||||
color: string;
|
|
||||||
style?: StyleProp<ViewStyle>;
|
|
||||||
weight?: SymbolWeight;
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<SymbolView
|
|
||||||
weight={weight}
|
|
||||||
tintColor={color}
|
|
||||||
resizeMode="scaleAspectFit"
|
|
||||||
name={name}
|
|
||||||
style={[
|
|
||||||
{
|
|
||||||
width: size,
|
|
||||||
height: size,
|
|
||||||
},
|
|
||||||
style,
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,41 +0,0 @@
|
|||||||
// Fallback for using MaterialIcons on Android and web.
|
|
||||||
|
|
||||||
import MaterialIcons from '@expo/vector-icons/MaterialIcons';
|
|
||||||
import { SymbolWeight, SymbolViewProps } from 'expo-symbols';
|
|
||||||
import { ComponentProps } from 'react';
|
|
||||||
import { OpaqueColorValue, type StyleProp, type TextStyle } from 'react-native';
|
|
||||||
|
|
||||||
type IconMapping = Record<SymbolViewProps['name'], ComponentProps<typeof MaterialIcons>['name']>;
|
|
||||||
type IconSymbolName = keyof typeof MAPPING;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Add your SF Symbols to Material Icons mappings here.
|
|
||||||
* - see Material Icons in the [Icons Directory](https://icons.expo.fyi).
|
|
||||||
* - see SF Symbols in the [SF Symbols](https://developer.apple.com/sf-symbols/) app.
|
|
||||||
*/
|
|
||||||
const MAPPING = {
|
|
||||||
'house.fill': 'home',
|
|
||||||
'paperplane.fill': 'send',
|
|
||||||
'chevron.left.forwardslash.chevron.right': 'code',
|
|
||||||
'chevron.right': 'chevron-right',
|
|
||||||
} as IconMapping;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* An icon component that uses native SF Symbols on iOS, and Material Icons on Android and web.
|
|
||||||
* This ensures a consistent look across platforms, and optimal resource usage.
|
|
||||||
* Icon `name`s are based on SF Symbols and require manual mapping to Material Icons.
|
|
||||||
*/
|
|
||||||
export function IconSymbol({
|
|
||||||
name,
|
|
||||||
size = 24,
|
|
||||||
color,
|
|
||||||
style,
|
|
||||||
}: {
|
|
||||||
name: IconSymbolName;
|
|
||||||
size?: number;
|
|
||||||
color: string | OpaqueColorValue;
|
|
||||||
style?: StyleProp<TextStyle>;
|
|
||||||
weight?: SymbolWeight;
|
|
||||||
}) {
|
|
||||||
return <MaterialIcons color={color} size={size} name={MAPPING[name]} style={style} />;
|
|
||||||
}
|
|
||||||
@@ -1,53 +0,0 @@
|
|||||||
/**
|
|
||||||
* Below are the colors that are used in the app. The colors are defined in the light and dark mode.
|
|
||||||
* There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { Platform } from 'react-native';
|
|
||||||
|
|
||||||
const tintColorLight = '#0a7ea4';
|
|
||||||
const tintColorDark = '#fff';
|
|
||||||
|
|
||||||
export const Colors = {
|
|
||||||
light: {
|
|
||||||
text: '#11181C',
|
|
||||||
background: '#fff',
|
|
||||||
tint: tintColorLight,
|
|
||||||
icon: '#687076',
|
|
||||||
tabIconDefault: '#687076',
|
|
||||||
tabIconSelected: tintColorLight,
|
|
||||||
},
|
|
||||||
dark: {
|
|
||||||
text: '#ECEDEE',
|
|
||||||
background: '#151718',
|
|
||||||
tint: tintColorDark,
|
|
||||||
icon: '#9BA1A6',
|
|
||||||
tabIconDefault: '#9BA1A6',
|
|
||||||
tabIconSelected: tintColorDark,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Fonts = Platform.select({
|
|
||||||
ios: {
|
|
||||||
/** iOS `UIFontDescriptorSystemDesignDefault` */
|
|
||||||
sans: 'system-ui',
|
|
||||||
/** iOS `UIFontDescriptorSystemDesignSerif` */
|
|
||||||
serif: 'ui-serif',
|
|
||||||
/** iOS `UIFontDescriptorSystemDesignRounded` */
|
|
||||||
rounded: 'ui-rounded',
|
|
||||||
/** iOS `UIFontDescriptorSystemDesignMonospaced` */
|
|
||||||
mono: 'ui-monospace',
|
|
||||||
},
|
|
||||||
default: {
|
|
||||||
sans: 'normal',
|
|
||||||
serif: 'serif',
|
|
||||||
rounded: 'normal',
|
|
||||||
mono: 'monospace',
|
|
||||||
},
|
|
||||||
web: {
|
|
||||||
sans: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
|
|
||||||
serif: "Georgia, 'Times New Roman', serif",
|
|
||||||
rounded: "'SF Pro Rounded', 'Hiragino Maru Gothic ProN', Meiryo, 'MS PGothic', sans-serif",
|
|
||||||
mono: "SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
49
package-lock.json
generated
49
package-lock.json
generated
@@ -8,7 +8,9 @@
|
|||||||
"name": "remote-wol",
|
"name": "remote-wol",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@expo/ui": "~0.2.0-beta.9",
|
||||||
"@expo/vector-icons": "^15.0.3",
|
"@expo/vector-icons": "^15.0.3",
|
||||||
|
"@react-native-async-storage/async-storage": "^2.2.0",
|
||||||
"@react-navigation/bottom-tabs": "^7.4.0",
|
"@react-navigation/bottom-tabs": "^7.4.0",
|
||||||
"@react-navigation/elements": "^2.6.3",
|
"@react-navigation/elements": "^2.6.3",
|
||||||
"@react-navigation/native": "^7.1.8",
|
"@react-navigation/native": "^7.1.8",
|
||||||
@@ -2181,6 +2183,20 @@
|
|||||||
"integrity": "sha512-HHQigo3rQWKMDzYDLkubN5WQOYXJJE2eNqIQC2axC2iO3mHdwnIR7FgZVvHWtBwAdzBgAP0ECp8KqS8TiMKvgw==",
|
"integrity": "sha512-HHQigo3rQWKMDzYDLkubN5WQOYXJJE2eNqIQC2axC2iO3mHdwnIR7FgZVvHWtBwAdzBgAP0ECp8KqS8TiMKvgw==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/@expo/ui": {
|
||||||
|
"version": "0.2.0-beta.9",
|
||||||
|
"resolved": "https://registry.npmjs.org/@expo/ui/-/ui-0.2.0-beta.9.tgz",
|
||||||
|
"integrity": "sha512-RaBcp0cMe5GykQogJwRZGy4o4JHDLtrr+HaurDPhwPKqVATsV0rR11ysmFe4QX8XWLP/L3od7NOkXUi5ailvaw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"sf-symbols-typescript": "^2.1.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"expo": "*",
|
||||||
|
"react": "*",
|
||||||
|
"react-native": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@expo/vector-icons": {
|
"node_modules/@expo/vector-icons": {
|
||||||
"version": "15.0.3",
|
"version": "15.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/@expo/vector-icons/-/vector-icons-15.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/@expo/vector-icons/-/vector-icons-15.0.3.tgz",
|
||||||
@@ -2788,6 +2804,18 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@react-native-async-storage/async-storage": {
|
||||||
|
"version": "2.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-2.2.0.tgz",
|
||||||
|
"integrity": "sha512-gvRvjR5JAaUZF8tv2Kcq/Gbt3JHwbKFYfmb445rhOj6NUMx3qPLixmDx5pZAyb9at1bYvJ4/eTUipU5aki45xw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"merge-options": "^3.0.4"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react-native": "^0.0.0-0 || >=0.65 <1.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@react-native/assets-registry": {
|
"node_modules/@react-native/assets-registry": {
|
||||||
"version": "0.81.5",
|
"version": "0.81.5",
|
||||||
"resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.81.5.tgz",
|
"resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.81.5.tgz",
|
||||||
@@ -7820,6 +7848,15 @@
|
|||||||
"url": "https://github.com/sponsors/ljharb"
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/is-plain-obj": {
|
||||||
|
"version": "2.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz",
|
||||||
|
"integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=8"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/is-regex": {
|
"node_modules/is-regex": {
|
||||||
"version": "1.2.1",
|
"version": "1.2.1",
|
||||||
"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
|
"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
|
||||||
@@ -8797,6 +8834,18 @@
|
|||||||
"integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==",
|
"integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/merge-options": {
|
||||||
|
"version": "3.0.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/merge-options/-/merge-options-3.0.4.tgz",
|
||||||
|
"integrity": "sha512-2Sug1+knBjkaMsMgf1ctR1Ujx+Ayku4EdJN4Z+C2+JzoeF7A3OZ9KM2GY0CpQS51NR61LTurMJrRKPhSs3ZRTQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"is-plain-obj": "^2.1.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=10"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/merge-stream": {
|
"node_modules/merge-stream": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
|
||||||
|
|||||||
14
package.json
14
package.json
@@ -5,13 +5,15 @@
|
|||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "expo start",
|
"start": "expo start",
|
||||||
"reset-project": "node ./scripts/reset-project.js",
|
"reset-project": "node ./scripts/reset-project.js",
|
||||||
"android": "expo start --android",
|
"android": "expo run:android",
|
||||||
"ios": "expo start --ios",
|
"ios": "expo run:ios",
|
||||||
"web": "expo start --web",
|
"web": "expo start --web",
|
||||||
"lint": "expo lint"
|
"lint": "expo lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@expo/ui": "~0.2.0-beta.9",
|
||||||
"@expo/vector-icons": "^15.0.3",
|
"@expo/vector-icons": "^15.0.3",
|
||||||
|
"@react-native-async-storage/async-storage": "^2.2.0",
|
||||||
"@react-navigation/bottom-tabs": "^7.4.0",
|
"@react-navigation/bottom-tabs": "^7.4.0",
|
||||||
"@react-navigation/elements": "^2.6.3",
|
"@react-navigation/elements": "^2.6.3",
|
||||||
"@react-navigation/native": "^7.1.8",
|
"@react-navigation/native": "^7.1.8",
|
||||||
@@ -31,17 +33,17 @@
|
|||||||
"react-dom": "19.1.0",
|
"react-dom": "19.1.0",
|
||||||
"react-native": "0.81.5",
|
"react-native": "0.81.5",
|
||||||
"react-native-gesture-handler": "~2.28.0",
|
"react-native-gesture-handler": "~2.28.0",
|
||||||
"react-native-worklets": "0.5.1",
|
|
||||||
"react-native-reanimated": "~4.1.1",
|
"react-native-reanimated": "~4.1.1",
|
||||||
"react-native-safe-area-context": "~5.6.0",
|
"react-native-safe-area-context": "~5.6.0",
|
||||||
"react-native-screens": "~4.16.0",
|
"react-native-screens": "~4.16.0",
|
||||||
"react-native-web": "~0.21.0"
|
"react-native-web": "~0.21.0",
|
||||||
|
"react-native-worklets": "0.5.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/react": "~19.1.0",
|
"@types/react": "~19.1.0",
|
||||||
"typescript": "~5.9.2",
|
|
||||||
"eslint": "^9.25.0",
|
"eslint": "^9.25.0",
|
||||||
"eslint-config-expo": "~10.0.0"
|
"eslint-config-expo": "~10.0.0",
|
||||||
|
"typescript": "~5.9.2"
|
||||||
},
|
},
|
||||||
"private": true
|
"private": true
|
||||||
}
|
}
|
||||||
|
|||||||
92
src/context/AuthContext.tsx
Normal file
92
src/context/AuthContext.tsx
Normal file
@@ -0,0 +1,92 @@
|
|||||||
|
import React, { createContext, useContext, useState, useEffect } from 'react';
|
||||||
|
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||||
|
import api from '../services/api';
|
||||||
|
import { AuthResponse, User } from '../types';
|
||||||
|
|
||||||
|
interface AuthContextType {
|
||||||
|
user: User | null;
|
||||||
|
token: string | null;
|
||||||
|
isAuthenticated: boolean;
|
||||||
|
isLoading: boolean;
|
||||||
|
login: (identity: string, password: string, isSuperuser?: boolean) => Promise<void>;
|
||||||
|
logout: () => Promise<void>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const AuthContext = createContext<AuthContextType | undefined>(undefined);
|
||||||
|
|
||||||
|
export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
||||||
|
const [user, setUser] = useState<User | null>(null);
|
||||||
|
const [token, setToken] = useState<string | null>(null);
|
||||||
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadAuth();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const loadAuth = async () => {
|
||||||
|
try {
|
||||||
|
const storedToken = await AsyncStorage.getItem('auth_token');
|
||||||
|
const storedUser = await AsyncStorage.getItem('auth_user');
|
||||||
|
|
||||||
|
if (storedToken && storedUser) {
|
||||||
|
setToken(storedToken);
|
||||||
|
api.setToken(storedToken);
|
||||||
|
setUser(JSON.parse(storedUser));
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to load auth', error);
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const login = async (identity: string, password: string, isSuperuser = false) => {
|
||||||
|
try {
|
||||||
|
const response: AuthResponse = await api.authenticate(identity, password, isSuperuser);
|
||||||
|
|
||||||
|
await AsyncStorage.setItem('auth_token', response.token);
|
||||||
|
await AsyncStorage.setItem('auth_user', JSON.stringify(response.record));
|
||||||
|
|
||||||
|
setToken(response.token);
|
||||||
|
setUser(response.record);
|
||||||
|
} catch (error) {
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const logout = async () => {
|
||||||
|
try {
|
||||||
|
await AsyncStorage.removeItem('auth_token');
|
||||||
|
await AsyncStorage.removeItem('auth_user');
|
||||||
|
|
||||||
|
api.clearToken();
|
||||||
|
setToken(null);
|
||||||
|
setUser(null);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to logout', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AuthContext.Provider
|
||||||
|
value={{
|
||||||
|
user,
|
||||||
|
token,
|
||||||
|
isAuthenticated: !!token && !!user,
|
||||||
|
isLoading,
|
||||||
|
login,
|
||||||
|
logout,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</AuthContext.Provider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useAuth = () => {
|
||||||
|
const context = useContext(AuthContext);
|
||||||
|
if (!context) {
|
||||||
|
throw new Error('useAuth must be used within an AuthProvider');
|
||||||
|
}
|
||||||
|
return context;
|
||||||
|
};
|
||||||
245
src/services/api.ts
Normal file
245
src/services/api.ts
Normal file
@@ -0,0 +1,245 @@
|
|||||||
|
import { Device, AuthResponse, NetworkScanResult } from '../types';
|
||||||
|
|
||||||
|
const API_BASE_URL = 'https://wol.f6knight.duckdns.org/api';
|
||||||
|
|
||||||
|
class UpSnapAPI {
|
||||||
|
private token: string | null = null;
|
||||||
|
|
||||||
|
setToken(token: string) {
|
||||||
|
this.token = token;
|
||||||
|
}
|
||||||
|
|
||||||
|
getToken(): string | null {
|
||||||
|
return this.token;
|
||||||
|
}
|
||||||
|
|
||||||
|
clearToken() {
|
||||||
|
this.token = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
private getHeaders(): HeadersInit {
|
||||||
|
const headers: HeadersInit = {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
};
|
||||||
|
|
||||||
|
if (this.token) {
|
||||||
|
headers['Authorization'] = `Bearer ${this.token}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
return headers;
|
||||||
|
}
|
||||||
|
|
||||||
|
async authenticate(identity: string, password: string, isSuperuser = false): Promise<AuthResponse> {
|
||||||
|
const endpoint = isSuperuser
|
||||||
|
? `${API_BASE_URL}/collections/_superusers/auth-with-password`
|
||||||
|
: `${API_BASE_URL}/collections/users/auth-with-password`;
|
||||||
|
|
||||||
|
const response = await fetch(endpoint, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: this.getHeaders(),
|
||||||
|
body: JSON.stringify({ identity, password }),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const error = await response.json();
|
||||||
|
throw new Error(error.message || 'Authentication failed');
|
||||||
|
}
|
||||||
|
|
||||||
|
const data: AuthResponse = await response.json();
|
||||||
|
this.token = data.token;
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
|
||||||
|
async getDevices(page = 1, perPage = 30): Promise<Device[]> {
|
||||||
|
const response = await fetch(
|
||||||
|
`${API_BASE_URL}/collections/devices/records?page=${page}&perPage=${perPage}`,
|
||||||
|
{
|
||||||
|
headers: this.getHeaders(),
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Failed to fetch devices');
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
return data.items;
|
||||||
|
}
|
||||||
|
|
||||||
|
async getDevice(id: string): Promise<Device> {
|
||||||
|
const response = await fetch(
|
||||||
|
`${API_BASE_URL}/collections/devices/records/${id}`,
|
||||||
|
{
|
||||||
|
headers: this.getHeaders(),
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Failed to fetch device');
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
async createDevice(device: Partial<Device>): Promise<Device> {
|
||||||
|
const response = await fetch(
|
||||||
|
`${API_BASE_URL}/collections/devices/records`,
|
||||||
|
{
|
||||||
|
method: 'POST',
|
||||||
|
headers: this.getHeaders(),
|
||||||
|
body: JSON.stringify(device),
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const error = await response.json();
|
||||||
|
throw new Error(error.message || 'Failed to create device');
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
async updateDevice(id: string, device: Partial<Device>): Promise<Device> {
|
||||||
|
const response = await fetch(
|
||||||
|
`${API_BASE_URL}/collections/devices/records/${id}`,
|
||||||
|
{
|
||||||
|
method: 'PATCH',
|
||||||
|
headers: this.getHeaders(),
|
||||||
|
body: JSON.stringify(device),
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const error = await response.json();
|
||||||
|
throw new Error(error.message || 'Failed to update device');
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
async deleteDevice(id: string): Promise<void> {
|
||||||
|
const response = await fetch(
|
||||||
|
`${API_BASE_URL}/collections/devices/records/${id}`,
|
||||||
|
{
|
||||||
|
method: 'DELETE',
|
||||||
|
headers: this.getHeaders(),
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Failed to delete device');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async wakeDevice(id: string): Promise<void> {
|
||||||
|
const response = await fetch(
|
||||||
|
`${API_BASE_URL}/upsnap/wake/${id}`,
|
||||||
|
{
|
||||||
|
headers: this.getHeaders(),
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Failed to wake device');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async wakeGroup(id: string): Promise<void> {
|
||||||
|
const response = await fetch(
|
||||||
|
`${API_BASE_URL}/upsnap/wakegroup/${id}`,
|
||||||
|
{
|
||||||
|
headers: this.getHeaders(),
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Failed to wake group');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async sleepDevice(id: string): Promise<void> {
|
||||||
|
const response = await fetch(
|
||||||
|
`${API_BASE_URL}/upsnap/sleep/${id}`,
|
||||||
|
{
|
||||||
|
headers: this.getHeaders(),
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Failed to sleep device');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async rebootDevice(id: string): Promise<void> {
|
||||||
|
const response = await fetch(
|
||||||
|
`${API_BASE_URL}/upsnap/reboot/${id}`,
|
||||||
|
{
|
||||||
|
headers: this.getHeaders(),
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Failed to reboot device');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async shutdownDevice(id: string): Promise<void> {
|
||||||
|
const response = await fetch(
|
||||||
|
`${API_BASE_URL}/upsnap/shutdown/${id}`,
|
||||||
|
{
|
||||||
|
headers: this.getHeaders(),
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Failed to shutdown device');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async scanNetwork(): Promise<NetworkScanResult[]> {
|
||||||
|
const response = await fetch(
|
||||||
|
`${API_BASE_URL}/upsnap/scan`,
|
||||||
|
{
|
||||||
|
headers: this.getHeaders(),
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Failed to scan network');
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
console.log('Raw scan data:', data);
|
||||||
|
|
||||||
|
if (data.devices && Array.isArray(data.devices)) {
|
||||||
|
return data.devices.map((item: any) => ({
|
||||||
|
name: item.name || item.hostname || 'Unknown',
|
||||||
|
ip: item.ip || item.ip_address || '',
|
||||||
|
mac: item.mac || item.mac_address || '',
|
||||||
|
mac_vendor: item.mac_vendor || 'Unknown',
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Array.isArray(data)) {
|
||||||
|
return data.map((item: any) => ({
|
||||||
|
name: item.name || item.hostname || 'Unknown',
|
||||||
|
ip: item.ip || item.ip_address || '',
|
||||||
|
mac: item.mac || item.mac_address || '',
|
||||||
|
mac_vendor: item.mac_vendor || 'Unknown',
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.items && Array.isArray(data.items)) {
|
||||||
|
return data.items.map((item: any) => ({
|
||||||
|
name: item.name || item.hostname || 'Unknown',
|
||||||
|
ip: item.ip || item.ip_address || '',
|
||||||
|
mac: item.mac || item.mac_address || '',
|
||||||
|
mac_vendor: item.mac_vendor || 'Unknown',
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default new UpSnapAPI();
|
||||||
50
src/types/index.ts
Normal file
50
src/types/index.ts
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
export interface Device {
|
||||||
|
id: string;
|
||||||
|
collectionId: string;
|
||||||
|
collectionName: string;
|
||||||
|
name: string;
|
||||||
|
mac: string;
|
||||||
|
ip: string;
|
||||||
|
netmask: string;
|
||||||
|
broadcast: string;
|
||||||
|
secureOnPassword: string;
|
||||||
|
port: number;
|
||||||
|
groups: string[];
|
||||||
|
status: string;
|
||||||
|
created: string;
|
||||||
|
updated: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface AuthResponse {
|
||||||
|
token: string;
|
||||||
|
record: User;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface User {
|
||||||
|
id: string;
|
||||||
|
collectionId: string;
|
||||||
|
collectionName: string;
|
||||||
|
username: string;
|
||||||
|
verified: boolean;
|
||||||
|
emailVisibility: boolean;
|
||||||
|
email: string;
|
||||||
|
created: string;
|
||||||
|
updated: string;
|
||||||
|
name: string;
|
||||||
|
avatar: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DeviceGroup {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface NetworkScanResult {
|
||||||
|
name?: string;
|
||||||
|
hostname?: string;
|
||||||
|
ip?: string;
|
||||||
|
ip_address?: string;
|
||||||
|
mac?: string;
|
||||||
|
mac_address?: string;
|
||||||
|
mac_vendor?: string;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user