diff --git a/frontend/src/Util.ts b/frontend/src/Util.ts index d5b2bce6378e4f470606a40fc01ec6a8469e6238..1b01e9799c69d4cf9c95c142ea9d16f8f782ff42 100644 --- a/frontend/src/Util.ts +++ b/frontend/src/Util.ts @@ -1,3 +1,5 @@ +import type { Nation } from "../bindings/changeme/astro/services/models"; + export function randomColor(brightness: number): string { function randomChannel(brightness: number): string { var r = 255-brightness; @@ -8,4 +10,23 @@ export function randomColor(brightness: number): string { return '#' + randomChannel(brightness) + randomChannel(brightness) + randomChannel(brightness); } -export const rightBrighness = 240; \ No newline at end of file +export const rightBrighness = 240; + +export function getNationFlag(nation: Nation | null): string { + + if (!nation) { + return "https://flagsapi.com/FR/flat/64.png"; + } + + console.log(`"${nation.nation_code}"`); + + return `https://flagsapi.com/${nation.nation_code}/flat/64.png` +} + +export function getNationFlatAlt(nation: Nation | null): string { + if (!nation) { + return "FR"; + } + + return nation.nation_code; +} \ No newline at end of file diff --git a/frontend/src/components/Registrations/Registrations.svelte b/frontend/src/components/Registrations/Registrations.svelte index dffc8eba0186f162c3a8fa49d09a7f566c81d0b2..c2ce4346da554eedfec7e6f418e01f88d69918ba 100644 --- a/frontend/src/components/Registrations/Registrations.svelte +++ b/frontend/src/components/Registrations/Registrations.svelte @@ -11,6 +11,7 @@ import { SelectedCompetition } from "../../store"; import { GenerateRandomPlayer } from "../../../bindings/changeme/astro/services/player"; import swal from "sweetalert"; + import { getNationFlag, getNationFlatAlt } from "../../Util"; // Variables that will be used in the component let players: (Models.Player | null)[] = []; @@ -124,23 +125,23 @@ key: "PlayerInitialRank", asc: !sortBy.asc, }; - }}>Initial Rank</th + }}>Rank</th > <th on:click={() => { sortBy = { - key: "PlayerFirstname", + key: "PlayerLastname", asc: !sortBy.asc, }; - }}>Firstname</th + }}>Lastname</th > <th on:click={() => { sortBy = { - key: "PlayerLastname", + key: "PlayerFirstname", asc: !sortBy.asc, }; - }}>Lastname</th + }}>Firstname</th > <th on:click={() => { @@ -213,12 +214,12 @@ > <td on:dblclick={async () => { - // Show a prompt to the user to change the firstname - let newFirstname = await swal({ + // Show a prompt to the user to change the lastname + let newLastname = await swal({ content: { element: "input", attributes: { - placeholder: "New firstname", + placeholder: "New lastname", }, }, buttons: { @@ -228,8 +229,8 @@ }); // Check if the user confirmed the prompt - if (newFirstname) { - player.PlayerFirstname = newFirstname; + if (newLastname) { + player.PlayerLastname = newLastname; if (competition != undefined) await Session.UpdateCompetitionPlayer( competition.CompetitionID, @@ -238,16 +239,17 @@ loadPlayers(); }); } - }}>{player.PlayerFirstname}</td + }} + >{player.PlayerLastname.toLocaleUpperCase()}</td > <td on:dblclick={async () => { - // Show a prompt to the user to change the lastname - let newLastname = await swal({ + // Show a prompt to the user to change the firstname + let newFirstname = await swal({ content: { element: "input", attributes: { - placeholder: "New lastname", + placeholder: "New firstname", }, }, buttons: { @@ -257,8 +259,8 @@ }); // Check if the user confirmed the prompt - if (newLastname) { - player.PlayerLastname = newLastname; + if (newFirstname) { + player.PlayerFirstname = newFirstname; if (competition != undefined) await Session.UpdateCompetitionPlayer( competition.CompetitionID, @@ -267,7 +269,7 @@ loadPlayers(); }); } - }}>{player.PlayerLastname}</td + }}>{player.PlayerFirstname}</td > <td >{#if player.PlayerClub}{player.PlayerClub @@ -277,9 +279,14 @@ >{#if player.PlayerRegion}{player.PlayerRegion .region_name}{:else}Sans Nom{/if}</td > - <td - >{#if player.PlayerNation}{player.PlayerNation - .nation_name}{:else}Sans Nom{/if}</td + <td class="flag-container" + ><img + src={getNationFlag(player.PlayerNation)} + alt="Player's flag : {getNationFlatAlt( + player.PlayerNation + )}" + class="flag" + /></td > </tr> {/if} @@ -348,4 +355,14 @@ color: red; text-align: center; } + + .flag-container { + text-align: left; + } + + .flag { + width: 20px; + height: 20px; + vertical-align: middle; + } </style>