Toggle added at the bottom. Future and all matches

static/app.js

@@ -17,6 +17,8 @@ function saveData() {
 
 
 
+let showAllMatches = false; // false = future matches only; true = all matches
+
 function renderTable() {
     const container = document.getElementById('attendance-table');
     container.innerHTML = '';
@@ -54,19 +56,24 @@ function renderTable() {
         // Assume 20xx for years < 100
         return new Date(2000 + y, m - 1, d);
     }
-    // (No filtering or extra logic, just render all dates in order)
-    // Render all dates in original chronological order
+    // Filter dates based on toggle
+    let filteredDates = [];
+    if (showAllMatches) {
+        filteredDates = data.dates;
+    } else {
+        filteredDates = data.dates.filter(date => parseDate(date) > today);
+    }
+    // Find closest date for scroll (from filtered)
     let closestIdx = 0;
     let minDiff = Infinity;
-    data.dates.forEach((date, rowIdx) => {
+    filteredDates.forEach((date, rowIdx) => {
         const diff = Math.abs(parseDate(date) - today);
         if (diff < minDiff) {
             minDiff = diff;
             closestIdx = rowIdx;
         }
     });
-    // Only render all dates in order
-    data.dates.forEach((date, rowIdx) => {
+    filteredDates.forEach((date, rowIdx) => {
         const tr = document.createElement('tr');
         if (rowIdx === closestIdx) tr.id = 'current-match-row';
         // Date cell
@@ -152,4 +159,17 @@ function renderTable() {
     }, 0);
 }
 
-window.onload = fetchData;
+window.onload = () => {
+    fetchData();
+    document.addEventListener('DOMContentLoaded', () => {
+        const toggleBtn = document.getElementById('toggle-matches-btn');
+        if (toggleBtn) {
+            toggleBtn.textContent = 'Show All Matches';
+            toggleBtn.onclick = () => {
+                showAllMatches = !showAllMatches;
+                toggleBtn.textContent = showAllMatches ? 'Show Future Matches' : 'Show All Matches';
+                renderTable();
+            };
+        }
+    });
+};

templates/index.html

@@ -109,6 +109,9 @@
         <div id="attendance-table"></div>
     </div>
 
+    <div style="display: flex; justify-content: center; margin-top: 1em;">
+        <button id="toggle-matches-btn" style="background: #948979; color: #222831; border: none; padding: 0.7em 1.5em; border-radius: 4px; font-weight: bold; font-size: 1em; transition: background 0.2s; cursor: pointer;">Show All Matches</button>
+    </div>
     <script src="/static/app.js"></script>
 </body>
 </html>