249 lines
12 KiB
HTML
249 lines
12 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}{{ vehicule.immatriculation }} — GarageManager{% endblock %}
|
|
{% block content %}
|
|
|
|
<a href="/vehicules" class="back-link"><i class="fas fa-arrow-left"></i> Retour aux véhicules</a>
|
|
|
|
<!-- Header véhicule -->
|
|
<div class="flex justify-between items-start mb-8">
|
|
<div>
|
|
<h1 class="page-title mono" style="color:var(--accent-electric);font-size:2rem;letter-spacing:0.06em">{{ vehicule.immatriculation }}</h1>
|
|
<p class="page-subtitle" style="margin-top:0.35rem">
|
|
{{ vehicule.marque }} {{ vehicule.modele }}
|
|
{% if vehicule.annee %} — {{ vehicule.annee }}{% endif %}
|
|
{% if vehicule.kilometrage %} — <span class="mono">{{ vehicule.kilometrage }} km</span>{% endif %}
|
|
</p>
|
|
{% if vehicule.vin %}
|
|
<p class="text-xs text-muted mono" style="margin-top:0.35rem">VIN : {{ vehicule.vin }}</p>
|
|
{% endif %}
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<a href="/interventions/new?vehicule_id={{ vehicule.id }}" class="btn-primary btn-sm">
|
|
<i class="fas fa-plus"></i> Intervention
|
|
</a>
|
|
<a href="/vehicules/{{ vehicule.id }}/edit" class="btn-secondary btn-sm">
|
|
<i class="fas fa-edit"></i> Modifier
|
|
</a>
|
|
<form method="post" action="/vehicules/{{ vehicule.id }}/delete" onsubmit="return confirm('Supprimer ce véhicule et toutes ses données ?')">
|
|
<button class="btn-danger btn-sm">
|
|
<i class="fas fa-trash"></i> Supprimer
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Historique interventions ── -->
|
|
<div class="card mb-6" style="padding:0" id="interventions">
|
|
<div class="card-header">
|
|
<span class="card-title">
|
|
<i class="fas fa-tools text-electric" style="margin-right:0.4rem"></i>
|
|
Historique interventions
|
|
<span class="badge badge-info ml-2">{{ interventions|length }}</span>
|
|
</span>
|
|
<a href="/interventions/new?vehicule_id={{ vehicule.id }}" class="link-action text-xs">+ Nouvelle</a>
|
|
</div>
|
|
|
|
{% if interventions %}
|
|
<div class="overflow-x-auto">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Description</th>
|
|
<th>Date</th>
|
|
<th>Kilométrage</th>
|
|
<th class="text-right">Pièces</th>
|
|
<th class="text-right">Total</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for i in interventions %}
|
|
<tr style="cursor:pointer" onclick="window.location='/interventions/{{ i.id }}'">
|
|
<td>
|
|
<p class="font-medium">{{ i.description }}</p>
|
|
{% if i.technicien %}<p class="text-xs text-muted mt-1">{{ i.technicien }}</p>{% endif %}
|
|
</td>
|
|
<td class="text-secondary text-sm">{{ i.date_intervention or '—' }}</td>
|
|
<td class="mono text-sm text-secondary">{{ (i.kilometrage_intervention|string + ' km') if i.kilometrage_intervention else '—' }}</td>
|
|
<td class="text-right">
|
|
<span class="text-xs text-secondary">{{ i.nb_pieces }} pce(s)</span><br>
|
|
<span class="text-xs text-muted">{{ "%.2f"|format(i.cout_pieces) }} €</span>
|
|
</td>
|
|
<td class="text-right font-semibold" style="color:var(--accent-volt)">
|
|
{{ "%.0f"|format(i.cout_main_oeuvre + i.cout_pieces) }} €
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
<tfoot>
|
|
<tr style="background:var(--bg-secondary)">
|
|
<td colspan="4" class="text-right text-secondary font-semibold text-sm" style="padding:0.75rem 1rem">Total véhicule</td>
|
|
<td class="text-right font-bold" style="color:var(--accent-volt);padding:0.75rem 1rem">
|
|
{{ "%.0f"|format(interventions|sum(attribute='cout_main_oeuvre') + interventions|sum(attribute='cout_pieces')) }} €
|
|
</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<div class="empty-state">
|
|
<i class="fas fa-tools"></i>
|
|
<p>Aucune intervention</p>
|
|
<a href="/interventions/new?vehicule_id={{ vehicule.id }}" class="link-action">Créer →</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- ── Toutes les pièces ── -->
|
|
<div class="card mb-6" style="padding:0" id="pieces">
|
|
<div class="card-header">
|
|
<span class="card-title">
|
|
<i class="fas fa-cog text-volt" style="margin-right:0.4rem"></i>
|
|
Toutes les pièces utilisées
|
|
<span class="badge badge-warning ml-2">{{ toutes_pieces|length }}</span>
|
|
</span>
|
|
</div>
|
|
<p class="text-xs text-muted" style="padding:0.6rem 1.5rem;border-bottom:1px solid var(--border)">Récapitulatif de toutes les pièces de toutes les interventions — pour les retrouver et racheter facilement.</p>
|
|
|
|
{% if toutes_pieces %}
|
|
<div class="overflow-x-auto">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Photo</th>
|
|
<th>Pièce</th>
|
|
<th>Référence</th>
|
|
<th>Marque</th>
|
|
<th>Prix unit.</th>
|
|
<th class="text-center">Qté</th>
|
|
<th>Intervention</th>
|
|
<th>Date</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for p in toutes_pieces %}
|
|
<tr>
|
|
<td>
|
|
{% if p.photo %}
|
|
<img src="{{ p.photo }}" class="photo-thumb" onclick="window.open('{{ p.photo }}','_blank')">
|
|
{% else %}
|
|
<div class="photo-placeholder"><i class="fas fa-cog text-xs"></i></div>
|
|
{% endif %}
|
|
</td>
|
|
<td class="font-medium">{{ p.nom }}</td>
|
|
<td class="mono text-xs text-muted">{{ p.reference or '—' }}</td>
|
|
<td class="text-secondary text-sm">{{ p.marque or '—' }}</td>
|
|
<td class="mono text-sm">{{ "%.2f"|format(p.prix) }} €</td>
|
|
<td class="text-center text-secondary">{{ p.quantite }}</td>
|
|
<td class="text-xs text-secondary" style="max-width:200px">
|
|
<a href="/interventions/{{ p.intervention_id }}" class="link-action truncate" style="display:block;max-width:200px">
|
|
{{ p.intervention_desc[:40] }}{% if p.intervention_desc|length > 40 %}…{% endif %}
|
|
</a>
|
|
</td>
|
|
<td class="text-xs text-muted">{{ p.date_intervention or '—' }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<div class="empty-state">
|
|
<i class="fas fa-cog"></i>
|
|
<p>Aucune pièce enregistrée</p>
|
|
<span class="text-xs text-muted">Les pièces s'affichent ici dès qu'elles sont ajoutées dans une intervention.</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- ── Infos & Notes ── -->
|
|
<div class="card" style="padding:0" id="infos">
|
|
<div class="card-header">
|
|
<span class="card-title">
|
|
<i class="fas fa-paperclip text-secondary" style="margin-right:0.4rem"></i>
|
|
Infos & Notes
|
|
</span>
|
|
<button onclick="toggleAddInfo()" class="link-action text-xs">+ Ajouter</button>
|
|
</div>
|
|
|
|
<!-- Form ajout info -->
|
|
<div id="add-info-form" style="display:none;background:var(--bg-secondary);border-bottom:1px solid var(--border);padding:1.25rem 1.5rem">
|
|
<form method="post" action="/vehicules/{{ vehicule.id }}/infos/add" enctype="multipart/form-data">
|
|
<div class="grid grid-3 mb-3">
|
|
<div>
|
|
<label>Type</label>
|
|
<select name="type" id="info-type" onchange="toggleInfoType()">
|
|
<option value="texte">📝 Texte libre</option>
|
|
<option value="url">🔗 Lien / URL</option>
|
|
<option value="image">🖼️ Image / Photo</option>
|
|
</select>
|
|
</div>
|
|
<div style="grid-column:span 2">
|
|
<label>Titre (optionnel)</label>
|
|
<input name="titre" placeholder="Ex: Forum, Fiche technique, Photo moteur…">
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div id="input-texte">
|
|
<label>Contenu</label>
|
|
<textarea name="contenu" rows="2" placeholder="Notes, infos techniques…"></textarea>
|
|
</div>
|
|
<div id="input-url" style="display:none">
|
|
<label>URL</label>
|
|
<input name="contenu" placeholder="https://…">
|
|
</div>
|
|
<div id="input-image" style="display:none">
|
|
<label>Photo</label>
|
|
<input type="file" name="photo" accept="image/*" style="background:none;border:none;padding:0.25rem 0;color:var(--text-secondary)">
|
|
<input type="hidden" name="contenu" value="photo">
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="btn-primary btn-sm">
|
|
<i class="fas fa-save"></i> Enregistrer
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
{% if infos %}
|
|
<div>
|
|
{% for info in infos %}
|
|
<div style="padding:1rem 1.5rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:flex-start;transition:background 0.15s" onmouseover="this.style.background='rgba(0,212,255,0.03)'" onmouseout="this.style.background=''">
|
|
<div style="flex:1">
|
|
{% if info.titre %}
|
|
<p class="text-xs font-semibold uppercase" style="letter-spacing:0.06em;color:var(--text-muted);margin-bottom:0.3rem">{{ info.titre }}</p>
|
|
{% endif %}
|
|
{% if info.type == 'texte' %}
|
|
<p class="text-sm" style="white-space:pre-wrap;color:var(--text-primary)">{{ info.contenu }}</p>
|
|
{% elif info.type == 'url' %}
|
|
<a href="{{ info.contenu }}" target="_blank" class="link-action text-sm" style="word-break:break-all">🔗 {{ info.contenu }}</a>
|
|
{% elif info.type == 'image' %}
|
|
<img src="{{ info.contenu }}" style="max-height:160px;border-radius:8px;border:1px solid var(--border);margin-top:0.25rem;cursor:pointer" onclick="window.open('{{ info.contenu }}','_blank')">
|
|
{% endif %}
|
|
<p class="text-xs text-muted" style="margin-top:0.35rem">{{ info.created_at[:10] }}</p>
|
|
</div>
|
|
<form method="post" action="/vehicules/{{ vehicule.id }}/infos/{{ info.id }}/delete" style="margin-left:1rem" onsubmit="return confirm('Supprimer ?')">
|
|
<button class="link-danger">✕</button>
|
|
</form>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="empty-state">
|
|
<i class="fas fa-paperclip"></i>
|
|
<p>Aucune info pour l'instant</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<script>
|
|
function toggleAddInfo() {
|
|
const f = document.getElementById('add-info-form');
|
|
f.style.display = f.style.display === 'none' ? 'block' : 'none';
|
|
}
|
|
function toggleInfoType() {
|
|
const type = document.getElementById('info-type').value;
|
|
document.getElementById('input-texte').style.display = type === 'texte' ? 'block' : 'none';
|
|
document.getElementById('input-url').style.display = type === 'url' ? 'block' : 'none';
|
|
document.getElementById('input-image').style.display = type === 'image' ? 'block' : 'none';
|
|
}
|
|
</script>
|
|
{% endblock %}
|