show teams info in admin page

This commit is contained in:
2026-05-04 04:10:11 -07:00
parent 5881102cb6
commit 343d20dd4e

View File

@ -27,6 +27,10 @@
border: 1px solid rgb(160 160 160);
padding: 8px 10px;
}
a.standalone-link {
display: block;
margin: 8px 0;
}
</style>
</head>
<body>
@ -36,14 +40,24 @@
<caption> Games table </caption>
<thead><tr>
<th scope="col">code</th>
<th scope="col">team</th>
<th scope="col">teams</th>
<th scope="col">start_time</th>
<th scope="col">end_time</th>
</tr></thead>
<tbody id="games_table"></tbody>
</table>
<dialog id="team_dialog">
<p><bold>Name: <span id="td_name"></span></bold></p>
<p>Color: <span id="td_color"></span></p>
<p>Players: <span id="td_players"></span></p>
</dialog>
<script>
const games_form = document.getElementById("games_form");
const table_body = document.getElementById("games_table");
const team_dialog = document.getElementById("team_dialog");
const td_name = document.getElementById("td_name");
const td_color = document.getElementById("td_color");
const td_players = document.getElementById("td_players");
function refresh_games(event) {
event.preventDefault();
fetch("/admin/games")
@ -54,22 +68,50 @@
return response.json();
})
.then(data => {
const table_body = document.getElementById("games_table");
let table_content = "";
table_body.innerHTML = "";
data.forEach((item,index) => {
table_content += '<tr>';
table_content += '<th scope="row">' + item['code'] + '</th>';
table_content += '<td>teams should go here</td>';
table_content += '<td>' + item['start_time'] + '</td>';
table_content += '<td>' + item['end_time'] + '</td>';
const row = document.createElement("tr");
const row_head = document.createElement("th");
row_head.scope = 'row';
row_head.textContent = item['code'];
const row_teams = document.createElement("td");
item['teams'].forEach((team, i) => {
const name = team['name'];
const color = team['color'];
const players = team['players'];
const link = document.createElement("a");
link.href = "#";
link.textContent = name;
link.classList.add("standalone-link");
link.onclick = function(e) {
e.preventDefault();
showModal(name, color, players);
};
row_teams.append(link);
console.log(team);
});
const row_start = document.createElement("td");
row_start.textContent = item['start_time'];
const row_end = document.createElement("td");
row_end.textContent = item['end_time'];
row.appendChild(row_head);
row.appendChild(row_teams);
row.appendChild(row_start);
row.appendChild(row_end);
table_body.appendChild(row);
});
table_body.innerHTML = table_content;
})
.catch(error => {
console.error("Fetching legend data failed:", error);
});
}
games_form.addEventListener("submit", refresh_games);
function showModal(name, color, players) {
td_name.textContent = name;
td_color.textContent = color;
td_players.textContent = players.map((e)=>e['username']);
team_dialog.showModal();
}
</script>
</body>
</html>