Filter ROMs by platform (#236)

* Added paging to the ROM display on game pages

* Added basic ROM filtering

README.MD

@@ -1,6 +1,6 @@
 # Gaseous Server
 
-This is the server for the Gaseous system. It offers ROM and title management, as well as some basic in browser emulation of those ROM's.
+This is the server for the Gaseous system. It offers ROM and title management, as well as some basic in browser emulation of those ROMs.
 
 ## Warning
 

gaseous-server/Classes/Roms.cs

@@ -3,6 +3,7 @@ using System.Data;
 using gaseous_signature_parser.models.RomSignatureObject;
 using static gaseous_server.Classes.RomMediaGroup;
 using gaseous_server.Classes.Metadata;
+using IGDB.Models;
 
 namespace gaseous_server.Classes
 {
@@ -14,7 +15,7 @@ namespace gaseous_server.Classes
             {}
         }
 
-		public static GameRomObject GetRoms(long GameId, long PlatformId = -1)
+		public static GameRomObject GetRoms(long GameId, long PlatformId = -1, int pageNumber = 0, int pageSize = 0)
 		{
 			GameRomObject GameRoms = new GameRomObject();
 
@@ -24,23 +25,43 @@ namespace gaseous_server.Classes
             dbDict.Add("id", GameId);
             
 			if (PlatformId == -1) {
-				sql = "SELECT * FROM Games_Roms WHERE GameId = @id ORDER BY `Name`";
+				sql = "SELECT Games_Roms.*, Platform.`Name` AS platformname FROM Games_Roms LEFT JOIN Platform ON Games_Roms.PlatformId = Platform.Id WHERE Games_Roms.GameId = @id ORDER BY Platform.`Name`, Games_Roms.`Name`";
 			} else {
-				sql = "SELECT * FROM Games_Roms WHERE GameId = @id AND PlatformId = @platformid ORDER BY `Name`";
+				sql = "SELECT Games_Roms.*, Platform.`Name` AS platformname FROM Games_Roms LEFT JOIN Platform ON Games_Roms.PlatformId = Platform.Id WHERE Games_Roms.GameId = @id AND Games_Roms.PlatformId = @platformid ORDER BY Platform.`Name`, Games_Roms.`Name`";
 				dbDict.Add("platformid", PlatformId);
 			}
             DataTable romDT = db.ExecuteCMD(sql, dbDict);
 
             if (romDT.Rows.Count > 0)
             {
-				foreach (DataRow romDR in romDT.Rows)
+				// set count of roms
+				GameRoms.Count = romDT.Rows.Count;
+				
+				// setup platforms list
+				Dictionary<long, string> platformDict = new Dictionary<long, string>();
+
+				int pageOffset = pageSize * (pageNumber - 1);
+				for (int i = 0; i < romDT.Rows.Count; i++)
 				{
-					GameRoms.GameRomItems.Add(BuildRom(romDR));
+					GameRomItem gameRomItem = BuildRom(romDT.Rows[i]);
+
+					if ((i >= pageOffset && i < pageOffset + pageSize) || pageSize == 0)
+					{
+						GameRoms.GameRomItems.Add(gameRomItem);
+					}
+
+					if (!platformDict.ContainsKey(gameRomItem.PlatformId))
+					{
+						platformDict.Add(gameRomItem.PlatformId, gameRomItem.Platform);
+					}
 				}
 
 				// get rom media groups
 				GameRoms.MediaGroups = Classes.RomMediaGroup.GetMediaGroupsFromGameId(GameId);
 
+				// sort the platforms
+				GameRoms.Platforms = platformDict.OrderBy(x => x.Value).ToDictionary(x => x.Key, x => x.Value).ToList<KeyValuePair<long, string>>();
+
 				return GameRoms;
             }
             else
@@ -52,7 +73,7 @@ namespace gaseous_server.Classes
 		public static GameRomItem GetRom(long RomId)
 		{
 			Database db = new Database(Database.databaseType.MySql, Config.DatabaseConfiguration.ConnectionString);
-			string sql = "SELECT * FROM Games_Roms WHERE Id = @id";
+			string sql = "SELECT Games_Roms.*, Platform.`Name` AS platformname FROM Games_Roms LEFT JOIN Platform ON Games_Roms.PlatformId = Platform.Id WHERE Games_Roms.Id = @id";
 			Dictionary<string, object> dbDict = new Dictionary<string, object>();
 			dbDict.Add("id", RomId);
 			DataTable romDT = db.ExecuteCMD(sql, dbDict);
@@ -114,7 +135,7 @@ namespace gaseous_server.Classes
             {
                 Id = (long)romDR["id"],
                 PlatformId = (long)romDR["platformid"],
-				Platform = Classes.Metadata.Platforms.GetPlatform((long)romDR["platformid"]),
+				Platform = (string)romDR["platformname"],
                 GameId = (long)romDR["gameid"],
                 Name = (string)romDR["name"],
                 Size = (long)romDR["size"],
@@ -151,13 +172,15 @@ namespace gaseous_server.Classes
 		{
 			public List<GameRomMediaGroupItem> MediaGroups { get; set; } = new List<GameRomMediaGroupItem>();
 			public List<GameRomItem> GameRomItems { get; set; } = new List<GameRomItem>();
+			public int Count { get; set; }
+			public List<KeyValuePair<long, string>> Platforms { get; set; }
 		}
 
 		public class GameRomItem
 		{
 			public long Id { get; set; }
 			public long PlatformId { get; set; }
-			public IGDB.Models.Platform Platform { get; set; }
+			public string Platform { get; set; }
 			//public Dictionary<string, object>? Emulator { get; set; }
             public Models.PlatformMapping.PlatformMapItem.WebEmulatorItem? Emulator { get; set; }
             public long GameId { get; set; }

gaseous-server/Controllers/V1.0/GamesController.cs

@@ -870,13 +870,13 @@ namespace gaseous_server.Controllers
         [ProducesResponseType(typeof(Classes.Roms.GameRomObject), StatusCodes.Status200OK)]
         [ProducesResponseType(StatusCodes.Status404NotFound)]
         //[ResponseCache(CacheProfileName = "5Minute")]
-        public ActionResult GameRom(long GameId)
+        public ActionResult GameRom(long GameId, int pageNumber = 0, int pageSize = 0, long PlatformId = -1)
         {
             try
             {
                 Game gameObject = Classes.Metadata.Games.GetGame(GameId, false, false, false);
 
-                return Ok(Classes.Roms.GetRoms(GameId));
+                return Ok(Classes.Roms.GetRoms(GameId, PlatformId, pageNumber, pageSize));
             }
             catch
             {

gaseous-server/wwwroot/pages/dialogs/collectionedit.html

@@ -71,11 +71,11 @@
                     </td>
                     <td>
                         <span id="collection_directorylayout_gaseous_label" name="collection_directorylayout_label">
-                            <p>Standard layout: /&lt;IGDB Platform Slug&gt;/&lt;IGDB Game Slug&gt;/Game ROM's</p>
+                            <p>Standard layout: /&lt;IGDB Platform Slug&gt;/&lt;IGDB Game Slug&gt;/Game ROMs</p>
                             <p>Example: /genesis-slash-megadrive/sonic-the-hedgehog/Sonic the Hedgehog.smd</p>
                         </span>
                         <span id="collection_directorylayout_retropie_label" style="display: none;" name="collection_directorylayout_label">
-                            <p>RetroPie layout: /roms/&lt;RetroPie Platform Label&gt;/Game ROM's</p>
+                            <p>RetroPie layout: /roms/&lt;RetroPie Platform Label&gt;/Game ROMs</p>
                             <p>Example: /roms/megadrive/Sonic the Hedgehog.smd</p>
                         </span>
                     </td>

gaseous-server/wwwroot/pages/dialogs/settingsuseredit.html

@@ -50,7 +50,7 @@
                 </th>
             </tr>
             <tr>
-                <th colspan="4"><h3>Games and ROM's</h3></td>
+                <th colspan="4"><h3>Games and ROMs</h3></td>
             </tr>
             <tr class="romrow">
                 <td class="romcell">Play games</td>

gaseous-server/wwwroot/pages/game.html

@@ -74,7 +74,7 @@
         </div>
         <div id="gamesummaryroms">
             <span id="rom_edit" class="romlink" onclick="DisplayROMCheckboxes(true);">Edit</span>
-            <h3>ROM's/Images</h3>
+            <h3>ROMs/Images</h3>
             <div id="rom_edit_panel" style="display: none;">
                 <div id="rom_edit_panel_center">
                     <button id="rom_edit_delete" class="redbutton" onclick="deleteGameRoms();">Delete</button>
@@ -86,7 +86,7 @@
                 </div>
             </div>
         </div>
-        <div id="gamesummarysimilar">
+        <div id="gamesummarysimilar" style="display: none;">
             <h3>Similar Games</h3>
             <div id="gamesummarysimilarcontent"></div>
         </div>
@@ -365,6 +365,8 @@
         var gameSummarySimilar = document.getElementById('gamesummarysimilar');
         ajaxCall('/api/v1.1/Games/' + gameId + '/Related', 'GET', function (result) {
             if (result.games.length > 0) {
+                gameSummarySimilar.removeAttribute('style');
+
                 var gameSummarySimilarContent = document.getElementById('gamesummarysimilar');
                 for (var i = 0; i < result.games.length; i++) {
                     var similarObject = renderGameIcon(result.games[i], false, false, false, null, true);
@@ -382,28 +384,94 @@
         });
         
         // load roms
-        loadRoms();
+        loadRoms(false);
     });
 
-    function loadRoms(displayCheckboxes) {
+    function loadRoms(displayCheckboxes, pageNumber, selectedPlatform) {
+        if (!pageNumber) {
+            pageNumber = 1;
+        }
+
+        if (selectedPlatform == undefined) {
+            selectedPlatform = -1;
+        }
+
+        console.log(selectedPlatform);
+
+        var filterControlBlock = document.getElementById('games_library_controls');
+        if (filterControlBlock) {
+            filterControlBlock.remove();
+        }
+
         var existingTable = document.getElementById('romtable');
         if (existingTable) {
             existingTable.remove();
         }
 
+        var romPager = document.getElementById('romPaginator');
+        if (romPager) {
+            romPager.remove();
+        }
+
         var existingMgTable = document.getElementById('mediagrouptable');
         if (existingMgTable) {
             existingMgTable.remove();
         }
 
+        if (displayCheckboxes == undefined) {
+            if (document.getElementById('rom_edit_panel').style.display == 'none') {
+                displayCheckboxes = false;
+            } else {
+                displayCheckboxes = true;
+            }
+        }
+
         var gameRoms = document.getElementById('gamesummaryroms');
-        ajaxCall('/api/v1.1/Games/' + gameId + '/roms', 'GET', function (result) {
+        var pageSize = 20;
+        ajaxCall('/api/v1.1/Games/' + gameId + '/roms?pageNumber=' + pageNumber + '&pageSize=' + pageSize + '&platformId=' + selectedPlatform, 'GET', function (result) {
+            // display filter tools
+            var filterControls = document.createElement('div');
+            filterControls.id = "games_library_controls";
+
+            var platformFilterBlock = document.createElement('div');
+            platformFilterBlock.className = 'games_library_controlblock';
+
+            var platformFilterOpt = document.createElement('select');
+            platformFilterOpt.id = "platform_filter";
+            platformFilterOpt.setAttribute('onchange', 'loadRoms(' + undefined + ', ' + 1 + ', Number(document.getElementById("platform_filter").value));');
+
+            var platformFilterOptDefault = document.createElement('option');
+            platformFilterOptDefault.value = '-1';
+            platformFilterOptDefault.innerHTML = 'All Platforms';
+            if (selectedPlatform == -1) {
+                platformFilterOptDefault.selected = 'selected';
+            }
+            platformFilterOpt.appendChild(platformFilterOptDefault);
+
+            for (var i = 0; i < result.platforms.length; i++) {
+                var platformFilterOptValue = document.createElement('option');
+                platformFilterOptValue.value = result.platforms[i].key;
+                platformFilterOptValue.innerHTML = result.platforms[i].value;
+                if (selectedPlatform == Number(result.platforms[i].key)) {
+                    platformFilterOptValue.selected = 'selected';
+                }
+                platformFilterOpt.appendChild(platformFilterOptValue);
+            }
+            platformFilterBlock.appendChild(platformFilterOpt);
+            filterControls.appendChild(platformFilterBlock);
+
+            var romCounter = document.createElement('div');
+            romCounter.className = 'games_library_controlblock';
+            romCounter.innerHTML = result.count + ' ROMs';
+            filterControls.appendChild(romCounter);
+
+            gameRoms.appendChild(filterControls);
+
             if (result.gameRomItems) {
                 var gameRomItems = result.gameRomItems;
                 var mediaGroups = result.mediaGroups;
 
-                gameRomItems.sort((a, b) => a.platform.name.charCodeAt(0) - b.platform.name.charCodeAt(0));
+                // display roms
-
                 var newTable = document.createElement('table');
                 newTable.id = 'romtable';
                 newTable.className = 'romtable';
@@ -412,23 +480,21 @@
 
                 var lastPlatform = '';
                 for (var i = 0; i < gameRomItems.length; i++) {
-                    if (gameRomItems[i].platform.name != lastPlatform) {
+                    if (gameRomItems[i].platform != lastPlatform) {
-                        lastPlatform = gameRomItems[i].platform.name;
+                        lastPlatform = gameRomItems[i].platform;
                         var platformRow = document.createElement('tr');
                         var platformHeader = document.createElement('th');
                         platformHeader.setAttribute('colspan', 6);
-                        platformHeader.innerHTML = '<a href="#" onclick="ShowPlatformMappingDialog(' + gameRomItems[i].platform.id + ');" style="float: right; text-decoration: none;" class="romlink"><img src="/images/map.svg" class="banner_button_image banner_button_image_smaller" alt="Edit platform mapping" title="Edit platform mapping" /></a><a href="#" onclick="ShowCollectionDialog(' + gameRomItems[i].platform.id + ');" style="float: right; text-decoration: none;" class="romlink"><img src="/images/collections.svg" class="banner_button_image banner_button_image_smaller" alt="Add to collection" title="Add to collection" /></a>' + gameRomItems[i].platform.name;
+                        platformHeader.innerHTML = '<a href="#" onclick="ShowPlatformMappingDialog(' + gameRomItems[i].platformId + ');" style="float: right; text-decoration: none;" class="romlink"><img src="/images/map.svg" class="banner_button_image banner_button_image_smaller" alt="Edit platform mapping" title="Edit platform mapping" /></a><a href="#" onclick="ShowCollectionDialog(' + gameRomItems[i].platformId + ');" style="float: right; text-decoration: none;" class="romlink"><img src="/images/collections.svg" class="banner_button_image banner_button_image_smaller" alt="Add to collection" title="Add to collection" /></a>' + gameRomItems[i].platform;
                         platformRow.appendChild(platformHeader);
                         newTable.appendChild(platformRow);
                     }
 
-
-
                     var launchButton = '';
                     if (result.gameRomItems[i].emulator) {
                         if (gameRomItems[i].emulator.type) {
                             if (gameRomItems[i].emulator.type.length > 0) {
-                                launchButton = '<a href="/index.html?page=emulator&engine=' + gameRomItems[i].emulator.type + '&core=' + gameRomItems[i].emulator.core + '&platformid=' + gameRomItems[i].platform.id + '&gameid=' + gameId + '&rompath=' + encodeURIComponent('/api/v1.1/Games/' + gameId + '/roms/' + gameRomItems[i].id + '/' + encodeURIComponent(gameRomItems[i].name)) + '" class="romstart">Launch</a>';
+                                launchButton = '<a href="/index.html?page=emulator&engine=' + gameRomItems[i].emulator.type + '&core=' + gameRomItems[i].emulator.core + '&platformid=' + gameRomItems[i].platformId + '&gameid=' + gameId + '&rompath=' + encodeURIComponent('/api/v1.1/Games/' + gameId + '/roms/' + gameRomItems[i].id + '/' + encodeURIComponent(gameRomItems[i].name)) + '" class="romstart">Launch</a>';
                             }
                         }
                     }
@@ -451,6 +517,51 @@
                     DisplayROMCheckboxes(true);
                 }
 
+                if (result.count > pageSize) {
+                    // draw pagination
+                    var numOfPages = Math.ceil(result.count / pageSize);
+                    
+                    var romPaginator = document.createElement('div');
+                    romPaginator.id = 'romPaginator';
+                    romPaginator.className = 'rom_pager';
+
+                    // draw previous page button
+                    var prevPage = document.createElement('span');
+                    prevPage.className = 'rom_pager_number_disabled';
+                    prevPage.innerHTML = '&lt;';
+                    if (pageNumber != 1) {
+                        prevPage.setAttribute('onclick', 'loadRoms(' + undefined + ', ' + (pageNumber - 1) + ', ' + selectedPlatform + ');');
+                        prevPage.className = 'rom_pager_number';
+                    }
+                    romPaginator.appendChild(prevPage);
+
+                    // draw page numbers
+                    for (var i = 0; i < numOfPages; i++) {
+                        var romPaginatorPage = document.createElement('span');
+                        romPaginatorPage.className = 'rom_pager_number_disabled';
+                        romPaginatorPage.innerHTML = (i + 1);
+                        if ((i + 1) != pageNumber) {
+                            romPaginatorPage.setAttribute('onclick', 'loadRoms(' + undefined + ', ' + (i + 1) + ', ' + selectedPlatform + ');');
+                            romPaginatorPage.className = 'rom_pager_number';
+                        }
+
+                        romPaginator.appendChild(romPaginatorPage);
+                    }
+
+                    // draw next page button
+                    var nextPage = document.createElement('span');
+                    nextPage.className = 'rom_pager_number_disabled';
+                    nextPage.innerHTML = '&gt;';
+                    if (pageNumber != numOfPages) {
+                        nextPage.setAttribute('onclick', 'loadRoms(' + undefined + ', ' + (pageNumber + 1) + ', ' + selectedPlatform + ');');
+                        nextPage.className = 'rom_pager_number';
+                    }
+                    romPaginator.appendChild(nextPage);
+
+                    gameRoms.appendChild(romPaginator);
+                }
+                
+                // display media groups
                 var mediaGroupDiv = document.getElementById('gamesummarymediagroups');
                 if (mediaGroups.length == 0) {
                     mediaGroupDiv.style.display = 'none';

gaseous-server/wwwroot/styles/style.css

@@ -335,6 +335,40 @@ input[id='filter_panel_userrating_max'] {
     color: grey;
 }
 
+.rom_pager {
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, 0);
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    font-size: 16px;
+    font-family: Commodore64;
+    text-align: center;
+    width: 80%;
+}
+
+.rom_pager_number {
+    display: inline-block;
+    padding: 5px;
+    width: 40px;
+    text-align: center;
+}
+
+.rom_pager_number:hover {
+    background-color: blue;
+    cursor: pointer;
+}
+
+.rom_pager_number_disabled {
+    display: inline-block;
+    padding: 5px;
+    width: 40px;
+    text-align: center;
+    color: grey;
+}
+
 .filter_panel_item {
     display: flex;
     position: relative;
@@ -524,6 +558,10 @@ input[id='filter_panel_userrating_max'] {
     width: 250px;
 }
 
+#gamesummaryroms {
+    position: relative;
+}
+
 .game_cover_image {
     display: block;
     max-width: 250px;