ft_transcendence/frontend/static/js/views/TournamentsListView.js

import {client} from "../index.js";
import AbstractAuthentifiedView from "./abstracts/AbstractAuthentifiedView.js";

export default class extends AbstractAuthentifiedView
{
    constructor(params)
	{
        super(params, "Tournament");
		this.id = params.id;
    }

	async external_search()
	{
		let state = document.getElementById("state-select").value;
		this.tournaments = await client.tournaments.search(state);
	}

	add_nb_player_by_game_selector()
	{
		let nb_players_by_game_list = new Set()
		this.tournaments.forEach(tournament => {
			nb_players_by_game_list.add(tournament.nb_players_by_game);
		});

		let select = document.getElementById("nb-players-by-game-select");

		let new_children = []

		const opt = document.createElement("option");
		opt.value = "all";
		opt.text = "All";

		new_children.push(opt);

		nb_players_by_game_list.forEach(nb_players_by_game => {
			const opt = document.createElement("option");
			opt.value = nb_players_by_game;
			opt.text = nb_players_by_game;
			new_children.push(opt);
		})
		select.replaceChildren(...new_children);
	}

	internal_search()
	{
		let nb_players_by_game = document.getElementById("nb-players-by-game-select").value;

		this.display_tournaments = [];
		this.tournaments.forEach(tournament => {
			if (nb_players_by_game === "all" || nb_players_by_game == tournament.nb_players_by_game)
				this.display_tournaments.push(tournament);
		});
	}

	display_result()
	{
		const tournaments_list = document.getElementById("tournaments-list");

		const new_children = []
		
		this.display_tournaments.forEach(tournament => {

			let tr = document.createElement("tr");

			// name	
			let td = document.createElement("td");
			td.innerText = tournament.name;
			tr.appendChild(td);

			// state
			td = document.createElement("td");
			td.innerText = tournament.state;
			tr.appendChild(td);

			// nb_players
			td = document.createElement("td");
			td.innerText = tournament.nb_players;
			tr.appendChild(td);

			// nb_players_by_game
			td = document.createElement("td");
			td.innerText = tournament.nb_players_by_game;
			tr.appendChild(td);

			new_children.push(tr);
		});
		tournaments_list.replaceChildren(...new_children);
	}

	async update_query()
	{
		this.internal_search();
		this.display_result();
	}

	async update_search()
	{
		await this.external_search();
		this.add_nb_player_by_game_selector();
		this.update_query();
	}

	async postInit()
	{
		await this.update_search()
		document.getElementById("state-select").onchange = this.update_search.bind(this);
		document.getElementById("nb-players-by-game-select").onchange = this.update_query.bind(this);
	}

	async getHtml()
	{
		return `
			<select id="state-select">
				<option value="waiting">Waiting</option>
				<option value="started">Started</option>
				<option value="finished">Finished</option>
				<option value="all">All</option>
			</select>
			<select id="nb-players-by-game-select">
			</select>
			<table>
				<thead>
					<td>Name</td>
					<td>Status</td>
					<td>Max numbers of players</td>
					<td>Max numbers of players by game</td>
				</thead>
				<tbody id="tournaments-list">
				</tbody>
			</table>
		`
	}
}