Library filtering and display enhancements (#214)

* Implement infinite scrolling and paging (selected via preference) (closes #202)
* Display game counts on more filter types (closes #194)
* Make game counts larger (closes #194)
* Include age groups in filtering (closes #200)
* Add sorting options (closes #145)
This commit is contained in:
Michael Green
2023-12-07 13:20:53 +11:00
committed by GitHub
parent 9288eb8f12
commit e7239c428b
32 changed files with 1659 additions and 379 deletions

View File

@@ -1,8 +1,79 @@
<div id="properties_toc">
<div id="properties_profile_toc_general" name="properties_profile_toc_item" onclick="ProfileSelectTab('general');">Account</div>
<div id="properties_profile_toc_general" name="properties_profile_toc_item" onclick="ProfileSelectTab('general');">Preferences</div>
<div id="properties_profile_toc_account" name="properties_profile_toc_item" onclick="ProfileSelectTab('account');">Account</div>
</div>
<div id="properties_bodypanel">
<div id="properties_bodypanel_general" name="properties_profile_tab" style="display: none;">
<h3>Game Library</h3>
<table style="width: 100%;">
<tr>
<th>
Library
</th>
</tr>
<tr>
<td>
Pagination mode:
</td>
</tr>
<tr>
<td>
<select id="profile_pref-LibraryPagination" data-pref="LibraryPagination" onchange="SavePrefValue_Value(this);">
<option value="infinite">Infinite scrolling</option>
<option value="paged">Paged</option>
</select>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<th>
Game Icons
</th>
</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>
</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>
</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>
</td>
</tr>
<tr>
<td>
<table id="profile_pref_LibraryClassificationBadgeSelect">
<tr>
<td>Use classification badges from:</td>
</tr>
<tr>
<td>
<select id="profile_pref_LibraryPrimaryClassificationBadge" data-primary="primary" onchange="SavePrefValue_ClassBadge(this);">
</select>
</td>
</tr>
<tr>
<td>Fallback to classification badges from:</td>
</tr>
<tr>
<td>
<select id="profile_pref_LibraryFallbackClassificationBadge" onchange="SavePrefValue_ClassBadge(this);">
</select>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div id="properties_bodypanel_account" name="properties_profile_tab" style="display: none;">
<h3>Reset Password</h3>
<table style="width: 100%;">
<tr>
@@ -55,6 +126,125 @@
}
}
function GetPrefInitialValues() {
var paginationMode = document.getElementById('profile_pref-LibraryPagination');
paginationMode.value = GetPreference('LibraryPagination', 'infinite');
ConfigurePrefInitialValue_Checkbox("LibraryShowGameTitle", GetPreference("LibraryShowGameTitle", true));
ConfigurePrefInitialValue_Checkbox("LibraryShowGameRating", GetPreference("LibraryShowGameRating", true));
ConfigurePrefInitialValue_Checkbox("LibraryShowGameClassification", GetPreference("LibraryShowGameClassification", true));
var primary = document.getElementById('profile_pref_LibraryPrimaryClassificationBadge');
var secondary = document.getElementById('profile_pref_LibraryFallbackClassificationBadge');
PopulateClassificationMenus(primary);
PopulateClassificationMenus(secondary, true);
var classificationOrder = JSON.parse(GetPreference("LibraryGameClassificationDisplayOrder", JSON.stringify([ "ESRB" ])));
primary.value = classificationOrder[0];
if (classificationOrder[1]) {
secondary.value = classificationOrder[1];
}
for (var i = 0; i < secondary.childNodes.length; i++) {
if (secondary.childNodes[i].value == primary.value) {
secondary.childNodes[i].setAttribute('disabled', 'disabled');
} else {
secondary.childNodes[i].removeAttribute('disabled');
}
}
}
function PopulateClassificationMenus(targetSelector, IsSecondary) {
targetSelector.innerHTML = '';
if (IsSecondary == true) {
var defaultOpt = document.createElement('option');
defaultOpt.value = '-';
defaultOpt.innerHTML = 'None';
targetSelector.appendChild(defaultOpt);
}
for (const [key, value] of Object.entries(ClassificationBoards)) {
var opt = document.createElement('option');
opt.value = key;
opt.innerHTML = value;
targetSelector.appendChild(opt);
}
}
function ConfigurePrefInitialValue_Checkbox(ValueName, ValueSetting) {
var valueCheckbox = document.getElementById("profile_pref_" + ValueName);
if (ValueSetting == "true" || ValueSetting == true) {
valueCheckbox.checked = true;
updateDisplay(ValueName, true);
} else {
valueCheckbox.checked = false;
updateDisplay(ValueName, false);
}
}
function SavePrefValue_Checkbox(e) {
var ValueName = e.getAttribute("data-pref");
SetPreference(ValueName, e.checked);
updateDisplay(ValueName, e.checked);
executeFilter1_1(1);
}
function SavePrefValue_Value(e) {
var ValueName = e.getAttribute("data-pref");
SetPreference(ValueName, e.value);
executeFilter1_1(1);
}
function updateDisplay(ValueName, ValueSetting) {
switch(ValueName) {
case "LibraryShowGameClassification":
var badgeSelector = document.getElementById("profile_pref_LibraryClassificationBadgeSelect");
if (ValueSetting == true || ValueSetting == "true") {
badgeSelector.style.display = '';
} else {
badgeSelector.style.display = 'none';
}
break;
}
}
function SavePrefValue_ClassBadge(e) {
var primary = document.getElementById('profile_pref_LibraryPrimaryClassificationBadge');
var secondary = document.getElementById('profile_pref_LibraryFallbackClassificationBadge');
if (e.getAttribute('data-primary') == 'primary') {
// reset secondary to "none" if the same board is selected in both
if (primary.value == secondary.value) {
secondary.value = '-';
}
// disable in secondary board selected in primary
for (var i = 0; i < secondary.childNodes.length; i++) {
if (secondary.childNodes[i].value == primary.value) {
secondary.childNodes[i].setAttribute('disabled', 'disabled');
} else {
secondary.childNodes[i].removeAttribute('disabled');
}
}
}
// save values
var model = [];
if (secondary.value == '-') {
model = [ primary.value ];
} else {
model = [ primary.value, secondary.value ];
}
SetPreference('LibraryGameClassificationDisplayOrder', JSON.stringify(model));
executeFilter1_1(1);
}
function checkPasswordsMatch() {
var oldPassword = document.getElementById('profile_oldpassword').value;
var newPassword = document.getElementById('profile_newpassword').value;
@@ -129,4 +319,5 @@
}
ProfileSelectTab('general');
GetPrefInitialValues();
</script>