score-tracker/public/scripts/manage.js

import * as Data from "./data.js";

const categoryDropdown = document.getElementById('category-dropdown');
const itemsListTable = document.getElementById('items-list');


function getGenderLetter(genderName) {
    return genderName == "female" ? "F" : "M";
}

class Category {
    constructor(name, getItems, listHeaders, listItem, addItem, submitItem, editItem) {
        this.name = name;
        this.getItems = getItems;
        this.listHeaders = listHeaders;
        this.listItem = listItem;
        this.addItem = addItem;
        this.submitItem = submitItem;
        this.editItem = editItem;
    }
}

const CATEGORIES = [];

CATEGORIES.push(new Category(
    "seasons",
    async function getSeasons() {
        return await Data.getSeasons();
    },
    async function listSeasonHeaders() {
        const headerRow = document.createElement('tr');

        const yearsHeader = document.createElement('th');
        yearsHeader.textContent = "Years";

        headerRow.appendChild(yearsHeader);

        const spacerHeader = document.createElement('th');
        spacerHeader.classList.add('spacer-column');
        headerRow.appendChild(spacerHeader);

        itemsListTable.appendChild(headerRow);
    },
    function listSeason(season, row) {
        const yearCell = document.createElement('td');
        yearCell.textContent = (season.year - 1) + "-" + season.year;
        row.appendChild(yearCell);

        const spacerCell = document.createElement('td');
        row.appendChild(spacerCell);
    },
    async function addSeason() {
        //
    },
    async function editSeason() {

    }
));

CATEGORIES.push(new Category(
    "sports",
    async function getSports() {
        return await Data.getSports();
    },
    async function listSportHeaders() {
        const headerRow = document.createElement('tr');

        const nameHeader = document.createElement('th');
        nameHeader.textContent = "Name";
        headerRow.appendChild(nameHeader);

        const spacerHeader = document.createElement('th');
        spacerHeader.classList.add('spacer-column');
        headerRow.appendChild(spacerHeader);

        itemsListTable.appendChild(headerRow);
    },
    function listSport(sport, row) {
        const nameCell = document.createElement('td');
        nameCell.textContent = sport.name;
        row.appendChild(nameCell);

        const spacerCell = document.createElement('td');
        row.appendChild(spacerCell);
    },
    async function addSport() {
        //
    },
    async function editSport() {

    }
));

CATEGORIES.push(new Category(
    "divisions",
    async function getDivisions() {
        return await Data.getDivisions();
    },
    async function listDivisionHeaders() {
        const headerRow = document.createElement('tr');

        const nameHeader = document.createElement('th');
        nameHeader.textContent = "Name";
        headerRow.appendChild(nameHeader);

        const genderHeader = document.createElement('th');
        headerRow.appendChild(genderHeader);

        const spacerHeader = document.createElement('th');
        spacerHeader.classList.add('spacer-column');
        headerRow.appendChild(spacerHeader);
        
        const sportHeader = document.createElement('th');
        sportHeader.textContent = "Sport";
        headerRow.appendChild(sportHeader);

        itemsListTable.appendChild(headerRow);
    },
    function listDivision(division, row) {
        const nameCell = document.createElement('td');
        nameCell.textContent = division.name;
        row.appendChild(nameCell);

        const genderCell = document.createElement('td');
        const gender = getGenderLetter(division.gender.name);
        genderCell.textContent = gender;
        row.appendChild(genderCell);

        const spacerCell = document.createElement('td');
        row.appendChild(spacerCell);

        const sportCell = document.createElement('td');
        Data.getSportName(division.sportID)
            .then(data => sportCell.textContent = data);
        row.appendChild(sportCell);
    },
    async function addSeason() {
        //
    },
    async function editSeason() {

    }
));

CATEGORIES.push(new Category(
    "teams",
    async function getTeams() {
        return await Data.getTeams();
    },
    async function listTeamHeaders() {
        const headerRow = document.createElement('tr');

        const nameHeader = document.createElement('th');
        nameHeader.textContent = "Name";
        headerRow.appendChild(nameHeader);

        const spacerHeader = document.createElement('th');
        spacerHeader.classList.add('spacer-column');
        headerRow.appendChild(spacerHeader);
        
        const sportHeader = document.createElement('th');
        sportHeader.textContent = "Sport";
        headerRow.appendChild(sportHeader);

        itemsListTable.appendChild(headerRow);
    },
    function listTeam(team, row) {
        const nameCell = document.createElement('td');
        nameCell.textContent = team.name;
        row.appendChild(nameCell);

        const spacerCell = document.createElement('td');
        row.appendChild(spacerCell);

        const sportCell = document.createElement('td');
        Data.getSportName(team.sportID)
            .then(data => sportCell.textContent = data);
        row.appendChild(sportCell);
    },
    async function addSeason() {
        //
    },
    async function editSeason() {

    }
));

CATEGORIES.push(new Category(
    "games",
    async function getGames() {
        return await Data.getGames();
    },
    async function listGameHeaders() {
        const headerRow = document.createElement('tr');

        const teamsHeader = document.createElement('th');
        teamsHeader.textContent = "Teams";
        headerRow.appendChild(teamsHeader);
        
        const scoreHeader = document.createElement('th');
        headerRow.appendChild(scoreHeader);

        const spacerHeader = document.createElement('th');
        spacerHeader.classList.add('spacer-column');
        headerRow.appendChild(spacerHeader);

        const sportNameHeader = document.createElement('th');
        sportNameHeader.textContent = "Sport";
        headerRow.appendChild(sportNameHeader);

        const dateHeader = document.createElement('th');
        dateHeader.textContent = "Date";
        headerRow.appendChild(dateHeader);

        itemsListTable.appendChild(headerRow);
    },
    function listGame(game, row) {
        const teamsCell = document.createElement('td');
        const team1NameSpan = document.createElement('span');
        Data.getTeamName(game.team1ID)
            .then(data => team1NameSpan.textContent = data);
        teamsCell.appendChild(team1NameSpan);
        const team2NameSpan = document.createElement('span');
        Data.getTeamName(game.team2ID)
            .then(data => team2NameSpan.textContent = data);
        teamsCell.appendChild(team2NameSpan);
        row.appendChild(teamsCell);

        const scoresCell = document.createElement('td');
        const team1ScoreSpan = document.createElement('span');
        team1ScoreSpan.textContent = game.team1Score;
        scoresCell.appendChild(team1ScoreSpan);
        const team2ScoreSpan = document.createElement('span');
        team2ScoreSpan.textContent = game.team2Score;
        scoresCell.appendChild(team2ScoreSpan);
        row.appendChild(scoresCell);
        
        const spacerCell = document.createElement('td');
        row.appendChild(spacerCell);

        const sportCell = document.createElement('td');
        const sportSpan = document.createElement('span');
        const divisionSpan = document.createElement('span');
        divisionSpan.classList.add('flat-content');
        const divisionNameSpan = document.createElement('span');
        const divisionGenderSpan = document.createElement('span');
        divisionSpan.appendChild(divisionNameSpan);
        divisionSpan.appendChild(divisionGenderSpan);
        Data.getDivision(game.divisionID)
            .then(data => {
                Data.getSportName(data.sportID)
                    .then(data => sportSpan.textContent = data);
                divisionNameSpan.textContent = data.name;
                divisionGenderSpan.textContent = getGenderLetter(data.gender.name);
            });
        sportCell.appendChild(sportSpan);
        sportCell.appendChild(divisionSpan);
        row.appendChild(sportCell);

        const dateCell = document.createElement('td');
        const yearSpan = document.createElement('span');
        yearSpan.textContent = game.date.slice(0,4);
        dateCell.appendChild(yearSpan);
        const dateSpan = document.createElement('span');
        dateSpan.textContent = game.date.slice(5);
        dateCell.appendChild(dateSpan);
        row.appendChild(dateCell);
    },
    async function addGame() {
        //
    },
    async function editSeason() {

    }
));



async function listItems(category) {
    itemsListTable.innerHTML = "";

    const itemsList = await category.getItems();

    await category.listHeaders();

    itemsList.forEach(item => {
        const row = document.createElement('tr');

        category.listItem(item, row);

        const manageCell = document.createElement('td');

        const editSpan = document.createElement('span');
        const editButton = document.createElement('button');
        editButton.textContent = "E";
        editSpan.appendChild(editButton);
        manageCell.appendChild(editSpan);

        const removeSpan = document.createElement('remove');
        const removeButton = document.createElement('button');
        removeButton.textContent = "D";
        removeSpan.appendChild(removeButton);
        manageCell.appendChild(removeSpan);

        row.appendChild(manageCell);

        itemsListTable.appendChild(row);
    });
}
listItems(CATEGORIES[categoryDropdown.selectedIndex]);



categoryDropdown.onchange = () => {
    listItems(CATEGORIES[categoryDropdown.selectedIndex]);
};