Started work on freewall

.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/css/main.css

@@ -0,0 +1,9 @@
+.statistic_image_grid_image{
+    width: 100px;
+    height: 100px;
+    object-fit: cover;
+}
+
+.test{
+    background-image: url("https://cf.geekdo-images.com/8IO6sl0jN5IylDDRAOK8GQ__original/img/scsSPfbOuxIedcBNjC4EtGb_MEc=/0x0/filters:format(jpeg)/pic8214042.jpg");
+}

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,59 @@
+document.body.onload=loadOwnedGames()
+
+document.getElementById('owned_nav').classList.add('active')
+
+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,71 @@
+document.body.onload=loadPlays()
+document.getElementById('plays_nav').classList.add('active')
+
+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++) {
+            if(((row_number * MAX_COLUMNS) + column_number) == all_plays.length){
+                break
+              }
+            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,154 @@
+document.body.onload=loadStatistics()
+document.getElementById('statistics_nav').classList.add('active')
+
+async function loadStatistics(){
+
+    function create_boardgame_image_grid_rows(boardgames){
+
+      console.log(boardgames)
+
+      const MAX_COLUMNS = 2
+      const column_width = 12 / MAX_COLUMNS
+
+      const rows_needed = Math.ceil(boardgames.length / MAX_COLUMNS)
+
+      let rows_to_return = []
+
+      for (let row_index = 0; row_index < rows_needed; row_index++){
+        const row = document.createElement('div')
+        row.className = 'row'
+
+        for (let column_index = 0; column_index < MAX_COLUMNS; column_index++){
+          if(((row_index * MAX_COLUMNS) + column_index) == boardgames.length){
+            break
+          }
+          const current_boardgame = boardgames[(row_index * MAX_COLUMNS) + column_index]
+
+          const column = document.createElement('div')
+          column.className = 'col'
+
+          const boardgame_image = document.createElement('img')
+          boardgame_image.src = current_boardgame.thumbnail_url
+          boardgame_image.classList.add('statistic_image_grid_image')
+          boardgame_image.classList.add('card-img-top')
+          boardgame_image.classList.add('img-fluid')
+
+          column.appendChild(boardgame_image)
+          row.appendChild(column)
+        }
+        rows_to_return.push(row)   
+      }
+
+      return rows_to_return
+
+    }
+
+    const gamesovertimechart = document.getElementById("gamesovertimechart")
+    
+    let games_over_time_statistic = await makeRequest(api_url + '/statistics/amount_of_games_over_time?day_step=30')
+    let games_over_time_statistic_no_expanions = await makeRequest(api_url + '/statistics/amount_of_games_over_time?day_step=30&filter_expansions_out=true')
+    let games_over_time_statistic_only_expanions = await makeRequest(api_url + '/statistics/amount_of_games_over_time?day_step=30&only_expansions=true')
+
+    new Chart(gamesovertimechart, {
+        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)
+
+
+    const gamesperyearchart = document.getElementById('gamesperyearchart')
+
+    let games_played_per_year_statistic = await makeRequest(api_url + '/statistics/games_played_per_year?filter_expansions_out=true')
+    
+    let years_played = []
+
+    for (date_index in Object.keys(games_played_per_year_statistic.result)){
+      const current_date = Object.keys(games_played_per_year_statistic.result)[date_index]
+      const year = current_date.substring(0, current_date.indexOf("-"));
+      years_played.push(year)
+    }
+
+    new Chart(gamesperyearchart, {
+      plugins: [ChartDataLabels],
+      type: 'bar',
+      data: {
+        labels: years_played    ,
+        datasets: [{
+          label: games_played_per_year_statistic.name,
+          data: Object.values(games_played_per_year_statistic.result),
+          borderWidth: 1  
+        }
+      ]
+      },
+      options: {
+        scales: {
+          y: {
+            beginAtZero: true,
+            max: Math.ceil((Math.max(...Object.values(games_played_per_year_statistic.result)))/ 250) * 250
+          }
+        },
+        plugins: {
+          datalabels: {
+              anchor: 'end',
+            align: 'end'
+          }
+        }
+      }
+    });
+    $("#gamesperyearchartname").text(games_played_per_year_statistic.name)
+
+
+    const mostexpensivegameschart = document.getElementById('mostexpensivegameschart')
+
+    let most_expensive_games_statistic = await makeRequest(api_url + '/statistics/most_expensive_games')
+
+    console.log(most_expensive_games_statistic.result)
+
+    for (boardgame_index in most_expensive_games_statistic.result){
+      let boardgame = most_expensive_games_statistic.result[boardgame_index]
+
+      let boardgame_cell = document.createElement('div')
+      boardgame_cell.classList.add('test')
+      boardgame_cell.style["background-image"] = boardgame.thumbnail_url
+      mostexpensivegameschart.appendChild(boardgame_cell)
+    }
+
+    var boardgame_wall = new Freewall("#mostexpensivegameschart")
+    boardgame_wall.fitWidth()
+
+    // const rows_to_fill_in = create_boardgame_image_grid_rows(most_expensive_games_statistic.result)
+
+    // for (row_index in rows_to_fill_in){
+    //   mostexpensivegameschart.insertBefore(rows_to_fill_in[row_index], mostexpensivegameschart.firstChild)
+    // }
+
+    $('#mostexpensivegameschartname').text(most_expensive_games_statistic.name)
+
+}

static/javascript/wishlist.js

@@ -0,0 +1,69 @@
+document.body.onload=loadWishlistedGames()
+document.getElementById('wishlist_nav').classList.add('active')
+
+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,53 @@
+<!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/freewall/freewall.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')  }}" defer></script>
+    <script src="{{ url_for('static', filename='javascript/chart/chartjs-plugin-datalabels.min.js')  }}" defer></script>
+    
+</head> 
+
+<body>
+ <ul class="nav nav-tabs">
+  <li class="nav-item">
+    <a id="owned_nav" class="nav-link" href="{{ url_for('get_owned') }}">Collectie</a>
+  </li>
+  <li class="nav-item">
+    <a id="wishlist_nav" class="nav-link" href="{{ url_for('get_wishlist') }}">Wishlist</a>
+  </li>
+  <li class="nav-item">
+    <a id="statistics_nav" class="nav-link" href="{{ url_for('get_statistics') }}">Statistieken</a>
+  </li>
+  <li class="nav-item">
+    <a id="plays_nav" 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,33 @@
+{% extends "base.jinja" %}
+ 
+
+{% block body_block %} 
+
+        <div class="card-group" id="statistic_cards">
+                <div class="card">
+                        <canvas class="chart_visual" id="gamesovertimechart"></canvas>
+                        <div class="card-body">
+                                <h4 class="card-title" id="overtimechartname"></h4>
+                        </div>
+                </div>
+                <div class="card">                                
+                        <canvas class="chart_visual" id="gamesperyearchart"></canvas>
+                        <div class="card-body">
+                                <h4 class="card-title" id="gamesperyearchartname"></h4>
+                        </div>
+                </div>
+                <div class="card">
+                        <div class="chart_visual" id="mostexpensivegameschart"></div>
+                        <div class="card-body">
+                                <h4 class="card-title" id="mostexpensivegameschartname"></h4>
+                        </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 %}