Filter settings are now stored in a session cookie (#80)

gaseous-server/wwwroot/index.html

@@ -12,9 +12,9 @@
     <script src="/scripts/jquery.lazy.plugins.min.js"></script>
     <script src="/scripts/select2.min.js"></script>
     <script src="/scripts/dropzone.min.js"></script>
-    <script dat-src="/scripts/main.js" type="text/javascript"></script>
-    <script dat-src="/scripts/filterformating.js" type="text/javascript"></script>
-    <script dat-src="/scripts/gamesformating.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/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">
@@ -22,19 +22,19 @@
     <title>Gaseous Games</title>
 
     <script type="text/javascript">
+        var head = document.getElementsByTagName('head')[0];
+
         // update links
         var headLinks = document.getElementsByTagName('link');
         for (var i = 0; i < headLinks.length; i++) {
-            if (headLinks[i].getAttribute('dat-href')) {
-                headLinks[i].setAttribute('href', headLinks[i].getAttribute('dat-href') + '?v=' + AppVersion);
-            }
-        }
+            if (headLinks[i].getAttribute('dat-href') && headLinks[i].rel == "stylesheet") {
+                var newLink = document.createElement('link');
+                newLink.rel = "stylesheet";
+                newLink.href = headLinks[i].getAttribute('dat-href') + '?v=' + AppVersion;
+                newLink.type = "text/css";
 
-        // update script src
-        var headLinks = document.getElementsByTagName('script');
-        for (var i = 0; i < headLinks.length; i++) {
-            if (headLinks[i].getAttribute('dat-src')) {
-                headLinks[i].setAttribute('src', headLinks[i].getAttribute('dat-src') + '?v=' + AppVersion);
+                headLinks[i].parentElement.removeChild(headLinks[i]);
+                head.appendChild(newLink);
             }
         }
     </script>

gaseous-server/wwwroot/pages/home.html

@@ -14,9 +14,4 @@
 
         executeFilter();
     });
-
-    //ajaxCall('/api/v1/Games', 'GET', function (result) {
-    //    var gameElement = document.getElementById('games_library');
-    //    formatGamesPanel(gameElement, result);
-    //});
 </script>

gaseous-server/wwwroot/scripts/filterformating.js

@@ -7,6 +7,10 @@
     var containerPanelSearch = document.createElement('div');
     containerPanelSearch.className = 'filter_panel_box';
     var containerPanelSearchField = document.createElement('input');
+    var searchCookie = getCookie('filter_panel_search');
+    if (searchCookie) {
+        containerPanelSearchField.value = searchCookie;
+    }
     containerPanelSearchField.id = 'filter_panel_search';
     containerPanelSearchField.type = 'text';
     containerPanelSearchField.placeholder = 'Search';
@@ -19,6 +23,10 @@
     var containerPanelUserRating = document.createElement('div');
     containerPanelUserRating.className = 'filter_panel_box';
     var containerPanelUserRatingMinField = document.createElement('input');
+    var minRatingCookie = getCookie('filter_panel_userrating_min');
+    if (minRatingCookie) {
+        containerPanelUserRatingMinField.value = minRatingCookie;
+    }
     containerPanelUserRatingMinField.id = 'filter_panel_userrating_min';
     containerPanelUserRatingMinField.type = 'number';
     containerPanelUserRatingMinField.placeholder = '0';
@@ -29,6 +37,10 @@
     containerPanelUserRating.appendChild(containerPanelUserRatingMinField);
 
     var containerPanelUserRatingMaxField = document.createElement('input');
+    var maxRatingCookie = getCookie('filter_panel_userrating_max');
+    if (maxRatingCookie) {
+        containerPanelUserRatingMaxField.value = maxRatingCookie;
+    }
     containerPanelUserRatingMaxField.id = 'filter_panel_userrating_max';
     containerPanelUserRatingMaxField.type = 'number';
     containerPanelUserRatingMaxField.placeholder = '100';
@@ -65,6 +77,11 @@
 
 function buildFilterPanel(targetElement, headerString, friendlyHeaderString, valueList, showToggle, initialDisplay) {
     if (showToggle == false) { initialDisplay = true; }
+    var displayCookie = getCookie('filter_panel_box_' + headerString);
+    if (displayCookie) {
+        initialDisplay = (displayCookie === 'true');
+        console.log(displayCookie);
+    }
     targetElement.appendChild(buildFilterPanelHeader(headerString, friendlyHeaderString, showToggle, initialDisplay));
 
     var containerPanel = document.createElement('div');
@@ -111,16 +128,27 @@ function toggleFilterPanel(panelName) {
     var filterPanel = document.getElementById('filter_panel_box_' + panelName);
     var filterPanelToggle = document.getElementById('filter_panel_header_toggle_' + panelName);
 
+    var cookieVal = '';
     if (filterPanel.style.display == 'none') {
         filterPanelToggle.innerHTML = '-';
         filterPanel.style.display = '';
+        cookieVal = "true";
     } else {
         filterPanelToggle.innerHTML = '+';
         filterPanel.style.display = 'none';
+        cookieVal = "false";
     }
+
+    setCookie("filter_panel_box_" + panelName, cookieVal);
 }
 
 function buildFilterPanelItem(filterType, itemString, friendlyItemString) {
+    var checkCookie = getCookie('filter_panel_item_' + filterType + '_checkbox_' + itemString);
+    var checkState = false;
+    if (checkCookie) {
+        checkState = (checkCookie === 'true');
+    }
+
     var filterPanelItem = document.createElement('div');
     filterPanelItem.id = 'filter_panel_item_' + itemString;
     filterPanelItem.className = 'filter_panel_item';
@@ -134,6 +162,9 @@ function buildFilterPanelItem(filterType, itemString, friendlyItemString) {
     filterPanelItemCheckBoxItem.name = 'filter_' + filterType;
     filterPanelItemCheckBoxItem.setAttribute('filter_id', itemString);
     filterPanelItemCheckBoxItem.setAttribute('oninput' , 'executeFilter();');
+    if (checkState == true) {
+        filterPanelItemCheckBoxItem.checked = true;
+    }
     filterPanelItemCheckBox.appendChild(filterPanelItemCheckBoxItem);
 
     var filterPanelItemLabel = document.createElement('label');
@@ -164,24 +195,27 @@ function executeFilter() {
     var platforms = '';
     var genres = '';
 
-    var searchString = document.getElementById('filter_panel_search').value;
-    if (searchString.length > 0) {
-        queries.push('name=' + searchString);
+    var searchString = document.getElementById('filter_panel_search');
+    if (searchString.value.length > 0) {
+        queries.push('name=' + searchString.value);
     }
+    setCookie(searchString.id, searchString.value);
 
     var minUserRating = 0;
-    var minUserRatingInput = document.getElementById('filter_panel_userrating_min').value;
-    if (minUserRatingInput) {
-        minUserRating = minUserRatingInput;
+    var minUserRatingInput = document.getElementById('filter_panel_userrating_min');
+    if (minUserRatingInput.value) {
+        minUserRating = minUserRatingInput.value;
         queries.push('minrating=' + minUserRating);
     }
+    setCookie(minUserRatingInput.id, minUserRatingInput.value);
 
     var maxUserRating = 100;
-    var maxUserRatingInput = document.getElementById('filter_panel_userrating_max').value;
-    if (maxUserRatingInput) {
-        maxUserRating = maxUserRatingInput;
+    var maxUserRatingInput = document.getElementById('filter_panel_userrating_max');
+    if (maxUserRatingInput.value) {
+        maxUserRating = maxUserRatingInput.value;
         queries.push('maxrating=' + maxUserRating);
     }
+    setCookie(maxUserRatingInput.id, maxUserRatingInput.value);
 
     queries.push(GetFilterQuery('platform'));
     queries.push(GetFilterQuery('genre'));
@@ -216,10 +250,13 @@ function GetFilterQuery(filterName) {
 
     for (var i = 0; i < Filters.length; i++) {
         if (Filters[i].checked) {
+            setCookie(Filters[i].id, true);
             if (queryString.length > 0) {
                 queryString += ',';
             }
             queryString += Filters[i].getAttribute('filter_id');
+        } else {
+            setCookie(Filters[i].id, false);
         }
     }
 

gaseous-server/wwwroot/scripts/main.js

@@ -57,6 +57,33 @@ function getQueryString(stringName, type) {
     }
 }
 
+function setCookie(cname, cvalue, exdays) {
+    const d = new Date();
+    d.setTime(d.getTime() + (exdays*24*60*60*1000));
+    if (exdays) {
+        let expires = "expires="+ d.toUTCString();
+        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
+    } else {
+        document.cookie = cname + "=" + cvalue + ";path=/";
+    }
+}
+
+function getCookie(cname) {
+    let name = cname + "=";
+    let decodedCookie = decodeURIComponent(document.cookie);
+    let ca = decodedCookie.split(';');
+    for(let i = 0; i <ca.length; i++) {
+      let c = ca[i];
+      while (c.charAt(0) == ' ') {
+        c = c.substring(1);
+      }
+      if (c.indexOf(name) == 0) {
+        return c.substring(name.length, c.length);
+      }
+    }
+    return "";
+}
+
 function formatBytes(bytes, decimals = 2) {
     if (!+bytes) return '0 Bytes'