-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathliste_equipements.html
More file actions
345 lines (306 loc) · 17.8 KB
/
Copy pathliste_equipements.html
File metadata and controls
345 lines (306 loc) · 17.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HardLink - Liste des Équipements</title>
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
<link rel="shortcut icon" href="img/favicon.svg" type="image/x-icon">
<link rel="stylesheet" href="global.css?v=1.2">
<link rel="stylesheet" href="liste_equipements.css?v=1.2">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>
<script src="js/auth_check.js"></script>
<script src="js/password_confirmation.js"></script>
</head>
<body>
<div class="container">
<div class="header-title-group">
<h1>HardLink - Liste des Équipements</h1>
</div>
<div class="action-buttons">
<input type="text" id="search-input" placeholder="Rechercher...">
<select id="localite-filter">
<option value="">Toutes les Localités</option>
</select>
<select id="type-site-filter">
<option value="">Tous les Types de Site</option>
</select>
<button id="export-excel-btn" class="action-button action-buttons-export">
<svg viewBox="0 0 24 24" width="18" height="18" style="margin-right: 5px;" fill="currentColor"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>
Exp en Excel
</button>
<button id="import-excel-btn" class="action-button action-buttons-import">
<svg viewBox="0 0 24 24" width="18" height="18" style="margin-right: 5px;" fill="currentColor"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm-1 10V9h-2v3H8l4 4 4-4h-3zm0-1H8v-2h3V9h2v2z"/></svg>
Imp depuis Excel
</button>
<input type="file" id="import-file-input" style="display: none;" accept=".csv, .xlsx, .xls">
<button class="add-button" onclick="window.location.href='add_equipment.php'">
<svg viewBox="0 0 24 24" width="18" height="18" style="margin-right: 5px;" fill="currentColor"><path d="M17 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM7 4c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12-2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM5 20V4h14l.02 16H5zm2-10h2V7H7v3zm8 0h2V7h-2v3z"/></svg>
Ajouter Eqpts
</button>
<button onclick="window.location.href='dashboard.html'" class="action-button back-btn">
<svg viewBox="0 0 24 24" width="18" height="18" style="margin-right: 5px;" fill="currentColor"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg> Retour Dashboard
</button>
</div>
<div class="table-container">
<table id="equipments-table">
<thead>
<tr>
<th>N_inv</th>
<th>Nom Éqpts</th>
<th>Ref</th>
<th>Type Eqpts</th>
<th class="hidden-column">N/S</th>
<th>D.M.S</th>
<th>Statut</th>
<th>Site</th>
<th>Type Site</th>
<th>Localité</th>
<th>Client</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<!-- Les données de l'équipement seront chargées ici -->
</tbody>
</table>
</div>
<footer class="main-footer">
<p>© 2025 HardLink - Tous droits réservés</p>
</footer>
</div>
<script src="js/auth_check.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
loadEquipments();
});
async function loadEquipments() {
console.log("DOMContentLoaded fired.");
const equipmentsTableBody = document.querySelector('#equipments-table tbody');
const searchInput = document.getElementById('search-input');
const localiteFilter = document.getElementById('localite-filter');
const typeSiteFilter = document.getElementById('type-site-filter');
const exportExcelBtn = document.getElementById('export-excel-btn');
const importExcelBtn = document.getElementById('import-excel-btn');
const importFileInput = document.getElementById('import-file-input');
async function fetchEquipments() {
try {
const urlParams = new URLSearchParams(window.location.search);
const typeParam = urlParams.get('type');
const fetchUrl = typeParam ? `api/get_equipments.php?type=${encodeURIComponent(typeParam)}` : 'api/get_equipments.php';
console.log(`Récupération des équipements depuis ${fetchUrl}...`);
const response = await fetch(fetchUrl);
console.log("Response status:", response.status);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
console.log("API response data:", data);
if (data.success) {
return data.equipments;
} else {
console.error("Erreur lors de la récupération des équipements:", data.message);
return [];
}
} catch (error) {
console.error("Erreur réseau lors de la récupération des équipements:", error);
return [];
}
}
let equipments = await fetchEquipments();
console.log("Données des équipements reçues:", equipments);
function populateLocaliteFilter() {
console.log("Populating localite filter.");
const uniqueLocalites = [...new Set(equipments.map(equipment => equipment.localite))];
localiteFilter.innerHTML = '<option value="">Toutes les Localités</option>';
uniqueLocalites.forEach(localite => {
const option = document.createElement('option');
option.value = localite;
option.textContent = localite;
localiteFilter.appendChild(option);
});
}
function populateTypeSiteFilter() {
console.log("Populating type site filter.");
const uniqueTypeSites = [...new Set(equipments.map(equipment => equipment.typeSite))];
typeSiteFilter.innerHTML = '<option value="">Tous les Types de Site</option>';
uniqueTypeSites.forEach(typeSite => {
const option = document.createElement('option');
option.value = typeSite;
option.textContent = typeSite;
typeSiteFilter.appendChild(option);
});
}
function renderEquipments(filter = '', selectedLocalite = '', selectedTypeSite = '') {
console.log("renderEquipments appelé avec le filtre :", filter, "localite:", selectedLocalite, "typeSite:", selectedTypeSite);
equipmentsTableBody.innerHTML = '';
let filteredEquipments = equipments;
const currentUser = JSON.parse(localStorage.getItem('currentUser'));
const userWilayaId = currentUser ? parseInt(currentUser.wilaya_id) : null;
if (selectedLocalite) {
filteredEquipments = filteredEquipments.filter(equipment => equipment.localite === selectedLocalite);
}
if (selectedTypeSite) {
filteredEquipments = filteredEquipments.filter(equipment => equipment.typeSite === selectedTypeSite);
}
filteredEquipments = filteredEquipments.filter(equipment =>
Object.values(equipment).some(value =>
String(value).toLowerCase().includes(filter.toLowerCase())
)
);
console.log("Filtered equipments count:", filteredEquipments.length);
if (filteredEquipments.length === 0) {
equipmentsTableBody.innerHTML = '<tr><td colspan="11" style="text-align: center;">Aucun équipement trouvé.</td></tr>';
console.log("Aucun équipement à afficher.");
return;
}
filteredEquipments.forEach(equipment => {
console.log("Insertion de la ligne pour l'équipement :", equipment.nom_equipement);
const row = equipmentsTableBody.insertRow();
// Appliquer une couleur de fond si l'équipement appartient à une autre wilaya
if (userWilayaId && equipment.wilaya_id && parseInt(equipment.wilaya_id) !== userWilayaId) {
row.classList.add('external-wilaya-row');
row.title = "Équipement d'une autre wilaya (inter-wilaya)";
}
row.insertCell().textContent = equipment.N_inv || '';
const nomEquipementCell = row.insertCell();
let equipNameHtml = '';
if (equipment.is_star) {
equipNameHtml += `<strong>${equipment.nom_equipement} <i class="fas fa-star" style="color: green;"></i></strong>`;
} else {
equipNameHtml += equipment.nom_equipement || '';
}
// Ajouter l'icône inter-wilaya si portée inter-wilaya
if (equipment.is_inter_wilaya == 1) {
const targetWilayaInfo = equipment.target_wilaya_nom ? ` vers ${equipment.target_wilaya_nom}` : '';
equipNameHtml += ` <i class="fas fa-globe" style="color: #f39c12; margin-left: 5px;" title="Équipement Inter-Wilaya${targetWilayaInfo}"></i>`;
}
nomEquipementCell.innerHTML = equipNameHtml;
row.insertCell().textContent = equipment.ref || '';
row.insertCell().textContent = equipment.type_eqpt || '';
const nsCell = row.insertCell();
nsCell.textContent = equipment.numero_serie || '';
nsCell.classList.add('hidden-column');
row.insertCell().textContent = equipment.dms || '';
const displayStatut = equipment.etat === '0' || equipment.etat === '' ? '' : equipment.etat;
row.insertCell().textContent = displayStatut;
row.insertCell().textContent = equipment.siteName || '';
row.insertCell().textContent = equipment.typeSite || '';
row.insertCell().textContent = equipment.localite || '';
row.insertCell().textContent = equipment.client_name || '';
const actionsCell = row.insertCell();
actionsCell.classList.add('actions-cell');
const editButton = document.createElement('button');
editButton.textContent = 'Modifier';
editButton.classList.add('action-button', 'edit-button');
editButton.addEventListener('click', function() {
window.location.href = `modifier_equipment.html?id=${equipment.id}`;
});
actionsCell.appendChild(editButton);
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Supprimer';
deleteButton.classList.add('action-button', 'delete-button');
deleteButton.addEventListener('click', async function() {
// Demander le mot de passe de confirmation avant la suppression
showPasswordConfirmationModal('supprimer cet équipement', async function() {
try {
const currentUser = JSON.parse(localStorage.getItem('currentUser'));
const username = currentUser ? currentUser.username : 'Technicien';
const response = await fetch('api/delete_equipment.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ id: equipment.id, username: username })
});
const data = await response.json();
if (data.success) {
alert('Équipement supprimé avec succès !');
equipments = await fetchEquipments();
renderEquipments(searchInput.value, localiteFilter.value, typeSiteFilter.value);
} else {
alert("Erreur lors de la suppression de l'équipement: " + data.message);
}
} catch (error) {
console.error('Erreur réseau lors de la suppression:', error);
alert('Une erreur est survenue lors de la suppression de l\'équipement.');
}
});
});
actionsCell.appendChild(deleteButton);
});
hideAdminElements();
} // Closes renderEquipments function
populateLocaliteFilter();
populateTypeSiteFilter();
renderEquipments();
searchInput.addEventListener('input', function() {
renderEquipments(this.value, localiteFilter.value, typeSiteFilter.value);
});
localiteFilter.addEventListener('change', function() {
renderEquipments(searchInput.value, this.value, typeSiteFilter.value);
});
typeSiteFilter.addEventListener('change', function() {
renderEquipments(searchInput.value, localiteFilter.value, this.value);
});
exportExcelBtn.addEventListener('click', function() {
const dataToExport = equipments.map(equipment => ({
'N_inv': equipment.N_inv || '',
'Nom Éqpts': equipment.nom_equipement || '',
'Ref': equipment.ref || '',
'Type Eqpts': equipment.type_eqpt || '',
'N/S': equipment.numero_serie || '',
'D.M.S': equipment.dms || '',
'Statut': (equipment.etat === '0' || equipment.etat === '') ? '' : equipment.etat,
'Site': equipment.siteName || '',
'Type Site': equipment.typeSite || '',
'Localité': equipment.localite || '',
'Client': equipment.client_name || ''
}));
const worksheet = XLSX.utils.json_to_sheet(dataToExport);
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, 'Équipements');
XLSX.writeFile(workbook, 'liste_equipements.xlsx');
});
importExcelBtn.addEventListener('click', function() {
importFileInput.click();
});
importFileInput.addEventListener('change', async function() {
if (this.files.length === 0) return;
const file = this.files[0];
const currentUser = JSON.parse(localStorage.getItem('currentUser'));
const username = currentUser ? currentUser.username : 'Technicien';
const formData = new FormData();
formData.append('file', file);
formData.append('username', username);
try {
importExcelBtn.textContent = 'Importation en cours...';
importExcelBtn.disabled = true;
const response = await fetch('api/import_equipements.php', {
method: 'POST',
body: formData
});
const data = await response.json();
if (data.success) {
alert(`Importation réussie : ${data.count} équipements ajoutés/mis à jour.`);
equipments = await fetchEquipments();
populateLocaliteFilter();
populateTypeSiteFilter();
renderEquipments(searchInput.value, localiteFilter.value, typeSiteFilter.value);
} else {
alert("Erreur lors de l'importation : " + data.message);
}
} catch (error) {
console.error("Erreur réseau lors de l'importation :", error);
alert("Erreur réseau lors de l'importation.");
} finally {
importExcelBtn.textContent = 'Importer depuis Excel';
importExcelBtn.disabled = false;
importFileInput.value = '';
}
}); // Closes importFileInput.addEventListener
}; // Closes DOMContentLoaded
</script>
</body>
</html>