Save/restore collapse states when refreshing diagnosis view

src/js/yunohost/controllers/diagnosis.js

@@ -13,8 +13,8 @@
         });
     });
 
+    function updateDiagnosisView(state) {
 
-    function updateDiagnosisView() {
         c.api('GET', '/diagnosis/show?full', {}, function(data) {
 
             if (typeof(data.reports) === "undefined")
@@ -75,6 +75,8 @@
             // Render and display the view
             c.view('diagnosis/diagnosis_show', data, function() {
 
+                restoreDiagnosisViewState(state);
+
                 // Button for first diagnosis
                 $("button[data-action='run-full-diagnosis']").click(function() {
                     c.api('POST', '/diagnosis/run', {}, function(data) {
@@ -94,7 +96,7 @@
                 $("button[data-action='rerun-diagnosis']").click(function() {
                     var category = $(this).data("category");
                     c.api('POST', '/diagnosis/run?force', {"categories": [category]}, function(data) {
-                        updateDiagnosisView();
+                        updateDiagnosisView(saveDiagnosisViewState());
                     });
                 });
 
@@ -102,19 +104,50 @@
                 $("button[data-action='ignore']").click(function() {
                     var filter_args = $(this).data("filter-args");
                     c.api('POST', '/diagnosis/ignore', {'add_filter': filter_args.split(',') }, function(data) {
-                        updateDiagnosisView();
+                        updateDiagnosisView(saveDiagnosisViewState());
                     })
                 });
 
                 $("button[data-action='unignore']").click(function() {
                     var filter_args = $(this).data("filter-args");
                     c.api('POST', '/diagnosis/ignore', {'remove_filter': filter_args.split(',') }, function(data) {
-                        updateDiagnosisView();
+                        updateDiagnosisView(saveDiagnosisViewState());
                     })
                 });
             });
         });
     }
 
+    // Save current level of scroll + which panels are collapsed / not collapsed
+    function saveDiagnosisViewState() {
+        var collapse = {};
+        $(".panel-diagnosis").each(function(i, el) {
+            console.log($(el));
+            console.log($(el).data("category"));
+            collapse[$(el).data("category")] = $($(".panel-body", el)[0]).hasClass("in");
+        });
+        return { "scroll": document.documentElement.scrollTop, "collapse": collapse };
+    }
+
+    // Restore scroll + panel collapse state
+    function restoreDiagnosisViewState(state) {
+        if (typeof state === "undefined") { return; }
+
+        Object.keys(state.collapse).forEach(function(category)  {
+            console.log(category);
+            console.log(state.collapse[category]);
+            if (state.collapse[category]) {
+                $(".panel-diagnosis[data-category='"+category+"'] .panel-body").addClass("in");
+            }
+            else
+            {
+                $(".panel-diagnosis[data-category='"+category+"'] .panel-body").removeClass("in");
+            }
+        });
+
+        window.scroll(0,state.scroll);
+    }
+
+
 
 })();

src/js/yunohost/helpers.js

@@ -336,11 +336,11 @@
                         }
                     });
 
-                    // Run callback
-                    callback();
-
                     // Force scrollTop on page load
                     $('html, body').scrollTop(0);
+
+                    // Run callback
+                    callback();
                 });
             };
 

src/views/diagnosis/diagnosis_show.ms

@@ -22,10 +22,10 @@
 <div class="alert alert-warning text-center">{{t 'diagnosis_experimental_disclaimer'}}</div>
 
 {{#reports}}
-<div class="panel panel-default">
+<div class="panel panel-default panel-diagnosis" data-category="{{id}}">
     <div class="panel-heading">
         <h2 class="panel-title" style="display: inline-block; margin-right: 10px;">
-        <a data-toggle="collapse" href="#category-{{id}}">{{ description }}</a>
+        <a data-toggle="collapse" href="#diagnosis-body-{{id}}">{{ description }}</a>
         </h2>
         {{#if noIssues}}{{#if items}}<span class="label label-success">{{t 'everything_good'}}</span>{{/if}}{{/if}}
         {{#if errors}}<span class="label label-danger">{{t 'issues' errors }}</span>{{/if}}
@@ -33,7 +33,7 @@
         {{#if ignored}}<span class="label label-default">{{t 'ignored' ignored }}</span>{{/if}}
         <button class="btn btn-sm {{#if items}}btn-info{{else}}btn-success{{/if}} pull-right" data-action="rerun-diagnosis" data-category="{{ id }}"><span class="fa-fw fa-refresh"></span> {{t 'rerun_diagnosis'}}</button>
     </div>
-    <div class="panel-body collapse {{#if errors}}in{{/if}}" id="category-{{id}}">
+    <div class="panel-body collapse {{#if errors}}in{{/if}}" id="diagnosis-body-{{id}}">
     <ul class="list-group" style="margin-bottom: 0px">
         <p>{{t 'last_ran' }} {{formatRelative time day="numeric" month="long" year="numeric" hour="numeric" minute="numeric" }}</p>
         {{#items}}