Files
serv_benchmark/frontend/peripherals.html
Gilles Soulier c67befc549 addon
2026-01-05 16:08:01 +01:00

598 lines
33 KiB
HTML
Executable File

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Périphériques - Linux BenchTools</title>
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<link rel="stylesheet" href="css/monokai.css">
<link rel="stylesheet" href="css/peripherals.css">
<link rel="stylesheet" href="fonts/fontawesome/all.min.css">
</head>
<body>
<div class="container">
<!-- Header -->
<header>
<h1><i class="fas fa-microchip"></i> Périphériques</h1>
<nav>
<a href="index.html"><i class="fas fa-home"></i> Accueil</a>
<a href="dashboard.html"><i class="fas fa-chart-line"></i> Benchmarks</a>
<a href="peripherals.html" class="active"><i class="fas fa-microchip"></i> Périphériques</a>
<a href="locations.html"><i class="fas fa-map-marker-alt"></i> Localisations</a>
<a href="loans.html"><i class="fas fa-handshake"></i> Prêts</a>
<a href="settings.html"><i class="fas fa-cog"></i> Paramètres</a>
</nav>
</header>
<!-- Statistics Cards -->
<div class="stats-grid">
<div class="stat-card">
<div class="stat-icon"><i class="fas fa-microchip"></i></div>
<div class="stat-content">
<div class="stat-value" id="stat-total">-</div>
<div class="stat-label">Total périphériques</div>
</div>
</div>
<div class="stat-card">
<div class="stat-icon"><i class="fas fa-check-circle"></i></div>
<div class="stat-content">
<div class="stat-value" id="stat-disponible">-</div>
<div class="stat-label">Disponibles</div>
</div>
</div>
<div class="stat-card">
<div class="stat-icon"><i class="fas fa-handshake"></i></div>
<div class="stat-content">
<div class="stat-value" id="stat-pret">-</div>
<div class="stat-label">En prêt</div>
</div>
</div>
<div class="stat-card">
<div class="stat-icon"><i class="fas fa-exclamation-triangle"></i></div>
<div class="stat-content">
<div class="stat-value" id="stat-low-stock">-</div>
<div class="stat-label">Stock faible</div>
</div>
</div>
</div>
<!-- Toolbar -->
<div class="toolbar">
<div class="toolbar-left">
<button class="btn btn-primary" onclick="showAddModal()">
<i class="fas fa-plus"></i> Ajouter un périphérique
</button>
<button class="btn btn-secondary" onclick="showImportUSBModal()">
<i class="fab fa-usb"></i> Importer USB (lsusb)
</button>
<button class="btn btn-secondary" onclick="showImportUSBStructuredModal()">
<i class="fas fa-info-circle"></i> Importer USB (Info)
</button>
<button class="btn btn-secondary" onclick="showImportMDModal()">
<i class="fas fa-file-import"></i> Importer .md
</button>
</div>
<div class="toolbar-right">
<div class="search-box">
<i class="fas fa-search"></i>
<input type="text" id="search" placeholder="Rechercher..." onkeyup="searchPeripherals()">
</div>
<select id="filter-type" onchange="filterPeripherals()">
<option value="">Tous les types</option>
</select>
<select id="filter-location" onchange="filterPeripherals()">
<option value="">Toutes les localisations</option>
</select>
<select id="filter-etat" onchange="filterPeripherals()">
<option value="">Tous les états</option>
<option value="Neuf">Neuf</option>
<option value="Bon">Bon</option>
<option value="Usagé">Usagé</option>
<option value="Défectueux">Défectueux</option>
<option value="Retiré">Retiré</option>
</select>
</div>
</div>
<!-- Peripherals Table -->
<div class="table-container">
<table id="peripherals-table">
<thead>
<tr>
<th>Photo</th>
<th onclick="sortTable('nom')">Nom <i class="fas fa-sort"></i></th>
<th onclick="sortTable('type_principal')">Type <i class="fas fa-sort"></i></th>
<th onclick="sortTable('marque')">Marque <i class="fas fa-sort"></i></th>
<th onclick="sortTable('modele')">Modèle <i class="fas fa-sort"></i></th>
<th onclick="sortTable('etat')">État <i class="fas fa-sort"></i></th>
<th onclick="sortTable('rating')">Note <i class="fas fa-sort"></i></th>
<th onclick="sortTable('quantite_disponible')">Stock <i class="fas fa-sort"></i></th>
<th onclick="sortTable('prix')">Prix <i class="fas fa-sort"></i></th>
<th>Actions</th>
</tr>
</thead>
<tbody id="peripherals-tbody">
<tr>
<td colspan="10" class="loading">
<i class="fas fa-spinner fa-spin"></i> Chargement...
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination -->
<div class="pagination">
<button class="btn btn-secondary" onclick="previousPage()" id="btn-prev">
<i class="fas fa-chevron-left"></i> Précédent
</button>
<span id="pagination-info">Page 1 / 1</span>
<button class="btn btn-secondary" onclick="nextPage()" id="btn-next">
Suivant <i class="fas fa-chevron-right"></i>
</button>
</div>
</div>
<!-- Add Peripheral Modal -->
<div id="modal-add" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2><i class="fas fa-plus"></i> Ajouter un périphérique</h2>
<span class="close" onclick="closeModal('modal-add')">&times;</span>
</div>
<div class="modal-body">
<form id="form-add-peripheral" onsubmit="addPeripheral(event)">
<div class="form-grid">
<!-- Identification -->
<div class="form-section">
<h3>Identification</h3>
<div class="form-group">
<label for="nom">Nom *</label>
<input type="text" id="nom" name="nom" required>
</div>
<div class="form-group">
<label for="type_principal">Type principal *</label>
<select id="type_principal" name="type_principal" required onchange="loadPeripheralSubtypes()">
<option value="">Sélectionner...</option>
</select>
</div>
<div class="form-group">
<label for="sous_type">Sous-type</label>
<select id="sous_type" name="sous_type">
<option value="">Sélectionner...</option>
</select>
</div>
<div class="form-group">
<label for="marque">Marque</label>
<input type="text" id="marque" name="marque">
</div>
<div class="form-group">
<label for="modele">Modèle</label>
<input type="text" id="modele" name="modele">
</div>
<div class="form-group">
<label for="usb_device_id">
Device ID
<span class="help-text-inline">(idVendor:idProduct)</span>
</label>
<input type="text" id="usb_device_id" name="usb_device_id" placeholder="1d6b:0003">
</div>
<div class="form-group">
<label for="fabricant">
Fabricant
<span class="help-text-inline">(iManufacturer)</span>
</label>
<input type="text" id="fabricant" name="fabricant">
</div>
<div class="form-group">
<label for="produit">
Produit
<span class="help-text-inline">(iProduct)</span>
</label>
<input type="text" id="produit" name="produit">
</div>
<div class="form-group">
<label for="numero_serie">Numéro de série</label>
<input type="text" id="numero_serie" name="numero_serie">
</div>
</div>
<!-- Achat -->
<div class="form-section">
<h3>Achat</h3>
<div class="form-group">
<label for="boutique">Boutique</label>
<select id="boutique" name="boutique">
<option value="">Non définie</option>
</select>
</div>
<div class="form-group">
<label for="date_achat">Date d'achat</label>
<input type="date" id="date_achat" name="date_achat">
</div>
<div class="form-group">
<label for="prix">Prix</label>
<input type="number" id="prix" name="prix" step="0.01" min="0">
</div>
<div class="form-group">
<label for="garantie_duree_mois">Garantie (mois)</label>
<input type="number" id="garantie_duree_mois" name="garantie_duree_mois" min="0">
</div>
</div>
<!-- État et localisation -->
<div class="form-section">
<h3>État et localisation</h3>
<div class="form-group">
<label for="utilisation">Utilisation</label>
<select id="utilisation" name="utilisation">
<option value="non_utilise">Non utilisé (stockage)</option>
<option value="utilise">Utilisé (hôte)</option>
</select>
</div>
<div class="form-group">
<label for="etat">État</label>
<select id="etat" name="etat">
<option value="Neuf">Neuf</option>
<option value="Bon">Bon</option>
<option value="Usagé">Usagé</option>
<option value="Défectueux">Défectueux</option>
<option value="Retiré">Retiré</option>
</select>
</div>
<div class="form-group">
<label>Note</label>
<div class="star-rating">
<input type="hidden" id="rating" name="rating" value="0">
<i class="fas fa-star" data-rating="1"></i>
<i class="fas fa-star" data-rating="2"></i>
<i class="fas fa-star" data-rating="3"></i>
<i class="fas fa-star" data-rating="4"></i>
<i class="fas fa-star" data-rating="5"></i>
</div>
</div>
<div class="form-group" id="group-connecte_a">
<label for="connecte_a">Hôte</label>
<select id="connecte_a" name="connecte_a">
<option value="">Non défini</option>
</select>
</div>
<div class="form-group" id="group-location_id">
<label for="location_id">Localisation</label>
<select id="location_id" name="location_id">
<option value="">Non définie</option>
</select>
</div>
<div class="form-group" id="group-stockage_location">
<label for="stockage_location">Stockage</label>
<select id="stockage_location" name="stockage_location">
<option value="">Non défini</option>
</select>
</div>
<div class="form-group">
<label for="quantite_totale">Quantité totale</label>
<input type="number" id="quantite_totale" name="quantite_totale" min="0" value="1">
</div>
<div class="form-group">
<label for="quantite_disponible">Quantité disponible</label>
<input type="number" id="quantite_disponible" name="quantite_disponible" min="0" value="1">
</div>
</div>
<!-- Photo (optionnelle) -->
<div class="form-section full-width">
<h3>Photo (optionnelle)</h3>
<div class="form-group">
<label for="photo-file-add">Fichier image</label>
<input type="file" id="photo-file-add" name="photo_file" accept="image/*">
</div>
<div class="form-group">
<label for="photo-url-add">Copier image depuis URL</label>
<input type="url" id="photo-url-add" name="photo_url" placeholder="https://...">
</div>
<div class="form-group">
<div class="image-preview" id="photo-url-preview-wrap" style="display:none;">
<img id="photo-url-preview" alt="Prévisualisation URL">
</div>
</div>
<div class="form-group">
<label for="photo-description-add">Description</label>
<input type="text" id="photo-description-add" name="photo_description">
</div>
<div class="form-group">
<label>
<input type="checkbox" id="photo-primary-add" name="photo_primary">
Photo principale
</label>
<span class="help-text-inline">
<i class="fas fa-info-circle"></i>
Cette photo sera utilisée comme vignette de présentation.
</span>
</div>
<div class="form-group">
<button type="button" class="btn btn-secondary" id="btn-photo-url-add" onclick="submitPhotoUrlAdd()" disabled>
<i class="fas fa-link"></i> Importer URL
</button>
</div>
</div>
<!-- Informations USB Détaillées -->
<div class="form-section full-width" id="usb-details-section" style="display: none;">
<h3>Informations USB Détaillées</h3>
<div class="usb-details-grid">
<div class="form-group">
<label for="usb_vendor_id">
Vendor ID
<span class="help-text-inline">(idVendor)</span>
</label>
<input type="text" id="usb_vendor_id" readonly>
</div>
<div class="form-group">
<label for="usb_product_id">
Product ID
<span class="help-text-inline">(idProduct)</span>
</label>
<input type="text" id="usb_product_id" readonly>
</div>
<div class="form-group">
<label for="usb_fabricant">
Fabricant
<span class="help-text-inline">(iManufacturer)</span>
</label>
<input type="text" id="usb_fabricant" readonly>
</div>
<div class="form-group">
<label for="usb_type">
Type USB Réel
<span class="help-text-inline">(basé sur vitesse négociée)</span>
</label>
<input type="text" id="usb_type" readonly>
</div>
<div class="form-group">
<label for="usb_version_declared">
Version USB Déclarée
<span class="help-text-inline">(bcdUSB)</span>
</label>
<input type="text" id="usb_version_declared" readonly>
</div>
<div class="form-group">
<label for="usb_negotiated_speed">
Vitesse Négociée
</label>
<input type="text" id="usb_negotiated_speed" readonly>
</div>
<div class="form-group">
<label for="usb_max_power">
Puissance Max
<span class="help-text-inline">(MaxPower)</span>
</label>
<input type="text" id="usb_max_power" readonly>
</div>
<div class="form-group">
<label for="usb_power_mode">Mode Alimentation</label>
<input type="text" id="usb_power_mode" readonly>
</div>
<div class="form-group">
<label for="usb_power_sufficient">
Alimentation Suffisante
</label>
<input type="text" id="usb_power_sufficient" readonly>
</div>
<div class="form-group">
<label for="usb_requires_firmware">
Firmware Requis
<span class="help-text-inline">(classe 255)</span>
</label>
<input type="text" id="usb_requires_firmware" readonly>
</div>
<div class="form-group">
<label for="usb_device_class">
Device Class
<span class="help-text-inline">(bDeviceClass)</span>
</label>
<input type="text" id="usb_device_class" readonly>
</div>
<div class="form-group">
<label for="usb_interface_classes">
Interface Classes
<span class="help-text-inline">(bInterfaceClass - normative)</span>
</label>
<input type="text" id="usb_interface_classes" readonly>
</div>
</div>
</div>
<!-- Documentation technique -->
<div class="form-section full-width">
<h3>Documentation technique</h3>
<div class="form-group">
<label for="synthese">
Synthèse
<span class="help-text-inline">(Markdown - Spécifications complètes)</span>
</label>
<textarea id="synthese" name="synthese" rows="5" placeholder="Synthèse complète du périphérique (markdown)..."></textarea>
</div>
<div class="form-group">
<label for="cli_yaml">
CLI / Données structurées
<span class="help-text-inline">(YAML)</span>
</label>
<textarea id="cli_yaml" name="cli_yaml" rows="6" placeholder="# Données USB/Système au format YAML&#10;identification:&#10; vendor_id: 0x0781&#10; product_id: 0x55ab"></textarea>
</div>
<div class="form-group">
<label for="cli_raw">
CLI / Rapport système
<span class="help-text-inline">(Markdown - sudo lsusb -v, lshw, etc.)</span>
</label>
<textarea id="cli_raw" name="cli_raw" rows="6" placeholder="# Sortie sudo lsusb -v&#10;&#10;```&#10;Bus 002 Device 003: ID 0781:55ab...&#10;```"></textarea>
</div>
<div class="form-group">
<label for="specifications">
Spécifications
<span class="help-text-inline">(Markdown - contenu brut importé depuis fichier .md)</span>
</label>
<textarea id="specifications" name="specifications" rows="8" placeholder="# Spécifications techniques&#10;&#10;## Caractéristiques&#10;- Capacité : 256 GB&#10;- Vitesse lecture : 550 MB/s&#10;- Interface : USB 3.2 Gen 2"></textarea>
</div>
<div class="form-group">
<label for="notes">
Notes
<span class="help-text-inline">(Markdown - notes libres)</span>
</label>
<textarea id="notes" name="notes" rows="4" placeholder="# Notes&#10;&#10;- Acheté le 2024-01-15&#10;- Garantie jusqu'au 2027-01-15"></textarea>
</div>
</div>
</div>
<div class="form-actions">
<button type="button" class="btn btn-secondary" onclick="closeModal('modal-add')">Annuler</button>
<button type="submit" class="btn btn-primary">
<i class="fas fa-save"></i> Enregistrer
</button>
</div>
</form>
</div>
</div>
</div>
<!-- Import USB Modal -->
<div id="modal-import-usb" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2><i class="fab fa-usb"></i> Importer depuis lsusb</h2>
<span class="close" onclick="closeModal('modal-import-usb')">&times;</span>
</div>
<div class="modal-body">
<!-- Step 1: Instructions + Paste CLI output -->
<div id="usb-import-step-1">
<div class="import-instructions">
<h3><i class="fas fa-terminal"></i> Ligne de commande</h3>
<div class="command-box">
<code id="usb-command">sudo lsusb -v</code>
<button type="button" class="btn-copy" id="btn-copy-usb" onclick="copyUSBCommand()" title="Copier la commande">
<i class="fas fa-copy"></i>
<span class="tooltip-copied">Copié !</span>
</button>
</div>
<p class="help-text">
<i class="fas fa-info-circle"></i>
Exécutez cette commande dans un terminal, puis copiez-collez le résultat complet ci-dessous
</p>
</div>
<form id="form-detect-usb" onsubmit="detectUSBDevices(event)">
<div class="form-group">
<label for="lsusb-output">Sortie de la commande</label>
<textarea id="lsusb-output" name="lsusb_output" rows="12" required
placeholder="Collez ici la sortie complète de 'sudo lsusb -v'..."></textarea>
</div>
<div class="form-actions">
<button type="button" class="btn btn-secondary" onclick="closeModal('modal-import-usb')">
<i class="fas fa-times"></i> Annuler
</button>
<button type="submit" class="btn btn-primary">
<i class="fas fa-search"></i> Importer
</button>
</div>
</form>
</div>
<!-- Step 2: Select device from list -->
<div id="usb-import-step-2" style="display: none;">
<div class="devices-header">
<h3><i class="fas fa-list"></i> Périphériques USB détectés</h3>
<p class="help-text">
Sélectionnez le périphérique que vous souhaitez importer
</p>
</div>
<div class="form-group">
<div id="usb-devices-list" class="usb-devices-list">
<!-- Devices will be inserted here -->
</div>
</div>
<div class="form-actions">
<button type="button" class="btn btn-secondary" onclick="backToUSBStep1()">
<i class="fas fa-arrow-left"></i> Retour
</button>
<button type="button" id="btn-finalize-usb" class="btn btn-primary" onclick="importSelectedUSBDevice()" disabled>
<i class="fas fa-check"></i> Finaliser
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Import USB Structured Info Modal -->
<div id="modal-import-usb-structured" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2><i class="fas fa-info-circle"></i> Importer informations USB structurées</h2>
<span class="close" onclick="closeModal('modal-import-usb-structured')">&times;</span>
</div>
<div class="modal-body">
<div class="import-instructions">
<h3><i class="fas fa-clipboard-list"></i> Instructions</h3>
<p class="help-text">
Collez ci-dessous les informations USB structurées provenant d'un outil GUI ou d'une sortie formatée.
<br>Format supporté : informations avec "Bus", "Vendor ID", "Product ID", etc.
</p>
</div>
<form id="form-import-usb-structured" onsubmit="importUSBStructured(event)">
<div class="form-group">
<label for="usb-structured-info">Informations USB</label>
<textarea id="usb-structured-info" name="usb_info" rows="20" required
placeholder="Bus : 003&#10;Device : 040&#10;Vendor ID : 0x2b89&#10;Product ID : 0x8761&#10;Vendor string : Realtek&#10;Product string : Bluetooth Radio&#10;..."></textarea>
</div>
<div class="form-actions">
<button type="button" class="btn btn-secondary" onclick="closeModal('modal-import-usb-structured')">
<i class="fas fa-times"></i> Annuler
</button>
<button type="submit" class="btn btn-primary">
<i class="fas fa-upload"></i> Importer
</button>
</div>
</form>
</div>
</div>
</div>
<!-- Import Markdown Modal -->
<div id="modal-import-md" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2><i class="fas fa-file-import"></i> Importer depuis fichier .md</h2>
<span class="close" onclick="closeModal('modal-import-md')">&times;</span>
</div>
<div class="modal-body">
<form id="form-import-md" onsubmit="importMarkdown(event)">
<div class="form-group">
<label for="md-file">Fichier de spécification (.md)</label>
<p class="help-text">
Sélectionnez un fichier de spécification markdown (ex: ID_0781_55ab.md)
</p>
<input type="file" id="md-file" name="file" accept=".md" required>
<div id="md-file-preview" class="file-preview"></div>
</div>
<div class="form-actions">
<button type="button" class="btn btn-secondary" onclick="closeModal('modal-import-md')">Annuler</button>
<button type="submit" class="btn btn-primary">
<i class="fas fa-upload"></i> Importer
</button>
</div>
</form>
</div>
</div>
</div>
<script src="config.js"></script>
<script src="js/utils.js"></script>
<script src="js/peripherals.js"></script>
</body>
</html>