Files
pyfleet/templates/vehiculos/form.html
T
2026-09-03 19:40:44 +02:00

1085 lines
43 KiB
HTML
Executable File

{% extends "base.html" %}
{% block title %}{{ 'Editar' if vehiculo else 'Nuevo' }} Vehículo{% endblock %}
{% block extra_css %}
.form-card { max-width: 860px; }
.section-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--accent);
padding-bottom: 10px;
border-bottom: 1px solid var(--border);
margin: 28px 0 20px;
}
.section-title:first-of-type { margin-top: 0; }
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 15px;
}
.col-full { grid-column: 1 / -1; }
.col-2 { grid-column: span 2; }
{% endblock %}
{% block content %}
<div class="page-header">
<div class="page-eyebrow">Vehículos</div>
<div class="page-title">{{ 'Editar vehículo ' ~ vehiculo['m_oficial'] if vehiculo else 'Nuevo vehículo' }}</div>
<div class="page-subtitle">
{{ 'Modifica los datos del vehículo.' if vehiculo else 'Completa el formulario para registrar un nuevo vehículo.' }}
</div>
</div>
<div class="form-card">
<form method="POST">
<input type="hidden" name="_q" value="{{ q|default('') }}">
<input type="hidden" name="_desde" value="{{ desde|default('') }}">
<input type="hidden" name="_hasta" value="{{ hasta|default('') }}">
<input type="hidden" name="_q_itv" value="{{ q_itv|default('') }}">
<input type="hidden" name="_origen" value="{{ origen|default('') }}">
<input type="hidden" name="_q_viat" value="{{ q_viat|default('') }}">
{# ── IDENTIFICACIÓN ── #}
<div class="section-title">Identificación {{ '- id' ~ vehiculo['id'] if vehiculo }}</div>
<div class="form-grid">
<div class="form-group">
<label class="form-label" for="m_oficial">Matrícula oficial</label>
<input class="form-input" type="text" id="m_oficial" name="m_oficial"
placeholder="Ej. 1234ABC" required
oninput="this.value = this.value.toUpperCase();"
value="{{ (vehiculo['m_oficial'] or '') if vehiculo else request.form.get('m_oficial', '') }}">
</div>
<div class="form-group">
<label class="form-label" for="m_reservada">Matrícula reservada</label>
<input class="form-input" type="text" id="m_reservada" name="m_reservada"
placeholder="Ej. 5678XYZ"
oninput="this.value = this.value.toUpperCase();"
value="{{ (vehiculo['m_reservada'] or '') if vehiculo else request.form.get('m_reservada', '') }}">
</div>
<div class="form-group">
<label class="form-label" for="m_propia">Matrícula propia</label>
<input class="form-input" type="text" id="m_propia" name="m_propia"
placeholder="Ej. 0123ZXZ"
oninput="this.value = this.value.toUpperCase();"
value="{{ (vehiculo['m_propia'] or '') if vehiculo else request.form.get('m_propia', '') }}">
</div>
<div class="form-group">
<label class="form-label" for="VIN">VIN</label>
<input class="form-input" type="text" id="VIN" name="VIN"
placeholder="VIN"
oninput="this.value = this.value.toUpperCase();"
value="{{ (vehiculo['VIN'] or '') if vehiculo else request.form.get('VIN', '') }}">
</div>
<div class="form-group">
<label class="form-label" for="poliza">Poliza</label>
<input class="form-input" type="text" id="poliza" name="poliza"
oninput="this.value = this.value.toUpperCase();"
value="{{ (vehiculo['Poliza'] or '') if vehiculo else request.form.get('poliza', '') }}">
</div>
<div class="form-group">
<label class="form-label" for="viat">Via-T</label>
<input class="form-input" type="text" id="viat" name="viat" style="width: 210px; padding-left: 10px;"
oninput="this.value = this.value.toUpperCase();"
value="{{ (vehiculo['viat'] or '') if vehiculo else request.form.get('viat', '') }}">
</div>
<div class="form-group">
<label class="form-label" for="legajo">Legajo</label>
<input class="form-input" id="legajo" name="legajo"
placeholder=""
value="{{ (vehiculo['legajo'] or '') if vehiculo else request.form.get('viat', '') }}">
</div>
</div>
{# ── CARACTERÍSTICAS TÉCNICAS ── #}
<div class="section-title">Características técnicas</div>
<div class="form-grid">
<div class="form-group">
<label class="form-label" for="marca">Marca</label>
<input class="form-input" type="text" id="marca" name="marca"
placeholder="Ej. Ford, Renault…" required
value="{{ (vehiculo['marca'] or '') if vehiculo else request.form.get('marca', '') }}">
</div>
<div class="form-group">
<label class="form-label" for="modelo">Modelo</label>
<input class="form-input" type="text" id="modelo" name="modelo"
placeholder="Ej. Transit, Kangoo…" required
value="{{ (vehiculo['modelo'] or '') if vehiculo else request.form.get('modelo', '') }}">
</div>
<div class="form-group">
<label class="form-label" for="tipo">Tipo vehículo</label>
<div class="select-wrap">
<select class="form-input form-select" id="tipo" name="tipo" required>
<option value="">— Selecciona tipo —</option>
{% for tip in tipo %}
<option value="{{ tip['tipo'] }}"
{% if vehiculo and vehiculo['tipo'] == tip['tipo'] %}selected
{% elif request.form.get('tipo') == tip['tipo'] %}selected
{% endif %}>
{{ tip['tipo'] }}
</option>
{% endfor %}
</select>
<svg class="select-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<polyline points="6 9 12 15 18 9"/>
</svg>
</div>
</div>
<div class="form-group">
<label class="form-label" for="color">Color</label>
<input class="form-input" type="text" id="color" name="color"
placeholder="Ej. Blanco, Negro…"
value="{{ (vehiculo['color'] or '') if vehiculo else request.form.get('color', '') }}">
</div>
<div class="form-group">
<label class="form-label" for="combustible">Combustible</label>
<input class="form-input" type="text" id="combustible" name="combustible"
placeholder="Gasolina / Diésel / Eléctrico…"
value="{{ (vehiculo['combustible'] or '') if vehiculo else request.form.get('combustible', '') }}">
</div>
<div class="form-group">
<label class="form-label" for="plazas">Plazas</label>
<input class="form-input" type="text" id="plazas" name="plazas"
placeholder="Nº de plazas"
value="{{ (vehiculo['plazas'] or '') if vehiculo else request.form.get('plazas', '') }}">
</div>
<div style="display:flex; align-items:center; gap:12px;">
<!-- Caja del checkbox -->
<div class="form-group">
<label class="form-label"></label>
<label style="width: 160px; margin-top:22px; display:flex; align-items:center;
gap:10px;
cursor:pointer;
padding:10px 14px;
background:var(--bg);
border:1px solid var(--border);
border-radius:8px;
transition:border-color .15s;"
onmouseover="this.style.borderColor='var(--accent)'"
onmouseout="this.style.borderColor='var(--border)'">
<input type="checkbox" name="lanzadestellos" id="lanzadestellos" value="1"
{% if vehiculo and vehiculo['lanzadestellos'] == 1 %}checked{% endif %}
style=" width:16px; height:16px; accent-color:var(--accent); cursor:pointer;">
Lanzadestellos
<span
style="font-size:11px;color:var(--muted);margin-left:4px;"
id="texto-lanzadestellos">
<!-- {% if vehiculo and vehiculo['lanzadestellos'] == 1 %}
✓ Con lanzadestellos
{% else %}
✗ Sin lanzadestellos
{% endif %} -->
</span>
</label>
</div>
<i id="icono-lanzadestellos" class="bi bi-brightness-alt-high-fill" style="font-size:2rem;color:cornflowerblue; {% if not (vehiculo and vehiculo['lanzadestellos'] == 1) %}display:none;{% endif %}"></i>
</div>
</div>
{% if vehiculo %}
{% set sit = vehiculo['situacion'] or '' %}
{% if sit | upper == 'BAJA' %}
{% set color_borde = '#f87171' %}
{% set color_fondo = 'rgba(248,113,113,.08)' %}
{% elif sit | upper == 'ACTIVO' %}
{% set color_borde = '#34d399' %}
{% set color_fondo = 'rgba(52,211,153,.08)' %}
{% elif sit | upper == 'ALTA' %}
{% set color_borde = '#60a5fa' %}
{% set color_fondo = 'rgba(96,165,250,.08)' %}
{% else %}
{% set color_borde = 'var(--border)' %}
{% set color_fondo = 'var(--pill-bg)' %}
{% endif %}
{% set estilo_sit = 'background:' ~ color_fondo ~ ';border:1.5px solid ' ~ color_borde ~ ';color:var(--text);font-weight:600;cursor: not-allowed;' %}
{# ── SITUACIÓN Y DESTINO ── #}
<div class="section-title">Situación y destino (No editable)</div>
<div class="form-grid">
<div class="form-group">
<label class="form-label" for="situacion">Situación</label>
<input class="form-input" type="text" id="situacion" name="situacion" style="{{ estilo_sit }}" readonly
value="{{ (vehiculo['situacion'] or '') if vehiculo else request.form.get('situacion', '') }}">
</div>
<div class="form-group">
<label class="form-label" for="poblacion">Población</label>
<input class="form-input" type="text" id="poblacion" name="poblacion" style="{{ estilo_sit }}" readonly
value="{{ (vehiculo['poblacion'] or '') if vehiculo else request.form.get('poblacion','') }}">
</div>
<div class="form-group" style="width: 400px">
<label class="form-label" for="unidad">Unidad</label>
<input class="form-input" type="text" id="unidad" name="unidad"
style="{{ estilo_sit }}" readonly
value="{{ (vehiculo['unidad'] or '') if vehiculo else request.form.get('unidad','') }}">
</div>
</div>
{# ── FECHAS Y KILOMETRAJE ── #}
<div class="section-title">Kilometraje - ITV</div>
<div class="form-grid">
<div class="form-group">
<label class="form-label" for="km">Km actuales</label>
<input class="form-input" id="km" name="km"
placeholder=""
value="{{ (vehiculo['km'] or '') if vehiculo else request.form.get('km','') }}">
<!-- value="{{ vehiculo['km'] if vehiculo else request.form.get('km','') }}"> -->
</div>
<div class="form-group">
<label class="form-label" for="km_1">Km anterior</label>
<input class="form-input" id="km_1" name="km_1"
placeholder=""
value="{{ (vehiculo['km_1'] or '') if vehiculo else request.form.get('km_1','') }}">
</div>
<div class="form-group">
<label class="form-label" for="itv_ultima">Última ITV</label>
<input class="form-input" type="date" id="itv_ultima" name="itv_ultima"
value="{{ (vehiculo['itv_ultima'][:10] or '') if vehiculo and vehiculo['itv_ultima'] else request.form.get('itv_ultima','') }}">
</div>
<div class="form-group">
<label class="form-label" for="itv">Próxima ITV</label>
<input class="form-input" type="date" id="itv" name="itv"
value="{{ (vehiculo['itv'][:10] or '') if vehiculo and vehiculo['itv'] else request.form.get('itv','') }}">
</div>
</div>
{# ── NOTAS ── #}
<div class="section-title">NOTAS</div>
<div class="form-group" style="max-width: 1560px;">
<!-- <textarea name="observaciones">{{ (vehiculo['observaciones'] or '') if vehiculo else '' }}</textarea> -->
<textarea class="form-input" id="notas" name="notas"
rows="5" placeholder="Notas adicionales…">{{ (vehiculo['notas'] or '') if vehiculo else request.form.get('notas','') }}
</textarea>
</div>
{# ── DATOS INTERVENIDO ── #}
<!-- {% set m_oficial = vehiculo['m_oficial'] if vehiculo else '' %} -->
<div id="bloque-intervenido"
style="display:{{ 'block' if m_oficial and m_oficial.strip().upper().endswith('Q') else 'none' }}">
<div class="section-title" style="margin-top:28px">Datos vehículo intervenido</div>
<div class="form-grid">
<div class="form-group">
<label class="form-label" for="int_operacion">Operacion</label>
<input class="form-input" id="int_operacion" name="int_operacion"
placeholder=""
value="{{ (vehiculo['int_operacion'] or '') if vehiculo else request.form.get('int_operacion','') }}">
</div>
<div class="form-group">
<label class="form-label" for="int_grupo">Grupo interviene</label>
<input class="form-input" id="int_grupo" name="int_grupo"
placeholder=""
value="{{ (vehiculo['int_grupo'] or '') if vehiculo else request.form.get('int_grupo','') }}">
</div>
<div class="form-group">
<label class="form-label" for="int_procedimiento">Diligencias</label>
<input class="form-input" id="int_procedimiento" name="int_procedimiento"
placeholder=""
value="{{ (vehiculo['int_procedimiento'] or '') if vehiculo else request.form.get('int_procedimiento','') }}">
</div>
<div class="form-group">
<label class="form-label" for="int_juzgado">Juzgado interviene</label>
<input class="form-input" id="int_juzgado" name="int_juzgado"
placeholder=""
value="{{ (vehiculo['int_juzgado'] or '') if vehiculo else request.form.get('int_juzgado','') }}">
</div>
</div>
</div>
{% endif %}
<div class="form-actions" style="margin-top:28px">
<button type="submit" class="btn btn-primary"> <i class="bi bi-floppy" style="font-size: 1rem;"></i>
{{ 'GUARDAR CAMBIOS' if vehiculo else '✚ Registrar vehículo' }}
</button>
{# Cancelar #}
{% if origen == 'viat' %}
<a href="/viat?q={{ q_viat }}" class="btn btn-ghost">Cancelar</a>
{% elif desde or hasta or q_itv %}
<a href="/itv?desde={{ desde }}&hasta={{ hasta }}&q_itv={{ q_itv }}" class="btn btn-ghost">Cancelar</a>
{% else %}
<a href="{{ url_for('vehiculos_list', q=q) if q else url_for('vehiculos_list') }}" class="btn btn-ghost">Cancelar</a>
{% endif %}
<!-- <div style="display:flex;justify-content:space-between;align-items:center;margin-top:12px;"> -->
{% if vehiculo %}
<button type="button" class="btn btn-ghost" onclick="imprimirFicha()" title="Imprimir ficha del vehículo">
<i class="bi bi-printer"></i>
Ficha - Imprimir/PDF
</button>
{% endif %}
<!-- </div> -->
</div>
</form> {# ← CIERRE del formulario principal #}
<!-- {# Eliminar vehículo FUERA del form principal #}
{% if vehiculo %}
{% set nombre_vehiculo = vehiculo['m_oficial'] or vehiculo['tipo'] or '#' ~ vehiculo['id'] %} -->
<!-- QUITADO EL BOTON ELIMINAR -->
<!-- <form method="POST"
action="{{ url_for('vehiculos_eliminar', id=vehiculo['id']) }}"
style="margin-top:0px;display:flex;justify-content:flex-end;">
<input type="hidden" name="_q" value="{{ q|default('') }}">
<button type="button" class="btn btn-danger"
onclick="confirmarEliminarVehiculo(this)">🗑 Eliminar vehículo</button>
</form> -->
<!-- {% endif %} -->
{# ── HISTORIAL (fuera del form principal) ── #}
{% if vehiculo %}
<div class="section-title" style="margin-top:32px">Historial</div>
{% if historial %}
<div class="table-wrap" style="margin-bottom:20px;">
<table>
<thead>
<tr>
<th>ID</th>
<th>Fecha</th>
<th>Matrícula</th>
<th>Situación</th>
<th>Poblacion</th>
<th>Unidad</th>
<th>Observaciones</th>
<th style="text-align:right">Acción</th>
</tr>
</thead>
<tbody>
{% for h in historial %}
<tr>
<td class="td-id">{{ h['id'] or '—' }}</td>
<td style="white-space:nowrap">{{ h['fecha'] | fecha_es }}</td>
<!-- <td style="white-space:nowrap">{{ h['fecha'] or '—' }}</td> -->
<td>{{ h['m_oficial'] or '—' }}</td>
<td>{{ h['situacion'] or '—' }}</td>
<td>{{ h['poblacion'] or '—' }}</td>
<td>{{ h['unidad'] or '—' }}</td>
<!-- <td>{{ h['grupo'] or '—' }}</td> -->
<td style="color:var(--muted);font-size:12px">{{ h['observaciones'] or '—' }}</td>
<td style="text-align:right">
<form method="POST"
action="{{ url_for('historial_eliminar', vid=vehiculo['id'], hid=h['id']) }}">
<input type="hidden" name="_q" value="{{ q|default('') }}">
<input type="hidden" name="_desde" value="{{ desde|default('') }}">
<input type="hidden" name="_hasta" value="{{ hasta|default('') }}">
<input type="hidden" name="_unidad_itv" value="{{ unidad_itv|default('') }}">
<button type="button" class="btn btn-danger btn-sm"
onclick="confirmarEliminar(this)">Eliminar</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<p style="color:var(--muted);font-size:13px;margin-bottom:20px;">
No hay entradas en el historial de este vehículo.
</p>
{% endif %}
{# Formulario añadir entrada #}
<div style="background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:20px;">
<p style="font-size:11px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;
color:var(--muted);margin-bottom:16px;">Añadir entrada al historial</p>
<form method="POST" action="{{ url_for('historial_nuevo', vid=vehiculo['id']) }}">
<input type="hidden" name="_q" value="{{ q|default('') }}">
<input type="hidden" name="_desde" value="{{ desde|default('') }}">
<input type="hidden" name="_hasta" value="{{ hasta|default('') }}">
<input type="hidden" name="_unidad_itv" value="{{ unidad_itv|default('') }}">
<div class="form-grid" style="margin-bottom:12px;">
<div class="form-group" style="margin-bottom:0">
<label class="form-label" for="h_fecha">Fecha</label>
<input class="form-input" type="date" id="h_fecha" name="h_fecha" required>
</div>
<input type='hidden' id="h_vehiculo_id" name="h_vehiculo_id" readonly
placeholder="" value="{{ vehiculo['id'] if vehiculo else request.form.get('id','') }}">
<div class="form-group" style="margin-bottom:0">
<label class="form-label" for="h_situacion">Situación</label>
<div class="select-wrap">
<select class="form-input form-select" id="h_situacion" name="h_situacion"
onchange="onSituacionChange(this.value)" required>
<option value="">— Selecciona situación —</option>
<option value="ACTIVO">ACTIVO</option>
<!-- <option value="EN REPARACIÓN">EN REPARACIÓN</option> -->
<option value="ALTA">ALTA</option>
<option value="BAJA">BAJA</option>
</select>
<svg class="select-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<polyline points="6 9 12 15 18 9"/>
</svg>
</div>
</div>
<div class="form-group" style="margin-bottom:0">
<label class="form-label" for="h_poblacion">Población</label>
<div class="select-wrap">
<select class="form-input form-select" id="h_poblacion" name="h_poblacion"
onchange="cargarUnidades(this.value)" disabled>
<option value="">— Selecciona población —</option>
{% for p in poblaciones %}
<option value="{{ p['id'] }}">{{ p['poblacion'] }}</option>
{% endfor %}
</select>
<svg class="select-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<polyline points="6 9 12 15 18 9"/>
</svg>
</div>
</div>
<div class="form-group col-2" style="margin-bottom:0">
<label class="form-label" for="h_unidad">Unidad</label>
<div class="select-wrap">
<select class="form-input form-select" id="h_unidad" name="h_unidad" disabled>
<option value="">— Primero selecciona población —</option>
</select>
<svg class="select-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<polyline points="6 9 12 15 18 9"/>
</svg>
</div>
</div>
<div class="form-group col-full" style="margin-bottom:0">
<label class="form-label" for="h_obs">Observaciones</label>
<input class="form-input" type="text" id="h_obs" name="h_observaciones"
placeholder="Descripción…">
</div>
</div>
<button type="submit" class="btn btn-primary btn-sm">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
</svg>
Añadir al historial
</button>
</form>
</div>
{% endif %}
{% if vehiculo %}
{# ── DOCUMENTOS PDF ── #}
<div class="section-title" style="margin-top:32px">Documentos PDF</div>
{# Listado de documentos existentes #}
{% if documentos %}
<div class="table-wrap" style="margin-bottom:16px;">
<table>
<thead>
<tr>
<th>Nombre</th>
<th>Fecha</th>
<th style="text-align:right">Acciones</th>
</tr>
</thead>
<tbody>
{% for doc in documentos %}
<tr>
<td>
<div style="display:flex;align-items:center;gap:8px;">
<i class="bi bi-file-earmark-text" style="color: salmon;"></i>
<strong style="font-size:13px;">{{ doc['nombre'] }}</strong>
</div>
</td>
<td style="font-size:12px;color:var(--muted);">{{ doc['fecha'] }}</td>
<td style="text-align:right;">
<div style="display:flex;gap:6px;justify-content:flex-end;">
<a href="{{ url_for('documentos_ver', doc_id=doc['id']) }}"
target="_blank" class="btn btn-ghost btn-sm" title="Ver">
<i class="bi bi-eye"></i>
Ver
</a>
<a href="{{ url_for('documentos_descargar', doc_id=doc['id']) }}"
class="btn btn-ghost btn-sm" title="Descargar">
<i class="bi bi-download"></i>
Descargar
</a>
<form method="POST"
action="{{ url_for('documentos_eliminar', doc_id=doc['id']) }}">
<input type="hidden" name="vid" value="{{ vehiculo['id'] }}">
<input type="hidden" name="_q" value="{{ q|default('') }}">
<input type="hidden" name="_incl_bajas" value="{{ incl_bajas|default('0') }}">
<button type="button" class="btn btn-danger btn-sm"
onclick="if(confirm('¿Eliminar documento «{{ doc['nombre'] }}»?')) this.closest('form').submit()">
Eliminar
</button>
</form>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<p style="color:var(--muted);font-size:13px;margin-bottom:16px;">
No hay documentos adjuntos para este vehículo.
</p>
{% endif %}
{# Formulario subir nuevo documento #}
<div style="background:var(--bg);border:1px solid var(--border);
border-radius:10px;padding:20px;">
<p style="font-size:11px;font-weight:600;letter-spacing:.7px;
text-transform:uppercase;color:var(--muted);margin-bottom:14px;">
Añadir documento <5Mb
</p>
<form method="POST"
action="{{ url_for('documentos_upload', id=vehiculo['id']) }}"
enctype="multipart/form-data">
<input type="hidden" name="_q" value="{{ q|default('') }}">
<input type="hidden" name="_incl_bajas" value="{{ incl_bajas|default('0') }}">
<input type="hidden" name="_desde" value="{{ desde|default('') }}">
<input type="hidden" name="_hasta" value="{{ hasta|default('') }}">
<input type="hidden" name="_q_itv" value="{{ q_itv|default('') }}">
<input type="hidden" name="_origen" value="{{ origen|default('') }}">
<input type="hidden" name="_q_viat" value="{{ q_viat|default('') }}">
<div class="form-grid" style="margin-bottom:12px;">
<div class="form-group" style="margin-bottom:0; width: 300px">
<label class="form-label">Nombre del documento</label>
<input class="form-input" style="background-color: white;" type="text" name="nombre_doc"
placeholder="Ej. Permiso circulación, Seguro, etc…">
</div>
<div class="form-group" style="margin-bottom:0;margin-left: 80px;" >
<label class="form-label">Archivo PDF</label>
<input class="form-control" type="file" name="pdf" id="pdfInput" accept=".pdf"
onchange="mostrarArchivo(this)"
style="font-size:13px;color:var(--text);padding:8px 0;">
</div>
</div>
<!-- style="font-size:13px;color:var(--text);padding:8px 0;" -->
<div id="pdfInfo" style="display:none;margin-bottom:12px;font-size:12px;
color:var(--accent);padding:8px 12px;
background:rgba(92,110,248,.08);border-radius:6px;">
</div>
<button type="submit" id="btnSubir" class="btn btn-primary btn-sm"
style="display:none;">
<i class="bi bi-upload"></i>
Subir documento
</button>
</form>
</div>
{% endif %}
</div> {# ← cierre de form-card #}
<script>
function mostrarArchivo(input) {
var info = document.getElementById('pdfInfo');
var btnSubir = document.getElementById('btnSubir');
if (input.files && input.files[0]) {
var f = input.files[0];
var size = (f.size / 1024).toFixed(1) + ' KB';
info.textContent = '📄 ' + f.name + ' (' + size + ')';
info.style.display = 'block';
btnSubir.style.display = 'inline-flex';
}
}
// mostrar archivo solo unico documento ficha tecnica.pdf
// function mostrarArchivo(input) {
// var nombre = document.getElementById('pdfNombre');
// var btnSubir = document.getElementById('btnSubir');
// if (input.files && input.files[0]) {
// nombre.textContent = '📄 ' + input.files[0].name;
// nombre.style.display = 'block';
// if (btnSubir) btnSubir.style.display = 'inline-flex';
// }
// }
function handleDrop(e) {
e.preventDefault();
document.getElementById('dropZone').style.borderColor = 'var(--border)';
var files = e.dataTransfer.files;
if (files.length && files[0].type === 'application/pdf') {
var input = document.getElementById('pdfInput');
input.files = files;
mostrarArchivo(input);
} else {
alert('Solo se permiten archivos PDF.');
}
}
</script>
<script>
const checkbox = document.getElementById('lanzadestellos');
const icono = document.getElementById('icono-lanzadestellos');
const texto = document.getElementById('texto-lanzadestellos');
checkbox.addEventListener('change', function () {
if (this.checked) {
icono.style.display = 'inline';
// texto.textContent = '✓ Con lanzadestellos';
} else {
icono.style.display = 'none';
// texto.textContent = '✗ Sin lanzadestellos';
}
});
</script>
<script>
function confirmarEliminar(btn) {
if (confirm('¿Eliminar esta entrada del historial?')) {
btn.closest('form').submit();
}
}
function formatFecha(f) {
if (!f) return '';
// Si ya está en formato DD-MM-YYYY lo devuelve tal cual
if (/^\d{2}-\d{2}-\d{4}$/.test(f)) return f;
// Convertir YYYY-MM-DD a DD-MM-YYYY
var partes = f.substring(0, 10).split('-');
if (partes.length === 3) return partes[2] + '-' + partes[1] + '-' + partes[0];
return f;
}
function fila(label, valor) {
if (!valor) return '';
return `<tr>
<td style="font-weight:600;color:#555;padding:6px 12px;width:40%;border-bottom:1px solid #eee;font-size:11px;text-transform:uppercase;letter-spacing:.5px">${label}</td>
<td style="padding:6px 12px;border-bottom:1px solid #eee;font-size:13px">${valor}</td>
</tr>`;
}
function onSituacionChange(valor) {
var selectPoblacion = document.getElementById('h_poblacion');
var selectUnidad = document.getElementById('h_unidad');
var inputGrupo = document.getElementById('h_grupo');
var campSituacion = document.getElementById('situacion');
// Resetear desplegables dependientes
selectPoblacion.value = '';
selectUnidad.innerHTML = '<option value="">— Primero selecciona población —</option>';
selectUnidad.disabled = true;
if (valor === 'ACTIVO') {
// Solo ACTIVO habilita población y unidad
selectPoblacion.disabled = false;
inputGrupo.disabled = false;
}
}
function confirmarEliminarVehiculo(btn) {
if (confirm('¿Eliminar el vehículo {{ nombre_vehiculo }}? Esta acción no se puede deshacer.')) {
btn.closest('form').submit();
}
}
function cargarUnidades(poblacionId) {
var selectUnidad = document.getElementById('h_unidad');
selectUnidad.innerHTML = '<option value="">— Cargando… —</option>';
selectUnidad.disabled = true;
if (!poblacionId) {
selectUnidad.innerHTML = '<option value="">— Primero selecciona población —</option>';
return;
}
fetch('/api/unidades/' + poblacionId)
.then(function(r) { return r.json(); })
.then(function(data) {
if (data.length === 0) {
selectUnidad.innerHTML = '<option value="">— Sin unidades disponibles —</option>';
return;
}
var opciones = '<option value="">— Selecciona unidad —</option>';
data.forEach(function(u) {
opciones += '<option value="' + u.unidad + '">' + u.unidad + '</option>';
});
selectUnidad.innerHTML = opciones;
selectUnidad.disabled = false;
})
.catch(function() {
selectUnidad.innerHTML = '<option value="">— Error al cargar —</option>';
});
}
function checkMatricula(valor) {
var bloque = document.getElementById('bloque-intervenido');
if (valor && valor.trim().toUpperCase().endsWith('Q')) {
bloque.style.display = 'block';
} else {
bloque.style.display = 'none';
}
}
</script>
<script>
function imprimirFicha() {
var v = {
id: '{{ vehiculo["id"] }}',
m_oficial: '{{ vehiculo["m_oficial"] or "" }}',
m_reservada: '{{ vehiculo["m_reservada"] or "" }}',
m_propia: '{{ vehiculo["m_propìa"] or "" }}',
denominacion: '{{ vehiculo["denominacion"] or "" }}',
marca: '{{ vehiculo["marca"] or "" }}',
modelo: '{{ vehiculo["modelo"] or "" }}',
tipo: '{{ vehiculo["tipo"] or "" }}',
color: '{{ vehiculo["color"] or "" }}',
VIN: '{{ vehiculo["VIN"] or "" }}',
matricula: '{{ vehiculo["numero_identificacion"] or "" }}',
potencia: '{{ vehiculo["potencia"] or "" }}',
cilindrada: '{{ vehiculo["cilindrada"] or "" }}',
combustible: '{{ vehiculo["combustible"] or "" }}',
neumaticos: '{{ vehiculo["neumaticos"] or "" }}',
plazas: '{{ vehiculo["plazas"] or "" }}',
km: '{{ vehiculo["km"] or "" }}',
km_1: '{{ vehiculo["km_1"] or "" }}',
itv_ultima: '{{ vehiculo["itv_ultima"] or "" }}',
itv: '{{ vehiculo["itv"] or "" }}',
situacion: '{{ vehiculo["situacion"] or "" }}',
poblacion: '{{ vehiculo["poblacion"] or "" }}',
unidad: '{{ vehiculo["unidad"] or "" }}',
poliza: '{{ vehiculo["poliza"] or "" }}',
viat: '{{ vehiculo["viat"] or "" }}',
};
var fecha = new Date().toLocaleDateString('es-ES');
// Construir tabla de historial
var historialRows = '';
{% if historial %}
{% for h in historial %}
historialRows += `<tr>
<td>${'{{ h["fecha"] | fecha_es }}' || '—'}</td>
<td>${'{{ h["matricula"] or "—" }}'}</td>
<td>${'{{ h["situacion"] or "—" }}'}</td>
<td>${'{{ h["poblacion"] or "—" }}'}</td>
<td>${'{{ h["unidad"] or "—" }}'}</td>
<td>${'{{ h["grupo"] or "—" }}'}</td>
<td style="color:#555">${'{{ h["observaciones"] or "—" }}'}</td>
</tr>`;
{% endfor %}
{% endif %}
var htmlHistorial = historialRows ? `
<div class="section" style="margin-top:20px">
<div class="section-title">Historial</div>
<table>
<thead>
<tr>
<th>Fecha</th>
<th>Matrícula</th>
<th>Situación</th>
<th>Población</th>
<th>Unidad</th>
<th>Grupo</th>
<th>Observaciones</th>
</tr>
</thead>
<tbody>${historialRows}</tbody>
</table>
</div>` : '';
var html = `<!DOCTYPE html><html><head><meta charset="UTF-8">
<title>Ficha vehículo ${v.m_oficial}</title>
<style>
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family: Arial, sans-serif; color:#1a1d29; padding:24px; font-size:13px; }
.header { display:flex; justify-content:space-between; align-items:flex-start;
border-bottom:3px solid #5c6ef8; padding-bottom:16px; margin-bottom:20px; }
.header h1 { font-size:20px; color:#5c6ef8; margin-bottom:4px; }
.header .meta { font-size:11px; color:#888; }
.badge { background:#5c6ef8; color:#fff; font-size:11px; font-weight:700;
padding:3px 10px; border-radius:20px; display:inline-block; margin-top:6px; }
.badge.baja { background:#ef4444; }
.badge.activo { background:#10b981; }
.section { margin-bottom:20px; }
.section-title { font-size:10px; font-weight:700; letter-spacing:1px;
text-transform:uppercase; color:#5c6ef8;
border-bottom:1px solid #5c6ef8; padding-bottom:4px;
margin-bottom:8px; }
table { width:100%; border-collapse:collapse; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
/* Tabla historial ocupa ancho completo */
.section table th {
background:#5c6ef8; color:#fff; padding:5px 8px;
text-align:left; font-size:9px; letter-spacing:.5px;
}
.section table td {
padding:5px 8px; border-bottom:1px solid #eee; font-size:10px;
}
.section table tr:nth-child(even) td { background:#f5f6fa; }
/* Filas datos vehículo */
.data-table td:first-child {
font-weight:600; color:#555; width:40%;
font-size:11px; text-transform:uppercase; letter-spacing:.5px;
}
.data-table td { padding:6px 12px; border-bottom:1px solid #eee; font-size:13px; }
.footer { margin-top:24px; font-size:10px; color:#aaa;
text-align:center; border-top:1px solid #eee; padding-top:12px; }
@media print {
body { padding:12px; }
@page { margin:1.5cm; size: A4; }
}
</style>
</head><body>
<div class="header">
<div>
<div class="meta">Ficha de vehículo · ID #${v.id}</div>
<h1>${v.m_oficial || v.denominacion || 'Sin matrícula'}</h1>
<h3 class="badge ${v.situacion === 'ALTA' ? 'alta' : v.situacion === 'BAJA' ? 'baja' : v.situacion === 'ACTIVO' ? 'activo' : ''}">
${v.situacion || 'Sin situación'}
</h3>
</div>
<div style="text-align:right">
<div class="meta">Generado el ${fecha}</div>
<div style="font-size:18px;font-weight:700;margin-top:8px">${v.marca} ${v.modelo}</div>
<div class="meta">${v.denominacion}</div>
</div>
</div>
<div class="grid">
<div>
<div class="section">
<div class="section-title">Identificación</div>
<table class="data-table">
${fila('M. oficial', v.m_oficial)}
${fila('M. reservada', v.m_reservada)}
${fila('M. propia', v.m_propia)}
${fila('VIN', v.VIN)}
${fila('Denominación', v.denominacion)}
</table>
</div>
<div class="section">
<div class="section-title">Características técnicas</div>
<table class="data-table">
${fila('Marca', v.marca)}
${fila('Modelo', v.modelo)}
${fila('Tipo', v.tipo)}
${fila('Color', v.color)}
${fila('Cilindrada', v.cilindrada)}
${fila('Potencia', v.potencia ? v.potencia + ' CV' : '')}
${fila('Combustible', v.combustible)}
${fila('Neumáticos', v.neumaticos)}
${fila('Plazas', v.plazas)}
</table>
</div>
</div>
<div>
<div class="section">
<div class="section-title">Situación y destino</div>
<table class="data-table">
${fila('Situación', v.situacion)}
${fila('Población', v.poblacion)}
${fila('Unidad', v.unidad)}
</table>
</div>
<div class="section">
<div class="section-title">ITV y kilometraje</div>
<table class="data-table">
${fila('Km actuales', v.km)}
${fila('Próxima ITV', formatFecha(v.itv))}
</table>
</div>
<div class="section">
<div class="section-title">Otros datos</div>
<table class="data-table">
${fila('Póliza', v.poliza)}
${fila('Via-T', v.viat)}
</table>
</div>
</div>
</div>
${htmlHistorial}
</body></html>`;
var win = window.open('', '_blank', 'width=1000,height=750');
win.document.write(html);
win.document.close();
win.focus();
setTimeout(function() { win.print(); }, 400);
}
</script>
{% endblock %}
<!-- OPCION CARGAR SOLO PDF FICHA TECNICA -->
<!-- {% if vehiculo %}
{# ── DOCUMENTO PDF ── #}
<div class="section-title" style="margin-top:32px;">Ficha técnica PDF</div>
<div style="background:var(--surface);border:1px solid var(--border);
border-radius:var(--radius);padding:24px;margin-bottom:20px;">
{% if vehiculo['pdf'] %}
{# PDF existente #}
<div style="display:flex;align-items:center;justify-content:space-between;
flex-wrap:wrap;gap:12px;">
<div style="display:flex;align-items:center;gap:12px;">
<i class="bi bi-file-earmark-text" style="font-size: 2rem; color: salmon;"></i>
<div>
<div style="font-size:13px;font-weight:600;color:var(--text)">
{{ vehiculo['pdf'] }}
</div>
<div style="font-size:11px;color:var(--muted);margin-top:2px;">
Documento adjunto
</div>
</div>
</div>
<div style="display:flex;gap:8px;">
<a href="{{ url_for('vehiculos_pdf', id=vehiculo['id']) }}"
target="_blank" class="btn btn-ghost btn-sm">
<i class="bi bi-eye"></i>
Ver PDF
</a>
<a href="{{ url_for('vehiculos_pdf', id=vehiculo['id']) }}"
download class="btn btn-ghost btn-sm">
<i class="bi bi-download"></i>
Descargar
</a>
<form method="POST"
action="{{ url_for('vehiculos_pdf_eliminar', id=vehiculo['id']) }}">
<input type="hidden" name="_q" value="{{ q|default('') }}">
<input type="hidden" name="_incl_bajas" value="{{ incl_bajas|default('0') }}">
<button type="button" class="btn btn-danger btn-sm"
onclick="if(confirm('¿Eliminar el documento PDF?')) this.closest('form').submit()">
Eliminar PDF
</button>
</form>
</div>
</div>
{# Reemplazar PDF existente #}
<div style="margin-top:16px;padding-top:16px;border-top:1px solid var(--border);">
<p style="font-size:11px;color:var(--muted);margin-bottom:10px;">
Reemplazar documento actual:
</p>
<form method="POST"
action="{{ url_for('vehiculos_upload', id=vehiculo['id']) }}"
enctype="multipart/form-data"
style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;">
<input type="hidden" name="_q" value="{{ q|default('') }}">
<input type="hidden" name="_incl_bajas" value="{{ incl_bajas|default('0') }}">
<input type="hidden" name="_desde" value="{{ desde|default('') }}">
<input type="hidden" name="_hasta" value="{{ hasta|default('') }}">
<input type="hidden" name="_q_itv" value="{{ q_itv|default('') }}">
<input type="hidden" name="_origen" value="{{ origen|default('') }}">
<input type="hidden" name="_q_viat" value="{{ q_viat|default('') }}">
<input type="file" name="pdf" accept=".pdf"
style="font-size:13px;color:var(--text);">
<button type="submit" class="btn btn-ghost btn-sm">
<i class="bi bi-upload"></i>
Reemplazar
</button>
</form>
</div>
{% else %}
{# Sin PDF - formulario de subida #}
<form method="POST"
action="{{ url_for('vehiculos_upload', id=vehiculo['id']) }}"
enctype="multipart/form-data">
<input type="hidden" name="_q" value="{{ q|default('') }}">
<input type="hidden" name="_incl_bajas" value="{{ incl_bajas|default('0') }}">
<input type="hidden" name="_desde" value="{{ desde|default('') }}">
<input type="hidden" name="_hasta" value="{{ hasta|default('') }}">
<input type="hidden" name="_q_itv" value="{{ q_itv|default('') }}">
<input type="hidden" name="_origen" value="{{ origen|default('') }}">
<input type="hidden" name="_q_viat" value="{{ q_viat|default('') }}">
<div style="border:2px dashed var(--border);border-radius:10px;padding:32px;
text-align:center;transition:border-color .2s;"
id="dropZone"
ondragover="event.preventDefault();this.style.borderColor='var(--accent)'"
ondragleave="this.style.borderColor='var(--border)'"
ondrop="handleDrop(event)">
<i class="bi bi-file-earmark-arrow-down" style="font-size: 2rem; color: gray;"></i>
<p style="font-size:13px;color:var(--muted);margin-bottom:12px;">
Arrastra un PDF aquí o pulsa para seleccionar
</p>
<input type="file" name="pdf" id="pdfInput" accept=".pdf"
style="display:none;" onchange="mostrarArchivo(this)">
<label for="pdfInput" class="btn btn-ghost" style="cursor:pointer;">
Seleccionar PDF
</label>
<p id="pdfNombre" style="margin-top:10px;font-size:12px;color:var(--accent);display:none;"></p>
</div>
<button type="submit" id="btnSubir" class="btn btn-primary"
style="margin-top:14px;display:none;">
<i class="bi bi-upload"></i>
Subir PDF
</button>
</form>
{% endif %}
</div>
{% endif %} -->