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() {

    }
));



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