A new update to the dev branch

src/static/css/dashboard.css

@@ -764,9 +764,14 @@ pre.index-alert {
     }
 }
 
+.toastContainer{
+    z-index: 99999 !important;
+}
+
 .toast{
     min-width: 300px;
     background-color: rgba(255,255,255,1);
+    z-index: 99999;
 }
 
 .toast-header{

src/static/css/theme/dark.css

@@ -10,6 +10,10 @@ body {
   color: hsl(0deg, 0%, 80%);
 }
 
+a.text-primary:focus, a.text-primary:hover {
+  color: hsl(235deg, 60%, 50%) !important;
+}
+
 .btn-primary {
   color: hsl(0deg, 0%, 90%) !important;
   border-color: hsl(235deg, 60%, 60%) !important;
@@ -332,9 +336,15 @@ div.toast div.toast-body {
   background-color: #383838 !important;
   color: hsl(0deg, 0%, 80%) !important;
 }
+div.toast div.toast-body.text-danger {
+  color: hsl(0deg, 60%, 60%) !important;
+}
 div.toast div.toast-progressbar {
   background-color: hsl(235deg, 60%, 60%) !important;
 }
+div.toast div.toast-progressbar.bg-danger {
+  background-color: hsl(0deg, 60%, 60%) !important;
+}
 
 .bs-popover-auto[x-placement^=right] > .arrow::after,
 .bs-popover-right > .arrow::after {

src/static/css/theme/dark.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["dark.scss"],"names":[],"mappings":"AAgCA;EACE;EACA;EACA;EACA;;;AAGF;EACE,YAvCS;EAwCT,OAdS;;;AAkBX;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE,kBAtFS;EAuFT,cAvFS;EAwFT;;AAEA;EACE,kBAxFO;EAyFP,cAzFO;EA0FP;;;AAMJ;EACE,kBAxFQ;;AAyFR;EACE,kBA3FM;;;AAiGN;EACE,kBAjGI;EAkGJ,QAlGI;;AAoGJ;EACE,kBAtGE;EAuGF,QAvGE;;;AA+GN;EACE,kBA5GK;EA6GL,QA7GK;;AA+GL;EACE,kBAjHG;EAkHH,QAlHG;;;AAwHX;EACE,kBAxHS;;AAyHT;EACE,kBA3HO;;;AA+HX;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAKF;EACE;;AACA;EACE;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAKN;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAIA;EACE,OAhQO;;AAkQT;EACE,cAnQO;;;AAuQX;AAAA;EAEE,OAhQS;;AAkQT;AAAA;EACE,YA7RO;;;AAiSX;AAAA;AAAA;EAGE;EACA;;;AAGF;EACE,YAvSS;;;AA0SX;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE,cAzUU;;;AA4UZ;EACE;;;AAEF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE,cAjWS;;;AAoWX;EACE,kBAzWS;;;AA4WX;AAAA;EAEE,kBA/WS;EAgXT,cA3WS;;;AA8WX;EACE,OA5VY;;;AA+Vd;EACE,OA7VS;EA8VT;;AAEA;EACE,OAhWO;;;AAoWX;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;;AAIJ;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;AAEA;AAAA;EAEE;;;AAKJ;EACE;;;AAIA;EACE;;AAIA;EACE,OAraK;;AAyaT;EACE;;AAGF;EACE;;;AAKJ;EACE,OA/bS","file":"dark.css"}
+{"version":3,"sourceRoot":"","sources":["dark.scss"],"names":[],"mappings":"AAgCA;EACE;EACA;EACA;EACA;;;AAGF;EACE,YAvCS;EAwCT,OAdS;;;AAiBX;EACE;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE,kBAzFS;EA0FT,cA1FS;EA2FT;;AAEA;EACE,kBA3FO;EA4FP,cA5FO;EA6FP;;;AAMJ;EACE,kBA3FQ;;AA4FR;EACE,kBA9FM;;;AAoGN;EACE,kBApGI;EAqGJ,QArGI;;AAuGJ;EACE,kBAzGE;EA0GF,QA1GE;;;AAkHN;EACE,kBA/GK;EAgHL,QAhHK;;AAkHL;EACE,kBApHG;EAqHH,QArHG;;;AA2HX;EACE,kBA3HS;;AA4HT;EACE,kBA9HO;;;AAkIX;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAKF;EACE;;AACA;EACE;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAKN;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAIA;EACE,OAnQO;;AAqQT;EACE,cAtQO;;;AA0QX;AAAA;EAEE,OAnQS;;AAqQT;AAAA;EACE,YAhSO;;;AAoSX;AAAA;AAAA;EAGE;EACA;;;AAGF;EACE,YA1SS;;;AA6SX;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE,cA5UU;;;AA+UZ;EACE;;;AAEF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE,cApWS;;;AAuWX;EACE,kBA5WS;;;AA+WX;AAAA;EAEE,kBAlXS;EAmXT,cA9WS;;;AAiXX;EACE,OA/VY;;;AAkWd;EACE,OAhWS;EAiWT;;AAEA;EACE,OAnWO;;;AAuWX;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;AAEA;AAAA;EAEE;;;AAKJ;EACE;;;AAIA;EACE;;AAIA;EACE,OAhbK;;AAobT;EACE;;AAGF;EACE;;;AAKJ;EACE,OA1cS","file":"dark.css"}

src/static/css/theme/dark.min.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["dark.scss"],"names":[],"mappings":"AAgCA,MACE,0CACA,yCACA,sCACA,4CAGF,KACE,WAvCS,KAwCT,MAdS,KAkBX,aACE,yBACA,gCACA,8BAEA,mBACE,oCACA,gCAIJ,qBACE,yBACA,gCACA,oCAEA,uDAEE,yBAGF,4BACE,oCACA,gCAGF,2BACE,oCACA,gCAIJ,aACE,yBACA,gCACA,8BAEA,mBACE,oCACA,gCAIJ,iBACE,iBAtFS,QAuFT,aAvFS,QAwFT,WAEA,uBACE,iBAxFO,KAyFP,aAzFO,KA0FP,WAMJ,qCACE,iBAxFQ,QAyFR,2CACE,iBA3FM,KAiGN,wCACE,iBAjGI,QAkGJ,OAlGI,QAoGJ,8CACE,iBAtGE,KAuGF,OAvGE,KA+GN,yCACE,iBA5GK,QA6GL,OA7GK,QA+GL,+CACE,iBAjHG,QAkHH,OAlHG,QAwHX,kCACE,iBAxHS,QAyHT,wCACE,iBA3HO,QA+HX,qBACE,yBACA,gCACA,oCAEA,uDAEE,yBAGF,4BACE,oCACA,gCAGF,2BACE,oCACA,gCAIJ,YACE,yBACA,gCACA,8BAEA,kBACE,iCACA,6BAIJ,oBACE,yBACA,gCACA,oCAEA,qDAEE,yBAGF,2BACE,oCACA,gCAGF,0BACE,iCACA,6BAIJ,eACE,yBACA,gCACA,8BAEA,qBACE,oCACA,gCAIJ,uBACE,yBACA,gCACA,oCAEA,2DAEE,yBAGF,8BACE,oCACA,gCAGF,6BACE,oCACA,gCAKF,gCACE,yBACA,sCACE,sBAIJ,mBACE,0CAEA,uCACE,yBAGF,uCACE,yBAGF,sCACE,sBAGF,yCACE,yBAKN,cACE,oCACA,sCACA,sBAGF,uBACE,sBAGF,oBACE,8BAIA,aACE,MAhQO,QAkQT,iBACE,aAnQO,QAuQX,iDAEE,MAhQS,KAkQT,6DACE,WA7RO,KAiSX,8FAGE,oCACA,8BAGF,MACE,WAvSS,QA0SX,YACE,sBAGF,aACE,yBAGF,cACE,yBAGF,cACE,yBAGF,WACE,yBAGF,0CAEE,yBAGF,wCAEE,sBAGF,oCAEE,yBAGF,aACE,oCAGF,cACE,aAzUU,QA4UZ,6CACE,oCAEF,qCACE,oCACA,gCAGF,+DAEE,yBAGF,GACE,aAjWS,QAoWX,eACE,iBAzWS,KA4WX,4BAEE,iBA/WS,QAgXT,aA3WS,QA8WX,KACE,MA5VY,QA+Vd,OACE,MA7VS,KA8VT,iBAEA,aACE,MAhWO,QAoWX,2BACE,iCAGF,SACE,iCACA,uBAGF,cACE,sBAGF,UACE,oCAEA,2BACE,iCACA,sBACA,uCAGF,yBACE,oCACA,sBAGF,gCACE,oCAIJ,mFAEE,mCAGF,oCACE,oCAGF,0BACE,iCAGF,OACE,sBAEA,oBAEE,6BAKJ,4FACE,wDAIA,WACE,oCAIA,4BACE,MAraK,KAyaT,mCACE,yBAGF,mBACE,oCAKJ,WACE,MA/bS","file":"dark.min.css"}
+{"version":3,"sourceRoot":"","sources":["dark.scss"],"names":[],"mappings":"AAgCA,MACE,0CACA,yCACA,sCACA,4CAGF,KACE,WAvCS,KAwCT,MAdS,KAiBX,0CACE,yBAGF,aACE,yBACA,gCACA,8BAEA,mBACE,oCACA,gCAIJ,qBACE,yBACA,gCACA,oCAEA,uDAEE,yBAGF,4BACE,oCACA,gCAGF,2BACE,oCACA,gCAIJ,aACE,yBACA,gCACA,8BAEA,mBACE,oCACA,gCAIJ,iBACE,iBAzFS,QA0FT,aA1FS,QA2FT,WAEA,uBACE,iBA3FO,KA4FP,aA5FO,KA6FP,WAMJ,qCACE,iBA3FQ,QA4FR,2CACE,iBA9FM,KAoGN,wCACE,iBApGI,QAqGJ,OArGI,QAuGJ,8CACE,iBAzGE,KA0GF,OA1GE,KAkHN,yCACE,iBA/GK,QAgHL,OAhHK,QAkHL,+CACE,iBApHG,QAqHH,OArHG,QA2HX,kCACE,iBA3HS,QA4HT,wCACE,iBA9HO,QAkIX,qBACE,yBACA,gCACA,oCAEA,uDAEE,yBAGF,4BACE,oCACA,gCAGF,2BACE,oCACA,gCAIJ,YACE,yBACA,gCACA,8BAEA,kBACE,iCACA,6BAIJ,oBACE,yBACA,gCACA,oCAEA,qDAEE,yBAGF,2BACE,oCACA,gCAGF,0BACE,iCACA,6BAIJ,eACE,yBACA,gCACA,8BAEA,qBACE,oCACA,gCAIJ,uBACE,yBACA,gCACA,oCAEA,2DAEE,yBAGF,8BACE,oCACA,gCAGF,6BACE,oCACA,gCAKF,gCACE,yBACA,sCACE,sBAIJ,mBACE,0CAEA,uCACE,yBAGF,uCACE,yBAGF,sCACE,sBAGF,yCACE,yBAKN,cACE,oCACA,sCACA,sBAGF,uBACE,sBAGF,oBACE,8BAIA,aACE,MAnQO,QAqQT,iBACE,aAtQO,QA0QX,iDAEE,MAnQS,KAqQT,6DACE,WAhSO,KAoSX,8FAGE,oCACA,8BAGF,MACE,WA1SS,QA6SX,YACE,sBAGF,aACE,yBAGF,cACE,yBAGF,cACE,yBAGF,WACE,yBAGF,0CAEE,yBAGF,wCAEE,sBAGF,oCAEE,yBAGF,aACE,oCAGF,cACE,aA5UU,QA+UZ,6CACE,oCAEF,qCACE,oCACA,gCAGF,+DAEE,yBAGF,GACE,aApWS,QAuWX,eACE,iBA5WS,KA+WX,4BAEE,iBAlXS,QAmXT,aA9WS,QAiXX,KACE,MA/VY,QAkWd,OACE,MAhWS,KAiWT,iBAEA,aACE,MAnWO,QAuWX,2BACE,iCAGF,SACE,iCACA,uBAGF,cACE,sBAGF,UACE,oCAEA,2BACE,iCACA,sBACA,uCAGF,yBACE,oCACA,sBAGF,qCACE,yBAGF,gCACE,oCAGF,0CACE,oCAIJ,mFAEE,mCAGF,oCACE,oCAGF,0BACE,iCAGF,OACE,sBAEA,oBAEE,6BAKJ,4FACE,wDAIA,WACE,oCAIA,4BACE,MAhbK,KAobT,mCACE,yBAGF,mBACE,oCAKJ,WACE,MA1cS","file":"dark.min.css"}

src/static/css/theme/dark.scss

@@ -42,6 +42,9 @@ body {
   color: $text-200;
 }
 
+a.text-primary:focus, a.text-primary:hover{
+  color: $blue-400 !important;
+}
 
 .btn-primary {
   color: $text-100 !important;
@@ -409,9 +412,17 @@ div.toast {
     color: $text-200 !important;
   }
 
+  div.toast-body.text-danger{
+    color: $red-500 !important;
+  }
+
   div.toast-progressbar {
     background-color: $blue-500 !important;
   }
+
+  div.toast-progressbar.bg-danger {
+    background-color: $red-500 !important;
+  }
 }
 
 .bs-popover-auto[x-placement^="right"] > .arrow::after,

src/static/js/configuration.js

@@ -618,7 +618,7 @@ let peers = [];
                             $("#add_peer_form").trigger("reset");
                             $add_peer.removeAttribute("disabled");
                             $add_peer.innerHTML = "Save";
-                            configurations.showToast($new_add_amount.val() + " peers added successful!");
+                            showToast($new_add_amount.val() + " peers added successful!");
                             configurations.addModal().toggle();
                         }
                     }
@@ -671,7 +671,7 @@ let peers = [];
                         configurations.deleteBulkModal().toggle();
                     }
                     configurations.loadPeers($('#search_peer_textbox').val());
-                    configurations.showToast(`Deleted ${peer_ids.length} peers`)
+                    showToast(`Deleted ${peer_ids.length} peers`)
                     $("#delete_peer").removeAttr("disabled").html("Delete");
                 }
             }
@@ -847,30 +847,6 @@ let peers = [];
         document.querySelector("#enable_preshare_key").value = keys.presharedKey;
     }
 
-    /**
-     * Show toast
-     * @param msg
-     */
-    let numberToast = 0;
-    function showToast(msg) {
-        $(".toastContainer").append(
-            `<div id="${numberToast}-toast" class="toast hide" role="alert" data-delay="5000">
-				<div class="toast-header">
-					<strong class="mr-auto">WGDashboard</strong>
-					<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
-						<span aria-hidden="true">&times;</span>
-					</button>
-				</div>
-				<div class="toast-body">${msg}</div>
-				<div class="toast-progressbar"></div>
-			</div>` )
-        $(`#${numberToast}-toast`).toast('show');
-        $(`#${numberToast}-toast .toast-body`).html(msg);
-        $(`#${numberToast}-toast .toast-progressbar`).css("transition", `width ${$(`#${numberToast}-toast .toast-progressbar`).parent().data('delay')}ms cubic-bezier(0, 0, 0, 0)`);
-        $(`#${numberToast}-toast .toast-progressbar`).css("width", "0px");
-        numberToast++;
-    }
-
     /**
      * Update peer's refresh interval
      * @param res
@@ -980,7 +956,23 @@ let peers = [];
 
     function getConfigurationDetails() {
         function done(res){
-            console.log(res);
+            console.log(res.data);
+            $("#editConfigurationName").text(configuration_name);
+            $("#editConfigurationAddress").text(res.data.Address);
+            $("#editConfigurationPrivateKey").text(res.data.PrivateKey);
+            $("#editConfigurationListenPort").val(res.data.ListenPort);
+            if (res.data.PostUp){
+                $("#editConfigurationPostUp").val(res.data.PostUp)
+            }
+            if (res.data.PostDown){
+                $("#editConfigurationPostDown").val(res.data.PostDown)
+            }
+            if (res.data.PreUp){
+                $("#editConfigurationPreUp").val(res.data.PreUp)
+            }
+            if (res.data.PreDown){
+                $("#editConfigurationPreDown").val(res.data.PreDown)
+            }
         }
         ajaxGetJSON(`/api/getConfigurationInfo?configName=${configuration_name}`, done)
     }

src/static/js/configurationTool.js

@@ -122,6 +122,35 @@ $editConfiguration.on("click", function(){
     configurations.configurationEditModal().toggle();
 });
 
+$saveConfiguration = $("#editConfigurationBtn");
+$saveConfiguration.on("click", function(){
+    $(this).html("Saving...")
+    $(this).siblings().hide();
+    $(this).attr("disabled", "disabled");
+
+    let data = {
+        "configurationName": configurations.getConfigurationName(),
+        "ListenPort": $("#editConfigurationListenPort").val(),
+        "PostUp": $("#editConfigurationPostUp").val(),
+        "PostDown": $("#editConfigurationPostDown").val(),
+        "PreDown": $("#editConfigurationPreDown").val(),
+        "PreUp": $("#editConfigurationPreUp").val(),
+    }
+    function done(res){
+        console.log(res);
+        $saveConfiguration.removeAttr("disabled");
+        if (res.status){
+            configurations.configurationEditModal().toggle();
+            configurations.loadPeers("");
+            showToast("Configuration saved");
+        }else{
+            showToast(res.reason);
+        }
+        $saveConfiguration.html("Save");
+        $saveConfiguration.siblings().show();
+    }
+    ajaxPostJSON("/api/saveConfiguration", data, done);
+})
 
 /**
  * ==========
@@ -150,9 +179,9 @@ $(".toggle--switch").on("change", function(){
     }).done(function(res){
         if (res.status){
             if (status){
-                configurations.showToast(`${id} is running.`)
+                showToast(`${id} is running.`)
             }else{
-                configurations.showToast(`${id} is stopped.`)
+                showToast(`${id} is stopped.`)
             }
         }else{
             if (status){
@@ -160,7 +189,7 @@ $(".toggle--switch").on("change", function(){
             }else{
                 ele.prop("checked", true)
             }
-            configurations.showToast(res.reason);
+            showToast(res.reason, true);
             $(".index-alert").removeClass("d-none").text(`Configuration toggle failed. Please check the following error message:\n${res.message}`);
         }
         ele.removeClass("waiting");
@@ -283,7 +312,7 @@ $add_peer.addEventListener("click", function() {
                         $("#add_peer_form").trigger("reset");
                         $add_peer.removeAttribute("disabled");
                         $add_peer.innerHTML = "Save";
-                        configurations.showToast("Add peer successful!");
+                        showToast("Add peer successful!");
                         configurations.addModal().toggle();
                     }
                 }
@@ -447,12 +476,12 @@ $body.on("click", ".btn-lock-peer", function() {
     configurations.toggleAccess($(this).data('peer-id'), configurations.getConfigurationName());
     if ($(this).hasClass("lock")) {
         console.log($(this).data("peer-name"))
-        configurations.showToast(`Enabled ${$(this).children().data("peer-name")}`)
+        showToast(`Enabled ${$(this).children().data("peer-name")}`)
         $(this).removeClass("lock")
         $(this).children().tooltip('hide').attr('data-original-title', 'Peer enabled. Click to disable peer.').tooltip('show');
     } else {
         // Currently unlocked
-        configurations.showToast(`Disabled ${$(this).children().data("peer-name")}`)
+        showToast(`Disabled ${$(this).children().data("peer-name")}`)
         $(this).addClass("lock");
         $(this).children().tooltip('hide').attr('data-original-title', 'Peer disabled. Click to enable peer.').tooltip('show');
     }
@@ -706,12 +735,12 @@ $body.on("click", ".display_mode", function() {
         Array($(".peer_list").children()).forEach(function(child) {
             $(child).removeClass().addClass("col-12");
         });
-        configurations.showToast("Displaying as List");
+        showToast("Displaying as List");
     } else {
         Array($(".peer_list").children()).forEach(function(child) {
             $(child).removeClass().addClass("col-sm-6 col-lg-4");
         });
-        configurations.showToast("Displaying as Grids");
+        showToast("Displaying as Grids");
     }
 });
 
@@ -891,9 +920,9 @@ $("#download_all_peers").on("click", function() {
         success: function(res) {
             if (res.peers.length > 0) {
                 window.wireguard.generateZipFiles(res);
-                configurations.showToast("Peers' zip file download successful!");
+                showToast("Peers' zip file download successful!");
             } else {
-                configurations.showToast("Oops! There are no peer can be download.");
+                showToast("Oops! There are no peer can be download.");
             }
         }
     });

src/static/js/index.js

@@ -1,4 +1,3 @@
-let numberToast = 0;
 let emptyInputFeedback = "Can't leave empty";
 $('[data-toggle="tooltip"]').tooltip()
 let $add_configuration = $("#add_configuration");
@@ -19,25 +18,6 @@ addConfigurationModal.on("hidden.bs.modal", function(){
     $(".addConfigurationAvailableIPs").text("N/A");
 });
 
-function showToast(msg){
-    $(".toastContainer").append(
-        `<div id="${numberToast}-toast" class="toast hide" role="alert" data-delay="5000">
-            <div class="toast-header">
-                <strong class="mr-auto">WGDashboard</strong>
-                <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                </button>
-            </div>
-            <div class="toast-body">${msg}</div>
-            <div class="toast-progressbar"></div>
-        </div>` );
-    $(`#${numberToast}-toast`).toast('show');
-    $(`#${numberToast}-toast .toast-body`).html(msg);
-    $(`#${numberToast}-toast .toast-progressbar`).css("transition", `width ${$(`#${numberToast}-toast .toast-progressbar`).parent().data('delay')}ms cubic-bezier(0, 0, 0, 0)`);
-    $(`#${numberToast}-toast .toast-progressbar`).css("width", "0px");
-    numberToast++;
-}
-
 $(".toggle--switch").on("change", function(){
     $(this).addClass("waiting").attr("disabled", "disabled");
     let id = $(this).data("conf-id");
@@ -59,6 +39,7 @@ $(".toggle--switch").on("change", function(){
             }
         }else{
             ele.parents().children(".card-message").html(`<pre class="index-alert">Configuration toggle failed. Please check the following error message:<br><code>${res.message}</code></pre>`)
+            showToast(`${id} toggled failed.`, true);
             if (status){
                 ele.prop("checked", false)
             }else{
@@ -70,8 +51,18 @@ $(".toggle--switch").on("change", function(){
 });
 
 $(".sb-home-url").addClass("active");
+
 $(".card-body").on("click", function(handle){
     if ($(handle.target).attr("class") !== "toggleLabel" && $(handle.target).attr("class") !== "toggle--switch") {
+        let c = $(".card");
+        for (let i of c){
+            if (i != $(this).parent()[0]){
+                $(i).css("transition", "ease-in-out 0.3s").css("opacity", "0.5")
+            }
+        }
+        
+
+
         window.open($(this).find("a").attr("href"), "_self");
     }
 });

src/static/js/settings.js

@@ -0,0 +1,60 @@
+$(".sb-settings-url").addClass("active")
+$(".confirm_modal").click(function () {
+    $(".app_new_ip").html($("#app_ip")[0].value)
+    $(".app_new_port").html($("#app_port")[0].value)
+})
+
+$(".confirm_restart").click(function () {
+    $(".cancel_restart").remove()
+    countdown = 7;
+    $.post('/update_app_ip_port', $('.update_app_ip_port').serialize())
+    url = $("#app_ip")[0].value + ":" + $("#app_port")[0].value;
+    $(".confirm_restart").attr("disabled", "disabled")
+    setInterval(function () {
+        if (countdown === 0) {
+            window.location.replace("http://" + url);
+        }
+        $(".confirm_restart").html("Redirecting you in " + countdown + " seconds.")
+        countdown--;
+    }, 1000)
+});
+
+$(".change_path").click(function () {
+    $(this).attr("disabled", "disabled");
+    countdown = 5;
+    setInterval(function () {
+        if (countdown === 0) {
+            location.reload()
+        }
+        $(".change_path").html("Redirecting you in " + countdown + " seconds.")
+        countdown--;
+    }, 1000)
+    $.post('/update_wg_conf_path', $('.update_wg_conf_path').serialize())
+});
+
+$(".bottomNavSettings").addClass("active");
+
+
+$(".theme-switch-btn").on("click", function(){
+    if (!$(this).hasClass("active")){
+        let theme = $(this).data("theme");
+        $(".theme-switch-btn").removeClass("active");
+        $(this).addClass("active");
+        $.ajax({
+            method: "POST",
+            url: "/api/settings/setTheme",
+            headers: {"Content-Type": "application/json"},
+            data: JSON.stringify({"theme": theme})
+        }).done(function(res){
+            if (res.status == true){
+                if (theme == "light"){
+                    $("#darkThemeCSS").remove();
+                    showToast("Switched to light theme");
+                }else{
+                    $("head").append('<link rel="stylesheet" type="text/css" href="/static/css/theme/dark.min.css" id="darkThemeCSS">');
+                    showToast("Switched to dark theme");
+                }
+            }
+        });
+    }
+});

src/static/js/settings.min.js

@@ -0,0 +1 @@
+$(".sb-settings-url").addClass("active");$(".confirm_modal").click(function(){$(".app_new_ip").html($("#app_ip")[0].value);$(".app_new_port").html($("#app_port")[0].value)});$(".confirm_restart").click(function(){$(".cancel_restart").remove();countdown=7;$.post("/update_app_ip_port",$(".update_app_ip_port").serialize());url=$("#app_ip")[0].value+":"+$("#app_port")[0].value;$(".confirm_restart").attr("disabled","disabled");setInterval(function(){if(countdown===0){window.location.replace("http://"+url)}$(".confirm_restart").html("Redirecting you in "+countdown+" seconds.");countdown--},1e3)});$(".change_path").click(function(){$(this).attr("disabled","disabled");countdown=5;setInterval(function(){if(countdown===0){location.reload()}$(".change_path").html("Redirecting you in "+countdown+" seconds.");countdown--},1e3);$.post("/update_wg_conf_path",$(".update_wg_conf_path").serialize())});$(".bottomNavSettings").addClass("active");$(".theme-switch-btn").on("click",function(){if(!$(this).hasClass("active")){let theme=$(this).data("theme");$(".theme-switch-btn").removeClass("active");$(this).addClass("active");$.ajax({method:"POST",url:"/api/settings/setTheme",headers:{"Content-Type":"application/json"},data:JSON.stringify({theme:theme})}).done(function(res){if(res.status==true){if(theme=="light"){$("#darkThemeCSS").remove();showToast("Switched to light theme")}else{$("head").append('<link rel="stylesheet" type="text/css" href="/static/css/theme/dark.min.css" id="darkThemeCSS">');showToast("Switched to dark theme")}}})}});

src/static/js/tools.js

@@ -64,4 +64,27 @@ $(".send_traceroute").on("click", function (){
             $("#traceroute_modal .form-control").removeAttr("disabled");
         }
     });
-});
+});
+let numberToast = 0;
+function showToast(msg, isDanger = false) {
+    $(".toastContainer").append(
+        `<div id="${numberToast}-toast" class="toast hide animate__animated animate__fadeInUp" role="alert" data-delay="5000">
+            <div class="toast-header">
+                <strong class="mr-auto">WGDashboard</strong>
+                <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="toast-body ${isDanger ? 'text-danger':''}">${msg}</div>
+            <div class="toast-progressbar ${isDanger ? 'bg-danger':''}"></div>
+        </div>` )
+    $(`#${numberToast}-toast`).toast('show');
+    $(`#${numberToast}-toast .toast-body`).html(msg);
+    $(`#${numberToast}-toast .toast-progressbar`).css("transition", `width ${$(`#${numberToast}-toast .toast-progressbar`).parent().data('delay')}ms cubic-bezier(0, 0, 0, 0)`);
+    $(`#${numberToast}-toast .toast-progressbar`).css("width", "0px");
+    let i = numberToast;
+    setTimeout(function(){
+        $(`#${i}-toast`).removeClass("animate__fadeInUp").addClass("animate__fadeOutRight")
+    }, 4500)
+    numberToast++;
+}

src/static/js/tools.min.js

@@ -1 +1,10 @@
-$(".ip_dropdown").on("change",function(){$(".modal.show .btn").removeAttr("disabled")});$(".conf_dropdown").on("change",function(){$(".modal.show .ip_dropdown").html('<option value="none" selected="selected" disabled>Loading...');$.ajax({url:"/get_ping_ip",method:"POST",data:"config="+$(this).children("option:selected").val(),success:function(res){$(".modal.show .ip_dropdown").html("");$(".modal.show .ip_dropdown").append('<option value="none" selected="selected" disabled>Choose an IP');$(".modal.show .ip_dropdown").append(res)}})});$(".send_ping").on("click",function(){$(this).attr("disabled","disabled");$(this).html("Pinging...");$("#ping_modal .form-control").attr("disabled","disabled");$.ajax({method:"POST",data:"ip="+$(":selected",$("#ping_modal .ip_dropdown")).val()+"&count="+$("#ping_modal .ping_count").val(),url:"/ping_ip",success:function(res){$(".ping_result tbody").html("");let html='<tr><th scope="row">Address</th><td>'+res.address+"</td></tr>"+'<tr><th scope="row">Is Alive</th><td>'+res.is_alive+"</td></tr>"+'<tr><th scope="row">Min RTT</th><td>'+res.min_rtt+"ms</td></tr>"+'<tr><th scope="row">Average RTT </th><td>'+res.avg_rtt+"ms</td></tr>"+'<tr><th scope="row">Max RTT</th><td>'+res.max_rtt+"ms</td></tr>"+'<tr><th scope="row">Package Sent</th><td>'+res.package_sent+"</td></tr>"+'<tr><th scope="row">Package Received</th><td>'+res.package_received+"</td></tr>"+'<tr><th scope="row">Package Loss</th><td>'+res.package_loss+"</td></tr>";$(".ping_result tbody").html(html);$(".send_ping").removeAttr("disabled");$(".send_ping").html("Ping");$("#ping_modal .form-control").removeAttr("disabled")}})});$(".send_traceroute").on("click",function(){$(this).attr("disabled","disabled");$(this).html("Tracing...");$("#traceroute_modal .form-control").attr("disabled","disabled");$.ajax({url:"/traceroute_ip",method:"POST",data:"ip="+$(":selected",$("#traceroute_modal .ip_dropdown")).val(),success:function(res){$(".traceroute_result tbody").html("");res.forEach(ele=>$(".traceroute_result tbody").append('<tr><th scope="row">'+ele.hop+"</th><td>"+ele.ip+"</td><td>"+ele.avg_rtt+"</td><td>"+ele.min_rtt+"</td><td>"+ele.max_rtt+"</td></tr>"));$(".send_traceroute").removeAttr("disabled").html("Traceroute");$("#traceroute_modal .form-control").removeAttr("disabled")}})});
+$(".ip_dropdown").on("change",function(){$(".modal.show .btn").removeAttr("disabled")});$(".conf_dropdown").on("change",function(){$(".modal.show .ip_dropdown").html('<option value="none" selected="selected" disabled>Loading...');$.ajax({url:"/get_ping_ip",method:"POST",data:"config="+$(this).children("option:selected").val(),success:function(res){$(".modal.show .ip_dropdown").html("");$(".modal.show .ip_dropdown").append('<option value="none" selected="selected" disabled>Choose an IP');$(".modal.show .ip_dropdown").append(res)}})});$(".send_ping").on("click",function(){$(this).attr("disabled","disabled");$(this).html("Pinging...");$("#ping_modal .form-control").attr("disabled","disabled");$.ajax({method:"POST",data:"ip="+$(":selected",$("#ping_modal .ip_dropdown")).val()+"&count="+$("#ping_modal .ping_count").val(),url:"/ping_ip",success:function(res){$(".ping_result tbody").html("");let html='<tr><th scope="row">Address</th><td>'+res.address+"</td></tr>"+'<tr><th scope="row">Is Alive</th><td>'+res.is_alive+"</td></tr>"+'<tr><th scope="row">Min RTT</th><td>'+res.min_rtt+"ms</td></tr>"+'<tr><th scope="row">Average RTT </th><td>'+res.avg_rtt+"ms</td></tr>"+'<tr><th scope="row">Max RTT</th><td>'+res.max_rtt+"ms</td></tr>"+'<tr><th scope="row">Package Sent</th><td>'+res.package_sent+"</td></tr>"+'<tr><th scope="row">Package Received</th><td>'+res.package_received+"</td></tr>"+'<tr><th scope="row">Package Loss</th><td>'+res.package_loss+"</td></tr>";$(".ping_result tbody").html(html);$(".send_ping").removeAttr("disabled");$(".send_ping").html("Ping");$("#ping_modal .form-control").removeAttr("disabled")}})});$(".send_traceroute").on("click",function(){$(this).attr("disabled","disabled");$(this).html("Tracing...");$("#traceroute_modal .form-control").attr("disabled","disabled");$.ajax({url:"/traceroute_ip",method:"POST",data:"ip="+$(":selected",$("#traceroute_modal .ip_dropdown")).val(),success:function(res){$(".traceroute_result tbody").html("");res.forEach(ele=>$(".traceroute_result tbody").append('<tr><th scope="row">'+ele.hop+"</th><td>"+ele.ip+"</td><td>"+ele.avg_rtt+"</td><td>"+ele.min_rtt+"</td><td>"+ele.max_rtt+"</td></tr>"));$(".send_traceroute").removeAttr("disabled").html("Traceroute");$("#traceroute_modal .form-control").removeAttr("disabled")}})});let numberToast=0;function showToast(msg,isDanger=false){$(".toastContainer").append(`<div id="${numberToast}-toast" class="toast hide animate__animated animate__fadeInUp" role="alert" data-delay="5000">
+            <div class="toast-header">
+                <strong class="mr-auto">WGDashboard</strong>
+                <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="toast-body ${isDanger?"text-danger":""}">${msg}</div>
+            <div class="toast-progressbar ${isDanger?"bg-danger":""}"></div>
+        </div>`);$(`#${numberToast}-toast`).toast("show");$(`#${numberToast}-toast .toast-body`).html(msg);$(`#${numberToast}-toast .toast-progressbar`).css("transition",`width ${$(`#${numberToast}-toast .toast-progressbar`).parent().data("delay")}ms cubic-bezier(0, 0, 0, 0)`);$(`#${numberToast}-toast .toast-progressbar`).css("width","0px");let i=numberToast;setTimeout(function(){$(`#${i}-toast`).removeClass("animate__fadeInUp").addClass("animate__fadeOutRight")},4500);numberToast++}