Shifts view: Persist hidden filters

resources/assets/js/forms.js

@@ -16,7 +16,7 @@ global.checkAll = (id, checked) => {
  * Sets the checkboxes according to the given type
  *
  * @param {string} id The elements ID
- * @param {list} shifts_list A list of numbers
+ * @param {list} shiftsList A list of numbers
  */
 global.checkOwnTypes = (id, shiftsList) => {
     $('#' + id + ' input[type="checkbox"]').each(function () {
@@ -173,3 +173,30 @@ $(function () {
         });
     });
 });
+
+/**
+ * Set the filter selects to latest state
+ *
+ * Uses DOMContentLoaded to prevent flickering
+ */
+window.addEventListener('DOMContentLoaded', () => {
+    const filter = document.getElementById('collapseShiftsFilterSelect');
+    if (!filter || localStorage.getItem('collapseShiftsFilterSelect') !== 'hidden') {
+        return;
+    }
+
+    filter.classList.remove('in');
+});
+$(() => {
+    if (typeof (localStorage) === 'undefined') {
+        return;
+    }
+
+    const onChange = (e) => {
+        localStorage.setItem('collapseShiftsFilterSelect', e.type);
+    };
+
+    $('#collapseShiftsFilterSelect')
+        .on('hidden.bs.collapse', onChange)
+        .on('shown.bs.collapse', onChange);
+});

resources/views/pages/user-shifts.html

@@ -55,12 +55,12 @@
         <div class="col-md-6">
             <button class="btn btn-info btn-sm hidden-print" style="margin-top: 20px; margin-bottom:10px" type="button"
                     data-toggle="collapse"
-                    data-target="#collapseRoomSelect" aria-expanded="false"
-                    aria-controls="collapseRoomSelect"
+                    data-target="#collapseShiftsFilterSelect" aria-expanded="true"
+                    aria-controls="collapseShiftsFilterSelect"
             >
                 collapse/show filters
             </button>
-            <div class="collapse in" id="collapseRoomSelect">
+            <div class="collapse in" id="collapseShiftsFilterSelect">
                 <div class="row">
                     <div class="col-xs-4 col-xxs-12">%room_select%</div>
                     <div class="col-xs-4 col-xxs-12">%type_select%</div>