Merge branch 'management-page' into 'develop'

Create management pages along with subpages to edit and delete entries

See merge request sudoer777/cvcs-score-tracker!7

app.js

@@ -6,8 +6,8 @@ var logger = require('morgan');
 
 var indexRouter = require('./routes/index');
 var usersRouter = require('./routes/users');
-var submitRouter = require('./routes/submit');
 var dataRouter = require('./routes/data');
+var manageRouter = require('./routes/manage');
 
 var app = express();
 
@@ -23,8 +23,9 @@ app.use(express.static(path.join(__dirname, 'public')));
 
 app.use('/', indexRouter);
 app.use('/users', usersRouter);
-app.use('/submit', submitRouter);
 app.use('/data', dataRouter);
+app.use('/manage', manageRouter);
+
 
 // catch 404 and forward to error handler
 app.use(function(req, res, next) {

database/scores/divisions.js

@@ -6,9 +6,11 @@ const genders = require('./genders');
 
 
 class Division {
-    constructor(id, name) {
+    constructor(id, name, gender, sportID) {
         this.id = id;
         this.name = name;
+        this.gender = gender;
+        this.sportID = sportID;
     }
 }
 
@@ -18,6 +20,10 @@ function getGenderID(gender) {
     return (gender == genders.MALE) ? "M" : "F";
 }
 
+function getGenderFromID(genderID) {
+    return (genderID == "F") ? genders.FEMALE : genders.MALE;
+}
+
 
 
 async function add(name, gender, sportID) {
@@ -29,7 +35,7 @@ async function add(name, gender, sportID) {
     return new Division(id, name);
 }
 
-async function rename(id, division) {
+async function rename(id, name) {
     const query = `UPDATE scores.divisions
     SET division_name = $2
     WHERE division_id = $1;`;
@@ -45,21 +51,43 @@ async function remove(id) {
     return new Division(id, name);
 }
 
-async function retrieveBySportAndGender(sportID, gender) {
+async function retrieve(sportID = undefined, gender = undefined) {
-    const query = `SELECT *
+    let table;
+
+    if(sportID && gender) {
+        const query = `SELECT division_id, division_name, gender, sport_id
             FROM scores.divisions
             WHERE sport_id = $1 AND gender = $2
             ORDER BY division_name;`;
-    const genderID = getGenderID(gender);
+        const genderID = getGenderID(gender);
-    const table = await database.executeQuery(query, [sportID, genderID]);
+        table = await database.executeQuery(query, [sportID, genderID]);
+    }
+    else {
+        const query = `SELECT division_id, division_name, gender, sport_id
+            FROM scores.divisions
+            ORDER BY sport_id,
+                    division_name,
+                    gender;`;
+        table = await database.executeQuery(query);
+    }
 
     const divisionsList = [];
     table.forEach((row) => {
-        divisionsList.push(new Division(row[0], row[1]));
+        divisionsList.push(new Division(row[0], row[1], getGenderFromID(row[2]), row[3]));
     });
     return divisionsList;
 }
 
+async function getFromID(id) {
+    const query = `SELECT division_id, division_name, gender, sport_id
+        FROM scores.divisions
+        WHERE division_id = $1;`;
+    const row = (await database.executeQuery(query, [id]))[0];
+
+
+    return new Division(id, row[1], getGenderFromID(row[2]), row[3]);
+}
+
 
 
 
@@ -67,4 +95,5 @@ async function retrieveBySportAndGender(sportID, gender) {
 exports.add = add;
 exports.rename = rename;
 exports.remove = remove;
-exports.retrieveBySportAndGender = retrieveBySportAndGender;
+exports.retrieve = retrieve;
+exports.getFromID = getFromID;

database/scores/games.js

@@ -5,13 +5,15 @@ const database = require('./../database');
 
 
 class Game {
-    constructor(id, date, team1ID, team2ID, team1Score, team2Score) {
+    constructor(id, date, team1ID, team2ID, team1Score, team2Score, divisionID, seasonID) {
         this.id = id;
         this.date = date;
         this.team1ID = team1ID;
         this.team2ID = team2ID;
         this.team1Score = team1Score;
         this.team2Score = team2Score;
+        this.divisionID = divisionID;
+        this.seasonID = seasonID;
     }
 }
 
@@ -21,10 +23,8 @@ async function add(divisionID, seasonID, date, team1ID, team2ID, team1Score, tea
     const query = `INSERT INTO scores.games(division_id, season_id, game_date, team1_id, team2_id, team1_score, team2_score)
             VALUES($1, $2, $3, $4, $5, $6, $7)
             RETURNING game_id;`;
-    
-    const dateISO = date.format('YYYY-MM-DD');
 
-    const id = (await database.executeQuery(query, [divisionID, seasonID, dateISO, team1ID, team2ID, team1Score, team2Score]))[0][0];
+    const id = (await database.executeQuery(query, [divisionID, seasonID, date, team1ID, team2ID, team1Score, team2Score]))[0][0];
     return new Game(id, date, team1ID, team2ID, team1Score, team2Score);
 }
 
@@ -36,30 +36,69 @@ async function remove(id) {
     return new Game(id, row[3], row[4], row[5], row[6], row[7]);
 }
 
-async function retrieveByTeamDivisionAndSeason(teamID, divisionID, seasonID) {
+async function retrieve(teamID, divisionID, seasonID) {
-    const query = `SELECT *
+    let table;
+
+    if(teamID && divisionID && seasonID) {
+        const query = `SELECT game_id, division_id, season_id, game_date, team1_id, team2_id, team1_score, team2_score
             FROM scores.games
             WHERE (team1_id = $1 OR team2_id = $1) AND division_id = $2 AND season_id = $3
             ORDER BY game_date DESC;`;
-    const table = (await database.executeQuery(query, [teamID,divisionID,seasonID]));
+        table = await database.executeQuery(query, [teamID,divisionID,seasonID]);
+    }
+    else {
+        const query = `SELECT game_id, division_id, season_id, game_date, team1_id, team2_id, team1_score, team2_score
+            FROM scores.games
+            ORDER BY game_date DESC;`;
+        table = await database.executeQuery(query);
+    }
+    
 
     const gamesList = [];
     table.forEach((row) => {
-        opponentIsTeam2 = teamID != row[5];
+        if(teamID) {
-        opponentID = opponentIsTeam2 ? row[5] : row[4];
+            const opponentIsTeam2 = teamID != row[5];
-        teamScore = opponentIsTeam2 ? row[6] : row[7];
+            const opponentID = opponentIsTeam2 ? row[5] : row[4];
-        opponentScore = opponentIsTeam2 ? row[7] : row[6];
+            const teamScore = opponentIsTeam2 ? row[6] : row[7];
-
+            const opponentScore = opponentIsTeam2 ? row[7] : row[6];
-        gamesList.push(new Game(row[0], row[3].toISOString().slice(0,10), teamID, opponentID, teamScore, opponentScore));
+    
+            gamesList.push(new Game(row[0], row[3].toISOString().slice(0,10), teamID, opponentID, teamScore, opponentScore, row[1], row[2]));    
+        }
+        else {
+            gamesList.push(new Game(row[0], row[3].toISOString().slice(0,10), row[4], row[5], row[6], row[7], row[1], row[2]));    
+        }
     });
-    console.log(gamesList);
     return gamesList;
 }
 
+async function edit(gameID, divisionID, seasonID, date, team1ID, team2ID, team1Score, team2Score) {
+    const query = `UPDATE scores.games
+    SET division_id = $2,
+        season_id = $3,
+        game_date = $4,
+        team1_id = $5,
+        team2_id = $6,
+        team1_score = $7,
+        team2_score = $8
+    WHERE game_id = $1;`;
+    await database.executeQuery(query, [gameID, divisionID, seasonID, date, team1ID, team2ID, team1Score, team2Score]);
+    return new Game(gameID, date, team1ID, team2ID, team1Score, team2Score, divisionID, seasonID);
+}
+
+async function getFromID(gameID) {
+    const query = `SELECT game_id, division_id, season_id, game_date, team1_id, team2_id, team1_score, team2_score
+            FROM scores.games
+            WHERE game_id = $1;`;
+    const row = (await database.executeQuery(query, [gameID]))[0];
+    return new Game(row[0], row[3].toISOString().slice(0,10), row[4], row[5], row[6], row[7], row[1], row[2]);
+}
+
 
 
 
 
 exports.add = add;
 exports.remove = remove;
-exports.retrieveByTeamDivisionAndSeason = retrieveByTeamDivisionAndSeason;
+exports.retrieve = retrieve;
+exports.edit = edit;
+exports.getFromID = getFromID;

database/scores/sports.js

@@ -48,6 +48,14 @@ async function retrieveAll() {
     return sportsList;
 }
 
+async function getFromID(id) {
+    const query = `SELECT sport_name
+            FROM scores.sports
+            WHERE sport_id = $1;`;
+    const name = (await database.executeQuery(query, [id]))[0][0];
+    return new Sport(id, name);
+}
+
 
 
 
@@ -55,4 +63,5 @@ async function retrieveAll() {
 exports.add = add;
 exports.rename = rename;
 exports.remove = remove;
-exports.retrieveAll = retrieveAll;
+exports.retrieveAll = retrieveAll;
+exports.getFromID = getFromID;

database/scores/teams.js

@@ -5,9 +5,10 @@ const database = require('./../database');
 
 
 class Team {
-    constructor(id, name) {
+    constructor(id, name, sportID) {
         this.id = id;
         this.name = name;
+        this.sportID = sportID;
     }
 }
 
@@ -37,26 +38,39 @@ async function remove(id) {
     return new Team(id, name);
 }
 
-async function retrieveBySport(sportID) {
+async function retrieve(sportID = undefined) {
-    const query = `SELECT *
+    let table;
+
+    if(sportID) {
+        const query = `SELECT team_id, team_name, sport_id
             FROM scores.teams
             WHERE sport_id = $1
             ORDER BY team_name;`;
-    const table = await database.executeQuery(query, [sportID]);
+        table = await database.executeQuery(query, [sportID]);
+    }
+    else {
+        const query = `SELECT team_id, team_name, sport_id
+            FROM scores.teams
+            ORDER BY
+                sport_id,
+                team_name;`;
+        table = await database.executeQuery(query);
+    }
 
     const teamsList = [];
     table.forEach((row) => {
-        teamsList.push(new Team(row[0], row[1]));
+        teamsList.push(new Team(row[0], row[1], row[2]));
     });
     return teamsList;
 }
 
 async function getFromID(id) {
-    const query = `SELECT team_name
+    const query = `SELECT team_name, sport_id
             FROM scores.teams
             WHERE team_id = $1;`;
-    const name = (await database.executeQuery(query, [id]))[0][0];
+    const row = (await database.executeQuery(query, [id]))[0];
-    return new Team(id, name);
+    console.log(row);
+    return new Team(id, row[0], row[1]);
 }
 
 
@@ -66,5 +80,5 @@ async function getFromID(id) {
 exports.add = add;
 exports.rename = rename;
 exports.remove = remove;
-exports.retrieveBySport = retrieveBySport;
+exports.retrieve = retrieve;
 exports.getFromID = getFromID;

public/scripts/data.js

@@ -1,11 +1,17 @@
 export async function getSports() {
-    const response = await fetch('/data/sports');
+    const response = await fetch(`/data/sports`);
     const sportsList = await response.json();
     return sportsList;
 }
 
+export async function getSportName(sportID) {
+    const response = await fetch(`/data/sport?sport=${sportID}`);
+    const sport = await response.json();
+    return sport.name;
+}
+
 export async function getSeasons() {
-    const response = await fetch('/data/seasons');
+    const response = await fetch(`/data/seasons`);
     const seasonsList = await response.json();
     return seasonsList;
 }
@@ -16,26 +22,51 @@ export async function getGenders(sportID) {
     return gendersList;
 }
 
-export async function getDivisions(sportID, gender) {
+export async function getDivisions(sportID = undefined, gender = undefined) {
-    const response = await fetch(`/data/divisions?sport=${+sportID}&gender=${gender}`);
+    let URL = '/data/divisions?';
+    if(sportID) URL += `sport=${+sportID}&`;
+    if(gender) URL += `gender=${gender}&`;
+
+    const response = await fetch(URL);
     const divisionsList = await response.json();
     return divisionsList;
 }
 
-export async function getTeams(sportID) {
+export async function getDivision(divisionID) {
-    const response = await fetch(`/data/teams?sport=${+sportID}`);
+    const response = await fetch(`/data/division?division=${divisionID}`);
+    const division = await response.json();
+    return division;
+}
+
+export async function getTeams(sportID = undefined) {
+    let URL = '/data/teams?';
+    if(sportID) URL += `sport=${+sportID}&`;
+
+    const response = await fetch(URL);
     const teamsList = await response.json();
     return teamsList;
 }
 
-export async function getTeamName(teamID) {
+export async function getTeam(teamID) {
     const response = await fetch(`/data/team?team=${+teamID}`);
     const team = await response.json();
-    return team.name;
+    return team;
 }
 
-export async function getGames(teamID, divisionID, seasonID) {
+export async function getGames(teamID = undefined, divisionID = undefined, seasonID = undefined) {
-    const response = await fetch(`/data/games?team=${+teamID}&division=${+divisionID}&season=${+seasonID}`);
+    let URL = '/data/games?';
+    if(teamID) URL += `team=${+teamID}&`;
+    if(divisionID) URL += `division=${+divisionID}&`;
+    if(seasonID) URL += `season=${+seasonID}`;
+
+
+    const response = await fetch(URL);
     const gamesList = await response.json();
     return gamesList;
+}
+
+export async function getGame(gameID) {
+    const response = await fetch(`/data/game?game=${gameID}`);
+    const game = await response.json();
+    return game;
 }

public/scripts/form.js

@@ -0,0 +1,126 @@
+import * as Data from "./data.js";
+
+export async function populateSports(sportDropdown, selectedSportID = undefined) {
+    sportDropdown.innerHTML = "";
+
+    const sportsList = await Data.getSports();
+    
+    let currentIndex = 0;
+    let selectedSportIndex;
+    sportsList.forEach(sport => {
+        const option = document.createElement('option');
+        option.text = sport.name;
+        option.value = sport.id;
+        sportDropdown.appendChild(option);
+
+        if(sport.id == selectedSportID) selectedSportIndex = currentIndex;
+        currentIndex++;
+    });
+
+    if(selectedSportIndex) sportDropdown.selectedIndex = selectedSportIndex;
+}
+
+export async function populateSeasons(seasonDropdown, selectedSeasonID = undefined) {
+    seasonDropdown.innerHTML = "";
+    
+    const seasonsList = await Data.getSeasons();
+
+    let currentIndex = 0;
+    let selectedSeasonIndex;
+    seasonsList.forEach(season => {
+        const option = document.createElement('option');
+        option.text = (season.year - 1) + "-" + season.year;
+        option.value = season.id;
+        seasonDropdown.appendChild(option);
+
+        if(season.id == selectedSeasonID) selectedSeasonIndex = currentIndex;
+        currentIndex++;
+    });
+
+    if(selectedSeasonIndex) seasonDropdown.selectedIndex = selectedSeasonIndex;
+}
+
+export async function populateGenders(genderDropdown, selectedSportID, selectedGender = undefined) {
+    genderDropdown.innerHTML = "";
+
+    const gendersList = await Data.getGenders(selectedSportID);
+
+    if(selectedSportID) {
+        let currentIndex = 0;
+        let selectedGenderIndex;    
+        gendersList.forEach(gender => {
+            const option = document.createElement('option');
+            option.text = (gender.name == "female") ? "Female" : (gender.name == "male") ? "Male" : "";
+            option.value = gender.name;
+            genderDropdown.appendChild(option);
+
+            if(gender.name == selectedGender) selectedGenderIndex = currentIndex;
+            currentIndex++;    
+        });
+
+        if(selectedGenderIndex) genderDropdown.selectedIndex = selectedGenderIndex;
+    }
+}
+
+export async function populateDivisions (divisionDropdown, selectedSportID, selectedGender, selectedDivisionID = undefined) {
+    divisionDropdown.innerHTML = "";
+
+    if(selectedSportID && selectedGender) {
+        const divisionsList = await Data.getDivisions(selectedSportID, selectedGender);
+
+        let currentIndex = 0;
+        let selectedDivisionIndex;
+        divisionsList.forEach(division => {
+            const option = document.createElement('option');
+            option.text = division.name;
+            option.value = division.id;
+            divisionDropdown.appendChild(option);
+
+            if(division.id == selectedDivisionID) selectedDivisionIndex = currentIndex;
+            currentIndex++;    
+        });
+
+        if(selectedDivisionIndex) divisionDropdown.selectedIndex = selectedDivisionIndex;
+    }
+}
+
+export async function populateTeams(teamDropdown, selectedSportID, selectedTeamID) {
+    teamDropdown.innerHTML = "";
+
+    if(selectedSportID) {
+        const teamsList = await Data.getTeams(selectedSportID);
+
+        let currentIndex = 0;
+        let selectedTeamIndex;    
+        teamsList.forEach(team => {
+            const option = document.createElement('option');
+            option.text = team.name;
+            option.value = team.id;
+            teamDropdown.appendChild(option);
+
+            if(team.id == selectedTeamID) selectedTeamIndex = currentIndex;
+            currentIndex++;    
+        });
+        
+        if(selectedTeamIndex) teamDropdown.selectedIndex = selectedTeamIndex;
+    }
+}
+
+export async function addHiddenValue(name, value, form) {
+    const valueInput = document.createElement('input');
+    valueInput.setAttribute('name', name);
+    valueInput.setAttribute('value', value);
+    valueInput.setAttribute('type', 'hidden');
+    form.appendChild(valueInput);
+}
+
+export async function addRemoveFunction(removeButton, form, objectTitle) {
+    removeButton.addEventListener('click', async () => {
+        const verified = confirm(`This ${objectTitle} will be removed.`);
+    
+        if(verified) {
+            await addHiddenValue('remove', 1, form);
+            form.submit();
+        }
+    });
+}

public/scripts/index.js

@@ -8,6 +8,8 @@ const teamDropdown = document.getElementById('team-dropdown');
 const gamesTable = document.getElementById('games-table');
 const gamesTableHeader = document.getElementById('games-table-header');
 const noScoresMessage = document.getElementById('no-scores-message');
+const addScoreButton = document.getElementById('add-score-button');
+const manageButton = document.getElementById('manage-button');
 
 
 
@@ -20,7 +22,7 @@ async function listSeasons() {
 
     seasonsList.forEach(season => {
         const option = document.createElement('option');
-        option.text = season.year - 1 + "-" + season.year;
+        option.text = (season.year - 1) + "-" + season.year;
         option.value = season.id;
         seasonDropdown.appendChild(option);
     });
@@ -128,8 +130,8 @@ async function listGames() {
                 row.appendChild(scoreCell);
     
                 const opponentCell = document.createElement('td');
-                Data.getTeamName(game.team2ID)
+                Data.getTeam(game.team2ID)
-                    .then(data => opponentCell.textContent = data);
+                    .then(data => opponentCell.textContent = data.name);
                 row.appendChild(opponentCell);
     
                 const dateCell = document.createElement('td');
@@ -173,4 +175,13 @@ sportDropdown.onchange = (() => {
 });
 genderDropdown.onchange = listDivisions;
 teamDropdown.onchange = listGames;
-seasonDropdown.onchange = listGames;
+seasonDropdown.onchange = listGames;
+
+
+addScoreButton.addEventListener('click', () => {
+    window.location.href = '/manage/game';
+});
+
+manageButton.addEventListener('click', () => {
+    window.location.href = '/manage'
+});

public/scripts/manage.js

@@ -0,0 +1,334 @@
+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);
+
+        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);
+    },
+    async function addGame() {
+        window.location.href = "/manage/game";
+    },
+    async function editGame(id) {
+        window.location.href = `/manage/game?game=${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 = "E";
+        editButton.addEventListener('click', () => {
+            CATEGORIES[categoryDropdown.selectedIndex].editItem(item.id);
+        });
+        editSpan.appendChild(editButton);
+        manageCell.appendChild(editSpan);
+
+        row.appendChild(manageCell);
+
+        itemsListTable.appendChild(row);
+    });
+}
+listItems(CATEGORIES[categoryDropdown.selectedIndex]);
+
+
+
+categoryDropdown.onchange = () => {
+    listItems(CATEGORIES[categoryDropdown.selectedIndex]);
+};
+addNewButton.addEventListener('click', () => CATEGORIES[categoryDropdown.selectedIndex].addItem());

public/scripts/manage/division.js

@@ -0,0 +1,57 @@
+import * as Data from "../data.js";
+import * as Form from "../form.js";
+
+
+const submissionForm = document.getElementById('submission-form');
+const sportDropdown = document.getElementById('sport-dropdown');
+const genderDropdown = document.getElementById('gender-dropdown');
+const nameTextbox = document.getElementById('name-textbox');
+const submitButton = document.getElementById('submit-button');
+const deleteButton = document.getElementById('delete-button');
+
+
+async function initializeForm() {
+    let params = new URLSearchParams(location.search);
+    let divisionID = params.get('division');
+    if(divisionID) {
+        const division = await Data.getDivision(divisionID);
+
+        nameTextbox.value = division.name;
+
+        deleteButton.style.visibility = "visible";
+        deleteButton.disabled = false;
+
+        const gender = division.gender.name;
+
+        if(gender == 'female') genderDropdown.selectedIndex = 1;
+        else genderDropdown.selectedIndex = 2;
+
+        Form.populateSports(sportDropdown, division.sportID);
+
+        Form.addHiddenValue('division', divisionID, submissionForm);
+    }
+    else {
+        Form.populateSports(sportDropdown);
+
+        genderDropdown.disabled = false;
+
+        sportDropdown.disabled = false;
+    }
+
+    nameTextbox.disabled = false;
+    nameTextbox.addEventListener('keyup', checkDataValidity);
+}
+initializeForm();
+
+async function checkDataValidity() {
+    let dataIsValid = true;
+
+    if(!nameTextbox.value) dataIsValid = false;
+
+
+    if(dataIsValid) submitButton.disabled = false;
+    else submitButton.disabled = true;
+}
+
+Form.addRemoveFunction(deleteButton, submissionForm, "division");
+

public/scripts/manage/game.js

@@ -0,0 +1,71 @@
+import * as Data from "./../data.js";
+import * as Form from "./../form.js";
+
+
+const submissionForm = document.getElementById('submission-form');
+const sportDropdown = document.getElementById('sport-dropdown');
+const seasonDropdown = document.getElementById('year-dropdown');
+const genderDropdown = document.getElementById('gender-dropdown');
+const divisionDropdown = document.getElementById('division-dropdown');
+const dateInput = document.getElementById('date-input');
+const team1Dropdown = document.getElementById('team1-dropdown');
+const team2Dropdown = document.getElementById('team2-dropdown');
+const team1ScoreTextbox = document.getElementById('team1-score-textbox');
+const team2ScoreTextbox = document.getElementById('team2-score-textbox');
+const submitButton = document.getElementById('submit-button');
+const deleteButton = document.getElementById('delete-button');
+
+
+async function initializeForm() {
+    let params = new URLSearchParams(location.search);
+    let gameID = params.get('game');
+    if(gameID) {
+        deleteButton.style.visibility = "visible";
+        deleteButton.disabled = false;
+
+        const game = await Data.getGame(gameID);
+
+        Form.populateSeasons(seasonDropdown, game.seasonID);
+        Data.getDivision(game.divisionID)
+            .then(data => {
+                Form.populateSports(sportDropdown, data.sportID)
+                    .then(() => {
+                        Form.populateGenders(genderDropdown, sportDropdown.value, data.gender.name)
+                            .then(() => {
+                                Form.populateDivisions(divisionDropdown, sportDropdown.value, genderDropdown.value, game.divisionID);
+                            });
+                        Form.populateTeams(team1Dropdown, sportDropdown.value, game.team1ID);
+                        Form.populateTeams(team2Dropdown, sportDropdown.value, game.team2ID);
+                    });
+            });
+        dateInput.value = game.date;
+        team1ScoreTextbox.value = game.team1Score;
+        team2ScoreTextbox.value = game.team2Score;
+    }
+    else {
+        Form.populateSeasons(seasonDropdown);
+        Form.populateSports(sportDropdown)
+                    .then(() => {
+                        Form.populateGenders(genderDropdown, sportDropdown.value)
+                            .then(() => {
+                                Form.populateDivisions(divisionDropdown, sportDropdown.value, genderDropdown.value);
+                            });
+                        Form.populateTeams(team1Dropdown, sportDropdown.value);
+                        Form.populateTeams(team2Dropdown, sportDropdown.value);
+                    });
+        dateInput.value = (new Date()).toISOString().slice(0,10);
+    }
+    seasonDropdown.disabled = false;
+    sportDropdown.disabled = false;
+    genderDropdown.disabled = false;
+    divisionDropdown.disabled = false;
+    dateInput.disabled = false;
+    team1Dropdown.disabled = false;
+    team2Dropdown.disabled = false;
+    team1ScoreTextbox.disabled = false;
+    team2ScoreTextbox.disabled = false;
+    submitButton.disabled = false;
+}
+initializeForm();
+
+Form.addRemoveFunction(deleteButton, submissionForm, "game");

public/scripts/manage/sport.js

@@ -0,0 +1,58 @@
+import * as Data from "../data.js";
+
+
+const mainHeader = document.getElementById('main-header');
+const nameTextbox = document.getElementById('name-textbox');
+const submitButton = document.getElementById('submit-button');
+const deleteButton = document.getElementById('delete-button');
+const submissionForm = document.getElementById('submission-form');
+
+
+async function initializeForm() {
+    let params = new URLSearchParams(location.search);
+    let sportID = params.get('sport')
+    if(sportID) {
+        mainHeader.textContent = "Edit Sport";
+
+        const sportName = await Data.getSportName(sportID);
+
+        nameTextbox.value = sportName;
+        deleteButton.style.visibility = "visible";
+        deleteButton.disabled = false;
+
+        const sportIDInput = document.createElement('input');
+        sportIDInput.setAttribute('name', 'sport');
+        sportIDInput.setAttribute('value', sportID);
+        sportIDInput.setAttribute('type', 'hidden');
+        submissionForm.appendChild(sportIDInput);
+    }
+    nameTextbox.disabled = false;
+
+    nameTextbox.addEventListener('keyup', checkDataValidity);
+}
+initializeForm();
+
+async function checkDataValidity() {
+    let dataIsValid = true;
+
+    if(!nameTextbox.value) dataIsValid = false;
+
+
+    if(dataIsValid) submitButton.disabled = false;
+    else submitButton.disabled = true;
+}
+
+async function removeSport() {
+    const removeInput = document.createElement('input');
+    removeInput.setAttribute('name', 'remove');
+    removeInput.setAttribute('value', 1);
+    removeInput.setAttribute('type', 'hidden');
+    submissionForm.appendChild(removeInput);
+    submissionForm.submit();
+}
+
+deleteButton.addEventListener('click', () => {
+    const verified = confirm("This sport will be removed.");
+
+    if(verified) removeSport();
+});

public/scripts/manage/team.js

@@ -0,0 +1,48 @@
+import * as Data from "../data.js";
+import * as Form from "../form.js";
+
+
+const submissionForm = document.getElementById('submission-form');
+const sportDropdown = document.getElementById('sport-dropdown');
+const nameTextbox = document.getElementById('name-textbox');
+const submitButton = document.getElementById('submit-button');
+const deleteButton = document.getElementById('delete-button');
+
+async function initializeForm() {
+    let params = new URLSearchParams(location.search);
+    let teamID = params.get('team');
+    if(teamID) {
+        const team = await Data.getTeam(teamID);
+
+        nameTextbox.value = team.name;
+
+        deleteButton.style.visibility = "visible";
+        deleteButton.disabled = false;
+
+        Form.populateSports(sportDropdown, team.sportID);
+
+        console.log(team.sportID);
+        Form.addHiddenValue('team', teamID, submissionForm);
+    }
+    else {
+        sportDropdown.disabled = false;
+
+        Form.populateSports(sportDropdown);
+    }
+
+    nameTextbox.disabled = false;
+    nameTextbox.addEventListener('keyup', checkDataValidity);
+}
+initializeForm();
+
+async function checkDataValidity() {
+    let dataIsValid = true;
+
+    if(!nameTextbox.value) dataIsValid = false;
+
+
+    if(dataIsValid) submitButton.disabled = false;
+    else submitButton.disabled = true;
+}
+
+Form.addRemoveFunction(deleteButton, submissionForm, "team");

public/scripts/submit.js

@@ -19,7 +19,7 @@ async function listSeasons() {
 
     seasonsList.forEach(season => {
         const option = document.createElement('option');
-        option.text = season.year - 1 + "-" + season.year;
+        option.text = (season.year - 1) + "-" + season.year;
         option.value = season.id;
         seasonDropdown.appendChild(option);
     });

public/stylesheets/form.css

@@ -31,4 +31,8 @@ form {
   
   #submit-button {
       margin-top: 1.5em;
+  }
+
+  #delete-button {
+      visibility: hidden;
   }

public/stylesheets/index.css

@@ -18,4 +18,15 @@ th {
 
 tr {
     height: 3em;
+}
+
+#header-div {
+    display: flex;
+    flex-direction: row;
+}
+
+#actions-div {
+    display: flex;
+    flex-direction: column;
+    margin-left: auto;
 }

public/stylesheets/manage.css

@@ -0,0 +1,11 @@
+th {
+    text-align: left;
+}
+
+td {
+    white-space: nowrap;
+}
+
+.spacer-column {
+    width: 100%;
+}

public/stylesheets/style.css

@@ -15,3 +15,6 @@ a {
   flex-direction: column;
 }
 
+.flat-content {
+  flex-direction: row;
+}

routes/data.js

@@ -13,6 +13,11 @@ router.get('/sports', function(req, res, next) {
         .then(data => res.json(data));
 });
 
+router.get('/sport', function(req, res, next) {
+    sports.getFromID(req.query.sport)
+        .then(data => res.json(data));
+});
+
 router.get('/seasons', function(req, res, next) {
     seasons.retrieveAll()
         .then(data => res.json(data));
@@ -24,14 +29,20 @@ router.get('/genders', function(req, res, next) {
 })
 
 router.get('/divisions', function(req, res, next) {
-    const gender = req.query.gender == 'female' ? genders.FEMALE : genders.MALE;
+    let gender;
+    if(req.query.gender) gender = (req.query.gender == 'female' ? genders.FEMALE : genders.MALE);
 
-    divisions.retrieveBySportAndGender(req.query.sport, gender)
+    divisions.retrieve(req.query.sport, gender)
+        .then(data => res.json(data));
+})
+
+router.get('/division', function(req, res, next) {
+    divisions.getFromID(req.query.division)
         .then(data => res.json(data));
 })
 
 router.get('/teams', function(req, res, next) {
-    teams.retrieveBySport(req.query.sport)
+    teams.retrieve(req.query.sport)
         .then(data => res.json(data));
 })
 
@@ -41,7 +52,12 @@ router.get('/team', function(req, res, next) {
 })
 
 router.get('/games', function(req, res, next) {
-    games.retrieveByTeamDivisionAndSeason(req.query.team, req.query.division, req.query.season)
+    games.retrieve(req.query.team, req.query.division, req.query.season)
+        .then(data => res.json(data));
+})
+
+router.get('/game', function(req, res, next) {
+    games.getFromID(req.query.game)
         .then(data => res.json(data));
 })
 

routes/index.js

@@ -1,6 +1,5 @@
 var express = require('express');
 var router = express.Router();
-var database = require('../database/database');
 
 /* GET home page. */
 router.get('/', function(req, res, next) {

routes/manage.js

@@ -0,0 +1,121 @@
+var express = require('express');
+var router = express.Router();
+var genders = require('../database/scores/genders');
+var games = require('../database/scores/games');
+var seasons = require('../database/scores/seasons');
+var sports = require('../database/scores/sports');
+var divisions = require('../database/scores/divisions');
+var genders = require('../database/scores/genders');
+var teams = require('../database/scores/teams');
+
+
+router.get('/', function(req, res, next) {
+  res.render('manage', { title: 'Score Management' });
+});
+
+router.get('/game', function(req, res, next) {
+  let title = req.query.game ? 'Edit Game' : 'Submit Score'
+  
+  res.render('manage/addgame', { title });
+});
+
+router.post('/game', function(req, res, next) {
+  const seasonID = req.body['year'];
+  const sportID = req.body['sport'];
+  const gender = (req.body['gender'] == "female") ? genders.FEMALE : genders.MALE;
+  const divisionID = req.body['division'];
+  const date = req.body['date'];
+  const team1ID = req.body['team1'];
+  const team1Score = req.body['team1-score'];
+  const team2ID = req.body['team2'];
+  const team2Score = req.body['team2-score'];
+
+  const id = req.body['game'];
+  const remove = req.body['delete'];
+
+  if(remove) games.remove(id)
+          .then(res.redirect("/manage"));
+  else if(id) games.edit(id, divisionId, seasonID, date, team1ID, team2ID, team1Score, team2Score)
+          .then(res.redirect('/manage'));
+  else games.add(divisionID, seasonID, date, team1ID, team2ID, team1Score, team2Score)
+          .then(res.redirect("/manage"));
+});
+
+router.get('/season', function(req, res, next) {
+  res.render('manage/addseason', { title: 'Add Season', currentYear : (new Date()).getFullYear() });
+});
+
+router.post('/season', function(req, res, next) {
+  const year = req.body['year'];
+
+  const seasonID = req.body['season'];
+  const remove = req.body['remove'];
+
+  if(remove) seasons.remove(seasonID).then(res.redirect('/manage'));
+  else seasons.add(year).then(res.redirect("/manage"));
+});
+
+router.get('/sport', function(req, res, next) {
+  res.render('manage/addsport', { title: 'Add Sport' });
+});
+
+router.post('/sport', function(req, res, next) {
+  const name = req.body['name'];
+  const id = req.body['sport'];
+  const remove = req.body['remove'];
+
+  if(remove) sports.remove(id).then(res.redirect('/manage'));
+  else if(id) sports.rename(id, name).then(res.redirect('/manage'));
+  else sports.add(name).then(res.redirect('/manage'));
+});
+
+router.get('/division', function(req, res, next) {
+  let title = req.query.division ? 'Edit Division' : 'Add Division'
+
+  res.render('manage/adddivision', { title });
+});
+
+router.post('/division', function(req, res, next) {
+  const name = req.body['name'];
+  const sport = req.body['sport'];
+  const genderName = req.body['gender'];
+
+  const id = req.body['division'];
+  const remove = req.body['remove'];
+
+
+  if(remove) divisions.remove(id).then(res.redirect('/manage'));
+  else if(id) divisions.rename(id, name).then(res.redirect('/manage'));
+  else {
+    if(genderName == "both") {
+      divisions.add(name, genders.FEMALE, sport)
+        .then(divisions.add(name, genders.MALE, sport)
+          .then(res.redirect("/manage")));
+    }
+    else {
+      const gender = (genderName == "female") ? genders.FEMALE : genders.MALE;
+      divisions.add(name, gender, sport)
+        .then(res.redirect("/manage"));
+    }
+  }
+});
+
+router.get('/team', function(req, res, next) {
+  let title = req.query.team ? 'Edit Team' : 'Add Team'
+
+  res.render('manage/addteam', { title });
+});
+
+router.post('/team', function(req, res, next) {
+  const name = req.body['name'];
+  const sport = req.body['sport'];
+
+  const id = req.body['team'];
+  const remove = req.body['remove'];
+
+  if(remove) teams.remove(id).then(res.redirect('/manage'));
+  else if(id) teams.rename(id, name).then(res.redirect('/manage'));
+  else teams.add(name, sport).then(res.redirect("/manage"));
+});
+
+module.exports = router;

routes/submit.js

@@ -1,27 +0,0 @@
-var express = require('express');
-var router = express.Router();
-var genders = require('../database/scores/genders');
-var games = require('../database/scores/games');
-
-/* GET submit page. */
-router.get('/', function(req, res, next) {
-  res.render('submit', { title: 'Submit Score' });
-});
-
-/* POST submit page. */
-router.post('/', function(req, res, next) {
-  const seasonID = req.body['year'];
-  const sportID = req.body['sport'];
-  const gender = (req.body['gender'] == "female") ? genders.FEMALE : genders.MALE;
-  const divisionID = req.body['division'];
-  const date = moment(req.body['date']);
-  const team1ID = req.body['team1'];
-  const team1Score = req.body['team1-score'];
-  const team2ID = req.body['team2'];
-  const team2Score = req.body['team2-score'];
-
-  games.add(divisionID, seasonID, date, team1ID, team2ID, team1Score, team2Score)
-    .then(res.send("SUCCESS"));
-});
-
-module.exports = router;

views/index.pug

@@ -6,7 +6,11 @@ block stylesheets
 
 block content
   div#mobile-view
-    h1 Score Tracker
+    div#header-div
+        h1 Score Tracker
+        div#actions-div
+            button#add-score-button +
+            button#manage-button Manage
     div
         span(class='form-section')
             label Year
@@ -22,7 +26,6 @@ block content
             label Team
             span(class='form-section-input')
                 select#team-dropdown(name="team" class="form-main-dropdown")
-        span(class='form-section')
     div 
         h2#games-table-header
         span#no-scores-message

views/manage.pug

@@ -0,0 +1,26 @@
+extends layout
+
+block stylesheets
+  link(rel='stylesheet', href='/stylesheets/manage.css')
+  link(rel='stylesheet', href='/stylesheets/form.css')
+
+block content
+  div#mobile-view
+    h1 Management Panel
+    div
+        span(class='form-section')
+            label Category
+            span(class='form-section-input')
+                select#category-dropdown(name="category" class="form-main-dropdown")
+                    option(value="seasons") Seasons 
+                    option(value="sports") Sports 
+                    option(value="divisions") Divisions 
+                    option(value="teams") Teams 
+                    option(value="games") Games
+    div 
+        h2#table-header
+        table#items-list
+        button#add-new-button Add new...
+
+block scripts 
+  script(src='/scripts/manage.js' type="module")

views/manage/adddivision.pug

@@ -0,0 +1,32 @@
+extends layout
+
+block stylesheets
+  link(rel='stylesheet', href='/stylesheets/submit.css')
+  link(rel='stylesheet', href='/stylesheets/form.css')
+
+block content
+  div#mobile-view
+    h1 #{title}
+    form#submission-form(action='./division', method='POST')
+      span(class='form-section')
+        label Sport
+        span(class='form-section-input')
+          select#sport-dropdown(name="sport" class="form-main-dropdown" disabled)
+      span(class='form-section')
+        label Gender
+        span(class='form-section-input')
+          select#gender-dropdown(name="gender" class="form-main-dropdown" disabled)
+            option(value="both") Both
+            option(value="female") Female
+            option(value="male") Male
+      span(class='form-section')
+        label Division name
+        span(class='form-section-input')
+          input#name-textbox(type="text", name="name" disabled)
+      span(class='form-section')
+        button#submit-button(type="submit" disabled) Submit
+    span(class='form-section')
+      button#delete-button(disabled) Delete
+
+block scripts 
+  script(src='/scripts/manage/division.js' type="module")

views/manage/addgame.pug

@@ -6,34 +6,36 @@ block stylesheets
 
 block content
   div#mobile-view
-    h1 Submit Score
+    h1 #{title}
-    form(action='/submit', method='POST')
+    form#submission-form(action='./submitgame', method='POST')
       span(class='form-section')
         label Year
         span(class='form-section-input')
-          select#year-dropdown(name="year" class="form-main-dropdown")
+          select#year-dropdown(name="year" class="form-main-dropdown" disabled)
       span(class='form-section')
         label Sport
         span(class='form-section-input')
-          select#sport-dropdown(name="sport" class="form-main-dropdown") 
+          select#sport-dropdown(name="sport" class="form-main-dropdown" disabled) 
-          select#gender-dropdown(name="gender")
+          select#gender-dropdown(name="gender" disabled)
-          select#division-dropdown(name="division")
+          select#division-dropdown(name="division" disabled)
       span(class='form-section')
         label Date of match
         span(class='form-section-input')
-          input(type="date", name="date", value=date)
+          input#date-input(type="date", name="date" value=date disabled)
       span(class='form-section')
         label Your team
         span(class='form-section-input')
-          select#team1-dropdown(name="team1" class="form-main-dropdown")
+          select#team1-dropdown(name="team1" class="form-main-dropdown" disabled)
-          input(class="form-score-input", type="number", name="team1-score", value="0")
+          input#team1-score-textbox(class="form-score-input", type="number", name="team1-score", value="0" disabled)
       span(class='form-section')
         label Opponent
         span(class='form-section-input')
-          select#team2-dropdown(name="team2" class="form-main-dropdown")
+          select#team2-dropdown(name="team2" class="form-main-dropdown" disabled)
-          input(class="form-score-input", type="number", name="team2-score", value="0")
+          input#team2-score-textbox(class="form-score-input", type="number", name="team2-score", value="0" disabled)
       span(class='form-section')
-        button#submit-button(type="submit") Submit
+        button#submit-button(type="submit" disabled) Submit
+    span(class='form-section')
+      button#delete-button(disabled) Delete
 
 block scripts 
-  script(src='/scripts/submit.js' type="module")
+  script(src='/scripts/manage/game.js' type="module")

views/manage/addseason.pug

@@ -0,0 +1,19 @@
+extends layout
+
+block stylesheets
+  link(rel='stylesheet', href='/stylesheets/submit.css')
+  link(rel='stylesheet', href='/stylesheets/form.css')
+
+block content
+  div#mobile-view
+    h1 #{title}
+    form(action='./season', method='POST')
+      span(class='form-section')
+        label Ending year
+        span(class='form-section-input')
+          input(type="number", name="year", value=currentYear)
+      span(class='form-section')
+        button#submit-button(type="submit") Submit
+
+block scripts 
+  script(src='/scripts/manage/season.js' type="module")

views/manage/addsport.pug

@@ -0,0 +1,22 @@
+extends layout
+
+block stylesheets
+  link(rel='stylesheet', href='/stylesheets/submit.css')
+  link(rel='stylesheet', href='/stylesheets/form.css')
+
+block content
+  div#mobile-view
+    h1#main-header Add Sport
+    form#submission-form(action='./sport', method='POST')
+      span(class='form-section')
+        label Sport name
+        span(class='form-section-input')
+          input#name-textbox(type="text" name="name" disabled)
+      span(class='form-section')
+        button#submit-button(type="submit" disabled) Submit
+    span(class='form-section')
+      button#delete-button(disabled) Delete
+
+
+block scripts 
+  script(src='/scripts/manage/sport.js' type="module")

views/manage/addteam.pug

@@ -0,0 +1,25 @@
+extends layout
+
+block stylesheets
+  link(rel='stylesheet', href='/stylesheets/submit.css')
+  link(rel='stylesheet', href='/stylesheets/form.css')
+
+block content
+  div#mobile-view
+    h1 #{title}
+    form#submission-form(action='./team', method='POST')
+      span(class='form-section')
+        label Sport
+        span(class='form-section-input')
+          select#sport-dropdown(name="sport" class="form-main-dropdown" disabled)
+      span(class='form-section')
+        label Team name
+        span(class='form-section-input')
+          input#name-textbox(type="text", name="name" disabled)
+      span(class='form-section')
+        button#submit-button(type="submit" disabled) Submit
+    span(class='form-section')
+      button#delete-button(disabled) Delete
+
+block scripts 
+  script(src='/scripts/manage/team.js' type="module")

views/manage/layout.pug

@@ -0,0 +1,10 @@
+doctype html
+html
+  head
+    title= title
+    meta(name='viewport', content='width=device-width, initial-scale=1') 
+    link(rel='stylesheet', href='/stylesheets/style.css')
+    block stylesheets
+  body
+    block content
+    block scripts