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 >
2022-01-06 21:17:43 +01:00
< button type = "button" class = "btn btn-primary add_btn" > < i class = "bi bi-plus-circle-fill" style = "" > < / i > Add Peer< / button >
2021-12-28 03:01:02 +01:00
< / 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" >
2022-01-06 21:17:43 +01:00
< div class = "row" >
< div class = "col-sm" style = "display: flex; align-items: center;" >
< div class = "custom-control custom-switch" >
< input class = "custom-control-input" type = "checkbox" id = "bulk_add" >
< label class = "custom-control-label" for = "bulk_add" > < strong > Add Peers by bulk< / strong > < / label >
< i class = "bi bi-question-circle-fill" style = "cursor: pointer" data-container = "body" data-toggle = "popover" data-placement = "right" data-trigger = "click" data-content = "By adding peers by bulk, each peer's name will be auto generated, and Allowed IP will be assign to the next available IP." > < / i >
< / div >
< / div >
< div class = "col-sm" >
< div class = "form-group" style = "margin: 0" >
{# < label for = "new_add_amount" > Amount< / label > #}
< input type = "number" class = "form-control" id = "new_add_amount" min = "1" placeholder = "Amount" disabled >
< / div >
< / div >
< / div >
< hr >
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" >
2022-01-06 21:17:43 +01:00
< div class = "form-group non-bulk" >
2021-08-06 05:15:50 +02:00
< 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 >
2022-01-06 21:17:43 +01:00
< div class = "form-group non-bulk" >
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" >
2022-01-06 21:17:43 +01:00
< div class = "col-sm-6 non-bulk" >
2021-08-14 23:13:16 +02:00
< div class = "form-group" >
< label for = "new_add_name" > Name< / label >
< input type = "text" class = "form-control" id = "new_add_name" >
< / div >
< / div >
2022-01-06 21:17:43 +01:00
< div class = "col-sm-6 non-bulk" >
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 >
2022-01-06 21:17:43 +01:00
< button type = "button" class = "btn btn-primary" id = "save_peer" conf_id = {{conf_data['name']}} > Add< / button >
2020-10-23 07:31:10 +02:00
< / 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" %}
2022-01-06 21:17:43 +01:00
< script src = "{{ url_for('static',filename='js/wireguard.min.js') }}" > < / script >
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 >
