API tools faq
paste
Advertisement
losvilos

lista_clientes.html

losvilos
Feb 27th, 2025 (edited)
284
0
22 hours
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 16.67 KB | Help | 0 0
raw download clone embed print report
  1. {% extends 'base.html' %}
  2. {% block content %}
  3.  
  4. <div class="container mt-4">
  5. <!-- Campos ocultos para contrato.js -->
  6. <input type="hidden" id="id_cliente" name="id_cliente">
  7. <input type="hidden" id="id_direccion_instalacion" name="id_direccion_instalacion">
  8.     <h2>Mantenimiento de Clientes</h2>
  9.     <button class="btn btn-primary mb-3" data-toggle="modal" data-target="#modalAgregarCliente">
  10.         <i class="fa fa-plus"></i> Nuevo Registro
  11.     </button>
  12.     <form method="get">
  13.         <input type="text" name="q" placeholder="Buscar clientes..." value="{{ request.GET.q }}">
  14.         <button type="submit">Buscar</button>
  15.     </form>
  16.     <table class="table table-striped">
  17.         <thead>
  18.             <tr>
  19.                 <th>N° Documento</th>
  20.                 <th>Cliente</th>
  21.                 <th>Móvil</th>
  22.                 <th>Email</th>
  23.                 <th>Estado</th>
  24.                 <th>Acción</th>
  25.             </tr>
  26.         </thead>
  27.         <tbody>
  28.             {% for cliente in clientes %}
  29.             <tr data-id="{{ cliente.id }}">
  30.                 <td class="documento">{{ cliente.documento }}</td>
  31.                 <td class="nombre">
  32.                     {{ cliente.nombre }} {{ cliente.apellido_paterno }}{% if cliente.apellido_materno %} {{ cliente.apellido_materno }}{% endif %}
  33.                 </td>
  34.                 <td class="telefono">{{ cliente.telefono }}</td>
  35.                 <td class="email">{{ cliente.email }}</td>
  36.                 <td>
  37.                     <span class="badge estatus {% if cliente.estatus %}bg-success{% else %}bg-danger{% endif %}">
  38.                         {% if cliente.estatus %}Activo{% else %}Inactivo{% endif %}
  39.                     </span>
  40.                 </td>
  41.                 <td>
  42.                     <!-- Botón para ver detalle -->
  43.                     <a class="btn btn-sm btn-primary" href="{% url 'detalle_cliente_html' cliente.id %}">
  44.                         Ver detalle
  45.                     </a>
  46.                     <!-- Botón para editar -->
  47.                     <button class="btn btn-info btn-sm btn-editar" data-id="{{ cliente.id }}">
  48.                         <i class="fa fa-edit"></i> Editar
  49.                     </button>
  50.                     <!-- Botón para eliminar -->
  51.                     <button class="btn btn-danger btn-sm btn-eliminar" data-id="{{ cliente.id }}">
  52.                         <i class="fa fa-trash"></i> Eliminar
  53.                     </button>
  54.                 </td>
  55.             </tr>
  56.             {% endfor %}
  57.         </tbody>
  58.     </table>
  59.     <nav>
  60.         <ul class="pagination">
  61.             {% if clientes.has_previous %}
  62.             <li class="page-item">
  63.                 <a class="page-link" href="?{{ querystring.urlencode }}&page=1">&laquo; Primera</a>
  64.             </li>
  65.             <li class="page-item">
  66.                 <a class="page-link" href="?{{ querystring.urlencode }}&page={{ clientes.previous_page_number }}">Anterior</a>
  67.             </li>
  68.             {% endif %}
  69.  
  70.             {% for page in clientes.paginator.page_range %}
  71.             <li class="page-item {% if clientes.number == page %}active{% endif %}">
  72.                 <a class="page-link" href="?{{ querystring.urlencode }}&page={{ page }}">{{ page }}</a>
  73.             </li>
  74.             {% endfor %}
  75.  
  76.             {% if clientes.has_next %}
  77.             <li class="page-item">
  78.                 <a class="page-link" href="?{{ querystring.urlencode }}&page={{ clientes.next_page_number }}">Siguiente</a>
  79.             </li>
  80.             <li class="page-item">
  81.                 <a class="page-link" href="?{{ querystring.urlencode }}&page={{ clientes.paginator.num_pages }}">Última &raquo;</a>
  82.             </li>
  83.             {% endif %}
  84.         </ul>
  85.     </nav>
  86. </div>
  87.  
  88. <!-- Modal para Registrar Cliente -->
  89. <div class="modal fade" id="modalAgregarCliente" tabindex="-1" aria-labelledby="modalAgregarClienteLabel" aria-hidden="true">
  90.     <div class="modal-dialog modal-xl">
  91.       <div class="modal-content">
  92.         <div class="modal-header">
  93.           <h5 class="modal-title">Registrar Cliente</h5>
  94.           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  95.             <span aria-hidden="true">&times;</span>
  96.           </button>
  97.         </div>
  98.         <form id="formNuevoCliente" method="POST">
  99.           {% csrf_token %}
  100.           <div class="modal-body">
  101.             <div class="container-fluid">
  102.               <div class="row">
  103.                 <!-- Primera columna -->
  104.                 <div class="col-md-4 col-sm-6">
  105.                   <div class="form-group">
  106.                     <label for="documento">N° Documento (*)</label>
  107.                     <input type="text" class="form-control" name="documento" id="documento" required>
  108.                   </div>
  109.                   <div class="form-group">
  110.                     <label for="apellido_paterno">Apellido Paterno (*)</label>
  111.                     <input type="text" class="form-control" name="apellido_paterno" id="apellido_paterno" required>
  112.                   </div>
  113.                   <div class="form-group">
  114.                     <label for="fecha_nacimiento">Fecha de Nacimiento (*)</label>
  115.                     <input type="date" class="form-control" name="fecha_nacimiento" id="fecha_nacimiento" required>
  116.                   </div>
  117.                   <div class="form-group">
  118.                     <label for="zona">Zona (*)</label>
  119.                     <select id="id_zona" name="zona" class="form-control" required>
  120.                       <option value="">Selecciona una zona</option>
  121.                       {% for zona in zonas %}
  122.                       <option value="{{ zona.id }}">{{ zona.nombre }}</option>
  123.                       {% endfor %}
  124.                     </select>
  125.                   </div>
  126.                 </div>
  127.                 <!-- Segunda columna -->
  128.                 <div class="col-md-4 col-sm-6">
  129.                   <div class="form-group">
  130.                     <label for="estatus">Estatus</label>
  131.                     <select name="estatus" id="estatus" class="form-control">
  132.                       <option value="1">Activo</option>
  133.                       <option value="0">Inactivo</option>
  134.                     </select>
  135.                   </div>
  136.                   <div class="form-group">
  137.                     <label for="apellido_materno">Apellido Materno (*)</label>
  138.                     <input type="text" class="form-control" name="apellido_materno" id="apellido_materno">
  139.                   </div>
  140.                   <div class="form-group">
  141.                     <label for="movil">Móvil (*)</label>
  142.                     <input type="text" class="form-control" name="telefono" id="telefono" required>
  143.                   </div>
  144.                   <div class="form-group">
  145.                     <label for="avenida">Avenidas (*)</label>
  146.                     <select id="id_avenida" name="avenida" class="form-control" required>
  147.                       <option value="">Selecciona una avenida</option>
  148.                       {% for avenida in avenidas %}
  149.                       <option value="{{ avenida.id }}">{{ avenida.nombre }}</option>
  150.                       {% endfor %}
  151.                     </select>
  152.                   </div>
  153.                 </div>
  154.                 <!-- Tercera columna -->
  155.                 <div class="col-md-4 col-sm-6">
  156.                   <div class="form-group">
  157.                     <label for="nombre">Nombre (*)</label>
  158.                     <input type="text" class="form-control" name="nombre" id="nombre" required>
  159.                   </div>
  160.                   <div class="form-group">
  161.                     <label for="sexo">Sexo (*)</label>
  162.                     <select name="sexo" id="sexo" class="form-control" required>
  163.                       <option value="">Seleccionar</option>
  164.                       <option value="M">Masculino</option>
  165.                       <option value="F">Femenino</option>
  166.                     </select>
  167.                   </div>
  168.                   <div class="form-group">
  169.                     <label for="email">Email</label>
  170.                     <input type="email" class="form-control" name="email" id="email">
  171.                   </div>
  172.                   <!-- Campo para la dirección, que se creará en el modelo Direccion -->
  173.                   <div class="form-group">
  174.                     <label for="direccion">Dirección (*)</label>
  175.                     <input type="text" class="form-control" name="direccion" id="direccion" required>
  176.                   </div>
  177.                 </div>
  178.               </div> <!-- /.row -->
  179.             </div> <!-- /.container-fluid -->
  180.           </div> <!-- /.modal-body -->
  181.           <div class="modal-footer">
  182.             <button type="submit" class="btn btn-success">Guardar</button>
  183.             <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
  184.           </div>
  185.         </form>
  186.       </div> <!-- /.modal-content -->
  187.     </div> <!-- /.modal-dialog -->
  188.   </div> <!-- /.modal -->
  189.  
  190.  
  191. <!-- Modal para Editar Cliente -->
  192. <div class="modal fade" id="modalEditarCliente" tabindex="-1" aria-labelledby="modalEditarClienteLabel" aria-hidden="true">
  193.     <div class="modal-dialog modal-xl">
  194.         <div class="modal-content">
  195.             <div class="modal-header">
  196.                 <h5 class="modal-title">Editar Cliente</h5>
  197.                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  198.                     <span aria-hidden="true">&times;</span>
  199.                 </button>
  200.             </div>
  201.             <form id="formEditarCliente" method="POST" action="">
  202.                 {% csrf_token %}
  203.                 <!-- Campo oculto para almacenar el ID del cliente -->
  204.                 <input type="hidden" id="edit_id" name="id">
  205.                
  206.                 <div class="modal-body">
  207.                     <div class="container-fluid">
  208.                         <div class="row">
  209.                             <!-- Primera columna -->
  210.                             <div class="col-md-4 col-sm-6">
  211.                                 <div class="form-group">
  212.                                     <label for="edit_documento">N° Documento (*)</label>
  213.                                     <input type="text" class="form-control" name="documento" id="edit_documento" required>
  214.                                 </div>
  215.                                 <div class="form-group">
  216.                                     <label for="edit_apellido_paterno">Apellido Paterno (*)</label>
  217.                                     <input type="text" class="form-control" name="apellido_paterno" id="edit_apellido_paterno" required>
  218.                                 </div>
  219.                                 <div class="form-group">
  220.                                     <label for="edit_fecha_nacimiento">Fecha de Nacimiento (*)</label>
  221.                                     <input type="date" class="form-control" name="fecha_nacimiento" id="edit_fecha_nacimiento" required>
  222.                                 </div>
  223.                                 <div class="form-group">
  224.                                     <label for="edit_zona">Zona (*)</label>
  225.                                     <select id="edit_zona" name="zona" class="form-control" required>
  226.                                         <option value="">Selecciona una zona</option>
  227.                                         {% for zona in zonas %}
  228.                                         <option value="{{ zona.id }}">{{ zona.nombre }}</option>
  229.                                         {% endfor %}
  230.                                     </select>
  231.                                 </div>
  232.                             </div>
  233.                             <!-- Segunda columna -->
  234.                             <div class="col-md-4 col-sm-6">
  235.                               <div class="form-group">
  236.                                 <label for="edit_estatus">Estatus</label>
  237.                                 <select name="estatus" id="edit_estatus" class="form-control" required>
  238.                                     <option value="1" {% if cliente.estatus %}selected{% endif %}>Activo</option>
  239.                                     <option value="0" {% if not cliente.estatus %}selected{% endif %}>Inactivo</option>
  240.                                 </select>
  241.                             </div>
  242.                                 <div class="form-group">
  243.                                     <label for="edit_apellido_materno">Apellido Materno (*)</label>
  244.                                     <input type="text" class="form-control" name="apellido_materno" id="edit_apellido_materno">
  245.                                 </div>
  246.                                 <div class="form-group">
  247.                                     <label for="edit_telefono">Móvil (*)</label>
  248.                                     <input type="text" class="form-control" name="telefono" id="edit_telefono" required>
  249.                                 </div>
  250.                                 <div class="form-group">
  251.                                     <label for="edit_avenida">Avenidas (*)</label>
  252.                                     <select id="edit_avenida" name="avenida" class="form-control" required>
  253.                                         <option value="">Selecciona una avenida</option>
  254.                                         {% for avenida in avenidas %}
  255.                                         <option value="{{ avenida.id }}">{{ avenida.nombre }}</option>
  256.                                         {% endfor %}
  257.                                     </select>
  258.                                 </div>
  259.                             </div>
  260.                             <!-- Tercera columna -->
  261.                             <div class="col-md-4 col-sm-6">
  262.                                 <div class="form-group">
  263.                                     <label for="edit_nombre">Nombre (*)</label>
  264.                                     <input type="text" class="form-control" name="nombre" id="edit_nombre" required>
  265.                                 </div>
  266.                                 <div class="form-group">
  267.                                     <label for="edit_sexo">Sexo (*)</label>
  268.                                     <select name="sexo" id="edit_sexo" class="form-control" required>
  269.                                         <option value="">Seleccionar</option>
  270.                                         <option value="M">Masculino</option>
  271.                                         <option value="F">Femenino</option>
  272.                                     </select>
  273.                                 </div>
  274.                                 <div class="form-group">
  275.                                     <label for="edit_email">Email</label>
  276.                                     <input type="email" class="form-control" name="email" id="edit_email">
  277.                                 </div>
  278.                                 <!-- Campo para la dirección, que se actualizará en el modelo Direccion -->
  279.                                 <div class="form-group">
  280.                                     <label for="edit_direccion">Dirección (*)</label>
  281.                                     <input type="text" class="form-control" name="direccion" id="edit_direccion" required>
  282.                                 </div>
  283.                             </div>
  284.                         </div> <!-- /.row -->
  285.                     </div> <!-- /.container-fluid -->
  286.                 </div> <!-- /.modal-body -->
  287.                 <div class="modal-footer">
  288.                     <button type="submit" class="btn btn-success">Guardar</button>
  289.                     <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
  290.                 </div>
  291.             </form>
  292.         </div> <!-- /.modal-content -->
  293.     </div> <!-- /.modal-dialog -->
  294. </div> <!-- /.modal fade -->
  295.  
  296.  
  297.  
  298. <script>
  299.   document.getElementById('formNuevoCliente').addEventListener('submit', function(event) {
  300.       event.preventDefault();  // Evita que el formulario se envíe de manera tradicional
  301.  
  302.       const formData = new FormData(this);
  303.  
  304.       fetch("{% url 'agregar_cliente' %}", {
  305.           method: 'POST',
  306.           body: formData,
  307.           headers: {
  308.               'X-CSRFToken': '{{ csrf_token }}'
  309.           }
  310.       })
  311.       .then(response => response.json())
  312.       .then(data => {
  313.           if (data.mensaje) {
  314.               alert(data.mensaje);  // Muestra el mensaje de éxito
  315.               $('#modalAgregarCliente').modal('hide');  // Cierra el modal
  316.               location.reload();  // Recarga la página para actualizar la lista
  317.           } else if (data.error) {
  318.               alert(data.error);  // Muestra el mensaje de error
  319.           }
  320.       })
  321.       .catch(error => {
  322.           console.error('Error:', error);
  323.       });
  324.   });
  325.   </script>
  326.  
  327.  
  328.  
  329.  
  330.  
  331. {% endblock %}
  332.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!