API tools faq
paste
Advertisement
losvilos

lista_clientes.html

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