From 65f31a0b385a09d23e8ae250e4fe7e9dfd64c9f7 Mon Sep 17 00:00:00 2001
From: Donald Cheng Hong Zou <donaldzou@live.hk>
Date: Fri, 4 Mar 2022 22:09:01 -0500
Subject: [PATCH] Gave up using WebSocket

Flask-SocketIO does not fully compatible with Gunicorn, and it limited to 1 worker, which it will takes forever to finish loading the webpage. Switched back to  using ajax.
---
 src/dashboard.py                   |  16 +--
 src/gunicorn.conf.py               |   3 +-
 src/static/css/dashboard.css       |   4 +
 src/static/css/dashboard.min.css   |   2 +-
 src/static/js/configuration.js     | 221 +++++++++++++++++++++++++----
 src/static/js/configuration.min.js |  16 ++-
 src/templates/configuration.html   | 158 ++++-----------------
 src/templates/header.html          |   2 +-
 8 files changed, 245 insertions(+), 177 deletions(-)

diff --git a/src/dashboard.py b/src/dashboard.py
index a200361..ad6e1f9 100644
--- a/src/dashboard.py
+++ b/src/dashboard.py
@@ -1007,9 +1007,9 @@ def configuration(config_name):
 
 
 # Get configuration details
-@socketio.on("get_config")
-# @app.route('/get_config/<config_name>', methods=['GET'])
-def get_conf(data):
+# @socketio.on("get_config")
+@app.route('/get_config/<config_name>', methods=['GET'])
+def get_conf(config_name):
     """
     Get configuration setting of wireguard interface.
     @param config_name: Name of WG interface
@@ -1024,17 +1024,15 @@ def get_conf(data):
     if not session:
         result["status"] = False
         result["message"] = "Oops! <br> You're not signed in. Please refresh your page."
-        socketio.emit("get_config", result, json=True)
-        return
+        return jsonify(result)
 
     if getattr(g, 'db', None) is None:
         g.db = connect_db()
         g.cur = g.db.cursor()
-    config_name = data['config']
     config_interface = read_conf_file_interface(config_name)
 
     if config_interface != {}:
-        search = data['search']
+        search = request.args.get('search')
         if len(search) == 0:
             search = ""
         search = urllib.parse.unquote(search)
@@ -1068,7 +1066,8 @@ def get_conf(data):
     else:
         result['status'] = False
         result['message'] = "I cannot find this configuration. <br> Please refresh and try again"
-    socketio.emit("get_config", result, json=True)
+    config.clear()
+    return jsonify(result)
 
 
 # Turn on / off a configuration
@@ -1716,6 +1715,7 @@ def run_dashboard():
     global WG_CONF_PATH
     WG_CONF_PATH = config.get("Server", "wg_conf_path")
     config.clear()
+
     return app
 
 
diff --git a/src/gunicorn.conf.py b/src/gunicorn.conf.py
index 0123b4c..56b82ce 100644
--- a/src/gunicorn.conf.py
+++ b/src/gunicorn.conf.py
@@ -4,8 +4,7 @@ import dashboard
 app_host, app_port = dashboard.get_host_bind()
 
 worker_class = 'gthread'
-# workers = multiprocessing.cpu_count() * 2 + 1
-workers = 1
+workers = multiprocessing.cpu_count() * 2 + 1
 threads = 4
 bind = f"{app_host}:{app_port}"
 daemon = True
diff --git a/src/static/css/dashboard.css b/src/static/css/dashboard.css
index d04a9f2..71b7831 100644
--- a/src/static/css/dashboard.css
+++ b/src/static/css/dashboard.css
@@ -198,6 +198,10 @@ body {
     color: #dc3545;
 }
 
+.btn-lock-peer:hover{
+    color: #6c757d;
+}
+
 .btn-setting-peer:hover{
     color:#007bff
 }
diff --git a/src/static/css/dashboard.min.css b/src/static/css/dashboard.min.css
index 24f41f9..7a8b84c 100644
--- a/src/static/css/dashboard.min.css
+++ b/src/static/css/dashboard.min.css
@@ -1 +1 @@
-@-webkit-keyframes rotating{0%{-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotating{0%{-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}to{-ms-transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes loading{0%,to{background-color:#dfdfdf}50%{background-color:#adadad}}@-moz-keyframes loading{0%,to{background-color:#dfdfdf}50%{background-color:#adadad}}body{font-size:.875rem}.feather{width:16px;height:16px;vertical-align:text-bottom}.btn-primary{font-weight:700}.sidebar{position:fixed;top:0;bottom:0;left:0;z-index:100;padding:48px 0 0;box-shadow:inset -1px 0 0 rgba(0,0,0,.1)}.sidebar-sticky{position:relative;top:0;height:calc(100vh - 48px);padding-top:.5rem;overflow-x:hidden;overflow-y:auto}@supports ((position:-webkit-sticky) or (position:sticky)){.sidebar-sticky{position:-webkit-sticky;position:sticky}}.sidebar .nav-link{font-weight:500;color:#333;transition:.2s cubic-bezier(.82,-.07,0,1.01)}.nav-link:hover{padding-left:30px;background-color:#dfdfdf}.sidebar .nav-link .feather{margin-right:4px;color:#999}.sidebar .nav-link.active{color:#007bff}.sidebar .nav-link.active .feather,.sidebar .nav-link:hover .feather{color:inherit}.sidebar-heading{font-size:.75rem;text-transform:uppercase}.navbar-brand{padding-top:.75rem;padding-bottom:.75rem;font-size:1rem;background-color:rgba(0,0,0,.25);box-shadow:inset -1px 0 0 rgba(0,0,0,.25)}.navbar .navbar-toggler{top:.25rem;right:1rem}.form-control{transition:all .2s ease-in-out}.form-control:disabled{cursor:not-allowed}.navbar .form-control{padding:.75rem 1rem;border-width:0;border-radius:0}.form-control-dark{color:#fff;background-color:rgba(255,255,255,.1);border-color:rgba(255,255,255,.1)}.form-control-dark:focus{border-color:transparent;box-shadow:0 0 0 3px rgba(255,255,255,.25)}.dot{width:10px;height:10px;border-radius:50px;display:inline-block;margin-left:auto!important}.dot-running{background-color:#28a745!important;box-shadow:0 0 0 .2rem #28a74545}.h6-dot-running{margin-left:.3rem}.dot-stopped{background-color:#6c757d!important}.card-running{border-color:#28a745}.info h6{line-break:anywhere;transition:.2s ease-in-out}.info .row .col-sm{display:flex;flex-direction:column}.info .row .col-sm small{display:flex}.info .row .col-sm small strong:last-child(1){margin-left:auto!important}.btn-control{border:0!important;padding:0 1rem 0 0}.btn-control:active,.btn-control:focus{background-color:transparent!important;border:0!important;box-shadow:none}.btn-qrcode-peer{padding:0!important}.btn-qrcode-peer:active,.btn-qrcode-peer:hover{transform:scale(.9) rotate(180deg);border:0!important}.btn-download-peer:active,.btn-download-peer:hover{color:#17a2b8!important;transform:translateY(5px)}.share_peer_btn_group .btn-control{margin:0 0 0 1rem;padding:0!important;transition:all .4s cubic-bezier(1,-.43,0,1.37)}.btn-control:hover{background:#fff}.btn-delete-peer:hover{color:#dc3545}.btn-setting-peer:hover{color:#007bff}.btn-download-peer:hover{}.login-container{padding:2rem}@media (max-width:992px){.card-col{margin-bottom:1rem}}.switch{font-size:2rem}.switch:hover{text-decoration:none}.btn-group-label:hover{color:#007bff;border-color:#007bff;background:#fff}.peer_data_group{text-align:right;display:flex;margin-bottom:.5rem}.peer_data_group p{text-transform:uppercase;margin-bottom:0;margin-right:1rem}@media (max-width:768px){.peer_data_group{text-align:left}}.index-switch{text-align:right}main{margin-bottom:3rem}.peer_list{margin-bottom:7rem}@media (max-width:768px){.add_btn{bottom:1.5rem!important}.peer_list{margin-bottom:7rem!important}}.btn-manage-group{z-index:99;position:fixed;bottom:3rem;right:2rem;display:flex}.btn-manage-group .setting_btn_menu{position:absolute;top:-124px;background-color:#fff;padding:1rem 0;right:0;box-shadow:0 10px 20px rgb(0 0 0/19%),0 6px 6px rgb(0 0 0/23%);border-radius:10px;min-width:200px;display:none;transform:translateY(-30px);opacity:0;transition:all .3s cubic-bezier(.58,.03,.05,1.28)}.btn-manage-group .setting_btn_menu.show{display:block}.setting_btn_menu.showing{transform:translateY(0);opacity:1}.setting_btn_menu a{display:flex;padding:.5rem 1rem;transition:all .1s ease-in-out;font-size:1rem;align-items:center;cursor:pointer}.setting_btn_menu a:hover{background-color:#efefef;text-decoration:none}.setting_btn_menu a i{margin-right:auto!important}.add_btn{margin-right:1rem}.add_btn,.setting_btn{height:54px;z-index:99;border-radius:100px!important;padding:0 14px;box-shadow:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);font-size:1.5rem}.rotating::before{-webkit-animation:rotating .75s linear infinite;-moz-animation:rotating .75s linear infinite;-ms-animation:rotating .75s linear infinite;-o-animation:rotating .75s linear infinite;animation:rotating .75s linear infinite}.peer_private_key_textbox_switch{position:absolute;right:2rem;transform:translateY(-28px);font-size:1.2rem;cursor:pointer}#peer_preshared_key_textbox,#peer_private_key_textbox,#private_key,#public_key{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}.progress-bar{transition:.3s ease-in-out}.key{transition:.2s ease-in-out;cursor:pointer}.key:hover{color:#007bff}.card,.form-control{border-radius:10px}.peer_list .card .button-group{height:22px}.btn{border-radius:8px}#password,#username{padding:.6rem calc(.9rem + 32px);height:inherit}label[for=password],label[for=username]{font-size:1rem;margin:0!important;transform:translateY(30px) translateX(16px);padding:0}.modal-content{border-radius:10px}.tooltip-inner{font-size:.8rem}#conf_status_btn,.conf_card{transition:.2s ease-in-out}.conf_card:hover{border-color:#007bff;cursor:pointer}.info_loading{animation:loading 2s infinite ease-in-out;border-radius:5px;height:19px;transition:.3s ease-in-out}#conf_status_btn.info_loading{height:38px;border-radius:5px;animation:loading 3s infinite ease-in-out}#qrcode_img img{width:100%}#selected_ip_list .badge,#selected_peer_list .badge{margin:.1rem}#add_modal.ip_modal_open{transition:filter .2s ease-in-out;filter:brightness(.5)}#delete_bulk_modal .list-group a.active{background-color:#dc3545;border-color:#dc3545}#selected_peer_list{max-height:80px;overflow-y:scroll;overflow-x:hidden}.no-responding,.no-response{transition:all 1s ease-in-out}.no-response{width:100%;height:100%;position:fixed;background:#000000ba;z-index:10000;display:none;flex-direction:column;align-items:center;justify-content:center;opacity:0}.no-response.active{display:flex}.no-response.active.show{opacity:100}.no-response .container>*{text-align:center}.no-responding{filter:blur(10px)}pre.index-alert{margin-bottom:0;padding:1rem;background-color:#343a40;border:1px solid rgba(0,0,0,.125);border-radius:.25rem;margin-top:1rem;color:#fff}.peerNameCol{display:flex;align-items:center;margin-bottom:.2rem}.peerName{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.peerLightContainer{text-transform:uppercase;margin:0;margin-left:auto!important}.conf_card .dot,.info .dot{transform:translateX(10px)}#config_body{transition:.3s ease-in-out}#config_body.firstLoading{opacity:.2}.chartTitle{display:flex}.chartControl{margin-bottom:1rem;display:flex;align-items:center}.chartTitle h6{margin-bottom:0;line-height:1;margin-right:.5rem}.chartContainer.fullScreen{position:fixed;z-index:9999;background-color:#fff;top:0;left:0;width:calc(100% + 15px);height:100%;padding:32px}.chartContainer.fullScreen .col-sm{padding-right:0;height:100%}.chartContainer.fullScreen .chartCanvasContainer{width:100%;height:calc(100% - 47px)!important;max-height:calc(100% - 47px)!important}
\ No newline at end of file
+@-webkit-keyframes rotating{0%{-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotating{0%{-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}to{-ms-transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes loading{0%,to{background-color:#dfdfdf}50%{background-color:#adadad}}@-moz-keyframes loading{0%,to{background-color:#dfdfdf}50%{background-color:#adadad}}body{font-size:.875rem}.feather{width:16px;height:16px;vertical-align:text-bottom}.btn-primary{font-weight:700}.sidebar{position:fixed;top:0;bottom:0;left:0;z-index:100;padding:48px 0 0;box-shadow:inset -1px 0 0 rgba(0,0,0,.1)}.sidebar-sticky{position:relative;top:0;height:calc(100vh - 48px);padding-top:.5rem;overflow-x:hidden;overflow-y:auto}@supports ((position:-webkit-sticky) or (position:sticky)){.sidebar-sticky{position:-webkit-sticky;position:sticky}}.sidebar .nav-link{font-weight:500;color:#333;transition:.2s cubic-bezier(.82,-.07,0,1.01)}.nav-link:hover{padding-left:30px;background-color:#dfdfdf}.sidebar .nav-link .feather{margin-right:4px;color:#999}.sidebar .nav-link.active{color:#007bff}.sidebar .nav-link.active .feather,.sidebar .nav-link:hover .feather{color:inherit}.sidebar-heading{font-size:.75rem;text-transform:uppercase}.navbar-brand{padding-top:.75rem;padding-bottom:.75rem;font-size:1rem;background-color:rgba(0,0,0,.25);box-shadow:inset -1px 0 0 rgba(0,0,0,.25)}.navbar .navbar-toggler{top:.25rem;right:1rem}.form-control{transition:all .2s ease-in-out}.form-control:disabled{cursor:not-allowed}.navbar .form-control{padding:.75rem 1rem;border-width:0;border-radius:0}.form-control-dark{color:#fff;background-color:rgba(255,255,255,.1);border-color:rgba(255,255,255,.1)}.form-control-dark:focus{border-color:transparent;box-shadow:0 0 0 3px rgba(255,255,255,.25)}.dot{width:10px;height:10px;border-radius:50px;display:inline-block;margin-left:auto!important}.dot-running{background-color:#28a745!important;box-shadow:0 0 0 .2rem #28a74545}.h6-dot-running{margin-left:.3rem}.dot-stopped{background-color:#6c757d!important}.card-running{border-color:#28a745}.info h6{line-break:anywhere;transition:.2s ease-in-out}.info .row .col-sm{display:flex;flex-direction:column}.info .row .col-sm small{display:flex}.info .row .col-sm small strong:last-child(1){margin-left:auto!important}.btn-control{border:0!important;padding:0 1rem 0 0}.btn-control:active,.btn-control:focus{background-color:transparent!important;border:0!important;box-shadow:none}.btn-qrcode-peer{padding:0!important}.btn-qrcode-peer:active,.btn-qrcode-peer:hover{transform:scale(.9) rotate(180deg);border:0!important}.btn-download-peer:active,.btn-download-peer:hover{color:#17a2b8!important;transform:translateY(5px)}.share_peer_btn_group .btn-control{margin:0 0 0 1rem;padding:0!important;transition:all .4s cubic-bezier(1,-.43,0,1.37)}.btn-control:hover{background:#fff}.btn-delete-peer:hover{color:#dc3545}.btn-lock-peer:hover{color:#6c757d}.btn-setting-peer:hover{color:#007bff}.btn-download-peer:hover{}.login-container{padding:2rem}@media (max-width:992px){.card-col{margin-bottom:1rem}}.switch{font-size:2rem}.switch:hover{text-decoration:none}.btn-group-label:hover{color:#007bff;border-color:#007bff;background:#fff}.peer_data_group{text-align:right;display:flex;margin-bottom:.5rem}.peer_data_group p{text-transform:uppercase;margin-bottom:0;margin-right:1rem}@media (max-width:768px){.peer_data_group{text-align:left}}.index-switch{text-align:right}main{margin-bottom:3rem}.peer_list{margin-bottom:7rem}@media (max-width:768px){.add_btn{bottom:1.5rem!important}.peer_list{margin-bottom:7rem!important}}.btn-manage-group{z-index:99;position:fixed;bottom:3rem;right:2rem;display:flex}.btn-manage-group .setting_btn_menu{position:absolute;top:-124px;background-color:#fff;padding:1rem 0;right:0;box-shadow:0 10px 20px rgb(0 0 0/19%),0 6px 6px rgb(0 0 0/23%);border-radius:10px;min-width:200px;display:none;transform:translateY(-30px);opacity:0;transition:all .3s cubic-bezier(.58,.03,.05,1.28)}.btn-manage-group .setting_btn_menu.show{display:block}.setting_btn_menu.showing{transform:translateY(0);opacity:1}.setting_btn_menu a{display:flex;padding:.5rem 1rem;transition:all .1s ease-in-out;font-size:1rem;align-items:center;cursor:pointer}.setting_btn_menu a:hover{background-color:#efefef;text-decoration:none}.setting_btn_menu a i{margin-right:auto!important}.add_btn{margin-right:1rem}.add_btn,.setting_btn{height:54px;z-index:99;border-radius:100px!important;padding:0 14px;box-shadow:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);font-size:1.5rem}.rotating::before{-webkit-animation:rotating .75s linear infinite;-moz-animation:rotating .75s linear infinite;-ms-animation:rotating .75s linear infinite;-o-animation:rotating .75s linear infinite;animation:rotating .75s linear infinite}.peer_private_key_textbox_switch{position:absolute;right:2rem;transform:translateY(-28px);font-size:1.2rem;cursor:pointer}#peer_preshared_key_textbox,#peer_private_key_textbox,#private_key,#public_key{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}.progress-bar{transition:.3s ease-in-out}.key{transition:.2s ease-in-out;cursor:pointer}.key:hover{color:#007bff}.card,.form-control{border-radius:10px}.peer_list .card .button-group{height:22px}.btn{border-radius:8px}#password,#username{padding:.6rem calc(.9rem + 32px);height:inherit}label[for=password],label[for=username]{font-size:1rem;margin:0!important;transform:translateY(30px) translateX(16px);padding:0}.modal-content{border-radius:10px}.tooltip-inner{font-size:.8rem}#conf_status_btn,.conf_card{transition:.2s ease-in-out}.conf_card:hover{border-color:#007bff;cursor:pointer}.info_loading{animation:loading 2s infinite ease-in-out;border-radius:5px;height:19px;transition:.3s ease-in-out}#conf_status_btn.info_loading{height:38px;border-radius:5px;animation:loading 3s infinite ease-in-out}#qrcode_img img{width:100%}#selected_ip_list .badge,#selected_peer_list .badge{margin:.1rem}#add_modal.ip_modal_open{transition:filter .2s ease-in-out;filter:brightness(.5)}#delete_bulk_modal .list-group a.active{background-color:#dc3545;border-color:#dc3545}#selected_peer_list{max-height:80px;overflow-y:scroll;overflow-x:hidden}.no-responding,.no-response{transition:all 1s ease-in-out}.no-response{width:100%;height:100%;position:fixed;background:#000000ba;z-index:10000;display:none;flex-direction:column;align-items:center;justify-content:center;opacity:0}.no-response.active{display:flex}.no-response.active.show{opacity:100}.no-response .container>*{text-align:center}.no-responding{filter:blur(10px)}pre.index-alert{margin-bottom:0;padding:1rem;background-color:#343a40;border:1px solid rgba(0,0,0,.125);border-radius:.25rem;margin-top:1rem;color:#fff}.peerNameCol{display:flex;align-items:center;margin-bottom:.2rem}.peerName{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.peerLightContainer{text-transform:uppercase;margin:0;margin-left:auto!important}.conf_card .dot,.info .dot{transform:translateX(10px)}#config_body{transition:.3s ease-in-out}#config_body.firstLoading{opacity:.2}.chartTitle{display:flex}.chartControl{margin-bottom:1rem;display:flex;align-items:center}.chartTitle h6{margin-bottom:0;line-height:1;margin-right:.5rem}.chartContainer.fullScreen{position:fixed;z-index:9999;background-color:#fff;top:0;left:0;width:calc(100% + 15px);height:100%;padding:32px}.chartContainer.fullScreen .col-sm{padding-right:0;height:100%}.chartContainer.fullScreen .chartCanvasContainer{width:100%;height:calc(100% - 47px)!important;max-height:calc(100% - 47px)!important}
\ No newline at end of file
diff --git a/src/static/js/configuration.js b/src/static/js/configuration.js
index 62c186a..7c2127c 100644
--- a/src/static/js/configuration.js
+++ b/src/static/js/configuration.js
@@ -3,13 +3,14 @@
  * Under Apache-2.0 License
  */
 
-(function(){
-    /* global peers */
-    /* global conf_name */
 
+
+(function(){
     /**
      * Definitions
      */
+    let peers = [];
+    let configuration_name;
     let configuration_interval;
     let configuration_timeout = 0;
     let $progress_bar = $(".progress-bar");
@@ -26,6 +27,123 @@
     $("[data-toggle='tooltip']").tooltip();
     $("[data-toggle='popover']").popover();
 
+    /**
+     * Chart!!!!!!
+     * @type {any}
+     */
+
+    let chartUnit = $(".switchUnit.active").data('unit');
+    const totalDataUsageChart = document.getElementById('totalDataUsageChartObj').getContext('2d');
+    const totalDataUsageChartObj = new Chart(totalDataUsageChart, {
+        type: 'line',
+        data: {
+            labels: [],
+            datasets: [
+                {
+                    label: 'Data Sent',
+                    data: [],
+                    stroke: '#FFFFFF',
+                    borderColor: '#28a745',
+                    tension: 0.1,
+                    borderWidth: 2
+                },
+                {
+                    label: 'Data Received',
+                    data: [],
+                    stroke: '#FFFFFF',
+                    borderColor: '#007bff',
+                    tension: 0.1,
+                    borderWidth: 2
+                }
+            ]
+        },
+        options: {
+            maintainAspectRatio: false,
+            showScale: false,
+            responsive:false,
+            scales: {
+                y: {
+                    min: 0,
+                    ticks: {
+                        min: 0,
+                        callback: function(value, index, ticks) {
+                            return `${value} ${chartUnit}`;
+                        }
+                    }
+                }
+            },
+            plugins: {
+                tooltip: {
+                    callbacks: {
+                        label: function(context) {
+                            return `${context.dataset.label}: ${context.parsed.y} ${chartUnit}`;
+                        }
+                    }
+                }
+            }
+        }
+    });
+    
+    let $totalDataUsageChartObj = $("#totalDataUsageChartObj");
+    $totalDataUsageChartObj.css("width", "100%");
+    totalDataUsageChartObj.width = $totalDataUsageChartObj.parent().width();
+    totalDataUsageChartObj.resize();
+    $(window).on("resize", function() {
+         totalDataUsageChartObj.resize();
+    });
+
+    $(".fullScreen").on("click", function(){
+        let $chartContainer = $(".chartContainer");
+        if ($chartContainer.hasClass("fullScreen")){
+            $(this).children().removeClass("bi-fullscreen-exit").addClass("bi-fullscreen");
+            $chartContainer.removeClass("fullScreen");
+        }else{
+            $(this).children().removeClass("bi-fullscreen").addClass("bi-fullscreen-exit");
+            $chartContainer.addClass("fullScreen");
+        }
+        totalDataUsageChartObj.resize();
+    });
+
+    let mul = 1;
+    $(".switchUnit").on("click", function(){
+        $(".switchUnit").removeClass("active");
+        $(this).addClass("active");
+        if ($(this).data('unit') !== chartUnit){
+            switch ($(this).data('unit')) {
+                case "GB":
+                    if (chartUnit === "MB"){
+                        mul = 1/1024;
+                    }
+                    if (chartUnit === "KB"){
+                        mul = 1/1048576;
+                    }
+                    break;
+                case "MB":
+                    if (chartUnit === "GB"){
+                        mul = 1024
+                    }
+                    if (chartUnit === "KB"){
+                        mul = 1/1024
+                    }
+                    break;
+                case "KB":
+                   if (chartUnit === "GB"){
+                        mul = 1048576
+                    }
+                    if (chartUnit === "MB"){
+                        mul = 1024
+                    }
+                    break;
+                default:
+                    break;
+            }
+            chartUnit = $(this).data('unit');
+            totalDataUsageChartObj.data.datasets[0].data = totalDataUsageChartObj.data.datasets[0].data.map(x => x * mul);
+            totalDataUsageChartObj.data.datasets[1].data = totalDataUsageChartObj.data.datasets[1].data.map(x => x * mul);
+            totalDataUsageChartObj.update();
+        }
+    });
+
 
     /**
      * To show alert on the configuration page
@@ -50,26 +168,28 @@
         }
     }
 
+    function setActiveConfigurationName(){
+        $(".nav-conf-link").removeClass("active");
+        $(`.sb-${configuration_name}-url`).addClass("active");
+    }
+
     let firstLoading = true;
     $(".nav-conf-link").on("click", function(e){
-        if(socket.connected){
-            e.preventDefault();
+        e.preventDefault();
+        if (configuration_name !== $(this).data("conf-id")){
             firstLoading = true;
             $("#config_body").addClass("firstLoading");
+            configuration_name = $(this).data("conf-id");
+            if(loadPeers($('#search_peer_textbox').val())){
+                setActiveConfigurationName();
+                window.history.pushState(null,null,`/configuration/${configuration_name}`);
+                $("title").text(`${configuration_name} | WGDashboard`);
 
-            conf_name = $(this).data("conf-id");
-            configurations.loadPeers($('#search_peer_textbox').val());
-
-            $(".nav-conf-link").removeClass("active");
-            $(`.sb-${conf_name}-url`).addClass("active");
-
-            window.history.pushState(null,null,`/configuration/${conf_name}`);
-            $("title").text(`${conf_name} | WGDashboard`);
-
-            totalDataUsageChartObj.data.labels = [];
-            totalDataUsageChartObj.data.datasets[0].data = [];
-            totalDataUsageChartObj.data.datasets[1].data = [];
-            totalDataUsageChartObj.update();
+                totalDataUsageChartObj.data.labels = [];
+                totalDataUsageChartObj.data.datasets[0].data = [];
+                totalDataUsageChartObj.data.datasets[1].data = [];
+                totalDataUsageChartObj.update();
+            }
         }
     });
 
@@ -123,6 +243,7 @@
             totalDataUsageChartObj.update();
         }
 
+        document.querySelector("#conf_name").textContent = configuration_name;
         $conf_status_btn.classList.remove("info_loading");
         document.querySelectorAll("#sort_by_dropdown option").forEach(ele => ele.removeAttribute("selected"));
         document.querySelector(`#sort_by_dropdown option[value="${response.sort_tag}"]`).setAttribute("selected", "selected");
@@ -175,7 +296,19 @@
                 let peer_allowed_ip = '<div class="col-sm"><small class="text-muted"><strong>ALLOWED IP</strong></small><h6 style="text-transform: uppercase;">'+peer.allowed_ip+'</h6></div>';
                 let peer_latest_handshake = '<div class="col-sm"> <small class="text-muted"><strong>LATEST HANDSHAKE</strong></small> <h6 style="text-transform: uppercase;">'+peer.latest_handshake+'</h6> </div>';
                 let peer_endpoint = '<div class="col-sm"><small class="text-muted"><strong>END POINT</strong></small><h6 style="text-transform: uppercase;">'+peer.endpoint+'</h6></div>';
-                let peer_control = '<div class="col-sm"><hr><div class="button-group" style="display:flex"><button type="button" class="btn btn-outline-primary btn-setting-peer btn-control" id="'+peer.id+'" data-toggle="modal"><i class="bi bi-gear-fill" data-toggle="tooltip" data-placement="bottom" title="Peer Settings"></i></button> <button type="button" class="btn btn-outline-danger btn-delete-peer btn-control" id="'+peer.id+'" data-toggle="modal"><i class="bi bi-x-circle-fill" data-toggle="tooltip" data-placement="bottom" title="Delete Peer"></i></button>';
+                let peer_control = `
+                    <div class="col-sm">
+                        <hr>
+                        <div class="button-group" style="display:flex">
+                            <button type="button" class="btn btn-outline-primary btn-setting-peer btn-control" id="${peer.id}" data-toggle="modal">
+                                <i class="bi bi-gear-fill" data-toggle="tooltip" data-placement="bottom" title="Peer Settings"></i>
+                            </button>
+                            <button type="button" class="btn btn-outline-danger btn-delete-peer btn-control" id="${peer.id}" data-toggle="modal">
+                                <i class="bi bi-x-circle-fill" data-toggle="tooltip" data-placement="bottom" title="Delete Peer"></i>
+                            </button>
+                            <button type="button" class="btn btn-outline-secondary btn-lock-peer btn-control" id="${peer.id}" data-toggle="modal">
+                                <i class="bi bi-lock-fill" data-toggle="tooltip" data-placement="bottom" title=""></i>
+                            </button>`;
                 if (peer.private_key !== ""){
                     peer_control += '<div class="share_peer_btn_group" style="margin-left: auto !important; display: inline"><button type="button" class="btn btn-outline-success btn-qrcode-peer btn-control" data-imgsrc="/qrcode/'+response.name+'?id='+encodeURIComponent(peer.id)+'"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="width: 19px;" fill="#28a745"><path d="M3 11h8V3H3v8zm2-6h4v4H5V5zM3 21h8v-8H3v8zm2-6h4v4H5v-4zM13 3v8h8V3h-8zm6 6h-4V5h4v4zM13 13h2v2h-2zM15 15h2v2h-2zM13 17h2v2h-2zM17 17h2v2h-2zM19 19h2v2h-2zM15 19h2v2h-2zM17 13h2v2h-2zM19 15h2v2h-2z"/></svg></button><a href="/download/'+response.name+'?id='+encodeURIComponent(peer.id)+'" class="btn btn-outline-info btn-download-peer btn-control"><i class="bi bi-download"></i></a></div>';
                 }
@@ -226,7 +359,7 @@
         let data_list = [$new_add_DNS, $new_add_endpoint_allowed_ip,$new_add_MTU, $new_add_keep_alive];
         if ($new_add_amount.val() > 0 && !$new_add_amount.hasClass("is-invalid")){
             if ($new_add_DNS.val() !== "" && $new_add_endpoint_allowed_ip.val() !== ""){
-                let conf = conf_name;
+                let conf = configuration_name;
                 let keys = [];
                 for (let i = 0; i < $new_add_amount.val(); i++) {
                     keys.push(window.wireguard.generateKeypair());
@@ -411,12 +544,22 @@
      */
     let time = 0;
     let count = 0;
-
-
     let d1 = new Date();
     function loadPeers(searchString){
         d1 = new Date();
-        socket.emit('get_config', {"config": conf_name, "search": searchString});
+        let good = true;
+        $.ajax({
+            method: "GET",
+            url: `/get_config/${configuration_name}?search=${encodeURIComponent(searchString)}`,
+            headers:{"Content-Type": "application/json"}
+        }).done(function(response){
+            console.log(response);
+            parsePeers(response);
+        }).fail(function(){
+            noResponding();
+            good = false
+        });
+        return good;
     }
 
     function parsePeers(response){
@@ -435,7 +578,7 @@
             $(".dot.dot-running").attr("title","Peer Connected").tooltip();
             $(".dot.dot-stopped").attr("title","Peer Disconnected").tooltip();
             $("i[data-toggle='tooltip']").tooltip();
-            $("#conf_name").text(conf_name);
+            $("#configuration_name").text(configuration_name);
             if (firstLoading){
                 firstLoading = false;
                 $("#config_body").removeClass("firstLoading");
@@ -561,7 +704,7 @@
      */
     function getAvailableIps(){
         $.ajax({
-            "url": `/available_ips/${conf_name}`,
+            "url": `/available_ips/${configuration_name}`,
             "method": "GET",
         }).done(function (res) {
             if (res.status === true){
@@ -593,6 +736,9 @@
         deletePeers: (config, peers_ids) => { deletePeers(config, peers_ids); },
         parsePeers: (response) => { parsePeers(response); },
 
+        setConfigurationName: (confName) => { configuration_name = confName;},
+        getConfigurationName: () => { return configuration_name; },
+        setActiveConfigurationName: () => { setActiveConfigurationName(); },
         getAvailableIps: () => { getAvailableIps(); },
         generateKeyPair: () => { generate_key(); },
         showToast: (message) => { showToast(message); },
@@ -717,7 +863,7 @@ $add_peer.addEventListener("click",function(){
         $add_peer.setAttribute("disabled","disabled");
         $add_peer.innerHTML = "Adding...";
         if ($allowed_ips.val() !== "" && $public_key.val() !== "" && $new_add_DNS.val() !== "" && $new_add_endpoint_allowed_ip.val() !== ""){
-            let conf = conf_name;
+            let conf = window.configurations.getConfigurationName();
             let data_list = [$private_key, $allowed_ips, $new_add_name, $new_add_DNS, $new_add_endpoint_allowed_ip,$new_add_MTU, $new_add_keep_alive];
             data_list.forEach((ele) => ele.attr("disabled", "disabled"));
             $.ajax({
@@ -912,13 +1058,26 @@ $body.on("click", ".btn-delete-peer", function(){
     window.configurations.deleteModal().toggle();
 });
 
+$body.on("click", ".btn-lock-peer", function(){
+    let $lockGlyph = "bi-lock-fill";
+    let $unlockGlyph = "bi-unlock-fill";
+
+    if ($(this).children().hasClass($lockGlyph)){
+        $(this).children().removeClass($lockGlyph).addClass($unlockGlyph);
+        $(this).children().tooltip('hide').attr('data-original-title', 'Lock Peer').tooltip('show');
+    }else{
+        $(this).children().removeClass($unlockGlyph).addClass($lockGlyph);
+        $(this).children().tooltip('hide').attr('data-original-title', 'Unlock Peer').tooltip('show');
+    }
+});
+
 /**
  * When the confirm delete button clicked
  */
 $("#delete_peer").on("click",function(){
     $(this).attr("disabled","disabled");
     $(this).html("Deleting...");
-    let config = conf_name;
+    let config = window.configurations.getConfigurationName();
     let peer_ids = [$(this).data("peer-id")];
     window.configurations.deletePeers(config, peer_ids);
 });
@@ -938,7 +1097,7 @@ $body.on("click", ".btn-setting-peer", function(){
     $("#save_peer_setting").attr("peer_id", peer_id);
     $.ajax({
         method: "POST",
-        url: "/get_peer_data/"+conf_name,
+        url: "/get_peer_data/"+window.configurations.getConfigurationName(),
         headers:{
             "Content-Type": "application/json"
         },
@@ -974,7 +1133,7 @@ $("#peer_private_key_textbox").on("change",function(){
     let $save_peer_setting = $("#save_peer_setting");
     if ($(this).val().length > 0){
         $.ajax({
-            "url": "/check_key_match/"+conf_name,
+            "url": "/check_key_match/"+window.configurations.getConfigurationName(),
             "method": "POST",
             "headers":{"Content-Type": "application/json"},
             "data": JSON.stringify({
@@ -1286,7 +1445,7 @@ $("#confirm_delete_bulk_peers").on("click", function(){
                 btn.attr("disabled", "disabled");
                 let ips = [];
                 $selected_peer_list.childNodes.forEach((ele) => ips.push(ele.dataset.id));
-                window.configurations.deletePeers(conf_name, ips);
+                window.configurations.deletePeers(window.configurations.getConfigurationName(), ips);
                 clearInterval(confirm_delete_bulk_peers_interval);
                 confirm_delete_bulk_peers_interval = undefined;
             }
@@ -1342,7 +1501,7 @@ $body.on("click", ".btn-download-peer", function(e){
  */
 $("#download_all_peers").on("click", function(){
     $.ajax({
-        "url": `/download_all/${conf_name}`,
+        "url": `/download_all/${window.configurations.getConfigurationName()}`,
         "method": "GET",
         success: function(res){
             if (res.peers.length > 0){
diff --git a/src/static/js/configuration.min.js b/src/static/js/configuration.min.js
index 9b6c59c..af94ae6 100644
--- a/src/static/js/configuration.min.js
+++ b/src/static/js/configuration.min.js
@@ -1,4 +1,4 @@
-(function(){let configuration_interval;let configuration_timeout=0;let $progress_bar=$(".progress-bar");let bootstrapModalConfig={keyboard:false,backdrop:"static"};let addModal=new bootstrap.Modal(document.getElementById("add_modal"),bootstrapModalConfig);let deleteBulkModal=new bootstrap.Modal(document.getElementById("delete_bulk_modal"),bootstrapModalConfig);let ipModal=new bootstrap.Modal(document.getElementById("available_ip_modal"),bootstrapModalConfig);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);$("[data-toggle='tooltip']").tooltip();$("[data-toggle='popover']").popover();function configurationAlert(response){if(response.listen_port===""&&response.status==="stopped"){let configAlert=document.createElement("div");configAlert.classList.add("alert");configAlert.classList.add("alert-warning");configAlert.setAttribute("role","alert");configAlert.innerHTML="Peer QR Code and configuration file download required a specified <strong>Listen Port</strong>.";document.querySelector("#config_info_alert").appendChild(configAlert)}if(response.conf_address==="N/A"){let configAlert=document.createElement("div");configAlert.classList.add("alert");configAlert.classList.add("alert-warning");configAlert.setAttribute("role","alert");configAlert.innerHTML="Configuration <strong>Address</strong> need to be specified to have peers connect to it.";document.querySelector("#config_info_alert").appendChild(configAlert)}}let firstLoading=true;$(".nav-conf-link").on("click",function(e){if(socket.connected){e.preventDefault();firstLoading=true;$("#config_body").addClass("firstLoading");conf_name=$(this).data("conf-id");configurations.loadPeers($("#search_peer_textbox").val());$(".nav-conf-link").removeClass("active");$(`.sb-${conf_name}-url`).addClass("active");window.history.pushState(null,null,`/configuration/${conf_name}`);$("title").text(`${conf_name} | WGDashboard`);totalDataUsageChartObj.data.labels=[];totalDataUsageChartObj.data.datasets[0].data=[];totalDataUsageChartObj.data.datasets[1].data=[];totalDataUsageChartObj.update()}});function configurationHeader(response){let $conf_status_btn=document.getElementById("conf_status_btn");if(response.checked==="checked"){$conf_status_btn.innerHTML=`<a href="#" id="${response.name}" ${response.checked} class="switch text-primary"><i class="bi bi-toggle2-on"></i> ON</a>`}else{$conf_status_btn.innerHTML=`<a href="#" id="${response.name}" ${response.checked} class="switch text-primary"><i class="bi bi-toggle2-off"></i> OFF</a>`}if(response.running_peer>0){let d=new Date;let time=d.toLocaleString("en-us",{hour:"2-digit",minute:"2-digit",second:"2-digit",hourCycle:"h23"});totalDataUsageChartObj.data.labels.push(`${time}`);if(totalDataUsageChartObj.data.datasets[0].data.length===0){totalDataUsageChartObj.data.datasets[1].lastData=response.total_data_usage[2];totalDataUsageChartObj.data.datasets[0].lastData=response.total_data_usage[1];totalDataUsageChartObj.data.datasets[0].data.push(0);totalDataUsageChartObj.data.datasets[1].data.push(0)}else{if(totalDataUsageChartObj.data.datasets[0].data.length===50&&totalDataUsageChartObj.data.datasets[1].data.length===50){totalDataUsageChartObj.data.labels.shift();totalDataUsageChartObj.data.datasets[0].data.shift();totalDataUsageChartObj.data.datasets[1].data.shift()}let newTotalReceive=response.total_data_usage[2]-totalDataUsageChartObj.data.datasets[1].lastData;let newTotalSent=response.total_data_usage[1]-totalDataUsageChartObj.data.datasets[0].lastData;let k=0;if(chartUnit==="MB"){k=1024}else if(chartUnit==="KB"){k=1048576}else{k=1}totalDataUsageChartObj.data.datasets[1].data.push(newTotalReceive*k);totalDataUsageChartObj.data.datasets[0].data.push(newTotalSent*k);totalDataUsageChartObj.data.datasets[0].lastData=response.total_data_usage[1];totalDataUsageChartObj.data.datasets[1].lastData=response.total_data_usage[2]}totalDataUsageChartObj.update()}$conf_status_btn.classList.remove("info_loading");document.querySelectorAll("#sort_by_dropdown option").forEach(ele=>ele.removeAttribute("selected"));document.querySelector(`#sort_by_dropdown option[value="${response.sort_tag}"]`).setAttribute("selected","selected");document.querySelectorAll(".interval-btn-group button").forEach(ele=>ele.classList.remove("active"));document.querySelector(`button[data-refresh-interval="${response.dashboard_refresh_interval}"]`).classList.add("active");document.querySelectorAll(".display-btn-group button").forEach(ele=>ele.classList.remove("active"));document.querySelector(`button[data-display-mode="${response.peer_display_mode}"]`).classList.add("active");document.querySelector("#conf_status").innerHTML=`${response.status}<span class="dot dot-${response.status}"></span>`;document.querySelector("#conf_connected_peers").innerHTML=response.running_peer;document.querySelector("#conf_total_data_usage").innerHTML=`${response.total_data_usage[0]} GB`;document.querySelector("#conf_total_data_received").innerHTML=`${response.total_data_usage[2]} GB`;document.querySelector("#conf_total_data_sent").innerHTML=`${response.total_data_usage[1]} GB`;document.querySelector("#conf_public_key").innerHTML=response.public_key;document.querySelector("#conf_listen_port").innerHTML=response.listen_port===""?"N/A":response.listen_port;document.querySelector("#conf_address").innerHTML=response.conf_address;document.querySelectorAll(".info h6").forEach(ele=>ele.classList.remove("info_loading"))}function configurationPeers(response){let result="";if(response.peer_data.length===0){document.querySelector(".peer_list").innerHTML=`<div class="col-12" style="text-align: center; margin-top: 1.5rem"><h3 class="text-muted">Oops! No peers found ‘︿’</h3></div>`}else{let display_mode=response.peer_display_mode==="list"?"col-12":"col-sm-6 col-lg-4";response.peer_data.forEach(function(peer){let total_r=0;let total_s=0;total_r+=peer.cumu_receive;total_s+=peer.cumu_sent;let spliter='<div class="w-100"></div>';let peer_name=`<div class="col-sm peerNameCol">
+(function(){let peers=[];let configuration_name;let configuration_interval;let configuration_timeout=0;let $progress_bar=$(".progress-bar");let bootstrapModalConfig={keyboard:false,backdrop:"static"};let addModal=new bootstrap.Modal(document.getElementById("add_modal"),bootstrapModalConfig);let deleteBulkModal=new bootstrap.Modal(document.getElementById("delete_bulk_modal"),bootstrapModalConfig);let ipModal=new bootstrap.Modal(document.getElementById("available_ip_modal"),bootstrapModalConfig);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);$("[data-toggle='tooltip']").tooltip();$("[data-toggle='popover']").popover();let chartUnit=$(".switchUnit.active").data("unit");const totalDataUsageChart=document.getElementById("totalDataUsageChartObj").getContext("2d");const totalDataUsageChartObj=new Chart(totalDataUsageChart,{type:"line",data:{labels:[],datasets:[{label:"Data Sent",data:[],stroke:"#FFFFFF",borderColor:"#28a745",tension:.1,borderWidth:2},{label:"Data Received",data:[],stroke:"#FFFFFF",borderColor:"#007bff",tension:.1,borderWidth:2}]},options:{maintainAspectRatio:false,showScale:false,responsive:false,scales:{y:{min:0,ticks:{min:0,callback:function(value,index,ticks){return`${value} ${chartUnit}`}}}},plugins:{tooltip:{callbacks:{label:function(context){return`${context.dataset.label}: ${context.parsed.y} ${chartUnit}`}}}}}});let $totalDataUsageChartObj=$("#totalDataUsageChartObj");$totalDataUsageChartObj.css("width","100%");totalDataUsageChartObj.width=$totalDataUsageChartObj.parent().width();totalDataUsageChartObj.resize();$(window).on("resize",function(){totalDataUsageChartObj.resize()});$(".fullScreen").on("click",function(){let $chartContainer=$(".chartContainer");if($chartContainer.hasClass("fullScreen")){$(this).children().removeClass("bi-fullscreen-exit").addClass("bi-fullscreen");$chartContainer.removeClass("fullScreen")}else{$(this).children().removeClass("bi-fullscreen").addClass("bi-fullscreen-exit");$chartContainer.addClass("fullScreen")}totalDataUsageChartObj.resize()});let mul=1;$(".switchUnit").on("click",function(){$(".switchUnit").removeClass("active");$(this).addClass("active");if($(this).data("unit")!==chartUnit){switch($(this).data("unit")){case"GB":if(chartUnit==="MB"){mul=1/1024}if(chartUnit==="KB"){mul=1/1048576}break;case"MB":if(chartUnit==="GB"){mul=1024}if(chartUnit==="KB"){mul=1/1024}break;case"KB":if(chartUnit==="GB"){mul=1048576}if(chartUnit==="MB"){mul=1024}break;default:break}chartUnit=$(this).data("unit");totalDataUsageChartObj.data.datasets[0].data=totalDataUsageChartObj.data.datasets[0].data.map(x=>x*mul);totalDataUsageChartObj.data.datasets[1].data=totalDataUsageChartObj.data.datasets[1].data.map(x=>x*mul);totalDataUsageChartObj.update()}});function configurationAlert(response){if(response.listen_port===""&&response.status==="stopped"){let configAlert=document.createElement("div");configAlert.classList.add("alert");configAlert.classList.add("alert-warning");configAlert.setAttribute("role","alert");configAlert.innerHTML="Peer QR Code and configuration file download required a specified <strong>Listen Port</strong>.";document.querySelector("#config_info_alert").appendChild(configAlert)}if(response.conf_address==="N/A"){let configAlert=document.createElement("div");configAlert.classList.add("alert");configAlert.classList.add("alert-warning");configAlert.setAttribute("role","alert");configAlert.innerHTML="Configuration <strong>Address</strong> need to be specified to have peers connect to it.";document.querySelector("#config_info_alert").appendChild(configAlert)}}function setActiveConfigurationName(){$(".nav-conf-link").removeClass("active");$(`.sb-${configuration_name}-url`).addClass("active")}let firstLoading=true;$(".nav-conf-link").on("click",function(e){e.preventDefault();if(configuration_name!==$(this).data("conf-id")){firstLoading=true;$("#config_body").addClass("firstLoading");configuration_name=$(this).data("conf-id");if(loadPeers($("#search_peer_textbox").val())){setActiveConfigurationName();window.history.pushState(null,null,`/configuration/${configuration_name}`);$("title").text(`${configuration_name} | WGDashboard`);totalDataUsageChartObj.data.labels=[];totalDataUsageChartObj.data.datasets[0].data=[];totalDataUsageChartObj.data.datasets[1].data=[];totalDataUsageChartObj.update()}}});function configurationHeader(response){let $conf_status_btn=document.getElementById("conf_status_btn");if(response.checked==="checked"){$conf_status_btn.innerHTML=`<a href="#" id="${response.name}" ${response.checked} class="switch text-primary"><i class="bi bi-toggle2-on"></i> ON</a>`}else{$conf_status_btn.innerHTML=`<a href="#" id="${response.name}" ${response.checked} class="switch text-primary"><i class="bi bi-toggle2-off"></i> OFF</a>`}if(response.running_peer>0){let d=new Date;let time=d.toLocaleString("en-us",{hour:"2-digit",minute:"2-digit",second:"2-digit",hourCycle:"h23"});totalDataUsageChartObj.data.labels.push(`${time}`);if(totalDataUsageChartObj.data.datasets[0].data.length===0){totalDataUsageChartObj.data.datasets[1].lastData=response.total_data_usage[2];totalDataUsageChartObj.data.datasets[0].lastData=response.total_data_usage[1];totalDataUsageChartObj.data.datasets[0].data.push(0);totalDataUsageChartObj.data.datasets[1].data.push(0)}else{if(totalDataUsageChartObj.data.datasets[0].data.length===50&&totalDataUsageChartObj.data.datasets[1].data.length===50){totalDataUsageChartObj.data.labels.shift();totalDataUsageChartObj.data.datasets[0].data.shift();totalDataUsageChartObj.data.datasets[1].data.shift()}let newTotalReceive=response.total_data_usage[2]-totalDataUsageChartObj.data.datasets[1].lastData;let newTotalSent=response.total_data_usage[1]-totalDataUsageChartObj.data.datasets[0].lastData;let k=0;if(chartUnit==="MB"){k=1024}else if(chartUnit==="KB"){k=1048576}else{k=1}totalDataUsageChartObj.data.datasets[1].data.push(newTotalReceive*k);totalDataUsageChartObj.data.datasets[0].data.push(newTotalSent*k);totalDataUsageChartObj.data.datasets[0].lastData=response.total_data_usage[1];totalDataUsageChartObj.data.datasets[1].lastData=response.total_data_usage[2]}totalDataUsageChartObj.update()}document.querySelector("#conf_name").textContent=configuration_name;$conf_status_btn.classList.remove("info_loading");document.querySelectorAll("#sort_by_dropdown option").forEach(ele=>ele.removeAttribute("selected"));document.querySelector(`#sort_by_dropdown option[value="${response.sort_tag}"]`).setAttribute("selected","selected");document.querySelectorAll(".interval-btn-group button").forEach(ele=>ele.classList.remove("active"));document.querySelector(`button[data-refresh-interval="${response.dashboard_refresh_interval}"]`).classList.add("active");document.querySelectorAll(".display-btn-group button").forEach(ele=>ele.classList.remove("active"));document.querySelector(`button[data-display-mode="${response.peer_display_mode}"]`).classList.add("active");document.querySelector("#conf_status").innerHTML=`${response.status}<span class="dot dot-${response.status}"></span>`;document.querySelector("#conf_connected_peers").innerHTML=response.running_peer;document.querySelector("#conf_total_data_usage").innerHTML=`${response.total_data_usage[0]} GB`;document.querySelector("#conf_total_data_received").innerHTML=`${response.total_data_usage[2]} GB`;document.querySelector("#conf_total_data_sent").innerHTML=`${response.total_data_usage[1]} GB`;document.querySelector("#conf_public_key").innerHTML=response.public_key;document.querySelector("#conf_listen_port").innerHTML=response.listen_port===""?"N/A":response.listen_port;document.querySelector("#conf_address").innerHTML=response.conf_address;document.querySelectorAll(".info h6").forEach(ele=>ele.classList.remove("info_loading"))}function configurationPeers(response){let result="";if(response.peer_data.length===0){document.querySelector(".peer_list").innerHTML=`<div class="col-12" style="text-align: center; margin-top: 1.5rem"><h3 class="text-muted">Oops! No peers found ‘︿’</h3></div>`}else{let display_mode=response.peer_display_mode==="list"?"col-12":"col-sm-6 col-lg-4";response.peer_data.forEach(function(peer){let total_r=0;let total_s=0;total_r+=peer.cumu_receive;total_s+=peer.cumu_sent;let spliter='<div class="w-100"></div>';let peer_name=`<div class="col-sm peerNameCol">
                         <h5 class="peerName">${peer.name===""?"Untitled":peer.name}</h5>
                         <h6 class="peerLightContainer"><span class="dot dot-${peer.status}" style="margin-left: auto !important;" data-toggle="tooltip" data-placement="left"></span></h6>
                      </div>`;let peer_transfer=`<div class="col-12 peer_data_group" style="">
@@ -8,4 +8,16 @@
                         <p class="text-success">
                             <small><i class="bi bi-arrow-up-right"></i> ${roundN(peer.total_sent+total_s,4)} GB</small>
                         </p>
-                    </div>`;let peer_key='<div class="col-sm"><small class="text-muted" style="display: flex"><strong>PEER</strong><strong style="margin-left: auto!important; opacity: 0; transition: 0.2s ease-in-out" class="text-primary">CLICK TO COPY</strong></small> <h6><samp class="ml-auto key">'+peer.id+"</samp></h6></div>";let peer_allowed_ip='<div class="col-sm"><small class="text-muted"><strong>ALLOWED IP</strong></small><h6 style="text-transform: uppercase;">'+peer.allowed_ip+"</h6></div>";let peer_latest_handshake='<div class="col-sm"> <small class="text-muted"><strong>LATEST HANDSHAKE</strong></small> <h6 style="text-transform: uppercase;">'+peer.latest_handshake+"</h6> </div>";let peer_endpoint='<div class="col-sm"><small class="text-muted"><strong>END POINT</strong></small><h6 style="text-transform: uppercase;">'+peer.endpoint+"</h6></div>";let peer_control='<div class="col-sm"><hr><div class="button-group" style="display:flex"><button type="button" class="btn btn-outline-primary btn-setting-peer btn-control" id="'+peer.id+'" data-toggle="modal"><i class="bi bi-gear-fill" data-toggle="tooltip" data-placement="bottom" title="Peer Settings"></i></button> <button type="button" class="btn btn-outline-danger btn-delete-peer btn-control" id="'+peer.id+'" data-toggle="modal"><i class="bi bi-x-circle-fill" data-toggle="tooltip" data-placement="bottom" title="Delete Peer"></i></button>';if(peer.private_key!==""){peer_control+='<div class="share_peer_btn_group" style="margin-left: auto !important; display: inline"><button type="button" class="btn btn-outline-success btn-qrcode-peer btn-control" data-imgsrc="/qrcode/'+response.name+"?id="+encodeURIComponent(peer.id)+'"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="width: 19px;" fill="#28a745"><path d="M3 11h8V3H3v8zm2-6h4v4H5V5zM3 21h8v-8H3v8zm2-6h4v4H5v-4zM13 3v8h8V3h-8zm6 6h-4V5h4v4zM13 13h2v2h-2zM15 15h2v2h-2zM13 17h2v2h-2zM17 17h2v2h-2zM19 19h2v2h-2zM15 19h2v2h-2zM17 13h2v2h-2zM19 15h2v2h-2z"/></svg></button><a href="/download/'+response.name+"?id="+encodeURIComponent(peer.id)+'" class="btn btn-outline-info btn-download-peer btn-control"><i class="bi bi-download"></i></a></div>'}peer_control+="</div>";let html='<div class="'+display_mode+'" data-id="'+peer.id+'">'+'<div class="card mb-3 card-'+peer.status+'">'+'<div class="card-body">'+'<div class="row">'+peer_name+spliter+peer_transfer+peer_key+peer_allowed_ip+peer_latest_handshake+spliter+peer_endpoint+spliter+peer_control+"</div>"+"</div>"+"</div>"+"</div></div>";result+=html});document.querySelector(".peer_list").innerHTML=result;if(response.dashboard_refresh_interval!==configuration_timeout){configuration_timeout=response.dashboard_refresh_interval;removeConfigurationInterval();setConfigurationInterval()}}}function addPeersByBulk(){let $new_add_amount=$("#new_add_amount");$add_peer.setAttribute("disabled","disabled");$add_peer.innerHTML=`Adding ${$new_add_amount.val()} peers...`;let $new_add_DNS=$("#new_add_DNS");$new_add_DNS.val(window.configurations.cleanIp($new_add_DNS.val()));let $new_add_endpoint_allowed_ip=$("#new_add_endpoint_allowed_ip");$new_add_endpoint_allowed_ip.val(window.configurations.cleanIp($new_add_endpoint_allowed_ip.val()));let $new_add_MTU=$("#new_add_MTU");let $new_add_keep_alive=$("#new_add_keep_alive");let $enable_preshare_key=$("#enable_preshare_key");let data_list=[$new_add_DNS,$new_add_endpoint_allowed_ip,$new_add_MTU,$new_add_keep_alive];if($new_add_amount.val()>0&&!$new_add_amount.hasClass("is-invalid")){if($new_add_DNS.val()!==""&&$new_add_endpoint_allowed_ip.val()!==""){let conf=conf_name;let keys=[];for(let i=0;i<$new_add_amount.val();i++){keys.push(window.wireguard.generateKeypair())}$.ajax({method:"POST",url:"/add_peer_bulk/"+conf,headers:{"Content-Type":"application/json"},data:JSON.stringify({DNS:$new_add_DNS.val(),endpoint_allowed_ip:$new_add_endpoint_allowed_ip.val(),MTU:$new_add_MTU.val(),keep_alive:$new_add_keep_alive.val(),enable_preshared_key:$enable_preshare_key.prop("checked"),keys:keys,amount:$new_add_amount.val()}),success:function(response){if(response!=="true"){$("#add_peer_alert").html(response).removeClass("d-none");data_list.forEach(ele=>ele.removeAttr("disabled"));$add_peer.removeAttribute("disabled");$add_peer.innerHTML="Save"}else{window.configurations.loadPeers("");data_list.forEach(ele=>ele.removeAttr("disabled"));$("#add_peer_form").trigger("reset");$add_peer.removeAttribute("disabled");$add_peer.innerHTML="Save";window.configurations.showToast($new_add_amount.val()+" peers added successful!");window.configurations.addModal().toggle()}}})}else{$("#add_peer_alert").html("Please fill in all required box.").removeClass("d-none");$add_peer.removeAttribute("disabled");$add_peer.innerHTML="Add"}}else{$add_peer.removeAttribute("disabled");$add_peer.innerHTML="Add"}}function deletePeers(config,peer_ids){$.ajax({method:"POST",url:"/remove_peer/"+config,headers:{"Content-Type":"application/json"},data:JSON.stringify({action:"delete",peer_ids:peer_ids}),success:function(response){if(response!=="true"){if(window.configurations.deleteModal()._isShown){$("#remove_peer_alert").html(response+$("#add_peer_alert").html()).removeClass("d-none");$("#delete_peer").removeAttr("disabled").html("Delete")}if(window.configurations.deleteBulkModal()._isShown){let $bulk_remove_peer_alert=$("#bulk_remove_peer_alert");$bulk_remove_peer_alert.html(response+$bulk_remove_peer_alert.html()).removeClass("d-none");$("#confirm_delete_bulk_peers").removeAttr("disabled").html("Delete")}}else{if(window.configurations.deleteModal()._isShown){window.configurations.deleteModal().toggle()}if(window.configurations.deleteBulkModal()._isShown){$("#confirm_delete_bulk_peers").removeAttr("disabled").html("Delete");$("#selected_peer_list").html("");$(".delete-bulk-peer-item.active").removeClass("active");window.configurations.deleteBulkModal().toggle()}window.configurations.loadPeers($("#search_peer_textbox").val());$("#alertToast").toast("show");$("#alertToast .toast-body").html("Peer deleted!");$("#delete_peer").removeAttr("disabled").html("Delete")}}})}function noResponding(message="Opps! <br> I can't connect to the server."){document.querySelectorAll(".no-response").forEach(ele=>ele.classList.add("active"));setTimeout(function(){document.querySelectorAll(".no-response").forEach(ele=>ele.classList.add("show"));document.querySelector("#right_body").classList.add("no-responding");document.querySelector(".navbar").classList.add("no-responding");document.querySelector(".no-response .container h4").innerHTML=message},10)}function removeNoResponding(){document.querySelectorAll(".no-response").forEach(ele=>ele.classList.remove("show"));document.querySelector("#right_body").classList.remove("no-responding");document.querySelector(".navbar").classList.remove("no-responding");setTimeout(function(){document.querySelectorAll(".no-response").forEach(ele=>ele.classList.remove("active"))},1010)}function setConfigurationInterval(){configuration_interval=setInterval(function(){loadPeers($("#search_peer_textbox").val())},configuration_timeout)}function removeConfigurationInterval(){clearInterval(configuration_interval)}function startProgressBar(){$progress_bar.css("width","0%").css("opacity","100").css("background","rgb(255,69,69)").css("background","linear-gradient(145deg, rgba(255,69,69,1) 0%, rgba(0,115,186,1) 100%)").css("width","25%");setTimeout(function(){stillLoadingProgressBar()},300)}function stillLoadingProgressBar(){$progress_bar.css("transition","3s ease-in-out").css("width","75%")}function endProgressBar(){$progress_bar.css("transition","0.3s ease-in-out").css("width","100%");setTimeout(function(){$progress_bar.css("opacity","0")},250)}function roundN(value,digits){let tenToN=10**digits;return Math.round(value*tenToN)/tenToN}let time=0;let count=0;let d1=new Date;function loadPeers(searchString){d1=new Date;socket.emit("get_config",{config:conf_name,search:searchString})}function parsePeers(response){if(response.status){let d2=new Date;let seconds=d2-d1;time+=seconds;count+=1;window.console.log(`Average time: ${time/count}ms`);$("#peer_loading_time").html(`Peer Loading Time: ${seconds}ms`);removeNoResponding();peers=response.data.peer_data;configurationAlert(response.data);configurationHeader(response.data);configurationPeers(response.data);$(".dot.dot-running").attr("title","Peer Connected").tooltip();$(".dot.dot-stopped").attr("title","Peer Disconnected").tooltip();$("i[data-toggle='tooltip']").tooltip();$("#conf_name").text(conf_name);if(firstLoading){firstLoading=false;$("#config_body").removeClass("firstLoading")}}else{noResponding(response.message);removeConfigurationInterval()}}function generate_key(){let keys=window.wireguard.generateKeypair();document.querySelector("#private_key").value=keys.privateKey;document.querySelector("#public_key").value=keys.publicKey;document.querySelector("#add_peer_alert").classList.add("d-none");document.querySelector("#re_generate_key i").classList.remove("rotating");document.querySelector("#enable_preshare_key").value=keys.presharedKey}function showToast(msg){$("#alertToast").toast("show");$("#alertToast .toast-body").html(msg)}function updateRefreshInterval(res,interval){if(res==="true"){configuration_timeout=interval;removeConfigurationInterval();setConfigurationInterval();showToast("Refresh Interval set to "+Math.round(interval/1e3)+" seconds")}else{$(".interval-btn-group button").removeClass("active");$('.interval-btn-group button[data-refresh-interval="'+configuration_timeout+'"]').addClass("active");showToast("Refresh Interval set unsuccessful")}}function cleanIp(val){let clean_ip=val.split(",");for(let i=0;i<clean_ip.length;i++){clean_ip[i]=clean_ip[i].trim(" ")}return clean_ip.filter(Boolean).join(",")}function trigger_ip(ip){let $ip_ele=document.querySelector(`.available-ip-item[data-ip='${ip}']`);if($ip_ele){if($ip_ele.classList.contains("active")){$ip_ele.classList.remove("active");document.querySelector(`#selected_ip_list .badge[data-ip='${ip}']`).remove()}else{$ip_ele.classList.add("active");document.querySelector("#selected_ip_list").innerHTML+=`<span class="badge badge-primary available-ip-badge" style="cursor: pointer" data-ip="${ip}">${ip}</span>`}}}function download_one_config(conf){let link=document.createElement("a");link.download=conf.filename;let blob=new Blob([conf.content],{type:"text/conf"});link.href=window.URL.createObjectURL(blob);link.click()}function toggleBulkIP(element){let $selected_peer_list=$("#selected_peer_list");let id=element.data("id");let name=element.data("name")===""?"Untitled Peer":element.data("name");if(element.hasClass("active")){element.removeClass("active");$("#selected_peer_list .badge[data-id='"+id+"']").remove()}else{element.addClass("active");$selected_peer_list.append('<span class="badge badge-danger delete-peer-bulk-badge" style="cursor: pointer; text-overflow: ellipsis; max-width: 100%; overflow-x: hidden" data-id="'+id+'">'+name+" - "+id+"</span>")}}function copyToClipboard(element){let $temp=$("<input>");$body.append($temp);$temp.val($(element).text()).trigger("select");document.execCommand("copy");$temp.remove()}function getAvailableIps(){$.ajax({url:`/available_ips/${conf_name}`,method:"GET"}).done(function(res){if(res.status===true){available_ips=res.data;let $list_group=document.querySelector("#available_ip_modal .modal-body .list-group");$list_group.innerHTML="";document.querySelector("#allowed_ips").value=available_ips[0];available_ips.forEach(ip=>$list_group.innerHTML+=`<a class="list-group-item list-group-item-action available-ip-item" style="cursor: pointer" data-ip="${ip}">${ip}</a>`)}else{document.querySelector("#allowed_ips").value=res.message;document.querySelector("#search_available_ip").setAttribute("disabled","disabled")}})}window.configurations={addModal:()=>{return addModal},deleteBulkModal:()=>{return deleteBulkModal},deleteModal:()=>{return deleteModal},ipModal:()=>{return ipModal},qrcodeModal:()=>{return qrcodeModal},settingModal:()=>{return settingModal},configurationTimeout:()=>{return configuration_timeout},loadPeers:searchString=>{loadPeers(searchString)},addPeersByBulk:()=>{addPeersByBulk()},deletePeers:(config,peers_ids)=>{deletePeers(config,peers_ids)},parsePeers:response=>{parsePeers(response)},getAvailableIps:()=>{getAvailableIps()},generateKeyPair:()=>{generate_key()},showToast:message=>{showToast(message)},updateRefreshInterval:(res,interval)=>{updateRefreshInterval(res,interval)},copyToClipboard:element=>{copyToClipboard(element)},toggleDeleteByBulkIP:element=>{toggleBulkIP(element)},downloadOneConfig:conf=>{download_one_config(conf)},triggerIp:ip=>{trigger_ip(ip)},cleanIp:val=>{return cleanIp(val)},startProgressBar:()=>{startProgressBar()},stillLoadingProgressBar:()=>{stillLoadingProgressBar()},endProgressBar:()=>{endProgressBar()}}})();let $body=$("body");let available_ips=[];let $add_peer=document.getElementById("save_peer");document.querySelector(".add_btn").addEventListener("click",()=>{window.configurations.addModal().toggle()});document.querySelector(".info").addEventListener("click",event=>{let selector=document.querySelector(".switch");if(selector.contains(event.target)){selector.style.display="none";document.querySelector("div[role=status]").style.display="inline-block";location.replace(`/switch/${selector.getAttribute("id")}`)}});document.querySelector("#private_key").addEventListener("change",event=>{let publicKey=document.querySelector("#public_key");if(event.target.value.length===44){publicKey.value=window.wireguard.generatePublicKey(event.target.value);publicKey.setAttribute("disabled","disabled")}else{publicKey.attributes.removeNamedItem("disabled");publicKey.value=""}});$("#add_modal").on("show.bs.modal",function(){window.configurations.generateKeyPair();window.configurations.getAvailableIps()}).on("hide.bs.modal",function(){$("#allowed_ips_indicator").html("")});$("#re_generate_key").on("click",function(){$("#public_key").attr("disabled","disabled");$("#re_generate_key i").addClass("rotating");window.configurations.generateKeyPair()});$("#allowed_ips").on("keyup",function(){let s=window.configurations.cleanIp($(this).val());s=s.split(",");if(available_ips.includes(s[s.length-1])){$("#allowed_ips_indicator").removeClass().addClass("text-success").html('<i class="bi bi-check-circle-fill"></i>')}else{$("#allowed_ips_indicator").removeClass().addClass("text-warning").html('<i class="bi bi-exclamation-circle-fill"></i>')}});$("#peer_name_textbox").on("keyup",function(){$(".peer_name").html($(this).val())});$add_peer.addEventListener("click",function(){let $bulk_add=$("#bulk_add");if($bulk_add.prop("checked")){if(!$("#new_add_amount").hasClass("is-invalid")){window.configurations.addPeersByBulk()}}else{let $public_key=$("#public_key");let $private_key=$("#private_key");let $allowed_ips=$("#allowed_ips");$allowed_ips.val(window.configurations.cleanIp($allowed_ips.val()));let $new_add_DNS=$("#new_add_DNS");$new_add_DNS.val(window.configurations.cleanIp($new_add_DNS.val()));let $new_add_endpoint_allowed_ip=$("#new_add_endpoint_allowed_ip");$new_add_endpoint_allowed_ip.val(window.configurations.cleanIp($new_add_endpoint_allowed_ip.val()));let $new_add_name=$("#new_add_name");let $new_add_MTU=$("#new_add_MTU");let $new_add_keep_alive=$("#new_add_keep_alive");let $enable_preshare_key=$("#enable_preshare_key");$add_peer.setAttribute("disabled","disabled");$add_peer.innerHTML="Adding...";if($allowed_ips.val()!==""&&$public_key.val()!==""&&$new_add_DNS.val()!==""&&$new_add_endpoint_allowed_ip.val()!==""){let conf=conf_name;let data_list=[$private_key,$allowed_ips,$new_add_name,$new_add_DNS,$new_add_endpoint_allowed_ip,$new_add_MTU,$new_add_keep_alive];data_list.forEach(ele=>ele.attr("disabled","disabled"));$.ajax({method:"POST",url:"/add_peer/"+conf,headers:{"Content-Type":"application/json"},data:JSON.stringify({private_key:$private_key.val(),public_key:$public_key.val(),allowed_ips:$allowed_ips.val(),name:$new_add_name.val(),DNS:$new_add_DNS.val(),endpoint_allowed_ip:$new_add_endpoint_allowed_ip.val(),MTU:$new_add_MTU.val(),keep_alive:$new_add_keep_alive.val(),enable_preshared_key:$enable_preshare_key.prop("checked"),preshared_key:$enable_preshare_key.val()}),success:function(response){if(response!=="true"){$("#add_peer_alert").html(response).removeClass("d-none");data_list.forEach(ele=>ele.removeAttr("disabled"));$add_peer.removeAttribute("disabled");$add_peer.innerHTML="Save"}else{window.configurations.loadPeers("");data_list.forEach(ele=>ele.removeAttr("disabled"));$("#add_peer_form").trigger("reset");$add_peer.removeAttribute("disabled");$add_peer.innerHTML="Save";window.configurations.showToast("Add peer successful!");window.configurations.addModal().toggle()}}})}else{$("#add_peer_alert").html("Please fill in all required box.").removeClass("d-none");$add_peer.removeAttribute("disabled");$add_peer.innerHTML="Add"}}});$("#new_add_amount").on("keyup",function(){let $bulk_amount_validation=$("#bulk_amount_validation");if($(this).val().length>0){if(isNaN($(this).val())){$(this).removeClass("is-valid").addClass("is-invalid");$bulk_amount_validation.html("Please enter a valid integer")}else if($(this).val()>available_ips.length){$(this).removeClass("is-valid").addClass("is-invalid");$bulk_amount_validation.html(`Cannot create more than ${available_ips.length} peers.`)}else if($(this).val()<1){$(this).removeClass("is-valid").addClass("is-invalid");$bulk_amount_validation.html("Please enter at least 1 or more.")}else{$(this).removeClass("is-invalid").addClass("is-valid")}}else{$(this).removeClass("is-invalid").removeClass("is-valid")}});$("#bulk_add").on("change",function(){let hide=$(".non-bulk");let amount=$("#new_add_amount");if($(this).prop("checked")===true){for(let i=0;i<hide.length;i++){$(hide[i]).attr("disabled","disabled")}amount.removeAttr("disabled")}else{for(let i=0;i<hide.length;i++){if($(hide[i]).attr("id")!=="public_key"){$(hide[i]).removeAttr("disabled")}}amount.attr("disabled","disabled")}});$("#available_ip_modal").on("show.bs.modal",()=>{document.querySelector("#add_modal").classList.add("ip_modal_open")}).on("hidden.bs.modal",()=>{document.querySelector("#add_modal").classList.remove("ip_modal_open");let ips=[];let $selected_ip_list=document.querySelector("#selected_ip_list");for(let i=0;i<$selected_ip_list.childElementCount;i++){ips.push($selected_ip_list.children[i].dataset.ip)}ips.forEach(ele=>window.configurations.triggerIp(ele))});$body.on("click",".available-ip-badge",function(){$(".available-ip-item[data-ip='"+$(this).data("ip")+"']").removeClass("active");$(this).remove()});$body.on("click",".available-ip-item",function(){window.configurations.triggerIp($(this).data("ip"))});$("#search_available_ip").on("click",function(){window.configurations.ipModal().toggle();let $allowed_ips=document.querySelector("#allowed_ips");if($allowed_ips.value.length>0){let s=$allowed_ips.value.split(",");for(let i=0;i<s.length;i++){s[i]=s[i].trim();window.configurations.triggerIp(s[i])}}}).tooltip();$("#confirm_ip").on("click",()=>{window.configurations.ipModal().toggle();let ips=[];let $selected_ip_list=$("#selected_ip_list");$selected_ip_list.children().each(function(){ips.push($(this).data("ip"))});$("#allowed_ips").val(ips.join(", "));ips.forEach(ele=>window.configurations.triggerIp(ele))});$body.on("click",".btn-qrcode-peer",function(){let src=$(this).data("imgsrc");$.ajax({url:src,method:"GET"}).done(function(res){$("#qrcode_img").attr("src",res);window.configurations.qrcodeModal().toggle()})});$body.on("click",".btn-delete-peer",function(){let peer_id=$(this).attr("id");$("#delete_peer").data("peer-id",peer_id);window.configurations.deleteModal().toggle()});$("#delete_peer").on("click",function(){$(this).attr("disabled","disabled");$(this).html("Deleting...");let config=conf_name;let peer_ids=[$(this).data("peer-id")];window.configurations.deletePeers(config,peer_ids)});$body.on("click",".btn-setting-peer",function(){let peer_id=$(this).attr("id");$("#save_peer_setting").attr("peer_id",peer_id);$.ajax({method:"POST",url:"/get_peer_data/"+conf_name,headers:{"Content-Type":"application/json"},data:JSON.stringify({id:peer_id}),success:function(response){let peer_name=response.name===""?"Untitled":response.name;$("#setting_modal .peer_name").html(peer_name);$("#setting_modal #peer_name_textbox").val(response.name);$("#setting_modal #peer_private_key_textbox").val(response.private_key);$("#setting_modal #peer_DNS_textbox").val(response.DNS);$("#setting_modal #peer_allowed_ip_textbox").val(response.allowed_ip);$("#setting_modal #peer_endpoint_allowed_ips").val(response.endpoint_allowed_ip);$("#setting_modal #peer_mtu").val(response.mtu);$("#setting_modal #peer_keep_alive").val(response.keep_alive);$("#setting_modal #peer_preshared_key_textbox").val(response.preshared_key);window.configurations.settingModal().toggle();window.configurations.endProgressBar()}})});$("#setting_modal").on("hidden.bs.modal",function(){$("#setting_peer_alert").addClass("d-none")});$("#peer_private_key_textbox").on("change",function(){let $save_peer_setting=$("#save_peer_setting");if($(this).val().length>0){$.ajax({url:"/check_key_match/"+conf_name,method:"POST",headers:{"Content-Type":"application/json"},data:JSON.stringify({private_key:$("#peer_private_key_textbox").val(),public_key:$save_peer_setting.attr("peer_id")})}).done(function(res){if(res.status==="failed"){$("#setting_peer_alert").html(res.status).removeClass("d-none")}else{$("#setting_peer_alert").addClass("d-none")}})}});$("#save_peer_setting").on("click",function(){$(this).attr("disabled","disabled");$(this).html("Saving...");let $peer_DNS_textbox=$("#peer_DNS_textbox");let $peer_allowed_ip_textbox=$("#peer_allowed_ip_textbox");let $peer_endpoint_allowed_ips=$("#peer_endpoint_allowed_ips");let $peer_name_textbox=$("#peer_name_textbox");let $peer_private_key_textbox=$("#peer_private_key_textbox");let $peer_preshared_key_textbox=$("#peer_preshared_key_textbox");let $peer_mtu=$("#peer_mtu");let $peer_keep_alive=$("#peer_keep_alive");if($peer_DNS_textbox.val()!==""&&$peer_allowed_ip_textbox.val()!==""&&$peer_endpoint_allowed_ips.val()!==""){let peer_id=$(this).attr("peer_id");let conf_id=$(this).attr("conf_id");let data_list=[$peer_name_textbox,$peer_DNS_textbox,$peer_private_key_textbox,$peer_preshared_key_textbox,$peer_allowed_ip_textbox,$peer_endpoint_allowed_ips,$peer_mtu,$peer_keep_alive];data_list.forEach(ele=>ele.attr("disabled","disabled"));$.ajax({method:"POST",url:"/save_peer_setting/"+conf_id,headers:{"Content-Type":"application/json"},data:JSON.stringify({id:peer_id,name:$peer_name_textbox.val(),DNS:$peer_DNS_textbox.val(),private_key:$peer_private_key_textbox.val(),allowed_ip:$peer_allowed_ip_textbox.val(),endpoint_allowed_ip:$peer_endpoint_allowed_ips.val(),MTU:$peer_mtu.val(),keep_alive:$peer_keep_alive.val(),preshared_key:$peer_preshared_key_textbox.val()}),success:function(response){if(response.status==="failed"){$("#setting_peer_alert").html(response.msg).removeClass("d-none")}else{window.configurations.settingModal().toggle();window.configurations.loadPeers($("#search_peer_textbox").val());$("#alertToast").toast("show");$("#alertToast .toast-body").html("Peer Saved!")}$("#save_peer_setting").removeAttr("disabled").html("Save");data_list.forEach(ele=>ele.removeAttr("disabled"))}})}else{$("#setting_peer_alert").html("Please fill in all required box.").removeClass("d-none");$("#save_peer_setting").removeAttr("disabled").html("Save")}});$(".peer_private_key_textbox_switch").on("click",function(){let $peer_private_key_textbox=$("#peer_private_key_textbox");let mode=$peer_private_key_textbox.attr("type")==="password"?"text":"password";let icon=$peer_private_key_textbox.attr("type")==="password"?"bi bi-eye-slash-fill":"bi bi-eye-fill";$peer_private_key_textbox.attr("type",mode);$(".peer_private_key_textbox_switch i").removeClass().addClass(icon)});let typingTimer;let doneTypingInterval=200;$("#search_peer_textbox").on("keyup",function(){clearTimeout(typingTimer);typingTimer=setTimeout(()=>{window.configurations.loadPeers($(this).val())},doneTypingInterval)}).on("keydown",function(){clearTimeout(typingTimer)});$body.on("change","#sort_by_dropdown",function(){$.ajax({method:"POST",data:JSON.stringify({sort:$("#sort_by_dropdown option:selected").val()}),headers:{"Content-Type":"application/json"},url:"/update_dashboard_sort",success:function(){window.configurations.loadPeers($("#search_peer_textbox").val())}})});$body.on("mouseenter",".key",function(){let label=$(this).parent().siblings().children()[1];label.style.opacity="100"}).on("mouseout",".key",function(){let label=$(this).parent().siblings().children()[1];label.style.opacity="0";setTimeout(function(){label.innerHTML="CLICK TO COPY"},200)}).on("click",".key",function(){let label=$(this).parent().siblings().children()[1];window.configurations.copyToClipboard($(this));label.innerHTML="COPIED!"});$body.on("click",".update_interval",function(){$(".interval-btn-group button").removeClass("active");let _new=$(this);_new.addClass("active");let interval=$(this).data("refresh-interval");$.ajax({method:"POST",data:"interval="+$(this).data("refresh-interval"),url:"/update_dashboard_refresh_interval",success:function(res){window.configurations.updateRefreshInterval(res,interval)}})});$body.on("click",".refresh",function(){window.configurations.loadPeers($("#search_peer_textbox").val())});$body.on("click",".display_mode",function(){$(".display-btn-group button").removeClass("active");$(this).addClass("active");let display_mode=$(this).data("display-mode");$.ajax({method:"GET",url:"/switch_display_mode/"+$(this).data("display-mode"),success:function(res){if(res==="true"){if(display_mode==="list"){Array($(".peer_list").children()).forEach(function(child){$(child).removeClass().addClass("col-12")});window.configurations.showToast("Displaying as List")}else{Array($(".peer_list").children()).forEach(function(child){$(child).removeClass().addClass("col-sm-6 col-lg-4")});window.configurations.showToast("Displaying as Grids")}}}})});let $setting_btn_menu=$(".setting_btn_menu");$setting_btn_menu.css("top",($setting_btn_menu.height()+54)*-1);let $setting_btn=$(".setting_btn");$setting_btn.on("click",function(){if($setting_btn_menu.hasClass("show")){$setting_btn_menu.removeClass("showing");setTimeout(function(){$setting_btn_menu.removeClass("show")},201)}else{$setting_btn_menu.addClass("show");setTimeout(function(){$setting_btn_menu.addClass("showing")},10)}});$("html").on("click",function(r){if(document.querySelector(".setting_btn")!==r.target){if(!document.querySelector(".setting_btn").contains(r.target)){if(!document.querySelector(".setting_btn_menu").contains(r.target)){$setting_btn_menu.removeClass("showing");setTimeout(function(){$setting_btn_menu.removeClass("show")},310)}}}});$("#delete_peers_by_bulk_btn").on("click",()=>{let $delete_bulk_modal_list=$("#delete_bulk_modal .list-group");$delete_bulk_modal_list.html("");peers.forEach(peer=>{let name;if(peer.name===""){name="Untitled Peer"}else{name=peer.name}$delete_bulk_modal_list.append('<a class="list-group-item list-group-item-action delete-bulk-peer-item" style="cursor: pointer" data-id="'+peer.id+'" data-name="'+name+'">'+name+"<br><code>"+peer.id+"</code></a>")});window.configurations.deleteBulkModal().toggle()});$body.on("click",".delete-bulk-peer-item",function(){window.configurations.toggleDeleteByBulkIP($(this))}).on("click",".delete-peer-bulk-badge",function(){window.configurations.toggleDeleteByBulkIP($(".delete-bulk-peer-item[data-id='"+$(this).data("id")+"']"))});let $selected_peer_list=document.getElementById("selected_peer_list");let changeObserver=new MutationObserver(function(){if($selected_peer_list.hasChildNodes()){$("#confirm_delete_bulk_peers").removeAttr("disabled")}else{$("#confirm_delete_bulk_peers").attr("disabled","disabled")}});changeObserver.observe($selected_peer_list,{attributes:true,childList:true,characterData:true});let confirm_delete_bulk_peers_interval;$("#confirm_delete_bulk_peers").on("click",function(){let btn=$(this);if(confirm_delete_bulk_peers_interval!==undefined){clearInterval(confirm_delete_bulk_peers_interval);confirm_delete_bulk_peers_interval=undefined;btn.html("Delete")}else{let timer=5;btn.html(`Deleting in ${timer} secs... Click to cancel`);confirm_delete_bulk_peers_interval=setInterval(function(){timer-=1;btn.html(`Deleting in ${timer} secs... Click to cancel`);if(timer===0){btn.html(`Deleting...`);btn.attr("disabled","disabled");let ips=[];$selected_peer_list.childNodes.forEach(ele=>ips.push(ele.dataset.id));window.configurations.deletePeers(conf_name,ips);clearInterval(confirm_delete_bulk_peers_interval);confirm_delete_bulk_peers_interval=undefined}},1e3)}});$("#select_all_delete_bulk_peers").on("click",function(){$(".delete-bulk-peer-item").each(function(){if(!$(this).hasClass("active")){window.configurations.toggleDeleteByBulkIP($(this))}})});$(window.configurations.deleteBulkModal()._element).on("hidden.bs.modal",function(){$(".delete-bulk-peer-item").each(function(){if($(this).hasClass("active")){window.configurations.toggleDeleteByBulkIP($(this))}})});$body.on("click",".btn-download-peer",function(e){e.preventDefault();let link=$(this).attr("href");$.ajax({url:link,method:"GET",success:function(res){window.configurations.downloadOneConfig(res)}})});$("#download_all_peers").on("click",function(){$.ajax({url:`/download_all/${conf_name}`,method:"GET",success:function(res){if(res.peers.length>0){window.wireguard.generateZipFiles(res);window.configurations.showToast("Peers' zip file download successful!")}else{window.configurations.showToast("Oops! There are no peer can be download.")}}})});
\ No newline at end of file
+                    </div>`;let peer_key='<div class="col-sm"><small class="text-muted" style="display: flex"><strong>PEER</strong><strong style="margin-left: auto!important; opacity: 0; transition: 0.2s ease-in-out" class="text-primary">CLICK TO COPY</strong></small> <h6><samp class="ml-auto key">'+peer.id+"</samp></h6></div>";let peer_allowed_ip='<div class="col-sm"><small class="text-muted"><strong>ALLOWED IP</strong></small><h6 style="text-transform: uppercase;">'+peer.allowed_ip+"</h6></div>";let peer_latest_handshake='<div class="col-sm"> <small class="text-muted"><strong>LATEST HANDSHAKE</strong></small> <h6 style="text-transform: uppercase;">'+peer.latest_handshake+"</h6> </div>";let peer_endpoint='<div class="col-sm"><small class="text-muted"><strong>END POINT</strong></small><h6 style="text-transform: uppercase;">'+peer.endpoint+"</h6></div>";let peer_control=`
+                    <div class="col-sm">
+                        <hr>
+                        <div class="button-group" style="display:flex">
+                            <button type="button" class="btn btn-outline-primary btn-setting-peer btn-control" id="${peer.id}" data-toggle="modal">
+                                <i class="bi bi-gear-fill" data-toggle="tooltip" data-placement="bottom" title="Peer Settings"></i>
+                            </button>
+                            <button type="button" class="btn btn-outline-danger btn-delete-peer btn-control" id="${peer.id}" data-toggle="modal">
+                                <i class="bi bi-x-circle-fill" data-toggle="tooltip" data-placement="bottom" title="Delete Peer"></i>
+                            </button>
+                            <button type="button" class="btn btn-outline-secondary btn-lock-peer btn-control" id="${peer.id}" data-toggle="modal">
+                                <i class="bi bi-lock-fill" data-toggle="tooltip" data-placement="bottom" title=""></i>
+                            </button>`;if(peer.private_key!==""){peer_control+='<div class="share_peer_btn_group" style="margin-left: auto !important; display: inline"><button type="button" class="btn btn-outline-success btn-qrcode-peer btn-control" data-imgsrc="/qrcode/'+response.name+"?id="+encodeURIComponent(peer.id)+'"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="width: 19px;" fill="#28a745"><path d="M3 11h8V3H3v8zm2-6h4v4H5V5zM3 21h8v-8H3v8zm2-6h4v4H5v-4zM13 3v8h8V3h-8zm6 6h-4V5h4v4zM13 13h2v2h-2zM15 15h2v2h-2zM13 17h2v2h-2zM17 17h2v2h-2zM19 19h2v2h-2zM15 19h2v2h-2zM17 13h2v2h-2zM19 15h2v2h-2z"/></svg></button><a href="/download/'+response.name+"?id="+encodeURIComponent(peer.id)+'" class="btn btn-outline-info btn-download-peer btn-control"><i class="bi bi-download"></i></a></div>'}peer_control+="</div>";let html='<div class="'+display_mode+'" data-id="'+peer.id+'">'+'<div class="card mb-3 card-'+peer.status+'">'+'<div class="card-body">'+'<div class="row">'+peer_name+spliter+peer_transfer+peer_key+peer_allowed_ip+peer_latest_handshake+spliter+peer_endpoint+spliter+peer_control+"</div>"+"</div>"+"</div>"+"</div></div>";result+=html});document.querySelector(".peer_list").innerHTML=result;if(response.dashboard_refresh_interval!==configuration_timeout){configuration_timeout=response.dashboard_refresh_interval;removeConfigurationInterval();setConfigurationInterval()}}}function addPeersByBulk(){let $new_add_amount=$("#new_add_amount");$add_peer.setAttribute("disabled","disabled");$add_peer.innerHTML=`Adding ${$new_add_amount.val()} peers...`;let $new_add_DNS=$("#new_add_DNS");$new_add_DNS.val(window.configurations.cleanIp($new_add_DNS.val()));let $new_add_endpoint_allowed_ip=$("#new_add_endpoint_allowed_ip");$new_add_endpoint_allowed_ip.val(window.configurations.cleanIp($new_add_endpoint_allowed_ip.val()));let $new_add_MTU=$("#new_add_MTU");let $new_add_keep_alive=$("#new_add_keep_alive");let $enable_preshare_key=$("#enable_preshare_key");let data_list=[$new_add_DNS,$new_add_endpoint_allowed_ip,$new_add_MTU,$new_add_keep_alive];if($new_add_amount.val()>0&&!$new_add_amount.hasClass("is-invalid")){if($new_add_DNS.val()!==""&&$new_add_endpoint_allowed_ip.val()!==""){let conf=configuration_name;let keys=[];for(let i=0;i<$new_add_amount.val();i++){keys.push(window.wireguard.generateKeypair())}$.ajax({method:"POST",url:"/add_peer_bulk/"+conf,headers:{"Content-Type":"application/json"},data:JSON.stringify({DNS:$new_add_DNS.val(),endpoint_allowed_ip:$new_add_endpoint_allowed_ip.val(),MTU:$new_add_MTU.val(),keep_alive:$new_add_keep_alive.val(),enable_preshared_key:$enable_preshare_key.prop("checked"),keys:keys,amount:$new_add_amount.val()}),success:function(response){if(response!=="true"){$("#add_peer_alert").html(response).removeClass("d-none");data_list.forEach(ele=>ele.removeAttr("disabled"));$add_peer.removeAttribute("disabled");$add_peer.innerHTML="Save"}else{window.configurations.loadPeers("");data_list.forEach(ele=>ele.removeAttr("disabled"));$("#add_peer_form").trigger("reset");$add_peer.removeAttribute("disabled");$add_peer.innerHTML="Save";window.configurations.showToast($new_add_amount.val()+" peers added successful!");window.configurations.addModal().toggle()}}})}else{$("#add_peer_alert").html("Please fill in all required box.").removeClass("d-none");$add_peer.removeAttribute("disabled");$add_peer.innerHTML="Add"}}else{$add_peer.removeAttribute("disabled");$add_peer.innerHTML="Add"}}function deletePeers(config,peer_ids){$.ajax({method:"POST",url:"/remove_peer/"+config,headers:{"Content-Type":"application/json"},data:JSON.stringify({action:"delete",peer_ids:peer_ids}),success:function(response){if(response!=="true"){if(window.configurations.deleteModal()._isShown){$("#remove_peer_alert").html(response+$("#add_peer_alert").html()).removeClass("d-none");$("#delete_peer").removeAttr("disabled").html("Delete")}if(window.configurations.deleteBulkModal()._isShown){let $bulk_remove_peer_alert=$("#bulk_remove_peer_alert");$bulk_remove_peer_alert.html(response+$bulk_remove_peer_alert.html()).removeClass("d-none");$("#confirm_delete_bulk_peers").removeAttr("disabled").html("Delete")}}else{if(window.configurations.deleteModal()._isShown){window.configurations.deleteModal().toggle()}if(window.configurations.deleteBulkModal()._isShown){$("#confirm_delete_bulk_peers").removeAttr("disabled").html("Delete");$("#selected_peer_list").html("");$(".delete-bulk-peer-item.active").removeClass("active");window.configurations.deleteBulkModal().toggle()}window.configurations.loadPeers($("#search_peer_textbox").val());$("#alertToast").toast("show");$("#alertToast .toast-body").html("Peer deleted!");$("#delete_peer").removeAttr("disabled").html("Delete")}}})}function noResponding(message="Opps! <br> I can't connect to the server."){document.querySelectorAll(".no-response").forEach(ele=>ele.classList.add("active"));setTimeout(function(){document.querySelectorAll(".no-response").forEach(ele=>ele.classList.add("show"));document.querySelector("#right_body").classList.add("no-responding");document.querySelector(".navbar").classList.add("no-responding");document.querySelector(".no-response .container h4").innerHTML=message},10)}function removeNoResponding(){document.querySelectorAll(".no-response").forEach(ele=>ele.classList.remove("show"));document.querySelector("#right_body").classList.remove("no-responding");document.querySelector(".navbar").classList.remove("no-responding");setTimeout(function(){document.querySelectorAll(".no-response").forEach(ele=>ele.classList.remove("active"))},1010)}function setConfigurationInterval(){configuration_interval=setInterval(function(){loadPeers($("#search_peer_textbox").val())},configuration_timeout)}function removeConfigurationInterval(){clearInterval(configuration_interval)}function startProgressBar(){$progress_bar.css("width","0%").css("opacity","100").css("background","rgb(255,69,69)").css("background","linear-gradient(145deg, rgba(255,69,69,1) 0%, rgba(0,115,186,1) 100%)").css("width","25%");setTimeout(function(){stillLoadingProgressBar()},300)}function stillLoadingProgressBar(){$progress_bar.css("transition","3s ease-in-out").css("width","75%")}function endProgressBar(){$progress_bar.css("transition","0.3s ease-in-out").css("width","100%");setTimeout(function(){$progress_bar.css("opacity","0")},250)}function roundN(value,digits){let tenToN=10**digits;return Math.round(value*tenToN)/tenToN}let time=0;let count=0;let d1=new Date;function loadPeers(searchString){d1=new Date;let good=true;$.ajax({method:"GET",url:`/get_config/${configuration_name}?search=${encodeURIComponent(searchString)}`,headers:{"Content-Type":"application/json"}}).done(function(response){console.log(response);parsePeers(response)}).fail(function(){noResponding();good=false});return good}function parsePeers(response){if(response.status){let d2=new Date;let seconds=d2-d1;time+=seconds;count+=1;window.console.log(`Average time: ${time/count}ms`);$("#peer_loading_time").html(`Peer Loading Time: ${seconds}ms`);removeNoResponding();peers=response.data.peer_data;configurationAlert(response.data);configurationHeader(response.data);configurationPeers(response.data);$(".dot.dot-running").attr("title","Peer Connected").tooltip();$(".dot.dot-stopped").attr("title","Peer Disconnected").tooltip();$("i[data-toggle='tooltip']").tooltip();$("#configuration_name").text(configuration_name);if(firstLoading){firstLoading=false;$("#config_body").removeClass("firstLoading")}}else{noResponding(response.message);removeConfigurationInterval()}}function generate_key(){let keys=window.wireguard.generateKeypair();document.querySelector("#private_key").value=keys.privateKey;document.querySelector("#public_key").value=keys.publicKey;document.querySelector("#add_peer_alert").classList.add("d-none");document.querySelector("#re_generate_key i").classList.remove("rotating");document.querySelector("#enable_preshare_key").value=keys.presharedKey}function showToast(msg){$("#alertToast").toast("show");$("#alertToast .toast-body").html(msg)}function updateRefreshInterval(res,interval){if(res==="true"){configuration_timeout=interval;removeConfigurationInterval();setConfigurationInterval();showToast("Refresh Interval set to "+Math.round(interval/1e3)+" seconds")}else{$(".interval-btn-group button").removeClass("active");$('.interval-btn-group button[data-refresh-interval="'+configuration_timeout+'"]').addClass("active");showToast("Refresh Interval set unsuccessful")}}function cleanIp(val){let clean_ip=val.split(",");for(let i=0;i<clean_ip.length;i++){clean_ip[i]=clean_ip[i].trim(" ")}return clean_ip.filter(Boolean).join(",")}function trigger_ip(ip){let $ip_ele=document.querySelector(`.available-ip-item[data-ip='${ip}']`);if($ip_ele){if($ip_ele.classList.contains("active")){$ip_ele.classList.remove("active");document.querySelector(`#selected_ip_list .badge[data-ip='${ip}']`).remove()}else{$ip_ele.classList.add("active");document.querySelector("#selected_ip_list").innerHTML+=`<span class="badge badge-primary available-ip-badge" style="cursor: pointer" data-ip="${ip}">${ip}</span>`}}}function download_one_config(conf){let link=document.createElement("a");link.download=conf.filename;let blob=new Blob([conf.content],{type:"text/conf"});link.href=window.URL.createObjectURL(blob);link.click()}function toggleBulkIP(element){let $selected_peer_list=$("#selected_peer_list");let id=element.data("id");let name=element.data("name")===""?"Untitled Peer":element.data("name");if(element.hasClass("active")){element.removeClass("active");$("#selected_peer_list .badge[data-id='"+id+"']").remove()}else{element.addClass("active");$selected_peer_list.append('<span class="badge badge-danger delete-peer-bulk-badge" style="cursor: pointer; text-overflow: ellipsis; max-width: 100%; overflow-x: hidden" data-id="'+id+'">'+name+" - "+id+"</span>")}}function copyToClipboard(element){let $temp=$("<input>");$body.append($temp);$temp.val($(element).text()).trigger("select");document.execCommand("copy");$temp.remove()}function getAvailableIps(){$.ajax({url:`/available_ips/${configuration_name}`,method:"GET"}).done(function(res){if(res.status===true){available_ips=res.data;let $list_group=document.querySelector("#available_ip_modal .modal-body .list-group");$list_group.innerHTML="";document.querySelector("#allowed_ips").value=available_ips[0];available_ips.forEach(ip=>$list_group.innerHTML+=`<a class="list-group-item list-group-item-action available-ip-item" style="cursor: pointer" data-ip="${ip}">${ip}</a>`)}else{document.querySelector("#allowed_ips").value=res.message;document.querySelector("#search_available_ip").setAttribute("disabled","disabled")}})}window.configurations={addModal:()=>{return addModal},deleteBulkModal:()=>{return deleteBulkModal},deleteModal:()=>{return deleteModal},ipModal:()=>{return ipModal},qrcodeModal:()=>{return qrcodeModal},settingModal:()=>{return settingModal},configurationTimeout:()=>{return configuration_timeout},loadPeers:searchString=>{loadPeers(searchString)},addPeersByBulk:()=>{addPeersByBulk()},deletePeers:(config,peers_ids)=>{deletePeers(config,peers_ids)},parsePeers:response=>{parsePeers(response)},setConfigurationName:confName=>{configuration_name=confName},getConfigurationName:()=>{return configuration_name},setActiveConfigurationName:()=>{setActiveConfigurationName()},getAvailableIps:()=>{getAvailableIps()},generateKeyPair:()=>{generate_key()},showToast:message=>{showToast(message)},updateRefreshInterval:(res,interval)=>{updateRefreshInterval(res,interval)},copyToClipboard:element=>{copyToClipboard(element)},toggleDeleteByBulkIP:element=>{toggleBulkIP(element)},downloadOneConfig:conf=>{download_one_config(conf)},triggerIp:ip=>{trigger_ip(ip)},cleanIp:val=>{return cleanIp(val)},startProgressBar:()=>{startProgressBar()},stillLoadingProgressBar:()=>{stillLoadingProgressBar()},endProgressBar:()=>{endProgressBar()}}})();let $body=$("body");let available_ips=[];let $add_peer=document.getElementById("save_peer");document.querySelector(".add_btn").addEventListener("click",()=>{window.configurations.addModal().toggle()});document.querySelector(".info").addEventListener("click",event=>{let selector=document.querySelector(".switch");if(selector.contains(event.target)){selector.style.display="none";document.querySelector("div[role=status]").style.display="inline-block";location.replace(`/switch/${selector.getAttribute("id")}`)}});document.querySelector("#private_key").addEventListener("change",event=>{let publicKey=document.querySelector("#public_key");if(event.target.value.length===44){publicKey.value=window.wireguard.generatePublicKey(event.target.value);publicKey.setAttribute("disabled","disabled")}else{publicKey.attributes.removeNamedItem("disabled");publicKey.value=""}});$("#add_modal").on("show.bs.modal",function(){window.configurations.generateKeyPair();window.configurations.getAvailableIps()}).on("hide.bs.modal",function(){$("#allowed_ips_indicator").html("")});$("#re_generate_key").on("click",function(){$("#public_key").attr("disabled","disabled");$("#re_generate_key i").addClass("rotating");window.configurations.generateKeyPair()});$("#allowed_ips").on("keyup",function(){let s=window.configurations.cleanIp($(this).val());s=s.split(",");if(available_ips.includes(s[s.length-1])){$("#allowed_ips_indicator").removeClass().addClass("text-success").html('<i class="bi bi-check-circle-fill"></i>')}else{$("#allowed_ips_indicator").removeClass().addClass("text-warning").html('<i class="bi bi-exclamation-circle-fill"></i>')}});$("#peer_name_textbox").on("keyup",function(){$(".peer_name").html($(this).val())});$add_peer.addEventListener("click",function(){let $bulk_add=$("#bulk_add");if($bulk_add.prop("checked")){if(!$("#new_add_amount").hasClass("is-invalid")){window.configurations.addPeersByBulk()}}else{let $public_key=$("#public_key");let $private_key=$("#private_key");let $allowed_ips=$("#allowed_ips");$allowed_ips.val(window.configurations.cleanIp($allowed_ips.val()));let $new_add_DNS=$("#new_add_DNS");$new_add_DNS.val(window.configurations.cleanIp($new_add_DNS.val()));let $new_add_endpoint_allowed_ip=$("#new_add_endpoint_allowed_ip");$new_add_endpoint_allowed_ip.val(window.configurations.cleanIp($new_add_endpoint_allowed_ip.val()));let $new_add_name=$("#new_add_name");let $new_add_MTU=$("#new_add_MTU");let $new_add_keep_alive=$("#new_add_keep_alive");let $enable_preshare_key=$("#enable_preshare_key");$add_peer.setAttribute("disabled","disabled");$add_peer.innerHTML="Adding...";if($allowed_ips.val()!==""&&$public_key.val()!==""&&$new_add_DNS.val()!==""&&$new_add_endpoint_allowed_ip.val()!==""){let conf=window.configurations.getConfigurationName();let data_list=[$private_key,$allowed_ips,$new_add_name,$new_add_DNS,$new_add_endpoint_allowed_ip,$new_add_MTU,$new_add_keep_alive];data_list.forEach(ele=>ele.attr("disabled","disabled"));$.ajax({method:"POST",url:"/add_peer/"+conf,headers:{"Content-Type":"application/json"},data:JSON.stringify({private_key:$private_key.val(),public_key:$public_key.val(),allowed_ips:$allowed_ips.val(),name:$new_add_name.val(),DNS:$new_add_DNS.val(),endpoint_allowed_ip:$new_add_endpoint_allowed_ip.val(),MTU:$new_add_MTU.val(),keep_alive:$new_add_keep_alive.val(),enable_preshared_key:$enable_preshare_key.prop("checked"),preshared_key:$enable_preshare_key.val()}),success:function(response){if(response!=="true"){$("#add_peer_alert").html(response).removeClass("d-none");data_list.forEach(ele=>ele.removeAttr("disabled"));$add_peer.removeAttribute("disabled");$add_peer.innerHTML="Save"}else{window.configurations.loadPeers("");data_list.forEach(ele=>ele.removeAttr("disabled"));$("#add_peer_form").trigger("reset");$add_peer.removeAttribute("disabled");$add_peer.innerHTML="Save";window.configurations.showToast("Add peer successful!");window.configurations.addModal().toggle()}}})}else{$("#add_peer_alert").html("Please fill in all required box.").removeClass("d-none");$add_peer.removeAttribute("disabled");$add_peer.innerHTML="Add"}}});$("#new_add_amount").on("keyup",function(){let $bulk_amount_validation=$("#bulk_amount_validation");if($(this).val().length>0){if(isNaN($(this).val())){$(this).removeClass("is-valid").addClass("is-invalid");$bulk_amount_validation.html("Please enter a valid integer")}else if($(this).val()>available_ips.length){$(this).removeClass("is-valid").addClass("is-invalid");$bulk_amount_validation.html(`Cannot create more than ${available_ips.length} peers.`)}else if($(this).val()<1){$(this).removeClass("is-valid").addClass("is-invalid");$bulk_amount_validation.html("Please enter at least 1 or more.")}else{$(this).removeClass("is-invalid").addClass("is-valid")}}else{$(this).removeClass("is-invalid").removeClass("is-valid")}});$("#bulk_add").on("change",function(){let hide=$(".non-bulk");let amount=$("#new_add_amount");if($(this).prop("checked")===true){for(let i=0;i<hide.length;i++){$(hide[i]).attr("disabled","disabled")}amount.removeAttr("disabled")}else{for(let i=0;i<hide.length;i++){if($(hide[i]).attr("id")!=="public_key"){$(hide[i]).removeAttr("disabled")}}amount.attr("disabled","disabled")}});$("#available_ip_modal").on("show.bs.modal",()=>{document.querySelector("#add_modal").classList.add("ip_modal_open")}).on("hidden.bs.modal",()=>{document.querySelector("#add_modal").classList.remove("ip_modal_open");let ips=[];let $selected_ip_list=document.querySelector("#selected_ip_list");for(let i=0;i<$selected_ip_list.childElementCount;i++){ips.push($selected_ip_list.children[i].dataset.ip)}ips.forEach(ele=>window.configurations.triggerIp(ele))});$body.on("click",".available-ip-badge",function(){$(".available-ip-item[data-ip='"+$(this).data("ip")+"']").removeClass("active");$(this).remove()});$body.on("click",".available-ip-item",function(){window.configurations.triggerIp($(this).data("ip"))});$("#search_available_ip").on("click",function(){window.configurations.ipModal().toggle();let $allowed_ips=document.querySelector("#allowed_ips");if($allowed_ips.value.length>0){let s=$allowed_ips.value.split(",");for(let i=0;i<s.length;i++){s[i]=s[i].trim();window.configurations.triggerIp(s[i])}}}).tooltip();$("#confirm_ip").on("click",()=>{window.configurations.ipModal().toggle();let ips=[];let $selected_ip_list=$("#selected_ip_list");$selected_ip_list.children().each(function(){ips.push($(this).data("ip"))});$("#allowed_ips").val(ips.join(", "));ips.forEach(ele=>window.configurations.triggerIp(ele))});$body.on("click",".btn-qrcode-peer",function(){let src=$(this).data("imgsrc");$.ajax({url:src,method:"GET"}).done(function(res){$("#qrcode_img").attr("src",res);window.configurations.qrcodeModal().toggle()})});$body.on("click",".btn-delete-peer",function(){let peer_id=$(this).attr("id");$("#delete_peer").data("peer-id",peer_id);window.configurations.deleteModal().toggle()});$body.on("click",".btn-lock-peer",function(){let $lockGlyph="bi-lock-fill";let $unlockGlyph="bi-unlock-fill";if($(this).children().hasClass($lockGlyph)){$(this).children().removeClass($lockGlyph).addClass($unlockGlyph);$(this).children().tooltip("hide").attr("data-original-title","Lock Peer").tooltip("show")}else{$(this).children().removeClass($unlockGlyph).addClass($lockGlyph);$(this).children().tooltip("hide").attr("data-original-title","Unlock Peer").tooltip("show")}});$("#delete_peer").on("click",function(){$(this).attr("disabled","disabled");$(this).html("Deleting...");let config=window.configurations.getConfigurationName();let peer_ids=[$(this).data("peer-id")];window.configurations.deletePeers(config,peer_ids)});$body.on("click",".btn-setting-peer",function(){let peer_id=$(this).attr("id");$("#save_peer_setting").attr("peer_id",peer_id);$.ajax({method:"POST",url:"/get_peer_data/"+window.configurations.getConfigurationName(),headers:{"Content-Type":"application/json"},data:JSON.stringify({id:peer_id}),success:function(response){let peer_name=response.name===""?"Untitled":response.name;$("#setting_modal .peer_name").html(peer_name);$("#setting_modal #peer_name_textbox").val(response.name);$("#setting_modal #peer_private_key_textbox").val(response.private_key);$("#setting_modal #peer_DNS_textbox").val(response.DNS);$("#setting_modal #peer_allowed_ip_textbox").val(response.allowed_ip);$("#setting_modal #peer_endpoint_allowed_ips").val(response.endpoint_allowed_ip);$("#setting_modal #peer_mtu").val(response.mtu);$("#setting_modal #peer_keep_alive").val(response.keep_alive);$("#setting_modal #peer_preshared_key_textbox").val(response.preshared_key);window.configurations.settingModal().toggle();window.configurations.endProgressBar()}})});$("#setting_modal").on("hidden.bs.modal",function(){$("#setting_peer_alert").addClass("d-none")});$("#peer_private_key_textbox").on("change",function(){let $save_peer_setting=$("#save_peer_setting");if($(this).val().length>0){$.ajax({url:"/check_key_match/"+window.configurations.getConfigurationName(),method:"POST",headers:{"Content-Type":"application/json"},data:JSON.stringify({private_key:$("#peer_private_key_textbox").val(),public_key:$save_peer_setting.attr("peer_id")})}).done(function(res){if(res.status==="failed"){$("#setting_peer_alert").html(res.status).removeClass("d-none")}else{$("#setting_peer_alert").addClass("d-none")}})}});$("#save_peer_setting").on("click",function(){$(this).attr("disabled","disabled");$(this).html("Saving...");let $peer_DNS_textbox=$("#peer_DNS_textbox");let $peer_allowed_ip_textbox=$("#peer_allowed_ip_textbox");let $peer_endpoint_allowed_ips=$("#peer_endpoint_allowed_ips");let $peer_name_textbox=$("#peer_name_textbox");let $peer_private_key_textbox=$("#peer_private_key_textbox");let $peer_preshared_key_textbox=$("#peer_preshared_key_textbox");let $peer_mtu=$("#peer_mtu");let $peer_keep_alive=$("#peer_keep_alive");if($peer_DNS_textbox.val()!==""&&$peer_allowed_ip_textbox.val()!==""&&$peer_endpoint_allowed_ips.val()!==""){let peer_id=$(this).attr("peer_id");let conf_id=$(this).attr("conf_id");let data_list=[$peer_name_textbox,$peer_DNS_textbox,$peer_private_key_textbox,$peer_preshared_key_textbox,$peer_allowed_ip_textbox,$peer_endpoint_allowed_ips,$peer_mtu,$peer_keep_alive];data_list.forEach(ele=>ele.attr("disabled","disabled"));$.ajax({method:"POST",url:"/save_peer_setting/"+conf_id,headers:{"Content-Type":"application/json"},data:JSON.stringify({id:peer_id,name:$peer_name_textbox.val(),DNS:$peer_DNS_textbox.val(),private_key:$peer_private_key_textbox.val(),allowed_ip:$peer_allowed_ip_textbox.val(),endpoint_allowed_ip:$peer_endpoint_allowed_ips.val(),MTU:$peer_mtu.val(),keep_alive:$peer_keep_alive.val(),preshared_key:$peer_preshared_key_textbox.val()}),success:function(response){if(response.status==="failed"){$("#setting_peer_alert").html(response.msg).removeClass("d-none")}else{window.configurations.settingModal().toggle();window.configurations.loadPeers($("#search_peer_textbox").val());$("#alertToast").toast("show");$("#alertToast .toast-body").html("Peer Saved!")}$("#save_peer_setting").removeAttr("disabled").html("Save");data_list.forEach(ele=>ele.removeAttr("disabled"))}})}else{$("#setting_peer_alert").html("Please fill in all required box.").removeClass("d-none");$("#save_peer_setting").removeAttr("disabled").html("Save")}});$(".peer_private_key_textbox_switch").on("click",function(){let $peer_private_key_textbox=$("#peer_private_key_textbox");let mode=$peer_private_key_textbox.attr("type")==="password"?"text":"password";let icon=$peer_private_key_textbox.attr("type")==="password"?"bi bi-eye-slash-fill":"bi bi-eye-fill";$peer_private_key_textbox.attr("type",mode);$(".peer_private_key_textbox_switch i").removeClass().addClass(icon)});let typingTimer;let doneTypingInterval=200;$("#search_peer_textbox").on("keyup",function(){clearTimeout(typingTimer);typingTimer=setTimeout(()=>{window.configurations.loadPeers($(this).val())},doneTypingInterval)}).on("keydown",function(){clearTimeout(typingTimer)});$body.on("change","#sort_by_dropdown",function(){$.ajax({method:"POST",data:JSON.stringify({sort:$("#sort_by_dropdown option:selected").val()}),headers:{"Content-Type":"application/json"},url:"/update_dashboard_sort",success:function(){window.configurations.loadPeers($("#search_peer_textbox").val())}})});$body.on("mouseenter",".key",function(){let label=$(this).parent().siblings().children()[1];label.style.opacity="100"}).on("mouseout",".key",function(){let label=$(this).parent().siblings().children()[1];label.style.opacity="0";setTimeout(function(){label.innerHTML="CLICK TO COPY"},200)}).on("click",".key",function(){let label=$(this).parent().siblings().children()[1];window.configurations.copyToClipboard($(this));label.innerHTML="COPIED!"});$body.on("click",".update_interval",function(){$(".interval-btn-group button").removeClass("active");let _new=$(this);_new.addClass("active");let interval=$(this).data("refresh-interval");$.ajax({method:"POST",data:"interval="+$(this).data("refresh-interval"),url:"/update_dashboard_refresh_interval",success:function(res){window.configurations.updateRefreshInterval(res,interval)}})});$body.on("click",".refresh",function(){window.configurations.loadPeers($("#search_peer_textbox").val())});$body.on("click",".display_mode",function(){$(".display-btn-group button").removeClass("active");$(this).addClass("active");let display_mode=$(this).data("display-mode");$.ajax({method:"GET",url:"/switch_display_mode/"+$(this).data("display-mode"),success:function(res){if(res==="true"){if(display_mode==="list"){Array($(".peer_list").children()).forEach(function(child){$(child).removeClass().addClass("col-12")});window.configurations.showToast("Displaying as List")}else{Array($(".peer_list").children()).forEach(function(child){$(child).removeClass().addClass("col-sm-6 col-lg-4")});window.configurations.showToast("Displaying as Grids")}}}})});let $setting_btn_menu=$(".setting_btn_menu");$setting_btn_menu.css("top",($setting_btn_menu.height()+54)*-1);let $setting_btn=$(".setting_btn");$setting_btn.on("click",function(){if($setting_btn_menu.hasClass("show")){$setting_btn_menu.removeClass("showing");setTimeout(function(){$setting_btn_menu.removeClass("show")},201)}else{$setting_btn_menu.addClass("show");setTimeout(function(){$setting_btn_menu.addClass("showing")},10)}});$("html").on("click",function(r){if(document.querySelector(".setting_btn")!==r.target){if(!document.querySelector(".setting_btn").contains(r.target)){if(!document.querySelector(".setting_btn_menu").contains(r.target)){$setting_btn_menu.removeClass("showing");setTimeout(function(){$setting_btn_menu.removeClass("show")},310)}}}});$("#delete_peers_by_bulk_btn").on("click",()=>{let $delete_bulk_modal_list=$("#delete_bulk_modal .list-group");$delete_bulk_modal_list.html("");peers.forEach(peer=>{let name;if(peer.name===""){name="Untitled Peer"}else{name=peer.name}$delete_bulk_modal_list.append('<a class="list-group-item list-group-item-action delete-bulk-peer-item" style="cursor: pointer" data-id="'+peer.id+'" data-name="'+name+'">'+name+"<br><code>"+peer.id+"</code></a>")});window.configurations.deleteBulkModal().toggle()});$body.on("click",".delete-bulk-peer-item",function(){window.configurations.toggleDeleteByBulkIP($(this))}).on("click",".delete-peer-bulk-badge",function(){window.configurations.toggleDeleteByBulkIP($(".delete-bulk-peer-item[data-id='"+$(this).data("id")+"']"))});let $selected_peer_list=document.getElementById("selected_peer_list");let changeObserver=new MutationObserver(function(){if($selected_peer_list.hasChildNodes()){$("#confirm_delete_bulk_peers").removeAttr("disabled")}else{$("#confirm_delete_bulk_peers").attr("disabled","disabled")}});changeObserver.observe($selected_peer_list,{attributes:true,childList:true,characterData:true});let confirm_delete_bulk_peers_interval;$("#confirm_delete_bulk_peers").on("click",function(){let btn=$(this);if(confirm_delete_bulk_peers_interval!==undefined){clearInterval(confirm_delete_bulk_peers_interval);confirm_delete_bulk_peers_interval=undefined;btn.html("Delete")}else{let timer=5;btn.html(`Deleting in ${timer} secs... Click to cancel`);confirm_delete_bulk_peers_interval=setInterval(function(){timer-=1;btn.html(`Deleting in ${timer} secs... Click to cancel`);if(timer===0){btn.html(`Deleting...`);btn.attr("disabled","disabled");let ips=[];$selected_peer_list.childNodes.forEach(ele=>ips.push(ele.dataset.id));window.configurations.deletePeers(window.configurations.getConfigurationName(),ips);clearInterval(confirm_delete_bulk_peers_interval);confirm_delete_bulk_peers_interval=undefined}},1e3)}});$("#select_all_delete_bulk_peers").on("click",function(){$(".delete-bulk-peer-item").each(function(){if(!$(this).hasClass("active")){window.configurations.toggleDeleteByBulkIP($(this))}})});$(window.configurations.deleteBulkModal()._element).on("hidden.bs.modal",function(){$(".delete-bulk-peer-item").each(function(){if($(this).hasClass("active")){window.configurations.toggleDeleteByBulkIP($(this))}})});$body.on("click",".btn-download-peer",function(e){e.preventDefault();let link=$(this).attr("href");$.ajax({url:link,method:"GET",success:function(res){window.configurations.downloadOneConfig(res)}})});$("#download_all_peers").on("click",function(){$.ajax({url:`/download_all/${window.configurations.getConfigurationName()}`,method:"GET",success:function(res){if(res.peers.length>0){window.wireguard.generateZipFiles(res);window.configurations.showToast("Peers' zip file download successful!")}else{window.configurations.showToast("Oops! There are no peer can be download.")}}})});
\ No newline at end of file
diff --git a/src/templates/configuration.html b/src/templates/configuration.html
index abf720f..7baa3cd 100644
--- a/src/templates/configuration.html
+++ b/src/templates/configuration.html
@@ -14,9 +14,7 @@
 	<div class="container-fluid" id="right_body">
 		{% include "sidebar.html" %}
         <div class="col-md-9 ml-sm-auto col-lg-10 px-md-4 mt-4 mb-4">
-            <div class="form-group">
-                <input type="text" class="form-control" id="search_peer_textbox" placeholder="Search Peer..." value="">
-            </div>
+
         </div>
 		<div id="config_body">
             <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4 mt-4 mb-4">
@@ -88,7 +86,7 @@
                             </div>
                         </div>
                         <div class="chartCanvasContainer" style="width: 100%; height: 300px">
-                            <canvas id="myChart" width="100" height="100"></canvas>
+                            <canvas id="totalDataUsageChartObj" width="100" height="100"></canvas>
                         </div>
                     </div>
                 </div>
@@ -96,14 +94,27 @@
                 <div class="button-div mb-3">
                     <div class="row">
                         <div class="col-sm">
-                             <div class="form-group">
-                                <label for="sort_by_dropdown"><small class="text-muted">Sort Peers By</small></label>
-                                <select class="form-control" id="sort_by_dropdown">
-                                    <option value="status">Status</option>
-                                    <option value="name">Name</option>
-                                    <option value="allowed_ip">Allowed IP</option>
-                                </select>
+                            <div class="row">
+                                <div class="col-sm">
+                                    <div class="form-group">
+                                         <label for="search_peer_textbox"><small class="text-muted">Search Peers</small></label>
+                                        <input type="text" class="form-control" id="search_peer_textbox" placeholder="Enter Peer's Name" value="">
+                                    </div>
+                                </div>
+                                <div class="col-sm">
+                                    <div class="form-group">
+                                        <label for="sort_by_dropdown"><small class="text-muted">Sort Peers By</small></label>
+                                        <select class="form-control" id="sort_by_dropdown">
+                                            <option value="status">Status</option>
+                                            <option value="name">Name</option>
+                                            <option value="allowed_ip">Allowed IP</option>
+                                        </select>
+                                    </div>
+                                </div>
                             </div>
+
+
+
                         </div>
                         <div class="col-sm">
                             <div class="form-group">
@@ -428,127 +439,10 @@
     {% include "tools.html" %}
 </body>
 {% include "footer.html" %}
-<script src="https://cdn.socket.io/4.4.1/socket.io.min.js" integrity="sha384-fKnu0iswBIqkjxrhQCTZ7qlLHOFEgNkRmK2vaO/LbTZSXdJfAu6ewRBdwHPhBo/H" crossorigin="anonymous"></script><script src="{{ url_for('static',filename='js/wireguard.min.js') }}"></script>
-<script src="{{ url_for('static',filename='js/configuration.min.js') }}"></script>
+<script src="{{ url_for('static',filename='js/configuration.js') }}"></script>
 <script>
-    /* global peers */
-    let load_timeout;
-    let load_interval = 0;
-    let conf_name = "{{ conf_data['name'] }}"
-    let peers = [];
-    $(`.sb-${conf_name}-url`).addClass("active");
-    let socket = io();
-    socket.on('connect', function() {
-        configurations.loadPeers($('#search_peer_textbox').val());
-    });
-    socket.on('get_config', function(res){
-        window.console.log(res);
-        configurations.parsePeers(res);
-    });
-
-    let chartUnit = $(".switchUnit.active").data('unit');
-    const totalDataUsageChart = document.getElementById('myChart').getContext('2d');
-    const totalDataUsageChartObj = new Chart(totalDataUsageChart, {
-        type: 'line',
-        data: {
-            labels: [],
-            datasets: [
-                {
-                    label: 'Data Sent',
-                    data: [],
-                    stroke: '#FFFFFF',
-                    borderColor: '#28a745',
-                    tension: 0.1,
-                    borderWidth: 2
-                },
-                {
-                    label: 'Data Received',
-                    data: [],
-                    stroke: '#FFFFFF',
-                    borderColor: '#007bff',
-                    tension: 0.1,
-                    borderWidth: 2
-                }
-            ]
-        },
-        options: {
-            maintainAspectRatio: false,
-            showScale: false,
-            responsive:false,
-            scales: {
-                y: {
-                    min: 0,
-                    ticks: {
-                        min: 0,
-                        callback: function(value, index, ticks) {
-                            return `${value} ${chartUnit}`
-                        }
-                    }
-                }
-            },
-            plugins: {
-                tooltip: {
-                    callbacks: {
-                        label: function(context) {
-                            return `${context.dataset.label}: ${context.parsed.y} ${chartUnit}`
-                        }
-                    }
-                }
-            }
-        }
-    });
-    $("#myChart").css("width", "100%");
-    totalDataUsageChartObj.width = $("#myChart").parent().width();
-    totalDataUsageChartObj.resize();
-    $(window).on("resize", function() {
-         totalDataUsageChartObj.resize();
-    });
-
-    $(".fullScreen").on("click", function(){
-        $(".chartContainer").addClass("fullScreen");
-        totalDataUsageChartObj.resize();
-    });
-
-
-    let mul = 1;
-    $(".switchUnit").on("click", function(){
-        $(".switchUnit").removeClass("active");
-        $(this).addClass("active");
-        if ($(this).data('unit') !== chartUnit){
-            switch ($(this).data('unit')) {
-                case "GB":
-                    if (chartUnit === "MB"){
-                        mul = 1/1024;
-                    }
-                    if (chartUnit === "KB"){
-                        mul = 1/1048576;
-                    }
-                    break;
-                case "MB":
-                    if (chartUnit === "GB"){
-                        mul = 1024
-                    }
-                    if (chartUnit === "KB"){
-                        mul = 1/1024
-                    }
-                    break;
-                case "KB":
-                   if (chartUnit === "GB"){
-                        mul = 1048576
-                    }
-                    if (chartUnit === "MB"){
-                        mul = 1024
-                    }
-                    break;
-                default:
-                    break;
-            }
-            chartUnit = $(this).data('unit');
-            totalDataUsageChartObj.data.datasets[0].data = totalDataUsageChartObj.data.datasets[0].data.map(x => x * mul);
-            totalDataUsageChartObj.data.datasets[1].data = totalDataUsageChartObj.data.datasets[1].data.map(x => x * mul);
-            totalDataUsageChartObj.update();
-        }
-
-    })
+    configurations.setConfigurationName("{{ conf_data['name'] }}");
+    configurations.setActiveConfigurationName();
+    configurations.loadPeers($('#search_peer_textbox').val());
 </script>
 </html>	
\ No newline at end of file
diff --git a/src/templates/header.html b/src/templates/header.html
index c58ebdb..12fed9a 100644
--- a/src/templates/header.html
+++ b/src/templates/header.html
@@ -14,6 +14,6 @@
     <link rel="icon" href="{{ url_for('static',filename='img/logo.png') }}"/>
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
 	<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/dashboard.css') }}">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js" integrity="sha512-QSkVNOCYLtj73J4hbmVoOV6KVZuMluZlioC+trLpewV8qMjsWqlIQvkn1KGX2StWvPMdWGBqim1xlC8krl1EKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 </head>
\ No newline at end of file