Ajout de la suppression d'un objet
This commit is contained in:
Mathis
parent
a0073fd11d
commit
4e35764e4c
@ -52,7 +52,8 @@ public class MainVerticle extends AbstractVerticle {
|
||||
router.post("/addObject").handler(setObjects::newObject);
|
||||
router.get("/getRange").handler(queryWeather::getRangeData);
|
||||
router.post("/modifRangeData").handler(setWeatherData::setRangeData);
|
||||
|
||||
router.post("/deleteObject").handler(setObjects::deleteObject);
|
||||
|
||||
// Routes d'authentification
|
||||
router.post("/signup").handler(authHandler::handleSignup);
|
||||
router.post("/login").handler(authHandler::handleLogin);
|
||||
|
||||
@ -78,7 +78,8 @@ public class QueryObjects {
|
||||
.put("last_update", row.getLocalDateTime("last_update").format(formatter))
|
||||
.put("status", row.getString("status"))
|
||||
.put("batterie",row.getInteger("batterie"))
|
||||
.put("type_batterie",row.getString("type_batterie"));
|
||||
.put("type_batterie",row.getString("type_batterie"))
|
||||
.put("proprio",row.getString("proprio"));
|
||||
objects.add(object);
|
||||
}
|
||||
return objects;
|
||||
|
||||
@ -48,7 +48,38 @@ public class SetObjects {
|
||||
return;
|
||||
});
|
||||
}
|
||||
public void deleteObject(RoutingContext context){
|
||||
JsonObject body = context.body().asJsonObject();
|
||||
if(body== null){
|
||||
context.response()
|
||||
.setStatusCode(400)
|
||||
.end(new JsonObject().put("error","Corps de la requête manquant").encode());
|
||||
return;
|
||||
}
|
||||
String id = body.getString("id");
|
||||
databaseService.pool
|
||||
.preparedQuery("DELETE FROM weather_objects WHERE id=?")
|
||||
.execute(Tuple.of(Integer.parseInt(id)))
|
||||
.onFailure(e->{
|
||||
System.err.println("Erreur de récupération de la BDD :"+e.getMessage());
|
||||
context.response()
|
||||
.setStatusCode(500)
|
||||
.end(new JsonObject().put("error","Erreur de récupération de la BDD").encode());
|
||||
})
|
||||
.onSuccess(rows -> {
|
||||
if(rows.rowCount()==0){
|
||||
context.response()
|
||||
.setStatusCode(404)
|
||||
.end(new JsonObject().put("error", "Objet non trouvé").encode());
|
||||
return;
|
||||
}
|
||||
context.response()
|
||||
.putHeader("content-type","application/json: charset=UTF-8")
|
||||
.end(new JsonObject().put("success", "L'objet à bien été supprimé").encode());
|
||||
return;
|
||||
});
|
||||
|
||||
}
|
||||
public void newObject(RoutingContext context){
|
||||
JsonObject body = context.body().asJsonObject();
|
||||
if(body== null){
|
||||
@ -62,9 +93,11 @@ public class SetObjects {
|
||||
String type = body.getString("type");
|
||||
String location = body.getString("location");
|
||||
String status = body.getString("status");
|
||||
String batterieType = body.getString("batterieType");
|
||||
String proprio = body.getString("proprio");
|
||||
databaseService.pool
|
||||
.preparedQuery("INSERT INTO weather_objects (name,description,type,location,status) VALUES (?,?,?,?,?)")
|
||||
.execute(Tuple.of(name,description,type,location,status))
|
||||
.preparedQuery("INSERT INTO weather_objects (name,description,type,location,status,type_batterie,proprio) VALUES (?,?,?,?,?,?,?)")
|
||||
.execute(Tuple.of(name,description,type,location,status,batterieType,proprio))
|
||||
.onFailure(e->{
|
||||
System.err.println("Erreur de récupération de la BDD :"+e.getMessage());
|
||||
context.response()
|
||||
|
||||
@ -18,8 +18,6 @@ import AdminObjet from "./pages/Admin/AdminObjet.jsx";
|
||||
function App() {
|
||||
return (
|
||||
<AuthProvider>
|
||||
{" "}
|
||||
{/* Enveloppe l'application avec AuthProvider */}
|
||||
<Router>
|
||||
<div>
|
||||
<Header />
|
||||
|
||||
257
Front-end/src/components/FormNewObject.jsx
Normal file
257
Front-end/src/components/FormNewObject.jsx
Normal file
@ -0,0 +1,257 @@
|
||||
import React, { useState } from "react";
|
||||
import { BadgePlus } from "lucide-react";
|
||||
import axios from "axios";
|
||||
import { API_BASE_URL } from "../config";
|
||||
|
||||
function FormNewObject({ isAdmin }) {
|
||||
const [description, setDescription] = useState("");
|
||||
const [type, setType] = useState("");
|
||||
const [location, setLocalisation] = useState("");
|
||||
const [proprio,setProprio] = useState("");
|
||||
const [batterieType,setBatterieType] = useState("");
|
||||
/*TODO*/
|
||||
/*Definir proprio avec le nom de l'user qui ajoute*/
|
||||
const [status, setStatus] = useState("active");
|
||||
const [nom, setNom] = useState("");
|
||||
const [Response, setResponse] = useState(null);
|
||||
const [isActive, setActive] = useState(true);
|
||||
const [verif, setVerif] = useState(false);
|
||||
const [enregistre, setEnregistre] = useState(false);
|
||||
const [messRequete, setMessRequete] = useState("");
|
||||
function handleSubmit(event) {
|
||||
event.preventDefault();
|
||||
|
||||
if (verif) {
|
||||
console.log("Envoi requete");
|
||||
axios
|
||||
.post(`${API_BASE_URL}/addObject`, {
|
||||
nom,
|
||||
description,
|
||||
type,
|
||||
location,
|
||||
status,
|
||||
batterieType,
|
||||
proprio
|
||||
})
|
||||
.then((response) => {
|
||||
setMessRequete("Votre objet à bien été enregistré !");
|
||||
setEnregistre(true);
|
||||
console.log("Ajout de l'objet réussit :", response.data);
|
||||
})
|
||||
.catch((error) => {
|
||||
setMessRequete("Il y a eu une erreur dans l'ajout de votre objet !");
|
||||
console.error("Erreur lors de l'ajout de l'objet :", error);
|
||||
});
|
||||
setVerif(false);
|
||||
resetForm();
|
||||
} else {
|
||||
setVerif(true);
|
||||
}
|
||||
}
|
||||
function resetForm() {
|
||||
setNom("");
|
||||
setStatus("active");
|
||||
setDescription("");
|
||||
setType("");
|
||||
setLocalisation("");
|
||||
setBatterieType("");
|
||||
if(isAdmin)setProprio("");
|
||||
setActive(true);
|
||||
}
|
||||
function handleCancel() {
|
||||
if (verif) {
|
||||
setVerif(false);
|
||||
} else {
|
||||
resetForm();
|
||||
}
|
||||
}
|
||||
function handleStatusChange() {
|
||||
setActive((prevIsActive) => {
|
||||
const newIsActive = !prevIsActive;
|
||||
setStatus(newIsActive ? "active" : "inactive");
|
||||
return newIsActive;
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="bg-white p-6 rounded-xl min-w-5xl">
|
||||
<div className="flex align-items gap-9">
|
||||
{isAdmin ? (
|
||||
<h2 className="text-2xl font-semibold mb-3">
|
||||
Ajouter un nouvel objet
|
||||
</h2>
|
||||
) : (
|
||||
<>
|
||||
<div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
|
||||
<BadgePlus className="text-indigo-600" size={24} />
|
||||
</div>
|
||||
<h1 className="text-black text-2xl font-bold mb-1">
|
||||
{!verif
|
||||
? "Entrez les données de votre nouvel objet"
|
||||
: "Êtes-vous sûr de ces données ?"}
|
||||
</h1>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="mb-5">
|
||||
<label
|
||||
htmlFor="nom"
|
||||
className="block mb-2 text-sm font-medium text-gray-900"
|
||||
>
|
||||
Nom :
|
||||
</label>
|
||||
<input
|
||||
id="nom"
|
||||
className="text-gray-600 border rounded-lg p-2 w-full"
|
||||
type="text"
|
||||
value={nom}
|
||||
onChange={(e) => setNom(e.target.value)}
|
||||
required
|
||||
disabled={verif}
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-5">
|
||||
<label
|
||||
htmlFor="description"
|
||||
className="block mb-2 text-sm font-medium text-gray-900"
|
||||
>
|
||||
Description :
|
||||
</label>
|
||||
<input
|
||||
id="description"
|
||||
className="text-gray-600 border rounded-lg p-2 w-full"
|
||||
type="text"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
required
|
||||
disabled={verif}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-5">
|
||||
<label
|
||||
htmlFor="type"
|
||||
className="block mb-2 text-sm font-medium text-gray-900"
|
||||
>
|
||||
Type :
|
||||
</label>
|
||||
<input
|
||||
id="type"
|
||||
className="text-gray-600 border rounded-lg p-2 w-full"
|
||||
type="text"
|
||||
value={type}
|
||||
onChange={(e) => setType(e.target.value)}
|
||||
required
|
||||
disabled={verif}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-5">
|
||||
<label
|
||||
htmlFor="location"
|
||||
className="block mb-2 text-sm font-medium text-gray-900"
|
||||
>
|
||||
Localisation :
|
||||
</label>
|
||||
<input
|
||||
id="location"
|
||||
className="text-gray-600 border rounded-lg p-2 w-full"
|
||||
type="text"
|
||||
value={location}
|
||||
onChange={(e) => setLocalisation(e.target.value)}
|
||||
required
|
||||
disabled={verif}
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-5">
|
||||
<label
|
||||
htmlFor="batterieType"
|
||||
className="block mb-2 text-sm font-medium text-gray-900"
|
||||
>
|
||||
Type de batterie :
|
||||
</label>
|
||||
<input
|
||||
id="batterieType"
|
||||
className="text-gray-600 border rounded-lg p-2 w-full"
|
||||
type="text"
|
||||
value={batterieType}
|
||||
onChange={(e) => setBatterieType(e.target.value)}
|
||||
required
|
||||
disabled={verif}
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-5">
|
||||
<label
|
||||
htmlFor="proprio"
|
||||
className="block mb-2 text-sm font-medium text-gray-900"
|
||||
>
|
||||
Propriétaire :
|
||||
</label>
|
||||
<input
|
||||
id="proprio"
|
||||
className="text-gray-600 border rounded-lg p-2 w-full"
|
||||
type="text"
|
||||
value={proprio}
|
||||
onChange={(e) => setProprio(e.target.value)}
|
||||
required
|
||||
disabled={verif||!isAdmin}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-5">
|
||||
<label className="block mb-2 text-sm font-medium text-gray-900">
|
||||
Status :
|
||||
</label>
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<label
|
||||
htmlFor="switch-component-on"
|
||||
className="text-slate-600 text-sm cursor-pointer"
|
||||
>
|
||||
Inactive
|
||||
</label>
|
||||
<div className="relative inline-block w-11 h-5">
|
||||
<input
|
||||
id="switch-component-on"
|
||||
type="checkbox"
|
||||
checked={isActive}
|
||||
onChange={handleStatusChange}
|
||||
className="peer appearance-none w-11 h-5 bg-slate-100 rounded-full checked:bg-slate-800 cursor-pointer transition-colors duration-300"
|
||||
disabled={verif}
|
||||
/>
|
||||
<label
|
||||
htmlFor="switch-component-on"
|
||||
className="absolute top-0 left-0 w-5 h-5 bg-white rounded-full border border-slate-300 shadow-sm transition-transform duration-300 peer-checked:translate-x-6 peer-checked:border-slate-800 cursor-pointer"
|
||||
></label>
|
||||
</div>
|
||||
<label
|
||||
htmlFor="switch-component-on"
|
||||
className="text-slate-600 text-sm cursor-pointer"
|
||||
>
|
||||
Active
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col mb-5 ">
|
||||
<button
|
||||
type={"submit"}
|
||||
className="text-blue-500 hover:cursor-pointer hover:underline mb-2"
|
||||
>
|
||||
{!verif ? "Confirmer les informations" : "Oui je suis sûr !"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="text-red-500 hover:cursor-pointer hover:underline"
|
||||
onClick={handleCancel}
|
||||
>
|
||||
{!verif ? "Supprimer les informations" : "Non je veux changer !"}
|
||||
</button>
|
||||
</div>
|
||||
<p className={enregistre ? "text-green-700" : "text-red-700"}>
|
||||
{messRequete}
|
||||
</p>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
export default FormNewObject;
|
||||
@ -8,8 +8,8 @@ function Header() {
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<header className="bg-white shadow-sm">
|
||||
<div className="mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
|
||||
<header className="bg-white shadow-md sticky">
|
||||
<div className="mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center ">
|
||||
<Link to="/" className="text-2xl font-bold text-indigo-600">VigiMétéo</Link>
|
||||
<button
|
||||
className="sm:hidden text-gray-600 hover:text-indigo-600"
|
||||
@ -31,7 +31,7 @@ function Header() {
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/about" className="text-gray-600 hover:text-indigo-600">
|
||||
A propos
|
||||
À propos
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
@ -1,10 +1,20 @@
|
||||
import React, { useState } from "react";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Sidebar from "./sidebar.jsx";
|
||||
import axios from "axios";
|
||||
import { API_BASE_URL } from "../../config";
|
||||
import AddObject from "../Gestion/AddObject.jsx";
|
||||
import FormNewObject from "../../components/FormNewObject.jsx";
|
||||
|
||||
function AdminObjet() {
|
||||
// Gestion des catégories
|
||||
const [categories, setCategories] = useState(["Catégorie 1", "Catégorie 2"]);
|
||||
const [newCategory, setNewCategory] = useState("");
|
||||
const [objects, setObjects] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
axios.get(`${API_BASE_URL}/objets`).then((response) => {
|
||||
setObjects(response.data);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleAddCategory = () => {
|
||||
const trimmed = newCategory.trim();
|
||||
@ -13,23 +23,16 @@ function AdminObjet() {
|
||||
setNewCategory("");
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteCategory = (categoryToDelete) => {
|
||||
setCategories(categories.filter((cat) => cat !== categoryToDelete));
|
||||
};
|
||||
|
||||
// Gestion des objets et outils/services
|
||||
// On ajoute maintenant le champ "propriétaire"
|
||||
const [objects, setObjects] = useState([]);
|
||||
|
||||
// Champs du formulaire d'ajout d'objet (inspiré de AddObject.jsx)
|
||||
const [nom, setNom] = useState("");
|
||||
const [name, setName] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [type, setType] = useState("");
|
||||
const [localisation, setLocalisation] = useState("");
|
||||
const [location, setLocation] = useState("");
|
||||
const [proprietaire, setProprietaire] = useState("");
|
||||
const [status, setStatus] = useState("active");
|
||||
const [isActive, setIsActive] = useState(true);
|
||||
const [verif, setVerif] = useState(false);
|
||||
const [enregistre, setEnregistre] = useState(false);
|
||||
const [messRequete, setMessRequete] = useState("");
|
||||
@ -39,10 +42,10 @@ function AdminObjet() {
|
||||
if (verif) {
|
||||
const newObj = {
|
||||
id: Date.now(),
|
||||
nom: nom.trim(),
|
||||
name: name.trim(),
|
||||
description: description.trim(),
|
||||
type: type.trim(),
|
||||
localisation: localisation.trim(),
|
||||
location: location.trim(),
|
||||
proprietaire: proprietaire.trim(),
|
||||
status: status,
|
||||
};
|
||||
@ -51,42 +54,29 @@ function AdminObjet() {
|
||||
setEnregistre(true);
|
||||
setVerif(false);
|
||||
resetForm();
|
||||
window.location.reload();
|
||||
} else {
|
||||
setVerif(true);
|
||||
}
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
setNom("");
|
||||
setDescription("");
|
||||
setType("");
|
||||
setLocalisation("");
|
||||
setProprietaire("");
|
||||
setStatus("active");
|
||||
setIsActive(true);
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
if (verif) {
|
||||
setVerif(false);
|
||||
} else {
|
||||
resetForm();
|
||||
}
|
||||
};
|
||||
|
||||
const handleStatusChange = () => {
|
||||
setIsActive((prev) => {
|
||||
const newIsActive = !prev;
|
||||
setStatus(newIsActive ? "active" : "inactive");
|
||||
return newIsActive;
|
||||
});
|
||||
};
|
||||
|
||||
const handleDeleteObject = (id) => {
|
||||
setObjects(objects.filter((obj) => obj.id !== id));
|
||||
axios
|
||||
.post(`${API_BASE_URL}/deleteObject`, {
|
||||
id,
|
||||
})
|
||||
.then((response) => {
|
||||
setMessRequete("Votre objet à bien été supprimé !");
|
||||
console.log("Votre objet à été supprimé :", response.data);
|
||||
window.location.reload();
|
||||
})
|
||||
.catch((error) => {
|
||||
setMessRequete(
|
||||
"Il y a eu une erreur dans la suppression de votre objet !"
|
||||
);
|
||||
console.error("Erreur lors de la suppression de l'objet :", error);
|
||||
});
|
||||
};
|
||||
|
||||
// Tri des objets en fonction d'une catégorie sélectionnée
|
||||
const [sortCriteria, setSortCriteria] = useState("");
|
||||
|
||||
const sortedObjects = [...objects].sort((a, b) => {
|
||||
@ -96,7 +86,6 @@ function AdminObjet() {
|
||||
return fieldA.localeCompare(fieldB);
|
||||
});
|
||||
|
||||
// Règles globales
|
||||
const [energyPriority, setPriority] = useState("");
|
||||
const [alertSettings, setAlertSettings] = useState("");
|
||||
|
||||
@ -154,163 +143,11 @@ function AdminObjet() {
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
{/* Formulaire d'ajout d'objet */}
|
||||
<section className="bg-white p-6 rounded-xl shadow-md mb-12">
|
||||
<div className="flex items-center gap-4 mb-5">
|
||||
<div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center">
|
||||
<span className="text-indigo-600 text-xl">+</span>
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-gray-900">
|
||||
{!verif
|
||||
? "Entrez les données de votre nouvel objet"
|
||||
: "Êtes-vous sûr de ces données ?"}
|
||||
</h2>
|
||||
</div>
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="nom"
|
||||
className="block mb-2 text-sm font-medium text-gray-900"
|
||||
>
|
||||
Nom :
|
||||
</label>
|
||||
<input
|
||||
id="nom"
|
||||
type="text"
|
||||
value={nom}
|
||||
onChange={(e) => setNom(e.target.value)}
|
||||
required
|
||||
disabled={verif}
|
||||
className="w-full p-2 border border-gray-300 rounded-lg text-gray-600"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="description"
|
||||
className="block mb-2 text-sm font-medium text-gray-900"
|
||||
>
|
||||
Description :
|
||||
</label>
|
||||
<input
|
||||
id="description"
|
||||
type="text"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
required
|
||||
disabled={verif}
|
||||
className="w-full p-2 border border-gray-300 rounded-lg text-gray-600"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="type"
|
||||
className="block mb-2 text-sm font-medium text-gray-900"
|
||||
>
|
||||
Type :
|
||||
</label>
|
||||
<input
|
||||
id="type"
|
||||
type="text"
|
||||
value={type}
|
||||
onChange={(e) => setType(e.target.value)}
|
||||
required
|
||||
disabled={verif}
|
||||
className="w-full p-2 border border-gray-300 rounded-lg text-gray-600"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="localisation"
|
||||
className="block mb-2 text-sm font-medium text-gray-900"
|
||||
>
|
||||
Localisation :
|
||||
</label>
|
||||
<input
|
||||
id="localisation"
|
||||
type="text"
|
||||
value={localisation}
|
||||
onChange={(e) => setLocalisation(e.target.value)}
|
||||
required
|
||||
disabled={verif}
|
||||
className="w-full p-2 border border-gray-300 rounded-lg text-gray-600"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="proprietaire"
|
||||
className="block mb-2 text-sm font-medium text-gray-900"
|
||||
>
|
||||
Propriétaire :
|
||||
</label>
|
||||
<input
|
||||
id="proprietaire"
|
||||
type="text"
|
||||
value={proprietaire}
|
||||
onChange={(e) => setProprietaire(e.target.value)}
|
||||
required
|
||||
disabled={verif}
|
||||
className="w-full p-2 border border-gray-300 rounded-lg text-gray-600"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block mb-2 text-sm font-medium text-gray-900">
|
||||
Status :
|
||||
</label>
|
||||
<div className="flex items-center gap-2">
|
||||
<label
|
||||
htmlFor="switch-component-on"
|
||||
className="text-slate-600 text-sm cursor-pointer"
|
||||
>
|
||||
Inactive
|
||||
</label>
|
||||
<div className="relative inline-block w-11 h-5">
|
||||
<input
|
||||
id="switch-component-on"
|
||||
type="checkbox"
|
||||
checked={isActive}
|
||||
onChange={handleStatusChange}
|
||||
disabled={verif}
|
||||
className="peer appearance-none w-11 h-5 bg-slate-100 rounded-full cursor-pointer transition-colors duration-300"
|
||||
/>
|
||||
<label
|
||||
htmlFor="switch-component-on"
|
||||
className="absolute top-0 left-0 w-5 h-5 bg-white rounded-full border border-slate-300 shadow-sm transition-transform duration-300 peer-checked:translate-x-6 peer-checked:border-slate-800 cursor-pointer"
|
||||
></label>
|
||||
</div>
|
||||
<label
|
||||
htmlFor="switch-component-on"
|
||||
className="text-slate-600 text-sm cursor-pointer"
|
||||
>
|
||||
Active
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<button
|
||||
type="submit"
|
||||
className="text-blue-500 hover:underline mb-2"
|
||||
>
|
||||
{!verif ? "Confirmer les informations" : "Oui je suis sûr !"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCancel}
|
||||
className="text-red-500 hover:underline"
|
||||
>
|
||||
{!verif
|
||||
? "Supprimer les informations"
|
||||
: "Non je veux changer !"}
|
||||
</button>
|
||||
</div>
|
||||
<p className={enregistre ? "text-green-700" : "text-red-700"}>
|
||||
{messRequete}
|
||||
</p>
|
||||
</form>
|
||||
</section>
|
||||
{/*Formulaire d'ajout d'objet*/}
|
||||
<FormNewObject isAdmin={true} />
|
||||
|
||||
{/* Tri des objets */}
|
||||
<section className="bg-white p-6 rounded-xl shadow-md mb-12">
|
||||
<section className="bg-white p-6 rounded-xl shadow-md mt-12 mb-12">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-2xl font-semibold">
|
||||
Liste des Objets et Outils/Services
|
||||
@ -322,7 +159,7 @@ function AdminObjet() {
|
||||
>
|
||||
<option value="">-- Trier par --</option>
|
||||
<option value="proprietaire">Propriétaire</option>
|
||||
<option value="localisation">Lieux</option>
|
||||
<option value="location">Lieux</option>
|
||||
<option value="type">Type</option>
|
||||
<option value="status">Status</option>
|
||||
</select>
|
||||
@ -356,7 +193,7 @@ function AdminObjet() {
|
||||
{sortedObjects.map((obj) => (
|
||||
<tr key={obj.id}>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
||||
{obj.nom}
|
||||
{obj.name}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{obj.description}
|
||||
@ -365,10 +202,10 @@ function AdminObjet() {
|
||||
{obj.type}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{obj.localisation}
|
||||
{obj.location}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{obj.proprietaire}
|
||||
{obj.proprio}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{obj.status}
|
||||
|
||||
@ -11,12 +11,12 @@ function Sidebar() {
|
||||
className="text-white no-underline hover:underline"
|
||||
href="/dashboard"
|
||||
>
|
||||
Dashboard
|
||||
Tableau de bord
|
||||
</a>
|
||||
</li>
|
||||
<li className="mb-3">
|
||||
<a className="text-white no-underline hover:underline" href="/user">
|
||||
Users
|
||||
Utilisateurs
|
||||
</a>
|
||||
</li>
|
||||
<li className="mb-3">
|
||||
@ -24,17 +24,17 @@ function Sidebar() {
|
||||
className="text-white no-underline hover:underline"
|
||||
href="/adminobjet"
|
||||
>
|
||||
AdminObjet
|
||||
Gestion des objets
|
||||
</a>
|
||||
</li>
|
||||
<li className="mb-3">
|
||||
<a className="text-white no-underline hover:underline" href="#">
|
||||
Settings
|
||||
Paramètres
|
||||
</a>
|
||||
</li>
|
||||
<li className="mb-3">
|
||||
<a className="text-white no-underline hover:underline" href="#">
|
||||
Reports
|
||||
Rapports
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -1,71 +1,7 @@
|
||||
import React, { useState } from "react";
|
||||
import { BadgePlus } from "lucide-react";
|
||||
import axios from "axios";
|
||||
import { API_BASE_URL } from "../../config";
|
||||
import FormNewObject from "../../components/FormNewObject";
|
||||
|
||||
function AddObject() {
|
||||
const [description, setDescription] = useState("");
|
||||
const [type, setType] = useState("");
|
||||
const [location, setLocalisation] = useState("");
|
||||
const [status, setStatus] = useState("active");
|
||||
const [nom, setNom] = useState("");
|
||||
const [Response, setResponse] = useState(null);
|
||||
const [isActive, setActive] = useState(true);
|
||||
const [verif, setVerif] = useState(false);
|
||||
const [enregistre, setEnregistre] = useState(false);
|
||||
const [messRequete, setMessRequete] = useState("");
|
||||
function handleSubmit(event) {
|
||||
event.preventDefault();
|
||||
|
||||
if (verif) {
|
||||
console.log("Envoi requete");
|
||||
axios
|
||||
.post(`${API_BASE_URL}/addObject`, {
|
||||
nom,
|
||||
description,
|
||||
type,
|
||||
location,
|
||||
status,
|
||||
})
|
||||
.then((response) => {
|
||||
setMessRequete("Votre objet à bien été enregistré !");
|
||||
setEnregistre(true);
|
||||
console.log("Ajout de l'objet réussit :", response.data);
|
||||
})
|
||||
.catch((error) => {
|
||||
setMessRequete("Il y a eu une erreur dans l'ajout de votre objet !");
|
||||
console.error("Erreur lors de l'ajout de l'objet :", error);
|
||||
});
|
||||
setVerif(false);
|
||||
resetForm();
|
||||
} else {
|
||||
setVerif(true);
|
||||
}
|
||||
}
|
||||
function resetForm() {
|
||||
setNom("");
|
||||
setStatus("");
|
||||
setDescription("");
|
||||
setType("");
|
||||
setLocalisation("");
|
||||
setActive(true);
|
||||
}
|
||||
function handleCancel() {
|
||||
if (verif) {
|
||||
setVerif(false);
|
||||
} else {
|
||||
resetForm();
|
||||
}
|
||||
}
|
||||
|
||||
function handleStatusChange() {
|
||||
setActive((prevIsActive) => {
|
||||
const newIsActive = !prevIsActive;
|
||||
setStatus(newIsActive ? "active" : "inactive");
|
||||
return newIsActive;
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50">
|
||||
<div className=" max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
@ -74,144 +10,7 @@ function AddObject() {
|
||||
Nouvel objet
|
||||
</h2>
|
||||
</div>
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
className="bg-white p-6 rounded-xl min-w-5xl"
|
||||
>
|
||||
<div className="flex align-items gap-9">
|
||||
<div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
|
||||
<BadgePlus className="text-indigo-600" size={24} />
|
||||
</div>
|
||||
<h1 className="text-black text-2xl font-bold mb-1">
|
||||
{!verif
|
||||
? "Entrez les données de votre nouvel objet"
|
||||
: "Êtes-vous sûr de ces données ?"}
|
||||
</h1>
|
||||
</div>
|
||||
<div className="mb-5">
|
||||
<label
|
||||
htmlFor="nom"
|
||||
className="block mb-2 text-sm font-medium text-gray-900"
|
||||
>
|
||||
Nom :
|
||||
</label>
|
||||
<input
|
||||
id="nom"
|
||||
className="text-gray-600 border rounded-lg p-2 w-full"
|
||||
type="text"
|
||||
value={nom}
|
||||
onChange={(e) => setNom(e.target.value)}
|
||||
required
|
||||
disabled={verif}
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-5">
|
||||
<label
|
||||
htmlFor="description"
|
||||
className="block mb-2 text-sm font-medium text-gray-900"
|
||||
>
|
||||
Description :
|
||||
</label>
|
||||
<input
|
||||
id="description"
|
||||
className="text-gray-600 border rounded-lg p-2 w-full"
|
||||
type="text"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
required
|
||||
disabled={verif}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-5">
|
||||
<label
|
||||
htmlFor="type"
|
||||
className="block mb-2 text-sm font-medium text-gray-900"
|
||||
>
|
||||
Type :
|
||||
</label>
|
||||
<input
|
||||
id="type"
|
||||
className="text-gray-600 border rounded-lg p-2 w-full"
|
||||
type="text"
|
||||
value={type}
|
||||
onChange={(e) => setType(e.target.value)}
|
||||
required
|
||||
disabled={verif}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-5">
|
||||
<label
|
||||
htmlFor="location"
|
||||
className="block mb-2 text-sm font-medium text-gray-900"
|
||||
>
|
||||
Localisation :
|
||||
</label>
|
||||
<input
|
||||
id="location"
|
||||
className="text-gray-600 border rounded-lg p-2 w-full"
|
||||
type="text"
|
||||
value={location}
|
||||
onChange={(e) => setLocalisation(e.target.value)}
|
||||
required
|
||||
disabled={verif}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-5">
|
||||
<label className="block mb-2 text-sm font-medium text-gray-900">
|
||||
Status :
|
||||
</label>
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<label
|
||||
htmlFor="switch-component-on"
|
||||
className="text-slate-600 text-sm cursor-pointer"
|
||||
>
|
||||
Inactive
|
||||
</label>
|
||||
<div className="relative inline-block w-11 h-5">
|
||||
<input
|
||||
id="switch-component-on"
|
||||
type="checkbox"
|
||||
checked={isActive}
|
||||
onChange={handleStatusChange}
|
||||
className="peer appearance-none w-11 h-5 bg-slate-100 rounded-full checked:bg-slate-800 cursor-pointer transition-colors duration-300"
|
||||
disabled={verif}
|
||||
/>
|
||||
<label
|
||||
htmlFor="switch-component-on"
|
||||
className="absolute top-0 left-0 w-5 h-5 bg-white rounded-full border border-slate-300 shadow-sm transition-transform duration-300 peer-checked:translate-x-6 peer-checked:border-slate-800 cursor-pointer"
|
||||
></label>
|
||||
</div>
|
||||
<label
|
||||
htmlFor="switch-component-on"
|
||||
className="text-slate-600 text-sm cursor-pointer"
|
||||
>
|
||||
Active
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col mb-5 ">
|
||||
<button
|
||||
type={"submit"}
|
||||
className="text-blue-500 hover:cursor-pointer hover:underline mb-2"
|
||||
>
|
||||
{!verif ? "Confirmer les informations" : "Oui je suis sûr !"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="text-red-500 hover:cursor-pointer hover:underline"
|
||||
onClick={handleCancel}
|
||||
>
|
||||
{!verif ? "Supprimer les informations" : "Non je veux changer !"}
|
||||
</button>
|
||||
</div>
|
||||
<p className={(enregistre)?("text-green-700"):("text-red-700")}>
|
||||
{messRequete}
|
||||
</p>
|
||||
</form>
|
||||
<FormNewObject />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user