dashboard + a bit of adding. dashboard doesn't show actual data

2026-06-27 17:33:36 -05:00
parent ea1819f96c
commit c9a7a4bdca
14 changed files with 707 additions and 9 deletions
@@ -0,0 +1,147 @@
+"use client";
+
+import { Plus } from "lucide-react";
+import { invoke } from "@tauri-apps/api/core";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { AnimatePresence, motion } from "motion/react";
+import { Field, FieldGroup, FieldLabel } from "./ui/field";
+import { Label } from "./ui/label";
+import { Input } from "./ui/input";
+import { Textarea } from "./ui/textarea";
+import { Checkbox } from "./ui/checkbox";
+import { useState } from "react";
+
+export default function PlusButton() {
+  const [differentAddr, setDifferentAddr] = useState(false);
+  const [name, setName] = useState("");
+  const [address, setAddress] = useState("");
+  const [description, setDescription] = useState<string>("");
+  const [sshAddr, setSSHAddr] = useState<string>("");
+
+  const onSubmit = async () => {
+    let tmp_description = undefined;
+    let tmp_ssh = undefined;
+
+    if (!name.trim()) return;
+    if (!address.trim()) return;
+    if (description.trim()) tmp_description = description.trim();
+    if (sshAddr.trim()) tmp_ssh = sshAddr.trim();
+
+    await invoke("new_app", {
+      name: name,
+      address: address,
+      description: description,
+      sshAddress: sshAddr,
+    });
+  };
+
+  return (
+    <Dialog>
+      <form onSubmit={() => onSubmit()}>
+        <DialogTrigger asChild>
+          <motion.button
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            transition={{ type: "spring", stiffness: 300, damping: 20 }}
+            className="absolute right-3 bottom-3 bg-emerald-700 p-2 rounded-full"
+          >
+            <Plus className="w-8 h-8 text-white" />
+          </motion.button>
+        </DialogTrigger>
+        <DialogContent className="sm:max-w-sm">
+          <DialogHeader>
+            <DialogTitle>Create Service</DialogTitle>
+            <DialogDescription>
+              Create a new service. Click save when you're finished.
+            </DialogDescription>
+          </DialogHeader>
+          <FieldGroup>
+            <Field>
+              <Label htmlFor="name">Service Name</Label>
+              <Input
+                id="name"
+                name="name"
+                value={name}
+                onChange={(e) => setName(e.target.value.trim())}
+                defaultValue="Kubernetes"
+              />
+            </Field>
+            <Field>
+              <Label htmlFor="address">IP Address</Label>
+              <Input
+                id="address"
+                name="address"
+                value={address}
+                onChange={(e) => setAddress(e.target.value.trim())}
+                defaultValue="192.168.1.10"
+              />
+            </Field>
+            <Field>
+              <Label htmlFor="description">
+                Description{" "}
+                <span className="text-sm text-black/25">(Optional)</span>
+              </Label>
+              <Textarea
+                id="description"
+                value={description}
+                onChange={(e) => setDescription(e.target.value.trim())}
+                name="description"
+              />
+            </Field>
+            <Field orientation="horizontal">
+              <Checkbox
+                checked={differentAddr}
+                onCheckedChange={(checked: boolean | "indeterminate") =>
+                  setDifferentAddr(checked === true)
+                }
+                id="toggle-ssh"
+                name="toggle-ssh"
+              />
+              <FieldLabel htmlFor="toggle-ssh">
+                Use Different URL for SSH
+              </FieldLabel>
+            </Field>
+            <AnimatePresence>
+              {differentAddr && (
+                <motion.div
+                  key={"ssh-addr-field"}
+                  initial={{ opacity: 0, y: -8 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -8 }}
+                  transition={{ duration: 0.3 }}
+                >
+                  <Field>
+                    <Label htmlFor="ssh-addr">SSH Address</Label>
+                    <Input
+                      id="ssh-addr"
+                      name="ssh-addr"
+                      value={sshAddr}
+                      onChange={(e) => setSSHAddr(e.target.value.trim())}
+                      defaultValue="192.168.1.10"
+                    />
+                  </Field>
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </FieldGroup>
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DialogClose>
+            <Button type="submit">Save changes</Button>
+          </DialogFooter>
+        </DialogContent>
+      </form>
+    </Dialog>
+  );
+}