Data model complete
This commit is contained in:
Joshua Higgins
291
app/index.tsx
291
app/index.tsx
@@ -2,122 +2,194 @@ import { Stack } from "expo-router";
|
||||
import {StyleSheet, Text, View, ColorValue, ListRenderItemInfo, TouchableOpacity, Platform} from "react-native";
|
||||
import {RowMap, SwipeListView} from "react-native-swipe-list-view";
|
||||
import {ChevronDown, Plus} from "lucide-react-native";
|
||||
import {useRef} from "react";
|
||||
import {MenuComponentRef, MenuView} from "@react-native-menu/menu";
|
||||
import {useEffect, useState} from "react";
|
||||
import {MenuAction, MenuView, NativeActionEvent} from "@react-native-menu/menu";
|
||||
import {SQLiteDatabase, SQLiteProvider, useSQLiteContext} from "expo-sqlite";
|
||||
|
||||
const servers: Server[] = [
|
||||
{
|
||||
key: 0,
|
||||
name: "Test Data Server",
|
||||
domain: "localhost",
|
||||
computers: [
|
||||
{
|
||||
key: 0,
|
||||
name: "Test PC",
|
||||
emoji: "💻",
|
||||
background_color: '#D9D9D9',
|
||||
mac_address: "00:1A:2B:3C:4D:5E",
|
||||
},
|
||||
{
|
||||
key: 1,
|
||||
name: "Another PC in the basement",
|
||||
emoji: "💻",
|
||||
background_color: '#D9D9D9',
|
||||
mac_address: "00:1A:2B:3C:4D:5E",
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 1,
|
||||
name: "The Other Server",
|
||||
domain: "192.168.86.252",
|
||||
}
|
||||
];
|
||||
const computers: Computer[] = [
|
||||
{
|
||||
key: 0,
|
||||
server_key: 0,
|
||||
name: "Test PC",
|
||||
emoji: "💻",
|
||||
background_color: '#D9D9D9',
|
||||
mac_address: "00:1A:2B:3C:4D:5E",
|
||||
},
|
||||
{
|
||||
key: 1,
|
||||
server_key: 0,
|
||||
name: "Another PC in the basement",
|
||||
emoji: "💻",
|
||||
background_color: '#D9D9D9',
|
||||
mac_address: "00:1A:2B:3C:4D:5E",
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
server_key: 1,
|
||||
name: "Mom's PC",
|
||||
emoji: "🌹",
|
||||
background_color: '#D9D9D9',
|
||||
mac_address: "00:1A:2B:3C:4D:5E",
|
||||
},
|
||||
{
|
||||
key: 3,
|
||||
server_key: 1,
|
||||
name: "Jordan's PC",
|
||||
emoji: "💪",
|
||||
background_color: '#D9D9D9',
|
||||
mac_address: "00:1A:2B:3C:4D:5E",
|
||||
}
|
||||
];
|
||||
|
||||
async function migrateDbIfNeeded(db: SQLiteDatabase) {
|
||||
await db.execAsync(`
|
||||
PRAGMA journal_mode = WAL;
|
||||
CREATE TABLE IF NOT EXISTS servers (key INTEGER PRIMARY KEY NOT NULL, name TEXT NOT NULL, domain TEXT NOT NULL);
|
||||
CREATE TABLE IF NOT EXISTS computers (key INTEGER PRIMARY KEY NOT NULL, server_key INTEGER NOT NULL, name, emoji, background_color, mac_address TEXT NOT NULL);
|
||||
`);
|
||||
}
|
||||
|
||||
export default function Index() {
|
||||
const [ currentServerName, setCurrentServerName ] = useState<string>("None");
|
||||
const [ servers, setServers ] = useState<Server[]>([]);
|
||||
const [ computers, setComputers ] = useState<Computer[]>([]);
|
||||
|
||||
return (
|
||||
<View>
|
||||
<Stack.Screen
|
||||
options={{
|
||||
title: 'Home',
|
||||
headerTintColor: '#fff',
|
||||
headerTitleStyle: {
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
headerTitle: props =>
|
||||
<View style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
gap: 10,
|
||||
}}>
|
||||
<Text style={{
|
||||
fontSize: 20,
|
||||
fontWeight: 'bold',
|
||||
}}>{servers[0].name}</Text>
|
||||
<View style={{
|
||||
backgroundColor: "#007AFF",
|
||||
borderRadius: 100,
|
||||
}}>
|
||||
<MenuView
|
||||
onPressAction={({ nativeEvent }) => {
|
||||
console.warn(JSON.stringify(nativeEvent));
|
||||
//TODO: Handle adding computers/servers
|
||||
}}
|
||||
actions={[
|
||||
{
|
||||
id: 'server0',
|
||||
title: servers[0].name,
|
||||
titleColor: '#2367A2',
|
||||
imageColor: '#2367A2',
|
||||
},
|
||||
{
|
||||
id: 'deleteServer',
|
||||
title: 'Delete Current Server',
|
||||
attributes: {
|
||||
destructive: true,
|
||||
},
|
||||
image: Platform.select({
|
||||
ios: 'trash',
|
||||
android: 'ic_menu_delete',
|
||||
}),
|
||||
imageColor: "red",
|
||||
},
|
||||
]}
|
||||
shouldOpenOnLongPress={false}
|
||||
>
|
||||
<ChevronDown color={"#FFFFFF"} />
|
||||
</MenuView>
|
||||
</View>
|
||||
</View>,
|
||||
headerRight: props =>
|
||||
<View>
|
||||
<MenuView
|
||||
onPressAction={({ nativeEvent }) => {
|
||||
console.warn(JSON.stringify(nativeEvent));
|
||||
//TODO: Handle adding computers/servers
|
||||
}}
|
||||
actions={[
|
||||
{
|
||||
id: 'addComputer',
|
||||
title: 'Add Computer',
|
||||
titleColor: '#000000',
|
||||
image: 'desktopcomputer',
|
||||
imageColor: '#000000',
|
||||
},
|
||||
{
|
||||
id: 'addServer',
|
||||
title: 'Add Server',
|
||||
titleColor: '#000000',
|
||||
image: 'globe',
|
||||
imageColor: '#000000',
|
||||
},
|
||||
]}
|
||||
shouldOpenOnLongPress={false}
|
||||
>
|
||||
<Plus color={"#007AFF"} />
|
||||
</MenuView>
|
||||
</View>
|
||||
}}
|
||||
/>
|
||||
<ComputerList computers={servers[0].computers}/>
|
||||
<SQLiteProvider databaseName="selfstarter.db" onInit={migrateDbIfNeeded}>
|
||||
<Header servers={servers} setServers={setServers} currentServerName={currentServerName} setCurrentServerName={setCurrentServerName} />
|
||||
<ComputerList computers={computers} setComputers={setComputers}/>
|
||||
</SQLiteProvider>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function Header(props: { servers: Server[], setServers: (value: (((prevState: Server[]) => Server[]) | Server[])) => void, currentServerName: string, setCurrentServerName: (value: (((prevState: string) => string) | string)) => void }) {
|
||||
const db = useSQLiteContext();
|
||||
|
||||
useEffect(() => {
|
||||
async function setup() {
|
||||
const result = await db.getFirstAsync<Server>(`SELECT * FROM servers`);
|
||||
props.setCurrentServerName(result?.name || "None");
|
||||
}
|
||||
|
||||
if (props.currentServerName === "None") {
|
||||
setup();
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
async function setup() {
|
||||
const result = await db.getAllAsync<Server>(`SELECT * FROM servers`);
|
||||
props.setServers(result);
|
||||
}
|
||||
setup();
|
||||
}, []);
|
||||
|
||||
const selectActions: MenuAction[] = [];
|
||||
for (const server of props.servers) {
|
||||
if (server.name !== props.currentServerName) {
|
||||
selectActions.push({
|
||||
id: server.domain,
|
||||
title: server.name,
|
||||
titleColor: '#2367A2',
|
||||
imageColor: '#2367A2',
|
||||
})
|
||||
}
|
||||
}
|
||||
selectActions.push({
|
||||
id: 'deleteServer',
|
||||
title: 'Delete Current Server',
|
||||
attributes: {
|
||||
destructive: true,
|
||||
},
|
||||
image: Platform.select({
|
||||
ios: 'trash',
|
||||
android: 'ic_menu_delete',
|
||||
}),
|
||||
imageColor: "red",
|
||||
})
|
||||
|
||||
|
||||
const handleServerSelect = ({nativeEvent}: NativeActionEvent) => {
|
||||
const newName = props.servers.find((server) => {
|
||||
return server.name === nativeEvent.event;
|
||||
})
|
||||
props.setCurrentServerName(newName?.name ?? "None");
|
||||
};
|
||||
|
||||
return <Stack.Screen
|
||||
options={{
|
||||
title: 'Home',
|
||||
headerTintColor: '#fff',
|
||||
headerTitleStyle: {
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
headerTitle: _ =>
|
||||
<View style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
gap: 10,
|
||||
}}>
|
||||
<Text style={{
|
||||
fontSize: 20,
|
||||
fontWeight: 'bold',
|
||||
}}>{props.currentServerName}</Text>
|
||||
{selectActions.length > 1 &&
|
||||
<View style={{
|
||||
backgroundColor: "#007AFF",
|
||||
borderRadius: 100,
|
||||
}}>
|
||||
<MenuView onPressAction={handleServerSelect} actions={selectActions}>
|
||||
<ChevronDown color={"#FFFFFF"}/>
|
||||
</MenuView>
|
||||
</View>
|
||||
}
|
||||
</View>,
|
||||
headerRight: props =>
|
||||
<View>
|
||||
<MenuView
|
||||
onPressAction={({nativeEvent}) => {
|
||||
console.log(JSON.stringify(nativeEvent));
|
||||
//TODO: Handle adding computers/servers
|
||||
}}
|
||||
actions={[
|
||||
{
|
||||
id: 'addComputer',
|
||||
title: 'Add Computer',
|
||||
titleColor: '#000000',
|
||||
image: 'desktopcomputer',
|
||||
imageColor: '#000000',
|
||||
},
|
||||
{
|
||||
id: 'addServer',
|
||||
title: 'Add Server',
|
||||
titleColor: '#000000',
|
||||
image: 'globe',
|
||||
imageColor: '#000000',
|
||||
},
|
||||
]}
|
||||
shouldOpenOnLongPress={false}
|
||||
>
|
||||
<Plus color={"#007AFF"}/>
|
||||
</MenuView>
|
||||
</View>
|
||||
}}
|
||||
/>
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
computerElement: {
|
||||
display: "flex",
|
||||
@@ -161,7 +233,17 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
});
|
||||
|
||||
function ComputerList(computers: { computers: Computer[] }) {
|
||||
function ComputerList(props: {computers: Computer[], setComputers: (value: (((prevState: Computer[]) => Computer[]) | Computer[])) => void }) {
|
||||
const db = useSQLiteContext();
|
||||
|
||||
useEffect(() => {
|
||||
async function setup() {
|
||||
const result = await db.getAllAsync<Computer>(`SELECT * FROM computers`);
|
||||
props.setComputers(result);
|
||||
}
|
||||
setup();
|
||||
}, []);
|
||||
|
||||
const renderHiddenItem = (data: ListRenderItemInfo<Computer>, rowMap: RowMap<Computer>) => (
|
||||
<View style={styles.rowBack}>
|
||||
<TouchableOpacity
|
||||
@@ -176,7 +258,7 @@ function ComputerList(computers: { computers: Computer[] }) {
|
||||
|
||||
return (
|
||||
<SwipeListView
|
||||
data={computers.computers}
|
||||
data={props.computers}
|
||||
renderItem={({item}: ListRenderItemInfo<Computer>) =>
|
||||
<View style={styles.computerElement}>
|
||||
<View style={{
|
||||
@@ -207,13 +289,14 @@ function ComputerList(computers: { computers: Computer[] }) {
|
||||
}
|
||||
|
||||
type Server = {
|
||||
key: number,
|
||||
name: string,
|
||||
domain: string,
|
||||
computers: Computer[],
|
||||
}
|
||||
|
||||
type Computer = {
|
||||
key: number,
|
||||
server_key: number,
|
||||
name: string,
|
||||
emoji: string,
|
||||
background_color: ColorValue,
|
||||
|
||||
Reference in New Issue
Block a user