WIP: update: adaptations to use the new backend #1
@ -34,7 +34,6 @@ function App() {
|
||||
<Route path="admin" element={<AdminPage />} />
|
||||
<Route path="/admin/jdmi" element={<BulkUsers />} />
|
||||
<Route path="/admin/tps" element={<CreateTp />} />
|
||||
<Route path="/admin/sites-create" element={<CreateSite />} />
|
||||
<Route path="/admin/ji-create" element={<CreateJi />} />
|
||||
<Route path="/admin/users" element={<Users />} />
|
||||
<Route path="/admin/sites" element={<Sites />} />
|
||||
|
||||
@ -146,17 +146,6 @@ const Navigation: React.FC<NavigationProps> = ({
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<Link
|
||||
to="/admin/sites-create"
|
||||
onClick={toggleDrawer}
|
||||
className="w-60"
|
||||
>
|
||||
Create Site
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<Link
|
||||
@ -176,7 +165,7 @@ const Navigation: React.FC<NavigationProps> = ({
|
||||
onClick={toggleDrawer}
|
||||
className="w-60"
|
||||
>
|
||||
List Sites
|
||||
Sites
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
@ -1,106 +0,0 @@
|
||||
import axios from "axios";
|
||||
import { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
function CreateSite() {
|
||||
const [site, setSite] = useState({
|
||||
name: "",
|
||||
desc: "",
|
||||
address: "",
|
||||
});
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleInputChange = (
|
||||
e: React.ChangeEvent<
|
||||
HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
|
||||
>,
|
||||
) => {
|
||||
const { name, value } = e.target;
|
||||
setSite({ ...site, [name]: value });
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Créer les query parameters
|
||||
const params = new URLSearchParams({
|
||||
name: site.name,
|
||||
description: site.description,
|
||||
address: site.address,
|
||||
});
|
||||
|
||||
axios.post(`/api/sites?${params.toString()}`).then((res) => {
|
||||
if (res.status === 200) {
|
||||
navigate(`/site/${res.data.id}`);
|
||||
}
|
||||
});
|
||||
};
|
||||
return (
|
||||
<div className="container mx-auto p-6">
|
||||
<div className="shadow-lg rounded-lg p-6">
|
||||
<h1 className="text-3xl font-bold text-blue-600 mb-6">
|
||||
Create Site
|
||||
</h1>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div>
|
||||
<label className="block text-gray-700 font-semibold mb-2">
|
||||
Name:
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
value={site.name}
|
||||
onChange={handleInputChange}
|
||||
className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="Enter site name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-gray-700 font-semibold mb-2">
|
||||
Description:
|
||||
</label>
|
||||
<textarea
|
||||
type="text"
|
||||
name="desc"
|
||||
value={site.desc}
|
||||
onChange={handleInputChange}
|
||||
className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="Enter site description"
|
||||
rows={4}
|
||||
required
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-gray-700 font-semibold mb-2">
|
||||
Address:
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="address"
|
||||
value={site.address}
|
||||
onChange={handleInputChange}
|
||||
className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="Enter site's address"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="text-right">
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
Create Site
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default CreateSite;
|
||||
@ -1,10 +1,15 @@
|
||||
import axios from "axios";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Site } from "../../type/SiteType";
|
||||
|
||||
function Sites() {
|
||||
const [sites, setSites] = useState([]);
|
||||
const [reload, setReload] = useState(0);
|
||||
const [showCreateForm, setShowCreateForm] = useState(false);
|
||||
const [site, setSite] = useState({
|
||||
name: "",
|
||||
desc: "",
|
||||
address: "",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
axios.get("/api/sites").then((res) => {
|
||||
@ -12,29 +17,113 @@ function Sites() {
|
||||
});
|
||||
}, [reload]);
|
||||
|
||||
const handleEditSite = (siteId: number) => {
|
||||
const handleEditSite = (siteId) => {
|
||||
alert(`Edit site with ID: ${siteId}`);
|
||||
};
|
||||
|
||||
/*const deleteSites = () => {
|
||||
axios.delete("/api/sites").then(() => {
|
||||
setReload(reload + 1);
|
||||
const handleInputChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setSite({ ...site, [name]: value });
|
||||
};
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const params = new URLSearchParams({
|
||||
name: site.name,
|
||||
description: site.desc,
|
||||
address: site.address,
|
||||
});
|
||||
};*/
|
||||
|
||||
axios.post(`/api/sites?${params.toString()}`).then((res) => {
|
||||
if (res.status === 200) {
|
||||
setSite({ name: "", desc: "", address: "" });
|
||||
setShowCreateForm(false);
|
||||
setReload(reload + 1);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container mx-auto p-6">
|
||||
<div className="bg-white shadow-lg rounded-lg p-6">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h1 className="text-3xl font-bold text-blue-600 mb-6">
|
||||
<h1 className="text-3xl font-bold text-blue-600">
|
||||
Manage Sites
|
||||
</h1>
|
||||
{/*<button className="btn btn-error" onClick={deleteJDMIUsers}>
|
||||
Delete JDMI sites
|
||||
</button>*/}
|
||||
<button
|
||||
onClick={() => setShowCreateForm(!showCreateForm)}
|
||||
className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
{showCreateForm ? "Cancel" : "Create New Site"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Users Table */}
|
||||
{/* Create Site Form */}
|
||||
{showCreateForm && (
|
||||
<div className="mb-8 p-6 bg-gray-50 rounded-lg border border-gray-200">
|
||||
<h2 className="text-2xl font-bold text-gray-800 mb-4">
|
||||
Create New Site
|
||||
</h2>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-gray-700 font-semibold mb-2">
|
||||
Name:
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
value={site.name}
|
||||
onChange={handleInputChange}
|
||||
className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="Enter site name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-gray-700 font-semibold mb-2">
|
||||
Description:
|
||||
</label>
|
||||
<textarea
|
||||
name="desc"
|
||||
value={site.desc}
|
||||
onChange={handleInputChange}
|
||||
className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="Enter site description"
|
||||
rows={4}
|
||||
required
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-gray-700 font-semibold mb-2">
|
||||
Address:
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="address"
|
||||
value={site.address}
|
||||
onChange={handleInputChange}
|
||||
className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="Enter site's address"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="text-right">
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-green-600 text-white px-6 py-2 rounded-lg hover:bg-green-500 focus:outline-none focus:ring-2 focus:ring-green-500"
|
||||
>
|
||||
Create Site
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Sites Table */}
|
||||
<div className="overflow-x-auto">
|
||||
<table className="table w-full">
|
||||
<thead>
|
||||
@ -43,12 +132,11 @@ function Sites() {
|
||||
<th className="p-4">Name</th>
|
||||
<th className="p-4">Address</th>
|
||||
<th className="p-4">Roles</th>
|
||||
<th className="p-4">Instances</th>
|
||||
<th className="p-4">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{sites.map((site: Site, index: number) => (
|
||||
{sites.map((site, index) => (
|
||||
<tr key={site.id} className="hover:bg-gray-100">
|
||||
<td className="p-4">{index + 1}</td>
|
||||
<td className="p-4">{site.name}</td>
|
||||
@ -56,7 +144,7 @@ function Sites() {
|
||||
<td className="p-4">{site.listJi}</td>
|
||||
<td className="p-4">
|
||||
<button
|
||||
className="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-400 mr-2"
|
||||
className="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-400"
|
||||
onClick={() => handleEditSite(site.id)}
|
||||
>
|
||||
Edit
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user