External/CoreControl
1
0
Fork 0
mirror of https://github.com/crocofied/CoreControl.git synced 2025-12-29 16:14:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Edit network

Browse Source
This commit is contained in:
headlesdev
2025-05-18 16:59:16 +02:00
parent d4ad6e1656
commit 56571ba65a
4 changed files with 156 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
components/dialogues/EditNetwork.tsx Normal file
View File

@@ -0,0 +1,109 @@
"use client";
import { useState } from "react";
import ErrorToast from "@/components/Error";
import SuccessToast from "@/components/Success";
import useNetworks from "@/hooks/useNetworks";
import { Network } from "@/app/types";
interface EditNetworkProps {
onNetworkAdded?: () => void;
siteId: string;
network: Network;
}
export default function EditNetwork({ onNetworkAdded, siteId, network }: EditNetworkProps) {
const [editName, setEditName] = useState(network.name);
const [editIpv4Subnet, setEditIpv4Subnet] = useState(network.ipv4Subnet);
const [editIpv6Subnet, setEditIpv6Subnet] = useState(network.ipv6Subnet);
const [editGateway, setEditGateway] = useState(network.gateway);
const [error, setError] = useState("");
const [success, setSuccess] = useState("");
const { editNetwork } = useNetworks();
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="space-y-4">
<div className="form-control">
<label className="label">
<span className="label-text font-medium text-base">Network Name</span>
</label>
<input
type="text"
className="input input-bordered w-full focus:ring-2"
placeholder="e.g. VLAN 10"
value={editName}
onChange={(e) => setEditName(e.target.value)}
/>
</div>
<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>
</label>
<input
type="text"
className="input input-bordered w-full focus:ring-2"
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>
</label>
<input
type="text"
className="input input-bordered w-full focus:ring-2"
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>
</label>
<input
type="text"
className="input input-bordered w-full focus:ring-2"
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>
</div>
</dialog>
<ErrorToast message={error} show={error !== ''} onClose={() => setError('')} />
<SuccessToast message={success} show={success !== ''} onClose={() => setSuccess('')} />
</div>
)
}