Save/restore collapse states when refreshing diagnosis view

This commit is contained in:
Alexandre Aubin 2020-04-27 05:43:30 +02:00
parent e66f65c93f
commit a110e56439
3 changed files with 43 additions and 10 deletions

View file

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

View file

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

View file

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