{"id":3788,"date":"2025-05-01T11:31:28","date_gmt":"2025-05-01T06:01:28","guid":{"rendered":"https:\/\/tbspanthers.british-school.org\/?page_id=3788"},"modified":"2025-05-01T11:36:44","modified_gmt":"2025-05-01T06:06:44","slug":"isaci-swim-meet-achievements-board","status":"publish","type":"page","link":"https:\/\/tbspanthers.british-school.org\/index.php\/isaci-swim-meet-achievements-board\/","title":{"rendered":"ISACI Swim Meet Achievements Board"},"content":{"rendered":"\n<div id=\"resultsApp\" style=\"max-width: 980px; margin: auto; font-family: 'Segoe UI', sans-serif; padding: 20px;\">\n  <h2 style=\"text-align: center; color: #2d2d2d; margin-bottom: 30px; font-size: 2rem;\">Individual Events<\/h2>\n  <p style=\"text-align: center; color: #555; font-size: 1rem; margin-bottom: 25px;\">Celebrating our students\u2019 excellence and dedication in the pool.<\/p>\n\n  <div style=\"display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; margin-bottom: 25px;\">\n    <div>\n      <label style=\"font-weight: 600; color: #333;\">Student<\/label><br>\n      <select id=\"studentFilter\" style=\"padding: 8px 12px; border-radius: 6px; border: 1px solid #ccc; min-width: 180px;\">\n        <option value=\"\">All<\/option>\n      <\/select>\n    <\/div>\n    <div>\n      <label style=\"font-weight: 600; color: #333;\">Age Group<\/label><br>\n      <select id=\"ageGroupFilter\" style=\"padding: 8px 12px; border-radius: 6px; border: 1px solid #ccc; min-width: 180px;\">\n        <option value=\"\">All<\/option>\n      <\/select>\n    <\/div>\n    <div>\n      <label style=\"font-weight: 600; color: #333;\">Event<\/label><br>\n      <select id=\"eventFilter\" style=\"padding: 8px 12px; border-radius: 6px; border: 1px solid #ccc; min-width: 180px;\">\n        <option value=\"\">All<\/option>\n      <\/select>\n    <\/div>\n  <\/div>\n\n  <div id=\"resultBoard\" style=\"overflow-x: auto;\">\n    <table style=\"width: 100%; border-collapse: collapse; box-shadow: 0 6px 20px rgba(0,0,0,0.06); border-radius: 10px; overflow: hidden;\">\n      <thead style=\"background-color: #f7c948; color: #2d2d2d; text-align: left;\">\n        <tr>\n          <th style=\"padding: 14px; text-align: left;\">Student<\/th>\n          <th style=\"padding: 14px; text-align: left;\">Age Group<\/th>\n          <th style=\"padding: 14px; text-align: left;\">Event<\/th>\n          <th style=\"padding: 14px; text-align: left;\">Position<\/th>\n          <th style=\"padding: 14px; text-align: left;\">Time (Sec)<\/th>\n        <\/tr>\n      <\/thead>\n      <tbody id=\"resultBody\" style=\"background-color: #fdfdfd;\"><\/tbody>\n    <\/table>\n  <\/div>\n<\/div>\n\n<script>\nconst csvUrl = \"https:\/\/docs.google.com\/spreadsheets\/d\/e\/2PACX-1vTyp06Zg6X2IMnf9qvwmrv8RdRRebINJ0Gwva44E9HVUTpcoDFwJnyL45wkGkyZW8gmsexC3XQslGJO\/pub?gid=2009157243&single=true&output=csv\";\nlet rawData = [];\n\nfunction fetchCSVData() {\n  fetch(csvUrl)\n    .then(res => res.text())\n    .then(csv => {\n      const rows = csv.trim().split('\\n').map(r => r.split(','));\n      rows.shift(); \/\/ remove header\n      rawData = rows.map(r => ({\n        student: r[0].trim(),\n        ageGroup: r[1].trim(),\n        event: r[2].trim(),\n        position: r[3].trim(),\n        time: r[4].trim()\n      }));\n      populateFilters();\n      displayData();\n    });\n}\n\nfunction populateFilters() {\n  const studentSet = new Set();\n  const ageSet = new Set();\n  const eventSet = new Set();\n\n  rawData.forEach(row => {\n    studentSet.add(row.student);\n    ageSet.add(row.ageGroup);\n    eventSet.add(row.event);\n  });\n\n  populateSelect('studentFilter', studentSet);\n  populateSelect('ageGroupFilter', ageSet);\n  populateSelect('eventFilter', eventSet);\n\n  document.getElementById('studentFilter').addEventListener('change', displayData);\n  document.getElementById('ageGroupFilter').addEventListener('change', displayData);\n  document.getElementById('eventFilter').addEventListener('change', displayData);\n}\n\nfunction populateSelect(id, valuesSet) {\n  const select = document.getElementById(id);\n  [...valuesSet].sort().forEach(val => {\n    const opt = document.createElement('option');\n    opt.value = val;\n    opt.textContent = val;\n    select.appendChild(opt);\n  });\n}\n\nfunction displayData() {\n  const studentVal = document.getElementById('studentFilter').value;\n  const ageVal = document.getElementById('ageGroupFilter').value;\n  const eventVal = document.getElementById('eventFilter').value;\n  const tbody = document.getElementById('resultBody');\n  tbody.innerHTML = '';\n\n  let filtered = rawData\n    .filter(row =>\n      (!studentVal || row.student === studentVal) &&\n      (!ageVal || row.ageGroup === ageVal) &&\n      (!eventVal || row.event === eventVal)\n    );\n\n  filtered.sort((a, b) => parsePosition(a.position) - parsePosition(b.position));\n\n  filtered.forEach((row, i) => {\n    const tr = document.createElement('tr');\n    tr.style.backgroundColor = i % 2 === 0 ? '#ffffff' : '#f6f9fc';\n    tr.onmouseover = () => tr.style.backgroundColor = '#fff3d4';\n    tr.onmouseout = () => tr.style.backgroundColor = i % 2 === 0 ? '#ffffff' : '#f6f9fc';\n    tr.innerHTML = `\n      <td style=\"padding: 12px; border-bottom: 1px solid #eee;\">${row.student}<\/td>\n      <td style=\"padding: 12px; border-bottom: 1px solid #eee;\">${row.ageGroup}<\/td>\n      <td style=\"padding: 12px; border-bottom: 1px solid #eee;\">${row.event}<\/td>\n      <td style=\"padding: 12px; border-bottom: 1px solid #eee;\">${row.position}<\/td>\n      <td style=\"padding: 12px; border-bottom: 1px solid #eee;\">${row.time}<\/td>\n    `;\n    tbody.appendChild(tr);\n  });\n}\n\nfunction parsePosition(pos) {\n  const match = pos.match(\/\\d+\/);\n  return match ? parseInt(match[0]) : 999;\n}\n\ndocument.addEventListener(\"DOMContentLoaded\", fetchCSVData);\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>Individual Events Celebrating our students\u2019 excellence and dedication in the pool. Student All Age Group All Event All Student Age Group Event Position Time (Sec)<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3788","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tbspanthers.british-school.org\/index.php\/wp-json\/wp\/v2\/pages\/3788"}],"collection":[{"href":"https:\/\/tbspanthers.british-school.org\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tbspanthers.british-school.org\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tbspanthers.british-school.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tbspanthers.british-school.org\/index.php\/wp-json\/wp\/v2\/comments?post=3788"}],"version-history":[{"count":9,"href":"https:\/\/tbspanthers.british-school.org\/index.php\/wp-json\/wp\/v2\/pages\/3788\/revisions"}],"predecessor-version":[{"id":3800,"href":"https:\/\/tbspanthers.british-school.org\/index.php\/wp-json\/wp\/v2\/pages\/3788\/revisions\/3800"}],"wp:attachment":[{"href":"https:\/\/tbspanthers.british-school.org\/index.php\/wp-json\/wp\/v2\/media?parent=3788"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}