pyfleet/templates/tablas/tipo.html

{% extends "base.html" %}
{% block title %}Denominación{% endblock %}
{% block content %}

<style>
html[data-theme="light"],
html[data-theme="light"] body {
    background: #f5f6fa;
}

html[data-theme="dark"],
html[data-theme="dark"] body {
    background: #0a111f;
}
</style>

<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap-icons/bootstrap-icons.css') }}">


<style>
  .nav-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    flex: 1 !important;
}

.nav-links > a {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    line-height: normal !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
}
</style>

<div class="page-header">
  <div class="page-eyebrow">Configuración</div>
  <div class="page-title"><i class="bi bi-bus-front"></i> Tipo vehículo</div>
  <div class="page-subtitle">Gestiona los tipos de vehículos.</div>
</div>

<div style="display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;">

  {# Formulario añadir #}
  <div style="background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;min-width:300px;">
    <p class="form-label" style="margin-bottom:14px;">Nuevo tipo vehículo</p>
    <form method="POST" action="{{ url_for('tipo_nueva') }}">
      <div class="form-group">
        <input class="form-input" type="text" name="tipo"
            placeholder="tipo de vehiculoNombre de la unidad"  required >
      </div>
   
      <button type="submit" class="btn btn-sm btn-primary" style="width:50%;margin-top:12px; display: block; margin-left: auto; margin-right: auto;">
        ✚ Añadir
      </button>
    </form>
  </div>

  {# Listado #}
  
  <!-- <div style="flex:1;min-width:320px;"> -->
  <div style="flex:1;min-width:320px;max-width: 800px;">


    {# Buscador #}
    <div class="search-wrap" style="margin-bottom:16px;max-width:100%">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
      </svg>
      <input type="text" id="searchDenom"
             placeholder="Buscar por tipo vehículo…"
             autocomplete="off"
             autofocus
             style="padding-right:32px; width: 500px;">
      <button type="button" id="clearSearch"
              style="display:none;position:absolute;right:325px;top:50%;
                     transform:translateY(-50%);background:none;border:none;
                     cursor:pointer;color:var(--muted);padding:4px;align-items:center;z-index:2;"
              onmouseover="this.style.color='var(--text)'"
              onmouseout="this.style.color='var(--muted)'">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
             stroke-width="2.5" style="pointer-events:none;display:block;">
          <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
        </svg>
      </button>
    </div>

    <p id="contador" style="margin-top:8px;font-size:12px;color:var(--muted)">
      {{ rows|length }} tipos vehículo
    </p>
    
    <div class="table-wrap">
      <table id="tabla">
        <thead>
          <tr">
            <th hidden>ID</th>
            <th>Tipo</th>
            <!-- <th>Literal</th> -->
          </tr>
        </thead>
        <tbody id="tbodyDenom">
          {% for r in rows %}
          {% set nombre_den = r['tipo'] %}
          <tr class="border-bottom">
            <td hidden class="td-id">{{ r['id'] }}</td>
            <td><strong>{{ r['tipo'] }}</strong></td>
            <!-- <td style="color:var(--muted);font-size:13px">{{ r['literal'] or '—' }}</td> -->
            
          </tr>
          {% else %}
          <tr>
            <td colspan="4">
              <div class="empty-state">Sin tipo registradas.</div>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    
  </div>
</div>

<script src="{{ url_for('static', filename='js/jquery-3.7.1.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/tabledit.min.js') }}"></script>

<script>
  var input    = document.getElementById('searchDenom');
  var clearBtn = document.getElementById('clearSearch');
  var contador = document.getElementById('contador');

  input.addEventListener('input', function() {
    clearBtn.style.display = this.value ? 'flex' : 'none';
    filtrar(this.value.trim().toLowerCase());
  });

  clearBtn.addEventListener('click', function() {
    input.value = '';
    this.style.display = 'none';
    input.focus();
    filtrar('');
  });

  function filtrar(q) {
    var filas    = document.querySelectorAll('#tbodyDenom tr');
    var visibles = 0;
    filas.forEach(function(tr) {
      var texto   = tr.innerText.toLowerCase();
      var mostrar = !q || texto.indexOf(q) !== -1;
      tr.style.display = mostrar ? '' : 'none';
      if (mostrar) visibles++;
    });
    contador.textContent = visibles + ' tipos' 
      + (q ? ' — filtrado por «' + q + '»' : '');
  }
</script>



<script>
$('#tabla').Tabledit({
    url:'/editar_tipo',

    editButton:true,
    deleteButton:true,
    restoreButton:false,
    hideIdentifier:false,

    buttons:{
        edit:{
            class:'btn btn-light btn-sm border-secondary rounded me-1 ',
            html:'<i class="bi bi-pencil"></i>'
        },
        // delete:{
        //     class:'btn btn-sm btn-light text-danger border me-1',
        //     html:'<i class="bi bi-trash"></i>'
        // },
        save:{
            class:'btn btn-sm btn-success',
            html:'Guardar'
        },
        // confirm:{
        //     class:'btn btn-sm btn-warning',
        //     html:'¿Seguro?'
        // }
    },

    columns:{
        identifier:[0,'id'],
        editable:[
            [1,'tipo'],
            // [2,'literal'],
        ]

    },

    onSuccess:function(data){
        if (data.action == "edit") {
            location.reload();
        }

        if (data.action == "delete") {
            location.reload();
        }
    
    console.log(data);
    }  
});

$('#tabla td:last-child').attr(
    'style',
    'white-space: nowrap; width:185px;'
);
</script>

{% endblock %}