show loading button when starting and stopping aria2;changed toast styling

src/index.js

@@ -24,11 +24,39 @@ window.addEventListener('DOMContentLoaded', function () {
     let vm = app.mount('#' + container);
     helper.addVue(vm.$options.name, vm);
 
-    eventHandler.add("click", "#start-aria2 button", function (e) {
+    eventHandler.add("click", "#start-aria2", "button", function (e) {
         const path = basePath + "/aria2/start";
+        let element = e.target
+        if (element.classList.contains("notinstalled")) {
+            return;
+        }
+        let parent = element.parentElement;
+        let oldHtml = parent.innerHTML;
+        parent.innerHTML = helper.loadingTpl();
         let url = helper.generateUrl(path);
+        const callback = function (parent, html, data) {
+            parent.innerHTML = html;
+            if (!data.status) {
+                return;
+            }
+            if (!data.status && data.error) {
+                helper.message(data.error);
+            }
+            let element = document.querySelector("#start-aria2 button");
+            let aria2 = element.getAttribute("data-aria2");
+            if (!aria2) {
+                return;
+            }
+            if (aria2 === 'on') {
+                element.setAttribute("data-aria2", "off");
+                element.textContent = t("ncdownloader", "Start Aria2");
+            } else {
+                element.setAttribute("data-aria2", "on");
+                element.textContent = t("ncdownloader", "Stop Aria2");
+            }
+        }
         Http.getInstance(url).setHandler(function (data) {
-            helper.aria2Toggle(data);
+            callback(parent, oldHtml, data);
         }).send();
     })
     eventHandler.add("click", "#app-navigation", "#search-download", helper.showDownload);

src/utils/helper.js

@@ -61,28 +61,11 @@ const helper = {
             close: true,
             gravity: "top", // `top` or `bottom`
             position: "center", // `left`, `center` or `right`
-            backgroundColor: "linear-gradient(to right,  rgb(26, 28, 27), rgb(126, 138, 105))",
+            backgroundColor: "#295b86",
             stopOnFocus: true, // Prevents dismissing of toast on hover
             onClick: function () { } // Callback after click
         }).showToast();
     },
-    aria2Toggle: function (data) {
-        if (!data.status) {
-            return;
-        }
-        if (!data.status && data.error) {
-            return;
-        }
-        let element = document.querySelector("#start-aria2 button");
-        let aria2 = element.getAttribute("data-aria2");
-        if (aria2 === 'on') {
-            element.setAttribute("data-aria2", "off");
-            element.textContent = t("ncdownloader", "Start Aria2");
-        } else {
-            element.setAttribute("data-aria2", "on");
-            element.textContent = t("ncdownloader", "Stop Aria2");
-        }
-    },
     getPathLast: function (path) {
         return path.substring(path.lastIndexOf('/') + 1)
     },
@@ -178,6 +161,17 @@ const helper = {
         container.style.top = 0;
         container.style.left = 0;
         container.style.width = "100%";
+    },
+    loadingTpl() {
+        let html = `<button class="bs-spinner">
+        <span
+          class="spinner-border spinner-border-sm"
+          role="status"
+          aria-hidden="true"
+          disabled
+        ></span
+        ><span class="visually-hidden">Loading...</span>`;
+        return html;
     }
 }