Improve UX (#244)

* 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

gaseous-server/Classes/Roms.cs

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

gaseous-server/Controllers/V1.0/GamesController.cs

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

gaseous-server/wwwroot/pages/EmulatorJS.html

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

gaseous-server/wwwroot/pages/dialogs/collectionedit.html

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

gaseous-server/wwwroot/pages/dialogs/platformmapedit.html

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

gaseous-server/wwwroot/pages/dialogs/userprofile.html

@@ -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) {
+    function SavePrefs() {
-        var ValueName = e.getAttribute("data-pref");
+        var model = [];
-        SetPreference(ValueName, e.checked);
 
-        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);
+        
-
+        return { "setting": ValueName, "value": e.value };
-        executeFilter1_1(1);
     }
 
     function updateDisplay(ValueName, ValueSetting) {
@@ -232,6 +257,7 @@
             }
         }
 
+    
         // save values
         var model = [];
         if (secondary.value == '-') {
@@ -239,10 +265,8 @@
         } else {
             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>

gaseous-server/wwwroot/pages/emulator.html

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

gaseous-server/wwwroot/pages/game.html

@@ -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) {
+        ajaxCall('/api/v1.1/Games/' + gameId + '/roms?pageNumber=' + pageNumber + '&pageSize=' + pageSize + '&platformId=' + selectedPlatform + nameSearchQuery, 'GET', function (result) {
-            // display filter tools
+            drawRomFilterTools(result, gameRoms, displayCheckboxes, pageNumber, selectedPlatform, nameSearch);
-            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;
@@ -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;

gaseous-server/wwwroot/pages/home.html

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

gaseous-server/wwwroot/scripts/filterformating.js

@@ -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,50 +273,62 @@ 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;
     }
 
-    // user ratings
+    var model;
-    var userRatingEnabled = document.getElementById('filter_panel_userrating_enabled');
-
-    var minUserRating = -1;
-    var minUserRatingInput = document.getElementById('filter_panel_userrating_min');
-    if (minUserRatingInput.value) {
-        minUserRating = minUserRatingInput.value;
-        userRatingEnabled.checked = true;
-    }
-    setCookie(minUserRatingInput.id, minUserRatingInput.value);
-
-    var maxUserRating = -1;
-    var maxUserRatingInput = document.getElementById('filter_panel_userrating_max');
-    if (maxUserRatingInput.value) {
-        maxUserRating = maxUserRatingInput.value;
-        userRatingEnabled.checked = true;
-    }
-    setCookie(maxUserRatingInput.id, maxUserRatingInput.value);
-
-    if (minUserRating == -1 && maxUserRating == -1) {
-        userRatingEnabled.checked = false;
-    }
-
-    if (userRatingEnabled.checked == false) {
-        setCookie("filter_panel_userrating_enabled", false);
-
-        minUserRating = -1;
-        minUserRatingInput.value = "";
-        setCookie(minUserRatingInput.id, minUserRatingInput.value);
-        maxUserRating = -1;
-        maxUserRatingInput.value = "";
-        setCookie(maxUserRatingInput.id, maxUserRatingInput.value);
-    } else {
-        setCookie("filter_panel_userrating_enabled", true);
-    }
 
     // get order by
     var orderBy = document.getElementById('games_library_orderby_select').value;
@@ -309,36 +342,80 @@ function executeFilter1_1(pageNumber, pageSize) {
     }
     setCookie('games_library_orderby_direction_select', orderByDirectionSelect);
 
-    // build filter model
+    if (existingSearchModel == undefined || freshSearch == true) {
-    var ratingAgeGroups = GetFilterQuery1_1('agegroupings');
+        // user ratings
-    var ratingIncludeUnrated = false;
+        var userRatingEnabled = document.getElementById('filter_panel_userrating_enabled');
-    if (ratingAgeGroups.includes("0")) {
-        ratingIncludeUnrated = true;
-    }
 
-    var model = {
+        var minUserRating = -1;
-        "Name": document.getElementById('filter_panel_search').value,
+        var minUserRatingInput = document.getElementById('filter_panel_userrating_min');
-        "Platform": GetFilterQuery1_1('platform'),
+        if (minUserRatingInput.value) {
-        "Genre": GetFilterQuery1_1('genre'),
+            minUserRating = minUserRatingInput.value;
-        "GameMode": GetFilterQuery1_1('gamemode'),
+            userRatingEnabled.checked = true;
-        "PlayerPerspective": GetFilterQuery1_1('playerperspective'),
-        "Theme": GetFilterQuery1_1('theme'),
-        "GameRating": {
-            "MinimumRating": minUserRating,
-            "MinimumRatingCount": -1,
-            "MaximumRating": maxUserRating,
-            "MaximumRatingCount": -1,
-            "IncludeUnrated": !userRatingEnabled
-        },
-        "GameAgeRating": {
-            "AgeGroupings": ratingAgeGroups,
-            "IncludeUnrated": ratingIncludeUnrated
-        },
-        "Sorting": {
-            "SortBy": orderBy,
-            "SortAscending": orderByDirection
         }
-    };
+        setCookie(minUserRatingInput.id, minUserRatingInput.value);
+
+        var maxUserRating = -1;
+        var maxUserRatingInput = document.getElementById('filter_panel_userrating_max');
+        if (maxUserRatingInput.value) {
+            maxUserRating = maxUserRatingInput.value;
+            userRatingEnabled.checked = true;
+        }
+        setCookie(maxUserRatingInput.id, maxUserRatingInput.value);
+
+        if (minUserRating == -1 && maxUserRating == -1) {
+            userRatingEnabled.checked = false;
+        }
+
+        if (userRatingEnabled.checked == false) {
+            setCookie("filter_panel_userrating_enabled", false);
+
+            minUserRating = -1;
+            minUserRatingInput.value = "";
+            setCookie(minUserRatingInput.id, minUserRatingInput.value);
+            maxUserRating = -1;
+            maxUserRatingInput.value = "";
+            setCookie(maxUserRatingInput.id, maxUserRatingInput.value);
+        } else {
+            setCookie("filter_panel_userrating_enabled", true);
+        }
+
+        // build filter model
+        var ratingAgeGroups = GetFilterQuery1_1('agegroupings');
+        var ratingIncludeUnrated = false;
+        if (ratingAgeGroups.includes("0")) {
+            ratingIncludeUnrated = true;
+        }
+
+        model = {
+            "Name": document.getElementById('filter_panel_search').value,
+            "Platform": GetFilterQuery1_1('platform'),
+            "Genre": GetFilterQuery1_1('genre'),
+            "GameMode": GetFilterQuery1_1('gamemode'),
+            "PlayerPerspective": GetFilterQuery1_1('playerperspective'),
+            "Theme": GetFilterQuery1_1('theme'),
+            "GameRating": {
+                "MinimumRating": minUserRating,
+                "MinimumRatingCount": -1,
+                "MaximumRating": maxUserRating,
+                "MaximumRatingCount": -1,
+                "IncludeUnrated": !userRatingEnabled
+            },
+            "GameAgeRating": {
+                "AgeGroupings": ratingAgeGroups,
+                "IncludeUnrated": ratingIncludeUnrated
+            },
+            "Sorting": {
+                "SortBy": orderBy,
+                "SortAscending": orderByDirection
+            }
+        };
+
+        existingSearchModel = model;
+    } else {
+        existingSearchModel.Sorting.SortBy = orderBy;
+        existingSearchModel.Sorting.SortAscending = orderByDirection;
+        model = existingSearchModel;
+    }
 
     ajaxCall(
         '/api/v1.1/Games?pageNumber=' + pageNumber + '&pageSize=' + pageSize,

gaseous-server/wwwroot/scripts/gamesformating.js

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

gaseous-server/wwwroot/scripts/main.js

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

gaseous-server/wwwroot/styles/style.css

@@ -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 {
+/* tag item */
-    background-color: #2b2b2b !important;
+.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;