129 lines
5.0 KiB
PHP
129 lines
5.0 KiB
PHP
@extends('layout')
|
|
@section('content')
|
|
<link href="{{ asset('css/style.css') }}" rel="stylesheet">
|
|
<h1>Liste des clients</h1>
|
|
<ul id="clients-list"></ul>
|
|
{{-- Définition et exécution d'une fonction javascript pour afficher les clients --}}
|
|
<script>
|
|
async function loadClients() {
|
|
try {
|
|
//appel de l'api
|
|
const response = await fetch('http://192.168.56.56:8000/api/clients');
|
|
const clients = await response.json();
|
|
const list = document.getElementById('clients-list');
|
|
list.innerHTML = `<table>
|
|
<thead>
|
|
<tr>
|
|
<th scope=\"col\">Nom du client</th>
|
|
<th scope=\"col\">Adresse e-mail</th>
|
|
<th scope=\"col\">Voir le client</th>
|
|
<th scope=\"col\">Supprimer</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody> `;
|
|
const table = list.querySelector("table")
|
|
clients.forEach(c => {
|
|
table.innerHTML += `<tr>
|
|
<td>${c.nom}</td>
|
|
<td>${c.email}</td>
|
|
<td><a href="#" onclick="leClient(${c.id});">Informations</a></td>
|
|
<td><a href="#" onclick="supprimer(${c.id});">supprimer</a></td>
|
|
</tr>`;
|
|
});
|
|
list.innerHTML += "</tbody> </table> "
|
|
|
|
} catch (error) {
|
|
console.error('Erreur :', error);
|
|
list.innerHTML = '<li>Impossible de charger les clients</li>';
|
|
}
|
|
}
|
|
|
|
async function supprimer(id){
|
|
try{
|
|
await fetch(`http://192.168.56.56:8000/api/clients/${id}`, {
|
|
method: 'DELETE'
|
|
});
|
|
await loadClients();
|
|
}catch(err){
|
|
console.error(err);
|
|
}
|
|
}
|
|
|
|
async function leClient(id) {
|
|
try {
|
|
const response = await fetch(`http://192.168.56.56:8000/api/clients/${id}`, {
|
|
method: 'GET'
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error("Client introuvable");
|
|
}
|
|
|
|
const client = await response.json();
|
|
|
|
// zone d'affichage
|
|
const zone = document.getElementById("client-info");
|
|
|
|
// formulaire
|
|
zone.innerHTML = `
|
|
<h2>Modifier le client</h2>
|
|
|
|
<form onsubmit="updateClient(${client.id}); return false;">
|
|
|
|
<label>Nom :</label><br>
|
|
<input type="text" id="edit-nom" value="${client.nom}" required><br><br>
|
|
|
|
<label>Prénom :</label><br>
|
|
<input type="text" id="edit-prenom" value="${client.prenom}" required><br><br>
|
|
|
|
<label>Email :</label><br>
|
|
<input type="email" id="edit-email" value="${client.email}" required><br><br>
|
|
|
|
<label>Numéro de téléphone :</label><br>
|
|
<input type="text" id="edit-ntelephone" value="${client.ntelephone ?? ''}"><br><br>
|
|
|
|
<button type="submit">Mettre à jour</button>
|
|
</form>
|
|
`;
|
|
} catch (error) {
|
|
console.error(error);
|
|
document.getElementById("client-info").innerHTML =
|
|
"<p>Erreur lors du chargement du client.</p>";
|
|
}
|
|
}
|
|
|
|
async function updateClient(id) {
|
|
try {
|
|
const nom = document.getElementById("edit-nom").value;
|
|
const prenom = document.getElementById("edit-prenom").value;
|
|
const email = document.getElementById("edit-email").value;
|
|
const telephone = document.getElementById("edit-ntelephone").value;
|
|
|
|
const response = await fetch(`http://192.168.56.56:8000/api/clients/${id}`, {
|
|
method: 'PUT',
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ nom, prenom, email, telephone })
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error("Erreur de mise à jour");
|
|
}
|
|
|
|
alert("Client mis à jour !");
|
|
loadClients();
|
|
|
|
} catch (err) {
|
|
console.error(err);
|
|
alert("Impossible de mettre à jour le client.");
|
|
}
|
|
}
|
|
|
|
|
|
loadClients();
|
|
|
|
|
|
</script>
|
|
<div id="client-info"></div>
|
|
@endsection
|
|
|