408 lines
13 KiB
JavaScript
408 lines
13 KiB
JavaScript
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');
|
|
|
|
|
|
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 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 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 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 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 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);
|
|
|
|
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');
|
|
Data.getTeam(game.team1ID)
|
|
.then(data => team1NameSpan.textContent = data.name);
|
|
teamsCell.appendChild(team1NameSpan);
|
|
const team2NameSpan = document.createElement('span');
|
|
Data.getTeam(game.team2ID)
|
|
.then(data => team2NameSpan.textContent = data.name);
|
|
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);
|
|
|
|
const submitterCell = document.createElement('td');
|
|
if(game.submitterID) {
|
|
Data.getAccount(game.submitterID)
|
|
.then(data => submitterCell.textContent = data.name);
|
|
} else {
|
|
submitterCell.textContent = game.submitterName;
|
|
console.log(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) {
|
|
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);
|
|
});
|
|
}
|
|
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()); |