boardgame_site_v2/static/javascript/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);
      }
}

async function loadWishlistedGames() {

    var wishlist_priorities = [1,2,3,4]

    jQuery.each(wishlist_priorities, function(index, item){

        var boardgame_datatable = new DataTable('#wishlist_table'+item, {
            ajax: {
                url: api_url + '/wishlist?priority='+item,
                dataSrc: ''
            },
            columns: [
                {
                    data: 'wishlist_priority'
                },
                { 
                    data: 'thumbnail_url',
                    render: function (data,type){
                        return '<img src="' + data + '" class="img-fluid" />'
                    }
                },
                { 
                    data: 'name'
                },
                { 
                    data: 'min_players',
                    render: function(data,type,row){
                        if (row.min_players != row.max_players){
                            return row.min_players + '-' + row.max_players
                        }else{
                            return row.min_players
                        }
                        
                    }
                },
                { 
                    data: 'min_playing_time',
                    render: function(data,type,row){
                        if (row.min_playing_time != row.max_playing_time){
                            return row.min_playing_time + '-' + row.max_playing_time
                        }else{
                            return row.min_playing_time
                        }
                    }
                },
                { 
                    data: 'weight'
                }
            ],
            columnDefs: [
                {
                    target: 0,
                    visible: false
                },
                { targets: 'no-sort', orderable: false }
            ],
            order: [[2, 'asc']]
        });

        $('#wishlist_table'+item).on('click', 'tbody tr', function() {
            var boardgame_id = boardgame_datatable.row(this).data().id;
            window.location.href = "/boardgame?id=" + boardgame_id
        })
    });

}

async function loadOwnedGames() {

    var boardgame_datatable = new DataTable('.boardgame_table', {
        ajax: {
            url: api_url + '/owned?filter_expansions_out=true',
            dataSrc: ''
        },
        columns: [
            { 
                data: 'thumbnail_url',
                render: function (data,type){
                    return '<img src="' + data + '" class="img-fluid" />'
                }
            },
            { 
                data: 'name'
            },
            { 
                data: 'min_players',
                render: function(data,type,row){
                    if (row.min_players != row.max_players){
                        return row.min_players + '-' + row.max_players
                    }else{
                        return row.min_players
                    }
                    
                }
            },
            { 
                data: 'min_playing_time',
                render: function(data,type,row){
                    if (row.min_playing_time != row.max_playing_time){
                        return row.min_playing_time + '-' + row.max_playing_time
                    }else{
                        return row.min_playing_time
                    }
                }
            },
            { 
                data: 'weight'
            }
        ],
        columnDefs: [
            { targets: 'no-sort', orderable: false }
        ],
        order: [[1, 'asc']]
    });


    $('.boardgame_table').on('click', 'tbody tr', function() {
        var boardgame_id = boardgame_datatable.row(this).data().id;
        window.location.href = "/boardgame?id=" + boardgame_id
      })

}

async function loadStatistics(){
    const overtimechart = document.getElementById("overtimechart")
    
    games_over_time_statistic = await makeRequest(api_url + '/statistics/amount_of_games_over_time?day_step=30')
    games_over_time_statistic_no_expanions = await makeRequest(api_url + '/statistics/amount_of_games_over_time?day_step=30&filter_expansions_out=true')
    games_over_time_statistic_only_expanions = await makeRequest(api_url + '/statistics/amount_of_games_over_time?day_step=30&only_expansions=true')

    new Chart(overtimechart, {
        type: 'bar',
        data: {
          labels: Object.keys(games_over_time_statistic.result),
          datasets: [{
            label: games_over_time_statistic.name,
            data: Object.values(games_over_time_statistic.result),
            borderWidth: 1,
            type: 'line'
          },
          {
            label: "Base games",
            data: Object.values(games_over_time_statistic_no_expanions.result),
            borderWidth: 1
          },
          {
            label: "Expansions",
            data: Object.values(games_over_time_statistic_only_expanions.result),
            borderWidth: 1
          }
        ]
        },
        options: {
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      });

    $("#overtimechartname").text(games_over_time_statistic.name)

}

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

    var loadGameURL = api_url + '/boardgame?id=' + boardgame_id
    var requested_game = await makeRequest(loadGameURL)
    
    $('#boardgame_image').attr('src', requested_game.image_url)

    $('#boardgame_name').text(requested_game.name)

    $('#boardgame_weight').text(requested_game.weight)

    $('#boardgame_description').text(requested_game.description)

    $('#boardgame_link').attr('href', 'https://boardgamegeek.com/boardgame/' + boardgame_id)

}

async function loadPlays() {

    function createPlayCard(play){
        const card_div = document.createElement('div')
        card_div.className = "card"

        const card_image = document.createElement('img')
        card_image.src = play.boardgame.image_url

        const card_body = document.createElement('div')
        card_body.className = 'card-body'

        const card_title = document.createElement('h4')
        card_title.innerHTML = play.boardgame.name

        const player_names = document.createElement('div')

        for (let player_index in play.players){
            const player = play.players[player_index]
            const player_div = document.createElement('div')
            player_div.innerHTML = player.name

            if (player.has_won) {
                player_div.style.color = "green"
            }

            player_names.appendChild(player_div)
        }
        
        card_body.appendChild(card_title)
        card_body.appendChild(player_names)

        card_div.appendChild(card_image)
        card_div.appendChild(card_body)

        return card_div

    }

    const all_plays = await makeRequest(api_url + '/plays?filter_expansions_out=true')
    
    const MAX_COLUMNS = 4
    const column_width = 12 / MAX_COLUMNS

    const rows_needed = Math.ceil(all_plays.length / MAX_COLUMNS)

    for (let row_number = 0; row_number < rows_needed; row_number++){
        const row_div = document.createElement('div')
        row_div.className = 'row'
        for (let column_number = 0; column_number < MAX_COLUMNS; column_number++) {
            const column_div = document.createElement('div')
            column_div.className = "col-sm-" + column_width

            const play_card = createPlayCard(all_plays[(row_number * MAX_COLUMNS) + column_number])

            column_div.appendChild(play_card)
            row_div.appendChild(column_div)
        }
        document.body.appendChild(row_div)
    }


}