From af654af1e4c9eef0b14ccec5c3f879e559182f46 Mon Sep 17 00:00:00 2001
From: Yarne Coppens <git.w8x3v@simplelogin.com>
Date: Wed, 12 Feb 2025 12:18:54 +0100
Subject: [PATCH] Added custom game name search

---
 static/javascript/owned.js | 36 ++++++++++++++++++++++++++++--------
 templates/owned.jinja      |  3 ++-
 2 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/static/javascript/owned.js b/static/javascript/owned.js
index 12296a2..3ea4fd3 100644
--- a/static/javascript/owned.js
+++ b/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,17 +65,30 @@ 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);
-        //console.log(data)
+
+        function isCorrectPlayerAmount(player_amount_wanted, min_players, max_players){
+            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)
-        if ((player_amount >= min_players && player_amount <= max_players) || isNaN(player_amount)){
+
+        var game_name_wanted = name_input.value.toLowerCase()
+        var game_name = data['name'].toLowerCase()
+
+        if (isCorrectPlayerAmount(player_amount_wanted, min_players, max_players) && isCorrectName(game_name_wanted, game_name)){
             return true;
         }
-    
+        
         return false;
     });
 
@@ -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;
diff --git a/templates/owned.jinja b/templates/owned.jinja
index 9c76191..0975dca 100644
--- a/templates/owned.jinja
+++ b/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">