Split JS in files per page

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

@@ -12,251 +12,3 @@ async function makeRequest(url) {
         console.error("Error:", error);
       }
 }
-
-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
-        })
-    });
-
-}
-
-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
-      })
-
-}
-
-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)
-
-}
-
-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)
-
-}
-
-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 play_card = createPlayCard(all_plays[(row_number * MAX_COLUMNS) + column_number])
-
-            column_div.appendChild(play_card)
-            row_div.appendChild(column_div)
-        }
-        document.body.appendChild(row_div)
-    }
-
-
-}

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,65 @@
+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 play_card = createPlayCard(all_plays[(row_number * MAX_COLUMNS) + column_number])
+
+            column_div.appendChild(play_card)
+            row_div.appendChild(column_div)
+        }
+        document.body.appendChild(row_div)
+    }
+
+
+}

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

@@ -14,13 +14,35 @@
     <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>
-    <script src="{{ url_for('static', filename='javascript/main.js')  }}" defer></script>
     
 </head> 
 
-{% block body %}
+<body>
+ <ul class="nav nav-tabs">
+  <li class="nav-item">
+    <a class="nav-link active" href="#">Active</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link disabled" href="#">Disabled</a>
+  </li>
+</ul> 
 
-{% endblock body %}
+{% 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

@@ -1,8 +1,6 @@
 {% extends "base.jinja" %}
 
-{% block body %}
+{% block body_block %}
-
-<body onload="loadGame()">
 
      <div class="row">
         <div class="col-sm-2">
@@ -18,6 +16,10 @@
         <div class="col-sm-10"><p id="boardgame_weight"></p></div>
     </div> 
 
-</body>
+{% endblock body_block %}
 
-{% endblock body %}
+{% block extra_js_files %}
+
+<script src="{{ url_for('static', filename='javascript/boardgame.js')  }}" defer></script>
+
+{% endblock extra_js_files %}

templates/owned.jinja

@@ -1,10 +1,7 @@
 {% extends "base.jinja" %}
  
 
-{% block body %} 
+{% block body_block %} 
-
-<body onload="loadOwnedGames()">
-
 
     <div class="table-responsive">
         <table class="table table-striped boardgame_table">
@@ -20,6 +17,10 @@
         </table>
     </div>
 
-</body>
+{% endblock body_block %}
 
-{% endblock body %}
+{% block extra_js_files %}
+
+<script src="{{ url_for('static', filename='javascript/owned.js')  }}" defer></script>
+
+{% endblock extra_js_files %}

templates/plays.jinja

@@ -1,23 +1,11 @@
 {% extends "base.jinja" %}
 
-{% block body %}
+{% block body_block %}
 
-<body onload="loadPlays()">
+{% endblock body_block %}
 
-     {# <div class="row">
+{% block extra_js_files %}
-        <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>  #}
 
-</body>
+<script src="{{ url_for('static', filename='javascript/plays.js')  }}" defer></script>
 
-{% endblock body %}
+{% endblock extra_js_files %}

templates/statistics.jinja

@@ -1,9 +1,7 @@
 {% extends "base.jinja" %}
  
 
-{% block body %} 
+{% block body_block %} 
-
-<body onload="loadStatistics()">
 
         <div class="row">
                 <div class="col">
@@ -32,9 +30,10 @@
                 </div>
         </div>
 
+{% endblock body_block %}
 
+{% block extra_js_files %}
 
+<script src="{{ url_for('static', filename='javascript/statistics.js')  }}" defer></script>
 
-</body>
+{% endblock extra_js_files %}
-
-{% endblock body %}

templates/wishlist.jinja

@@ -1,7 +1,7 @@
 {% extends "base.jinja" %}
  
 
-{% block body %} 
+{% block body_block %} 
 
 <body onload="loadWishlistedGames()">
 
@@ -71,4 +71,11 @@
 
 </body>
 
-{% endblock body %}
+{% endblock body_block %}
+
+
+{% block extra_js_files %}
+
+<script src="{{ url_for('static', filename='javascript/wishlist.js')  }}" defer></script>
+
+{% endblock extra_js_files %}