boardgame_site_v2/static/main.js

const api_url = "http://127.0.0.1:8000"

var all_owned_games

async function makeRequest(url) {
    try {
        const url_request = new Request(url)
        const response = await fetch(url_request);
        const result = await response.json();
        return result
      } catch (error) {
        console.error("Error:", error);
      }
}

function add_boardgame_row(html_tbody, boardgame_json) {
    var row = html_tbody.insertRow();
    var icon_cell = row.insertCell();
    var name_cell = row.insertCell();
    var description_cell = row.insertCell();
    var weight_cell = row.insertCell()

    var icon_image = document.createElement('img')
    icon_image.src = boardgame_json.thumbnail_url
    icon_image.classList.add("img-thumbnail")
    
    icon_cell.appendChild(icon_image)
    name_cell.innerHTML = boardgame_json.name
    description_cell.innerHTML = boardgame_json.description
    weight_cell.innerHTML = boardgame_json.weight

    row.onclick = function(){ window.location.href = '/boardgame?id=' + boardgame_json.id}
}


async function loadOwnedGames() {
    
    var loadGamesURL = api_url + '/owned'

    all_owned_games = await makeRequest(loadGamesURL)

    console.log("Loaded owned games:", all_owned_games)
    var boardgame_tbody = document.getElementById("boardgame_table_tbody")

    for (index = 0; index < all_owned_games.length; index++) {
        add_boardgame_row(boardgame_tbody, all_owned_games[index])
    }
}

async function loadGame() {
    let params = new URLSearchParams(document.location.search);
    let boargame_id = params.get("id");

    var loadGameURL = api_url + '/boardgame/' + boargame_id
    var requested_game = await makeRequest(loadGameURL)
    
    var boardgame_image_container = document.getElementById('boardgame_image')
    boardgame_image_container.src = requested_game.image_url

    var boardgame_name_container = document.getElementById('boardgame_name')
    boardgame_name_container.innerHTML = requested_game.name

    var boardgame_weight_container = document.getElementById('boardgame_weight')
    boardgame_weight_container.innerHTML = requested_game.weight
}