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

Improve UX (#244)

Browse Source 
* Removed insta-search and added a search button - closes #203 
* Pagination is constrained to 5 pages on either side of the current page (10 page numbers displayed in total) - closes #223
* Reviewed all dialogs and made behaviour consistent - closes #225
This commit is contained in:
Michael Green
2024-01-02 00:33:56 +11:00
committed by GitHub
parent 7be1ec7080
commit eb9c1ce1a4
13 changed files with 440 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
gaseous-server/Classes/Roms.cs
View File

@@ -15,7 +15,7 @@ namespace gaseous_server.Classes
{}
}
public static GameRomObject GetRoms(long GameId, long PlatformId = -1, int pageNumber = 0, int pageSize = 0)
public static GameRomObject GetRoms(long GameId, long PlatformId = -1, string NameSearch = "", int pageNumber = 0, int pageSize = 0)
{
GameRomObject GameRoms = new GameRomObject();
@@ -24,10 +24,17 @@ namespace gaseous_server.Classes
Dictionary<string, object> dbDict = new Dictionary<string, object>();
dbDict.Add("id", GameId);
string NameSearchWhere = "";
if (NameSearch.Length > 0)
{
NameSearchWhere = " AND Games_Roms.`Name` LIKE @namesearch";
dbDict.Add("namesearch", '%' + NameSearch + '%');
}
if (PlatformId == -1) {
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`";
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" + NameSearchWhere + " ORDER BY Platform.`Name`, Games_Roms.`Name` LIMIT 1000;";
} else {
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`";
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" + NameSearchWhere + " ORDER BY Platform.`Name`, Games_Roms.`Name` LIMIT 1000;";
dbDict.Add("platformid", PlatformId);
}
DataTable romDT = db.ExecuteCMD(sql, dbDict);

7
gaseous-server/Controllers/V1.0/GamesController.cs
View File

@@ -629,7 +629,6 @@ namespace gaseous_server.Controllers
[Route("{GameId}/cover/image/{size}")]
[ProducesResponseType(typeof(FileStreamResult), StatusCodes.Status200OK)]
[ProducesResponseType(StatusCodes.Status404NotFound)]
[ResponseCache(CacheProfileName = "None")]
public ActionResult GameCoverImage(long GameId, Communications.IGDBAPI_ImageSize size)
{
try
@@ -661,7 +660,7 @@ namespace gaseous_server.Controllers
};
Response.Headers.Add("Content-Disposition", cd.ToString());
//Response.Headers.Add("Cache-Control", "public, max-age=604800");
Response.Headers.Add("Cache-Control", "public, max-age=604800");
return File(filedata, contentType);
}
@@ -891,13 +890,13 @@ namespace gaseous_server.Controllers
[ProducesResponseType(typeof(Classes.Roms.GameRomObject), StatusCodes.Status200OK)]
[ProducesResponseType(StatusCodes.Status404NotFound)]
//[ResponseCache(CacheProfileName = "5Minute")]
public ActionResult GameRom(long GameId, int pageNumber = 0, int pageSize = 0, long PlatformId = -1)
public ActionResult GameRom(long GameId, int pageNumber = 0, int pageSize = 0, long PlatformId = -1, string NameSearch = "")
{
try
{
Game gameObject = Classes.Metadata.Games.GetGame(GameId, false, false, false);
return Ok(Classes.Roms.GetRoms(GameId, PlatformId, pageNumber, pageSize));
return Ok(Classes.Roms.GetRoms(GameId, PlatformId, NameSearch, pageNumber, pageSize));
}
catch
{

3
gaseous-server/wwwroot/pages/EmulatorJS.html
View File

@@ -1,4 +1,5 @@
<div style='width:640px;height:480px;max-width:100%'>
<!-- <div style='width:640px;height:480px;max-width:100%'> -->
<div style='width:100%;height:100%;'>
<div id='game'></div>
</div>

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

@@ -579,7 +579,7 @@
var gameImage = document.createElement('img');
gameImage.className = 'game_tile_image game_tile_image_small';
if (gameItem.cover) {
gameImage.src = '/api/v1.1/Games/' + gameItem.id + '/cover/image';
gameImage.src = '/api/v1.1/Games/' + gameItem.id + '/cover/image/cover_small';
} else {
gameImage.src = '/images/unknowngame.png';
gameImage.className = 'game_tile_image game_tile_image_small unknown';

6
gaseous-server/wwwroot/pages/dialogs/platformmapedit.html
View File

@@ -31,7 +31,7 @@
</td>
</tr>
<tr>
<td colspan="2"><strong>Note</strong>: Standard directory naming uses the IGDB slug for the platform is not editable.</td>
<td colspan="2"><strong>Note</strong>: Standard directory naming uses the IGDB slug for the platform and is not editable.</td>
</tr>
<tr>
<td>
@@ -58,7 +58,7 @@
<h4>Engine</h4>
</td>
<td>
<select id="mapping_edit_webemulatorengine" style="width: 100%;">
<select id="mapping_edit_webemulatorengine" data-minimum-results-for-search="Infinity" style="width: 100%;">
</select>
</td>
@@ -68,7 +68,7 @@
<h4>Core</h4>
</td>
<td>
<select id="mapping_edit_webemulatorcore" style="width: 100%;">
<select id="mapping_edit_webemulatorcore" data-minimum-results-for-search="Infinity" style="width: 100%;">
</select>
</td>

54
gaseous-server/wwwroot/pages/dialogs/userprofile.html
View File

@@ -18,7 +18,7 @@
</tr>
<tr>
<td>
<select id="profile_pref-LibraryPagination" data-pref="LibraryPagination" onchange="SavePrefValue_Value(this);">
<select id="profile_pref-LibraryPagination" data-pref="LibraryPagination" data-minimum-results-for-search="Infinity">
<option value="paged">Paged</option>
<option value="infinite">Infinite scrolling</option>
</select>
@@ -34,17 +34,17 @@
</tr>
<tr>
<td>
<input type="checkbox" id="profile_pref_LibraryShowGameTitle" data-pref="LibraryShowGameTitle" onchange="SavePrefValue_Checkbox(this);"><label for="profile_pref_LibraryShowGameTitle"> Show title</label>
<input type="checkbox" id="profile_pref_LibraryShowGameTitle" data-pref="LibraryShowGameTitle" data-minimum-results-for-search="Infinity"><label for="profile_pref_LibraryShowGameTitle"> Show title</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="profile_pref_LibraryShowGameRating" data-pref="LibraryShowGameRating" onchange="SavePrefValue_Checkbox(this);"><label for="profile_pref_LibraryShowGameRating"> Show rating</label>
<input type="checkbox" id="profile_pref_LibraryShowGameRating" data-pref="LibraryShowGameRating" data-minimum-results-for-search="Infinity"><label for="profile_pref_LibraryShowGameRating"> Show rating</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="profile_pref_LibraryShowGameClassification" data-pref="LibraryShowGameClassification" onchange="SavePrefValue_Checkbox(this);"><label for="profile_pref_LibraryShowGameClassification"> Show age classification badges</label>
<input type="checkbox" id="profile_pref_LibraryShowGameClassification" data-pref="LibraryShowGameClassification" onclick="updateDisplay(this.getAttribute('data-pref'), this.checked);"><label for="profile_pref_LibraryShowGameClassification"> Show age classification badges</label>
</td>
</tr>
<tr>
@@ -71,6 +71,11 @@
</table>
</td>
</tr>
<tr>
<td style="text-align: right;">
<button id="profile_pref_ok" value="OK" onclick="SavePrefs();">OK</button>
</td>
</tr>
</table>
</div>
<div id="properties_bodypanel_account" name="properties_profile_tab" style="display: none;">
@@ -183,20 +188,40 @@
}
}
function SavePrefValue_Checkbox(e) {
var ValueName = e.getAttribute("data-pref");
SetPreference(ValueName, e.checked);
function SavePrefs() {
var model = [];
updateDisplay(ValueName, e.checked);
model.push(SavePrefValue_Checkbox(document.getElementById('profile_pref_LibraryShowGameTitle')));
model.push(SavePrefValue_Checkbox(document.getElementById('profile_pref_LibraryShowGameRating')));
model.push(SavePrefValue_Checkbox(document.getElementById('profile_pref_LibraryShowGameClassification')));
model.push(SavePrefValue_Value(document.getElementById('profile_pref-LibraryPagination')));
model.push(
{
"setting": "LibraryGameClassificationDisplayOrder",
"value": JSON.stringify(SavePrefValue_ClassBadge(document.getElementById('profile_pref_LibraryPrimaryClassificationBadge')))
}
);
SetPreference_Batch(model);
executeFilter1_1(1);
closeDialog();
}
function SavePrefValue_Checkbox(e) {
var ValueName = e.getAttribute("data-pref");
return { "setting": ValueName, "value": e.checked.toString() };
}
function SavePrefValue_Value(e) {
var ValueName = e.getAttribute("data-pref");
SetPreference(ValueName, e.value);
executeFilter1_1(1);
return { "setting": ValueName, "value": e.value };
}
function updateDisplay(ValueName, ValueSetting) {
@@ -232,6 +257,7 @@
}
}
// save values
var model = [];
if (secondary.value == '-') {
@@ -240,9 +266,7 @@
model = [ primary.value, secondary.value ];
}
SetPreference('LibraryGameClassificationDisplayOrder', JSON.stringify(model));
executeFilter1_1(1);
return model;
}
function checkPasswordsMatch() {
@@ -320,4 +344,8 @@
ProfileSelectTab('general');
GetPrefInitialValues();
$('#profile_pref-LibraryPagination').select2();
$('#profile_pref_LibraryPrimaryClassificationBadge').select2();
$('#profile_pref_LibraryFallbackClassificationBadge').select2();
</script>

2
gaseous-server/wwwroot/pages/emulator.html
View File

@@ -2,7 +2,7 @@
<div id="bgImage_Opacity"></div>
</div>
<div id="emulator"></div>
<div id="emulator" class="emulator_fullscreen"></div>
<script type="text/javascript">
var gameId = getQueryString('gameid', 'int');

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

@@ -387,7 +387,7 @@
loadRoms(false);
});
function loadRoms(displayCheckboxes, pageNumber, selectedPlatform) {
function loadRoms(displayCheckboxes, pageNumber, selectedPlatform, nameSearch) {
if (!pageNumber) {
pageNumber = 1;
}
@@ -396,7 +396,10 @@
selectedPlatform = -1;
}
console.log(selectedPlatform);
var nameSearchQuery = '';
if (nameSearch != undefined) {
nameSearchQuery = '&NameSearch=' + encodeURIComponent(nameSearch);
}
var filterControlBlock = document.getElementById('games_library_controls');
if (filterControlBlock) {
@@ -428,44 +431,8 @@
var gameRoms = document.getElementById('gamesummaryroms');
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);
ajaxCall('/api/v1.1/Games/' + gameId + '/roms?pageNumber=' + pageNumber + '&pageSize=' + pageSize + '&platformId=' + selectedPlatform + nameSearchQuery, 'GET', function (result) {
drawRomFilterTools(result, gameRoms, displayCheckboxes, pageNumber, selectedPlatform, nameSearch);
if (result.gameRomItems) {
var gameRomItems = result.gameRomItems;
@@ -663,9 +630,87 @@
} else {
gameRoms.setAttribute('style', 'display: none;');
}
},
function(error) {
drawRomFilterTools(error, gameRoms, displayCheckboxes, pageNumber, selectedPlatform, nameSearch);
});
}
function drawRomFilterTools(result, gameRoms, displayCheckboxes, pageNumber, selectedPlatform, nameSearch) {
// display filter tools
var filterControls = document.createElement('div');
filterControls.id = "games_library_controls";
var nameSearchFilterBlock = document.createElement('div');
nameSearchFilterBlock.className = 'games_library_controlblock';
var nameSearchbox = document.createElement('input');
nameSearchbox.id = 'name_filter';
nameSearchbox.type = 'text';
if (nameSearch) {
nameSearchbox.value = nameSearch;
}
nameSearchbox.setAttribute('placeholder', "Name Search");
nameSearchFilterBlock.appendChild(nameSearchbox);
filterControls.appendChild(nameSearchFilterBlock);
var platformFilterBlock = document.createElement('div');
platformFilterBlock.className = 'games_library_controlblock';
var platformFilterOpt = document.createElement('select');
platformFilterOpt.id = "platform_filter";
var platformFilterOptDefault = document.createElement('option');
platformFilterOptDefault.value = '-1';
platformFilterOptDefault.innerHTML = 'All Platforms';
if (selectedPlatform == -1) {
platformFilterOptDefault.selected = 'selected';
}
platformFilterOpt.appendChild(platformFilterOptDefault);
if (result.platforms) {
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);
$(platformFilterOpt).select2({
minimumResultsForSearch: Infinity
});
filterControls.appendChild(platformFilterBlock);
var searchButtonFilterBlock = document.createElement('div');
searchButtonFilterBlock.className = 'games_library_controlblock';
var searchButton = document.createElement('button');
searchButton.value = 'Search';
searchButton.innerHTML = 'Search';
searchButton.setAttribute('onclick', 'loadRoms(' + undefined + ', ' + 1 + ', Number(document.getElementById("platform_filter").value), document.getElementById("name_filter").value);');
searchButtonFilterBlock.appendChild(searchButton);
filterControls.appendChild(searchButtonFilterBlock);
var romCounter = document.createElement('div');
romCounter.className = 'games_library_controlblock';
if (result.count) {
if (result.count < 1000) {
romCounter.innerHTML = result.count + ' ROMs';
} else {
romCounter.innerHTML = 'Maximum of 1000 ROMs';
}
} else {
romCounter.innerHTML = '0 ROMs';
}
filterControls.appendChild(romCounter);
gameRoms.appendChild(filterControls);
}
function rotateBackground() {
if (artworks) {
artworksPosition += 1;

12
gaseous-server/wwwroot/pages/home.html
View File

@@ -8,15 +8,15 @@
<div id="games_home">
<div id="games_home_box">
<div id="games_library_controls">
<div id="games_library_orderby" class="games_library_controlblock">
<div id="games_library_orderby" class="games_library_controlblock" style="text-align: left;">
<span>Order by: </span>
<select id="games_library_orderby_select" onchange="executeFilter1_1();">
<select id="games_library_orderby_select" data-minimum-results-for-search="Infinity" onchange="executeFilter1_1(1);">
<option selected="selected" value="NameThe">Name, The</option>
<option value="Name">Name</option>
<option value="Rating">User Rating</option>
<option value="RatingCount">User Rating Count</option>
</select>
<select id="games_library_orderby_direction_select" onchange="executeFilter1_1();">
<select id="games_library_orderby_direction_select" data-minimum-results-for-search="Infinity" onchange="executeFilter1_1(1);">
<option selected="selected" value="Ascending">Ascending</option>
<option value="Descending">Descending</option>
</select>
@@ -35,8 +35,12 @@
<script type="text/javascript">
ajaxCall('/api/v1.1/Filter', 'GET', function (result) {
var filterElement = document.getElementById('games_filter');
formatFilterPanel(filterElement, result);
var scrollerElement = document.getElementById('games_filter_scroller');
formatFilterPanel(filterElement, scrollerElement, result);
executeFilter1_1();
});
$('#games_library_orderby_select').select2();
$('#games_library_orderby_direction_select').select2();
</script>

119
gaseous-server/wwwroot/scripts/filterformating.js
View File

@@ -1,4 +1,6 @@
function formatFilterPanel(targetElement, result) {
var existingSearchModel;
function formatFilterPanel(targetElement, scrollerElement, result) {
var panel = document.createElement('div');
panel.id = 'filter_panel_box';
@@ -14,7 +16,6 @@
containerPanelSearchField.id = 'filter_panel_search';
containerPanelSearchField.type = 'text';
containerPanelSearchField.placeholder = 'Search';
containerPanelSearchField.setAttribute('onkeydown', 'executeFilterDelayed();');
containerPanelSearch.appendChild(containerPanelSearchField);
panel.appendChild(containerPanelSearch);
@@ -27,7 +28,8 @@
var containerPanelUserRatingCheckBox = document.createElement('input');
containerPanelUserRatingCheckBox.id = 'filter_panel_userrating_enabled';
containerPanelUserRatingCheckBox.type = 'checkbox';
containerPanelUserRatingCheckBox.setAttribute('oninput', 'executeFilterDelayed();');
containerPanelUserRatingCheckBox.className = 'filter_panel_item_checkbox';
containerPanelUserRatingCheckBox.setAttribute('onclick', 'filter_panel_userrating_enabled_check();');
var ratingEnabledCookie = getCookie('filter_panel_userrating_enabled');
if (ratingEnabledCookie) {
if (ratingEnabledCookie == "true") {
@@ -46,10 +48,9 @@
containerPanelUserRatingMinField.id = 'filter_panel_userrating_min';
containerPanelUserRatingMinField.type = 'number';
containerPanelUserRatingMinField.placeholder = '0';
containerPanelUserRatingMinField.setAttribute('onchange', 'executeFilterDelayed();');
containerPanelUserRatingMinField.setAttribute('onkeydown', 'executeFilterDelayed();');
containerPanelUserRatingMinField.setAttribute('min', '0');
containerPanelUserRatingMinField.setAttribute('max', '100');
containerPanelUserRatingMinField.setAttribute('oninput', 'filter_panel_userrating_value();');
containerPanelUserRating.appendChild(containerPanelUserRatingMinField);
var containerPanelUserRatingMaxField = document.createElement('input');
@@ -60,10 +61,9 @@
containerPanelUserRatingMaxField.id = 'filter_panel_userrating_max';
containerPanelUserRatingMaxField.type = 'number';
containerPanelUserRatingMaxField.placeholder = '100';
containerPanelUserRatingMaxField.setAttribute('onchange', 'executeFilterDelayed();');
containerPanelUserRatingMaxField.setAttribute('onkeydown', 'executeFilterDelayed();');
containerPanelUserRatingMaxField.setAttribute('min', '0');
containerPanelUserRatingMaxField.setAttribute('max', '100');
containerPanelUserRatingMaxField.setAttribute('oninput', 'filter_panel_userrating_value();');
containerPanelUserRating.appendChild(containerPanelUserRatingMaxField);
panel.appendChild(containerPanelUserRating);
@@ -96,6 +96,27 @@
targetElement.appendChild(panel);
var buttonsDiv = document.createElement('div');
buttonsDiv.id = 'games_library_searchbuttons'
// add filter button
var searchButton = document.createElement('div');
searchButton.id = 'games_library_searchbutton';
searchButton.setAttribute('onclick', 'executeFilter1_1();');
searchButton.innerHTML = 'Apply';
buttonsDiv.appendChild(searchButton);
// add reset button
var resetButton = document.createElement('div');
resetButton.id = 'games_library_resetbutton';
resetButton.setAttribute('onclick', 'resetFilters();');
resetButton.innerHTML = 'Reset';
buttonsDiv.appendChild(resetButton);
scrollerElement.appendChild(buttonsDiv);
// set order by values
var orderByCookie = getCookie('games_library_orderby_select');
if (orderByCookie) {
@@ -157,6 +178,7 @@ function buildFilterPanelHeader(headerString, friendlyHeaderString, showVisibleT
header.appendChild(headerToggle);
header.setAttribute('onclick', 'toggleFilterPanel("' + headerString + '");');
header.style.cursor = 'pointer';
header.classList.add('filter_header_toggleable');
}
header.appendChild(headerLabel);
@@ -201,7 +223,6 @@ function buildFilterPanelItem(filterType, itemString, friendlyItemString, tags)
filterPanelItemCheckBoxItem.className = 'filter_panel_item_checkbox';
filterPanelItemCheckBoxItem.name = 'filter_' + filterType;
filterPanelItemCheckBoxItem.setAttribute('filter_id', itemString);
filterPanelItemCheckBoxItem.setAttribute('oninput' , 'executeFilter1_1();');
if (checkState == true) {
filterPanelItemCheckBoxItem.checked = true;
}
@@ -252,15 +273,76 @@ function buildFilterTag(tags) {
return boundingDiv;
}
function filter_panel_userrating_enabled_check() {
var ratingCheck = document.getElementById('filter_panel_userrating_enabled');
var minRatingValue = document.getElementById('filter_panel_userrating_min');
var maxRatingValue = document.getElementById('filter_panel_userrating_max');
if (ratingCheck.checked == false) {
minRatingValue.value = '';
maxRatingValue.value = '';
} else {
minRatingValue.value = 0;
maxRatingValue.value = 100;
}
}
function filter_panel_userrating_value() {
var ratingCheck = document.getElementById('filter_panel_userrating_enabled');
var minRatingValue = document.getElementById('filter_panel_userrating_min');
var maxRatingValue = document.getElementById('filter_panel_userrating_max');
if (minRatingValue.value || maxRatingValue.value) {
ratingCheck.checked = true;
} else {
ratingCheck.checked = false;
}
}
function resetFilters() {
// clear name
document.getElementById('filter_panel_search').value = '';
// clear filter check boxes
var filterChecks = document.getElementsByClassName('filter_panel_item_checkbox');
for (var i = 0; i < filterChecks.length; i++) {
filterChecks[i].checked = false;
}
// fire checkbox specific scripts
filter_panel_userrating_enabled_check();
executeFilter1_1();
}
function executeFilter1_1(pageNumber, pageSize) {
var freshSearch = false;
if (!pageNumber) {
pageNumber = 1;
freshSearch = true;
existingSearchModel = undefined;
}
if (!pageSize) {
pageSize = 30;
}
var model;
// get order by
var orderBy = document.getElementById('games_library_orderby_select').value;
setCookie('games_library_orderby_select', orderBy);
var orderByDirection = true;
var orderByDirectionSelect = document.getElementById('games_library_orderby_direction_select').value;
if (orderByDirectionSelect == "Ascending") {
orderByDirection = true;
} else {
orderByDirection = false;
}
setCookie('games_library_orderby_direction_select', orderByDirectionSelect);
if (existingSearchModel == undefined || freshSearch == true) {
// user ratings
var userRatingEnabled = document.getElementById('filter_panel_userrating_enabled');
@@ -297,18 +379,6 @@ function executeFilter1_1(pageNumber, pageSize) {
setCookie("filter_panel_userrating_enabled", true);
}
// get order by
var orderBy = document.getElementById('games_library_orderby_select').value;
setCookie('games_library_orderby_select', orderBy);
var orderByDirection = true;
var orderByDirectionSelect = document.getElementById('games_library_orderby_direction_select').value;
if (orderByDirectionSelect == "Ascending") {
orderByDirection = true;
} else {
orderByDirection = false;
}
setCookie('games_library_orderby_direction_select', orderByDirectionSelect);
// build filter model
var ratingAgeGroups = GetFilterQuery1_1('agegroupings');
var ratingIncludeUnrated = false;
@@ -316,7 +386,7 @@ function executeFilter1_1(pageNumber, pageSize) {
ratingIncludeUnrated = true;
}
var model = {
model = {
"Name": document.getElementById('filter_panel_search').value,
"Platform": GetFilterQuery1_1('platform'),
"Genre": GetFilterQuery1_1('genre'),
@@ -340,6 +410,13 @@ function executeFilter1_1(pageNumber, pageSize) {
}
};
existingSearchModel = model;
} else {
existingSearchModel.Sorting.SortBy = orderBy;
existingSearchModel.Sorting.SortAscending = orderByDirection;
model = existingSearchModel;
}
ajaxCall(
'/api/v1.1/Games?pageNumber=' + pageNumber + '&pageSize=' + pageSize,
'POST',

6
gaseous-server/wwwroot/scripts/gamesformating.js
View File

@@ -12,14 +12,16 @@ function formatGamesPanel(targetElement, result, pageNumber, pageSize) {
console.log("Displaying page: " + pageNumber);
console.log("Page size: " + pageSize);
window.scrollTo(0, 0);
var pageMode = GetPreference('LibraryPagination', 'paged');
if (pageNumber == 1 || pageMode == 'paged') {
targetElement.innerHTML = '';
}
if (pageMode == 'paged') {
window.scrollTo(0, 0);
}
var pagerCheck = document.getElementById('games_library_pagerstore');
if (pageNumber == 1) {
pagerCheck.innerHTML = "0";

19
gaseous-server/wwwroot/scripts/main.js
View File

@@ -459,6 +459,25 @@ function SetPreference(Setting, Value) {
);
}
function SetPreference_Batch(model) {
console.log(model);
ajaxCall(
'/api/v1.1/Account/Preferences',
'POST',
function(result) {
for (var i = 0; i < model.length; i++) {
SetPreference_Local(model[i].setting, model[i].value.toString());
}
},
function(error) {
for (var i = 0; i < model.length; i++) {
SetPreference_Local(model[i].setting, model[i].value.toString());
}
},
JSON.stringify(model)
);
}
function SetPreference_Local(Setting, Value) {
if (userProfile.userPreferences) {
var prefFound = false;

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

@@ -198,6 +198,54 @@ h3 {
/* margin-right: 10px; */
}
#games_library_searchbuttons {
position: sticky;
position: -webkit-sticky;
bottom: 0;
margin-top: 5px;
width: 200px;
z-index: 1;
background-color: #5d5d5d;
}
#games_library_searchbutton {
position: sticky;
position: -webkit-sticky;
bottom: 0;
width: 180px;
height: 18px;
padding: 10px;
background-color: #352879;
color: white;
text-align: center;
font-family: Commodore64;
font-size: 16px;
}
#games_library_searchbutton:hover {
cursor: pointer;
background-color: #6C5EB5;
}
#games_library_resetbutton {
position: sticky;
position: -webkit-sticky;
bottom: 0;
width: 180px;
height: 18px;
padding: 10px;
background-color: #646464;
color: white;
text-align: center;
font-family: Commodore64;
font-size: 16px;
}
#games_library_resetbutton:hover {
cursor: pointer;
background-color: #adadad;
}
#games_filter {
width: 200px;
@@ -217,6 +265,10 @@ h3 {
background-color: #2b2b2b;
}
.filter_header_toggleable:hover {
background-color: #000000;
}
.filter_panel_box {
position: relative;
padding: 10px;
@@ -226,7 +278,7 @@ h3 {
input[type='text'], input[type='number'], input[type="email"], input[type="password"], input[type="datetime-local"] {
background-color: #2b2b2b;
color: white;
padding: 5px;
padding: 4px;
font-family: "PT Sans", Arial, Helvetica, sans-serif;
font-kerning: normal;
font-style: normal;
@@ -235,7 +287,12 @@ input[type='text'], input[type='number'], input[type="email"], input[type="passw
border-radius: 5px;
border-width: 1px;
border-style: solid;
border-color: lightgray;
/* border-color: lightgray; */
border-color: #2b2b2b;
}
input[type='text']:hover, input[type='number']:hover, input[type="email"]:hover, input[type="password"]:hover, input[type="datetime-local"]:hover {
border-color: #939393;
}
input[id='filter_panel_search'] {
@@ -841,8 +898,14 @@ div[name="properties_toc_item"]:hover,div[name="properties_user_toc_item"]:hover
}
.select2-container--default .select2-selection--multiple {
background-color: #2b2b2b !important;
background-color: #2b2b2b;
color: white !important;
border: 1px solid #2b2b2b;
border-radius: 5px;
}
.select2-container--default:hover, .select2-selection--multiple:hover {
border-color: #939393;
}
.select2-container--open .select2-dropdown--below,
@@ -854,8 +917,23 @@ div[name="properties_toc_item"]:hover,div[name="properties_user_toc_item"]:hover
border: 1px solid #2b2b2b;
}
.select2-selection__choice {
background-color: #2b2b2b !important;
/* tag item */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
background-color: #575757 !important;
border: 1px solid #2b2b2b;
border-radius: 5px;
}
/* tag item delete button */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
border-right: none;
background-color: #939393;
color: white;
}
/* tag item label */
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
background-color: #4e4e4e;
}
.select2-selection__choice__display {
@@ -870,8 +948,24 @@ div[name="properties_toc_item"]:hover,div[name="properties_user_toc_item"]:hover
background-color: #2b2b2b;
color: white !important;
border: 1px solid #2b2b2b;
border-radius: 5px;
}
.select2-selection--single:hover, .select2-selection__rendered:hover {
border-color: #939393;
}
.select2-container--default .select2-selection--single {
background-color: #2b2b2b;
color: white !important;
border: 1px solid #2b2b2b;
border-radius: 5px;
}
/* .select2-container--default:hover, .select2-selection--single:hover {
border-color: #939393;
} */
.select2-search__field {
background-color: #2b2b2b;
color: white;
@@ -946,11 +1040,23 @@ button:disabled {
}
#emulator {
}
.emulator_partscreen {
margin: 0 auto;
width: 640px;
padding-top: 100px;
}
.emulator_fullscreen {
position: fixed;
left: 0px;
right: 0px;
bottom: 0px;
top: 40px;
}
#emulatorbios {
margin: 0 auto;
width: 640px;
@@ -1163,16 +1269,17 @@ button:disabled {
position: absolute;
top: 0px;
right: 0px;
text-align: center;
text-align: right;
font-size: 10px;
}
.tagBoxItem {
display: block;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
width: 10px;
min-width: 10px;
height: 10px;
background-color: darkslategray;
color: white;