From 3e29dbb9c3eadeaaf71b468274a91b72ed4470ff Mon Sep 17 00:00:00 2001
From: Alexandre Aubin <alex.aubin@mailoo.org>
Date: Wed, 6 Nov 2019 21:50:08 +0100
Subject: [PATCH] Use buttons instead of clumsy links

---
 src/js/yunohost/controllers/diagnosis.js | 148 +++++++++++------------
 src/views/diagnosis/diagnosis_show.ms    |   6 +-
 2 files changed, 76 insertions(+), 78 deletions(-)

diff --git a/src/js/yunohost/controllers/diagnosis.js b/src/js/yunohost/controllers/diagnosis.js
index 1521fe03..d08cf03f 100644
--- a/src/js/yunohost/controllers/diagnosis.js
+++ b/src/js/yunohost/controllers/diagnosis.js
@@ -8,88 +8,86 @@
     // *********
 
     app.get('#/diagnosis', function (c) {
+        c.api('GET', '/diagnosis/show?full', {}, function(data) {
 
-        c.api('/diagnosis/show?full', function(data) {
-        for (var i = 0 ; i < data.reports.length ; i++)
-        {
-            // Convert timestamp to datetime
-            data.reports[i].time = new Date(data.reports[i].timestamp*1000);
-            data.reports[i].warnings = 0;
-            data.reports[i].errors = 0;
-            data.reports[i].ignored = 0;
-            for (var j = 0 ; j < data.reports[i].items.length ; j++)
+            // Prepare data to be displayed ...
+            for (var i = 0 ; i < data.reports.length ; i++)
             {
-                var type_ = data.reports[i].items[j].status;
-                type_ = type_.toLowerCase();
-                var ignored = data.reports[i].items[j].ignored;
-                var icon = "";
-                var issue = false;
+                // Convert timestamp to datetime
+                data.reports[i].time = new Date(data.reports[i].timestamp*1000);
+                data.reports[i].warnings = 0;
+                data.reports[i].errors = 0;
+                data.reports[i].ignored = 0;
+                for (var j = 0 ; j < data.reports[i].items.length ; j++)
+                {
+                    var type_ = data.reports[i].items[j].status;
+                    type_ = type_.toLowerCase();
+                    var ignored = data.reports[i].items[j].ignored;
+                    var icon = "";
+                    var issue = false;
 
-                if (type_ == "success") {
-                    icon = "check-circle";
-                }
-                else if (ignored == true) {
-                    icon = type_;
-                    if (type_ == "error") {
-                        icon = "times"
+                    if (type_ == "success") {
+                        icon = "check-circle";
                     }
-                    type_ = "ignored";
-                    data.reports[i].ignored++;
-                }
-                else if (type_ == "warning") {
-                    icon = "warning";
-                    issue = true;
-                    data.reports[i].warnings++;
-                }
-                else if (type_ == "error") {
-                    type_ = "danger";
-                    icon = "times";
-                    issue = true;
-                    data.reports[i].errors++;
-                }
-                data.reports[i].items[j].status = type_;
-                data.reports[i].items[j].icon = icon;
-                data.reports[i].items[j].issue = issue;
-                // We want filter_args to be something like "dnsrecords,domain=yolo.test,category=xmpp"
-                data.reports[i].items[j].filter_args = data.reports[i].id;
-                for (prop in data.reports[i].items[j].meta) {
-                    console.log(prop)
-                    data.reports[i].items[j].filter_args = data.reports[i].items[j].filter_args + ","+prop+"="+data.reports[i].items[j].meta[prop];
-                }
+                    else if (ignored == true) {
+                        icon = type_;
+                        if (type_ == "error") {
+                            icon = "times"
+                        }
+                        type_ = "ignored";
+                        data.reports[i].ignored++;
+                    }
+                    else if (type_ == "warning") {
+                        icon = "warning";
+                        issue = true;
+                        data.reports[i].warnings++;
+                    }
+                    else if (type_ == "error") {
+                        type_ = "danger";
+                        icon = "times";
+                        issue = true;
+                        data.reports[i].errors++;
+                    }
+                    data.reports[i].items[j].status = type_;
+                    data.reports[i].items[j].icon = icon;
+                    data.reports[i].items[j].issue = issue;
+                    // We want filter_args to be something like "dnsrecords,domain=yolo.test,category=xmpp"
+                    data.reports[i].items[j].filter_args = data.reports[i].id;
+                    for (prop in data.reports[i].items[j].meta) {
+                        console.log(prop)
+                        data.reports[i].items[j].filter_args = data.reports[i].items[j].filter_args + ","+prop+"="+data.reports[i].items[j].meta[prop];
+                    }
+                };
+                data.reports[i].noIssues = data.reports[i].warnings + data.reports[i].errors ? false : true;
             };
-            data.reports[i].noIssues = data.reports[i].warnings + data.reports[i].errors ? false : true;
-        };
-        c.view('diagnosis/diagnosis_show', data, function() {
-            $(".rerun-diagnosis").click(function() {
-                var category = $(this).attr("category");
-                c.api('/diagnosis/run?force', function(data) {
-                    c.force_redirect("#/diagnosis");
-                }, 'POST', {"categories": [category]});
+
+            // Render and display the view
+            c.view('diagnosis/diagnosis_show', data, function() {
+
+                // Configure 'rerun diagnosis' button behavior
+                $("button[data-action='rerun-diagnosis']").click(function() {
+                    var category = $(this).data("category");
+                    c.api('POST', '/diagnosis/run?force', {"categories": [category]}, function(data) {
+                        c.refresh();
+                    });
+                });
+
+                // Configure 'ignore' / 'unignore' buttons behavior
+                $("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) {
+                        c.refresh();
+                    })
+                });
+
+                $("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) {
+                        c.refresh();
+                    })
+                });
             });
         });
-        }, 'GET');
-
     });
 
-    diagnosis_add_ignore_filter = function(filter_args) {
-        c.api('/diagnosis/ignore', function(data) {
-            store.clear('slide');
-            c.force_redirect("#/diagnosis");
-        },
-        'POST',
-        {'add_filter': filter_args.split(',') }
-        );
-    };
-
-    diagnosis_remove_ignore_filter = function(filter_args) {
-        c.api('/diagnosis/ignore', function(data) {
-            store.clear('slide');
-            c.force_redirect("#/diagnosis");
-        },
-        'POST',
-        {'remove_filter': filter_args.split(',') }
-        );
-    };
-
-
 })();
diff --git a/src/views/diagnosis/diagnosis_show.ms b/src/views/diagnosis/diagnosis_show.ms
index c34f75e5..f48ea67e 100644
--- a/src/views/diagnosis/diagnosis_show.ms
+++ b/src/views/diagnosis/diagnosis_show.ms
@@ -21,7 +21,7 @@
         {{#if errors}}<span class="label label-danger">{{t 'errors' errors }}</span>{{/if}}
         {{#if warnings}}<span class="label label-warning">{{t 'warnings' warnings }}</span>{{/if}}
         {{#if ignored}}<span class="label label-default">{{t 'ignored' ignored }}</span>{{/if}}
-        <a role="button" category="{{ id }}" class="btn btn-sm btn-info pull-right rerun-diagnosis"><span class="fa-fw fa-refresh"></span> {{t 'rerun_diagnosis'}}</a>
+        <button class="btn btn-sm btn-info 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}}">
     <ul class="list-group" style="margin-bottom: 0px">
@@ -33,10 +33,10 @@
             {{/if}}
             {{summary}}
             {{#if ignored}}
-            <a href="javascript:void(null);" onclick="diagnosis_remove_ignore_filter('{{ filter_args }}');" role="button" class="btn btn-sm btn-default pull-right"><span class="fa-fw fa-bell"></span> {{t 'unignore'}}</a>
+            <button class="btn btn-sm btn-default pull-right" data-action="unignore" data-filter-args="{{ filter_args }}"><span class="fa-fw fa-bell"></span> {{t 'unignore'}}</button>
             {{else}}
             {{#if issue}}
-            <a href="javascript:void(null);" onclick="diagnosis_add_ignore_filter('{{ filter_args }}');" role="button" class="btn btn-sm btn-warning pull-right"><span class="fa-fw fa-bell-slash"></span> {{t 'ignore'}}</a>
+            <button class="btn btn-sm btn-warning pull-right" data-action="ignore" data-filter-args="{{ filter_args }}"><span class="fa-fw fa-bell-slash"></span> {{t 'ignore'}}</button>
             {{/if}}
             {{/if}}
             {{#if details}}