External/CoreControl
1
0
Fork 0
mirror of https://github.com/crocofied/CoreControl.git synced 2025-12-17 15:36:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated Dialogues

Browse Source
This commit is contained in:
headlesdev 2025-05-18 20:15:23 +02:00
parent e374ecebe5
commit 4f00b0b532
4 changed files with 186 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
components/dialogues/AddNetwork.tsx
View File

@ -4,6 +4,7 @@ import { useState } from "react";
import ErrorToast from "@/components/Error"; import ErrorToast from "@/components/Error";
import SuccessToast from "@/components/Success"; import SuccessToast from "@/components/Success";
import useNetworks from "@/hooks/useNetworks"; import useNetworks from "@/hooks/useNetworks";
import { PlusCircle, Network as NetworkIcon, Globe, Wifi } from "lucide-react";
interface AddNetworkProps { interface AddNetworkProps {
onNetworkAdded?: () => void; onNetworkAdded?: () => void;
@ -19,25 +20,44 @@ export default function AddNetwork({ onNetworkAdded, siteId }: AddNetworkProps)
const [success, setSuccess] = useState(""); const [success, setSuccess] = useState("");
const { addNetwork } = useNetworks(); const { addNetwork } = useNetworks();
const handleAddNetwork = () => {
addNetwork({
id: "0",
siteId,
name,
ipv4Subnet,
ipv6Subnet,
gateway
});
if (onNetworkAdded) {
onNetworkAdded();
}
};
return ( return (
<div> <div>
<dialog id="add_network" className="modal"> <dialog id="add_network" className="modal">
<div className="modal-box w-2/3 max-w-2/3"> <div className="modal-box w-11/12 max-w-3xl border-l-4 border-success">
<div className="flex flex-col gap-4"> <div className="flex items-center gap-3 mb-3">
<header> <div className="bg-success text-success-content rounded-full p-2 flex items-center justify-center">
<h3 className="text-2xl font-semibold tracking-tight">Add New Network</h3> <PlusCircle className="h-6 w-6" />
<p className="text-sm text-gray-500 mt-1">Provide details for the new network</p> </div>
</header> <h3 className="font-bold text-xl">Add New Network</h3>
</div>
<div className="bg-base-200 p-4 rounded-lg mb-4">
<div className="space-y-4"> <div className="space-y-4">
<div className="form-control"> <div className="form-control">
<label className="label"> <label className="label">
<span className="label-text font-medium text-base">Network Name</span> <div className="flex items-center gap-2">
<NetworkIcon className="h-4 w-4 opacity-70" />
<span className="label-text font-medium">Network Name</span>
</div>
</label> </label>
<input <input
type="text" type="text"
className="input input-bordered w-full focus:ring-2" className="input input-bordered w-full"
placeholder="e.g. VLAN 10" placeholder="e.g. VLAN 10"
value={name} value={name}
onChange={(e) => setName(e.target.value)} onChange={(e) => setName(e.target.value)}
@ -46,62 +66,72 @@ export default function AddNetwork({ onNetworkAdded, siteId }: AddNetworkProps)
<div className="form-control"> <div className="form-control">
<label className="label"> <label className="label">
<span className="label-text font-medium text-base"> <div className="flex items-center gap-2">
IPv4 Subnet <Globe className="h-4 w-4 opacity-70" />
</span> <span className="label-text font-medium">IPv4 Subnet</span>
<span className="ml-2 text-sm font-normal text-gray-400">(optional)</span> <span className="ml-1 text-xs opacity-60">(optional)</span>
</div>
</label> </label>
<input <input
type="text" type="text"
className="input input-bordered w-full focus:ring-2" className="input input-bordered w-full"
placeholder="Enter the IPv4 subnet" placeholder="Enter the IPv4 subnet"
value={ipv4Subnet} value={ipv4Subnet}
onChange={(e) => setIpv4Subnet(e.target.value)} onChange={(e) => setIpv4Subnet(e.target.value)}
/> />
</div> </div>
<div className="form-control"> <div className="form-control">
<label className="label"> <label className="label">
<span className="label-text font-medium text-base"> <div className="flex items-center gap-2">
IPv6 Subnet <Globe className="h-4 w-4 opacity-70" />
</span> <span className="label-text font-medium">IPv6 Subnet</span>
<span className="ml-2 text-sm font-normal text-gray-400">(optional)</span> <span className="ml-1 text-xs opacity-60">(optional)</span>
</div>
</label> </label>
<input <input
type="text" type="text"
className="input input-bordered w-full focus:ring-2" className="input input-bordered w-full"
placeholder="Enter the IPv6 subnet" placeholder="Enter the IPv6 subnet"
value={ipv6Subnet} value={ipv6Subnet}
onChange={(e) => setIpv6Subnet(e.target.value)} onChange={(e) => setIpv6Subnet(e.target.value)}
/> />
</div> </div>
<div className="form-control"> <div className="form-control">
<label className="label"> <label className="label">
<span className="label-text font-medium text-base"> <div className="flex items-center gap-2">
Gateway <Wifi className="h-4 w-4 opacity-70" />
</span> <span className="label-text font-medium">Gateway</span>
<span className="ml-2 text-sm font-normal text-gray-400">(optional)</span> <span className="ml-1 text-xs opacity-60">(optional)</span>
</div>
</label> </label>
<input <input
type="text" type="text"
className="input input-bordered w-full focus:ring-2" className="input input-bordered w-full"
placeholder="Enter the gateway" placeholder="Enter the gateway"
value={gateway} value={gateway}
onChange={(e) => setGateway(e.target.value)} onChange={(e) => setGateway(e.target.value)}
/> />
</div> </div>
</div> </div>
</div>
<div className="modal-action flex justify-end"> <div className="modal-action">
<form method="dialog" className="flex gap-3"> <form method="dialog" className="flex gap-3 w-full justify-end">
<button className="btn btn-ghost">Cancel</button> <button className="btn btn-outline">Cancel</button>
<button className="btn btn-primary px-6" onClick={() => addNetwork({ id: "0", siteId, name, ipv4Subnet, ipv6Subnet, gateway })}>Add Network</button> <button
</form> className="btn btn-success text-success-content"
</div> onClick={handleAddNetwork}
>
Add Network
</button>
</form>
</div> </div>
</div> </div>
</dialog> </dialog>
<ErrorToast message={error} show={error !== ''} onClose={() => setError('')} /> <ErrorToast message={error} show={error !== ''} onClose={() => setError('')} />
<SuccessToast message={success} show={success !== ''} onClose={() => setSuccess('')} /> <SuccessToast message={success} show={success !== ''} onClose={() => setSuccess('')} />
</div> </div>
) );
} }

57
components/dialogues/AddSite.tsx
View File

@ -4,6 +4,7 @@ import { useState } from "react";
import axios from "axios"; import axios from "axios";
import ErrorToast from "@/components/Error"; import ErrorToast from "@/components/Error";
import SuccessToast from "@/components/Success"; import SuccessToast from "@/components/Success";
import { Building2, MapPin, FileText } from "lucide-react";
interface AddSiteProps { interface AddSiteProps {
onSiteAdded?: () => void; onSiteAdded?: () => void;
@ -44,55 +45,67 @@ export default function AddSite({ onSiteAdded }: AddSiteProps) {
return ( return (
<div> <div>
<dialog id="add_site" className="modal"> <dialog id="add_site" className="modal">
<div className="modal-box w-2/3 max-w-2/3"> <div className="modal-box w-11/12 max-w-3xl border-l-4 border-success">
<div className="flex flex-col gap-4"> <div className="flex items-center gap-3 mb-3">
<header> <div className="bg-success text-success-content rounded-full p-2 flex items-center justify-center">
<h3 className="text-2xl font-semibold tracking-tight">Add New Site</h3> <Building2 className="h-6 w-6" />
<p className="text-sm text-gray-500 mt-1">Provide details for the new site location</p> </div>
</header> <h3 className="font-bold text-xl">Add New Site</h3>
</div>
<div className="space-y-6"> <div className="bg-base-200 p-4 rounded-lg mb-4">
<div className="space-y-4">
<div className="form-control"> <div className="form-control">
<label className="label"> <label className="label">
<span className="label-text font-medium text-base">Site Name</span> <div className="flex items-center gap-2">
<MapPin className="h-4 w-4 opacity-70" />
<span className="label-text font-medium">Site Name</span>
</div>
</label> </label>
<input <input
type="text" type="text"
className="input input-bordered w-full focus:ring-2" className="input input-bordered w-full"
placeholder="e.g. Downtown Office" placeholder="e.g. Downtown Office"
value={name} value={name}
onChange={(e) => setName(e.target.value)} onChange={(e) => setName(e.target.value)}
required
/> />
</div> </div>
<div className="form-control"> <div className="form-control">
<label className="label"> <label className="label">
<span className="label-text font-medium text-base"> <div className="flex items-center gap-2">
Description <FileText className="h-4 w-4 opacity-70" />
<span className="ml-2 text-sm font-normal text-gray-400">(optional)</span> <span className="label-text font-medium">Description</span>
</span> <span className="ml-1 text-xs opacity-60">(optional)</span>
</div>
</label> </label>
<textarea <textarea
className="textarea textarea-bordered w-full focus:ring-2" className="textarea textarea-bordered w-full"
placeholder="Enter a brief description..." placeholder="Enter a brief description of this site..."
rows={4} rows={4}
value={description} value={description}
onChange={(e) => setDescription(e.target.value)} onChange={(e) => setDescription(e.target.value)}
></textarea> ></textarea>
</div> </div>
</div> </div>
</div>
<div className="modal-action flex justify-end"> <div className="modal-action">
<form method="dialog" className="flex gap-3"> <form method="dialog" className="flex gap-3 w-full justify-end">
<button className="btn btn-ghost">Cancel</button> <button className="btn btn-outline">Cancel</button>
<button className="btn btn-primary px-6" onClick={addSite}>Add Site</button> <button
</form> className="btn btn-success text-success-content"
</div> onClick={addSite}
>
Add Site
</button>
</form>
</div> </div>
</div> </div>
</dialog> </dialog>
<ErrorToast message={error} show={error !== ''} onClose={() => setError('')} /> <ErrorToast message={error} show={error !== ''} onClose={() => setError('')} />
<SuccessToast message={success} show={success !== ''} onClose={() => setSuccess('')} /> <SuccessToast message={success} show={success !== ''} onClose={() => setSuccess('')} />
</div> </div>
) );
} }

40
components/dialogues/DeleteNetwork.tsx
View File

@ -1,5 +1,6 @@
"use client"; "use client";
import useNetworks from "@/hooks/useNetworks"; import useNetworks from "@/hooks/useNetworks";
import { Trash2, AlertTriangle } from "lucide-react";
interface DeleteNetworkProps { interface DeleteNetworkProps {
networkId: string; networkId: string;
@ -7,17 +8,44 @@ interface DeleteNetworkProps {
export default function DeleteNetwork({ networkId }: DeleteNetworkProps) { export default function DeleteNetwork({ networkId }: DeleteNetworkProps) {
const { deleteNetwork } = useNetworks(); const { deleteNetwork } = useNetworks();
const handleDelete = () => {
deleteNetwork(networkId);
};
return ( return (
<div> <div>
<dialog id="delete_network" className="modal"> <dialog id="delete_network" className="modal">
<div className="modal-box w-2/3 max-w-2/3"> <div className="modal-box w-11/12 max-w-md border-l-4 border-error">
<h3 className="text-lg font-bold">Delete Network</h3> <div className="flex items-center gap-3 mb-3">
<p className="py-4">Are you sure you want to delete this network?</p> <div className="bg-error text-error-content rounded-full p-2 flex items-center justify-center">
<Trash2 className="h-6 w-6" />
</div>
<h3 className="font-bold text-xl">Delete Network</h3>
</div>
<div className="bg-base-200 p-4 rounded-lg mb-4">
<p className="text-sm">
<span className="font-medium">Are you sure you want to delete this network?</span>
</p>
<p className="text-sm mt-2">
This will also delete all servers & applications associated with it.
</p>
<div className="mt-2 flex items-center gap-2 text-error">
<AlertTriangle className="h-5 w-5" />
<span className="font-bold">This action cannot be undone.</span>
</div>
</div>
<div className="modal-action"> <div className="modal-action">
<form method="dialog"> <form method="dialog" className="flex gap-2">
<button className="btn">Cancel</button> <button className="btn btn-outline">Cancel</button>
<button className="btn btn-primary" onClick={() => deleteNetwork(networkId)}>Delete</button> <button
className="btn btn-error text-error-content"
onClick={handleDelete}
>
Delete Network
</button>
</form> </form>
</div> </div>
</div> </div>

88
components/dialogues/EditNetwork.tsx
View File

@ -5,6 +5,7 @@ import ErrorToast from "@/components/Error";
import SuccessToast from "@/components/Success"; import SuccessToast from "@/components/Success";
import useNetworks from "@/hooks/useNetworks"; import useNetworks from "@/hooks/useNetworks";
import { Network } from "@/app/types"; import { Network } from "@/app/types";
import { PencilLine, Network as NetworkIcon, Globe, Wifi } from "lucide-react";
interface EditNetworkProps { interface EditNetworkProps {
onNetworkAdded?: () => void; onNetworkAdded?: () => void;
@ -21,25 +22,40 @@ export default function EditNetwork({ onNetworkAdded, siteId, network }: EditNet
const [success, setSuccess] = useState(""); const [success, setSuccess] = useState("");
const { editNetwork } = useNetworks(); const { editNetwork } = useNetworks();
const handleEdit = () => {
editNetwork({
id: network.id,
siteId,
name: editName,
ipv4Subnet: editIpv4Subnet,
ipv6Subnet: editIpv6Subnet,
gateway: editGateway
});
};
return ( return (
<div> <div>
<dialog id="edit_network" className="modal"> <dialog id="edit_network" className="modal">
<div className="modal-box w-2/3 max-w-2/3"> <div className="modal-box w-11/12 max-w-3xl border-l-4 border-primary">
<div className="flex flex-col gap-4"> <div className="flex items-center gap-3 mb-3">
<header> <div className="bg-primary text-primary-content rounded-full p-2 flex items-center justify-center">
<h3 className="text-2xl font-semibold tracking-tight">Edit Network</h3> <PencilLine className="h-6 w-6" />
<p className="text-sm text-gray-500 mt-1">Provide details for the network</p> </div>
</header> <h3 className="font-bold text-xl">Edit Network</h3>
</div>
<div className="bg-base-200 p-4 rounded-lg mb-4">
<div className="space-y-4"> <div className="space-y-4">
<div className="form-control"> <div className="form-control">
<label className="label"> <label className="label">
<span className="label-text font-medium text-base">Network Name</span> <div className="flex items-center gap-2">
<NetworkIcon className="h-4 w-4 opacity-70" />
<span className="label-text font-medium">Network Name</span>
</div>
</label> </label>
<input <input
type="text" type="text"
className="input input-bordered w-full focus:ring-2" className="input input-bordered w-full"
placeholder="e.g. VLAN 10" placeholder="e.g. VLAN 10"
value={editName} value={editName}
onChange={(e) => setEditName(e.target.value)} onChange={(e) => setEditName(e.target.value)}
@ -48,62 +64,72 @@ export default function EditNetwork({ onNetworkAdded, siteId, network }: EditNet
<div className="form-control"> <div className="form-control">
<label className="label"> <label className="label">
<span className="label-text font-medium text-base"> <div className="flex items-center gap-2">
IPv4 Subnet <Globe className="h-4 w-4 opacity-70" />
</span> <span className="label-text font-medium">IPv4 Subnet</span>
<span className="ml-2 text-sm font-normal text-gray-400">(optional)</span> <span className="ml-1 text-xs opacity-60">(optional)</span>
</div>
</label> </label>
<input <input
type="text" type="text"
className="input input-bordered w-full focus:ring-2" className="input input-bordered w-full"
placeholder="Enter the IPv4 subnet" placeholder="Enter the IPv4 subnet"
value={editIpv4Subnet} value={editIpv4Subnet}
onChange={(e) => setEditIpv4Subnet(e.target.value)} onChange={(e) => setEditIpv4Subnet(e.target.value)}
/> />
</div> </div>
<div className="form-control"> <div className="form-control">
<label className="label"> <label className="label">
<span className="label-text font-medium text-base"> <div className="flex items-center gap-2">
IPv6 Subnet <Globe className="h-4 w-4 opacity-70" />
</span> <span className="label-text font-medium">IPv6 Subnet</span>
<span className="ml-2 text-sm font-normal text-gray-400">(optional)</span> <span className="ml-1 text-xs opacity-60">(optional)</span>
</div>
</label> </label>
<input <input
type="text" type="text"
className="input input-bordered w-full focus:ring-2" className="input input-bordered w-full"
placeholder="Enter the IPv6 subnet" placeholder="Enter the IPv6 subnet"
value={editIpv6Subnet} value={editIpv6Subnet}
onChange={(e) => setEditIpv6Subnet(e.target.value)} onChange={(e) => setEditIpv6Subnet(e.target.value)}
/> />
</div> </div>
<div className="form-control"> <div className="form-control">
<label className="label"> <label className="label">
<span className="label-text font-medium text-base"> <div className="flex items-center gap-2">
Gateway <Wifi className="h-4 w-4 opacity-70" />
</span> <span className="label-text font-medium">Gateway</span>
<span className="ml-2 text-sm font-normal text-gray-400">(optional)</span> <span className="ml-1 text-xs opacity-60">(optional)</span>
</div>
</label> </label>
<input <input
type="text" type="text"
className="input input-bordered w-full focus:ring-2" className="input input-bordered w-full"
placeholder="Enter the gateway" placeholder="Enter the gateway"
value={ editGateway} value={editGateway}
onChange={(e) => setEditGateway(e.target.value)} onChange={(e) => setEditGateway(e.target.value)}
/> />
</div> </div>
</div> </div>
</div>
<div className="modal-action flex justify-end"> <div className="modal-action">
<form method="dialog" className="flex gap-3"> <form method="dialog" className="flex gap-3 w-full justify-end">
<button className="btn btn-ghost">Cancel</button> <button className="btn btn-outline">Cancel</button>
<button className="btn btn-primary px-6" onClick={() => editNetwork({ id: network.id, siteId, name: editName, ipv4Subnet: editIpv4Subnet, ipv6Subnet: editIpv6Subnet, gateway: editGateway })}>Edit Network</button> <button
</form> className="btn btn-primary"
</div> onClick={handleEdit}
>
Save Changes
</button>
</form>
</div> </div>
</div> </div>
</dialog> </dialog>
<ErrorToast message={error} show={error !== ''} onClose={() => setError('')} /> <ErrorToast message={error} show={error !== ''} onClose={() => setError('')} />
<SuccessToast message={success} show={success !== ''} onClose={() => setSuccess('')} /> <SuccessToast message={success} show={success !== ''} onClose={() => setSuccess('')} />
</div> </div>
) );
} }