From 60fe2662a583afa7658e01b52cf13bb0c752b4cd Mon Sep 17 00:00:00 2001
From: Yarne Coppens <git.w8x3v@simplelogin.com>
Date: Thu, 6 Feb 2025 16:49:22 +0100
Subject: [PATCH] Added player amount filtering

---
 static/javascript/owned.js | 22 ++++++++++++++++++++++
 templates/boardgame.jinja  |  2 +-
 templates/owned.jinja      |  4 ++++
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/static/javascript/owned.js b/static/javascript/owned.js
index 6145a92..c3fd8ed 100644
--- a/static/javascript/owned.js
+++ b/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;
diff --git a/templates/boardgame.jinja b/templates/boardgame.jinja
index 25c5875..437f2d5 100644
--- a/templates/boardgame.jinja
+++ b/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>
diff --git a/templates/owned.jinja b/templates/owned.jinja
index 7c0a0db..9c76191 100644
--- a/templates/owned.jinja
+++ b/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>