Finished implementing add/delete config

src/static/css/dashboard.css

@@ -272,7 +272,6 @@ body {
 }
 
 .index-switch {
-    text-align: right;
     display: flex;
     align-items: center;
     justify-content: flex-end;
@@ -671,7 +670,7 @@ pre.index-alert {
 }
 
 #switch{
-    transition: all 350ms ease-in;
+    transition: all 200ms ease-in;
 }
 
 .toggle--switch{
@@ -686,7 +685,7 @@ pre.index-alert {
     position: relative;
     border: 2px solid #6c757d8c;
     border-radius: 100px;
-    transition: all 350ms ease-in;
+    transition: all 200ms ease-in;
     cursor: pointer;
     margin: 0;
 }
@@ -706,10 +705,15 @@ pre.index-alert {
     animation-name: off;
     animation-duration: 350ms;
     animation-fill-mode: forwards;
-    transition: all 350ms ease-in;
+    transition: all 200ms ease-in;
     cursor: pointer;
 }
 
+.toggleLabel:hover::before{
+    filter: brightness(1.2);
+}
+
+
 .toggle--switch:checked + .toggleLabel{
     background-color: #007bff17 !important;
     border: 2px solid #007bff8c;
@@ -787,4 +791,12 @@ pre.index-alert {
 #reGeneratePrivateKey{
     border-top-right-radius: 10px;
     border-bottom-right-radius: 10px;
-}
+}
+
+.addConfigurationToggleStatus.waiting{
+    opacity: 0.5;
+}
+
+/*.conf_card .card-body .row .card-col{*/
+/*    margin-bottom: 0.5rem;*/
+/*}*/

src/static/js/configuration.js

@@ -3,7 +3,6 @@
  * Under Apache-2.0 License
  */
 
-
 let peers = [];
 (function() {
     /**
@@ -37,6 +36,7 @@ let peers = [];
     let qrcodeModal = new bootstrap.Modal(document.getElementById('qrcode_modal'), bootstrapModalConfig);
     let settingModal = new bootstrap.Modal(document.getElementById('setting_modal'), bootstrapModalConfig);
     let deleteModal = new bootstrap.Modal(document.getElementById('delete_modal'), bootstrapModalConfig);
+    let configurationDeleteModal = new bootstrap.Modal(document.getElementById('configuration_delete_modal'), bootstrapModalConfig);
     $("[data-toggle='tooltip']").tooltip();
     $("[data-toggle='popover']").popover();
 
@@ -207,7 +207,7 @@ let peers = [];
                 setActiveConfigurationName();
                 window.history.pushState(null, null, `/configuration/${configuration_name}`);
                 $("title").text(`${configuration_name} | WGDashboard`);
-
+                $(".index-alert").addClass("d-none").text(``);
                 totalDataUsageChartObj.data.labels = [];
                 totalDataUsageChartObj.data.datasets[0].data = [];
                 totalDataUsageChartObj.data.datasets[1].data = [];
@@ -667,7 +667,7 @@ let peers = [];
     }
 
     function removeAllTooltips(){
-        $(".tooltip").remove()
+        $(".tooltip").remove();
     }
 
     function toggleAccess(peerID){
@@ -828,21 +828,30 @@ let peers = [];
         });
     }
 
+
+
+    function deleteConfiguration(){
+
+    }
+
     window.configurations = {
         addModal: () => { return addModal; },
         deleteBulkModal: () => { return deleteBulkModal; },
         deleteModal: () => { return deleteModal; },
+        configurationDeleteModal: () => { return configurationDeleteModal; },
         ipModal: () => { return ipModal; },
         qrcodeModal: () => { return qrcodeModal; },
         settingModal: () => { return settingModal; },
         configurationTimeout: () => { return configuration_timeout; },
-        updateDisplayMode: () => { display_mode = window.localStorage.getItem("displayMode") },
+        updateDisplayMode: () => { display_mode = window.localStorage.getItem("displayMode"); },
+        removeConfigurationInterval: () => { removeConfigurationInterval(); },
 
         loadPeers: (searchString) => { loadPeers(searchString); },
         addPeersByBulk: () => { addPeersByBulk(); },
         deletePeers: (config, peers_ids) => { deletePeers(config, peers_ids); },
+        deleteConfiguration: () => { deleteConfiguration() },
         parsePeers: (response) => { parsePeers(response); },
-        toggleAccess: (peerID) => { toggleAccess(peerID) },
+        toggleAccess: (peerID) => { toggleAccess(peerID); },
 
 
         setConfigurationName: (confName) => { configuration_name = confName; },
@@ -867,6 +876,40 @@ let $body = $("body");
 let available_ips = [];
 let $add_peer = document.getElementById("save_peer");
 
+$("#configuration_delete").on("click", function(){
+    window.configurations.configurationDeleteModal().toggle();
+});
+
+function ajaxPostJSON(url, data, doneFunc){
+    $.ajax({
+        url: url,
+        method: "POST",
+        data: JSON.stringify(data),
+        headers: {"Content-Type": "application/json"}
+    }).done(function (res) { 
+        doneFunc(res);
+    });
+}
+
+$("#sure_delete_configuration").on("click", function () {
+    window.configurations.removeConfigurationInterval();
+    let ele = $(this)
+    ele.attr("disabled", "disabled");
+    function done(res){
+        if (res.status){
+            $('#configuration_delete_modal button[data-dismiss="modal"]').remove();
+            ele.text("Delete Successful! Redirecting in 5 seconds.");
+            setTimeout(function(){
+                window.location.replace('/');
+            }, 5000)
+        }else{
+            $("#remove_configuration_alert").removeClass("d-none").text(res.reason);
+        }
+    }
+    ajaxPostJSON("/api/deleteConfiguration", {"name": window.configurations.getConfigurationName()}, done);
+});
+
+
 /**
  * ==========
  * Add peers
@@ -883,7 +926,8 @@ document.querySelector(".add_btn").addEventListener("click", () => {
 /**
  * When configuration switch got click
  */
-$(".toggle--switch").on("click", function(){
+$(".toggle--switch").on("change", function(){
+    console.log('lol')
     $(this).addClass("waiting").attr("disabled", "disabled");
     let id = window.configurations.getConfigurationName();
     let status = $(this).prop("checked");
@@ -891,22 +935,23 @@ $(".toggle--switch").on("click", function(){
     $.ajax({
         url: `/switch/${id}`
     }).done(function(res){
-        console.log();
-        if (res){
+        if (res.status){
             if (status){
                 window.configurations.showToast(`${id} is running.`)
             }else{
                 window.configurations.showToast(`${id} is stopped.`)
             }
-            ele.removeClass("waiting");
-            ele.removeAttr("disabled");
         }else{
             if (status){
-                $(this).prop("checked", false)
+                ele.prop("checked", false)
             }else{
-                $(this).prop("checked", true)
+                ele.prop("checked", true)
             }
+            window.configurations.showToast(res.reason);
+            $(".index-alert").removeClass("d-none").text(`Configuration toggle failed. Please check the following error message:\n${res.message}`);
         }
+        ele.removeClass("waiting");
+        ele.removeAttr("disabled");
         window.configurations.loadPeers($('#search_peer_textbox').val())
     });
 

src/static/js/index.js

@@ -15,7 +15,7 @@ addConfigurationModal.on("hidden.bs.modal", function(){
     $("#add_configuration_form").trigger("reset");
     $("#add_configuration_form input").removeClass("is-valid").removeClass("is-invalid");
     $(".addConfigurationAvailableIPs").text("N/A");
-})
+});
 
 function showToast(msg){
     $(".toastContainer").append(
@@ -28,7 +28,7 @@ function showToast(msg){
             </div>
             <div class="toast-body">${msg}</div>
             <div class="toast-progressbar"></div>
-        </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)`);
@@ -46,7 +46,6 @@ $(".toggle--switch").on("change", function(){
         url: `/switch/${id}`
     }).done(function(res){
         let dot = $(`div[data-conf-id="${id}"] .dot`);
-        console.log();
         if (res.status){
             if (status){
                 dot.removeClass("dot-stopped").addClass("dot-running");
@@ -57,11 +56,7 @@ $(".toggle--switch").on("change", function(){
                 showToast(`${id} is stopped.`);
             }
         }else{
-            // $(".index-alert").removeClass("d-none");
-            // $(".index-alert-full code").text(res.message);
             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>`)
-
-
             if (status){
                 ele.prop("checked", false)
             }else{
@@ -113,6 +108,7 @@ function ajaxPostJSON(url, data, doneFunc){
         doneFunc(res);
     });
 }
+
 function validInput(input){
     input.removeClass("is-invalid").addClass("is-valid").removeAttr("disabled").data("checked", true);
 }
@@ -215,42 +211,40 @@ $("#addConfigurationBtn").on("click", function(){
     }
     if (filled){
         $("#addConfigurationModal .modal-footer .btn").hide();
-        $(".addConfigurationStatus").removeClass("d-none").html(`<div class="spinner-border spinner-border-sm" role="status"><span class="sr-only">Loading...</span></div> Adding peers`)
+        $(".addConfigurationStatus").removeClass("d-none");
         let data = {};
         let q = [];
         for (let i = 0; i < input.length; i++){
             let $i = $(input[i]);
             data[$i.attr("name")] = $i.val();
-            q.push($i.attr("name"))
+            q.push($i.attr("name"));
         }
-        function done(res){
+        let done = (res) => {
             let name = res.data;
+            $(".addConfigurationAddStatus").removeClass("text-primary").addClass("text-success").html(`<i class="bi bi-check-circle-fill"></i> ${name} added successfully.`);
             if (res.status){
                 setTimeout(() => {
-                    
-                    $(".addConfigurationStatus").html(`<div class="spinner-border spinner-border-sm" role="status"><span class="sr-only">Loading...</span></div> Toggling ${res.data}`)
+                    $(".addConfigurationToggleStatus").removeClass("waiting").html(`<div class="spinner-border spinner-border-sm" role="status"></div> Toggle Configuration`)
                     $.ajax({
                         url: `/switch/${name}`
                     }).done(function(res){
                         if (res.status){
-                            $(".addConfigurationStatus").removeClass("text-primary").addClass("text-success").html(`<i class="bi bi-check-circle-fill"></i> ${name} toggled! Refresh in 5 seconds.`);
+                            $(".addConfigurationToggleStatus").removeClass("text-primary").addClass("text-success").html(`<i class="bi bi-check-circle-fill"></i> Toggle Successfully. Refresh in 5 seconds.`);
                             setTimeout(() => {
-                                $(".addConfigurationStatus").text("Refeshing...")
+                                $(".addConfigurationToggleStatus").text("Refeshing...")
                                 location.reload();
                             }, 5000);
                         }else{
-                            $(".addConfigurationStatus").removeClass("text-primary").addClass("text-danger").html(`<i class="bi bi-x-circle-fill"></i> ${name} toggle failed.`)
-                            $("#addCconfigurationAlert").removeClass("d-none").children(".alert-body").text(res.reason);
-                            $("#addCconfigurationAlertMessage").removeClass("d-none").text(res.message);
+                            $(".addConfigurationToggleStatus").removeClass("text-primary").addClass("text-danger").html(`<i class="bi bi-x-circle-fill"></i> ${name} toggle failed.`)
+                            $("#addCconfigurationAlertMessage").removeClass("d-none").html(`${name} toggle failed. Please check the following error message:<br>${res.message}`);
                         }
-                    })
+                    });
                 }, 500);
-                
             }else{
                 $(".addConfigurationStatus").removeClass("text-primary").addClass("text-danger").html(`<i class="bi bi-x-circle-fill"></i> ${name} adding failed.`)
                 $("#addCconfigurationAlert").removeClass("d-none").children(".alert-body").text(res.reason);
             }
-        }
+        };
         ajaxPostJSON("/api/addConfiguration", data, done);
     }
 });