improved message displaying

src/App.vue

@@ -19,11 +19,11 @@ import nctable from "./lib/ncTable";
 
 const successCallback = (data, element) => {
   if (!data) {
-    helper.message(t("ncdownloader", "Something must have gone wrong!"));
+    helper.error(t("ncdownloader", "Something must have gone wrong!"));
     return;
   }
   if (data.hasOwnProperty("error")) {
-    helper.message(t("ncdownloader", data.error));
+    helper.error(t("ncdownloader", data.error));
   } else if (data.hasOwnProperty("message")) {
     helper.message(t("ncdownloader", data.message));
   } else if (data.hasOwnProperty("file")) {
@@ -51,15 +51,19 @@ export default {
       let formWrapper = element.closest("form");
       let formData = helper.getData(formWrapper);
       let inputValue = formData["text-input-value"];
+      let message;
       //formData.audioOnly = document.getElementById('audio-only').checked;
       if (formData.type === "youtube-dl") {
         formData["audio-only"] = formData["audio-only"] === "true";
+        message = helper.t("Download task started!");
       }
       if (!helper.isURL(inputValue) && !helper.isMagnetURI(inputValue)) {
-        helper.message(t("ncdownloader", inputValue + " is Invalid"));
+        helper.error(t("ncdownloader", inputValue + " is Invalid"));
         return;
       }
-
+      if (message) {
+        helper.info(message);
+      }
       let url = formWrapper.getAttribute("action");
       Http.getInstance(url)
         .setData(formData)
@@ -67,7 +71,6 @@ export default {
           successCallback(data, element);
         })
         .send();
-      helper.message(inputValue);
     },
     search(event, vm) {
       let element = event.target;
@@ -75,7 +78,7 @@ export default {
       let formData = helper.getData(formWrapper);
       let inputValue = formData["text-input-value"];
       if (inputValue && inputValue.length < 2) {
-        helper.message(t("ncdownloader", "Please enter valid keyword!"));
+        helper.error(t("ncdownloader", "Please enter valid keyword!"));
         vm.$data.loading = 0;
         return;
       }

src/actions/buttonActions.js

@@ -29,7 +29,7 @@ const buttonHandler = (event, type) => {
         console.log(error);
     }).setHandler(function (data) {
         if (data.hasOwnProperty('error')) {
-            helper.message(data['error']);
+            helper.error(data['error']);
             return;
         }
         if (data.hasOwnProperty('result')) {

src/index.js

@@ -55,7 +55,7 @@ window.addEventListener('DOMContentLoaded', function () {
 
             if (!data.status) {
                 if (data.error)
-                    helper.message(data.error);
+                    helper.error(data.error);
                 return;
             }
             let element = document.querySelector("#start-aria2 button");

src/utils/helper.js

@@ -51,18 +51,60 @@ const helper = {
 
         return magnetURI.test(url.trim());
     },
-    message: function (message, duration = 3000) {
-        Toastify({
+    _message: function (message, options = {}) {
+        message = message || "Empty"
+        const defaults = {
             text: message,
-            duration: duration,
             newWindow: true,
             close: true,
             gravity: "top", // `top` or `bottom`
             position: "center", // `left`, `center` or `right`
-            backgroundColor: "#295b86",
+            // backgroundColor: "#295b86",
             stopOnFocus: true, // Prevents dismissing of toast on hover
-            onClick: function () { } // Callback after click
-        }).showToast();
+            onClick: function () { }, // Callback after click
+        }
+        Object.assign(defaults, options);
+        Toastify(defaults).showToast();
+    },
+    error: function (message, duration = 20000) {
+        let options = {
+            style: {
+                color: '#721c24',
+                'background-color': '#f8d7da',
+                'border-color': '#f5c6cb',
+            },
+            duration: duration,
+            backgroundColor: '#f8d7da',
+        }
+        helper._message(message, options);
+    },
+    info: function (message, duration = 2000) {
+        const options = {
+            style: {
+                color: '#004085',
+                'background-color': '#cce5ff',
+                'border-color': '#b8daff',
+            },
+            duration: duration,
+            text: message,
+            backgroundColor: '#cce5ff',
+        }
+        helper._message(message, options);
+    },
+    warn: function (message, duration = 2000) {
+        const options = {
+            style: {
+                color: '#856404',
+                'background-color': '#fff3cd',
+                'border-color': '#ffeeba',
+            },
+            duration: duration,
+            backgroundColor: '#fff3cd',
+        }
+        helper._message(message, options);
+    },
+    message: function (message, duration = 2000) {
+        helper.info(message, duration);
     },
     getPathLast: function (path) {
         return path.substring(path.lastIndexOf('/') + 1)
@@ -182,7 +224,7 @@ const helper = {
         errors.forEach(element => {
             let msg;
             if (msg = element.getAttribute('data-error-message'))
-                helper.message(msg, 20000);
+                helper.error(msg, 20000);
         })
     },
     str2Boolean: function (str) {
@@ -204,6 +246,9 @@ const helper = {
             default:
                 return Boolean(str);
         }
+    },
+    t: function (str) {
+       return t("ncdownloader", str);
     }
 }