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

Added route to request specific board game

Browse source
This commit is contained in:
Yarne Coppens 2024-08-10 22:45:08 +02:00
parent 2fabfb60f0
commit 08e6bd431d
5 changed files with 75 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
app.py
View file

@ -1,11 +1,12 @@
from flask import Flask, render_template
from flask import Flask, render_template, request, escape
app = Flask(__name__)
@app.route("/")
@app.get("/")
def hello_world():
return render_template('index.html')
return render_template('owned.jinja')
@app.route("/boardgame/<int:boardgame_id>")
def get_boardgame(boardgame_id):
return "<p>Hello, World!</p>"
@app.get("/boardgame")
def get_boardgame():
boardgame_id = request.args.get('id', '')
return render_template('boardgame.jinja')

32
static/main.js
View file

@ -1,11 +1,11 @@
const api_url = "http://127.0.0.1:8000"
var all_owned_games
async function makeAPIRequest(request) {
async function makeRequest(url) {
try {
const response = await fetch(request);
const url_request = new Request(url)
const response = await fetch(url_request);
const result = await response.json();
return result
} catch (error) {
@ -29,12 +29,15 @@ function add_boardgame_row(html_tbody, boardgame_json) {
description_cell.innerHTML = boardgame_json.description
weight_cell.innerHTML = boardgame_json.weight
row.onclick = function(){ window.location.href = '/boardgame/' + boardgame_json.id}
row.onclick = function(){ window.location.href = '/boardgame?id=' + boardgame_json.id}
}
async function loadOwnedGames() {
const loadGamesRequest = new Request(api_url + "/owned")
all_owned_games = await makeAPIRequest(loadGamesRequest)
var loadGamesURL = api_url + '/owned'
all_owned_games = await makeRequest(loadGamesURL)
console.log("Loaded owned games:", all_owned_games)
var boardgame_tbody = document.getElementById("boardgame_table_tbody")
@ -43,3 +46,20 @@ async function loadOwnedGames() {
add_boardgame_row(boardgame_tbody, all_owned_games[index])
}
}
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
}

21
templates/index.html → templates/base.jinja
View file

@ -11,24 +11,9 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<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>
{% block body %}
{% endblock body %}
</html>

14
templates/boardgame.jinja Normal file
View 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 %}

25
templates/owned.jinja Normal file
View file

@ -0,0 +1,25 @@
{% 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 %}