2021-12-28 03:01:02 +01:00
< html lang = "en" >
2021-08-14 23:13:16 +02:00
{% with title=title%}
{% include "header.html"%}
{% endwith %}
2020-10-18 07:10:13 +02:00
< body >
2021-05-04 07:32:34 +02:00
{% include "navbar.html" %}
2020-10-18 07:10:13 +02:00
< div class = "container-fluid" >
2021-05-04 07:32:34 +02:00
{% include "sidebar.html" %}
2021-08-14 23:13:16 +02:00
< div class = "col-md-9 ml-sm-auto col-lg-10 px-md-4 mt-4 mb-4" >
< div class = "form-group" >
2021-12-29 18:17:44 +01:00
< input type = "text" class = "form-control" id = "search_peer_textbox" placeholder = "Search Peer..." value = "" >
2021-08-14 23:13:16 +02:00
< / div >
< / div >
2021-12-28 03:01:02 +01:00
< div id = "config_body" >
< main role = "main" class = "col-md-9 ml-sm-auto col-lg-10 px-md-4 mt-4 mb-4" >
< div class = "info mt-4" >
< div id = "config_info_alert" > < / div >
< div class = "row" >
< div class = "col" >
< small class = "text-muted" > < strong > CONFIGURATION< / strong > < / small >
< h1 class = "mb-3" > < samp id = "conf_name" > {{ title }}< / samp > < / h1 >
< / div >
< div class = "col" >
2021-12-29 18:17:44 +01:00
< small class = "text-muted" > < strong > SWITCH< / strong > < / small > < br >
< div id = "conf_status_btn" class = "info_loading" > < / div >
2021-12-28 03:01:02 +01:00
< div class = "spinner-border text-primary" role = "status" style = "display: none; margin-top: 10px" >
< span class = "sr-only" > Loading...< / span >
< / div >
< / div >
< div class = "w-100" > < / div >
< div class = "col" >
< small class = "text-muted" > < strong > STATUS< / strong > < / small >
2021-12-29 18:17:44 +01:00
< h6 style = "text-transform: uppercase;" id = "conf_status" class = "info_loading" > < / h6 >
2021-12-28 03:01:02 +01:00
< / div >
< div class = "col" >
< small class = "text-muted" > < strong > CONNECTED PEERS< / strong > < / small >
2021-12-29 18:17:44 +01:00
< h6 style = "text-transform: uppercase;" id = "conf_connected_peers" class = "info_loading" > < / h6 >
2021-12-28 03:01:02 +01:00
< / div >
< div class = "col-sm" >
< small class = "text-muted" > < strong > TOTAL DATA USAGE< / strong > < / small >
2021-12-29 18:17:44 +01:00
< h6 style = "text-transform: uppercase;" id = "conf_total_data_usage" class = "info_loading" > < / h6 >
2021-12-28 03:01:02 +01:00
< / div >
< div class = "col-sm" >
< small class = "text-muted" > < strong > TOTAL RECEIVED< / strong > < / small >
2021-12-29 18:17:44 +01:00
< h6 style = "text-transform: uppercase;" id = "conf_total_data_received" class = "info_loading" > < / h6 >
2021-12-28 03:01:02 +01:00
< / div >
< div class = "col-sm" >
< small class = "text-muted" > < strong > TOTAL SENT< / strong > < / small >
2021-12-29 18:17:44 +01:00
< h6 style = "text-transform: uppercase;" id = "conf_total_data_sent" class = "info_loading" > < / h6 >
2021-12-28 03:01:02 +01:00
< / div >
< div class = "w-100" > < / div >
< div class = "col-sm" >
< small class = "text-muted" >
< strong > PUBLIC KEY< / strong >
< strong style = "margin-left: auto!important; opacity: 0; transition: 0.2s ease-in-out" class = "text-primary" > CLICK TO COPY< / strong >
< / small >
2021-12-29 18:17:44 +01:00
< h6 class = "info_loading" > < samp class = "key" id = "conf_public_key" > < / samp > < / h6 >
2021-12-28 03:01:02 +01:00
< / div >
< div class = "col-sm" >
< small class = "text-muted" > < strong > LISTEN PORT< / strong > < / small >
2021-12-29 18:17:44 +01:00
< h6 style = "text-transform: uppercase;" class = "info_loading" > < samp id = "conf_listen_port" > < / samp > < / h6 >
2021-12-28 03:01:02 +01:00
< / div >
< div class = "col-sm" >
< small class = "text-muted" > < strong > ADDRESS< / strong > < / small >
2021-12-29 18:17:44 +01:00
< h6 style = "text-transform: uppercase;" class = "info_loading" > < samp id = "conf_address" > < / samp > < / h6 >
2021-12-28 03:01:02 +01:00
< / div >
< / div >
< / div >
< hr >
< 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 >
< / div >
< div class = "col-sm" >
< div class = "form-group" >
< label > < small class = "text-muted" > Refresh Interval< / small > < / label > < br >
< div class = "btn-group interval-btn-group" role = "group" style = "width: 100%" >
2022-01-04 22:32:23 +01:00
< button style = "width: 20%" type = "button" class = "btn btn-outline-primary btn-group-label refresh" data-toggle = "tooltip" data-placement = "bottom" title = "Refresh Peers" > < i class = "bi bi-arrow-repeat" > < / i > < / button >
2021-12-28 03:01:02 +01:00
< button style = "width: 20%" type = "button" class = "btn btn-outline-primary update_interval" data-refresh-interval = "5000" > 5s< / button >
< button style = "width: 20%" type = "button" class = "btn btn-outline-primary update_interval" data-refresh-interval = "10000" > 10s< / button >
< button style = "width: 20%" type = "button" class = "btn btn-outline-primary update_interval" data-refresh-interval = "30000" > 30s< / button >
< button style = "width: 20%" type = "button" class = "btn btn-outline-primary update_interval" data-refresh-interval = "60000" > 1m< / button >
< / div >
< / div >
< / div >
< div class = "col-sm" >
< div class = "form-group" >
< label > < small class = "text-muted" > Display Mode< / small > < / label > < br >
< div class = "btn-group display-btn-group" role = "group" style = "width: 100%" >
< button style = "width: 20%" type = "button" class = "btn btn-outline-primary display_mode" data-display-mode = "grid" > < i class = "bi bi-grid-fill" style = "font-size: 1.5rem;" > < / i > < / button >
< button style = "width: 20%" type = "button" class = "btn btn-outline-primary display_mode" data-display-mode = "list" > < i class = "bi bi-list" style = "font-size: 1.5rem;" > < / i > < / button >
< / div >
< / div >
< / div >
2021-12-29 18:17:44 +01:00
< button type = "button" class = "btn btn-primary add_btn" >
2021-12-28 03:01:02 +01:00
< i class = "bi bi-plus-circle-fill" style = "" > < / i > Add Peer
< / button >
< / div >
< / div >
< div class = "row peer_list" > < / div >
< / main >
< / div >
2020-10-18 07:10:13 +02:00
< / div >
2022-01-04 22:32:23 +01:00
2020-12-26 06:17:42 +01:00
< div class = "modal fade" id = "add_modal" data-backdrop = "static" data-keyboard = "false" tabindex = "-1"
2020-10-23 07:31:10 +02:00
aria-labelledby="staticBackdropLabel" aria-hidden="true">
2021-08-06 05:15:50 +02:00
< div class = "modal-dialog modal-dialog-centered modal-lg" >
2020-10-23 07:31:10 +02:00
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title" id = "staticBackdropLabel" > Add a new peer< / h5 >
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
< / div >
< div class = "modal-body" >
2020-12-27 05:42:41 +01:00
< div id = "add_peer_alert" class = "alert alert-danger alert-dismissible fade show d-none" role = "alert" >
< button type = "button" class = "close" data-dismiss = "alert" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
< / div >
2021-07-02 19:23:04 +02:00
< form id = "add_peer_form" >
2021-08-05 06:45:15 +02:00
< div class = "alert alert-warning" role = "alert" style = "font-size: 0.8rem" >
To generate QR code for this new peer, you need to provide the private key, or use the generated key. If you don't need the QR code, simply remove the private key and insert your existed public key.
< / div >
2021-08-06 05:15:50 +02:00
< div class = "form-group" >
< div >
< label for = "private_key" > Private Key< / label >
2021-08-05 06:45:15 +02:00
< / div >
2021-08-06 05:15:50 +02:00
< div class = "input-group" >
2021-12-29 18:17:44 +01:00
< input type = "text" class = "form-control" id = "private_key" aria-describedby = "private_key" >
2021-08-06 05:15:50 +02:00
< div class = "input-group-append" >
2022-01-04 22:32:23 +01:00
< button type = "button" class = "btn btn-danger" id = "re_generate_key" data-toggle = "tooltip" data-placement = "top" title = "Regenerate Key" > < i class = "bi bi-arrow-repeat" > < / i > < / button >
2021-08-06 05:15:50 +02:00
< / div >
2021-08-05 06:45:15 +02:00
< / div >
2021-08-06 05:15:50 +02:00
< / div >
2020-10-23 07:31:10 +02:00
< div class = "form-group" >
2021-08-05 06:45:15 +02:00
< label for = "public_key" > Public Key < code > (Required)< / code > < / label >
< input type = "text" class = "form-control" id = "public_key" aria-describedby = "public_key" disabled >
2020-10-23 07:31:10 +02:00
< / div >
2021-08-06 05:15:50 +02:00
< div class = "row" >
2021-08-14 23:13:16 +02:00
< div class = "col-sm-6" >
< div class = "form-group" >
< label for = "new_add_name" > Name< / label >
< input type = "text" class = "form-control" id = "new_add_name" >
< / div >
< / div >
< div class = "col-sm-6" >
2021-08-06 05:15:50 +02:00
< div class = "form-group" >
< label for = "allowed_ips" > Allowed IPs < code > (Required)< / code > < / label >
2022-01-04 22:32:23 +01:00
< div class = "input-group" >
< input type = "text" class = "form-control" id = "allowed_ips" >
< div class = "input-group-append" >
< button type = "button" class = "btn btn-primary" id = "search_available_ip" data-toggle = "tooltip" data-placement = "top" title = "Search Available IPs" >
< i class = "bi bi-search" > < / i >
< / button >
< / div >
< / div >
< p style = "position: absolute; top: 4px; right: 1rem;" class = "text-success" id = "allowed_ips_indicator" > < / p >
2021-08-06 05:15:50 +02:00
< / div >
< / div >
2021-08-14 23:13:16 +02:00
< div class = "col-sm-6" >
2021-08-06 05:15:50 +02:00
< div class = "form-group" >
2021-08-15 05:30:05 +02:00
< label for = "new_add_DNS" > DNS < code > (Required)< / code > < / label >
2021-08-14 23:13:16 +02:00
< input type = "text" class = "form-control" id = "new_add_DNS" value = "{{ DNS }}" >
2021-08-06 05:15:50 +02:00
< / div >
< / div >
2021-08-14 23:13:16 +02:00
< div class = "col-sm-6" >
2021-08-06 05:15:50 +02:00
< div class = "form-group" >
2021-08-15 05:30:05 +02:00
< label for = "new_add_endpoint_allowed_ip" > Endpoint Allowed IPs < code > (Required)< / code > < / label >
2021-08-14 23:13:16 +02:00
< input type = "text" class = "form-control" id = "new_add_endpoint_allowed_ip" value = "{{ endpoint_allowed_ip }}" >
2021-08-06 05:15:50 +02:00
< / div >
< / div >
2021-09-08 18:39:25 +02:00
< div class = "col-sm-6" >
< div class = "form-group" >
< label for = "new_add_MTU" > MTU< / label >
< input type = "text" class = "form-control" id = "new_add_MTU" value = "{{ mtu }}" >
< / div >
< / div >
< div class = "col-sm-6" >
< div class = "form-group" >
< label for = "new_add_keep_alive" > Persistent keepalive< / label >
< input type = "text" class = "form-control" id = "new_add_keep_alive" value = "{{ keep_alive }}" >
2021-12-29 18:17:44 +01:00
< / div >
< / div >
< div class = "col-sm" >
< div class = "form-check" >
< input class = "form-check-input" type = "checkbox" id = "enable_preshare_key" name = "enable_preshare_key" value = "enable_psk" >
< label class = "form-check-label" for = "enable_preshare_key" > Use Pre-shared Key< / label >
2021-09-08 18:39:25 +02:00
< / div >
< / div >
2021-08-06 05:15:50 +02:00
< / div >
2020-10-23 07:31:10 +02:00
< / form >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-secondary" data-dismiss = "modal" > Cancel< / button >
< button type = "button" class = "btn btn-primary" id = "save_peer" conf_id = {{conf_data['name']}} > Save< / button >
< / div >
< / div >
< / div >
< / div >
2020-12-26 06:17:42 +01:00
< div class = "modal fade" id = "delete_modal" data-backdrop = "static" data-keyboard = "false" tabindex = "-1"
aria-labelledby="staticBackdropLabel" aria-hidden="true">
< div class = "modal-dialog modal-dialog-centered" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title" id = "staticBackdropLabel" > Are you sure to delete this peer?< / h5 >
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
< / div >
< div class = "modal-body" >
2020-12-27 05:42:41 +01:00
< div id = "remove_peer_alert" class = "alert alert-danger alert-dismissible fade show d-none" role = "alert" >
< button type = "button" class = "close" data-dismiss = "alert" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
< / div >
2020-12-26 06:17:42 +01:00
< h6 > This action is not reversible.< / h6 >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-secondary" data-dismiss = "modal" > No< / button >
< button type = "button" class = "btn btn-danger" id = "delete_peer" conf_id = {{conf_data['name']}} peer_id = "" > Yes< / button >
< / div >
< / div >
< / div >
< / div >
2021-04-03 02:48:00 +02:00
< div class = "modal fade" id = "setting_modal" data-backdrop = "static" data-keyboard = "false" tabindex = "-1"
aria-labelledby="staticBackdropLabel" aria-hidden="true" conf_id={{conf_data['name']}} peer_id="">
2021-08-06 05:15:50 +02:00
< div class = "modal-dialog modal-dialog-centered modal-lg" >
2021-04-03 02:48:00 +02:00
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "peer_name" > < / h5 >
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
< / div >
< div class = "modal-body" >
2021-08-06 05:15:50 +02:00
< div id = "setting_peer_alert" class = "alert alert-danger alert-dismissible fade show d-none" role = "alert" >
< button type = "button" class = "close" data-dismiss = "alert" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
< / div >
2021-12-29 18:17:44 +01:00
< div class = "mb-3" >
< label for = "peer_private_key_textbox" class = "form-label" > Private Key < code > (Required for QR Code and download)< / code > < / label >
< input type = "password" class = "form-control" id = "peer_private_key_textbox" style = "padding-right: 40px" >
< a class = "peer_private_key_textbox_switch" > < i class = "bi bi-eye-fill" > < / i > < / a >
< / div >
2021-09-08 18:39:25 +02:00
< div >
2021-12-29 18:17:44 +01:00
< label for = "peer_preshared_key_textbox" class = "form-label" > Pre-Shared Key< / label >
< input type = "text" class = "form-control" id = "peer_preshared_key_textbox" >
2021-08-06 05:15:50 +02:00
< / div >
2021-09-08 18:39:25 +02:00
< hr >
2021-04-03 02:48:00 +02:00
2021-09-08 18:39:25 +02:00
< div class = "row" >
< div class = "col-sm-6" >
< div class = "mb-3" >
< label for = "peer_name_textbox" class = "form-label" > Name< / label >
< input type = "text" class = "form-control" id = "peer_name_textbox" placeholder = "" >
< / div >
< / div >
< div class = "col-sm-6" >
< div class = "mb-3" >
< label for = "peer_allowed_ip_textbox" class = "form-label" > Allowed IPs < code > (Required)< / code > < / label >
< input type = "text" class = "form-control" id = "peer_allowed_ip_textbox" >
< / div >
< / div >
< div class = "col-sm-6" >
< div class = "mb-3" >
< label for = "peer_DNS_textbox" class = "form-label" > DNS < code > (Required)< / code > < / label >
< input type = "text" class = "form-control" id = "peer_DNS_textbox" >
< / div >
< / div >
< div class = "col-sm-6" >
< div class = "mb-3" >
< label for = "peer_endpoint_allowed_ips" class = "form-label" > Endpoint Allowed IPs < code > (Required)< / code > < / label >
< input type = "text" class = "form-control" id = "peer_endpoint_allowed_ips" >
< / div >
< / div >
< div class = "col-sm-6" >
< div class = "mb-3" >
< label for = "peer_mtu" class = "form-label" > MTU< / label >
< input type = "text" class = "form-control" id = "peer_mtu" >
< / div >
< / div >
< div class = "col-sm-6" >
< div class = "mb-3" >
< label for = "peer_keep_alive" class = "form-label" > Persistent Keepalive< / label >
< input type = "text" class = "form-control" id = "peer_keep_alive" >
< / div >
< / div >
2021-08-06 05:15:50 +02:00
< / div >
2021-04-03 02:48:00 +02:00
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-secondary" data-dismiss = "modal" > Cancel< / button >
2021-08-06 05:15:50 +02:00
< button type = "button" class = "btn btn-primary" id = "save_peer_setting" conf_id = {{conf_data['name']}} peer_id = "" > Save< / button >
2021-04-03 02:48:00 +02:00
< / div >
< / div >
< / div >
< / div >
2022-01-04 22:32:23 +01:00
< div class = "modal fade" id = "available_ip_modal" data-backdrop = "static" data-keyboard = "false" tabindex = "1" aria-labelledby = "staticBackdropLabel" aria-hidden = "true" >
< div class = "modal-dialog modal-dialog-centered" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title" id = "staticBackdropLabel" > Select available IP< / h5 >
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
< / div >
< div class = "selected_ip" style = "padding: 1rem; border-bottom: 1px solid #dee2e6;" >
< small class = "text-muted" > < strong > SELECTED IP (CLICK TO REMOVE)< / strong > < / small >
< div id = "selected_ip_list" >
< / div >
< / div >
< div class = "modal-body" style = "max-height: 400px; overflow-y: scroll;" >
< div class = "list-group" > < / div >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-secondary" data-dismiss = "modal" > Cancel< / button >
< button type = "button" class = "btn btn-primary" id = "confirm_ip" > Confirm< / button >
< / div >
< / div >
< / div >
< / div >
2021-04-03 02:48:00 +02:00
2021-08-05 06:45:15 +02:00
< div class = "modal fade" id = "qrcode_modal" data-backdrop = "static" data-keyboard = "false" tabindex = "-1"
aria-labelledby="staticBackdropLabel" aria-hidden="true">
< div class = "modal-dialog modal-dialog-centered" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "peer_name" > QR Code< / h5 >
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
< / div >
< div class = "modal-body" >
2022-01-04 22:32:23 +01:00
< img id = "qrcode_img" style = "width: 100%" >
2021-08-05 06:45:15 +02:00
< / div >
< / div >
< / div >
< / div >
2021-04-03 02:48:00 +02:00
< div class = "position-fixed top-0 right-0 p-3" style = "z-index: 5; right: 0; top: 50px;" >
< div id = "alertToast" class = "toast hide" role = "alert" aria-live = "assertive" aria-atomic = "true" data-delay = "5000" >
< div class = "toast-header" >
2021-12-29 18:17:44 +01:00
< strong class = "mr-auto" > WGDashboard< / strong >
2021-04-03 02:48:00 +02:00
< button type = "button" class = "ml-2 mb-1 close" data-dismiss = "toast" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
< / div >
< div class = "toast-body" >
< / div >
< / div >
< / div >
2021-05-14 00:00:40 +02:00
{% include "tools.html" %}
2020-10-18 07:10:13 +02:00
< / body >
2021-05-05 03:26:40 +02:00
{% include "footer.html" %}
2021-12-30 21:21:25 +01:00
< script src = "{{ url_for('static',filename='js/configuration.min.js') }}" > < / script >
2022-01-04 22:32:23 +01:00
2021-04-03 02:48:00 +02:00
< script >
2021-12-28 03:01:02 +01:00
let load_timeout;
let load_interval = 0;
2021-12-29 18:17:44 +01:00
let conf_name = "{{ conf_data['name'] }}"
2021-08-14 23:13:16 +02:00
$(".sb-"+conf_name+"-url").addClass("active");
function load_data(search){
startProgressBar()
2021-12-28 03:01:02 +01:00
let result = '';
2021-04-03 02:48:00 +02:00
$.ajax({
method: "GET",
2021-08-14 23:13:16 +02:00
url: "/get_config/"+conf_name+"?search="+encodeURIComponent(search),
2021-04-03 02:48:00 +02:00
headers:{
"Content-Type": "application/json"
},
success: function (response){
2021-12-28 03:01:02 +01:00
{# Check all status #}
if (response["listen_port"] === "" & & response["status"] === "stopped"){
$("config_info_alert").append('< div class = "alert alert-warning" role = "alert" > Peer QR Code and configuration file download required a specified < strong > Listen Port< / strong > .< / div > ')
}
if (response["conf_address"] === "N/A"){
$("config_info_alert").append('< div class = "alert alert-warning" role = "alert" > Configuration < strong > Address< / strong > need to be specified to have peers connect to it.< / div > ')
}
{# Status Button #}
if (response["checked"] === "checked"){
$("#conf_status_btn").html('< a href = "#" id = "'+response[" name " ] + ' " ' + response [ " checked " ] + ' class = "switch text-primary" > < i class = "bi bi-toggle2-on" > < / i > ON< / a > ');
}else{
$("#conf_status_btn").html('< a href = "#" id = "'+response[" name " ] + ' " ' + response [ " checked " ] + ' class = "switch text-primary" > < i class = "bi bi-toggle2-off" > < / i > OFF< / a > ');
}
$("#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"]+'< span class = "dot dot-'+response[" status " ] + ' " > < / span > ');
$("#conf_connected_peers").html(response["running_peer"]);
2021-12-29 18:17:44 +01:00
$("#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");
2021-12-28 03:01:02 +01:00
$("#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"]);
2021-12-29 18:17:44 +01:00
$(".info h6").removeClass("info_loading");
$("#conf_status_btn").removeClass("info_loading")
2021-12-28 03:01:02 +01:00
if (response["peer_data"].length === 0){
$(".peer_list").html('< 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){
2021-12-29 18:17:44 +01:00
let total_r = 0;
let total_s = 0;
2022-01-02 20:44:27 +01:00
total_r += peer["cumu_receive"];
total_s += peer["cumu_sent"];
2021-12-28 03:01:02 +01:00
let spliter = '< div class = "w-100" > < / div > ';
2021-12-29 18:17:44 +01:00
let peer_name =
'< div class = "col-sm display" style = "display: flex; align-items: center; margin-bottom: 0.2rem" > ' +
'< h5 style = "margin: 0;" > '+ (peer["name"] === "" ? "Untitled" : peer["name"]) +'< / h5 > ' +
'< h6 style = "text-transform: uppercase; margin: 0; margin-left: auto !important;" > < span class = "dot dot-'+peer[" status " ] + ' " style = "margin-left: auto !important;" data-toggle = "tooltip" data-placement = "left" title = "Peer Running" > < / span > < / h6 > ' +
'< / div > ';
let peer_transfer = '< div class = "col-12 peer_data_group" style = "text-align: right; display: flex; margin-bottom: 0.5rem" > < p class = "text-primary" style = "text-transform: uppercase; margin-bottom: 0; margin-right: 1rem" > < small > < i class = "bi bi-arrow-down-right" > < / i > '+ roundN(peer["total_receive"] + total_r, 4) +' GB< / small > < / p > < p class = "text-success" style = "text-transform: uppercase; margin-bottom: 0" > < small > < i class = "bi bi-arrow-up-right" > < / i > '+ roundN(peer["total_sent"] + total_s, 4) +' GB< / small > < / p > < / div > '
2021-12-28 03:01:02 +01:00
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 > ';
2022-01-04 22:32:23 +01:00
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 > ';
2021-12-28 03:01:02 +01:00
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" img_src = "/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 > ';
2022-01-04 22:32:23 +01:00
let html = '< div class = "'+display_mode+'" data-id = "'+peer[" id " ] + ' " > ' +
2021-12-28 03:01:02 +01:00
'< 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;
})
$(".peer_list").html(result);
if (response["dashboard_refresh_interval"] !== load_interval){
load_interval = response["dashboard_refresh_interval"];
clearInterval(load_timeout);
load_timeout = setInterval(function (){
load_data($('#search_peer_textbox').val());
},response["dashboard_refresh_interval"])
}
}
{#$("#config_body").html(response);#}
2021-12-29 18:17:44 +01:00
$(".dot.dot-running").attr("title","Peer Running").tooltip();
$(".dot.dot-stopped").attr("title","Peer Stopped").tooltip();
2022-01-04 22:32:23 +01:00
$("i[data-toggle='tooltip']").tooltip();
2021-12-29 18:17:44 +01:00
{#$("#search_peer_textbox").css("display", "block")#}
2021-09-08 18:39:25 +02:00
endProgressBar()
2021-04-03 02:48:00 +02:00
}
})
}
2021-12-28 03:01:02 +01:00
$(function(){
2021-08-14 23:13:16 +02:00
load_data($('#search_peer_textbox').val());
2021-04-03 02:48:00 +02:00
});
< / script >
2021-12-29 18:17:44 +01:00
2020-10-23 07:31:10 +02:00
< / html >
