Toastr support

server/resources/package-lock.json

@@ -46,6 +46,7 @@
         "style-loader": "^1.3.0",
         "terser-webpack-plugin": "^4.2.3",
         "time-input-polyfill": "^1.0.9",
+        "toastr": "^2.1.4",
         "webpack": "^5.24.2",
         "webpack-assets-manifest": "^3.1.1",
         "webpack-inject-plugin": "^1.5.5",
@@ -5574,6 +5575,14 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/toastr": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/toastr/-/toastr-2.1.4.tgz",
+      "integrity": "sha1-i0O+ZPudDEFIcURvLbjoyk6V8YE=",
+      "dependencies": {
+        "jquery": ">=1.12.0"
+      }
+    },
     "node_modules/totalist": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/totalist/-/totalist-1.1.0.tgz",
@@ -10498,6 +10507,14 @@
         "is-number": "^7.0.0"
       }
     },
+    "toastr": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/toastr/-/toastr-2.1.4.tgz",
+      "integrity": "sha1-i0O+ZPudDEFIcURvLbjoyk6V8YE=",
+      "requires": {
+        "jquery": ">=1.12.0"
+      }
+    },
     "totalist": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/totalist/-/totalist-1.1.0.tgz",

server/resources/package.json

@@ -48,6 +48,7 @@
     "style-loader": "^1.3.0",
     "terser-webpack-plugin": "^4.2.3",
     "time-input-polyfill": "^1.0.9",
+    "toastr": "^2.1.4",
     "webpack": "^5.24.2",
     "webpack-assets-manifest": "^3.1.1",
     "webpack-inject-plugin": "^1.5.5",

server/resources/src/main.js

@@ -10,6 +10,26 @@ import '../node_modules/bootstrap-toggle/js/bootstrap-toggle.js';
 import '../node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css';
 import 'time-input-polyfill/auto';
 import 'jquery-pjax';
+import toastr from 'toastr'
+import 'toastr/build/toastr.css';
+window.toastr = toastr;
+toastr.options = {
+  "closeButton": false,
+  "debug": false,
+  "newestOnTop": false,
+  "progressBar": true,
+  "positionClass": "toast-bottom-right",
+  "preventDuplicates": false,
+  "onclick": null,
+  "showDuration": "300",
+  "hideDuration": "1000",
+  "timeOut": "5000",
+  "extendedTimeOut": "1000",
+  "showEasing": "swing",
+  "hideEasing": "linear",
+  "showMethod": "fadeIn",
+  "hideMethod": "fadeOut"
+}
 
 console.log("Commit: "+process.env.GIT_VERSION);
 console.log("Date: "+process.env.GIT_AUTHOR_DATE);

server/templates/list.html

@@ -30,7 +30,7 @@
         token_list: "{{ token_list }}"
       },
       success: function (data) {
-        alert(`{{ 'Thanks, %s, you have given %s in case of alert.'|t|format(user.name, '${generate_alert_string(id)}') }}`);
+        toastr.success(`{{ 'Thanks, %s, you have given %s in case of alert.'|t|format(user.name, '${generate_alert_string(id)}') }}`);
         clearInterval(window.loadTable_interval); //stop reloading
         loadTable({table_page: "list", use_custom_table_engine: "default"});
       }
@@ -47,7 +47,7 @@
         token_list: "{{ token_list }}"
       },
       success: function (data) {
-        alert(`{{ 'Thanks, %s, you have removed %s in case of alert.'|t|format(user.name, '${generate_alert_string(id)}') }}`);
+        toastr.success(`{{ 'Thanks, %s, you have removed %s in case of alert.'|t|format(user.name, '${generate_alert_string(id)}') }}`);
         clearInterval(window.loadTable_interval); //stop reloading
         loadTable({table_page: "list", use_custom_table_engine: "default"});
       }