682 lines
29 KiB
JavaScript
682 lines
29 KiB
JavaScript
// Linux BenchTools - Devices Two-Panel Layout
|
|
(function() {
|
|
'use strict';
|
|
|
|
// Use utilities from global scope directly - avoid redeclaration
|
|
const utils = window.BenchUtils;
|
|
const apiClient = window.BenchAPI;
|
|
|
|
let allDevices = [];
|
|
let selectedDeviceId = null;
|
|
let isEditing = false;
|
|
let currentDevice = null;
|
|
|
|
// Load devices
|
|
async function loadDevices() {
|
|
const listContainer = document.getElementById('deviceList');
|
|
|
|
try {
|
|
console.log('🔄 Loading devices from API...');
|
|
console.log('API URL:', apiClient.baseURL);
|
|
|
|
const data = await apiClient.getDevices({ page_size: 100 }); // Get all devices (max allowed)
|
|
|
|
console.log('✅ Devices loaded:', data);
|
|
|
|
allDevices = data.items || [];
|
|
|
|
if (allDevices.length === 0) {
|
|
listContainer.innerHTML = '<div style="padding: 1rem; text-align: center; color: var(--text-secondary);">📊<br>Aucun device</div>';
|
|
return;
|
|
}
|
|
|
|
// Sort by global_score descending
|
|
allDevices.sort((a, b) => {
|
|
const scoreA = a.last_benchmark?.global_score ?? -1;
|
|
const scoreB = b.last_benchmark?.global_score ?? -1;
|
|
return scoreB - scoreA;
|
|
});
|
|
|
|
console.log('📋 Rendering', allDevices.length, 'devices');
|
|
renderDeviceList();
|
|
|
|
// Auto-select first device if none selected
|
|
if (!selectedDeviceId && allDevices.length > 0) {
|
|
selectDevice(allDevices[0].id);
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('❌ Failed to load devices:', error);
|
|
console.error('Error details:', error.message);
|
|
listContainer.innerHTML = `
|
|
<div style="padding: 1rem; color: var(--color-danger); font-size: 0.85rem;">
|
|
<div style="font-weight: 600; margin-bottom: 0.5rem;">❌ Erreur</div>
|
|
<div>${error.message || 'Erreur de chargement'}</div>
|
|
<div style="margin-top: 0.5rem; font-size: 0.75rem;">
|
|
Backend: ${apiClient.baseURL}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
// Render device list (left panel)
|
|
function renderDeviceList() {
|
|
const listContainer = document.getElementById('deviceList');
|
|
|
|
listContainer.innerHTML = allDevices.map(device => {
|
|
const globalScore = device.last_benchmark?.global_score;
|
|
const isSelected = device.id === selectedDeviceId;
|
|
|
|
const scoreText = globalScore !== null && globalScore !== undefined
|
|
? Math.round(globalScore)
|
|
: 'N/A';
|
|
|
|
const scoreClass = globalScore !== null && globalScore !== undefined
|
|
? utils.getScoreBadgeClass(globalScore)
|
|
: 'badge';
|
|
|
|
return `
|
|
<div
|
|
class="device-list-item ${isSelected ? 'selected' : ''}"
|
|
onclick="selectDevice(${device.id})"
|
|
style="
|
|
padding: 0.75rem;
|
|
margin-bottom: 0.5rem;
|
|
background: ${isSelected ? 'var(--color-primary-alpha)' : 'var(--bg-secondary)'};
|
|
border: 1px solid ${isSelected ? 'var(--color-primary)' : 'var(--border-color)'};
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
"
|
|
onmouseover="if (!this.classList.contains('selected')) this.style.background='var(--bg-hover)'"
|
|
onmouseout="if (!this.classList.contains('selected')) this.style.background='var(--bg-secondary)'"
|
|
>
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem;">
|
|
<div style="font-weight: 600; font-size: 0.95rem; color: var(--text-primary);">
|
|
${utils.escapeHtml(device.hostname)}
|
|
</div>
|
|
<span class="${scoreClass}" style="font-size: 0.75rem; padding: 0.2rem 0.5rem;">
|
|
${scoreText}
|
|
</span>
|
|
</div>
|
|
${device.last_benchmark?.run_at ? `
|
|
<div style="font-size: 0.75rem; color: var(--text-secondary);">
|
|
⏱️ ${utils.formatRelativeTime(device.last_benchmark.run_at)}
|
|
</div>
|
|
` : '<div style="font-size: 0.75rem; color: var(--color-warning);">⚠️ Pas de benchmark</div>'}
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
}
|
|
|
|
// Select device and display details
|
|
async function selectDevice(deviceId) {
|
|
selectedDeviceId = deviceId;
|
|
renderDeviceList(); // Update selection in list
|
|
|
|
const detailsContainer = document.getElementById('deviceDetailsContainer');
|
|
detailsContainer.innerHTML = '<div class="loading">Chargement des détails...</div>';
|
|
|
|
try {
|
|
const device = await apiClient.getDevice(deviceId);
|
|
renderDeviceDetails(device);
|
|
} catch (error) {
|
|
console.error('Failed to load device details:', error);
|
|
utils.showError(detailsContainer, 'Impossible de charger les détails du device.');
|
|
}
|
|
}
|
|
|
|
// Toggle edit mode
|
|
function toggleEditMode() {
|
|
isEditing = !isEditing;
|
|
if (currentDevice) {
|
|
renderDeviceDetails(currentDevice);
|
|
}
|
|
}
|
|
|
|
// Save device changes
|
|
async function saveDevice() {
|
|
if (!currentDevice) return;
|
|
|
|
const description = document.getElementById('edit-description')?.value || '';
|
|
const location = document.getElementById('edit-location')?.value || '';
|
|
const owner = document.getElementById('edit-owner')?.value || '';
|
|
const assetTag = document.getElementById('edit-asset-tag')?.value || '';
|
|
const tags = document.getElementById('edit-tags')?.value || '';
|
|
|
|
try {
|
|
console.log('💾 Saving device changes...');
|
|
|
|
const updateData = {
|
|
description: description || null,
|
|
location: location || null,
|
|
owner: owner || null,
|
|
asset_tag: assetTag || null,
|
|
tags: tags || null
|
|
};
|
|
|
|
await apiClient.updateDevice(currentDevice.id, updateData);
|
|
|
|
console.log('✅ Device updated successfully');
|
|
|
|
// Reload device data
|
|
isEditing = false;
|
|
const updatedDevice = await apiClient.getDevice(currentDevice.id);
|
|
currentDevice = updatedDevice;
|
|
renderDeviceDetails(updatedDevice);
|
|
|
|
// Reload device list to reflect changes
|
|
await loadDevices();
|
|
|
|
} catch (error) {
|
|
console.error('❌ Failed to save device:', error);
|
|
alert('Erreur lors de la sauvegarde: ' + (error.message || 'Erreur inconnue'));
|
|
}
|
|
}
|
|
|
|
// Upload image for device
|
|
async function uploadImage() {
|
|
if (!currentDevice) return;
|
|
|
|
const input = document.createElement('input');
|
|
input.type = 'file';
|
|
input.accept = 'image/*';
|
|
|
|
input.onchange = async (e) => {
|
|
const file = e.target.files[0];
|
|
if (!file) return;
|
|
|
|
// Check file size (max 10MB)
|
|
if (file.size > 10 * 1024 * 1024) {
|
|
alert('L\'image est trop volumineuse (max 10MB)');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
console.log('📤 Uploading image:', file.name);
|
|
|
|
await apiClient.uploadDocument(currentDevice.id, file, 'image');
|
|
|
|
console.log('✅ Image uploaded successfully');
|
|
|
|
// Reload device data to show the new image
|
|
const updatedDevice = await apiClient.getDevice(currentDevice.id);
|
|
currentDevice = updatedDevice;
|
|
renderDeviceDetails(updatedDevice);
|
|
|
|
} catch (error) {
|
|
console.error('❌ Failed to upload image:', error);
|
|
alert('Erreur lors du chargement de l\'image: ' + (error.message || 'Erreur inconnue'));
|
|
}
|
|
};
|
|
|
|
input.click();
|
|
}
|
|
|
|
// Upload PDF for device
|
|
async function uploadPDF() {
|
|
if (!currentDevice) return;
|
|
|
|
const input = document.createElement('input');
|
|
input.type = 'file';
|
|
input.accept = 'application/pdf';
|
|
|
|
input.onchange = async (e) => {
|
|
const file = e.target.files[0];
|
|
if (!file) return;
|
|
|
|
// Check file size (max 50MB)
|
|
if (file.size > 50 * 1024 * 1024) {
|
|
alert('Le PDF est trop volumineux (max 50MB)');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
console.log('📤 Uploading PDF:', file.name);
|
|
|
|
await apiClient.uploadDocument(currentDevice.id, file, 'manual');
|
|
|
|
console.log('✅ PDF uploaded successfully');
|
|
|
|
// Reload device data to show the new PDF
|
|
const updatedDevice = await apiClient.getDevice(currentDevice.id);
|
|
currentDevice = updatedDevice;
|
|
renderDeviceDetails(updatedDevice);
|
|
|
|
} catch (error) {
|
|
console.error('❌ Failed to upload PDF:', error);
|
|
alert('Erreur lors du chargement du PDF: ' + (error.message || 'Erreur inconnue'));
|
|
}
|
|
};
|
|
|
|
input.click();
|
|
}
|
|
|
|
// Delete document
|
|
async function deleteDocument(docId) {
|
|
if (!currentDevice) return;
|
|
|
|
if (!confirm('Voulez-vous vraiment supprimer ce document ?')) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
console.log('🗑️ Deleting document:', docId);
|
|
|
|
await apiClient.deleteDocument(docId);
|
|
|
|
console.log('✅ Document deleted successfully');
|
|
|
|
// Reload device data
|
|
const updatedDevice = await apiClient.getDevice(currentDevice.id);
|
|
currentDevice = updatedDevice;
|
|
renderDeviceDetails(updatedDevice);
|
|
|
|
} catch (error) {
|
|
console.error('❌ Failed to delete document:', error);
|
|
alert('Erreur lors de la suppression: ' + (error.message || 'Erreur inconnue'));
|
|
}
|
|
}
|
|
|
|
// Helper: Render image documents
|
|
function renderImageDocuments(documents) {
|
|
if (!documents || !Array.isArray(documents)) {
|
|
return '<span>🖼️ Aucune image</span>';
|
|
}
|
|
|
|
const imageDoc = documents.find(doc => doc.doc_type === 'image');
|
|
|
|
if (!imageDoc) {
|
|
return '<span>🖼️ Aucune image</span>';
|
|
}
|
|
|
|
const downloadUrl = apiClient.getDocumentDownloadUrl(imageDoc.id);
|
|
|
|
return `
|
|
<div style="width: 100%; position: relative;">
|
|
<img src="${downloadUrl}" alt="Device image" style="max-width: 100%; max-height: 300px; border-radius: 6px; object-fit: contain;">
|
|
<div style="margin-top: 0.75rem; display: flex; justify-content: space-between; align-items: center;">
|
|
<div style="font-size: 0.85rem; color: var(--text-secondary);">
|
|
📎 ${utils.escapeHtml(imageDoc.filename)}
|
|
</div>
|
|
<button onclick="deleteDocument(${imageDoc.id})" class="btn btn-danger" style="padding: 0.3rem 0.6rem; font-size: 0.8rem;">🗑️ Supprimer</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// Helper: Render PDF documents
|
|
function renderPDFDocuments(documents) {
|
|
if (!documents || !Array.isArray(documents)) {
|
|
return '<span>📄 Aucun PDF</span>';
|
|
}
|
|
|
|
const pdfDocs = documents.filter(doc => doc.doc_type === 'manual');
|
|
|
|
if (pdfDocs.length === 0) {
|
|
return '<span>📄 Aucun PDF</span>';
|
|
}
|
|
|
|
return pdfDocs.map(doc => {
|
|
const downloadUrl = apiClient.getDocumentDownloadUrl(doc.id);
|
|
const uploadDate = new Date(doc.uploaded_at).toLocaleDateString('fr-FR');
|
|
|
|
return `
|
|
<div style="width: 100%; background: var(--bg-secondary); padding: 0.75rem; border-radius: 6px; margin-bottom: 0.5rem; border: 1px solid var(--border-color);">
|
|
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|
<div style="flex: 1;">
|
|
<div style="font-weight: 600; color: var(--text-primary); margin-bottom: 0.25rem;">
|
|
📄 ${utils.escapeHtml(doc.filename)}
|
|
</div>
|
|
<div style="font-size: 0.8rem; color: var(--text-secondary);">
|
|
Uploadé le ${uploadDate}
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; gap: 0.5rem;">
|
|
<a href="${downloadUrl}" download class="btn btn-primary" style="padding: 0.3rem 0.6rem; font-size: 0.8rem; text-decoration: none;">⬇️ Télécharger</a>
|
|
<button onclick="deleteDocument(${doc.id})" class="btn btn-danger" style="padding: 0.3rem 0.6rem; font-size: 0.8rem;">🗑️ Supprimer</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
}
|
|
|
|
// Render device details (right panel)
|
|
function renderDeviceDetails(device) {
|
|
currentDevice = device;
|
|
const detailsContainer = document.getElementById('deviceDetailsContainer');
|
|
const snapshot = device.last_hardware_snapshot;
|
|
const bench = device.last_benchmark;
|
|
|
|
// Hardware summary
|
|
const cpuModel = snapshot?.cpu_model || 'N/A';
|
|
const cpuCores = snapshot?.cpu_cores || '?';
|
|
const cpuThreads = snapshot?.cpu_threads || '?';
|
|
const ramTotalGB = Math.round((snapshot?.ram_total_mb || 0) / 1024);
|
|
const ramUsedMB = snapshot?.ram_used_mb || 0;
|
|
const ramFreeMB = snapshot?.ram_free_mb || 0;
|
|
const ramSharedMB = snapshot?.ram_shared_mb || 0;
|
|
const gpuSummary = snapshot?.gpu_summary || 'N/A';
|
|
const storage = snapshot?.storage_summary || 'N/A';
|
|
const osName = snapshot?.os_name || 'N/A';
|
|
const kernelVersion = snapshot?.kernel_version || 'N/A';
|
|
|
|
// RAM usage calculation
|
|
let ramUsageHtml = `${ramTotalGB} GB`;
|
|
if (ramUsedMB > 0 || ramFreeMB > 0) {
|
|
const usagePercent = ramTotalGB > 0 ? Math.round((ramUsedMB / (snapshot.ram_total_mb || 1)) * 100) : 0;
|
|
ramUsageHtml = `
|
|
${ramTotalGB} GB (${usagePercent}% utilisé)<br>
|
|
<small style="color: var(--text-secondary);">
|
|
Utilisée: ${Math.round(ramUsedMB / 1024)}GB •
|
|
Libre: ${Math.round(ramFreeMB / 1024)}GB${ramSharedMB > 0 ? ` • Partagée: ${Math.round(ramSharedMB / 1024)}GB` : ''}
|
|
</small>
|
|
`;
|
|
}
|
|
|
|
// Benchmark scores
|
|
const globalScore = bench?.global_score;
|
|
const cpuScore = bench?.cpu_score;
|
|
const memScore = bench?.memory_score;
|
|
const diskScore = bench?.disk_score;
|
|
const netScore = bench?.network_score;
|
|
const gpuScore = bench?.gpu_score;
|
|
|
|
const globalScoreHtml = globalScore !== null && globalScore !== undefined
|
|
? `<span class="${utils.getScoreBadgeClass(globalScore)}" style="font-size: 1.5rem; padding: 0.5rem 1rem;">${utils.getScoreBadgeText(globalScore)}</span>`
|
|
: '<span class="badge">N/A</span>';
|
|
|
|
// Network details
|
|
let networkHtml = '';
|
|
if (snapshot?.network_interfaces_json) {
|
|
try {
|
|
const interfaces = JSON.parse(snapshot.network_interfaces_json);
|
|
networkHtml = interfaces.map(iface => {
|
|
const typeIcon = iface.type === 'ethernet' ? '🔌' : '📡';
|
|
const wolBadge = iface.wake_on_lan === true
|
|
? '<span class="badge badge-success" style="margin-left: 0.5rem;">WoL ✓</span>'
|
|
: '<span class="badge badge-muted" style="margin-left: 0.5rem;">WoL ✗</span>';
|
|
|
|
return `
|
|
<div style="padding: 0.75rem; background: var(--bg-secondary); border-radius: 6px; margin-bottom: 0.5rem;">
|
|
<div style="font-weight: 600; margin-bottom: 0.5rem;">
|
|
${typeIcon} ${utils.escapeHtml(iface.name)} (${iface.type})${wolBadge}
|
|
</div>
|
|
<div style="font-size: 0.9rem; color: var(--text-secondary);">
|
|
IP: ${iface.ip || 'N/A'} • MAC: ${iface.mac || 'N/A'}<br>
|
|
Vitesse: ${iface.speed_mbps ? iface.speed_mbps + ' Mbps' : 'N/A'}
|
|
${iface.driver ? ` • Driver: ${iface.driver}` : ''}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
} catch (e) {
|
|
networkHtml = '<p style="color: var(--text-secondary);">Erreur de parsing JSON</p>';
|
|
}
|
|
}
|
|
|
|
// Network benchmark results (iperf3)
|
|
let netBenchHtml = '';
|
|
if (bench?.network_results_json) {
|
|
try {
|
|
const netResults = JSON.parse(bench.network_results_json);
|
|
netBenchHtml = `
|
|
<div style="background: var(--bg-secondary); padding: 1rem; border-radius: 6px; margin-top: 1rem;">
|
|
<div style="font-weight: 600; margin-bottom: 0.75rem;">📈 Résultats Benchmark Réseau (iperf3)</div>
|
|
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; text-align: center;">
|
|
<div>
|
|
<div style="color: var(--color-success); font-size: 1.5rem; font-weight: 600;">
|
|
↑ ${netResults.upload_mbps?.toFixed(2) || 'N/A'}
|
|
</div>
|
|
<div style="font-size: 0.85rem; color: var(--text-secondary);">Upload Mbps</div>
|
|
</div>
|
|
<div>
|
|
<div style="color: var(--color-info); font-size: 1.5rem; font-weight: 600;">
|
|
↓ ${netResults.download_mbps?.toFixed(2) || 'N/A'}
|
|
</div>
|
|
<div style="font-size: 0.85rem; color: var(--text-secondary);">Download Mbps</div>
|
|
</div>
|
|
<div>
|
|
<div style="color: var(--color-warning); font-size: 1.5rem; font-weight: 600;">
|
|
${netResults.ping_ms?.toFixed(2) || 'N/A'}
|
|
</div>
|
|
<div style="font-size: 0.85rem; color: var(--text-secondary);">Ping ms</div>
|
|
</div>
|
|
<div>
|
|
<div style="color: var(--color-primary); font-size: 1.5rem; font-weight: 600;">
|
|
${netResults.score?.toFixed(2) || 'N/A'}
|
|
</div>
|
|
<div style="font-size: 0.85rem; color: var(--text-secondary);">Score</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
} catch (e) {
|
|
console.error('Error parsing network results:', e);
|
|
}
|
|
}
|
|
|
|
detailsContainer.innerHTML = `
|
|
<!-- Device Header with Action Buttons -->
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--color-primary);">
|
|
<div style="flex: 1;">
|
|
<h2 style="margin: 0; font-size: 1.5rem; color: var(--text-primary);">${utils.escapeHtml(device.hostname)}</h2>
|
|
${isEditing ? `
|
|
<textarea id="edit-description" style="width: 100%; margin-top: 0.5rem; padding: 0.5rem; border: 1px solid var(--border-color); border-radius: 4px; background: var(--bg-secondary); color: var(--text-primary); font-family: inherit; resize: vertical;" rows="2" placeholder="Description du device...">${device.description || ''}</textarea>
|
|
` : `
|
|
<p style="color: var(--text-secondary); margin: 0.25rem 0 0 0; font-size: 0.9rem;">
|
|
${utils.escapeHtml(device.description || 'Aucune description')}
|
|
</p>
|
|
`}
|
|
</div>
|
|
<div style="display: flex; gap: 0.75rem; align-items: center; margin-left: 1rem;">
|
|
${globalScoreHtml}
|
|
${!isEditing ? `
|
|
<button id="btn-edit" class="btn btn-secondary" style="padding: 0.5rem 1rem; font-size: 0.9rem;">✏️ Edit</button>
|
|
` : `
|
|
<button id="btn-cancel" class="btn btn-secondary" style="padding: 0.5rem 1rem; font-size: 0.9rem;">✖️ Annuler</button>
|
|
<button id="btn-save" class="btn btn-primary" style="padding: 0.5rem 1rem; font-size: 0.9rem;">💾 Save</button>
|
|
`}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form-Style Layout -->
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;">
|
|
|
|
<!-- Left Column: Caractéristiques -->
|
|
<div style="background: var(--bg-secondary); padding: 1.5rem; border-radius: 8px; border: 1px solid var(--border-color);">
|
|
<h3 style="margin: 0 0 1rem 0; font-size: 1.1rem; color: var(--color-primary); border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem;">Caractéristiques</h3>
|
|
|
|
${createFormRow('CPU', utils.escapeHtml(cpuModel))}
|
|
${createFormRow('Cores / Threads', `${cpuCores} / ${cpuThreads}`)}
|
|
${createFormRow('RAM Total', `${ramTotalGB} GB`)}
|
|
${createFormRow('RAM Utilisée', ramUsedMB > 0 ? `${Math.round(ramUsedMB / 1024)} GB (${Math.round((ramUsedMB / (snapshot.ram_total_mb || 1)) * 100)}%)` : 'N/A')}
|
|
${createFormRow('RAM Libre', ramFreeMB > 0 ? `${Math.round(ramFreeMB / 1024)} GB` : 'N/A')}
|
|
${ramSharedMB > 0 ? createFormRow('RAM Partagée', `${Math.round(ramSharedMB / 1024)} GB`) : ''}
|
|
${createFormRow('GPU', utils.escapeHtml(gpuSummary))}
|
|
${createFormRow('Storage', utils.escapeHtml(storage))}
|
|
${createFormRow('OS', utils.escapeHtml(osName))}
|
|
${createFormRow('Kernel', utils.escapeHtml(kernelVersion))}
|
|
${isEditing ? `
|
|
<div style="display: grid; grid-template-columns: 140px 1fr; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border-color);">
|
|
<div style="font-weight: 500; color: var(--text-secondary); font-size: 0.9rem;">Location</div>
|
|
<input type="text" id="edit-location" value="${device.location || ''}" style="padding: 0.4rem; border: 1px solid var(--border-color); border-radius: 4px; background: var(--bg-primary); color: var(--text-primary); font-size: 0.9rem;" placeholder="Bureau, DataCenter, etc.">
|
|
</div>
|
|
<div style="display: grid; grid-template-columns: 140px 1fr; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border-color);">
|
|
<div style="font-weight: 500; color: var(--text-secondary); font-size: 0.9rem;">Propriétaire</div>
|
|
<input type="text" id="edit-owner" value="${device.owner || ''}" style="padding: 0.4rem; border: 1px solid var(--border-color); border-radius: 4px; background: var(--bg-primary); color: var(--text-primary); font-size: 0.9rem;" placeholder="Nom du propriétaire">
|
|
</div>
|
|
<div style="display: grid; grid-template-columns: 140px 1fr; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border-color);">
|
|
<div style="font-weight: 500; color: var(--text-secondary); font-size: 0.9rem;">Asset Tag</div>
|
|
<input type="text" id="edit-asset-tag" value="${device.asset_tag || ''}" style="padding: 0.4rem; border: 1px solid var(--border-color); border-radius: 4px; background: var(--bg-primary); color: var(--text-primary); font-size: 0.9rem;" placeholder="Numéro d'inventaire">
|
|
</div>
|
|
<div style="display: grid; grid-template-columns: 140px 1fr; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border-color);">
|
|
<div style="font-weight: 500; color: var(--text-secondary); font-size: 0.9rem;">Tags</div>
|
|
<input type="text" id="edit-tags" value="${device.tags || ''}" style="padding: 0.4rem; border: 1px solid var(--border-color); border-radius: 4px; background: var(--bg-primary); color: var(--text-primary); font-size: 0.9rem;" placeholder="production, test, dev (séparés par des virgules)">
|
|
</div>
|
|
` : `
|
|
${device.location ? createFormRow('Location', utils.escapeHtml(device.location)) : ''}
|
|
${device.owner ? createFormRow('Propriétaire', utils.escapeHtml(device.owner)) : ''}
|
|
${device.asset_tag ? createFormRow('Asset Tag', utils.escapeHtml(device.asset_tag)) : ''}
|
|
${device.tags ? createFormRow('Tags', utils.escapeHtml(device.tags)) : ''}
|
|
`}
|
|
${createFormRow('Créé le', new Date(device.created_at).toLocaleDateString('fr-FR', { year: 'numeric', month: 'long', day: 'numeric' }))}
|
|
</div>
|
|
|
|
<!-- Right Column: Image & PDF Sections -->
|
|
<div style="display: flex; flex-direction: column; gap: 1.5rem;">
|
|
|
|
<!-- Image Section -->
|
|
<div style="background: var(--bg-secondary); padding: 1.5rem; border-radius: 8px; border: 1px solid var(--border-color);">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
|
|
<h3 style="margin: 0; font-size: 1.1rem; color: var(--color-primary);">Image</h3>
|
|
<button id="btn-upload-image" class="btn btn-secondary" style="padding: 0.4rem 0.8rem; font-size: 0.85rem;">📤 Upload</button>
|
|
</div>
|
|
<div id="image-container" style="background: var(--bg-primary); border: 2px dashed var(--border-color); border-radius: 6px; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-secondary); padding: 1rem;">
|
|
${renderImageDocuments(device.documents)}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PDF Section -->
|
|
<div style="background: var(--bg-secondary); padding: 1.5rem; border-radius: 8px; border: 1px solid var(--border-color);">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
|
|
<h3 style="margin: 0; font-size: 1.1rem; color: var(--color-primary);">Notice PDF</h3>
|
|
<button id="btn-upload-pdf" class="btn btn-secondary" style="padding: 0.4rem 0.8rem; font-size: 0.85rem;">📤 Upload</button>
|
|
</div>
|
|
<div id="pdf-container" style="background: var(--bg-primary); border: 2px dashed var(--border-color); border-radius: 6px; min-height: 180px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; color: var(--text-secondary); padding: 1rem;">
|
|
${renderPDFDocuments(device.documents)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Benchmark Scores Section -->
|
|
${bench ? `
|
|
<div style="margin-top: 1.5rem; background: var(--bg-secondary); padding: 1.5rem; border-radius: 8px; border: 1px solid var(--border-color);">
|
|
<h3 style="margin: 0 0 1rem 0; font-size: 1.1rem; color: var(--color-primary); border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem;">📊 Benchmark Scores</h3>
|
|
<div style="display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-bottom: 1rem;">
|
|
${createFormRow('CPU Score', cpuScore !== null && cpuScore !== undefined ? Math.round(cpuScore) : 'N/A', true)}
|
|
${createFormRow('RAM Score', memScore !== null && memScore !== undefined ? Math.round(memScore) : 'N/A', true)}
|
|
${createFormRow('Disk Score', diskScore !== null && diskScore !== undefined ? Math.round(diskScore) : 'N/A', true)}
|
|
${createFormRow('Network Score', netScore !== null && netScore !== undefined ? Math.round(netScore) : 'N/A', true)}
|
|
${createFormRow('GPU Score', gpuScore !== null && gpuScore !== undefined ? Math.round(gpuScore) : 'N/A', true)}
|
|
</div>
|
|
<div style="padding: 0.75rem; background: var(--bg-primary); border-radius: 6px; text-align: center; color: var(--text-secondary); font-size: 0.9rem;">
|
|
⏱️ Dernier benchmark: ${bench.run_at ? utils.formatRelativeTime(bench.run_at) : 'N/A'}
|
|
</div>
|
|
</div>
|
|
` : ''}
|
|
|
|
<!-- Network Details Section -->
|
|
${networkHtml || netBenchHtml ? `
|
|
<div style="margin-top: 1.5rem; background: var(--bg-secondary); padding: 1.5rem; border-radius: 8px; border: 1px solid var(--border-color);">
|
|
<h3 style="margin: 0 0 1rem 0; font-size: 1.1rem; color: var(--color-primary); border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem;">🌐 Détails Réseau</h3>
|
|
${networkHtml}
|
|
${netBenchHtml}
|
|
</div>
|
|
` : ''}
|
|
|
|
<!-- Full Details Link -->
|
|
<div style="margin-top: 1.5rem; text-align: center;">
|
|
<a href="device_detail.html?id=${device.id}" class="btn btn-primary" style="text-decoration: none; display: inline-block; padding: 0.75rem 2rem;">
|
|
📄 Voir la page complète avec tous les détails
|
|
</a>
|
|
</div>
|
|
`;
|
|
|
|
// Attach event listeners for edit/save/upload buttons
|
|
setTimeout(() => {
|
|
const btnEdit = document.getElementById('btn-edit');
|
|
const btnSave = document.getElementById('btn-save');
|
|
const btnCancel = document.getElementById('btn-cancel');
|
|
const btnUploadImage = document.getElementById('btn-upload-image');
|
|
const btnUploadPDF = document.getElementById('btn-upload-pdf');
|
|
|
|
if (btnEdit) {
|
|
btnEdit.addEventListener('click', toggleEditMode);
|
|
}
|
|
|
|
if (btnSave) {
|
|
btnSave.addEventListener('click', saveDevice);
|
|
}
|
|
|
|
if (btnCancel) {
|
|
btnCancel.addEventListener('click', () => {
|
|
isEditing = false;
|
|
renderDeviceDetails(currentDevice);
|
|
});
|
|
}
|
|
|
|
if (btnUploadImage) {
|
|
btnUploadImage.addEventListener('click', uploadImage);
|
|
}
|
|
|
|
if (btnUploadPDF) {
|
|
btnUploadPDF.addEventListener('click', uploadPDF);
|
|
}
|
|
}, 0);
|
|
}
|
|
|
|
// Create score card for display
|
|
function createScoreCard(score, label, icon) {
|
|
const scoreValue = score !== null && score !== undefined ? Math.round(score) : 'N/A';
|
|
const badgeClass = score !== null && score !== undefined
|
|
? utils.getScoreBadgeClass(score)
|
|
: 'badge';
|
|
|
|
return `
|
|
<div style="background: var(--bg-secondary); padding: 1rem; border-radius: 6px; text-align: center;">
|
|
<div style="font-size: 1.5rem; margin-bottom: 0.25rem;">${icon}</div>
|
|
<div style="font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 0.5rem;">${label}</div>
|
|
<div class="${badgeClass}" style="font-size: 1.25rem; padding: 0.25rem 0.75rem; display: inline-block;">
|
|
${scoreValue}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// Create info card
|
|
function createInfoCard(label, value) {
|
|
return `
|
|
<div style="background: var(--bg-secondary); padding: 1rem; border-radius: 6px;">
|
|
<div style="font-weight: 600; margin-bottom: 0.5rem; color: var(--text-primary);">${label}</div>
|
|
<div style="color: var(--text-secondary);">${value}</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// Create form row (label: value)
|
|
function createFormRow(label, value, inline = false) {
|
|
if (inline) {
|
|
return `
|
|
<div style="text-align: center;">
|
|
<div style="font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.25rem;">${label}</div>
|
|
<div style="font-weight: 600; color: var(--text-primary); font-size: 1.1rem;">${value}</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
return `
|
|
<div style="display: grid; grid-template-columns: 140px 1fr; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border-color);">
|
|
<div style="font-weight: 500; color: var(--text-secondary); font-size: 0.9rem;">${label}</div>
|
|
<div style="color: var(--text-primary); font-size: 0.9rem;">${value}</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// Initialize devices page
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
loadDevices();
|
|
|
|
// Refresh every 30 seconds
|
|
setInterval(loadDevices, 30000);
|
|
});
|
|
|
|
// Make functions available globally for onclick handlers
|
|
window.selectDevice = selectDevice;
|
|
window.deleteDocument = deleteDocument;
|
|
|
|
})(); // End of IIFE
|