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

appinfo/info.xml

@@ -8,7 +8,7 @@ Search for torrents within the app from mutiple BT sites;
 Control Aria2 and manage download tasks from the web;
 download videos from 700+ video sites(youtube,youku,vimo,dailymotion,twitter,facebook and the likes
 </description>
-    <version>0.5.2</version>
+    <version>0.6.0</version>
     <licence>agpl</licence>
     <author mail="freefallbenson@gmail.com" homepage="https://github.com/shiningw">jiaxinhuang</author>
     <namespace>NCDownloader</namespace>

lib/Tools/Aria2.php

@@ -308,7 +308,7 @@ class Aria2
             $filename = Helper::getBasicFilename($file);
             $torrent = base64_encode($data);
             $resp = $this->addTorrent($torrent, []);
-        }else{
+        } else {
             return ['error' => "no valid torrents file!"];
         }
         if (isset($resp['error'])) {
@@ -353,7 +353,7 @@ class Aria2
     }
     public function start($bin = null)
     {
-        //aria2c wont't start without any errors when input-file is set but missing
+        //aria2c refuses to start with no errors when input-file is set but missing
         if (!file_exists($this->sessionFile)) {
             file_put_contents($this->sessionFile, '');
         }
@@ -389,6 +389,7 @@ class Aria2
     public function stop()
     {
         $resp = $this->shutdown();
+        sleep(1);
         return $resp ?? null;
     }
     private function confTemplate()

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

templates/Navigation.php

@@ -16,9 +16,9 @@ $aria2_installed = $_['aria2_installed'];
             data-aria2="<?php $aria2_running ? print $l->t('on') : print $l->t('off');?>">
             <?php $aria2_running ? print $l->t('Stop Aria2') : print $l->t('Start Aria2');?>
         </button>
+    </button>
         <?php else: ?>
-        <button type="button" class="icon-power notinstalled"
+        <button type="button" class="icon-power notinstalled">
-            data-aria2="<?php $aria2_running ? print $l->t('on') : print $l->t('off');?>">
             <?php print $l->t('Aria2 is not installed!');?>
         </button>
         <?php endif;?>