add: tournament list view

frontend/static/js/api/tournament/tournament.js

@@ -11,7 +11,7 @@ class Tourmanent
 		 * @type {Client}
 		 */
 		this.client = client;
-		this.name = name;
+		this.name = name || `${nb_players_by_game}x1, ${nb_players} players`;
 		this.nb_players = nb_players;
 		this.nb_players_by_game = nb_players_by_game;
 		this.level = level;
@@ -41,7 +41,7 @@ class Tourmanent
 
 		let response_data = await response.json();
 
-		this.name = response_data.name;
+		this.name = response_data.name || `${response_data.nb_players_by_game}x1, ${response_data.nb_players} players`;
 		this.nb_players = response_data.nb_players;
 		this.nb_players_by_game = response_data.nb_players_by_game;
 		this.level = response_data.level;

frontend/static/js/api/tournament/tournaments.js

@@ -62,7 +62,21 @@ class Tourmanents
 			return null;
 		}
 
-		return response_data;
+		let tournaments = [];
+
+		response_data.forEach(tournament_data => {
+			tournaments.push(new Tourmanent(this.client,
+											tournament_data.name,
+											tournament_data.nb_players,
+											tournament_data.nb_players_by_game,
+											tournament_data.level,
+											tournament_data.started,
+											tournament_data.finished,
+											tournament_data.levels,
+											tournament_data.id));
+		});
+
+		return tournaments;
 	}
 
 	async all()

frontend/static/js/index.js

@@ -15,6 +15,7 @@ import MeView from "./views/MeView.js";
 import ProfilePageView from "./views/ProfilePageView.js";
 import MatchMakingView from "./views/MatchMakingView.js";
 import TournamentPageView from "./views/TournamentPageView.js";
+import TournamentsView from "./views/TournamentsListView.js";
 
 let client = new Client(location.protocol + "//" + location.host)
 
@@ -54,6 +55,7 @@ const router = async (uri) => {
         { path: "/", view: Dashboard },
         { path: "/profiles/:id", view: ProfilePageView },
         { path: "/tournaments/:id", view: TournamentPageView },
+        { path: "/tournaments/", view: TournamentsView},
         { path: "/login", view: LoginView },
         { path: "/logout", view: LogoutView },
         { path: "/register", view: RegisterView },

frontend/static/js/views/TournamentPageView.js

@@ -1,8 +1,10 @@
 import {client} from "../index.js";
 import AbstractAuthentifiedView from "./abstracts/AbstractAuthentifiedView.js";
 
-export default class extends AbstractAuthentifiedView {
+export default class extends AbstractAuthentifiedView
-    constructor(params) {
+{
+    constructor(params)
+	{
         super(params, "Tournament");
 		this.id = params.id;
     }
@@ -14,7 +16,7 @@ export default class extends AbstractAuthentifiedView {
 		if (tournament === null)
 			return 1;
 
-		document.getElementById("name").innerText = tournament.name || `${tournament.nb_players_by_game}x1, ${tournament.nb_players} players`;
+		document.getElementById("name").innerText = tournament.name;
 		document.getElementById("nb_players").innerText = tournament.nb_players;
 		document.getElementById("nb_players_by_game").innerText = tournament.nb_players_by_game;
 		document.getElementById("level").innerText = tournament.level;

frontend/static/js/views/TournamentsListView.js

@@ -0,0 +1,133 @@
+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>
+		`
+	}
+}