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%}
+