sendnrw/gaseous-server
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Filter ROMs by platform (#236)

Browse Source 
* Added paging to the ROM display on game pages

* Added basic ROM filtering
This commit is contained in:
Michael Green
2023-12-20 13:31:45 +11:00
committed by GitHub
parent 7e3e4991dc
commit b9d9b0ea16
7 changed files with 199 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
gaseous-server/wwwroot/pages/dialogs/collectionedit.html
View File

@@ -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>

2
gaseous-server/wwwroot/pages/dialogs/settingsuseredit.html
View File

@@ -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>

137
gaseous-server/wwwroot/pages/game.html
View File

@@ -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) {
lastPlatform = gameRomItems[i].platform.name;
if (gameRomItems[i].platform != lastPlatform) {
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>';
}
}
}
@@ -450,7 +516,52 @@
if (displayCheckboxes == true) {
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';

38
gaseous-server/wwwroot/styles/style.css
View File

@@ -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;