558 lines
28 KiB
HTML
Executable File
558 lines
28 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>Détail périphérique - 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> <span id="peripheral-name">Périphérique</span></h1>
|
|
<nav>
|
|
<a href="index.html"><i class="fas fa-home"></i> Accueil</a>
|
|
<a href="peripherals.html"><i class="fas fa-arrow-left"></i> Retour</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- Detail Content -->
|
|
<div class="detail-grid">
|
|
<!-- Main Info Card -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2><i class="fas fa-info-circle"></i> Informations générales</h2>
|
|
<button class="btn btn-primary" onclick="toggleEditMode()" id="btn-edit">
|
|
<i class="fas fa-edit"></i> Modifier
|
|
</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="info-grid">
|
|
<div class="info-item">
|
|
<label>Type principal</label>
|
|
<span id="type_principal">-</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<label>Sous-type</label>
|
|
<span id="sous_type">-</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<label>Marque</label>
|
|
<span id="marque">-</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<label>Modèle</label>
|
|
<span id="modele">-</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<label>Numéro de série</label>
|
|
<span id="numero_serie">-</span>
|
|
</div>
|
|
<div class="info-item" id="vendor-id-item" style="display:none;">
|
|
<label>Vendor ID</label>
|
|
<span id="vendor_id">-</span>
|
|
</div>
|
|
<div class="info-item" id="product-id-item" style="display:none;">
|
|
<label>Product ID</label>
|
|
<span id="product_id">-</span>
|
|
</div>
|
|
<div class="info-item" id="usb-device-id-item" style="display:none;">
|
|
<label>Device ID</label>
|
|
<span id="usb_device_id">-</span>
|
|
</div>
|
|
<div class="info-item" id="fabricant-item" style="display:none;">
|
|
<label>Fabricant</label>
|
|
<span id="fabricant">-</span>
|
|
</div>
|
|
<div class="info-item" id="produit-item" style="display:none;">
|
|
<label>Produit</label>
|
|
<span id="produit">-</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<label>État</label>
|
|
<span id="etat">-</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<label>Note</label>
|
|
<span id="rating">-</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<label>Stock disponible</label>
|
|
<span id="quantite_disponible">-</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Photos Card -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2><i class="fas fa-images"></i> Photos</h2>
|
|
<button class="btn btn-secondary" onclick="showUploadPhotoModal()">
|
|
<i class="fas fa-upload"></i> Ajouter
|
|
</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="photos-grid" id="photos-grid">
|
|
<p class="text-muted">Aucune photo</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Purchase Info Card -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2><i class="fas fa-shopping-cart"></i> Informations d'achat</h2>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="info-grid">
|
|
<div class="info-item">
|
|
<label>Boutique</label>
|
|
<span id="boutique">-</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<label>Date d'achat</label>
|
|
<span id="date_achat">-</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<label>Prix</label>
|
|
<span id="prix">-</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<label>Garantie</label>
|
|
<span id="garantie">-</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Location Card -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2><i class="fas fa-map-marker-alt"></i> Localisation</h2>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="info-item">
|
|
<label>Emplacement</label>
|
|
<span id="location">-</span>
|
|
</div>
|
|
<div class="info-item" id="connecte_a-item" style="margin-top: 1rem; display:none;">
|
|
<label>Hôte</label>
|
|
<span id="connecte_a">-</span>
|
|
</div>
|
|
<div class="info-item" style="margin-top: 1rem;">
|
|
<label>Détails de localisation</label>
|
|
<span id="location_details">-</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Links Card -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2><i class="fas fa-link"></i> Liens utiles</h2>
|
|
<button class="btn btn-secondary" onclick="showAddLinkModal()">
|
|
<i class="fas fa-plus"></i> Ajouter
|
|
</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="links-list">
|
|
<p class="text-muted">Aucun lien</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Documents Card -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2><i class="fas fa-file-alt"></i> Documents</h2>
|
|
<button class="btn btn-secondary" onclick="showUploadDocumentModal()">
|
|
<i class="fas fa-upload"></i> Ajouter
|
|
</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="documents-list">
|
|
<p class="text-muted">Aucun document</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- History Card -->
|
|
<div class="card full-width">
|
|
<div class="card-header">
|
|
<h2><i class="fas fa-history"></i> Historique</h2>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="history-list">
|
|
<p class="text-muted">Aucun historique</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notes Card -->
|
|
<div class="card full-width">
|
|
<div class="card-header">
|
|
<h2><i class="fas fa-sticky-note"></i> Notes</h2>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="notes">-</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="detail-actions">
|
|
<button class="btn btn-danger" onclick="deletePeripheral()">
|
|
<i class="fas fa-trash"></i> Supprimer
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Upload Photo Modal -->
|
|
<div id="modal-upload-photo" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2><i class="fas fa-upload"></i> Ajouter une photo</h2>
|
|
<span class="close" onclick="closeModal('modal-upload-photo')">×</span>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="form-upload-photo" onsubmit="uploadPhoto(event)">
|
|
<div class="form-group">
|
|
<label for="photo-file">Fichier image</label>
|
|
<input type="file" id="photo-file" name="file" accept="image/*">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="photo-url">Copier image depuis URL</label>
|
|
<input type="url" id="photo-url" name="image_url" placeholder="https://...">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="photo-description">Description</label>
|
|
<input type="text" id="photo-description" name="description">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>
|
|
<input type="checkbox" id="photo-primary" name="is_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 dans les listes. Une seule photo principale par périphérique.
|
|
</span>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="button" class="btn btn-secondary" onclick="closeModal('modal-upload-photo')">Annuler</button>
|
|
<button type="button" class="btn btn-secondary" id="btn-upload-url" onclick="uploadPhotoFromUrl()" disabled>
|
|
<i class="fas fa-link"></i> Importer URL
|
|
</button>
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-upload"></i> Upload
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Upload Document Modal -->
|
|
<div id="modal-upload-document" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2><i class="fas fa-upload"></i> Ajouter un document</h2>
|
|
<span class="close" onclick="closeModal('modal-upload-document')">×</span>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="form-upload-document" onsubmit="uploadDocument(event)">
|
|
<div class="form-group">
|
|
<label for="doc-file">Fichier</label>
|
|
<input type="file" id="doc-file" name="file" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="doc-type">Type de document</label>
|
|
<select id="doc-type" name="doc_type" required>
|
|
<option value="manual">Manuel</option>
|
|
<option value="warranty">Garantie</option>
|
|
<option value="invoice">Facture</option>
|
|
<option value="datasheet">Fiche technique</option>
|
|
<option value="other">Autre</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="doc-description">Description</label>
|
|
<input type="text" id="doc-description" name="description">
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="button" class="btn btn-secondary" onclick="closeModal('modal-upload-document')">Annuler</button>
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-upload"></i> Upload
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add Link Modal -->
|
|
<div id="modal-add-link" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2><i class="fas fa-link"></i> Ajouter un lien</h2>
|
|
<span class="close" onclick="closeModal('modal-add-link')">×</span>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="form-add-link" onsubmit="addLink(event)">
|
|
<div class="form-group">
|
|
<label for="link-type">Type de lien</label>
|
|
<select id="link-type" name="link_type" required>
|
|
<option value="manufacturer">Fabricant</option>
|
|
<option value="support">Support</option>
|
|
<option value="drivers">Drivers</option>
|
|
<option value="documentation">Documentation</option>
|
|
<option value="custom">Personnalisé</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="link-label">Libellé</label>
|
|
<input type="text" id="link-label" name="label" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="link-url">URL</label>
|
|
<input type="url" id="link-url" name="url" required>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="button" class="btn btn-secondary" onclick="closeModal('modal-add-link')">Annuler</button>
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-save"></i> Ajouter
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edit Peripheral Modal -->
|
|
<div id="modal-edit" class="modal">
|
|
<div class="modal-content modal-large">
|
|
<div class="modal-header">
|
|
<h2><i class="fas fa-edit"></i> Modifier le périphérique</h2>
|
|
<span class="close" onclick="closeEditModal()">×</span>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="form-edit-peripheral" onsubmit="savePeripheral(event)">
|
|
<div class="form-grid">
|
|
<!-- Identification -->
|
|
<div class="form-section">
|
|
<h3>Identification</h3>
|
|
<div class="form-group">
|
|
<label for="edit-nom">Nom *</label>
|
|
<input type="text" id="edit-nom" name="nom" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-type_principal">Type principal *</label>
|
|
<input type="text" id="edit-type_principal" name="type_principal" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-sous_type">Sous-type</label>
|
|
<input type="text" id="edit-sous_type" name="sous_type">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-marque">Marque</label>
|
|
<input type="text" id="edit-marque" name="marque">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-modele">Modèle</label>
|
|
<input type="text" id="edit-modele" name="modele">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-numero_serie">Numéro de série</label>
|
|
<input type="text" id="edit-numero_serie" name="numero_serie">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Informations USB -->
|
|
<div class="form-section">
|
|
<h3>Informations USB</h3>
|
|
<div class="form-group">
|
|
<label for="edit-vendor_id">
|
|
Vendor ID
|
|
<span class="help-text-inline">(idVendor)</span>
|
|
</label>
|
|
<input type="text" id="edit-vendor_id" name="vendor_id" placeholder="0x1234">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-product_id">
|
|
Product ID
|
|
<span class="help-text-inline">(idProduct)</span>
|
|
</label>
|
|
<input type="text" id="edit-product_id" name="product_id" placeholder="0x5678">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-usb_device_id">
|
|
Device ID
|
|
<span class="help-text-inline">(idVendor:idProduct)</span>
|
|
</label>
|
|
<input type="text" id="edit-usb_device_id" name="usb_device_id" placeholder="1d6b:0003">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-fabricant">
|
|
Fabricant
|
|
<span class="help-text-inline">(iManufacturer)</span>
|
|
</label>
|
|
<input type="text" id="edit-fabricant" name="fabricant" placeholder="USB Manufacturer String">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-produit">
|
|
Produit
|
|
<span class="help-text-inline">(iProduct)</span>
|
|
</label>
|
|
<input type="text" id="edit-produit" name="produit" placeholder="USB Product String">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Achat -->
|
|
<div class="form-section">
|
|
<h3>Achat</h3>
|
|
<div class="form-group">
|
|
<label for="edit-boutique">Boutique</label>
|
|
<select id="edit-boutique" name="boutique">
|
|
<option value="">Non définie</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-date_achat">Date d'achat</label>
|
|
<input type="date" id="edit-date_achat" name="date_achat">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-prix">Prix</label>
|
|
<input type="number" id="edit-prix" name="prix" step="0.01" min="0">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-devise">Devise</label>
|
|
<input type="text" id="edit-devise" name="devise" maxlength="3" placeholder="EUR">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-garantie_duree_mois">Garantie (mois)</label>
|
|
<input type="number" id="edit-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="edit-utilisation">Utilisation</label>
|
|
<select id="edit-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="edit-etat">État</label>
|
|
<select id="edit-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" id="edit-star-rating">
|
|
<input type="hidden" id="edit-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="edit-group-connecte_a">
|
|
<label for="edit-connecte_a">Hôte</label>
|
|
<select id="edit-connecte_a" name="connecte_a">
|
|
<option value="">Non défini</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group" id="edit-group-location_id">
|
|
<label for="edit-location_id">Localisation</label>
|
|
<select id="edit-location_id" name="location_id">
|
|
<option value="">Non définie</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group" id="edit-group-stockage_location">
|
|
<label for="edit-stockage_location">Stockage</label>
|
|
<select id="edit-stockage_location" name="stockage_location">
|
|
<option value="">Non défini</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-quantite_totale">Quantité totale</label>
|
|
<input type="number" id="edit-quantite_totale" name="quantite_totale" min="0" value="1">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-quantite_disponible">Quantité disponible</label>
|
|
<input type="number" id="edit-quantite_disponible" name="quantite_disponible" min="0" value="1">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Documentation technique -->
|
|
<div class="form-section full-width">
|
|
<h3>Documentation technique</h3>
|
|
<div class="form-group">
|
|
<label for="edit-synthese">
|
|
Synthèse
|
|
<span class="help-text-inline">(Markdown)</span>
|
|
</label>
|
|
<textarea id="edit-synthese" name="synthese" rows="5"></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-cli_yaml">
|
|
CLI / Données structurées
|
|
<span class="help-text-inline">(YAML)</span>
|
|
</label>
|
|
<textarea id="edit-cli_yaml" name="cli_yaml" rows="6"></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-cli_raw">
|
|
CLI / Rapport système
|
|
<span class="help-text-inline">(Markdown)</span>
|
|
</label>
|
|
<textarea id="edit-cli_raw" name="cli_raw" rows="6"></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-specifications">
|
|
Spécifications
|
|
<span class="help-text-inline">(Markdown)</span>
|
|
</label>
|
|
<textarea id="edit-specifications" name="specifications" rows="8"></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-notes">
|
|
Notes
|
|
<span class="help-text-inline">(Markdown)</span>
|
|
</label>
|
|
<textarea id="edit-notes" name="notes" rows="4"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button type="button" class="btn btn-secondary" onclick="closeEditModal()">Annuler</button>
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-save"></i> Enregistrer
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="config.js"></script>
|
|
<script src="js/utils.js"></script>
|
|
<script src="js/peripheral-detail.js"></script>
|
|
</body>
|
|
</html>
|