mirror of
https://github.com/crocofied/CoreControl.git
synced 2025-12-17 15:36:50 +00:00
Updated Dialogues
This commit is contained in:
headlesdev
parent
e374ecebe5
commit
4f00b0b532
@ -4,6 +4,7 @@ import { useState } from "react";
|
||||
import ErrorToast from "@/components/Error";
|
||||
import SuccessToast from "@/components/Success";
|
||||
import useNetworks from "@/hooks/useNetworks";
|
||||
import { PlusCircle, Network as NetworkIcon, Globe, Wifi } from "lucide-react";
|
||||
|
||||
interface AddNetworkProps {
|
||||
onNetworkAdded?: () => void;
|
||||
@ -19,25 +20,44 @@ export default function AddNetwork({ onNetworkAdded, siteId }: AddNetworkProps)
|
||||
const [success, setSuccess] = useState("");
|
||||
const { addNetwork } = useNetworks();
|
||||
|
||||
const handleAddNetwork = () => {
|
||||
addNetwork({
|
||||
id: "0",
|
||||
siteId,
|
||||
name,
|
||||
ipv4Subnet,
|
||||
ipv6Subnet,
|
||||
gateway
|
||||
});
|
||||
|
||||
if (onNetworkAdded) {
|
||||
onNetworkAdded();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<dialog id="add_network" className="modal">
|
||||
<div className="modal-box w-2/3 max-w-2/3">
|
||||
<div className="flex flex-col gap-4">
|
||||
<header>
|
||||
<h3 className="text-2xl font-semibold tracking-tight">Add New Network</h3>
|
||||
<p className="text-sm text-gray-500 mt-1">Provide details for the new network</p>
|
||||
</header>
|
||||
<div className="modal-box w-11/12 max-w-3xl border-l-4 border-success">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div className="bg-success text-success-content rounded-full p-2 flex items-center justify-center">
|
||||
<PlusCircle className="h-6 w-6" />
|
||||
</div>
|
||||
<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="form-control">
|
||||
<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>
|
||||
<input
|
||||
type="text"
|
||||
className="input input-bordered w-full focus:ring-2"
|
||||
className="input input-bordered w-full"
|
||||
placeholder="e.g. VLAN 10"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
@ -46,62 +66,72 @@ export default function AddNetwork({ onNetworkAdded, siteId }: AddNetworkProps)
|
||||
|
||||
<div className="form-control">
|
||||
<label className="label">
|
||||
<span className="label-text font-medium text-base">
|
||||
IPv4 Subnet
|
||||
</span>
|
||||
<span className="ml-2 text-sm font-normal text-gray-400">(optional)</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<Globe className="h-4 w-4 opacity-70" />
|
||||
<span className="label-text font-medium">IPv4 Subnet</span>
|
||||
<span className="ml-1 text-xs opacity-60">(optional)</span>
|
||||
</div>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="input input-bordered w-full focus:ring-2"
|
||||
className="input input-bordered w-full"
|
||||
placeholder="Enter the IPv4 subnet"
|
||||
value={ipv4Subnet}
|
||||
onChange={(e) => setIpv4Subnet(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-control">
|
||||
<label className="label">
|
||||
<span className="label-text font-medium text-base">
|
||||
IPv6 Subnet
|
||||
</span>
|
||||
<span className="ml-2 text-sm font-normal text-gray-400">(optional)</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<Globe className="h-4 w-4 opacity-70" />
|
||||
<span className="label-text font-medium">IPv6 Subnet</span>
|
||||
<span className="ml-1 text-xs opacity-60">(optional)</span>
|
||||
</div>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="input input-bordered w-full focus:ring-2"
|
||||
className="input input-bordered w-full"
|
||||
placeholder="Enter the IPv6 subnet"
|
||||
value={ipv6Subnet}
|
||||
onChange={(e) => setIpv6Subnet(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-control">
|
||||
<label className="label">
|
||||
<span className="label-text font-medium text-base">
|
||||
Gateway
|
||||
</span>
|
||||
<span className="ml-2 text-sm font-normal text-gray-400">(optional)</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<Wifi className="h-4 w-4 opacity-70" />
|
||||
<span className="label-text font-medium">Gateway</span>
|
||||
<span className="ml-1 text-xs opacity-60">(optional)</span>
|
||||
</div>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="input input-bordered w-full focus:ring-2"
|
||||
className="input input-bordered w-full"
|
||||
placeholder="Enter the gateway"
|
||||
value={gateway}
|
||||
onChange={(e) => setGateway(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="modal-action flex justify-end">
|
||||
<form method="dialog" className="flex gap-3">
|
||||
<button className="btn btn-ghost">Cancel</button>
|
||||
<button className="btn btn-primary px-6" onClick={() => addNetwork({ id: "0", siteId, name, ipv4Subnet, ipv6Subnet, gateway })}>Add Network</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div className="modal-action">
|
||||
<form method="dialog" className="flex gap-3 w-full justify-end">
|
||||
<button className="btn btn-outline">Cancel</button>
|
||||
<button
|
||||
className="btn btn-success text-success-content"
|
||||
onClick={handleAddNetwork}
|
||||
>
|
||||
Add Network
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
<ErrorToast message={error} show={error !== ''} onClose={() => setError('')} />
|
||||
<SuccessToast message={success} show={success !== ''} onClose={() => setSuccess('')} />
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
@ -4,6 +4,7 @@ import { useState } from "react";
|
||||
import axios from "axios";
|
||||
import ErrorToast from "@/components/Error";
|
||||
import SuccessToast from "@/components/Success";
|
||||
import { Building2, MapPin, FileText } from "lucide-react";
|
||||
|
||||
interface AddSiteProps {
|
||||
onSiteAdded?: () => void;
|
||||
@ -44,55 +45,67 @@ export default function AddSite({ onSiteAdded }: AddSiteProps) {
|
||||
return (
|
||||
<div>
|
||||
<dialog id="add_site" className="modal">
|
||||
<div className="modal-box w-2/3 max-w-2/3">
|
||||
<div className="flex flex-col gap-4">
|
||||
<header>
|
||||
<h3 className="text-2xl font-semibold tracking-tight">Add New Site</h3>
|
||||
<p className="text-sm text-gray-500 mt-1">Provide details for the new site location</p>
|
||||
</header>
|
||||
<div className="modal-box w-11/12 max-w-3xl border-l-4 border-success">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div className="bg-success text-success-content rounded-full p-2 flex items-center justify-center">
|
||||
<Building2 className="h-6 w-6" />
|
||||
</div>
|
||||
<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">
|
||||
<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>
|
||||
<input
|
||||
type="text"
|
||||
className="input input-bordered w-full focus:ring-2"
|
||||
className="input input-bordered w-full"
|
||||
placeholder="e.g. Downtown Office"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-control">
|
||||
<label className="label">
|
||||
<span className="label-text font-medium text-base">
|
||||
Description
|
||||
<span className="ml-2 text-sm font-normal text-gray-400">(optional)</span>
|
||||
</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<FileText className="h-4 w-4 opacity-70" />
|
||||
<span className="label-text font-medium">Description</span>
|
||||
<span className="ml-1 text-xs opacity-60">(optional)</span>
|
||||
</div>
|
||||
</label>
|
||||
<textarea
|
||||
className="textarea textarea-bordered w-full focus:ring-2"
|
||||
placeholder="Enter a brief description..."
|
||||
className="textarea textarea-bordered w-full"
|
||||
placeholder="Enter a brief description of this site..."
|
||||
rows={4}
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="modal-action flex justify-end">
|
||||
<form method="dialog" className="flex gap-3">
|
||||
<button className="btn btn-ghost">Cancel</button>
|
||||
<button className="btn btn-primary px-6" onClick={addSite}>Add Site</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div className="modal-action">
|
||||
<form method="dialog" className="flex gap-3 w-full justify-end">
|
||||
<button className="btn btn-outline">Cancel</button>
|
||||
<button
|
||||
className="btn btn-success text-success-content"
|
||||
onClick={addSite}
|
||||
>
|
||||
Add Site
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
<ErrorToast message={error} show={error !== ''} onClose={() => setError('')} />
|
||||
<SuccessToast message={success} show={success !== ''} onClose={() => setSuccess('')} />
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
"use client";
|
||||
import useNetworks from "@/hooks/useNetworks";
|
||||
import { Trash2, AlertTriangle } from "lucide-react";
|
||||
|
||||
interface DeleteNetworkProps {
|
||||
networkId: string;
|
||||
@ -8,16 +9,43 @@ interface DeleteNetworkProps {
|
||||
export default function DeleteNetwork({ networkId }: DeleteNetworkProps) {
|
||||
const { deleteNetwork } = useNetworks();
|
||||
|
||||
const handleDelete = () => {
|
||||
deleteNetwork(networkId);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<dialog id="delete_network" className="modal">
|
||||
<div className="modal-box w-2/3 max-w-2/3">
|
||||
<h3 className="text-lg font-bold">Delete Network</h3>
|
||||
<p className="py-4">Are you sure you want to delete this network?</p>
|
||||
<div className="modal-box w-11/12 max-w-md border-l-4 border-error">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<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">
|
||||
<form method="dialog">
|
||||
<button className="btn">Cancel</button>
|
||||
<button className="btn btn-primary" onClick={() => deleteNetwork(networkId)}>Delete</button>
|
||||
<form method="dialog" className="flex gap-2">
|
||||
<button className="btn btn-outline">Cancel</button>
|
||||
<button
|
||||
className="btn btn-error text-error-content"
|
||||
onClick={handleDelete}
|
||||
>
|
||||
Delete Network
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -5,6 +5,7 @@ import ErrorToast from "@/components/Error";
|
||||
import SuccessToast from "@/components/Success";
|
||||
import useNetworks from "@/hooks/useNetworks";
|
||||
import { Network } from "@/app/types";
|
||||
import { PencilLine, Network as NetworkIcon, Globe, Wifi } from "lucide-react";
|
||||
|
||||
interface EditNetworkProps {
|
||||
onNetworkAdded?: () => void;
|
||||
@ -21,25 +22,40 @@ export default function EditNetwork({ onNetworkAdded, siteId, network }: EditNet
|
||||
const [success, setSuccess] = useState("");
|
||||
const { editNetwork } = useNetworks();
|
||||
|
||||
const handleEdit = () => {
|
||||
editNetwork({
|
||||
id: network.id,
|
||||
siteId,
|
||||
name: editName,
|
||||
ipv4Subnet: editIpv4Subnet,
|
||||
ipv6Subnet: editIpv6Subnet,
|
||||
gateway: editGateway
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<dialog id="edit_network" className="modal">
|
||||
<div className="modal-box w-2/3 max-w-2/3">
|
||||
<div className="flex flex-col gap-4">
|
||||
<header>
|
||||
<h3 className="text-2xl font-semibold tracking-tight">Edit Network</h3>
|
||||
<p className="text-sm text-gray-500 mt-1">Provide details for the network</p>
|
||||
</header>
|
||||
<div className="modal-box w-11/12 max-w-3xl border-l-4 border-primary">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div className="bg-primary text-primary-content rounded-full p-2 flex items-center justify-center">
|
||||
<PencilLine className="h-6 w-6" />
|
||||
</div>
|
||||
<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="form-control">
|
||||
<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>
|
||||
<input
|
||||
type="text"
|
||||
className="input input-bordered w-full focus:ring-2"
|
||||
className="input input-bordered w-full"
|
||||
placeholder="e.g. VLAN 10"
|
||||
value={editName}
|
||||
onChange={(e) => setEditName(e.target.value)}
|
||||
@ -48,62 +64,72 @@ export default function EditNetwork({ onNetworkAdded, siteId, network }: EditNet
|
||||
|
||||
<div className="form-control">
|
||||
<label className="label">
|
||||
<span className="label-text font-medium text-base">
|
||||
IPv4 Subnet
|
||||
</span>
|
||||
<span className="ml-2 text-sm font-normal text-gray-400">(optional)</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<Globe className="h-4 w-4 opacity-70" />
|
||||
<span className="label-text font-medium">IPv4 Subnet</span>
|
||||
<span className="ml-1 text-xs opacity-60">(optional)</span>
|
||||
</div>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="input input-bordered w-full focus:ring-2"
|
||||
className="input input-bordered w-full"
|
||||
placeholder="Enter the IPv4 subnet"
|
||||
value={editIpv4Subnet}
|
||||
onChange={(e) => setEditIpv4Subnet(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-control">
|
||||
<label className="label">
|
||||
<span className="label-text font-medium text-base">
|
||||
IPv6 Subnet
|
||||
</span>
|
||||
<span className="ml-2 text-sm font-normal text-gray-400">(optional)</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<Globe className="h-4 w-4 opacity-70" />
|
||||
<span className="label-text font-medium">IPv6 Subnet</span>
|
||||
<span className="ml-1 text-xs opacity-60">(optional)</span>
|
||||
</div>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="input input-bordered w-full focus:ring-2"
|
||||
className="input input-bordered w-full"
|
||||
placeholder="Enter the IPv6 subnet"
|
||||
value={editIpv6Subnet}
|
||||
onChange={(e) => setEditIpv6Subnet(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-control">
|
||||
<label className="label">
|
||||
<span className="label-text font-medium text-base">
|
||||
Gateway
|
||||
</span>
|
||||
<span className="ml-2 text-sm font-normal text-gray-400">(optional)</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<Wifi className="h-4 w-4 opacity-70" />
|
||||
<span className="label-text font-medium">Gateway</span>
|
||||
<span className="ml-1 text-xs opacity-60">(optional)</span>
|
||||
</div>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="input input-bordered w-full focus:ring-2"
|
||||
className="input input-bordered w-full"
|
||||
placeholder="Enter the gateway"
|
||||
value={editGateway}
|
||||
onChange={(e) => setEditGateway(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="modal-action flex justify-end">
|
||||
<form method="dialog" className="flex gap-3">
|
||||
<button className="btn btn-ghost">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>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div className="modal-action">
|
||||
<form method="dialog" className="flex gap-3 w-full justify-end">
|
||||
<button className="btn btn-outline">Cancel</button>
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={handleEdit}
|
||||
>
|
||||
Save Changes
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
<ErrorToast message={error} show={error !== ''} onClose={() => setError('')} />
|
||||
<SuccessToast message={success} show={success !== ''} onClose={() => setSuccess('')} />
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user