Compare commits
8 commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
ecbc5f9162 | ||
|
|
08e6bd431d | ||
|
|
2fabfb60f0 | ||
|
|
5a9360d10a | ||
|
|
581adb64a3 | ||
|
|
bc494a6133 | ||
|
|
f944e320ef | ||
|
|
204f8a4f22 |
7 changed files with 161 additions and 0 deletions
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
__pycache__/
|
||||||
|
venv/
|
||||||
12
app.py
Normal file
12
app.py
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
from flask import Flask, render_template, request
|
||||||
|
|
||||||
|
app = Flask(__name__)
|
||||||
|
|
||||||
|
@app.get("/")
|
||||||
|
def hello_world():
|
||||||
|
return render_template('owned.jinja')
|
||||||
|
|
||||||
|
@app.get("/boardgame")
|
||||||
|
def get_boardgame():
|
||||||
|
boardgame_id = request.args.get('id', '')
|
||||||
|
return render_template('boardgame.jinja')
|
||||||
0
static/main.css
Normal file
0
static/main.css
Normal file
81
static/main.js
Normal file
81
static/main.js
Normal file
|
|
@ -0,0 +1,81 @@
|
||||||
|
const api_url = "http://127.0.0.1:8000"
|
||||||
|
|
||||||
|
var all_owned_games
|
||||||
|
|
||||||
|
async function makeRequest(url) {
|
||||||
|
try {
|
||||||
|
const url_request = new Request(url)
|
||||||
|
const response = await fetch(url_request);
|
||||||
|
const result = await response.json();
|
||||||
|
return result
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error:", error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function add_boardgame_row(html_tbody, boardgame_json) {
|
||||||
|
var row = html_tbody.insertRow();
|
||||||
|
var icon_cell = row.insertCell();
|
||||||
|
var name_cell = row.insertCell();
|
||||||
|
var description_cell = row.insertCell();
|
||||||
|
var weight_cell = row.insertCell()
|
||||||
|
|
||||||
|
var icon_image = document.createElement('img')
|
||||||
|
icon_image.src = boardgame_json.thumbnail_url
|
||||||
|
icon_image.classList.add("img-thumbnail")
|
||||||
|
|
||||||
|
icon_cell.appendChild(icon_image)
|
||||||
|
name_cell.innerHTML = boardgame_json.name
|
||||||
|
description_cell.innerHTML = boardgame_json.description
|
||||||
|
weight_cell.innerHTML = boardgame_json.weight
|
||||||
|
|
||||||
|
row.onclick = function(){ window.location.href = '/boardgame?id=' + boardgame_json.id}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
async function loadOwnedGames() {
|
||||||
|
|
||||||
|
new DataTable('#boardgame_table', {
|
||||||
|
order: [[1, 'asc']],
|
||||||
|
ajax: {
|
||||||
|
url: api_url + '/owned',
|
||||||
|
dataSrc: ''
|
||||||
|
},
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
data: 'thumbnail_url',
|
||||||
|
render: function (data,type){
|
||||||
|
return '<img src="' + data + '" />'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
data: 'name'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
data: 'description'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
data: 'weight'
|
||||||
|
}
|
||||||
|
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadGame() {
|
||||||
|
let params = new URLSearchParams(document.location.search);
|
||||||
|
let boargame_id = params.get("id");
|
||||||
|
|
||||||
|
var loadGameURL = api_url + '/boardgame/' + boargame_id
|
||||||
|
var requested_game = await makeRequest(loadGameURL)
|
||||||
|
|
||||||
|
var boardgame_image_container = document.getElementById('boardgame_image')
|
||||||
|
boardgame_image_container.src = requested_game.image_url
|
||||||
|
|
||||||
|
var boardgame_name_container = document.getElementById('boardgame_name')
|
||||||
|
boardgame_name_container.innerHTML = requested_game.name
|
||||||
|
|
||||||
|
var boardgame_weight_container = document.getElementById('boardgame_weight')
|
||||||
|
boardgame_weight_container.innerHTML = requested_game.weight
|
||||||
|
}
|
||||||
26
templates/base.jinja
Normal file
26
templates/base.jinja
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html data-theme="light">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>
|
||||||
|
Boardgame Site
|
||||||
|
</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}">
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
||||||
|
<link href="https://cdn.datatables.net/2.1.3/css/dataTables.bootstrap5.min.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js" defer></script>
|
||||||
|
<script src="https://cdn.datatables.net/2.1.3/js/dataTables.min.js" defer></script>
|
||||||
|
<script src="https://cdn.datatables.net/2.1.3/js/dataTables.bootstrap5.min.js" defer></script>
|
||||||
|
<script src="{{ url_for('static', filename='main.js') }}" defer></script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
|
||||||
|
{% endblock body %}
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
||||||
14
templates/boardgame.jinja
Normal file
14
templates/boardgame.jinja
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
{% extends "base.jinja" %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
|
||||||
|
<body onload="loadGame()">
|
||||||
|
|
||||||
|
<img id="boardgame_image">
|
||||||
|
|
||||||
|
<p id="boardgame_name"></p>
|
||||||
|
<p id="boardgame_weight"></p>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
{% endblock body %}
|
||||||
26
templates/owned.jinja
Normal file
26
templates/owned.jinja
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
{% extends "base.jinja" %}
|
||||||
|
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
|
||||||
|
<body onload="loadOwnedGames()">
|
||||||
|
|
||||||
|
|
||||||
|
<div class="table-responsive">
|
||||||
|
<table id="boardgame_table" class="table table-striped">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
{% endblock body %}
|
||||||
Loading…
Reference in a new issue