score-tracker/public/scripts/manage.js

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

const categoryDropdown = document.getElementById('category-dropdown');
const itemsListTable = document.getElementById('items-list');
const addNewButton = document.getElementById('add-new-button');
const loadingSpan = document.getElementById('loading-message');


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

class Category {
    constructor(name, getItems, listHeaders, listItem, addItem, editItem) {
        this.name = name;
        this.getItems = getItems;
        this.listHeaders = listHeaders;
        this.listItem = listItem;
        this.addItem = addItem;
        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() {
        window.location.href = "/manage/season";
    },
    async function editSeason(id) {
        const verified = confirm(`This season will be removed.`);
    
        if(verified) {
            const form = document.createElement('form');
            form.action = "/manage/season";
            form.method = "POST";
            form.style.visibility = "hidden";
            itemsListTable.appendChild(form);

            const remove = document.createElement('input');
            remove.setAttribute('name', 'remove');
            remove.setAttribute('value', 1);
            form.appendChild(remove);

            const seasonID = document.createElement('input');
            seasonID.setAttribute('name', 'season');
            seasonID.setAttribute('value', id);
            form.appendChild(seasonID);

            form.submit();
        }
    }
));

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() {
        window.location.href = `/manage/sport`;
    },
    async function editSport(id) {
        window.location.href = `/manage/sport?sport=${id}`
    }
));

CATEGORIES.push(new Category(
    "divisions",
    async function getDivisions() {
        return await (await fetch('/fetch/manage/divisions')).json();
    },
    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');
        let sportName = division.sport.name;
        sportCell.textContent = sportName;
        row.appendChild(sportCell);
    },
    async function addDivision() {
        window.location.href = "/manage/division";
    },
    async function editDivision(id) {
        window.location.href = `/manage/division?division=${id}`
    }
));

CATEGORIES.push(new Category(
    "teams",
    async function getTeams() {
        return await (await fetch('/fetch/manage/teams')).json();
    },
    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');
        let sportName = team.sport.name;
        sportCell.textContent = sportName;
        row.appendChild(sportCell);
    },
    async function addTeam() {
        window.location.href = "/manage/team";
    },
    async function editTeam(id) {
        window.location.href = `/manage/team?team=${id}`;
    }
));

CATEGORIES.push(new Category(
    "games",
    async function getGames() {
        return await (await fetch('/fetch/manage/games')).json();
    },
    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);

        const submitterHeader = document.createElement('th');
        submitterHeader.textContent = "Submitter";
        headerRow.appendChild(submitterHeader);

        itemsListTable.appendChild(headerRow);
    },
    function listGame(game, row) {
        const teamsCell = document.createElement('td');
        const team1NameSpan = document.createElement('span');
        let team1Name = game.team1.name;
        team1NameSpan.textContent = team1Name;
        teamsCell.appendChild(team1NameSpan);
        const team2NameSpan = document.createElement('span');
        let team2Name = game.team2.name;
        team2NameSpan.textContent = team2Name;
        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);
        let divisionName = game.division.name;
        let sportName = game.sport.name;
        divisionNameSpan.textContent = divisionName;
        sportSpan.textContent = sportName;
        divisionGenderSpan.textContent = getGenderLetter(game.division.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);

        const submitterCell = document.createElement('td');
        if(game.submitterID) {
            let submitterName = game.submitter.name;
            submitterCell.textContent = submitterName;
        } else {
            submitterCell.textContent = game.submitterName;
        }
        row.appendChild(submitterCell);
    },
    async function addGame() {
        window.location.href = "/manage/game";
    },
    async function editGame(id) {
        window.location.href = `/manage/game?game=${id}`;
    }
));

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

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

        const emailHeader = document.createElement('th');
        emailHeader.textContent = "Email";
        headerRow.appendChild(emailHeader);

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

        itemsListTable.appendChild(headerRow);
    },
    function listAccount(account, row) {   
        const nameCell = document.createElement('td');
        nameCell.textContent = account.name;
        row.appendChild(nameCell);
        
        const emailCell = document.createElement('td');
        emailCell.textContent = account.email;
        row.appendChild(emailCell);

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

        const adminCell = document.createElement('td');
        adminCell.textContent = account.isAdmin;
        row.appendChild(adminCell);
    },
    async function addAccount() {
        window.location.href = "/manage/account";
    },
    async function editAccount(id) {
        window.location.href = `/manage/account?account=${id}`;
    }
));




async function listItems(category) {
    loadingSpan.textContent = "Loading...";

    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 = "✎";
        editButton.style['font-size'] = '1.25em';
        editButton.addEventListener('click', () => {
            CATEGORIES[categoryDropdown.selectedIndex].editItem(item.id);
        });
        editSpan.appendChild(editButton);
        manageCell.appendChild(editSpan);

        row.appendChild(manageCell);

        itemsListTable.appendChild(row);
    });

    loadingSpan.textContent = '';
}
if(window.location.hash) {
    let correctIndex;
    let index = 0;
    CATEGORIES.forEach(category => {
        if(window.location.hash == '#' + category.name) correctIndex = index;
        index++;
    })
    if(correctIndex || correctIndex === 0) categoryDropdown.selectedIndex = correctIndex;
}
listItems(CATEGORIES[categoryDropdown.selectedIndex]);


categoryDropdown.onchange = () => {
    listItems(CATEGORIES[categoryDropdown.selectedIndex]);
};
addNewButton.addEventListener('click', () => CATEGORIES[categoryDropdown.selectedIndex].addItem());