Added player amount filtering

static/javascript/owned.js

@@ -4,6 +4,8 @@ document.getElementById('owned_nav').classList.add('active')
 
 async function loadOwnedGames() {
 
+    const player_amount_input = document.getElementById("player_amount")
+
     var boardgame_datatable = new DataTable('.boardgame_table', {
         "pageLength":-1,
         ajax: {
@@ -57,6 +59,26 @@ async function loadOwnedGames() {
         order: [[1, 'asc']]
     });
 
+    // 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);
+        //console.log(data)
+        var min_players = parseFloat(data['min_players'])
+        var max_players = parseFloat(data['max_players'])
+        //console.log(min_players, max_players)
+        console.log(player_amount)
+        if ((player_amount >= min_players && player_amount <= max_players) || isNaN(player_amount)){
+            return true;
+        }
+    
+        return false;
+    });
+
+    player_amount_input.addEventListener('input', function () {
+        boardgame_datatable.draw();
+    });
+
 
     $('.boardgame_table').on('click', 'tbody tr', function() {
         var boardgame_id = boardgame_datatable.row(this).data().id;

templates/boardgame.jinja

@@ -4,7 +4,7 @@
 
      <div class="row">
         <div class="col-sm-4">
-            <div class="card">
+            <div class="card"></div>
                 <img id="boardgame_image">
                 <div class="card-body">
                     <h4 class="card-title" id="boardgame_name">John Doe</h4>

templates/owned.jinja

@@ -3,6 +3,10 @@
 
 {% block body_block %} 
 
+    <div class="form-group">
+        <input type="number" class="form-control" id="player_amount" placeholder="Aantal spelers">
+    </div>
+
     <div class="table-responsive">
         <table class="table table-striped boardgame_table">
             <thead>