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

Added wishlist page

Browse source
This commit is contained in:
Yarne Coppens 2024-08-11 12:07:16 +02:00
parent d3fd938da3
commit 51de22aa67
4 changed files with 126 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
app.py
View file

@ -3,10 +3,15 @@ from flask import Flask, render_template, request
app = Flask(__name__)
@app.get("/")
def hello_world():
def get_owned():
return render_template('owned.jinja')
@app.get("/wishlist")
def get_wishlist():
return render_template('wishlist.jinja')
@app.get("/boardgame")
def get_boardgame():
boardgame_id = request.args.get('id', '')
return render_template('boardgame.jinja')

64
static/main.js
View file

@ -32,18 +32,63 @@ function add_boardgame_row(html_tbody, boardgame_json) {
row.onclick = function(){ window.location.href = '/boardgame?id=' + boardgame_json.id}
}
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 + '" />'
}
},
{
data: 'name'
},
{
data: 'description'
},
{
data: 'weight'
}
],
columnDefs: [
{
target: 0,
visible: 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', {
var boardgame_datatable = new DataTable('.boardgame_table', {
ajax: {
url: api_url + '/owned',
dataSrc: ''
},
columns: [
{
data: 'id'
},
{
data: 'thumbnail_url',
render: function (data,type){
@ -60,18 +105,11 @@ async function loadOwnedGames() {
data: 'weight'
}
],
columnDefs: [
{
target: 0,
visible: false,
searchable: false
}
],
order: [[2, 'asc']]
order: [[1, 'asc']]
});
$('#boardgame_table').on('click', 'tbody tr', function() {
$('.boardgame_table').on('click', 'tbody tr', function() {
var boardgame_id = boardgame_datatable.row(this).data().id;
window.location.href = "/boardgame?id=" + boardgame_id
})

5
templates/owned.jinja
View file

@ -7,18 +7,15 @@
<div class="table-responsive">
<table id="boardgame_table" class="table table-striped">
<table class="table table-striped boardgame_table">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Thumbnail</th>
<th scope="col">Naam</th>
<th scope="col">Beschrijving</th>
<th scope="col">Moeilijkheid</th>
</tr>
</thead>
<tbody id="boardgame_table_tbody">
</tbody>
</table>
</div>

67
templates/wishlist.jinja Normal file
View file

@ -0,0 +1,67 @@
{% extends "base.jinja" %}
{% block body %}
<body onload="loadWishlistedGames()">
<div class="table-responsive">
<table id="wishlist_table1" class="table table-striped boardgame_table">
<thead>
<tr>
<th scope="col">wishlist_priority</th>
<th scope="col">Thumbnail</th>
<th scope="col">Naam</th>
<th scope="col">Beschrijving</th>
<th scope="col">Moeilijkheid</th>
</tr>
</thead>
</table>
</div>
<div class="table-responsive">
<table id="wishlist_table2" class="table table-striped boardgame_table">
<thead>
<tr>
<th scope="col">wishlist_priority</th>
<th scope="col">Thumbnail</th>
<th scope="col">Naam</th>
<th scope="col">Beschrijving</th>
<th scope="col">Moeilijkheid</th>
</tr>
</thead>
</table>
</div>
<div class="table-responsive">
<table id="wishlist_table3" class="table table-striped boardgame_table">
<thead>
<tr>
<th scope="col">wishlist_priority</th>
<th scope="col">Thumbnail</th>
<th scope="col">Naam</th>
<th scope="col">Beschrijving</th>
<th scope="col">Moeilijkheid</th>
</tr>
</thead>
</table>
</div>
<div class="table-responsive">
<table id="wishlist_table4" class="table table-striped boardgame_table">
<thead>
<tr>
<th scope="col">wishlist_priority</th>
<th scope="col">Thumbnail</th>
<th scope="col">Naam</th>
<th scope="col">Beschrijving</th>
<th scope="col">Moeilijkheid</th>
</tr>
</thead>
</table>
</div>
</body>
{% endblock body %}