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 = Flask(__name__)
@app.get("/") @app.get("/")
def hello_world(): def get_owned():
return render_template('owned.jinja') return render_template('owned.jinja')
@app.get("/wishlist")
def get_wishlist():
return render_template('wishlist.jinja')
@app.get("/boardgame") @app.get("/boardgame")
def get_boardgame(): def get_boardgame():
boardgame_id = request.args.get('id', '') boardgame_id = request.args.get('id', '')
return render_template('boardgame.jinja') 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} 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() { async function loadOwnedGames() {
var boardgame_datatable = new DataTable('#boardgame_table', { var boardgame_datatable = new DataTable('.boardgame_table', {
ajax: { ajax: {
url: api_url + '/owned', url: api_url + '/owned',
dataSrc: '' dataSrc: ''
}, },
columns: [ columns: [
{
data: 'id'
},
{ {
data: 'thumbnail_url', data: 'thumbnail_url',
render: function (data,type){ render: function (data,type){
@ -60,18 +105,11 @@ async function loadOwnedGames() {
data: 'weight' data: 'weight'
} }
], ],
columnDefs: [ order: [[1, 'asc']]
{
target: 0,
visible: false,
searchable: false
}
],
order: [[2, 'asc']]
}); });
$('#boardgame_table').on('click', 'tbody tr', function() { $('.boardgame_table').on('click', 'tbody tr', function() {
var boardgame_id = boardgame_datatable.row(this).data().id; var boardgame_id = boardgame_datatable.row(this).data().id;
window.location.href = "/boardgame?id=" + boardgame_id window.location.href = "/boardgame?id=" + boardgame_id
}) })

5
templates/owned.jinja
View file

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