From 35796e92fcfd0350a6c74820a4be2d3584d9c205 Mon Sep 17 00:00:00 2001
From: Ben McMath <ben.mcmath@freedomcoin.cc>
Date: Mon, 2 Dec 2024 10:24:07 -0500
Subject: [PATCH] Adding support for list view and links to tinfoil.media for
 more details

---
 app/static/style.css     |  9 +++++
 app/templates/index.html | 85 +++++++++++++++++++++++++++++++++-------
 2 files changed, 80 insertions(+), 14 deletions(-)

diff --git a/app/static/style.css b/app/static/style.css
index 6252a67..a674d37 100644
--- a/app/static/style.css
+++ b/app/static/style.css
@@ -44,6 +44,15 @@
     color: white;
 }
 
+.game-link {
+    font-size: 1em;
+    margin-right: 5px;
+}
+
+.game-link img {
+    height: 15px;
+}
+
 p.game-description {
     margin-bottom: 0;
     font-size: 0.875rem;
diff --git a/app/templates/index.html b/app/templates/index.html
index f5afbe8..88face3 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -75,7 +75,7 @@
                         class="bi bi-card-heading"></i></button>
                 <button id="view-toggle-btn-icon" type="button" class="btn btn-primary view-toggle-btn" data-view="icon"><i
                         class="bi bi-grid-fill"></i></button>
-                <button id="view-toggle-btn-list" type="button" class="btn btn-primary view-toggle-btn" data-view="list" disabled=""><i
+                <button id="view-toggle-btn-list" type="button" class="btn btn-primary view-toggle-btn" data-view="list"><i
                         class="bi bi-list-ul"></i></button>
             </div>
         </div>
@@ -145,6 +145,8 @@
         } else if (currentView === 'icon') {
             renderIconView();
             adjustIconSizes();
+        } else if (currentView === 'list') {
+            renderListView();
         }
 
         // Set slider to show 3 columns by default
@@ -188,13 +190,24 @@
             const typeBadge = $('<span class="badge rounded-pill text-bg-info game-tag"></span>').text(game.type);
             tagsContainer.append(typeBadge);
 
+            // link to tinfoil
+            const tinfoilLink = $('<span class="badge rounded-pill text-bg-info game-link"><a href="https://tinfoil.io/Title/' +game.id +
+                '"><img src="https://tinfoil.media/favicon.ico"></a></span>');
+            tagsContainer.append(tinfoilLink);
+
             if (game.has_latest_version !== undefined) {
-                const versionBadge = $('<span class="badge rounded-pill game-tag"></span>').addClass(`text-bg-${game.has_latest_version ? 'success' : 'warning'}`).html(`<i class="bi ${game.has_latest_version ? 'bi-check-circle-fill' : 'bi-arrow-down-circle'}"></i>`);
+                const versionBadge = $('<span class="badge rounded-pill game-tag" title=""></span>').
+                    addClass(`text-bg-${game.has_latest_version ? 'success' : 'warning'}`).
+                    prop('title', game.has_latest_version ? 'Latest Version' : 'Missing Latest Update').
+                    html(`<i class="bi ${game.has_latest_version ? 'bi-check-circle-fill' : 'bi-arrow-down-circle'}"></i>`);
                 tagsContainer.append(versionBadge);
             }
 
             if (game.has_all_dlcs !== undefined) {
-                const dlcBadge = $('<span class="badge rounded-pill game-tag"></span>').addClass(`text-bg-${game.has_all_dlcs ? 'success' : 'warning'}`).html('<i class="bi bi-box-seam-fill"></i>');
+                const dlcBadge = $('<span class="badge rounded-pill game-tag" title=""></span>').
+                    addClass(`text-bg-${game.has_all_dlcs ? 'success' : 'warning'}`).
+                    prop('title', game.has_all_dlcs ? 'Has all DLC' : 'Missing DLC').
+                    html('<i class="bi bi-box-seam-fill"></i>');
                 tagsContainer.append(dlcBadge);
             }
 
@@ -229,6 +242,59 @@
         updatePaginationControls(baseGames.length)
     }
 
+    function renderListView() {
+        // Render icon view logic...
+        const gameGrid = $('#gameGrid');
+        gameGrid.empty(); // Clear existing games
+        // Get games for the current page
+        start = (currentPage - 1) * itemsPerPage
+        end = start + itemsPerPage
+        baseGames = filteredGames.filter(game => game.type === 'BASE');
+        paginatedGames = baseGames.slice(start, end);
+
+        paginatedGames.forEach(game => {
+            const container = $('<div class="d-flex align-items-center"></div>');
+            const image = $('<div class="flex-shrink-0"><img src="'+game.iconUrl+'" alt="'+game.name+'" width="64px" height="64px"></div>');
+            const title = $('<div class="flex-grow-1 ms-3">' +
+                        (game.title_id_name || game.name) +
+                    '</div>');
+            const tagsContainer = $('<div class="tags-container" style="position:relative;"></div>');
+
+            const typeBadge = $('<span class="badge rounded-pill text-bg-info game-tag"></span>').text(game.type);
+            tagsContainer.append(typeBadge);
+
+            // link to tinfoil
+            const tinfoilLink = $('<span class="badge rounded-pill text-bg-info game-link"><a href="https://tinfoil.io/Title/' +game.id +
+                '"><img src="https://tinfoil.media/favicon.ico"></a></span>');
+            tagsContainer.append(tinfoilLink);
+
+
+            if (game.has_latest_version !== undefined) {
+                 const versionBadge = $('<span class="badge rounded-pill game-tag" title=""></span>').
+                    addClass(`text-bg-${game.has_latest_version ? 'success' : 'warning'}`).
+                    prop('title', game.has_latest_version ? 'Latest Version' : 'Missing Latest Update').
+                    html(`<i class="bi ${game.has_latest_version ? 'bi-check-circle-fill' : 'bi-arrow-down-circle'}"></i>`);
+                tagsContainer.append(versionBadge);
+            }
+
+            if (game.has_all_dlcs !== undefined) {
+                const dlcBadge = $('<span class="badge rounded-pill game-tag" title=""></span>').
+                    addClass(`text-bg-${game.has_all_dlcs ? 'success' : 'warning'}`).
+                    prop('title', game.has_all_dlcs ? 'Has all DLC' : 'Missing DLC').
+                    html('<i class="bi bi-box-seam-fill"></i>');
+                tagsContainer.append(dlcBadge);
+            }
+
+            gameGrid.append(container.append(image, title, tagsContainer));
+        });
+
+        // Adjust icon sizes based on the slider value
+        adjustIconSizes(cardSize);
+        // Update pagination
+        updatePaginationControls(baseGames.length);
+
+    }
+
     function getColumnsForCardSize(size) {
         switch (size) {
             case 1: return 1; // 2 columns
@@ -338,12 +404,8 @@
         $('.view-toggle-btn').click(function () {
             $('.view-toggle-btn').removeClass("active"); 
             $(this).addClass("active");
-            const view = $(this).data('view');
-            if (view === 'card') {
-                currentView = 'card';
-            } else if (view === 'icon') {
-                currentView = 'icon';
-            }
+            currentView = $(this).data('view');
+
             renderGames(games);
         });
         
@@ -483,11 +545,6 @@
 
     }
 
-    // $('#btnApplyFilters').on('click', function () {
-    //     updateFilter();
-    //     applyFilters();
-    // });
-
 
 </script>
 {% endblock %}
\ No newline at end of file