From 7309325e33c9f5420d2f1bf31f54a9ddbf4a709b Mon Sep 17 00:00:00 2001
From: Alexandre Pulido <apulido@free.fr>
Date: Mon, 23 Oct 2023 18:13:11 +0200
Subject: [PATCH] ui: fix filters in library view

---
 app/static/style.css     |   9 +++
 app/templates/index.html | 163 ++++++++-------------------------------
 app/titles.py            |  10 ++-
 3 files changed, 50 insertions(+), 132 deletions(-)

diff --git a/app/static/style.css b/app/static/style.css
index 5367727..6ed2c6e 100644
--- a/app/static/style.css
+++ b/app/static/style.css
@@ -20,6 +20,10 @@
     top: unset;
 }
 
+.game-tag {
+    font-size: 1em;
+}
+
 .card {
     border-radius: 8px !important;
     /* linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent 50%), */
@@ -50,4 +54,9 @@ p.game-description {
 
 .btn-outline-info {
     --bs-btn-hover-color: #fff;
+}
+
+.text-bg-warning {
+    color: #fff !important;
+    background-color: RGBA(var(--bs-warning-rgb),var(--bs-bg-opacity,1)) !important;
 }
\ No newline at end of file
diff --git a/app/templates/index.html b/app/templates/index.html
index d2de805..b8377e5 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -88,31 +88,6 @@
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
         }
 
-        /* Popup styles */
-        .popup {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0, 0, 0, 0.7);
-            justify-content: center;
-            align-items: center;
-            z-index: 9999;
-        }
-
-        .popup-content {
-            background-color: white;
-            padding: 20px;
-            border-radius: 8px;
-            max-width: 80%;
-            max-height: 80%;
-            overflow: auto;
-            position: relative;
-            /* Add position relative for absolute positioning */
-        }
-
         /* Close button */
         .close-button {
             position: absolute;
@@ -121,23 +96,6 @@
             cursor: pointer;
         }
 
-        /* Buttons container at the bottom */
-        .popup-buttons {
-            display: flex;
-            justify-content: flex-end;
-            margin-top: 20px;
-        }
-
-        .popup-button {
-            background-color: #3498db;
-            color: white;
-            padding: 8px 16px;
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-            margin-left: 10px;
-        }
-
         /* Filtering buttons */
         /* .filter-buttons {
             margin-bottom: 20px;
@@ -191,7 +149,7 @@
         <div class="row gy-2 gx-3 align-items-center justify-content-md-center">
 
             <div class="col-auto">
-                <button onclick="resetFilters()" type="button" class="btn btn-primary filter-button">Clear
+                <button id="btnResetFilters" type="button" class="btn btn-primary filter-button">Clear
                     filters</button>
             </div>
 
@@ -208,16 +166,14 @@
             </div>
         </div>
 
-        <div class="row mt-3 align-items-center justify-content-md-center">
-            <div class="col-auto filter-buttons">
-            </div>
+        <div class="d-grid gap-2 d-md-flex justify-content-md-center mt-3 filter-buttons">
         </div>
 
         <div class="grid-container" id="gridContainer">
             <!-- Add more game cards here -->
             <div class="row row-cols-1 row-cols-md-3 g-4">
                 {% for game in games %}
-                <div class="col">
+                <div class="col game-col">
                     <div class="card text-bg-dark game-card">
                         <img src="{{ game.bannerUrl }}" class="card-img">
                         <div class="card-img-overlay game-info">
@@ -226,9 +182,11 @@ <h5 class="card-title game-title">{{ game.name }}</h5>
                             <p class="card-text game-description"><small>{{ game.id }}</small></p>
                             <div class="tags-container">
                                 {% if game.has_latest_version %}
-                                <span class="badge rounded-pill text-bg-success game-tag">Up to date</span>
+                                <span class="badge rounded-pill text-bg-success game-tag" data-bs-tag="Up to date"><i
+                                        class="bi bi-box-seam-fill"></i></span>
                                 {% else %}
-                                <span class="badge rounded-pill text-bg-warning game-tag">Outdated</span>
+                                <span class="badge rounded-pill text-bg-warning game-tag" data-bs-tag="Outdated"><i
+                                        class="bi bi-box-seam-fill"></i></span>
                                 {% endif %}
                             </div>
                         </div>
@@ -240,36 +198,14 @@ <h5 class="card-title game-title">{{ game.name }}</h5>
         </div>
     </div>
 
-    <!-- Popup container -->
-    <div class="popup" id="popup">
-        <div class="popup-content">
-            <h2 id="popup-title"></h2>
-            <table id="popup-table">
-                <!-- Table content will be dynamically added here -->
-            </table>
-            <!-- Buttons container at the bottom -->
-            <div class="popup-buttons">
-                <button class="popup-button" onclick="closePopup()"><i class="fas fa-times"></i> Close</button>
-                <button class="popup-button" onclick="doSomething()"><i class="fas fa-check"></i> Do Something</button>
-            </div>
-        </div>
-    </div>
-
     <script>
         // Example data structure from API response
         $(document).ready(function () {
 
-            // $.getJSON("/api/titles", function (result) {
-            //     generateGameCards(result);
             generateFilterButtons();
-            // });
-            // console.log(gamesData[0]);
-
 
             // Function to filter cards based on input text
             function filterByAttribute(attributeText) {
-                console.log("hey");
-                console.log(attributeText);
                 const gameCards = $(".game-card");
                 const lowerCaseAttributeText = attributeText.toLowerCase();
 
@@ -279,18 +215,17 @@ <h2 id="popup-title"></h2>
                     const gameDescription = card.find(".game-description").text().toLowerCase();
 
                     if (gameTitle.includes(lowerCaseAttributeText) || gameDescription.includes(lowerCaseAttributeText)) {
-                        card.show(); // Show matching card
+                        card.parent().removeClass('d-none'); // Show matching card
                     } else {
-                        card.hide(); // Hide non-matching card
+                        card.parent().addClass('d-none'); // Hide non-matching card
                     }
                 });
             }
 
             // Listen to input changes in the text filter input
             $("#textFilter").on("input", function () {
-                console.log("hi");
+                $('.game-col').removeClass('d-none');
                 const attributeText = $(this).val();
-                console.log(attributeText);
                 filterByAttribute(attributeText);
             });
 
@@ -300,16 +235,24 @@ <h2 id="popup-title"></h2>
                 const filterButtonsContainer = $('.filter-buttons');
 
                 document.querySelectorAll('.game-tag').forEach(tag => {
-                    allTags.add(tag.textContent.trim());
+                    allTags.add(tag.getAttribute('data-bs-tag'));
                 });
 
                 allTags.forEach(tag => {
-                    console.log(tag);
-                    const filterButton = document.createElement('button');
-                    filterButton.className = 'filter-button btn btn-primary';
-                    filterButton.textContent = tag;
-                    filterButton.addEventListener('click', () => toggleFilter(tag));
-                    filterButtonsContainer.append(filterButton);
+                    inputId = 'btn-tag-' + tag.replaceAll(' ', '-');
+                    $('<input>', {
+                        type: 'checkbox',
+                        class: 'btn-check',
+                        id: inputId,
+                        autocomplete: 'off',
+                    }).appendTo(filterButtonsContainer);
+                    $('#' + inputId).on('click', () => toggleFilter(tag));
+
+                    $('<label>', {
+                        class: 'btn btn-outline-primary btn-sm',
+                        for: inputId,
+                        text: tag,
+                    }).appendTo(filterButtonsContainer);
                 });
             }
 
@@ -332,74 +275,34 @@ <h2 id="popup-title"></h2>
                 gameCards.each(function () {
                     const card = $(this);
                     const tagsContainer = card.find('.tags-container');
-                    console.log(tagsContainer);
                     const tags = tagsContainer.find('.game-tag');
                     tagsText = [];
-                    console.log(tags);
                     tags.each(function () {
                         const tt = $(this);
-                        console.log(tt.text());
-                        tagsText.push(tt.text());
+                        tagsText.push(tt.attr('data-bs-tag'));
                     })
-                    // const tagsText = tags.map(tagEl => tagEl.text());
-                    console.log(tagsText);
                     if (activeFilters.size === 0 || Array.from(activeFilters).some(tag => tagsText.includes(tag))) {
-                        // card.style.opacity = 1;
-                        // card.css("transform",'scale(1)'); // Show the card with animation
-                        card.show()
+                        card.parent().removeClass('d-none');
                     } else {
-                        // card.style.opacity = 0;
-                        // card.css("transform", 'scale(0.8)'); // Hide the card with animation
-                        card.hide()
+                        card.parent().addClass('d-none');
                     }
                 });
 
-                // Update active filter buttons
-                const filterButtons = document.querySelectorAll('.filter-button');
-                filterButtons.forEach(button => {
-                    const tag = button.innerText;
-                    if (activeFilters.has(tag)) {
-                        button.classList.add('active-filter'); // Add active class
-                    } else {
-                        button.classList.remove('active-filter'); // Remove active class
-                    }
-                });
             }
 
             // Function to reset filters and show all game cards
             function resetFilters() {
                 activeFilters.clear(); // Clear active filters
                 applyFilters(); // Apply filters again to display all cards
-            }
-
-        })
-
-        // Function to open the popup and populate with game info
-        function openPopup(title, info) {
-            $("#popup-title").html(title);
-
-            // Populate the table with game info
-            const popupTable = document.getElementById("popup-table");
-            popupTable.innerHTML = ""; // Clear previous content
 
-            for (const key in info) {
-                const row = popupTable.insertRow();
-                const cell1 = row.insertCell(0);
-                const cell2 = row.insertCell(1);
-                cell1.innerHTML = key;
-                cell2.innerHTML = info[key];
+                $(".filter-buttons input").each(function (index) {
+                    $(this).prop("checked", false)
+                });
             }
 
-            // Show the popup
-            const popup = $("#popup");
-            popup.css("display", "flex");
-        }
+            $('#btnResetFilters').on('click', resetFilters);
 
-        // Function to close the popup
-        function closePopup() {
-            const popup = $("#popup");
-            popup.css("display", "none");
-        }
+        })
 
 
     </script>
diff --git a/app/titles.py b/app/titles.py
index 7548dcf..81822e5 100644
--- a/app/titles.py
+++ b/app/titles.py
@@ -124,7 +124,13 @@ def get_game_info(title_id):
         }
     except Exception:
         print(f"Title ID not found in titledb: {title_id}")
-        return None
+        return {
+            'name': 'Unrecognized',
+            'bannerUrl': '//placehold.it/400x200',
+            'iconUrl': '',
+            'id': title_id + ' not found in titledb',
+            'category': '',
+        }
 
 def convert_nin_version(version):
     return int(version)//65536
@@ -135,7 +141,7 @@ def get_game_latest_version(all_existing_versions):
 def get_all_existing_versions(titleid):
     titleid = titleid.lower()
     if titleid not in versions_db:
-        print(f'Title ID not in versions.json: {titleid.upper()}')
+        # print(f'Title ID not in versions.json: {titleid.upper()}')
         return None
 
     versions_from_db = versions_db[titleid].keys()