2022-01-13 01:53:36 +01:00
<!-- configuration.html - < WGDashboard > - Copyright(C) 2021 Donald Zou [https://github.com/donaldzou] -->
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 >
2022-01-13 01:53:36 +01:00
< div class = "no-response" >
< div class = "container" >
< h1 class = "text-white display-1" > < i class = "bi bi-emoji-frown-fill" > < / i > < / h1 >
< h4 class = "text-white" > Oops!< br > I can't connect to the server.< / h4 >
< / div >
< / div >
2021-05-04 07:32:34 +02:00
{% include "navbar.html" %}
2022-01-13 01:53:36 +01:00
< div class = "container-fluid" id = "right_body" >
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 >
2022-03-04 14:28:54 +01:00
< div class = "row chartContainer" >
2022-03-03 14:46:23 +01:00
< div class = "col-sm" >
< div class = "chartTitle" >
< h6 > Data Usage / Refresh Interval< / h6 >
< div class = "chartControl" style = "margin-left: auto" >
< div class = "btn-group" role = "group" >
< button class = "btn btn-outline-primary btn-sm switchUnit active" data-unit = "GB" > GB< / button >
< button class = "btn btn-outline-primary btn-sm switchUnit" data-unit = "MB" > MB< / button >
< button class = "btn btn-outline-primary btn-sm switchUnit" data-unit = "KB" > KB< / button >
2022-03-04 14:28:54 +01:00
< button class = "btn btn-outline-primary btn-sm fullScreen" > < i class = "bi bi-fullscreen" > < / i > < / button >
2022-03-03 14:46:23 +01:00
< / div >
< / div >
< / div >
2022-03-04 14:28:54 +01:00
< div class = "chartCanvasContainer" style = "width: 100%; height: 300px" >
2022-03-03 14:46:23 +01:00
< canvas id = "myChart" width = "100" height = "100" > < / canvas >
< / div >
< / div >
< / div >
< hr >
2021-12-28 03:01:02 +01:00
< 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-08 21:26:17 +01:00
< div class = "btn-manage-group" >
< button type = "button" class = "btn btn-primary add_btn" > < i class = "bi bi-plus-circle-fill" style = "" > < / i > < / button >
< button type = "button" class = "btn btn-secondary setting_btn" > < i class = "bi bi-three-dots" > < / i > < / button >
< div class = "setting_btn_menu" >
< a class = "text-danger" id = "delete_peers_by_bulk_btn" > < i class = "bi bi-trash-fill" > < / i > Delete Peers< / a >
2022-01-13 01:53:36 +01:00
< a class = "text-info" id = "download_all_peers" data-url = "/download_all/{{conf_data['name']}}" > < i class = "bi bi-cloud-download-fill" > < / i > Download All Peers< / a >
2022-01-08 21:26:17 +01:00
< / div >
< / div >
2021-12-28 03:01:02 +01:00
< / div >
< / div >
< div class = "row peer_list" > < / div >
2022-01-19 15:08:27 +01:00
< small id = "peer_loading_time" class = "text-muted" > < / small >
2021-12-28 03:01:02 +01:00
< / 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" >
2022-01-08 21:26:17 +01:00
< h5 class = "modal-title" id = "staticBackdropLabel" > Add New Peer< / h5 >
2020-10-23 07:31:10 +02:00
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
< / div >
< div class = "modal-body" >
2022-01-08 21:26:17 +01:00
< div >
< div class = "custom-control custom-switch" style = "margin-bottom: 1rem" >
< 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 >
2022-01-06 21:17:43 +01:00
< / div >
2022-01-08 21:26:17 +01:00
< div class = "form-group" style = "margin: 0" >
< input type = "number" class = "form-control" id = "new_add_amount" min = "1" placeholder = "Amount" disabled >
2022-01-13 01:53:36 +01:00
< div id = "bulk_amount_validation" class = "invalid-feedback" > < / div >
2022-01-06 21:17:43 +01:00
< / div >
2022-01-08 21:26:17 +01:00
2022-01-06 21:17:43 +01:00
< / 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-03-03 14:46:23 +01:00
< div class = "form-group" >
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" >
2022-03-03 14:46:23 +01:00
< input type = "text" class = "form-control non-bulk" id = "private_key" aria-describedby = "private_key" >
2021-08-06 05:15:50 +02:00
< div class = "input-group-append" >
2022-03-03 14:46:23 +01:00
< button type = "button" class = "btn btn-danger non-bulk" 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-03-03 14:46:23 +01:00
< div class = "form-group" >
2021-08-05 06:45:15 +02:00
< label for = "public_key" > Public Key < code > (Required)< / code > < / label >
2022-03-03 14:46:23 +01:00
< input type = "text" class = "form-control non-bulk" 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-03-03 14:46:23 +01:00
< div class = "col-sm-6" >
2021-08-14 23:13:16 +02:00
< div class = "form-group" >
< label for = "new_add_name" > Name< / label >
2022-03-03 14:46:23 +01:00
< input type = "text" class = "form-control non-bulk" id = "new_add_name" >
2021-08-14 23:13:16 +02:00
< / div >
< / div >
2022-03-03 14:46:23 +01:00
< 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" >
2022-03-03 14:46:23 +01:00
< input type = "text" class = "form-control non-bulk" id = "allowed_ips" >
2022-01-04 22:32:23 +01:00
< div class = "input-group-append" >
2022-03-03 14:46:23 +01:00
< button type = "button" class = "btn btn-primary non-bulk" id = "search_available_ip" data-toggle = "tooltip" data-placement = "top" title = "Search Available IPs" >
2022-01-04 22:32:23 +01:00
< 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 >
2022-01-17 02:35:24 +01:00
< h6 style = "margin: 0" > This action is not reversible.< / h6 >
2020-12-26 06:17:42 +01:00
< / 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" >
2022-01-17 02:35:24 +01:00
< h5 class = "modal-title peer_name" > < / h5 >
2021-04-03 02:48:00 +02:00
< 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 >
< 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-08 21:26:17 +01:00
< div class = "modal fade" id = "available_ip_modal" data-backdrop = "static" data-keyboard = "false" >
2022-01-04 22:32:23 +01:00
< 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 >
2022-01-17 02:35:24 +01:00
< div id = "selected_ip_list" > < / div >
2022-01-04 22:32:23 +01:00
< / 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 >
2022-01-08 21:26:17 +01:00
< div class = "modal fade" id = "delete_bulk_modal" data-backdrop = "static" data-keyboard = "false" >
< div class = "modal-dialog modal-dialog-centered" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title" id = "staticBackdropLabel" > Select Peers to Delete< / h5 >
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
< / div >
2022-01-17 02:35:24 +01:00
< div id = "bulk_remove_peer_alert" class = "alert alert-danger alert-dismissible fade show d-none" role = "alert" style = "margin: 1rem" >
2022-01-08 21:26:17 +01:00
< button type = "button" class = "close" data-dismiss = "alert" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
< / div >
< div class = "selected_peers" style = "padding: 1rem; border-bottom: 1px solid #dee2e6;" >
< small class = "text-muted" > < strong > SELECTED PEERS (CLICK TO REMOVE)< / strong > < / small >
< div id = "selected_peer_list" > < / div >
< / div >
< div class = "modal-body" style = "max-height: 400px; overflow-y: scroll;" >
< div class = "list-group" > < / div >
< / div >
< div class = "modal-footer" >
< a class = "text-danger" id = "select_all_delete_bulk_peers" style = "cursor: pointer; margin-right: auto;" > < small > < strong > SELECT ALL< / strong > < / small > < / a >
< button type = "button" class = "btn btn-danger" id = "confirm_delete_bulk_peers" disabled data-conf = "{{conf_data['name']}}" > Delete< / button >
< / div >
< / div >
< / div >
< / div >
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" >
2022-01-17 02:35:24 +01:00
< h5 class = "modal-title" > QR Code< / h5 >
2021-08-05 06:45:15 +02:00
< 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-19 16:27:17 +01:00
< script src = "https://cdn.socket.io/4.4.1/socket.io.min.js" integrity = "sha384-fKnu0iswBIqkjxrhQCTZ7qlLHOFEgNkRmK2vaO/LbTZSXdJfAu6ewRBdwHPhBo/H" crossorigin = "anonymous" > < / script > < script src = "{{ url_for('static',filename='js/wireguard.min.js') }}" > < / script >
2021-12-30 21:21:25 +01:00
< script src = "{{ url_for('static',filename='js/configuration.min.js') }}" > < / script >
2021-04-03 02:48:00 +02:00
< script >
2022-01-17 02:35:24 +01:00
/* global peers */
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'] }}"
2022-01-08 21:26:17 +01:00
let peers = [];
2022-03-03 14:46:23 +01:00
$(`.sb-${conf_name}-url`).addClass("active");
2022-01-19 16:27:17 +01:00
let socket = io();
2022-03-03 14:46:23 +01:00
socket.on('connect', function() {
configurations.loadPeers($('#search_peer_textbox').val());
});
socket.on('get_config', function(res){
window.console.log(res);
configurations.parsePeers(res);
});
let chartUnit = $(".switchUnit.active").data('unit');
const totalDataUsageChart = document.getElementById('myChart').getContext('2d');
const totalDataUsageChartObj = new Chart(totalDataUsageChart, {
type: 'line',
data: {
labels: [],
datasets: [
{
2022-03-04 14:28:54 +01:00
label: 'Data Sent',
data: [],
stroke: '#FFFFFF',
borderColor: '#28a745',
tension: 0.1,
borderWidth: 2
},
{
label: 'Data Received',
data: [],
stroke: '#FFFFFF',
borderColor: '#007bff',
tension: 0.1,
borderWidth: 2
}
]
2022-03-03 14:46:23 +01:00
},
options: {
2022-03-04 14:28:54 +01:00
maintainAspectRatio: false,
showScale: false,
2022-03-03 14:46:23 +01:00
responsive:false,
scales: {
y: {
2022-03-04 14:28:54 +01:00
min: 0,
2022-03-03 14:46:23 +01:00
ticks: {
2022-03-04 14:28:54 +01:00
min: 0,
2022-03-03 14:46:23 +01:00
callback: function(value, index, ticks) {
return `${value} ${chartUnit}`
}
}
}
2022-03-04 14:28:54 +01:00
},
plugins: {
tooltip: {
callbacks: {
label: function(context) {
return `${context.dataset.label}: ${context.parsed.y} ${chartUnit}`
}
}
}
2022-03-03 14:46:23 +01:00
}
}
});
$("#myChart").css("width", "100%");
totalDataUsageChartObj.width = $("#myChart").parent().width();
totalDataUsageChartObj.resize();
$(window).on("resize", function() {
totalDataUsageChartObj.resize();
});
2022-03-04 14:28:54 +01:00
$(".fullScreen").on("click", function(){
$(".chartContainer").addClass("fullScreen");
totalDataUsageChartObj.resize();
});
2022-03-03 14:46:23 +01:00
let mul = 1;
$(".switchUnit").on("click", function(){
$(".switchUnit").removeClass("active");
$(this).addClass("active");
if ($(this).data('unit') !== chartUnit){
switch ($(this).data('unit')) {
case "GB":
if (chartUnit === "MB"){
mul = 1/1024;
}
if (chartUnit === "KB"){
mul = 1/1048576;
}
break;
case "MB":
if (chartUnit === "GB"){
mul = 1024
}
if (chartUnit === "KB"){
mul = 1/1024
}
break;
case "KB":
if (chartUnit === "GB"){
mul = 1048576
}
if (chartUnit === "MB"){
mul = 1024
}
break;
default:
break;
}
chartUnit = $(this).data('unit');
totalDataUsageChartObj.data.datasets[0].data = totalDataUsageChartObj.data.datasets[0].data.map(x => x * mul);
totalDataUsageChartObj.data.datasets[1].data = totalDataUsageChartObj.data.datasets[1].data.map(x => x * mul);
totalDataUsageChartObj.update();
}
2022-01-19 16:27:17 +01:00
2022-03-03 14:46:23 +01:00
})
2021-04-03 02:48:00 +02:00
< / script >
2020-10-23 07:31:10 +02:00
< / html >
