Add functions to list seasons and sports in manage page

public/scripts/manage.js

@@ -0,0 +1,116 @@
+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 yearsHeader = document.createElement('th');
+        yearsHeader.textContent = "Name";
+        headerRow.appendChild(yearsHeader);
+
+        itemsListTable.appendChild(headerRow);
+    },
+    function listSport(sport, row) {
+        const nameCell = document.createElement('td');
+        nameCell.textContent = sport.name;
+        row.appendChild(nameCell);
+    },
+    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]);
+};

views/manage.pug

@@ -1,7 +1,7 @@
 extends layout
 
 block stylesheets
-  link(rel='stylesheet', href='/stylesheets/index.css')
+  link(rel='stylesheet', href='/stylesheets/manage.css')
   link(rel='stylesheet', href='/stylesheets/form.css')
 
 block content
@@ -19,13 +19,8 @@ block content
                     option(value="games") Games
     div 
         h2#table-header
-        table
-            colgroup   
-                col#score-column(span="1")
-                col#opponent-column(span="1")
-                col#date-column(span="1")
-            tbody#games-table
-  
+        table#items-list
+        button Add new...
 
 block scripts 
-  script(src='/scripts/index.js' type="module")
+  script(src='/scripts/manage.js' type="module")