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,22 +111,14 @@ namespace gaseous_server.Controllers
} }
Database db = new gaseous_tools.Database(Database.databaseType.MySql, Config.DatabaseConfiguration.ConnectionString); 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>(); List<IGDB.Models.Game> RetVal = new List<IGDB.Models.Game>();
DataTable dbResponse = db.ExecuteCMD(sql, whereParams); DataTable dbResponse = db.ExecuteCMD(sql, whereParams);
foreach (DataRow dr in dbResponse.Rows) foreach (DataRow dr in dbResponse.Rows)
{ {
if ((long)dr["ROMGameId"] == 0) RetVal.Add(Classes.Metadata.Games.GetGame((long)dr["ROMGameId"], false, false));
{
// unknown game
}
else
{
// known game
RetVal.Add(Classes.Metadata.Games.GetGame((long)dr["ROMGameId"], false, false));
}
} }
return Ok(RetVal); 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/main.js" type="text/javascript"></script>
<script src="/scripts/filterformating.js" type="text/javascript"></script> <script src="/scripts/filterformating.js" type="text/javascript"></script>
<script src="/scripts/gamesformating.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> <title>Gaseous</title>
</head> </head>
<body> <body>

View File

@@ -7,7 +7,10 @@
var containerPanelSearch = document.createElement('div'); var containerPanelSearch = document.createElement('div');
containerPanelSearch.className = 'filter_panel_box'; containerPanelSearch.className = 'filter_panel_box';
var containerPanelSearchField = document.createElement('input'); var containerPanelSearchField = document.createElement('input');
containerPanelSearchField.id = 'filter_panel_search';
containerPanelSearchField.type = 'text'; containerPanelSearchField.type = 'text';
containerPanelSearchField.placeholder = 'Search';
containerPanelSearchField.setAttribute('onkeydown', 'executeFilterDelayed();');
containerPanelSearch.appendChild(containerPanelSearchField); containerPanelSearch.appendChild(containerPanelSearchField);
panel.appendChild(containerPanelSearch); panel.appendChild(containerPanelSearch);
@@ -18,7 +21,7 @@
var containerPanelPlatform = document.createElement('div'); var containerPanelPlatform = document.createElement('div');
containerPanelPlatform.className = 'filter_panel_box'; containerPanelPlatform.className = 'filter_panel_box';
for (var i = 0; i < result.platforms.length; i++) { 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); panel.appendChild(containerPanelPlatform);
@@ -31,7 +34,7 @@
var containerPanelGenres = document.createElement('div'); var containerPanelGenres = document.createElement('div');
containerPanelGenres.className = 'filter_panel_box'; containerPanelGenres.className = 'filter_panel_box';
for (var i = 0; i < result.genres.length; i++) { 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); panel.appendChild(containerPanelGenres);
@@ -50,7 +53,7 @@ function buildFilterPanelHeader(headerString, friendlyHeaderString) {
return header; return header;
} }
function buildFilterPanelItem(itemString, friendlyItemString) { function buildFilterPanelItem(filterType, itemString, friendlyItemString) {
var filterPanelItem = document.createElement('div'); var filterPanelItem = document.createElement('div');
filterPanelItem.id = 'filter_panel_item_' + itemString; filterPanelItem.id = 'filter_panel_item_' + itemString;
filterPanelItem.className = 'filter_panel_item'; filterPanelItem.className = 'filter_panel_item';
@@ -61,6 +64,9 @@ function buildFilterPanelItem(itemString, friendlyItemString) {
filterPanelItemCheckBoxItem.id = 'filter_panel_item_checkbox_' + itemString; filterPanelItemCheckBoxItem.id = 'filter_panel_item_checkbox_' + itemString;
filterPanelItemCheckBoxItem.type = 'checkbox'; filterPanelItemCheckBoxItem.type = 'checkbox';
filterPanelItemCheckBoxItem.className = 'filter_panel_item_checkbox'; filterPanelItemCheckBoxItem.className = 'filter_panel_item_checkbox';
filterPanelItemCheckBoxItem.name = 'filter_' + filterType;
filterPanelItemCheckBoxItem.setAttribute('filter_id', itemString);
filterPanelItemCheckBoxItem.setAttribute('oninput' , 'executeFilter();');
filterPanelItemCheckBox.appendChild(filterPanelItemCheckBoxItem); filterPanelItemCheckBox.appendChild(filterPanelItemCheckBoxItem);
var filterPanelItemLabel = document.createElement('label'); var filterPanelItemLabel = document.createElement('label');
@@ -73,4 +79,46 @@ function buildFilterPanelItem(itemString, friendlyItemString) {
filterPanelItem.appendChild(filterPanelItemLabel); filterPanelItem.appendChild(filterPanelItemLabel);
return filterPanelItem; 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) { function formatGamesPanel(targetElement, result) {
targetElement.innerHTML = '';
for (var i = 0; i < result.length; i++) { for (var i = 0; i < result.length; i++) {
var game = renderGameIcon(result[i], true, false); var game = renderGameIcon(result[i], true, false);
targetElement.appendChild(game); 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; 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 { .filter_panel_item {
display: flex; display: flex;
padding: 3px; padding: 3px;