Greg/SportAttendanceSheet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Align buttons left and Reports page

Browse Source
This commit is contained in:
Greg 2025-05-10 22:48:23 +02:00
parent 33c9ec58ff
commit 4fe697f857
3 changed files with 99 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app.py
View File

@ -32,6 +32,10 @@ def save_data(data):
def index(): def index():
return render_template('index.html') return render_template('index.html')
@app.route('/reports')
def reports():
return render_template('reports.html')
@app.route('/api/data', methods=['GET']) @app.route('/api/data', methods=['GET'])
def get_data(): def get_data():
return jsonify(load_data()) return jsonify(load_data())

3
templates/index.html
View File

@ -111,8 +111,9 @@
<div id="attendance-table"></div> <div id="attendance-table"></div>
</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> <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> </div>
<script src="/static/app.js"></script> <script src="/static/app.js"></script>
</body> </body>

93
templates/reports.html Normal file
View File

@ -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>