diff --git a/.gitignore b/.gitignore
index b762303..db9e370 100644
--- a/.gitignore
+++ b/.gitignore
@@ -17,3 +17,4 @@ log/**
release/*
*.db
src/db/wgdashboard.db
+.jshintrc
diff --git a/.jshintrc b/.jshintrc
new file mode 100644
index 0000000..0201c21
--- /dev/null
+++ b/.jshintrc
@@ -0,0 +1,6 @@
+{
+ "globals": {
+ "peers": true
+ },
+ "esversion": 7
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index bc7a572..0d07ab4 100644
--- a/README.md
+++ b/README.md
@@ -33,6 +33,7 @@
- **Peer transfer calculation**: each peer will now show all transfer amount (previously was only showing transfer amount from the last configuration start-up).
- **UI adjustment on running peers**: peers will have a new style indicating that it is running.
- **`wgd.sh` finally can update itself**: So now user could update the whole dashboard from `wgd.sh`, with the `update` command.
+ - **Minified JS and CSS files**: Although only a small changes on the file size, but I think is still a good practice to save a bit of bandwidth ;)
*And many other small changes for performance and bug fixes! :laughing:*
diff --git a/src/dashboard.py b/src/dashboard.py
index 2cc8844..bea2fe4 100644
--- a/src/dashboard.py
+++ b/src/dashboard.py
@@ -1062,7 +1062,7 @@ def switch(config_name):
if status == "running":
try:
check = subprocess.check_output("wg-quick down " + config_name,
- shell=True, stderr=subprocess.STDOUT)
+ shell=True, stderr=subprocess.STDOUT)
except subprocess.CalledProcessError as exc:
session["switch_msg"] = exc.output.strip().decode("utf-8")
return redirect('/')
@@ -1670,28 +1670,33 @@ def check_update():
return result
+
"""
Configure DashBoard before start web-server
"""
+
+
def run_dashboard():
init_dashboard()
- global update
- update = check_update()
- global config
+ global UPDATE
+ UPDATE = check_update()
config = configparser.ConfigParser(strict=False)
config.read('wg-dashboard.ini')
- global app_ip
+ # global app_ip
app_ip = config.get("Server", "app_ip")
- global app_port
+ # global app_port
app_port = config.get("Server", "app_port")
- global wg_conf_path
- wg_conf_path = config.get("Server", "wg_conf_path")
+ global WG_CONF_PATH
+ WG_CONF_PATH = config.get("Server", "wg_conf_path")
config.clear()
return app
+
"""
Get host and port for web-server
"""
+
+
def get_host_bind():
init_dashboard()
config = configparser.ConfigParser(strict=False)
@@ -1701,6 +1706,15 @@ def get_host_bind():
return app_ip, app_port
+
if __name__ == "__main__":
- run_dashboard()
+ UPDATE = check_update()
+ config = configparser.ConfigParser(strict=False)
+ config.read('wg-dashboard.ini')
+ # global app_ip
+ app_ip = config.get("Server", "app_ip")
+ # global app_port
+ app_port = config.get("Server", "app_port")
+ WG_CONF_PATH = config.get("Server", "wg_conf_path")
+ config.clear()
app.run(host=app_ip, debug=False, port=app_port)
diff --git a/src/static/.DS_Store b/src/static/.DS_Store
index d127be4..cf820c4 100644
Binary files a/src/static/.DS_Store and b/src/static/.DS_Store differ
diff --git a/src/static/css/dashboard.css b/src/static/css/dashboard.css
index 1c33bc5..cc7da53 100644
--- a/src/static/css/dashboard.css
+++ b/src/static/css/dashboard.css
@@ -52,6 +52,7 @@ body {
.nav-link:hover {
padding-left: 30px;
+ background-color: #dfdfdf;
}
.sidebar .nav-link .feather {
@@ -170,8 +171,24 @@ body {
box-shadow: none;
}
+.btn-qrcode-peer{
+ padding: 0 !important;
+}
+
+.btn-qrcode-peer:active, .btn-qrcode-peer:hover{
+ transform: scale(0.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{
- padding: 0 0 0 1rem;
+ margin: 0 0 0 1rem;
+ padding: 0 !important;
+ transition: all 0.4s cubic-bezier(1, -0.43, 0, 1.37);
}
.btn-control:hover{
diff --git a/src/static/css/dashboard.min.css b/src/static/css/dashboard.min.css
index 5f39e1a..f82f199 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}.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}.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:10px}.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}.share_peer_btn_group .btn-control{padding:0 0 0 1rem}.btn-control:hover{background:#fff}.btn-delete-peer:hover{color:#dc3545}.btn-setting-peer:hover{color:#007bff}.btn-download-peer:hover{color:#17a2b8}.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}@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_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}.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}
\ 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}.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:10px}.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}@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_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}.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}
\ No newline at end of file
diff --git a/src/static/img/192x192ios.png b/src/static/img/192x192ios.png
new file mode 100644
index 0000000..0bfe520
Binary files /dev/null and b/src/static/img/192x192ios.png differ
diff --git a/src/static/img/icon-192x192.png b/src/static/img/icon-192x192.png
new file mode 100644
index 0000000..5e950a2
Binary files /dev/null and b/src/static/img/icon-192x192.png differ
diff --git a/src/static/img/icon-256x256.png b/src/static/img/icon-256x256.png
new file mode 100644
index 0000000..f801831
Binary files /dev/null and b/src/static/img/icon-256x256.png differ
diff --git a/src/static/img/icon-384x384.png b/src/static/img/icon-384x384.png
new file mode 100644
index 0000000..4b34f5c
Binary files /dev/null and b/src/static/img/icon-384x384.png differ
diff --git a/src/static/img/icon-512x512.png b/src/static/img/icon-512x512.png
new file mode 100644
index 0000000..69b6883
Binary files /dev/null and b/src/static/img/icon-512x512.png differ
diff --git a/src/static/js/configuration.js b/src/static/js/configuration.js
index 1ef56f1..389f844 100644
--- a/src/static/js/configuration.js
+++ b/src/static/js/configuration.js
@@ -3,326 +3,585 @@
* Under Apache-2.0 License
*/
-/**
- * This will load peers data from server
- * @param search
- */
-function load_data(search){
- startProgressBar();
- let result = '';
- $.ajax({
- method: "GET",
- url: "/get_config/"+conf_name+"?search="+encodeURIComponent(search),
- headers:{
- "Content-Type": "application/json"
- },
- success: function (response){
- removeNoResponding();
- peers = response.peer_data;
- if (response.listen_port === "" && response.status === "stopped"){
- $("config_info_alert").append('Peer QR Code and configuration file download required a specified Listen Port.
');
+(function(){
+ /* global peers */
+ /* global conf_name */
+
+ /**
+ * Definitions
+ */
+ 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();
+
+
+ /**
+ * To show alert on the configuration page
+ * @param response
+ */
+ 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 Listen Port.';
+ 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 Address need to be specified to have peers connect to it.';
+ document.querySelector("#config_info_alert").appendChild(configAlert);
+ }
+ }
+
+ /**
+ * Parse all responded information onto the configuration header
+ * @param response
+ */
+ function configurationHeader(response) {
+ let $conf_status_btn = document.getElementById("conf_status_btn");
+ if (response.checked === "checked"){
+ $conf_status_btn.innerHTML = ` ON`;
+ }else{
+ $conf_status_btn.innerHTML = ` OFF`;
+ }
+ $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}`;
+ 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"));
+ }
+
+ /**
+ * Parse all responded information onto the peers list
+ * @param response
+ */
+ function configurationPeers(response) {
+ let result = "";
+ if (response.peer_data.length === 0){
+ document.querySelector(".peer_list").innerHTML = `Oops! No peers found ‘︿’
`;
+ }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 = '';
+ let peer_name =
+ '' +
+ '
'+ (peer.name === "" ? "Untitled" : peer.name) +'
' +
+ '
' +
+ '';
+ let peer_transfer = ' '+ roundN(peer.total_receive + total_r, 4) +' GB
'+ roundN(peer.total_sent + total_s, 4) +' GB
PEERCLICK TO COPY
'+peer.id+'
';
+ let peer_allowed_ip = 'ALLOWED IP
'+peer.allowed_ip+'
';
+ let peer_latest_handshake = ' LATEST HANDSHAKE
'+peer.latest_handshake+'
';
+ let peer_endpoint = 'END POINT
'+peer.endpoint+'
';
+ let peer_control = '
';
+ let html = '
' +
+ '
' +
+ '
' +
+ '
' +
+ peer_name +
+ spliter +
+ peer_transfer +
+ peer_key +
+ peer_allowed_ip +
+ peer_latest_handshake +
+ spliter +
+ peer_endpoint +
+ spliter +
+ peer_control +
+ '
' +
+ '
' +
+ '
' +
+ '
Configuration Address need to be specified to have peers connect to it.
');
- }
- let $conf_status_btn = $("#conf_status_btn");
- if (response.checked === "checked"){
- $conf_status_btn.html(' ON');
- }else{
- $conf_status_btn.html(' OFF');
- }
- $("#sort_by_dropdown option").removeAttr("selected");
- $("#sort_by_dropdown option[value="+response.sort_tag+"]").attr("selected", "selected");
- $(".interval-btn-group button").removeClass("active");
- $("button[data-refresh-interval="+response.dashboard_refresh_interval+"]").addClass("active");
- $(".display-btn-group button").removeClass("active");
- $("button[data-display-mode="+response.peer_display_mode+"]").addClass("active");
+ }
+ }
-
-
- $("#conf_status").html(response.status+'');
- $("#conf_connected_peers").html(response.running_peer);
- $("#conf_total_data_usage").html(response.total_data_usage[0] +" GB");
- $("#conf_total_data_received").html(response.total_data_usage[2] +" GB");
- $("#conf_total_data_sent").html(response.total_data_usage[1]+" GB");
- $("#conf_public_key").html(response.public_key);
- $("#conf_listen_port").html(response.listen_port === "" ? "N/A":response.listen_port);
- $("#conf_address").html(response.conf_address);
- $(".info h6").removeClass("info_loading");
- $conf_status_btn.removeClass("info_loading");
-
-
-
- if (response.peer_data.length === 0){
- $(".peer_list").html('Oops! No peers found ‘︿’
');
- }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 = '';
- let peer_name =
- '' +
- '
'+ (peer.name === "" ? "Untitled" : peer.name) +'
' +
- '
' +
- '';
- let peer_transfer = ' '+ roundN(peer.total_receive + total_r, 4) +' GB
'+ roundN(peer.total_sent + total_s, 4) +' GB
PEERCLICK TO COPY
'+peer.id+'
';
- let peer_allowed_ip = 'ALLOWED IP
'+peer.allowed_ip+'
';
- let peer_latest_handshake = ' LATEST HANDSHAKE
'+peer.latest_handshake+'
';
- let peer_endpoint = 'END POINT
'+peer.endpoint+'
';
- let peer_control = '
';
- let html = '
' +
- '
' +
- '
' +
- '
' +
- peer_name +
- spliter +
- peer_transfer +
- peer_key +
- peer_allowed_ip +
- peer_latest_handshake +
- spliter +
- peer_endpoint +
- spliter +
- peer_control +
- '
' +
- '
' +
- '
' +
- '
'+peer['id']+'');
+ let name;
+ if (peer.name === "") { name = "Untitled Peer"; }
+ else { name = peer.name; }
+ $delete_bulk_modal_list.append(''+name+'
'+peer.id+'');
});
- deleteBulkModal.toggle();
+ window.configurations.deleteBulkModal().toggle();
});
-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(''+name+' - '+id+'')
- }
-}
-
+/**
+ * When the item or tag of delete peers by bulk got clicked
+ */
$body.on("click", ".delete-bulk-peer-item", function(){
- toggleBulkIP($(this));
+ window.configurations.toggleDeleteByBulkIP($(this));
}).on("click", ".delete-peer-bulk-badge", function(){
- toggleBulkIP($(".delete-bulk-peer-item[data-id='" + $(this).data("id") + "']"));
+ 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(mutationsList, observer){
+
+/**
+ * The change observer to observe when user choose 1 or more peers to delete
+ * @type {MutationObserver}
+ */
+let changeObserver = new MutationObserver(function(){
if ($selected_peer_list.hasChildNodes()){
$("#confirm_delete_bulk_peers").removeAttr("disabled");
}else{
@@ -920,10 +1170,13 @@ changeObserver.observe($selected_peer_list, {
attributes: true,
childList: true,
characterData: true
-})
+});
+let confirm_delete_bulk_peers_interval;
-let confirm_delete_bulk_peers_interval = undefined;
+/**
+ * When the user clicked the delete button in the delete peers by bulk
+ */
$("#confirm_delete_bulk_peers").on("click", function(){
let btn = $(this);
if (confirm_delete_bulk_peers_interval !== undefined){
@@ -941,43 +1194,45 @@ $("#confirm_delete_bulk_peers").on("click", function(){
btn.attr("disabled", "disabled");
let ips = [];
$selected_peer_list.childNodes.forEach((ele) => ips.push(ele.dataset.id));
- deletePeers(btn.data("conf"), ips);
+ window.configurations.deletePeers(btn.data("conf"), ips);
clearInterval(confirm_delete_bulk_peers_interval);
confirm_delete_bulk_peers_interval = undefined;
}
- }, 1000)
+ }, 1000);
}
});
+/**
+ * Select all peers to delete
+ */
$("#select_all_delete_bulk_peers").on("click", function(){
$(".delete-bulk-peer-item").each(function(){
if (!$(this).hasClass("active")) {
- toggleBulkIP($(this));
+ window.configurations.toggleDeleteByBulkIP($(this));
}
});
});
-$(deleteBulkModal._element).on("hidden.bs.modal", function(){
+/**
+ * When delete peers by bulk window is hidden
+ */
+$(window.configurations.deleteBulkModal()._element).on("hidden.bs.modal", function(){
$(".delete-bulk-peer-item").each(function(){
if ($(this).hasClass("active")) {
- toggleBulkIP($(this));
+ window.configurations.toggleDeleteByBulkIP($(this));
}
});
});
-// Download Peers
-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 download_all_config(confs){
- wireguard.generateZipFiles(confs);
-}
+/**
+ * ==============
+ * Download Peers
+ * ==============
+ */
+/**
+ * When the download peers button got clicked
+ */
$body.on("click", ".btn-download-peer", function(e){
e.preventDefault();
let link = $(this).attr("href");
@@ -985,22 +1240,25 @@ $body.on("click", ".btn-download-peer", function(e){
"url": link,
"method": "GET",
success: function(res){
- download_one_config(res);
+ window.configurations.downloadOneConfig(res);
}
});
});
+/**
+ * When the download all peers got clicked
+ */
$("#download_all_peers").on("click", function(){
$.ajax({
"url": $(this).data("url"),
"method": "GET",
success: function(res){
if (res.peers.length > 0){
- download_all_config(res);
+ 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/static/js/configuration.min.js b/src/static/js/configuration.min.js
index b140d2e..eda4ebf 100644
--- a/src/static/js/configuration.min.js
+++ b/src/static/js/configuration.min.js
@@ -1 +1 @@
-function load_data(search){startProgressBar();let result="";$.ajax({method:"GET",url:"/get_config/"+conf_name+"?search="+encodeURIComponent(search),headers:{"Content-Type":"application/json"},success:function(response){removeNoResponding();peers=response.peer_data;if(response.listen_port===""&&response.status==="stopped"){$("config_info_alert").append('Peer QR Code and configuration file download required a specified Listen Port.
')}if(response.conf_address==="N/A"){$("config_info_alert").append('Configuration Address need to be specified to have peers connect to it.
')}let $conf_status_btn=$("#conf_status_btn");if(response.checked==="checked"){$conf_status_btn.html(' ON')}else{$conf_status_btn.html(' OFF')}$("#sort_by_dropdown option").removeAttr("selected");$("#sort_by_dropdown option[value="+response.sort_tag+"]").attr("selected","selected");$(".interval-btn-group button").removeClass("active");$("button[data-refresh-interval="+response.dashboard_refresh_interval+"]").addClass("active");$(".display-btn-group button").removeClass("active");$("button[data-display-mode="+response.peer_display_mode+"]").addClass("active");$("#conf_status").html(response.status+'');$("#conf_connected_peers").html(response.running_peer);$("#conf_total_data_usage").html(response.total_data_usage[0]+" GB");$("#conf_total_data_received").html(response.total_data_usage[2]+" GB");$("#conf_total_data_sent").html(response.total_data_usage[1]+" GB");$("#conf_public_key").html(response.public_key);$("#conf_listen_port").html(response.listen_port===""?"N/A":response.listen_port);$("#conf_address").html(response.conf_address);$(".info h6").removeClass("info_loading");$conf_status_btn.removeClass("info_loading");if(response.peer_data.length===0){$(".peer_list").html('Oops! No peers found ‘︿’
')}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='';let peer_name=''+'
'+(peer.name===""?"Untitled":peer.name)+"
"+'
'+"";let peer_transfer=' '+roundN(peer.total_receive+total_r,4)+' GB
'+roundN(peer.total_sent+total_s,4)+" GB
PEERCLICK TO COPY
'+peer.id+"
";let peer_allowed_ip='ALLOWED IP
'+peer.allowed_ip+"
";let peer_latest_handshake=' LATEST HANDSHAKE
'+peer.latest_handshake+"
";let peer_endpoint='END POINT
'+peer.endpoint+"
";let peer_control='
";let html='
'+'
'+'
'+'
'+peer_name+spliter+peer_transfer+peer_key+peer_allowed_ip+peer_latest_handshake+spliter+peer_endpoint+spliter+peer_control+"
"+"
"+"
"+"
"+peer["id"]+"")});deleteBulkModal.toggle()});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(''+name+" - "+id+"")}}$body.on("click",".delete-bulk-peer-item",function(){toggleBulkIP($(this))}).on("click",".delete-peer-bulk-badge",function(){toggleBulkIP($(".delete-bulk-peer-item[data-id='"+$(this).data("id")+"']"))});let $selected_peer_list=document.getElementById("selected_peer_list");let changeObserver=new MutationObserver(function(mutationsList,observer){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=undefined;$("#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));deletePeers(btn.data("conf"),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")){toggleBulkIP($(this))}})});$(deleteBulkModal._element).on("hidden.bs.modal",function(){$(".delete-bulk-peer-item").each(function(){if($(this).hasClass("active")){toggleBulkIP($(this))}})});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 download_all_config(confs){wireguard.generateZipFiles(confs)}$body.on("click",".btn-download-peer",function(e){e.preventDefault();let link=$(this).attr("href");$.ajax({url:link,method:"GET",success:function(res){download_one_config(res)}})});$("#download_all_peers").on("click",function(){$.ajax({url:$(this).data("url"),method:"GET",success:function(res){if(res.peers.length>0){download_all_config(res)}}})});
\ No newline at end of file
+(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 Listen Port.";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 Address need to be specified to have peers connect to it.";document.querySelector("#config_info_alert").appendChild(configAlert)}}function configurationHeader(response){let $conf_status_btn=document.getElementById("conf_status_btn");if(response.checked==="checked"){$conf_status_btn.innerHTML=` ON`}else{$conf_status_btn.innerHTML=` OFF`}$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}`;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=`Oops! No peers found ‘︿’
`}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='';let peer_name=''+'
'+(peer.name===""?"Untitled":peer.name)+"
"+'
'+"";let peer_transfer=' '+roundN(peer.total_receive+total_r,4)+' GB
'+roundN(peer.total_sent+total_s,4)+" GB
PEERCLICK TO COPY
'+peer.id+"
";let peer_allowed_ip='ALLOWED IP
'+peer.allowed_ip+"
";let peer_latest_handshake=' LATEST HANDSHAKE
'+peer.latest_handshake+"
";let peer_endpoint='END POINT
'+peer.endpoint+"
";let peer_control='
";let html='
'+'
'+'
'+'
'+peer_name+spliter+peer_transfer+peer_key+peer_allowed_ip+peer_latest_handshake+spliter+peer_endpoint+spliter+peer_control+"
"+"
"+"
"+"
"+peer.id+"")});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(btn.data("conf"),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:$(this).data("url"),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/static/js/configurationsTools.js b/src/static/js/configurationsTools.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/static/js/configurationsTools.min.js b/src/static/js/configurationsTools.min.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/templates/configuration.html b/src/templates/configuration.html
index e888aee..041df3d 100644
--- a/src/templates/configuration.html
+++ b/src/templates/configuration.html
@@ -246,7 +246,7 @@
×
- This action is not reversible.
+ This action is not reversible.