Added navbar

.gitignore

@@ -0,0 +1,2 @@
+__pycache__/
+venv/

app.py

@@ -0,0 +1,24 @@
+from flask import Flask, render_template, request
+
+app = Flask(__name__)
+
+@app.get("/")
+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():
+    return render_template('boardgame.jinja')
+
+
+@app.get('/statistics')
+def get_statistics():
+    return render_template('statistics.jinja')
+
+@app.get('/plays')
+def get_plays():
+    return render_template('plays.jinja')

static/javascript/boardgame.js

@@ -0,0 +1,20 @@
+document.body.onload=loadGame()
+
+async function loadGame() {
+    let params = new URLSearchParams(document.location.search);
+    let boardgame_id = params.get("id");
+
+    var loadGameURL = api_url + '/boardgame?id=' + boardgame_id
+    var requested_game = await makeRequest(loadGameURL)
+    
+    $('#boardgame_image').attr('src', requested_game.image_url)
+
+    $('#boardgame_name').text(requested_game.name)
+
+    $('#boardgame_weight').text(requested_game.weight)
+
+    $('#boardgame_description').text(requested_game.description)
+
+    $('#boardgame_link').attr('href', 'https://boardgamegeek.com/boardgame/' + boardgame_id)
+
+}

static/javascript/main.js

@@ -0,0 +1,14 @@
+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);
+      }
+}

static/javascript/owned.js

@@ -0,0 +1,57 @@
+document.body.onload=loadOwnedGames()
+
+async function loadOwnedGames() {
+
+    var boardgame_datatable = new DataTable('.boardgame_table', {
+        ajax: {
+            url: api_url + '/owned?filter_expansions_out=true',
+            dataSrc: ''
+        },
+        columns: [
+            { 
+                data: 'thumbnail_url',
+                render: function (data,type){
+                    return '<img src="' + data + '" class="img-fluid" />'
+                }
+            },
+            { 
+                data: 'name'
+            },
+            { 
+                data: 'min_players',
+                render: function(data,type,row){
+                    if (row.min_players != row.max_players){
+                        return row.min_players + '-' + row.max_players
+                    }else{
+                        return row.min_players
+                    }
+                    
+                }
+            },
+            { 
+                data: 'min_playing_time',
+                render: function(data,type,row){
+                    if (row.min_playing_time != row.max_playing_time){
+                        return row.min_playing_time + '-' + row.max_playing_time
+                    }else{
+                        return row.min_playing_time
+                    }
+                }
+            },
+            { 
+                data: 'weight'
+            }
+        ],
+        columnDefs: [
+            { targets: 'no-sort', orderable: false }
+        ],
+        order: [[1, 'asc']]
+    });
+
+
+    $('.boardgame_table').on('click', 'tbody tr', function() {
+        var boardgame_id = boardgame_datatable.row(this).data().id;
+        window.location.href = "/boardgame?id=" + boardgame_id
+      })
+
+}

static/javascript/plays.js

@@ -0,0 +1,67 @@
+document.body.onload=loadPlays()
+
+async function loadPlays() {
+
+    function createPlayCard(play){
+        const card_div = document.createElement('div')
+        card_div.className = "card"
+
+        const card_image = document.createElement('img')
+        card_image.src = play.boardgame.image_url
+
+        const card_body = document.createElement('div')
+        card_body.className = 'card-body'
+
+        const card_title = document.createElement('h4')
+        card_title.innerHTML = play.boardgame.name
+
+        const player_names = document.createElement('div')
+
+        for (let player_index in play.players){
+            const player = play.players[player_index]
+            const player_div = document.createElement('div')
+            player_div.innerHTML = player.name
+
+            if (player.has_won) {
+                player_div.style.color = "green"
+            }
+
+            player_names.appendChild(player_div)
+        }
+        
+        card_body.appendChild(card_title)
+        card_body.appendChild(player_names)
+
+        card_div.appendChild(card_image)
+        card_div.appendChild(card_body)
+
+        return card_div
+
+    }
+
+    const all_plays = await makeRequest(api_url + '/plays?filter_expansions_out=true')
+    
+    const MAX_COLUMNS = 4
+    const column_width = 12 / MAX_COLUMNS
+
+    const rows_needed = Math.ceil(all_plays.length / MAX_COLUMNS)
+
+    for (let row_number = 0; row_number < rows_needed; row_number++){
+        const row_div = document.createElement('div')
+        row_div.className = 'row'
+        for (let column_number = 0; column_number < MAX_COLUMNS; column_number++) {
+            const column_div = document.createElement('div')
+            column_div.className = "col-sm-" + column_width
+            
+            const current_play = all_plays[(row_number * MAX_COLUMNS) + column_number]
+            const play_card = createPlayCard(current_play)
+
+            column_div.appendChild(play_card)
+            row_div.appendChild(column_div)
+        }
+        document.body.appendChild(row_div)
+    }
+
+    document.getElementById('plays_loading_spinner').remove()
+
+}

static/javascript/statistics.js

@@ -0,0 +1,43 @@
+document.body.onload=loadStatistics()
+
+async function loadStatistics(){
+    const overtimechart = document.getElementById("overtimechart")
+    
+    games_over_time_statistic = await makeRequest(api_url + '/statistics/amount_of_games_over_time?day_step=30')
+    games_over_time_statistic_no_expanions = await makeRequest(api_url + '/statistics/amount_of_games_over_time?day_step=30&filter_expansions_out=true')
+    games_over_time_statistic_only_expanions = await makeRequest(api_url + '/statistics/amount_of_games_over_time?day_step=30&only_expansions=true')
+
+    new Chart(overtimechart, {
+        type: 'bar',
+        data: {
+          labels: Object.keys(games_over_time_statistic.result),
+          datasets: [{
+            label: games_over_time_statistic.name,
+            data: Object.values(games_over_time_statistic.result),
+            borderWidth: 1,
+            type: 'line'
+          },
+          {
+            label: "Base games",
+            data: Object.values(games_over_time_statistic_no_expanions.result),
+            borderWidth: 1
+          },
+          {
+            label: "Expansions",
+            data: Object.values(games_over_time_statistic_only_expanions.result),
+            borderWidth: 1
+          }
+        ]
+        },
+        options: {
+          scales: {
+            y: {
+              beginAtZero: true
+            }
+          }
+        }
+      });
+
+    $("#overtimechartname").text(games_over_time_statistic.name)
+
+}

static/javascript/wishlist.js

@@ -0,0 +1,69 @@
+document.body.onload=loadWishlistedGames()
+
+
+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 + '" class="img-fluid" />'
+                    }
+                },
+                { 
+                    data: 'name'
+                },
+                { 
+                    data: 'min_players',
+                    render: function(data,type,row){
+                        if (row.min_players != row.max_players){
+                            return row.min_players + '-' + row.max_players
+                        }else{
+                            return row.min_players
+                        }
+                        
+                    }
+                },
+                { 
+                    data: 'min_playing_time',
+                    render: function(data,type,row){
+                        if (row.min_playing_time != row.max_playing_time){
+                            return row.min_playing_time + '-' + row.max_playing_time
+                        }else{
+                            return row.min_playing_time
+                        }
+                    }
+                },
+                { 
+                    data: 'weight'
+                }
+            ],
+            columnDefs: [
+                {
+                    target: 0,
+                    visible: false
+                },
+                { targets: 'no-sort', orderable: 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
+        })
+    });
+
+}

templates/base.jinja

@@ -0,0 +1,51 @@
+<!DOCTYPE html> 
+<html data-theme="light"> 
+ 
+<head>  
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title> 
+        Boardgame Site
+    </title>
+
+    <link href="{{ url_for('static', filename='css/bootstrap/bootstrap.min.css')  }}" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <link href="{{ url_for('static', filename='css/datatables/datatables.min.css')  }}" rel="stylesheet">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css')  }}">
+
+    <script src="{{ url_for('static', filename='javascript/jquery/jquery-3.7.1.min.js')  }}" defer></script>
+    <script src="{{ url_for('static', filename='javascript/datatables/datatables.min.js')  }}" defer></script>
+    <script src="{{ url_for('static', filename='javascript/chart/chart.js')  }}"></script>
+    
+</head> 
+
+<body>
+ <ul class="nav nav-tabs">
+  <li class="nav-item">
+    <a class="nav-link active" href="{{ url_for('get_owned') }}">Collectie</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="{{ url_for('get_wishlist') }}">Wishlist</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="{{ url_for('get_statistics') }}">Statistieken</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="{{ url_for('get_plays') }}">Gespeeld</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link disabled" href="#">Disabled</a>
+  </li>
+</ul> 
+
+{% block body_block %}
+
+{% endblock body_block %}
+
+
+<script src="{{ url_for('static', filename='javascript/main.js')  }}" defer></script>
+{% block extra_js_files %}
+
+{% endblock extra_js_files%}
+</body>
+
+</html>
+ 

templates/boardgame.jinja

@@ -0,0 +1,25 @@
+{% extends "base.jinja" %}
+
+{% block body_block %}
+
+     <div class="row">
+        <div class="col-sm-2">
+            <div class="card">
+                <img id="boardgame_image">
+                <div class="card-body">
+                    <h4 class="card-title" id="boardgame_name">John Doe</h4>
+                    <p class="card-text" id="boardgame_description">Some example text.</p>
+                    <a href="#" id="boardgame_link" class="btn btn-primary">Bekijk op BGG</a>
+                </div>
+            </div>
+        </div>
+        <div class="col-sm-10"><p id="boardgame_weight"></p></div>
+    </div> 
+
+{% endblock body_block %}
+
+{% block extra_js_files %}
+
+<script src="{{ url_for('static', filename='javascript/boardgame.js')  }}" defer></script>
+
+{% endblock extra_js_files %}

templates/owned.jinja

@@ -0,0 +1,26 @@
+{% extends "base.jinja" %}
+ 
+
+{% block body_block %} 
+
+    <div class="table-responsive">
+        <table class="table table-striped boardgame_table">
+            <thead>
+                <tr>
+                    <th scope="col" class="no-sort">Thumbnail</th>
+                    <th scope="col">Naam</th>
+                    <th scope="col">Spelers</th>
+                    <th scope="col">Duratie</th>
+                    <th scope="col">Moeilijkheid</th>
+                </tr>
+            </thead>
+        </table>
+    </div>
+
+{% endblock body_block %}
+
+{% block extra_js_files %}
+
+<script src="{{ url_for('static', filename='javascript/owned.js')  }}" defer></script>
+
+{% endblock extra_js_files %}

templates/plays.jinja

@@ -0,0 +1,11 @@
+{% extends "base.jinja" %}
+
+{% block body_block %}
+ <div id="plays_loading_spinner" class="spinner-border"></div>
+{% endblock body_block %}
+
+{% block extra_js_files %}
+
+<script src="{{ url_for('static', filename='javascript/plays.js')  }}" defer></script>
+
+{% endblock extra_js_files %}

templates/statistics.jinja

@@ -0,0 +1,39 @@
+{% extends "base.jinja" %}
+ 
+
+{% block body_block %} 
+
+        <div class="row">
+                <div class="col">
+                        <div class="card">
+                                <canvas id="overtimechart"></canvas>
+                                <div class="card-body">
+                                        <h4 class="card-title" id="overtimechartname"></h4>
+                                </div>
+                        </div>
+                </div>
+                <div class="col">
+                        <div class="card">                                
+                                <canvas id="overtimechart"></canvas>
+                                <div class="card-body">
+                                        <h4 class="card-title" id="overtimechartname"></h4>
+                                </div>
+                        </div>
+                </div>
+                <div class="col">
+                        <div class="card">
+                                <canvas id="overtimechart"></canvas>
+                                <div class="card-body">
+                                        <h4 class="card-title" id="overtimechartname"></h4>
+                                </div>
+                        </div>
+                </div>
+        </div>
+
+{% endblock body_block %}
+
+{% block extra_js_files %}
+
+<script src="{{ url_for('static', filename='javascript/statistics.js')  }}" defer></script>
+
+{% endblock extra_js_files %}

templates/wishlist.jinja

@@ -0,0 +1,81 @@
+{% extends "base.jinja" %}
+ 
+
+{% block body_block %} 
+
+<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" class="no-sort">Thumbnail</th>
+                    <th scope="col">Naam</th>
+                    <th scope="col">Spelers</th>
+                    <th scope="col">Duratie</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" class="no-sort">Thumbnail</th>
+                    <th scope="col">Naam</th>
+                    <th scope="col">Spelers</th>
+                    <th scope="col">Duratie</th>
+                    <th scope="col">Moeilijkheid</th>
+                </tr>
+                </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" class="no-sort">Thumbnail</th>
+                    <th scope="col">Naam</th>
+                    <th scope="col">Spelers</th>
+                    <th scope="col">Duratie</th>
+                    <th scope="col">Moeilijkheid</th>
+                </tr>
+                </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" class="no-sort">Thumbnail</th>
+                    <th scope="col">Naam</th>
+                    <th scope="col">Spelers</th>
+                    <th scope="col">Duratie</th>
+                    <th scope="col">Moeilijkheid</th>
+                </tr>
+                </tr>
+            </thead>
+        </table>
+    </div>
+
+</body>
+
+{% endblock body_block %}
+
+
+{% block extra_js_files %}
+
+<script src="{{ url_for('static', filename='javascript/wishlist.js')  }}" defer></script>
+
+{% endblock extra_js_files %}