diff --git a/app/nodes/[node]/index.tsx b/app/nodes/[node]/index.tsx
index b4d2953..3628fc0 100644
--- a/app/nodes/[node]/index.tsx
+++ b/app/nodes/[node]/index.tsx
@@ -1,10 +1,13 @@
-import { Link, Stack, useSearchParams } from "expo-router";
-import { View, Text, SafeAreaView, ScrollView } from "react-native";
+import { Link, useSearchParams } from "expo-router";
+import { View, Text, SafeAreaView, ScrollView, Button } from "react-native";
import { NodeResource, useNode } from "../../../hooks/useNode";
import Icon from "@expo/vector-icons/Feather";
import tw from "twrnc";
import { formatBytes, formatPercentage } from "../../../lib/helper/format";
import { useEffect, useMemo } from "react";
+import { Gauge } from "../../../components/Gauge";
+import ProgressBar from "../../../components/ProgressBar";
+import Card from "../../../components/Card";
interface ResourceListItemProps {
type: "LXC" | "QEMU";
@@ -42,54 +45,6 @@ export function ResourceListItem({ type, resource }: ResourceListItemProps) {
);
}
-interface ProgressBarProps {
- label: string;
- value: number;
- max: number;
- formatFn?: (input: number) => string;
-}
-
-export function ProgressBar({ label, value, max, formatFn }: ProgressBarProps) {
- const percentage = formatPercentage(value / max);
- return (
-
-
-
- {label} ({percentage})
-
- {formatFn && (
-
- {formatFn(value)}/{formatFn(max)}
-
- )}
-
-
-
-
-
- );
-}
-
-interface GaugeProps {
- label: string;
- value: string;
-}
-
-export function Gauge({ label, value }: GaugeProps) {
- return (
-
- {label}
- {value}
-
- );
-}
-
export default function NodePage() {
const { node: nodeName } = useSearchParams<{ node: string }>();
const node = useNode(nodeName);
@@ -105,14 +60,10 @@ export default function NodePage() {
}, [node.qemu.data]);
return (
-
-
-
-
+
+
+
+
{nodeName}
{node.status.isSuccess && (
@@ -120,88 +71,78 @@ export default function NodePage() {
{node.status.data.kversion}
)}
- {node.rdd.isSuccess && (
-
-
-
-
-
-
+ {node.rdd.isSuccess && (
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
-
-
-
-
-
-
-
-
- )}
-
- LXC Containers
-
+ )}
+
+
+
+ {sortedLXCs.map((lxc) => (
+
- {sortedLXCs.map((lxc) => (
-
-
-
- ))}
-
- Virtual Machines
-
+
+ ))}
+
+
+ {sortedVMs.map((vm) => (
+
- {sortedVMs.map((vm) => (
-
-
-
- ))}
-
-
-
-
+
+
+ ))}
+
+
);
}
diff --git a/app/nodes/index.tsx b/app/nodes/index.tsx
index a2cdb79..1cc298b 100644
--- a/app/nodes/index.tsx
+++ b/app/nodes/index.tsx
@@ -5,6 +5,7 @@ import Icon from "@expo/vector-icons/Feather";
import tw from "twrnc";
import { formatPercentage } from "../../lib/helper/format";
import { ScrollView } from "react-native-gesture-handler";
+import Card from "../../components/Card";
export function NodeListItem({ node }: { node: ProxmoxNode }) {
return (
@@ -38,43 +39,31 @@ export default function HomePage() {
const nodes = useNodes();
return (
-
-
-
- Nodes
-
- {nodes.isSuccess &&
- nodes.data.map((node) => (
-
-
-
- ))}
-
+
+
+ {nodes.isSuccess &&
+ nodes.data.map((node) => (
+
+
+
+ ))}
+
- Storage
-
-
- Currently not supported
-
-
-
-
-
+
+
+ Currently not supported
+
+
+
);
}
diff --git a/components/Card/index.tsx b/components/Card/index.tsx
new file mode 100644
index 0000000..d958b40
--- /dev/null
+++ b/components/Card/index.tsx
@@ -0,0 +1,20 @@
+import { View, Text } from "react-native";
+import tw from "twrnc";
+
+interface CardProps {
+ label?: string;
+ children: React.ReactNode;
+}
+
+export default function Card({ label, children }: CardProps) {
+ return (
+ <>
+ {label && {label}}
+
+ {children}
+
+
+ );
+}
diff --git a/components/Gauge/index.tsx b/components/Gauge/index.tsx
new file mode 100644
index 0000000..bc33c6c
--- /dev/null
+++ b/components/Gauge/index.tsx
@@ -0,0 +1,16 @@
+import { View, Text } from "react-native";
+import tw from "twrnc";
+
+interface GaugeProps {
+ label: string;
+ value: string;
+}
+
+export function Gauge({ label, value }: GaugeProps) {
+ return (
+
+ {label}
+ {value}
+
+ );
+}
diff --git a/components/Login/index.tsx b/components/Login/index.tsx
index 5ab9524..f72c4e2 100644
--- a/components/Login/index.tsx
+++ b/components/Login/index.tsx
@@ -1,12 +1,49 @@
-import { View, Button, Text, TextInput } from "react-native";
+import {
+ View,
+ TouchableOpacity,
+ Text,
+ TextInput,
+ SafeAreaView,
+ TextInputProps,
+} from "react-native";
import React, { useState } from "react";
+import tw from "twrnc";
import useAuthStore from "../../stores/useAuthStore";
import { useTicketMut } from "../../hooks/useTicket";
+interface FormFieldProps extends TextInputProps {
+ label: string;
+}
+
+export function FormField({
+ label,
+ value,
+ onChangeText,
+ placeholder,
+ secureTextEntry,
+ inputMode,
+}: FormFieldProps) {
+ return (
+ <>
+ {label}
+
+
+ );
+}
+
export default function Login() {
- const [domain, setDomain] = useState("");
+ const [domain, setDomain] = useState("https://pve.holowaif.us:8006");
const [username, setUsername] = useState("root@pam");
- const [password, setPassword] = useState("");
+ const [password, setPassword] = useState("1Absolut3.lyAd0r3Vtube.rs!");
const authStore = useAuthStore();
const ticketMut = useTicketMut({
@@ -17,23 +54,51 @@ export default function Login() {
});
return (
-
- Hello
-
-
-
-