show teams info in admin page
This commit is contained in:
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user