score-tracker/public/scripts/manage.js

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

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

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);

        itemsListTable.appendChild(headerRow);
    },
    function listSeason(season, row) {
        const yearCell = document.createElement('td');
        yearCell.textContent = (season.year - 1) + "-" + season.year;
        row.appendChild(yearCell);
    },
    async function addSeason() {
        //
    },
    async function submitSeason() {
        //
    },
    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);

        itemsListTable.appendChild(headerRow);
    },
    function listSport(sport, row) {
        const nameCell = document.createElement('td');
        nameCell.textContent = sport.name;
        row.appendChild(nameCell);
    },
    async function addSport() {
        //
    },
    async function submitSport() {
        //
    },
    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 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 = division.gender.name == "female" ? "F" : "M";
        genderCell.textContent = gender;
        row.appendChild(genderCell);

        const sportCell = document.createElement('td');
        Data.getSportName(division.sportID)
            .then(data => sportCell.textContent = data);
        row.appendChild(sportCell);
    },
    async function addSeason() {
        //
    },
    async function submitSeason() {
        //
    },
    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 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 sportCell = document.createElement('td');
        Data.getSportName(team.sportID)
            .then(data => sportCell.textContent = data);
        row.appendChild(sportCell);
    },
    async function addSeason() {
        //
    },
    async function submitSeason() {
        //
    },
    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 sportNameHeader = document.createElement('th');
        sportNameHeader.textContent = "Sport";
        headerRow.appendChild(sportNameHeader);

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

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

        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 sportCell = document.createElement('td');
        Data.getSportName(team.sportID)
            .then(data => sportCell.textContent = data);
        row.appendChild(sportCell);
    },
    async function addSeason() {
        //
    },
    async function submitSeason() {
        //
    },
    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 editCell = document.createElement('td');
        const editButton = document.createElement('button');
        editButton.textContent = "edit";
        editCell.appendChild(editButton);
        row.appendChild(editCell);

        const removeCell = document.createElement('td');
        const removeButton = document.createElement('button');
        removeButton.textContent = "remove";
        removeCell.appendChild(removeButton);
        row.appendChild(removeCell);

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



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