From 4fe697f857a08465aa7a512cf641e85eaccb9917 Mon Sep 17 00:00:00 2001
From: Greg <trystuffwospam@livingonlinenow.com>
Date: Sat, 10 May 2025 22:48:23 +0200
Subject: [PATCH] Align buttons left and Reports page

---
 app.py                 |  4 ++
 templates/index.html   |  3 +-
 templates/reports.html | 93 ++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 99 insertions(+), 1 deletion(-)
 create mode 100644 templates/reports.html
diff --git a/app.py b/app.py
index f07d47e..ab41020 100644
--- a/app.py
+++ b/app.py
@@ -32,6 +32,10 @@ def save_data(data):
 def index():
     return render_template('index.html')
 
+@app.route('/reports')
+def reports():
+    return render_template('reports.html')
+
 @app.route('/api/data', methods=['GET'])
 def get_data():
     return jsonify(load_data())
diff --git a/templates/index.html b/templates/index.html
index 889a024..e1c13b6 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -111,8 +111,9 @@
         <div id="attendance-table"></div>
     </div>
 
-    <div style="display: flex; justify-content: center; margin-top: 1em;">
+    <div style="display: flex; justify-content: flex-start; gap: 1em; 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>
+        <a href="/reports" id="reports-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; text-decoration: none;">Reports</a>
     </div>
     <script src="/static/app.js"></script>
 </body>
diff --git a/templates/reports.html b/templates/reports.html
new file mode 100644
index 0000000..aef9aa3
--- /dev/null
+++ b/templates/reports.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Padel Nivelles - Reports</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+        body { font-family: Arial, sans-serif; background: #222831; color: #DFD0B8; margin: 2em; }
+        .chart-container { background: #393E46; padding: 2em; border-radius: 8px; margin-bottom: 2em; }
+        h2 { color: #948979; }
+        a, button { color: #222831; background: #948979; border: none; padding: 0.7em 1.5em; border-radius: 4px; font-weight: bold; font-size: 1em; transition: background 0.2s; cursor: pointer; text-decoration: none; }
+        a:hover, button:hover { background: #7c765c; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+<body>
+    <a href="/" style="margin-bottom: 2em; display: inline-block;">Back to Attendance</a>
+    <div class="chart-container">
+        <h2>Attendance Count per Player</h2>
+        <canvas id="barChart"></canvas>
+    </div>
+    <div class="chart-container">
+        <h2>Player Attendance Share (Pie)</h2>
+        <canvas id="pieChart"></canvas>
+    </div>
+    <script>
+    fetch('/api/data').then(r => r.json()).then(data => {
+        const players = data.players;
+        const attendance = data.attendance;
+        // Calculate Yes counts per player
+        const yesCounts = Array(players.length).fill(0);
+        Object.entries(attendance).forEach(([key, value]) => {
+            if (value === true) {
+                const [date, colIdx] = key.split('|');
+                const idx = parseInt(colIdx);
+                if (idx < players.length) yesCounts[idx]++;
+            }
+        });
+        // Bar chart
+        new Chart(document.getElementById('barChart').getContext('2d'), {
+            type: 'bar',
+            data: {
+                labels: players,
+                datasets: [{
+                    label: 'Number of Yes',
+                    data: yesCounts,
+                    backgroundColor: '#948979',
+                    borderColor: '#222831',
+                    borderWidth: 1
+                }]
+            },
+            options: {
+                plugins: { legend: { display: false } },
+                scales: {
+                    y: { beginAtZero: true, ticks: { color: '#DFD0B8' }, grid: { color: '#393E46' } },
+                    x: { ticks: { color: '#DFD0B8' }, grid: { color: '#393E46' } }
+                }
+            }
+        });
+        // Pie chart
+        const totalYes = yesCounts.reduce((a, b) => a + b, 0);
+        new Chart(document.getElementById('pieChart').getContext('2d'), {
+            type: 'pie',
+            data: {
+                labels: players,
+                datasets: [{
+                    data: yesCounts,
+                    backgroundColor: [
+                        '#948979', '#DFD0B8', '#7c765c', '#393E46', '#222831', '#bfa181', '#b7b7a4', '#a7c957'
+                    ]
+                }]
+            },
+            options: {
+                plugins: {
+                    legend: { labels: { color: '#DFD0B8' } },
+                    tooltip: {
+                        callbacks: {
+                            label: function(context) {
+                                const label = context.label || '';
+                                const value = context.parsed;
+                                const percent = totalYes ? ((value / totalYes) * 100).toFixed(1) : 0;
+                                return label + ': ' + value + ' (' + percent + '%)';
+                            }
+                        }
+                    }
+                }
+            }
+        });
+    });
+    </script>
+</body>
+</html>
+
