{"id":2470,"date":"2023-02-16T16:13:04","date_gmt":"2023-02-16T15:13:04","guid":{"rendered":"https:\/\/virtualvueling.eu\/wp2\/?page_id=2470"},"modified":"2026-05-11T17:45:40","modified_gmt":"2026-05-11T15:45:40","slug":"pilotos","status":"publish","type":"page","link":"https:\/\/virtualvueling.eu\/wp2\/pilotos\/","title":{"rendered":"Pilotos"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2470\" class=\"elementor elementor-2470\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-84c8b20 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"84c8b20\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6bd780e\" data-id=\"6bd780e\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c638772 elementor-widget elementor-widget-html\" data-id=\"c638772\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Nunito:wght@400;600;700;800&display=swap\" rel=\"stylesheet\">\r\n \r\n<style>\r\n  .vv-pilots-wrap {\r\n    --vv-bg: #4d4d4d;\r\n    --vv-surface: #3a3a3a;\r\n    --vv-border: rgba(255,255,255,0.1);\r\n    --vv-accent: #ffce08;\r\n    --vv-accent2: #ffce08;\r\n    --vv-text: #f5f5f5;\r\n    --vv-muted: #b0b0b0;\r\n    --vv-row-hover: rgba(255,206,8,0.06);\r\n    font-family: 'Nunito', sans-serif;\r\n    background: var(--vv-bg);\r\n    border-radius: 16px;\r\n    padding: 32px;\r\n    color: var(--vv-text);\r\n    overflow: hidden;\r\n    position: relative;\r\n  }\r\n \r\n  .vv-pilots-wrap::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: -80px;\r\n    right: -80px;\r\n    width: 300px;\r\n    height: 300px;\r\n    background: radial-gradient(circle, rgba(255,206,8,0.1) 0%, transparent 70%);\r\n    pointer-events: none;\r\n  }\r\n \r\n  .vv-header {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    margin-bottom: 28px;\r\n    flex-wrap: wrap;\r\n    gap: 12px;\r\n  }\r\n \r\n  .vv-title {\r\n    font-family: 'Nunito', sans-serif;\r\n    font-size: 1.6rem;\r\n    font-weight: 800;\r\n    letter-spacing: 0.04em;\r\n    text-transform: uppercase;\r\n    color: var(--vv-text);\r\n    margin: 0;\r\n  }\r\n \r\n  .vv-title span {\r\n    color: var(--vv-accent);\r\n  }\r\n \r\n  .vv-search {\r\n    background: var(--vv-surface);\r\n    border: 1px solid var(--vv-border);\r\n    border-radius: 8px;\r\n    padding: 8px 14px;\r\n    color: var(--vv-text);\r\n    font-family: 'Nunito', sans-serif;\r\n    font-size: 0.85rem;\r\n    outline: none;\r\n    width: 200px;\r\n    transition: border-color 0.2s;\r\n  }\r\n \r\n  .vv-search:focus {\r\n    border-color: var(--vv-accent);\r\n  }\r\n \r\n  .vv-search::placeholder {\r\n    color: var(--vv-muted);\r\n  }\r\n \r\n  .vv-table-wrap {\r\n    overflow-x: auto;\r\n    border-radius: 10px;\r\n    border: 1px solid var(--vv-border);\r\n  }\r\n \r\n  table.vv-table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n    font-size: 0.9rem;\r\n  }\r\n \r\n  table.vv-table thead tr {\r\n    background: var(--vv-surface);\r\n    border-bottom: 1px solid var(--vv-border);\r\n  }\r\n \r\n  table.vv-table th {\r\n    font-family: 'Nunito', sans-serif;\r\n    font-size: 0.78rem;\r\n    font-weight: 700;\r\n    letter-spacing: 0.1em;\r\n    text-transform: uppercase;\r\n    color: var(--vv-accent);\r\n    padding: 14px 18px;\r\n    text-align: left;\r\n    cursor: pointer;\r\n    user-select: none;\r\n    white-space: nowrap;\r\n  }\r\n \r\n  table.vv-table th:hover {\r\n    color: #ffe155;\r\n  }\r\n \r\n  table.vv-table th .sort-icon {\r\n    margin-left: 4px;\r\n    opacity: 0.4;\r\n    font-style: normal;\r\n  }\r\n \r\n  table.vv-table th.active .sort-icon {\r\n    opacity: 1;\r\n  }\r\n \r\n  table.vv-table tbody tr {\r\n    border-bottom: 1px solid var(--vv-border);\r\n    transition: background 0.15s;\r\n    animation: vv-fadein 0.4s ease both;\r\n  }\r\n \r\n  table.vv-table tbody tr:last-child {\r\n    border-bottom: none;\r\n  }\r\n \r\n  table.vv-table tbody tr:hover {\r\n    background: var(--vv-row-hover);\r\n  }\r\n \r\n  table.vv-table td {\r\n    padding: 14px 18px;\r\n    color: var(--vv-text);\r\n    vertical-align: middle;\r\n  }\r\n \r\n  .vv-username {\r\n    font-family: 'Nunito', sans-serif;\r\n    font-size: 1rem;\r\n    font-weight: 800;\r\n    color: var(--vv-accent2);\r\n    letter-spacing: 0.04em;\r\n  }\r\n \r\n  .vv-name {\r\n    color: var(--vv-muted);\r\n    font-size: 0.82rem;\r\n    margin-top: 2px;\r\n  }\r\n \r\n  .vv-rank-badge {\r\n    display: inline-block;\r\n    background: rgba(255,206,8,0.12);\r\n    border: 1px solid rgba(255,206,8,0.3);\r\n    color: var(--vv-accent);\r\n    font-size: 0.75rem;\r\n    font-family: 'Nunito', sans-serif;\r\n    font-weight: 700;\r\n    letter-spacing: 0.04em;\r\n    padding: 3px 10px;\r\n    border-radius: 20px;\r\n    white-space: nowrap;\r\n  }\r\n \r\n  .vv-hours {\r\n    font-family: 'Nunito', sans-serif;\r\n    font-size: 1rem;\r\n    font-weight: 700;\r\n    color: var(--vv-text);\r\n  }\r\n \r\n  .vv-hours-unit {\r\n    font-size: 0.72rem;\r\n    color: var(--vv-muted);\r\n    margin-left: 2px;\r\n  }\r\n \r\n  .vv-points {\r\n    font-family: 'Nunito', sans-serif;\r\n    font-size: 1rem;\r\n    font-weight: 700;\r\n    color: var(--vv-text);\r\n  }\r\n \r\n  .vv-loading, .vv-empty {\r\n    text-align: center;\r\n    padding: 48px 0;\r\n    color: var(--vv-muted);\r\n    font-size: 0.9rem;\r\n  }\r\n \r\n  .vv-spinner {\r\n    display: inline-block;\r\n    width: 22px;\r\n    height: 22px;\r\n    border: 2px solid var(--vv-border);\r\n    border-top-color: var(--vv-accent);\r\n    border-radius: 50%;\r\n    animation: vv-spin 0.7s linear infinite;\r\n    margin-bottom: 10px;\r\n  }\r\n \r\n  .vv-footer {\r\n    margin-top: 16px;\r\n    font-size: 0.78rem;\r\n    color: var(--vv-muted);\r\n    text-align: right;\r\n  }\r\n \r\n  @keyframes vv-spin {\r\n    to { transform: rotate(360deg); }\r\n  }\r\n \r\n  @keyframes vv-fadein {\r\n    from { opacity: 0; transform: translateY(6px); }\r\n    to   { opacity: 1; transform: translateY(0); }\r\n  }\r\n<\/style>\r\n \r\n<div class=\"vv-pilots-wrap\">\r\n  <div class=\"vv-header\">\r\n    <h2 class=\"vv-title\">Nuestra <span>Tripulaci\u00f3n<\/span><\/h2>\r\n    <input class=\"vv-search\" type=\"text\" id=\"vv-search\" placeholder=\"Buscar piloto...\">\r\n  <\/div>\r\n \r\n  <div class=\"vv-table-wrap\">\r\n    <table class=\"vv-table\" id=\"vv-table\">\r\n      <thead>\r\n        <tr>\r\n          <th data-col=\"username\" class=\"active\">ID Piloto <i class=\"sort-icon\">\u2195<\/i><\/th>\r\n          <th data-col=\"name\">Nombre <i class=\"sort-icon\">\u2195<\/i><\/th>\r\n          <th data-col=\"rank\">Rango <i class=\"sort-icon\">\u2195<\/i><\/th>\r\n          <th data-col=\"hours\">Horas <i class=\"sort-icon\">\u2195<\/i><\/th>\r\n          <th data-col=\"points\">Puntos <i class=\"sort-icon\">\u2195<\/i><\/th>\r\n        <\/tr>\r\n      <\/thead>\r\n      <tbody id=\"vv-tbody\">\r\n        <tr>\r\n          <td colspan=\"5\">\r\n            <div class=\"vv-loading\">\r\n              <div class=\"vv-spinner\"><\/div><br>Cargando tripulaci\u00f3n...\r\n            <\/div>\r\n          <\/td>\r\n        <\/tr>\r\n      <\/tbody>\r\n    <\/table>\r\n  <\/div>\r\n \r\n  <div class=\"vv-footer\" id=\"vv-footer\"><\/div>\r\n<\/div>\r\n \r\n<script>\r\n(function () {\r\n  const API_URL  = 'https:\/\/virtualvueling.eu\/VRMS\/Public_API\/pilots-api.php';\r\n  const tbody    = document.getElementById('vv-tbody');\r\n  const footer   = document.getElementById('vv-footer');\r\n  const search   = document.getElementById('vv-search');\r\n \r\n  let allPilots  = [];\r\n  let sortCol    = 'username';\r\n  let sortAsc    = true;\r\n \r\n  fetch(API_URL)\r\n    .then(r => r.json())\r\n    .then(res => {\r\n      if (!res.success) throw new Error();\r\n      allPilots = res.data;\r\n      render();\r\n    })\r\n    .catch(() => {\r\n      tbody.innerHTML = '<tr><td colspan=\"5\"><div class=\"vv-empty\">No se pudo cargar la tripulaci\u00f3n.<\/div><\/td><\/tr>';\r\n    });\r\n \r\n  function render() {\r\n    const query   = search.value.toLowerCase();\r\n    let filtered  = allPilots.filter(p =>\r\n      (p.username || '').toLowerCase().includes(query) ||\r\n      (p.name     || '').toLowerCase().includes(query) ||\r\n      (p.rank     || '').toLowerCase().includes(query)\r\n    );\r\n \r\n    filtered.sort((a, b) => {\r\n      let va = a[sortCol] ?? '';\r\n      let vb = b[sortCol] ?? '';\r\n      if (sortCol === 'hours' || sortCol === 'points') {\r\n        va = parseFloat(va) || 0;\r\n        vb = parseFloat(vb) || 0;\r\n      } else {\r\n        va = va.toString().toLowerCase();\r\n        vb = vb.toString().toLowerCase();\r\n      }\r\n      if (va < vb) return sortAsc ? -1 : 1;\r\n      if (va > vb) return sortAsc ?  1 : -1;\r\n      return 0;\r\n    });\r\n \r\n    if (filtered.length === 0) {\r\n      tbody.innerHTML = '<tr><td colspan=\"5\"><div class=\"vv-empty\">No se encontraron pilotos.<\/div><\/td><\/tr>';\r\n      footer.textContent = '';\r\n      return;\r\n    }\r\n \r\n    tbody.innerHTML = filtered.map((p, i) => `\r\n      <tr style=\"animation-delay:${i * 0.03}s\">\r\n        <td>\r\n          <div class=\"vv-username\">${esc(p.username)}<\/div>\r\n        <\/td>\r\n        <td>\r\n          <div>${esc(p.name || '\u2014')}<\/div>\r\n        <\/td>\r\n        <td>\r\n          ${p.rank ? `<span class=\"vv-rank-badge\">${esc(p.rank)}<\/span>` : '\u2014'}\r\n        <\/td>\r\n        <td>\r\n          <span class=\"vv-hours\">${esc(p.hours_formatted)}<\/span>\r\n          <span class=\"vv-hours-unit\">h<\/span>\r\n        <\/td>\r\n        <td>\r\n          <span class=\"vv-points\">${Number(p.points).toLocaleString('es-ES')}<\/span>\r\n        <\/td>\r\n      <\/tr>\r\n    `).join('');\r\n \r\n    footer.textContent = `${filtered.length} piloto${filtered.length !== 1 ? 's' : ''} encontrado${filtered.length !== 1 ? 's' : ''}`;\r\n  }\r\n \r\n  \/\/ Search\r\n  search.addEventListener('input', render);\r\n \r\n  \/\/ Sort\r\n  document.querySelectorAll('.vv-table th').forEach(th => {\r\n    th.addEventListener('click', () => {\r\n      const col = th.dataset.col;\r\n      if (sortCol === col) {\r\n        sortAsc = !sortAsc;\r\n      } else {\r\n        sortCol = col;\r\n        sortAsc = col === 'username' || col === 'name' || col === 'rank';\r\n      }\r\n      document.querySelectorAll('.vv-table th').forEach(t => t.classList.remove('active'));\r\n      th.classList.add('active');\r\n      th.querySelector('.sort-icon').textContent = sortAsc ? '\u2191' : '\u2193';\r\n      render();\r\n    });\r\n  });\r\n \r\n  function esc(str) {\r\n    return String(str)\r\n      .replace(\/&\/g, '&amp;')\r\n      .replace(\/<\/g, '&lt;')\r\n      .replace(\/>\/g, '&gt;')\r\n      .replace(\/\"\/g, '&quot;');\r\n  }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Nuestra Tripulaci\u00f3n ID Piloto \u2195 Nombre \u2195 Rango \u2195 Horas \u2195 Puntos \u2195 Cargando tripulaci\u00f3n&#8230;<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2470","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/virtualvueling.eu\/wp2\/wp-json\/wp\/v2\/pages\/2470","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/virtualvueling.eu\/wp2\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/virtualvueling.eu\/wp2\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/virtualvueling.eu\/wp2\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/virtualvueling.eu\/wp2\/wp-json\/wp\/v2\/comments?post=2470"}],"version-history":[{"count":49,"href":"https:\/\/virtualvueling.eu\/wp2\/wp-json\/wp\/v2\/pages\/2470\/revisions"}],"predecessor-version":[{"id":2999,"href":"https:\/\/virtualvueling.eu\/wp2\/wp-json\/wp\/v2\/pages\/2470\/revisions\/2999"}],"wp:attachment":[{"href":"https:\/\/virtualvueling.eu\/wp2\/wp-json\/wp\/v2\/media?parent=2470"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}