WebHost: save datatables state (#1145)

* WebHost: save datatables state

* WebHost: Fix DataTables local storage keys.

Co-authored-by: recklesscoder <57289227+recklesscoder@users.noreply.github.com>

WebHostLib/static/assets/autodatatable.js

@@ -4,6 +4,7 @@ window.addEventListener('load', () => {
         "ordering": true,
         "info": false,
         "dom": "t",
+        "stateSave": true,
     });
   console.log(tables);
 });

WebHostLib/static/assets/tracker.js

@@ -17,6 +17,13 @@ window.addEventListener('load', () => {
         paging: false,
         info: false,
         dom: "t",
+        stateSave: true,
+        stateSaveCallback: function(settings,data) {
+            localStorage.setItem(`DataTables_${settings.sInstance}_/tracker`, JSON.stringify(data));
+        },
+        stateLoadCallback: function(settings) {
+            return JSON.parse(localStorage.getItem(`DataTables_${settings.sInstance}_/tracker`));
+        },
         columnDefs: [
             {
                 targets: 'hours',

WebHostLib/static/assets/userContent.js

@@ -6,6 +6,7 @@ window.addEventListener('load', () => {
         "order": [[ 3, "desc" ]],
         "info": false,
         "dom": "t",
+        "stateSave": true,
     });
   $("#seeds-table").DataTable({
         "paging": false,
@@ -13,5 +14,6 @@ window.addEventListener('load', () => {
         "order": [[ 2, "desc" ]],
         "info": false,
         "dom": "t",
+        "stateSave": true,
     });
 });

WebHostLib/templates/checkResult.html

@@ -12,7 +12,7 @@
         <div id="check-result" class="grass-island">
             <h1>Verification Results</h1>
             <p>The results of your requested file check are below.</p>
-            <table class="table autodatatable">
+            <table id="results-table" class="table autodatatable">
                 <thead>
                     <tr>
                         <th>File</th>

WebHostLib/templates/genericTracker.html

@@ -15,7 +15,7 @@
             <span class="info">This tracker will automatically update itself periodically.</span>
         </div>
             <div class="table-wrapper">
-                <table class="table non-unique-item-table">
+                <table id="received-table" class="table non-unique-item-table">
                     <thead>
                         <tr>
                             <th>Item</th>
@@ -37,7 +37,7 @@
                 </table>
             </div>
             <div class="table-wrapper">
-                <table class="table non-unique-item-table">
+                <table id="locations-table" class="table non-unique-item-table">
                     <thead>
                     <tr>
                         <th>Location</th>

WebHostLib/templates/tracker.html

@@ -25,7 +25,7 @@
         <div id="tables-container">
             {% for team, players in inventory.items() %}
                 <div class="table-wrapper">
-                    <table class="table unique-item-table">
+                    <table id="inventory-table" class="table unique-item-table">
                         <thead>
                         <tr>
                             <th>#</th>
@@ -78,7 +78,7 @@
 
             {% for team, players in checks_done.items() %}
                 <div class="table-wrapper">
-                    <table class="table non-unique-item-table">
+                    <table id="checks-table" class="table non-unique-item-table">
                         <thead>
                             <tr>
                                 <th rowspan="2">#</th>
@@ -153,7 +153,7 @@
             {% endfor %}
             {% for team, hints in hints.items() %}
                 <div class="table-wrapper">
-                    <table class="table non-unique-item-table" data-order='[[5, "asc"], [0, "asc"]]'>
+                    <table id="hints-table" class="table non-unique-item-table" data-order='[[5, "asc"], [0, "asc"]]'>
                         <thead>
                         <tr>
                             <th>Finder</th>