From 08e6bd431de67412bdc334ad238466137df9d1ca Mon Sep 17 00:00:00 2001
From: Yarne Coppens <git.w8x3v@simplelogin.com>
Date: Sat, 10 Aug 2024 22:45:08 +0200
Subject: [PATCH] Added route to request specific board game

---
 app.py                               | 13 +++++------
 static/main.js                       | 32 ++++++++++++++++++++++------
 templates/{index.html => base.jinja} | 21 +++---------------
 templates/boardgame.jinja            | 14 ++++++++++++
 templates/owned.jinja                | 25 ++++++++++++++++++++++
 5 files changed, 75 insertions(+), 30 deletions(-)
 rename templates/{index.html => base.jinja} (51%)
 create mode 100644 templates/boardgame.jinja
 create mode 100644 templates/owned.jinja

diff --git a/app.py b/app.py
index 9f7b4e3..a73aa3f 100644
--- a/app.py
+++ b/app.py
@@ -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>"
\ No newline at end of file
+@app.get("/boardgame")
+def get_boardgame():
+    boardgame_id = request.args.get('id', '')
+    return render_template('boardgame.jinja')
\ No newline at end of file
diff --git a/static/main.js b/static/main.js
index bbe3a22..ea637d4 100644
--- a/static/main.js
+++ b/static/main.js
@@ -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")
@@ -42,4 +45,21 @@ async function loadOwnedGames() {
     for (index = 0; index < all_owned_games.length; index++) {
         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
 }
\ No newline at end of file
diff --git a/templates/index.html b/templates/base.jinja
similarity index 51%
rename from templates/index.html
rename to templates/base.jinja
index 704d190..a91e128 100644
--- a/templates/index.html
+++ b/templates/base.jinja
@@ -10,25 +10,10 @@
     <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">
 </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>
+ 
\ No newline at end of file
diff --git a/templates/boardgame.jinja b/templates/boardgame.jinja
new file mode 100644
index 0000000..08c74b9
--- /dev/null
+++ b/templates/boardgame.jinja
@@ -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 %}
\ No newline at end of file
diff --git a/templates/owned.jinja b/templates/owned.jinja
new file mode 100644
index 0000000..8f276cf
--- /dev/null
+++ b/templates/owned.jinja
@@ -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 %}
\ No newline at end of file