Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#106- Implement Officials centric view of matches #107

Open
wants to merge 13 commits into
base: main
Choose a base branch
from
120 changes: 119 additions & 1 deletion docs/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,7 @@ async function selectOrigin(origin, userClick) {
window.location.hash = ``;
if (activeButton) activeButton.classList.remove("selected");
document.getElementById("warning_team").classList.add("hidden");
document.getElementById("warning_official").classList.add("hidden");
document.getElementById("container_origin").classList.add("select");
return;
}
Expand All @@ -164,9 +165,17 @@ async function selectOrigin(origin, userClick) {
// Update last update timestamp
document.getElementById("label_last_update").textContent = parseDate(new Date(origins[origin].lastUpdate));

// Filter out official paths from the main list
origins[origin].mainPaths = origins[origin].paths.filter(path => !path.type || path.type !== 'official');
philipohagan marked this conversation as resolved.
Show resolved Hide resolved

// Prepare dropdowns and show initial paths
prepareClubs(origin);
clubChanged(origin, "null");
prepareOfficials(origin);
showMainPaths(origin);

newOriginButton.classList.remove("loading");
prepareClubSelector();
prepareOfficialSelector();

if (userClick) {
gtag('event', 'origin_select', {
Expand All @@ -179,6 +188,23 @@ async function selectOrigin(origin, userClick) {
document.title = `${fetchers[origin].name} calendars - Hockey Match Calendar | By Martijn van Kekem`;
}

/**
* Show the main paths for an origin
* @param origin The origin to show paths for
*/
function showMainPaths(origin) {
const container = document.getElementById("specific_body");
container.innerHTML = "";

// Sort and display main paths
const paths = origins[origin].mainPaths.sort((a, b) =>
((a.index ?? 0) - (b.index ?? 0)) || a.name.toString().localeCompare(b.name));

for (let row of paths) {
container.append(createTableRow(row));
}
}

/**
* Pad a string with zeroes at the start.
* @param input The input string.
Expand Down Expand Up @@ -260,10 +286,102 @@ function prepareClubSelector() {
});
}

/**
* Prepare the officials picker.
*/
function prepareOfficials(origin) {
const selectContainer = document.getElementById("official");
selectContainer.querySelectorAll(`option:not([value="null"])`).forEach(e => e.remove());
selectContainer.setAttribute("data-origin", origin);

// Get officials from paths
const officials = origins[origin].paths
.filter(path => path.type === 'official')
.map(path => {
const nameParts = path.name.split(' - ')[0].match(/^(.*?)(?:\s*\((.*?)\))?$/);
return {
name: nameParts[1],
country: nameParts[2] || '',
count: path.count
};
})
.sort((a,b) => a.name.localeCompare(b.name));

// Only show officials selector if we have officials
const officialSelector = document.getElementById("container_official");
if (!officials || officials.length === 0) {
officialSelector.classList.add("hidden");
return;
}

officialSelector.classList.remove("hidden");

// Add officials to dropdown
for (let official of officials) {
const optionEl = document.createElement("option");
optionEl.textContent = official.country ?
`${official.name} (${official.country})` :
official.name;
optionEl.value = `${official.name}${official.country ? `-${official.country}` : ''}`;
selectContainer.append(optionEl);
}
}

/**
* Select a new official.
* @param origin The origin.
* @param newOfficial The new official
*/
function officialChanged(origin, newOfficial) {
// Clear club selection
document.getElementById("team").value = "null";

// Empty current container
const container = document.getElementById("specific_body");
container.innerHTML = "";

if (newOfficial === "null") {
// Show all paths when "All officials" is selected
showMainPaths(origin);
document.getElementById("warning_official").classList.add("hidden");
return;
}

// Find official data from the paths
const officialPath = origins[origin].paths
.find(path => path.type === 'official' &&
path.name.split(' - ')[0] === newOfficial);

if (!officialPath) return;

// Show only this official's calendar
container.append(createTableRow({
name: "All matches",
path: officialPath.path,
count: officialPath.count
}));

// Show warning
const warningNotification = document.getElementById("warning_official");
warningNotification.classList.remove("hidden");
document.getElementById("official_selected").textContent = officialPath.name;
}

/**
* Prepare the official selector.
*/
function prepareOfficialSelector() {
const selectContainer = document.getElementById("official");
selectContainer.addEventListener("change", () => {
officialChanged(selectContainer.getAttribute("data-origin"), selectContainer.value)
});
}

/**
* When the window has loaded.
*/
window.addEventListener("DOMContentLoaded", async () => {
await addOriginButtons();
prepareClubSelector();
prepareOfficialSelector();
})
22 changes: 17 additions & 5 deletions docs/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -40,11 +40,19 @@ <h2>Match calendars</h2>
<ul class="origin-buttons" id="container_originButtons">
</ul>
<div class="origin-options">
<div class="pick-team" id="container_team">
<label for="team">Country / club:</label>
<select id="team">
<option value="null">All countries/clubs</option>
</select>
<div class="selectors">
<div class="pick-team" id="container_team">
<label for="team">Country / club:</label>
<select id="team">
<option value="null">All countries/clubs</option>
</select>
</div>
<div class="pick-official" id="container_official">
<label for="official">Official:</label>
<select id="official">
<option value="null">All officials</option>
</select>
</div>
</div>
<p class="last-update">Last update: <span id="label_last_update"></span></p>
</div>
Expand All @@ -53,6 +61,10 @@ <h2>Match calendars</h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. --><path d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"/></svg>
<span>All calendar links now only contain matches where <b id="team_selected"></b> will participate in.</span>
</div>
<div class="warning hidden" id="warning_official">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. --><path d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"/></svg>
<span>All calendar links now only contain matches where <b id="official_selected"></b> will officiate.</span>
</div>
<table>
<thead>
<tr>
Expand Down
27 changes: 16 additions & 11 deletions docs/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -93,30 +93,31 @@ h2 {
width: 100%;
margin-top: 0.7rem;
margin-bottom: 0.3rem;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem 2rem;
flex-direction: column;
gap: 0.5rem;
}

.origin-options p.last-update {
color: #6c6c6c;
font-size: 0.9rem;
margin: 0;
padding-block: 0.4rem;
.origin-options .selectors {
display: flex;
gap: 2rem;
flex-wrap: wrap;
}

.pick-team {
.pick-team,
.pick-official {
flex: 1;
display: flex;
align-items: center;
gap: 1rem;
}

.pick-team label {
.pick-team label,
.pick-official label {
flex-shrink: 0;
}

.pick-team select {
.pick-team select,
.pick-official select {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
Expand All @@ -127,6 +128,10 @@ h2 {
padding: 0.4rem 0.6rem;
}

.pick-team.hidden,
.pick-official.hidden {
display: none;
}

.origin-buttons {
list-style: none;
Expand Down
1 change: 1 addition & 0 deletions src/Fetchers/TMSFetcher/TMSFetcher.ts
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,7 @@ export class TMSFetcher extends Fetcher {
Gender.WOMEN),
ICSCreator.createGenderTotalICS(this, competitionsArray,
Gender.MIXED),
ICSCreator.createOfficialICS(this, competitionsArray)
]);

this.log("info", "Finished.");
Expand Down
12 changes: 6 additions & 6 deletions src/ICS.ts
Original file line number Diff line number Diff line change
Expand Up @@ -178,10 +178,10 @@ export interface FetcherClub {
}

export interface Metadata {
name?: string,
type?: "total" | "competition",
index?: number,
path?: string,
count?: number

type: "total" | "competition" | "official";
index?: number;
count: number;
name?: string;
country?: string;
path?: string;
}
60 changes: 60 additions & 0 deletions src/Utils/ICSCreator.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Competition } from "../Objects/Competition.js";
import { Fetcher } from "../Fetchers/Fetcher.js";
import { Club, Match } from "../Objects/Match.js";
import { Gender } from "../Objects/Gender.js";
import { Official } from "../Objects/Official.js";

export class ICSCreator {
/**
Expand Down Expand Up @@ -146,4 +147,63 @@ export class ICSCreator {
await ICSCreator.createClubICS(competition.getFetcher(),
competition.getMatches(), path, title, meta);
}

/**
* Create ICS files for each official's matches
* @param fetcher The fetcher
* @param competitions All competitions to include
*/
public static async createOfficialICS(
fetcher: Fetcher,
competitions: Competition[]
) {
const matches = competitions.map(e => e.getMatches()).flat();
const officialsMap = new Map<string, {
matches: Match[],
official: Official
}>();

// Group matches by official
for (const match of matches) {
for (const official of match.getOfficials()) {
const officialKey = `${official.name}${
official.country ? `-${official.country}` : ""
}`;

if (!officialsMap.has(officialKey)) {
officialsMap.set(officialKey, {
matches: [],
official
});
}

officialsMap.get(officialKey).matches.push(match);
}
}

// Create calendar file for each official
const promises = [];
for (const [officialKey, data] of officialsMap) {
const path = `officials/${officialKey}/all-matches`;
const title = `${data.official.name}${
data.official.country ? ` (${data.official.country})` : ""
} - All Matches`;

promises.push(ICS.writeToFile(
philipohagan marked this conversation as resolved.
Show resolved Hide resolved
fetcher,
data.matches,
title,
path,
null,
{
type: "official",
philipohagan marked this conversation as resolved.
Show resolved Hide resolved
count: data.matches.length,
name: data.official.name,
country: data.official.country
}
));
}

await Promise.all(promises);
}
}
49 changes: 49 additions & 0 deletions tests/src/Objects/Officials.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import { describe, expect, test } from "vitest";
import { Match } from "../../../src/Objects/Match.js";
import { Competition } from "../../../src/Objects/Competition.js";
import { TMSFetcher } from "../../../src/Fetchers/TMSFetcher/TMSFetcher.js";
import { Gender } from "../../../src/Objects/Gender.js";

describe("Officials functionality tests", () => {
const fetcher = new TMSFetcher("https://test.com", {
id: "test",
abbreviation: "TEST",
name: "Test Fetcher",
index: 0
});

describe("Match official management", () => {
const match = new Match();
match.setHomeTeam("home", "Home Team");
match.setAwayTeam("away", "Away Team");
match.setGender(Gender.MEN);

test("Add and retrieve officials", () => {
match.addOfficial("Umpire", "John Smith", "ENG");
match.addOfficial("Technical Officer", "Jane Doe", "NED");

const officials = match.getOfficials();
expect(officials).toHaveLength(2);
expect(officials).toContainEqual({
role: "Umpire",
name: "John Smith",
country: "ENG"
});
expect(officials).toContainEqual({
role: "Technical Officer",
name: "Jane Doe",
country: "NED"
});
});

test("Officials appear in match description", () => {
const competition = new Competition(fetcher, 0);
match.setCompetition(competition);

const description = match.getMatchDescription(false);
expect(description).toContain("Umpire: John Smith (ENG)");
expect(description).toContain("Technical Officer: Jane Doe (NED)");
});
});

});
Loading
Loading