WIP: update: adaptations to use the new backend #1
@ -10,7 +10,7 @@ import LoginPage from "./pages/Login";
|
|||||||
import PageTest from "./pages/PageTest";
|
import PageTest from "./pages/PageTest";
|
||||||
import CreateTp from "./pages/admin/CreateTp";
|
import CreateTp from "./pages/admin/CreateTp";
|
||||||
import CreateSite from "./pages/admin/CreateSite";
|
import CreateSite from "./pages/admin/CreateSite";
|
||||||
import CreateJi from "./pages/admin/CreateJi";
|
import Jis from "./pages/admin/Jis";
|
||||||
import BulkUsers from "./pages/admin/BulkCreateUser";
|
import BulkUsers from "./pages/admin/BulkCreateUser";
|
||||||
import Users from "./pages/admin/Users";
|
import Users from "./pages/admin/Users";
|
||||||
import Sites from "./pages/admin/Sites";
|
import Sites from "./pages/admin/Sites";
|
||||||
@ -34,7 +34,7 @@ function App() {
|
|||||||
<Route path="admin" element={<AdminPage />} />
|
<Route path="admin" element={<AdminPage />} />
|
||||||
<Route path="/admin/jdmi" element={<BulkUsers />} />
|
<Route path="/admin/jdmi" element={<BulkUsers />} />
|
||||||
<Route path="/admin/tps" element={<CreateTp />} />
|
<Route path="/admin/tps" element={<CreateTp />} />
|
||||||
<Route path="/admin/ji-create" element={<CreateJi />} />
|
<Route path="/admin/ji" element={<Jis />} />
|
||||||
<Route path="/admin/users" element={<Users />} />
|
<Route path="/admin/users" element={<Users />} />
|
||||||
<Route path="/admin/sites" element={<Sites />} />
|
<Route path="/admin/sites" element={<Sites />} />
|
||||||
<Route path="/settings" element={<CreateTp />} />
|
<Route path="/settings" element={<CreateTp />} />
|
||||||
|
|||||||
@ -1,122 +0,0 @@
|
|||||||
import axios from "axios";
|
|
||||||
import { useState } from "react";
|
|
||||||
import { useNavigate } from "react-router-dom";
|
|
||||||
|
|
||||||
function CreateJi() {
|
|
||||||
const [ji, setJi] = useState({
|
|
||||||
name: "",
|
|
||||||
respo: "",
|
|
||||||
site_id: "",
|
|
||||||
date: "",
|
|
||||||
});
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
const handleInputChange = (
|
|
||||||
e: React.ChangeEvent<
|
|
||||||
HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
|
|
||||||
>,
|
|
||||||
) => {
|
|
||||||
const { name, value } = e.target;
|
|
||||||
setJi({ ...ji, [name]: value });
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
// Créer les query parameters
|
|
||||||
const params = new URLSearchParams({
|
|
||||||
name: ji.name,
|
|
||||||
respo: ji.respo,
|
|
||||||
site_id: ji.site_id,
|
|
||||||
date: ji.date,
|
|
||||||
});
|
|
||||||
|
|
||||||
axios.post(`/api/ji/create?${params.toString()}`).then((res) => {
|
|
||||||
if (res.status === 200) {
|
|
||||||
navigate(`/immersion/${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 Ji
|
|
||||||
</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={ji.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 ji name"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-gray-700 font-semibold mb-2">
|
|
||||||
Description:
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
type="text"
|
|
||||||
name="desc"
|
|
||||||
value={ji.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 ji description"
|
|
||||||
rows={4}
|
|
||||||
required
|
|
||||||
></textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-gray-700 font-semibold mb-2">
|
|
||||||
Site ID:
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
name="site_id"
|
|
||||||
value={ji.site_id}
|
|
||||||
onChange={handleInputChange}
|
|
||||||
className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
||||||
placeholder="Enter ji's address"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-gray-700 font-semibold mb-2">
|
|
||||||
Date:
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="date"
|
|
||||||
name="date"
|
|
||||||
value={ji.date}
|
|
||||||
onChange={handleInputChange}
|
|
||||||
className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
||||||
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 Ji
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default CreateJi;
|
|
||||||
200
src/pages/admin/Jis.tsx
Normal file
200
src/pages/admin/Jis.tsx
Normal file
@ -0,0 +1,200 @@
|
|||||||
|
import axios from "axios";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { Ji } from "../../type/JiType";
|
||||||
|
|
||||||
|
function Jis() {
|
||||||
|
const [jis, setJis] = useState([]);
|
||||||
|
const [reload, setReload] = useState(0);
|
||||||
|
const [showCreateForm, setShowCreateForm] = useState(false);
|
||||||
|
const [newJi, setNewJi] = useState({
|
||||||
|
name: "",
|
||||||
|
desc: "",
|
||||||
|
respo: "",
|
||||||
|
site_id: "",
|
||||||
|
date: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
axios.get("/api/ji/listall").then((res) => {
|
||||||
|
setJis(res.data);
|
||||||
|
});
|
||||||
|
}, [reload]);
|
||||||
|
|
||||||
|
const handleEditJi = (jiId: number) => {
|
||||||
|
alert(`Edit ji with ID: ${jiId}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleInputChange = (
|
||||||
|
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
|
||||||
|
) => {
|
||||||
|
const { name, value } = e.target;
|
||||||
|
setNewJi({ ...newJi, [name]: value });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const params = new URLSearchParams({
|
||||||
|
name: newJi.name,
|
||||||
|
respo: newJi.respo,
|
||||||
|
site_id: newJi.site_id,
|
||||||
|
date: newJi.date,
|
||||||
|
});
|
||||||
|
|
||||||
|
axios.post(`/api/ji/create?${params.toString()}`).then((res) => {
|
||||||
|
if (res.status === 200) {
|
||||||
|
setNewJi({ name: "", desc: "", respo: "", site_id: "", date: "" });
|
||||||
|
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">
|
||||||
|
Manage JIs
|
||||||
|
</h1>
|
||||||
|
<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 JI"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Create JI 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 JI
|
||||||
|
</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={newJi.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 JI name"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-gray-700 font-semibold mb-2">
|
||||||
|
Description:
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
name="desc"
|
||||||
|
value={newJi.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 JI description"
|
||||||
|
rows={4}
|
||||||
|
required
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-gray-700 font-semibold mb-2">
|
||||||
|
Responsable:
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="respo"
|
||||||
|
value={newJi.respo}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
placeholder="Enter responsable name"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-gray-700 font-semibold mb-2">
|
||||||
|
Site ID:
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="site_id"
|
||||||
|
value={newJi.site_id}
|
||||||
|
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 ID"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-gray-700 font-semibold mb-2">
|
||||||
|
Date:
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
name="date"
|
||||||
|
value={newJi.date}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
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 JI
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* JIs Table */}
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="table w-full">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th className="p-4">#</th>
|
||||||
|
<th className="p-4">Name</th>
|
||||||
|
<th className="p-4">Responsable</th>
|
||||||
|
<th className="p-4">Site ID</th>
|
||||||
|
<th className="p-4">Date</th>
|
||||||
|
<th className="p-4">Actions</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{jis.map((ji: Ji, index: number) => (
|
||||||
|
<tr key={ji.id} className="hover:bg-gray-100">
|
||||||
|
<td className="p-4">{index + 1}</td>
|
||||||
|
<td className="p-4">{ji.name}</td>
|
||||||
|
<td className="p-4">{ji.respo}</td>
|
||||||
|
<td className="p-4">{ji.site_id}</td>
|
||||||
|
<td className="p-4">{ji.date}</td>
|
||||||
|
<td className="p-4">
|
||||||
|
<button
|
||||||
|
className="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-400"
|
||||||
|
onClick={() => handleEditJi(ji.id)}
|
||||||
|
>
|
||||||
|
Edit
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Jis;
|
||||||
@ -1,75 +0,0 @@
|
|||||||
import axios from "axios";
|
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
import { Ji } from "../../type/JiType";
|
|
||||||
|
|
||||||
function ListJI() {
|
|
||||||
const [jis, setJis] = useState([]);
|
|
||||||
const [reload, setReload] = useState(0);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
axios.get("/api/ji/listall").then((res) => {
|
|
||||||
setJis(res.data);
|
|
||||||
});
|
|
||||||
}, [reload]);
|
|
||||||
|
|
||||||
const handleEditJi = (jiId: number) => {
|
|
||||||
alert(`Edit ji with ID: ${siteId}`);
|
|
||||||
};
|
|
||||||
|
|
||||||
/*const deleteJis = () => {
|
|
||||||
axios.delete("/api/jis").then(() => {
|
|
||||||
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">
|
|
||||||
Manage Jis
|
|
||||||
</h1>
|
|
||||||
{/*<button className="btn btn-error" onClick={deleteJDMIUsers}>
|
|
||||||
Delete JDMI jis
|
|
||||||
</button>*/}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Users Table */}
|
|
||||||
<div className="overflow-x-auto">
|
|
||||||
<table className="table w-full">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th className="p-4">#</th>
|
|
||||||
<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>
|
|
||||||
{jis.map((site: Ji, index: number) => (
|
|
||||||
<tr key={ji.id} className="hover:bg-gray-100">
|
|
||||||
<td className="p-4">{index + 1}</td>
|
|
||||||
<td className="p-4">{ji.name}</td>
|
|
||||||
<td className="p-4">{ji.address}</td>
|
|
||||||
<td className="p-4">{ji.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"
|
|
||||||
onClick={() => handleEditJi(ji.id)}
|
|
||||||
>
|
|
||||||
Edit
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Jis;
|
|
||||||
Loading…
x
Reference in New Issue
Block a user