From 26a1c0422f6da1463db0c35a2c9ec89e353f81be Mon Sep 17 00:00:00 2001 From: Yarne Coppens Date: Wed, 14 Aug 2024 10:16:54 +0200 Subject: [PATCH] Split JS in files per page --- static/javascript/boardgame.js | 20 +++ static/javascript/main.js | 248 -------------------------------- static/javascript/owned.js | 57 ++++++++ static/javascript/plays.js | 65 +++++++++ static/javascript/statistics.js | 43 ++++++ static/javascript/wishlist.js | 69 +++++++++ templates/base.jinja | 28 +++- templates/boardgame.jinja | 12 +- templates/owned.jinja | 13 +- templates/plays.jinja | 22 +-- templates/statistics.jinja | 13 +- templates/wishlist.jinja | 11 +- 12 files changed, 313 insertions(+), 288 deletions(-) create mode 100644 static/javascript/boardgame.js create mode 100644 static/javascript/owned.js create mode 100644 static/javascript/plays.js create mode 100644 static/javascript/statistics.js create mode 100644 static/javascript/wishlist.js diff --git a/static/javascript/boardgame.js b/static/javascript/boardgame.js new file mode 100644 index 0000000..adc7c03 --- /dev/null +++ b/static/javascript/boardgame.js @@ -0,0 +1,20 @@ +document.body.onload=loadGame() + +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) + +} \ No newline at end of file diff --git a/static/javascript/main.js b/static/javascript/main.js index f0e6a9f..54f9ec7 100644 --- a/static/javascript/main.js +++ b/static/javascript/main.js @@ -12,251 +12,3 @@ async function makeRequest(url) { 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 '' - } - }, - { - 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 '' - } - }, - { - 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) - } - - -} \ No newline at end of file diff --git a/static/javascript/owned.js b/static/javascript/owned.js new file mode 100644 index 0000000..064bf85 --- /dev/null +++ b/static/javascript/owned.js @@ -0,0 +1,57 @@ +document.body.onload=loadOwnedGames() + +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 '' + } + }, + { + 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 + }) + +} \ No newline at end of file diff --git a/static/javascript/plays.js b/static/javascript/plays.js new file mode 100644 index 0000000..518bce9 --- /dev/null +++ b/static/javascript/plays.js @@ -0,0 +1,65 @@ +document.body.onload=loadPlays() + +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) + } + + +} \ No newline at end of file diff --git a/static/javascript/statistics.js b/static/javascript/statistics.js new file mode 100644 index 0000000..bafc36b --- /dev/null +++ b/static/javascript/statistics.js @@ -0,0 +1,43 @@ +document.body.onload=loadStatistics() + +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) + +} \ No newline at end of file diff --git a/static/javascript/wishlist.js b/static/javascript/wishlist.js new file mode 100644 index 0000000..b383409 --- /dev/null +++ b/static/javascript/wishlist.js @@ -0,0 +1,69 @@ +document.body.onload=loadWishlistedGames() + + +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 '' + } + }, + { + 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 + }) + }); + +} \ No newline at end of file diff --git a/templates/base.jinja b/templates/base.jinja index 0414222..3e9413c 100644 --- a/templates/base.jinja +++ b/templates/base.jinja @@ -14,13 +14,35 @@ - -{% block body %} + + -{% endblock body %} +{% block body_block %} + +{% endblock body_block %} + + + +{% block extra_js_files %} + +{% endblock extra_js_files%} + \ No newline at end of file diff --git a/templates/boardgame.jinja b/templates/boardgame.jinja index 1fc519b..68d9509 100644 --- a/templates/boardgame.jinja +++ b/templates/boardgame.jinja @@ -1,8 +1,6 @@ {% extends "base.jinja" %} -{% block body %} - - +{% block body_block %}
@@ -18,6 +16,10 @@

- +{% endblock body_block %} -{% endblock body %} \ No newline at end of file +{% block extra_js_files %} + + + +{% endblock extra_js_files %} \ No newline at end of file diff --git a/templates/owned.jinja b/templates/owned.jinja index 002ae5a..7c0a0db 100644 --- a/templates/owned.jinja +++ b/templates/owned.jinja @@ -1,10 +1,7 @@ {% extends "base.jinja" %} -{% block body %} - - - +{% block body_block %}
@@ -20,6 +17,10 @@
- +{% endblock body_block %} -{% endblock body %} \ No newline at end of file +{% block extra_js_files %} + + + +{% endblock extra_js_files %} \ No newline at end of file diff --git a/templates/plays.jinja b/templates/plays.jinja index 0594551..706e0a3 100644 --- a/templates/plays.jinja +++ b/templates/plays.jinja @@ -1,23 +1,11 @@ {% extends "base.jinja" %} -{% block body %} +{% block body_block %} - +{% endblock body_block %} - {#
-
-
- -
-

John Doe

-

Some example text.

- Bekijk op BGG -
-
-
-

-
#} +{% block extra_js_files %} - + -{% endblock body %} \ No newline at end of file +{% endblock extra_js_files %} \ No newline at end of file diff --git a/templates/statistics.jinja b/templates/statistics.jinja index 53b699b..5cca47f 100644 --- a/templates/statistics.jinja +++ b/templates/statistics.jinja @@ -1,9 +1,7 @@ {% extends "base.jinja" %} -{% block body %} - - +{% block body_block %}
@@ -32,9 +30,10 @@
- - +{% endblock body_block %} - +{% block extra_js_files %} -{% endblock body %} \ No newline at end of file + + +{% endblock extra_js_files %} \ No newline at end of file diff --git a/templates/wishlist.jinja b/templates/wishlist.jinja index 254799d..49fd0fa 100644 --- a/templates/wishlist.jinja +++ b/templates/wishlist.jinja @@ -1,7 +1,7 @@ {% extends "base.jinja" %} -{% block body %} +{% block body_block %} @@ -71,4 +71,11 @@ -{% endblock body %} \ No newline at end of file +{% endblock body_block %} + + +{% block extra_js_files %} + + + +{% endblock extra_js_files %} \ No newline at end of file