WIP: update: adaptations to use the new backend #1
@ -10,7 +10,7 @@ import LoginPage from "./pages/Login";
|
||||
import PageTest from "./pages/PageTest";
|
||||
import CreateTp from "./pages/admin/CreateTp";
|
||||
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 Users from "./pages/admin/Users";
|
||||
import Sites from "./pages/admin/Sites";
|
||||
@ -34,7 +34,7 @@ function App() {
|
||||
<Route path="admin" element={<AdminPage />} />
|
||||
<Route path="/admin/jdmi" element={<BulkUsers />} />
|
||||
<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/sites" element={<Sites />} />
|
||||
<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