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

Network & Edit mode

Browse Source
This commit is contained in:
headlesdev 2025-05-18 15:41:20 +02:00
parent eba205497d
commit fd4b8feaaf
6 changed files with 191 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/api/sites/get/route.ts
View File

@ -14,6 +14,9 @@ export async function GET(request: NextRequest) {
where: {
id: Number(siteId),
},
include: {
networks: true, // Include all network relationships
},
});
return NextResponse.json({ site });

31
app/api/sites/networks/add/route.ts Normal file
View File

@ -0,0 +1,31 @@
import { NextRequest, NextResponse } from "next/server";
import prisma from "@/app/prisma";
interface Body {
siteId: number;
name: string;
ipv4Subnet?: string;
ipv6Subnet?: string;
gateway?: string;
}
export async function POST(request: NextRequest) {
const body: Body = await request.json();
try {
const network = await prisma.network.create({
data: {
siteId: body.siteId,
name: body.name,
ipv4Subnet: body.ipv4Subnet,
ipv6Subnet: body.ipv6Subnet,
gateway: body.gateway,
},
});
return NextResponse.json({ network }, { status: 201 });
} catch (error) {
console.error("Error creating network:", error);
return NextResponse.json({ error: "Failed to create network" }, { status: 500 });
}
}

12
app/dashboard/sites/[siteId]/SitePage.tsx
View File

@ -3,6 +3,8 @@ import Sidebar from "@/components/Sidebar"
import useSite from "@/hooks/useSite"
import { useEffect, useState } from "react"
import { EditModeToggle } from "@/components/EditModeToggle"
import AddNetwork from "@/components/dialogues/AddNetwork"
import { Plus } from "lucide-react"
interface SitesPageProps {
username: string
@ -37,12 +39,20 @@ export default function SitesPage({ username, name, siteId }: SitesPageProps) {
</div>
<div className="flex gap-4 items-center bg-base-200 p-4 rounded-2xl">
<div className="flex-1">
<div className="flex justify-between items-center">
<h1 className="text-2xl font-bold">Networks</h1>
{isEditMode ? (
<button className="btn btn-primary btn-sm px-2" onClick={() => document.getElementById('add_network')?.showModal()}>
<Plus className="w-5 h-5" />
</button>
) : null}
</div>
<p className="text-sm opacity-70">
{site.networks?.length > 0 ? site.networks.join(", ") : "No networks"}
{site.networks?.length > 0 ? site.networks.map((network) => network.name).join(", ") : "No networks"}
</p>
</div>
</div>
<AddNetwork siteId={site.id} />
</div>
</main>
</Sidebar>

107
components/dialogues/AddNetwork.tsx Normal file
View File

@ -0,0 +1,107 @@
"use client";
import { useState } from "react";
import ErrorToast from "@/components/Error";
import SuccessToast from "@/components/Success";
import useNetworks from "@/hooks/useNetworks";
interface AddNetworkProps {
onNetworkAdded?: () => void;
siteId: number;
}
export default function AddNetwork({ onNetworkAdded, siteId }: AddNetworkProps) {
const [name, setName] = useState("");
const [ipv4Subnet, setIpv4Subnet] = useState("");
const [ipv6Subnet, setIpv6Subnet] = useState("");
const [gateway, setGateway] = useState("");
const [error, setError] = useState("");
const [success, setSuccess] = useState("");
const { addNetwork } = useNetworks();
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="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={name}
onChange={(e) => setName(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={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>
</label>
<input
type="text"
className="input input-bordered w-full focus:ring-2"
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>
</label>
<input
type="text"
className="input input-bordered w-full focus:ring-2"
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({ siteId, name, ipv4Subnet, ipv6Subnet, gateway })}>Add Network</button>
</form>
</div>
</div>
</div>
</dialog>
<ErrorToast message={error} show={error !== ''} onClose={() => setError('')} />
<SuccessToast message={success} show={success !== ''} onClose={() => setSuccess('')} />
</div>
)
}

30
hooks/useNetworks.ts Normal file
View File

@ -0,0 +1,30 @@
import { useState, useEffect, useCallback } from "react";
import axios from "axios";
interface AddNetwork {
siteId: number;
name: string;
ipv4Subnet: string;
ipv6Subnet: string;
gateway: string;
}
const useNetworks = () => {
const addNetwork = (network: AddNetwork) => {
axios.post('/api/sites/networks/add', network);
};
const deleteNetwork = (networkId: number) => {
axios.delete('/api/sites/networks/delete', {
params: { networkId }
});
};
return {
addNetwork,
deleteNetwork,
};
};
export default useNetworks;

10
hooks/useSite.ts
View File

@ -1,11 +1,19 @@
import { useState, useEffect, useCallback } from "react";
import axios from "axios";
interface Network {
id?: number;
name: string;
ipv4Subnet?: string;
ipv6Subnet?: string;
gateway?: string;
}
interface Site {
id: number;
name: string;
description: string;
networks: string[];
networks: Network[];
}
const useSite = () => {