misc: prettier formatting
This commit is contained in:
12
.editorconfig
Normal file
12
.editorconfig
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
root = true
|
||||||
|
|
||||||
|
[*]
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
end_of_line = lf
|
||||||
|
charset = utf-8
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
insert_final_newline = true
|
||||||
|
|
||||||
|
[*.{js,jsx,ts,tsx,json,css,scss,md}]
|
||||||
|
indent_size = 2
|
||||||
8
.prettierrc
Normal file
8
.prettierrc
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"tabWidth": 2,
|
||||||
|
"useTabs": false,
|
||||||
|
"semi": true,
|
||||||
|
"singleQuote": true,
|
||||||
|
"trailingComma": "es5",
|
||||||
|
"arrowParens": "avoid"
|
||||||
|
}
|
||||||
11
.vscode/settings.json
vendored
11
.vscode/settings.json
vendored
@@ -3,5 +3,16 @@
|
|||||||
"source.fixAll": "explicit",
|
"source.fixAll": "explicit",
|
||||||
"source.organizeImports": "explicit",
|
"source.organizeImports": "explicit",
|
||||||
"source.sortMembers": "explicit"
|
"source.sortMembers": "explicit"
|
||||||
|
},
|
||||||
|
"editor.detectIndentation": false,
|
||||||
|
"editor.tabSize": 2,
|
||||||
|
"editor.insertSpaces": true,
|
||||||
|
"[javascript]": {
|
||||||
|
"editor.tabSize": 2,
|
||||||
|
"editor.insertSpaces": true
|
||||||
|
},
|
||||||
|
"[typescript]": {
|
||||||
|
"editor.tabSize": 2,
|
||||||
|
"editor.insertSpaces": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import { ContextMenu, Host, Button as SwiftUIButton } from "@expo/ui/swift-ui";
|
import { ContextMenu, Host, Button as SwiftUIButton } from '@expo/ui/swift-ui';
|
||||||
import { Ionicons } from "@expo/vector-icons";
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
import { SymbolView } from "expo-symbols";
|
import { SymbolView } from 'expo-symbols';
|
||||||
import React, { useCallback, useEffect, useState } from "react";
|
import React, { useCallback, useEffect, useState } from 'react';
|
||||||
import {
|
import {
|
||||||
ActivityIndicator,
|
ActivityIndicator,
|
||||||
Alert,
|
Alert,
|
||||||
@@ -12,20 +12,20 @@ import {
|
|||||||
Text,
|
Text,
|
||||||
TouchableOpacity,
|
TouchableOpacity,
|
||||||
View,
|
View,
|
||||||
} from "react-native";
|
} from 'react-native';
|
||||||
import { useColorScheme } from "../../hooks/use-color-scheme";
|
import { useColorScheme } from '../../hooks/use-color-scheme';
|
||||||
import api from "../../src/services/api";
|
import api from '../../src/services/api';
|
||||||
import { Device } from "../../src/types";
|
import { Device } from '../../src/types';
|
||||||
import * as Burnt from "burnt";
|
import * as Burnt from 'burnt';
|
||||||
|
|
||||||
export default function DeviceListScreen() {
|
export default function DeviceListScreen() {
|
||||||
const colorScheme = useColorScheme() ?? "light";
|
const colorScheme = useColorScheme() ?? 'light';
|
||||||
const isDark = colorScheme === "dark";
|
const isDark = colorScheme === 'dark';
|
||||||
const bgColor = isDark ? "#0b0b0d" : "#f5f5f5";
|
const bgColor = isDark ? '#0b0b0d' : '#f5f5f5';
|
||||||
const cardBg = isDark ? "#1c1c1e" : "#fff";
|
const cardBg = isDark ? '#1c1c1e' : '#fff';
|
||||||
const textColor = isDark ? "#ffffff" : "#333333";
|
const textColor = isDark ? '#ffffff' : '#333333';
|
||||||
const subTextColor = isDark ? "#c6c6c8" : "#666666";
|
const subTextColor = isDark ? '#c6c6c8' : '#666666';
|
||||||
const activityColor = isDark ? "#0A84FF" : "#007AFF";
|
const activityColor = isDark ? '#0A84FF' : '#007AFF';
|
||||||
|
|
||||||
const [devices, setDevices] = useState<Device[]>([]);
|
const [devices, setDevices] = useState<Device[]>([]);
|
||||||
const [isLoading, setIsLoading] = useState(true);
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
@@ -39,7 +39,7 @@ export default function DeviceListScreen() {
|
|||||||
} catch (error: any) {
|
} catch (error: any) {
|
||||||
// For background/periodic refreshes, avoid interruptive alerts
|
// For background/periodic refreshes, avoid interruptive alerts
|
||||||
if (showLoading) {
|
if (showLoading) {
|
||||||
Alert.alert("Error", error.message || "Failed to load devices");
|
Alert.alert('Error', error.message || 'Failed to load devices');
|
||||||
}
|
}
|
||||||
} finally {
|
} finally {
|
||||||
if (showLoading) setIsLoading(false);
|
if (showLoading) setIsLoading(false);
|
||||||
@@ -71,14 +71,14 @@ export default function DeviceListScreen() {
|
|||||||
startPolling();
|
startPolling();
|
||||||
|
|
||||||
const onAppStateChange = (nextAppState: string) => {
|
const onAppStateChange = (nextAppState: string) => {
|
||||||
if (nextAppState === "active") {
|
if (nextAppState === 'active') {
|
||||||
startPolling();
|
startPolling();
|
||||||
} else {
|
} else {
|
||||||
stopPolling();
|
stopPolling();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const subscription = AppState.addEventListener("change", onAppStateChange);
|
const subscription = AppState.addEventListener('change', onAppStateChange);
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
stopPolling();
|
stopPolling();
|
||||||
@@ -96,38 +96,39 @@ export default function DeviceListScreen() {
|
|||||||
try {
|
try {
|
||||||
await api.wakeDevice(device.id);
|
await api.wakeDevice(device.id);
|
||||||
Burnt.toast({
|
Burnt.toast({
|
||||||
title: "Success",
|
title: 'Success',
|
||||||
preset: "done",
|
preset: 'done',
|
||||||
message: `Waking ${device.name} up.`,
|
message: `Waking ${device.name} up.`,
|
||||||
});
|
});
|
||||||
} catch (error: any) {
|
} catch (error: any) {
|
||||||
Burnt.toast({
|
Burnt.toast({
|
||||||
title: "Error",
|
title: 'Error',
|
||||||
preset: "error",
|
preset: 'error',
|
||||||
message: error.message || `Failed to wake up ${device.name}.`,
|
message: error.message || `Failed to wake up ${device.name}.`,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSleep = async (device: Device) => {
|
const handleSleep = async (device: Device) => {
|
||||||
Alert.alert("Confirm", `Send ${device.name} to sleep?`, [
|
Alert.alert('Confirm', `Send ${device.name} to sleep?`, [
|
||||||
{ text: "Cancel", style: "cancel" },
|
{ text: 'Cancel', style: 'cancel' },
|
||||||
{
|
{
|
||||||
text: "Sleep",
|
text: 'Sleep',
|
||||||
style: "destructive",
|
style: 'destructive',
|
||||||
onPress: async () => {
|
onPress: async () => {
|
||||||
try {
|
try {
|
||||||
await api.sleepDevice(device.id);
|
await api.sleepDevice(device.id);
|
||||||
Burnt.toast({
|
Burnt.toast({
|
||||||
title: "Success",
|
title: 'Success',
|
||||||
preset: "done",
|
preset: 'done',
|
||||||
message: `Sending ${device.name} to sleep.`,
|
message: `Sending ${device.name} to sleep.`,
|
||||||
});
|
});
|
||||||
} catch (error: any) {
|
} catch (error: any) {
|
||||||
Burnt.toast({
|
Burnt.toast({
|
||||||
title: "Error",
|
title: 'Error',
|
||||||
preset: "error",
|
preset: 'error',
|
||||||
message: error.message || `Failed to send ${device.name} to sleep.`,
|
message:
|
||||||
|
error.message || `Failed to send ${device.name} to sleep.`,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -136,23 +137,23 @@ export default function DeviceListScreen() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const handleReboot = async (device: Device) => {
|
const handleReboot = async (device: Device) => {
|
||||||
Alert.alert("Confirm", `Reboot ${device.name}?`, [
|
Alert.alert('Confirm', `Reboot ${device.name}?`, [
|
||||||
{ text: "Cancel", style: "cancel" },
|
{ text: 'Cancel', style: 'cancel' },
|
||||||
{
|
{
|
||||||
text: "Reboot",
|
text: 'Reboot',
|
||||||
style: "destructive",
|
style: 'destructive',
|
||||||
onPress: async () => {
|
onPress: async () => {
|
||||||
try {
|
try {
|
||||||
await api.rebootDevice(device.id);
|
await api.rebootDevice(device.id);
|
||||||
Burnt.toast({
|
Burnt.toast({
|
||||||
title: "Success",
|
title: 'Success',
|
||||||
preset: "done",
|
preset: 'done',
|
||||||
message: `Rebooting ${device.name}.`,
|
message: `Rebooting ${device.name}.`,
|
||||||
});
|
});
|
||||||
} catch (error: any) {
|
} catch (error: any) {
|
||||||
Burnt.toast({
|
Burnt.toast({
|
||||||
title: "Error",
|
title: 'Error',
|
||||||
preset: "error",
|
preset: 'error',
|
||||||
message: error.message || `Failed to reboot ${device.name}`,
|
message: error.message || `Failed to reboot ${device.name}`,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -163,25 +164,25 @@ export default function DeviceListScreen() {
|
|||||||
|
|
||||||
const handleShutdown = async (device: Device) => {
|
const handleShutdown = async (device: Device) => {
|
||||||
Alert.alert(
|
Alert.alert(
|
||||||
"Confirm Shutdown",
|
'Confirm Shutdown',
|
||||||
`Shutdown ${device.name}? This cannot be undone.`,
|
`Shutdown ${device.name}? This cannot be undone.`,
|
||||||
[
|
[
|
||||||
{ text: "Cancel", style: "cancel" },
|
{ text: 'Cancel', style: 'cancel' },
|
||||||
{
|
{
|
||||||
text: "Shutdown",
|
text: 'Shutdown',
|
||||||
style: "destructive",
|
style: 'destructive',
|
||||||
onPress: async () => {
|
onPress: async () => {
|
||||||
try {
|
try {
|
||||||
await api.shutdownDevice(device.id);
|
await api.shutdownDevice(device.id);
|
||||||
Burnt.toast({
|
Burnt.toast({
|
||||||
title: "Success",
|
title: 'Success',
|
||||||
preset: "done",
|
preset: 'done',
|
||||||
message: `Shutting down ${device.name}.`,
|
message: `Shutting down ${device.name}.`,
|
||||||
});
|
});
|
||||||
} catch (error: any) {
|
} catch (error: any) {
|
||||||
Burnt.toast({
|
Burnt.toast({
|
||||||
title: "Error",
|
title: 'Error',
|
||||||
preset: "error",
|
preset: 'error',
|
||||||
message: error.message || `Failed to shut down ${device.name}.`,
|
message: error.message || `Failed to shut down ${device.name}.`,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -192,30 +193,30 @@ export default function DeviceListScreen() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const handleDelete = (device: Device) => {
|
const handleDelete = (device: Device) => {
|
||||||
Alert.alert("Delete Device", `Delete "${device.name}"?`, [
|
Alert.alert('Delete Device', `Delete "${device.name}"?`, [
|
||||||
{
|
{
|
||||||
text: "Cancel",
|
text: 'Cancel',
|
||||||
style: "cancel",
|
style: 'cancel',
|
||||||
onPress: () => {
|
onPress: () => {
|
||||||
// Close alert
|
// Close alert
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: "Delete",
|
text: 'Delete',
|
||||||
style: "destructive",
|
style: 'destructive',
|
||||||
onPress: async () => {
|
onPress: async () => {
|
||||||
try {
|
try {
|
||||||
await api.deleteDevice(device.id);
|
await api.deleteDevice(device.id);
|
||||||
Burnt.toast({
|
Burnt.toast({
|
||||||
title: "Success",
|
title: 'Success',
|
||||||
preset: "done",
|
preset: 'done',
|
||||||
message: `Deleted ${device.name} successfully.`,
|
message: `Deleted ${device.name} successfully.`,
|
||||||
});
|
});
|
||||||
fetchDevices(false);
|
fetchDevices(false);
|
||||||
} catch (error: any) {
|
} catch (error: any) {
|
||||||
Burnt.toast({
|
Burnt.toast({
|
||||||
title: "Error",
|
title: 'Error',
|
||||||
preset: "error",
|
preset: 'error',
|
||||||
message: error.message || `Failed to delete ${device.name}.`,
|
message: error.message || `Failed to delete ${device.name}.`,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -226,12 +227,12 @@ export default function DeviceListScreen() {
|
|||||||
|
|
||||||
const getStatusColor = (status: string) => {
|
const getStatusColor = (status: string) => {
|
||||||
switch (status?.toLowerCase()) {
|
switch (status?.toLowerCase()) {
|
||||||
case "online":
|
case 'online':
|
||||||
return "#4CAF50";
|
return '#4CAF50';
|
||||||
case "offline":
|
case 'offline':
|
||||||
return "#f44336";
|
return '#f44336';
|
||||||
default:
|
default:
|
||||||
return "#ff9800";
|
return '#ff9800';
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -261,7 +262,7 @@ export default function DeviceListScreen() {
|
|||||||
type="monochrome"
|
type="monochrome"
|
||||||
fallback={
|
fallback={
|
||||||
<Ionicons
|
<Ionicons
|
||||||
name={(fallbackName || "ellipse") as any}
|
name={(fallbackName || 'ellipse') as any}
|
||||||
size={20}
|
size={20}
|
||||||
color={color}
|
color={color}
|
||||||
/>
|
/>
|
||||||
@@ -289,7 +290,7 @@ export default function DeviceListScreen() {
|
|||||||
styles.deviceCard,
|
styles.deviceCard,
|
||||||
{
|
{
|
||||||
backgroundColor: cardBg,
|
backgroundColor: cardBg,
|
||||||
shadowColor: isDark ? "rgba(0,0,0,0.6)" : "#000",
|
shadowColor: isDark ? 'rgba(0,0,0,0.6)' : '#000',
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
>
|
>
|
||||||
@@ -308,7 +309,7 @@ export default function DeviceListScreen() {
|
|||||||
size={18}
|
size={18}
|
||||||
tintColor={getStatusColor(item.status)}
|
tintColor={getStatusColor(item.status)}
|
||||||
animationSpec={{
|
animationSpec={{
|
||||||
effect: { type: "pulse" },
|
effect: { type: 'pulse' },
|
||||||
repeating: true,
|
repeating: true,
|
||||||
speed: 1,
|
speed: 1,
|
||||||
}}
|
}}
|
||||||
@@ -380,7 +381,7 @@ export default function DeviceListScreen() {
|
|||||||
<FlatList
|
<FlatList
|
||||||
data={devices}
|
data={devices}
|
||||||
renderItem={renderDevice}
|
renderItem={renderDevice}
|
||||||
keyExtractor={(item) => item.id}
|
keyExtractor={item => item.id}
|
||||||
contentContainerStyle={styles.list}
|
contentContainerStyle={styles.list}
|
||||||
refreshControl={
|
refreshControl={
|
||||||
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
|
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
|
||||||
@@ -400,10 +401,10 @@ export default function DeviceListScreen() {
|
|||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
container: {
|
container: {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
backgroundColor: "#f5f5f5",
|
backgroundColor: '#f5f5f5',
|
||||||
},
|
},
|
||||||
headerRight: {
|
headerRight: {
|
||||||
flexDirection: "row",
|
flexDirection: 'row',
|
||||||
gap: 16,
|
gap: 16,
|
||||||
},
|
},
|
||||||
headerButton: {
|
headerButton: {
|
||||||
@@ -411,28 +412,28 @@ const styles = StyleSheet.create({
|
|||||||
},
|
},
|
||||||
loadingContainer: {
|
loadingContainer: {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
justifyContent: "center",
|
justifyContent: 'center',
|
||||||
alignItems: "center",
|
alignItems: 'center',
|
||||||
},
|
},
|
||||||
list: {
|
list: {
|
||||||
padding: 15,
|
padding: 15,
|
||||||
gap: 15,
|
gap: 15,
|
||||||
},
|
},
|
||||||
deviceCard: {
|
deviceCard: {
|
||||||
backgroundColor: "#fff",
|
backgroundColor: '#fff',
|
||||||
borderRadius: 12,
|
borderRadius: 12,
|
||||||
padding: 15,
|
padding: 15,
|
||||||
paddingRight: 25,
|
paddingRight: 25,
|
||||||
shadowColor: "#000",
|
shadowColor: '#000',
|
||||||
shadowOffset: { width: 0, height: 2 },
|
shadowOffset: { width: 0, height: 2 },
|
||||||
shadowOpacity: 0.1,
|
shadowOpacity: 0.1,
|
||||||
shadowRadius: 4,
|
shadowRadius: 4,
|
||||||
elevation: 3,
|
elevation: 3,
|
||||||
},
|
},
|
||||||
deviceHeader: {
|
deviceHeader: {
|
||||||
flexDirection: "row",
|
flexDirection: 'row',
|
||||||
justifyContent: "space-between",
|
justifyContent: 'space-between',
|
||||||
alignItems: "center",
|
alignItems: 'center',
|
||||||
marginBottom: 12,
|
marginBottom: 12,
|
||||||
},
|
},
|
||||||
deviceInfo: {
|
deviceInfo: {
|
||||||
@@ -440,13 +441,13 @@ const styles = StyleSheet.create({
|
|||||||
},
|
},
|
||||||
deviceName: {
|
deviceName: {
|
||||||
fontSize: 18,
|
fontSize: 18,
|
||||||
fontWeight: "bold",
|
fontWeight: 'bold',
|
||||||
color: "#333",
|
color: '#333',
|
||||||
marginBottom: 4,
|
marginBottom: 4,
|
||||||
},
|
},
|
||||||
deviceIP: {
|
deviceIP: {
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
color: "#666",
|
color: '#666',
|
||||||
},
|
},
|
||||||
statusDot: {
|
statusDot: {
|
||||||
width: 12,
|
width: 12,
|
||||||
@@ -454,17 +455,17 @@ const styles = StyleSheet.create({
|
|||||||
borderRadius: 6,
|
borderRadius: 6,
|
||||||
},
|
},
|
||||||
deviceActions: {
|
deviceActions: {
|
||||||
flexDirection: "row",
|
flexDirection: 'row',
|
||||||
alignItems: "center",
|
alignItems: 'center',
|
||||||
justifyContent: "flex-start",
|
justifyContent: 'flex-start',
|
||||||
marginTop: 8,
|
marginTop: 8,
|
||||||
paddingBottom: 6,
|
paddingBottom: 6,
|
||||||
},
|
},
|
||||||
actionIconContainer: {
|
actionIconContainer: {
|
||||||
padding: 6,
|
padding: 6,
|
||||||
marginRight: 12,
|
marginRight: 12,
|
||||||
justifyContent: "center",
|
justifyContent: 'center',
|
||||||
alignItems: "center",
|
alignItems: 'center',
|
||||||
minWidth: 36,
|
minWidth: 36,
|
||||||
minHeight: 36,
|
minHeight: 36,
|
||||||
},
|
},
|
||||||
@@ -473,21 +474,21 @@ const styles = StyleSheet.create({
|
|||||||
height: 22,
|
height: 22,
|
||||||
},
|
},
|
||||||
actionButtonText: {
|
actionButtonText: {
|
||||||
color: "#fff",
|
color: '#fff',
|
||||||
fontWeight: "600",
|
fontWeight: '600',
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
},
|
},
|
||||||
wakeButton: {
|
wakeButton: {
|
||||||
backgroundColor: "#4CAF50",
|
backgroundColor: '#4CAF50',
|
||||||
},
|
},
|
||||||
sleepButton: {
|
sleepButton: {
|
||||||
backgroundColor: "#FF9800",
|
backgroundColor: '#FF9800',
|
||||||
},
|
},
|
||||||
rebootButton: {
|
rebootButton: {
|
||||||
backgroundColor: "#2196F3",
|
backgroundColor: '#2196F3',
|
||||||
},
|
},
|
||||||
shutdownButton: {
|
shutdownButton: {
|
||||||
backgroundColor: "#f44336",
|
backgroundColor: '#f44336',
|
||||||
},
|
},
|
||||||
statusSymbol: {
|
statusSymbol: {
|
||||||
width: 18,
|
width: 18,
|
||||||
@@ -499,11 +500,11 @@ const styles = StyleSheet.create({
|
|||||||
elevation: 6,
|
elevation: 6,
|
||||||
},
|
},
|
||||||
emptyContainer: {
|
emptyContainer: {
|
||||||
alignItems: "center",
|
alignItems: 'center',
|
||||||
paddingVertical: 50,
|
paddingVertical: 50,
|
||||||
},
|
},
|
||||||
emptyText: {
|
emptyText: {
|
||||||
fontSize: 16,
|
fontSize: 16,
|
||||||
color: "#999",
|
color: '#999',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user