fir btn download excel file

main.py

@@ -469,7 +469,7 @@ def user_home():
     data_contact = dbUsers.get_all_data(q_contact)    
     
     # return render_template(v['tmp_user']['home'], token_data=token_data, f_mnsj=f_mnsj, nombre=nombre, exp=exp, data_contact=data_contact)
-    return render_template(v['tmp_user']['home'], f_mnsj=f_mnsj, nombre=nombre, exp=exp, data_contact=data_contact)
+    return render_template(v['tmp_user']['home'], f_mnsj=f_mnsj, nombre=nombre, exp=exp, data_contact=data_contact, active_page='user_home')
 
 @app.route('/user/manage-record', methods=['POST'])
 @jwt_required()
@@ -520,7 +520,7 @@ def download_db():
 @validate_user_exists
 def user_txteditor():
     template_name = v['tmp_user'].get('txt_editor')
-    return render_template(template_name)
+    return render_template(template_name, active_page='user_txteditor')
 
 
 @app.route('/user/save-post', methods=['POST'])
@@ -599,7 +599,8 @@ def my_posts():
         v['tmp_user']['my_posts'], 
         data=data,
         current_page=page,
-        total_pages=total_pages
+        total_pages=total_pages,
+        active_page='my_posts'
     )
 
 

static/h_tmp_user/a_home/a_home.css

@@ -59,6 +59,20 @@
   margin-right: 0.5rem;
 }
 
+#dbContact thead {
+  text-align: center;
+  vertical-align: middle;
+  background-color: black;
+  color: white;
+}
+
+#dbContact th {
+  text-align: center;
+  vertical-align: middle;
+  background-color: black;
+  color: white;
+}
+
 
 
 /* Smartphones (hasta 767px) */
@@ -176,37 +190,20 @@
 
 }
 
-
-
-
-#dbContact thead {
-  text-align: center;
-  vertical-align: middle;
-  background-color: black;
-  color: white;
-}
-
-#dbContact th {
-  text-align: center;
-  vertical-align: middle;
-  background-color: black;
-  color: white;
-}
-
-
-
-
-
-
 /* Tablets (768px - 1023px) */
 @media (min-width: 768px) and (max-width: 1023px) {
   /* main{ background-color: pink;  } */
   main {
     min-height: 80vh;
+    place-items: center;
     /* background-color: blueviolet; */
   }
 
-
+  #dbContact thead {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+  }
 
 }
 
@@ -214,17 +211,34 @@
 @media (min-width: 1024px) and (max-width: 1439px) {
   /* main{ background-color: purple;  } */
   main {
-    min-height: 50vh;
+    min-height: 80vh;
+    place-items: center;
     /* background-color: aqua; */
   }
+
+  #dbContact thead {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+  }
+
+
 }
 
 /* PCs de escritorio (1440px - 1919px) macbook */
 @media (min-width: 1440px) and (max-width: 1919px) {
   /* main{ background-color: greenyellow;  } */
   main {
-    min-height: 50vh;
+    min-height: 80vh;
   }
+
+  
+  #dbContact thead {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+  }
+
 }
 
 /* Pantallas Ultrawide (1920px en adelante) */

static/h_tmp_user/a_home/datatable.js

@@ -1,28 +1,78 @@
-new DataTable('#dbContact', {
+// new DataTable('#dbContact', {
-  autoWidth: true, // 👈 agregar esto
+//   autoWidth: true,
+//   responsive: true,
+
+//   columnDefs: [
+//     {
+//       targets: 3, // Recuerda, empieza en 0: Fecha(0), Nombre(1), Estado(2), Empleados(3)
+//       visible: window.innerWidth >= 1024 && window.innerWidth <= 1439 ? false : true
+//     }
+//   ],
+
+//   initComplete: function () {
+//     this.api().columns().every(function () {
+//       let column = this;
+//       let header = $(column.header());
+//       let title = header.text().trim();
+      
+//       if (title !== 'Estatus') {
+//         header.append('<div class="filter"><input type="text" class="form-control" placeholder=" Filtro ' + title + '" /></div>');
+//         $('input', header).on('keyup change', function () {
+//           if (column.search() !== this.value) {
+//             column.search(this.value).draw();
+//           }
+//         });
+//       }
+//     });
+//   }
+// });
+
+let table = new DataTable('#dbContact', {
+  autoWidth: true,
   responsive: true,
-  
   initComplete: function () {
-    // Agrega campos de filtro para cada columna
     this.api().columns().every(function () {
       let column = this;
       let header = $(column.header());
       let title = header.text().trim();
-
+      
-      // Excluir la columna "Estatus" del filtro
       if (title !== 'Estatus') {
-        // Crea input de filtro
         header.append('<div class="filter"><input type="text" class="form-control" placeholder=" Filtro ' + title + '" /></div>');
-
+        $('input', header).on('keyup change', function () {
-        // Aplica el filtro al escribir
+          if (column.search() !== this.value) {
-        $('input', header)
+            column.search(this.value).draw();
-          .on('keyup change', function () {
+          }
-            if (column.search() !== this.value) {
+        });
-              column.search(this.value).draw();
-            }
-          });
       }
     });
   }
 });
 
+
+function ajustarColumnasSegunPantalla() {
+  const width = window.innerWidth;
+
+  if (width >= 1024 && width <= 1439) {
+    // Entre 1024px y 1439px: ocultar solo columna 3
+    table.column(3).visible(false);
+    // table.column(4).visible(true);
+  } else if (width >= 768 && width <= 1023) {
+    // Entre 768px y 1023px: ocultar columna 3 y columna 4
+    table.column(3).visible(false);
+    table.column(4).visible(false);
+    table.column(5).visible(false);
+  } 
+    // Otros tamaños: mostrar ambas columnas
+  // else {
+  //   table.column(3).visible(true);
+  //   table.column(4).visible(true);
+  // }
+}
+
+// Ejecutar una vez al cargar
+ajustarColumnasSegunPantalla();
+
+// Y además ajustar si cambia el tamaño de la ventana
+window.addEventListener('resize', function() {
+  ajustarColumnasSegunPantalla();
+});

templates/h_tmp_usr/a_home.html

@@ -15,21 +15,11 @@
 
 {% endblock css %}
 
-
-
 {% block body %}
 
-
-
-
-
-
 <div >
     <div>
-        
+        {% if is_admin %} {% include 'z_comps/download_xlsx.html' %} {% endif %}
-        {% if is_admin %}
-        {% include 'z_comps/download_xlsx.html' %}
-        {% endif %}
     </div>
 
 
@@ -106,13 +96,14 @@
 
 {% block js %}
 
+
+
 <!-- {# if flash #} -->
 {% include 'z_comps/if_flash.html' %}
 
 <!-- {# aos script #} -->
 {% include 'z_comps/aos_script.html' %}
 
-
 <!-- {# obtener toda la información de la db del registro seleccionado #} -->
 <script src="{{ url_for('static', filename='h_tmp_user/a_home/get_contact_data.js') }}"></script>
 
@@ -142,4 +133,6 @@
 
 <script src="{{ url_for('static', filename='z_comps/save_exp_timestamp.js') }}"></script>
 
+
+
 {% endblock js %}

templates/h_tmp_usr/z_tmp.html

@@ -93,26 +93,33 @@
       <div class="collapse navbar-collapse" id="navbarSupportedContent">
         <ul class="navbar-nav me-auto mb-2 mb-lg-0 effect-3">
 
-          <li class="nav-item dropdown">
+          <!-- <li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-person-circle"></i> {{nombre}}</a></li> -->
-            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+      
-              <i class="bi bi-person-circle"></i> {{nombre}}
+          <!-- <li class="nav-item"><a class="nav-link active" href="#">Link</a></li> -->
-            </a>
+          
-            <ul class="dropdown-menu">
-              <li><a class="dropdown-item" href="{{ url_for('user_home') }}"><i class="bi bi-house-fill"></i></i> Inicio</a></li>
-              <li><a class="dropdown-item" href="{{url_for('user_txteditor')}}"><i class="bi bi-body-text"></i></i> Nueva Publicación</a></li>
-              <li><a class="dropdown-item" href="{{ url_for('my_posts') }}"><i class="bi bi-file-earmark-richtext"></i> Mis Publicaciones</a></li>
-              <li><a class="dropdown-item" href="{{ url_for('change_pswd') }}"><i class="bi bi-file-earmark-lock2"></i> Cambiar Contraseña</a></li>
 
-              {% if is_admin %}
+          <li class="nav-item"><a class="nav-link {% if active_page == 'user_home' %}active{% endif %}" href="{{ url_for('user_home') }}"><i class="bi bi-house-fill"></i></i> Inicio</a></li>
-              <li><hr class="dropdown-divider"></li>
+          <li class="nav-item"><a class="nav-link {% if active_page == 'user_txteditor' %}active{% endif %}" href="{{url_for('user_txteditor')}}"><i class="bi bi-body-text"></i></i> Nueva Publicación</a></li>
+          <li class="nav-item"><a class="nav-link {% if active_page == 'my_posts' %}active{% endif %}" href="{{ url_for('my_posts') }}"><i class="bi bi-file-earmark-richtext"></i> Mis Publicaciones</a></li>
+          <li class="nav-item"><a class="nav-link {% if active_page == 'change_pswd' %}active{% endif %}" href="{{ url_for('change_pswd') }}"><i class="bi bi-file-earmark-lock2"></i> Cambiar Contraseña</a></li>
+          {% if is_admin %}
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle {% if active_page in ['metrics', 'manage_profiles'] %}active{% endif %}" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+              <i class="bi bi-gear-wide"></i> Admin Opt.
+            </a>
+            
+            <ul class="dropdown-menu">
+              <!-- <li><hr class="dropdown-divider"></li> -->
               <li><a class="dropdown-item" href="{{ url_for('metrics') }}"><i class="bi bi-bar-chart-line-fill"></i> Métricas</a></li>
               <li><a class="dropdown-item" href="{{ url_for('manage_profiles') }}"><i class="bi bi-person-fill-gear"></i> Administrar Perfiles</a></li>
-              <li><hr class="dropdown-divider"></li>
+              <!-- <li><hr class="dropdown-divider"></li> -->
-              {% endif %}
-              
-              <li><a class="dropdown-item" href="{{ url_for('logout') }}"><i class="bi bi-door-open-fill"></i> Logout</a></li>
             </ul>
+            
           </li>
+          {% endif %}
+          <li class="nav-item"><a class="nav-link" href="{{ url_for('logout') }}"><i class="bi bi-door-open-fill"></i> Logout</a></li>
+
+ 
         </ul>
       </div>
     </div>

templates/z_comps/download_xlsx.html

@@ -4,30 +4,42 @@
   </button>
 </div>
 
+
 <script>
+  function getFechaHoraFormato() {
+    const now = new Date();
+    const pad = (n) => n.toString().padStart(2, '0');
+    const dia = pad(now.getDate());
+    const mes = pad(now.getMonth() + 1);
+    const anio = now.getFullYear();
+    const hora = pad(now.getHours());
+    const minuto = pad(now.getMinutes());
+    return `${dia}.${mes}.${anio}_${hora}_${minuto}`;
+  }
+
   async function download_db() {
-      let response = await fetch('/user/download-db', {
+    let response = await fetch('/user/download-db', {
-          method: 'GET',
+      method: 'GET',
-          headers: {
+      headers: {
-              'Content-Type': 'application/json'
+        'Content-Type': 'application/json'
-          },
+      },
-          credentials: 'include'
+      credentials: 'include'
-      });
+    });
 
-      let responseData = await response.json();
+    let responseData = await response.json();
-      let data = responseData.data;
+    let data = responseData.data;
-      let headers = ['ID', 'Fecha', 'Hora', 'Nombre', 'Apellido', 'Email', 'Estado', 'Teléfono', 'No. Empleados', 'Rol Contacto', 'Sector', 'Requerimiento', 'Status'];
+    let headers = ['ID', 'Fecha', 'Hora', 'Nombre', 'Apellido', 'Email', 'Estado', 'Teléfono', 'No. Empleados', 'Rol Contacto', 'Sector', 'Requerimiento', 'Status'];
 
-      // Insertar los headers al inicio
+    // Insertar los headers al inicio
-      data.unshift(headers);
+    data.unshift(headers);
 
-      // Crear el libro y hoja
+    // Crear el libro y hoja
-      let ws = XLSX.utils.aoa_to_sheet(data); // aoa = array of arrays
+    let ws = XLSX.utils.aoa_to_sheet(data); // aoa = array of arrays
-      let wb = XLSX.utils.book_new();
+    let wb = XLSX.utils.book_new();
-      XLSX.utils.book_append_sheet(wb, ws, `db_contactos_${getFechaHoraFormato()}`);
+    XLSX.utils.book_append_sheet(wb, ws, `db_contactos_${getFechaHoraFormato()}`);
 
-      // Descargar el archivo
+    // Descargar el archivo
-      XLSX.writeFile(wb, `db_contactos_${getFechaHoraFormato()}.xlsx`);
+    XLSX.writeFile(wb, `db_contactos_${getFechaHoraFormato()}.xlsx`);
   }
 
   let btn = document.getElementById("download_db");