feat: added filtering and favicons, also squashed some bugs

This commit is contained in:
Michael Green
2023-06-25 13:05:44 +10:00
parent 8112f9e9a7
commit 7eed686542
12 changed files with 78 additions and 13 deletions

View File

@@ -111,23 +111,15 @@ namespace gaseous_server.Controllers
}
Database db = new gaseous_tools.Database(Database.databaseType.MySql, Config.DatabaseConfiguration.ConnectionString);
string sql = "SELECT DISTINCT games_roms.gameid AS ROMGameId, game.ageratings, game.aggregatedrating, game.aggregatedratingcount, game.alternativenames, game.artworks, game.bundles, game.category, game.collection, game.cover, game.dlcs, game.expansions, game.externalgames, game.firstreleasedate, game.`follows`, game.franchise, game.franchises, game.gameengines, game.gamemodes, game.genres, game.hypes, game.involvedcompanies, game.keywords, game.multiplayermodes, (CASE WHEN games_roms.gameid = 0 THEN games_roms.`name` ELSE game.`name` END) AS `name`, game.parentgame, game.platforms, game.playerperspectives, game.rating, game.ratingcount, game.releasedates, game.screenshots, game.similargames, game.slug, game.standaloneexpansions, game.`status`, game.storyline, game.summary, game.tags, game.themes, game.totalrating, game.totalratingcount, game.versionparent, game.versiontitle, game.videos, game.websites FROM gaseous.games_roms LEFT JOIN game ON game.id = games_roms.gameid " + whereClause + " " + havingClause + " " + orderByClause;
string sql = "SELECT DISTINCT games_roms.gameid AS ROMGameId, game.ageratings, game.aggregatedrating, game.aggregatedratingcount, game.alternativenames, game.artworks, game.bundles, game.category, game.collection, game.cover, game.dlcs, game.expansions, game.externalgames, game.firstreleasedate, game.`follows`, game.franchise, game.franchises, game.gameengines, game.gamemodes, game.genres, game.hypes, game.involvedcompanies, game.keywords, game.multiplayermodes, game.`name`, game.parentgame, game.platforms, game.playerperspectives, game.rating, game.ratingcount, game.releasedates, game.screenshots, game.similargames, game.slug, game.standaloneexpansions, game.`status`, game.storyline, game.summary, game.tags, game.themes, game.totalrating, game.totalratingcount, game.versionparent, game.versiontitle, game.videos, game.websites FROM gaseous.games_roms LEFT JOIN game ON game.id = games_roms.gameid " + whereClause + " " + havingClause + " " + orderByClause;
List<IGDB.Models.Game> RetVal = new List<IGDB.Models.Game>();
DataTable dbResponse = db.ExecuteCMD(sql, whereParams);
foreach (DataRow dr in dbResponse.Rows)
{
if ((long)dr["ROMGameId"] == 0)
{
// unknown game
}
else
{
// known game
RetVal.Add(Classes.Metadata.Games.GetGame((long)dr["ROMGameId"], false, false));
}
}
return Ok(RetVal);
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 72 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 518 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View File

@@ -7,6 +7,10 @@
<script src="/scripts/main.js" type="text/javascript"></script>
<script src="/scripts/filterformating.js" type="text/javascript"></script>
<script src="/scripts/gamesformating.js" type="text/javascript"></script>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<title>Gaseous</title>
</head>
<body>

View File

@@ -7,7 +7,10 @@
var containerPanelSearch = document.createElement('div');
containerPanelSearch.className = 'filter_panel_box';
var containerPanelSearchField = document.createElement('input');
containerPanelSearchField.id = 'filter_panel_search';
containerPanelSearchField.type = 'text';
containerPanelSearchField.placeholder = 'Search';
containerPanelSearchField.setAttribute('onkeydown', 'executeFilterDelayed();');
containerPanelSearch.appendChild(containerPanelSearchField);
panel.appendChild(containerPanelSearch);
@@ -18,7 +21,7 @@
var containerPanelPlatform = document.createElement('div');
containerPanelPlatform.className = 'filter_panel_box';
for (var i = 0; i < result.platforms.length; i++) {
containerPanelPlatform.appendChild(buildFilterPanelItem(result.platforms[i].id, result.platforms[i].name));
containerPanelPlatform.appendChild(buildFilterPanelItem('platforms', result.platforms[i].id, result.platforms[i].name));
}
panel.appendChild(containerPanelPlatform);
@@ -31,7 +34,7 @@
var containerPanelGenres = document.createElement('div');
containerPanelGenres.className = 'filter_panel_box';
for (var i = 0; i < result.genres.length; i++) {
containerPanelGenres.appendChild(buildFilterPanelItem(result.genres[i].id, result.genres[i].name));
containerPanelGenres.appendChild(buildFilterPanelItem('genres', result.genres[i].id, result.genres[i].name));
}
panel.appendChild(containerPanelGenres);
@@ -50,7 +53,7 @@ function buildFilterPanelHeader(headerString, friendlyHeaderString) {
return header;
}
function buildFilterPanelItem(itemString, friendlyItemString) {
function buildFilterPanelItem(filterType, itemString, friendlyItemString) {
var filterPanelItem = document.createElement('div');
filterPanelItem.id = 'filter_panel_item_' + itemString;
filterPanelItem.className = 'filter_panel_item';
@@ -61,6 +64,9 @@ function buildFilterPanelItem(itemString, friendlyItemString) {
filterPanelItemCheckBoxItem.id = 'filter_panel_item_checkbox_' + itemString;
filterPanelItemCheckBoxItem.type = 'checkbox';
filterPanelItemCheckBoxItem.className = 'filter_panel_item_checkbox';
filterPanelItemCheckBoxItem.name = 'filter_' + filterType;
filterPanelItemCheckBoxItem.setAttribute('filter_id', itemString);
filterPanelItemCheckBoxItem.setAttribute('oninput' , 'executeFilter();');
filterPanelItemCheckBox.appendChild(filterPanelItemCheckBoxItem);
var filterPanelItemLabel = document.createElement('label');
@@ -74,3 +80,45 @@ function buildFilterPanelItem(itemString, friendlyItemString) {
return filterPanelItem;
}
var filterExecutor = null;
function executeFilterDelayed() {
if (filterExecutor) {
filterExecutor = null;
}
filterExecutor = setTimeout(executeFilter, 1000);
}
function executeFilter() {
// build filter lists
var platforms = '';
var genres = '';
var searchString = document.getElementById('filter_panel_search').value;
var platformFilters = document.getElementsByName('filter_platforms');
var genreFilters = document.getElementsByName('filter_genres');
for (var i = 0; i < platformFilters.length; i++) {
if (platformFilters[i].checked) {
if (platforms.length > 0) {
platforms += ',';
}
platforms += platformFilters[i].getAttribute('filter_id');
}
}
for (var i = 0; i < genreFilters.length; i++) {
if (genreFilters[i].checked) {
if (genres.length > 0) {
genres += ',';
}
genres += genreFilters[i].getAttribute('filter_id');
}
}
ajaxCall('/api/v1/Games?name=' + searchString + '&platform=' + platforms + '&genre=' + genres, 'GET', function (result) {
var gameElement = document.getElementById('games_library');
formatGamesPanel(gameElement, result);
});
}

View File

@@ -1,4 +1,5 @@
function formatGamesPanel(targetElement, result) {
targetElement.innerHTML = '';
for (var i = 0; i < result.length; i++) {
var game = renderGameIcon(result[i], true, false);
targetElement.appendChild(game);

View File

@@ -0,0 +1 @@
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

View File

@@ -70,6 +70,25 @@
padding: 10px;
}
input[type='text'] {
background-color: #2b2b2b;
color: white;
padding: 5px;
font-family: "PT Sans", Arial, Helvetica, sans-serif;
font-kerning: normal;
font-style: normal;
font-weight: 100;
font-size: 13px;
border-radius: 5px;
border-width: 1px;
border-style: solid;
border-color: lightgray;
}
input[id='filter_panel_search'] {
width: 160px;
}
.filter_panel_item {
display: flex;
padding: 3px;