Added custom game name search

static/javascript/owned.js

@@ -4,11 +4,14 @@ document.getElementById('owned_nav').classList.add('active')
 
 async function loadOwnedGames() {
 
-    const player_amount_input = document.getElementById("player_amount")
+    const name_input = document.getElementById("name_input")
+    const player_amount_input = document.getElementById("player_amount_input")
 
     var boardgame_datatable = new DataTable('.boardgame_table', {
         "pageLength":-1,
         "bLengthChange": false,
+        "bPaginate": false,
+        "info": false,
         ajax: {
             url: api_url + '/owned?filter_expansions_out=true',
             dataSrc: ''
@@ -62,14 +65,27 @@ async function loadOwnedGames() {
 
     // Custom range filtering function
     boardgame_datatable.search.fixed('range', function (searchStr, data, index) {
-        var player_amount = parseInt(player_amount_input.value, 10);
+
-        //var max = parseInt(maxEl.value, 10);
+        function isCorrectPlayerAmount(player_amount_wanted, min_players, max_players){
-        //console.log(data)
+            if ((player_amount_wanted >= min_players && player_amount_wanted <= max_players) || isNaN(player_amount_wanted)){
+                return true;
+            }
+        }
+
+        function isCorrectName(game_name_wanted, game_name){
+            if (game_name.includes(game_name_wanted) || game_name_wanted == ""){
+                return true;
+            }
+        }
+
+        var player_amount_wanted = parseInt(player_amount_input.value, 10);
         var min_players = parseFloat(data['min_players'])
         var max_players = parseFloat(data['max_players'])
-        //console.log(min_players, max_players)
+
-        console.log(player_amount)
+        var game_name_wanted = name_input.value.toLowerCase()
-        if ((player_amount >= min_players && player_amount <= max_players) || isNaN(player_amount)){
+        var game_name = data['name'].toLowerCase()
+
+        if (isCorrectPlayerAmount(player_amount_wanted, min_players, max_players) && isCorrectName(game_name_wanted, game_name)){
             return true;
         }
         
@@ -80,6 +96,10 @@ async function loadOwnedGames() {
         boardgame_datatable.draw();
     });
 
+    name_input.addEventListener('input', function () {
+        boardgame_datatable.draw();
+    });
+
 
     $('.boardgame_table').on('click', 'tbody tr', function() {
         var boardgame_id = boardgame_datatable.row(this).data().id;

templates/owned.jinja

@@ -4,7 +4,8 @@
 {% block body_block %} 
 
     <div class="form-group">
-        <input type="number" class="form-control" id="player_amount" placeholder="Aantal spelers">
+        <input class="form-control" id="name_input" placeholder="Spelnaam">
+        <input type="number" class="form-control" id="player_amount_input" placeholder="Aantal spelers">
     </div>
 
     <div class="table-responsive">