Yarninator/boardgame_site_v2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Made statistics prettier

Browse source
This commit is contained in:
Yarne Coppens 2024-08-14 16:16:28 +02:00
parent ed066180bc
commit 597510da52
3 changed files with 81 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
static/css/main.css
View file

@ -1,5 +1,11 @@
.statistic_image_grid_image{
width: 100px;
/* .statistic_image_grid_image{
max-width: 150px;
max-height: 100px;
object-fit: cover;
} */
.boardgame_statistic_card_image{
width: 100%;
height: 100px;
object-fit: cover;
}

86
static/javascript/statistics.js
View file

@ -4,42 +4,60 @@ document.getElementById('statistics_nav').classList.add('active')
async function loadStatistics(){
function create_boardgame_image_grid_rows(boardgames){
console.log(boardgames)
const MAX_COLUMNS = 2
const column_width = 12 / MAX_COLUMNS
const rows_needed = Math.ceil(boardgames.length / MAX_COLUMNS)
let rows_to_return = []
for (let row_index = 0; row_index < rows_needed; row_index++){
const row = document.createElement('div')
row.className = 'row'
const row_container = document.createElement('div')
row_container.classList.add('container')
const row = document.createElement('div')
row.classList.add('row')
row.classList.add('row-cols-1')
row.classList.add('row-cols-md-3')
for (let column_index = 0; column_index < MAX_COLUMNS; column_index++){
if(((row_index * MAX_COLUMNS) + column_index) == boardgames.length){
break
}
const current_boardgame = boardgames[(row_index * MAX_COLUMNS) + column_index]
for (let boardgame_index in boardgames){
let current_boardgame = boardgames[boardgame_index]
const column = document.createElement('div')
column.className = 'col'
const column = document.createElement('div')
column.classList.add('col')
const boardgame_image = document.createElement('img')
boardgame_image.src = current_boardgame.thumbnail_url
boardgame_image.classList.add('statistic_image_grid_image')
boardgame_image.classList.add('card-img-top')
boardgame_image.classList.add('img-fluid')
const boardgame_card = document.createElement('div')
boardgame_card.classList.add('card')
boardgame_card.classList.add('h-100')
const boardgame_link = document.createElement('a')
boardgame_link.setAttribute('href', '/boardgame?id=' + current_boardgame.id)
const boardgame_image = document.createElement('img')
boardgame_image.src = current_boardgame.thumbnail_url
boardgame_image.classList.add('card-img-top')
boardgame_image.classList.add('boardgame_statistic_card_image')
boardgame_link.appendChild(boardgame_image)
const boardgame_card_body = document.createElement('div')
boardgame_card_body.classList.add('card-body')
const boardgame_title = document.createElement('h5')
boardgame_title.innerHTML = current_boardgame.name
boardgame_title.classList.add('card-title')
const boardgame_price_holder = document.createElement('p')
boardgame_price_holder.innerHTML = current_boardgame.price_paid
boardgame_price_holder.classList.add('card-text')
boardgame_card_body.appendChild(boardgame_title)
boardgame_card_body.appendChild(boardgame_price_holder)
boardgame_card.append(boardgame_link)
boardgame_card.append(boardgame_card_body)
column.appendChild(boardgame_card)
row.appendChild(column)
column.appendChild(boardgame_image)
row.appendChild(column)
}
rows_to_return.push(row)
}
return rows_to_return
return row
}
@ -127,13 +145,15 @@ async function loadStatistics(){
const mostexpensivegameschart = document.getElementById('mostexpensivegameschart')
let most_expensive_games_statistic = await makeRequest(api_url + '/statistics/most_expensive_games')
let most_expensive_games_statistic = await makeRequest(api_url + '/statistics/most_expensive_games?top_amount=6')
const rows_to_fill_in = create_boardgame_image_grid_rows(most_expensive_games_statistic.result)
const row = create_boardgame_image_grid_rows(most_expensive_games_statistic.result)
for (row_index in rows_to_fill_in){
mostexpensivegameschart.insertBefore(rows_to_fill_in[row_index], mostexpensivegameschart.firstChild)
}
mostexpensivegameschart.appendChild(row)
// for (row_index in rows_to_fill_in){
// mostexpensivegameschart.insertBefore(rows_to_fill_in[row_index], mostexpensivegameschart.firstChild)
// }
$('#mostexpensivegameschartname').text(most_expensive_games_statistic.name)

35
templates/statistics.jinja
View file

@ -3,23 +3,28 @@
{% block body_block %}
<div class="card-group" id="statistic_cards">
<div class="card">
<canvas class="chart_visual" id="gamesovertimechart"></canvas>
<div class="card-body">
<h4 class="card-title" id="overtimechartname"></h4>
<div class="container">
<div class="row row-cols-1 row-cols-md-2">
<div class="col">
<div class="card h-100">
<canvas class="chart_visual card-img-top" id="gamesovertimechart"></canvas>
<div id="overtimechartname" class="card-footer text-muted">
</div>
</div>
</div>
</div>
<div class="card">
<canvas class="chart_visual" id="gamesperyearchart"></canvas>
<div class="card-body">
<h4 class="card-title" id="gamesperyearchartname"></h4>
<div class="col">
<div class="card h-100">
<canvas class="chart_visual card-img-top" id="gamesperyearchart"></canvas>
<div id="gamesperyearchartname" class="card-footer text-muted">
</div>
</div>
</div>
</div>
<div class="card">
<div class="chart_visual" id="mostexpensivegameschart"></div>
<div class="card-body">
<h4 class="card-title" id="mostexpensivegameschartname"></h4>
<div class="col">
<div class="card h-100">
<div class="chart_visual container-fluid" id="mostexpensivegameschart"></div>
<div id="mostexpensivegameschartname" class="card-footer text-muted">
</div>
</div>
</div>
</div>
</div>