mirror of
https://github.com/WGDashboard/WGDashboard.git
synced 2026-08-04 06:53:00 +00:00
v2.2 beta 4
This commit is contained in:
Donald Cheng Hong Zou
Binary file not shown.
|
Before Width: | Height: | Size: 145 KiB |
Vendored
+7
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,262 @@
|
||||
body {
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
.feather {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
/*
|
||||
* Sidebar
|
||||
*/
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 100; /* Behind the navbar */
|
||||
padding: 48px 0 0; /* Height of navbar */
|
||||
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
/*@media (max-width: 767.98px) {*/
|
||||
/* .sidebar {*/
|
||||
/* top: 5rem;*/
|
||||
/* }*/
|
||||
/*}*/
|
||||
|
||||
.sidebar-sticky {
|
||||
position: relative;
|
||||
top: 0;
|
||||
height: calc(100vh - 48px);
|
||||
padding-top: .5rem;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
|
||||
}
|
||||
|
||||
@supports ((position: -webkit-sticky) or (position: sticky)) {
|
||||
.sidebar-sticky {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar .nav-link {
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
transition: 0.2s cubic-bezier(0.82, -0.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:hover .feather,
|
||||
.sidebar .nav-link.active .feather {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.sidebar-heading {
|
||||
font-size: .75rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/*
|
||||
* Navbar
|
||||
*/
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.dot-stopped{
|
||||
background-color: #6c757d!important;
|
||||
}
|
||||
|
||||
|
||||
.info h6{
|
||||
line-break: anywhere;
|
||||
}
|
||||
|
||||
.btn-control{
|
||||
border: none !important;
|
||||
padding: 0 1rem 0 0;
|
||||
}
|
||||
|
||||
.share_peer_btn_group .btn-control{
|
||||
padding: 0 0 0 1rem;
|
||||
}
|
||||
|
||||
.btn-control:hover{
|
||||
background: white;
|
||||
}
|
||||
|
||||
.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: white;
|
||||
}
|
||||
|
||||
/*.peer_data_group{*/
|
||||
/* text-align: right;*/
|
||||
/*}*/
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.peer_data_group{
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.index-switch{
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
main{
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
/*.add_btn{*/
|
||||
/* position: fixed;*/
|
||||
/* bottom: 1.75rem;*/
|
||||
/* right: 1.75rem;*/
|
||||
/* z-index: 1000;*/
|
||||
/* padding: 0.75rem 1.5rem;*/
|
||||
/* border-radius: 3rem;*/
|
||||
/* font-size: 1rem;*/
|
||||
/*}*/
|
||||
|
||||
@-webkit-keyframes rotating /* Safari and Chrome */ {
|
||||
from {
|
||||
-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 {
|
||||
from {
|
||||
-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);
|
||||
}
|
||||
}
|
||||
.rotating::before {
|
||||
-webkit-animation: rotating 0.75s linear infinite;
|
||||
-moz-animation: rotating 0.75s linear infinite;
|
||||
-ms-animation: rotating 0.75s linear infinite;
|
||||
-o-animation: rotating 0.75s linear infinite;
|
||||
animation: rotating 0.75s linear infinite;
|
||||
}
|
||||
|
||||
.peer_private_key_textbox_switch{
|
||||
position: absolute;
|
||||
right: 2rem;
|
||||
transform: translateY(-28px);
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.progress-bar{
|
||||
transition: 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.key{
|
||||
transition: 0.2s ease-in-out;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.key:hover{
|
||||
color: #007bff;
|
||||
}
|
||||
@@ -1,249 +0,0 @@
|
||||
body {
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
.feather {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
/*
|
||||
* Sidebar
|
||||
*/
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 100; /* Behind the navbar */
|
||||
padding: 48px 0 0; /* Height of navbar */
|
||||
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
/*@media (max-width: 767.98px) {*/
|
||||
/* .sidebar {*/
|
||||
/* top: 5rem;*/
|
||||
/* }*/
|
||||
/*}*/
|
||||
|
||||
.sidebar-sticky {
|
||||
position: relative;
|
||||
top: 0;
|
||||
height: calc(100vh - 48px);
|
||||
padding-top: .5rem;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
|
||||
}
|
||||
|
||||
@supports ((position: -webkit-sticky) or (position: sticky)) {
|
||||
.sidebar-sticky {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar .nav-link {
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
transition: 0.2s cubic-bezier(0.82, -0.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:hover .feather,
|
||||
.sidebar .nav-link.active .feather {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.sidebar-heading {
|
||||
font-size: .75rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/*
|
||||
* Navbar
|
||||
*/
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.dot-stopped{
|
||||
background-color: #6c757d!important;
|
||||
}
|
||||
|
||||
|
||||
.info h6{
|
||||
line-break: anywhere;
|
||||
}
|
||||
|
||||
.btn-control{
|
||||
border: none !important;
|
||||
padding: 0 1rem 0 0;
|
||||
}
|
||||
|
||||
.share_peer_btn_group .btn-control{
|
||||
padding: 0 0 0 1rem;
|
||||
}
|
||||
|
||||
.btn-control:hover{
|
||||
background: white;
|
||||
}
|
||||
|
||||
.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: white;
|
||||
}
|
||||
|
||||
.peer_data_group{
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.peer_data_group{
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.index-switch{
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
main{
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
/*.add_btn{*/
|
||||
/* position: fixed;*/
|
||||
/* bottom: 1.75rem;*/
|
||||
/* right: 1.75rem;*/
|
||||
/* z-index: 1000;*/
|
||||
/* padding: 0.75rem 1.5rem;*/
|
||||
/* border-radius: 3rem;*/
|
||||
/* font-size: 1rem;*/
|
||||
/*}*/
|
||||
|
||||
@-webkit-keyframes rotating /* Safari and Chrome */ {
|
||||
from {
|
||||
-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 {
|
||||
from {
|
||||
-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);
|
||||
}
|
||||
}
|
||||
.rotating::before {
|
||||
-webkit-animation: rotating 0.75s linear infinite;
|
||||
-moz-animation: rotating 0.75s linear infinite;
|
||||
-ms-animation: rotating 0.75s linear infinite;
|
||||
-o-animation: rotating 0.75s linear infinite;
|
||||
animation: rotating 0.75s linear infinite;
|
||||
}
|
||||
|
||||
.peer_private_key_textbox_switch{
|
||||
position: absolute;
|
||||
right: 2rem;
|
||||
transform: translateY(-28px);
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
Before Width: | Height: | Size: 49 KiB After Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 92 KiB |
Vendored
+7045
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
+7
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -71,7 +71,8 @@ $("#save_peer").click(function(){
|
||||
"public_key":$("#public_key").val(),
|
||||
"allowed_ips": $("#allowed_ips").val(),
|
||||
"name":$("#new_add_name").val(),
|
||||
"DNS": $("#DNS").val()
|
||||
"DNS": $("#new_add_DNS").val(),
|
||||
"endpoint_allowed_ip": $("#new_add_endpoint_allowed_ip").val()
|
||||
}),
|
||||
success: function (response){
|
||||
if(response != "true"){
|
||||
@@ -123,7 +124,7 @@ $("#delete_peer").click(function(){
|
||||
}
|
||||
else{
|
||||
deleteModal.toggle();
|
||||
load_data();
|
||||
load_data($('#search_peer_textbox').val());
|
||||
$('#alertToast').toast('show');
|
||||
$('#alertToast .toast-body').html("Peer deleted!");
|
||||
}
|
||||
@@ -136,7 +137,7 @@ var settingModal = new bootstrap.Modal(document.getElementById('setting_modal'),
|
||||
keyboard: false
|
||||
})
|
||||
$("body").on("click", ".btn-setting-peer", function(){
|
||||
settingModal.toggle();
|
||||
startProgressBar()
|
||||
var peer_id = $(this).attr("id");
|
||||
$("#save_peer_setting").attr("peer_id", peer_id);
|
||||
$.ajax({
|
||||
@@ -153,6 +154,9 @@ $("body").on("click", ".btn-setting-peer", function(){
|
||||
$("#setting_modal #peer_private_key_textbox").val(response['private_key'])
|
||||
$("#setting_modal #peer_DNS_textbox").val(response['DNS'])
|
||||
$("#setting_modal #peer_allowed_ip_textbox").val(response['allowed_ip'])
|
||||
$("#setting_modal #peer_endpoint_allowed_ips").val(response['endpoint_allowed_ip'])
|
||||
settingModal.toggle();
|
||||
endProgressBar()
|
||||
}
|
||||
})
|
||||
});
|
||||
@@ -199,7 +203,8 @@ $("#save_peer_setting").click(function (){
|
||||
name: $("#peer_name_textbox").val(),
|
||||
DNS: $("#peer_DNS_textbox").val(),
|
||||
private_key: $("#peer_private_key_textbox").val(),
|
||||
allowed_ip: $("#peer_allowed_ip_textbox").val()
|
||||
allowed_ip: $("#peer_allowed_ip_textbox").val(),
|
||||
endpoint_allowed_ip: $("#peer_endpoint_allowed_ips").val()
|
||||
}),
|
||||
success: function (response){
|
||||
if (response['status'] === "failed"){
|
||||
@@ -207,7 +212,7 @@ $("#save_peer_setting").click(function (){
|
||||
$("#setting_peer_alert").removeClass("d-none");
|
||||
}else{
|
||||
settingModal.toggle();
|
||||
load_data();
|
||||
load_data($('#search_peer_textbox').val())
|
||||
$('#alertToast').toast('show');
|
||||
$('#alertToast .toast-body').html("Peer Saved!");
|
||||
}
|
||||
@@ -225,4 +230,65 @@ $(".peer_private_key_textbox_switch").click(function (){
|
||||
let icon = (($("#peer_private_key_textbox").attr('type') === 'password') ? "bi bi-eye-slash-fill":"bi bi-eye-fill")
|
||||
$("#peer_private_key_textbox").attr('type',mode)
|
||||
$(".peer_private_key_textbox_switch i").removeClass().addClass(icon)
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
// Search Peer
|
||||
var typingTimer;
|
||||
var doneTypingInterval = 200;
|
||||
var $input = $('#search_peer_textbox');
|
||||
$input.on('keyup', function () {
|
||||
clearTimeout(typingTimer);
|
||||
typingTimer = setTimeout(doneTyping, doneTypingInterval);
|
||||
});
|
||||
$input.on('keydown', function () {
|
||||
clearTimeout(typingTimer);
|
||||
});
|
||||
function doneTyping () {
|
||||
load_data($('#search_peer_textbox').val());
|
||||
}
|
||||
|
||||
|
||||
// Sorting
|
||||
$("body").on("change", "#sort_by_dropdown", function (){
|
||||
$.ajax({
|
||||
method:"POST",
|
||||
data: JSON.stringify({'sort':$("#sort_by_dropdown option:selected").val()}),
|
||||
headers:{"Content-Type": "application/json"},
|
||||
url: "/update_dashboard_sort",
|
||||
success: function (res){
|
||||
location.reload()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
$("body").on("mouseenter", ".key", function(){
|
||||
var label = $(this).parent().siblings().children()[1]
|
||||
label.style.opacity = "100"
|
||||
})
|
||||
$("body").on("mouseout", ".key", function(){
|
||||
var label = $(this).parent().siblings().children()[1]
|
||||
label.style.opacity = "0"
|
||||
setTimeout(function (){
|
||||
label.innerHTML = "CLICK TO COPY"
|
||||
},200)
|
||||
|
||||
});
|
||||
$("body").on("click", ".key", function(){
|
||||
var label = $(this).parent().siblings().children()[1]
|
||||
copyToClipboard($(this))
|
||||
label.innerHTML = "COPIED!"
|
||||
})
|
||||
function copyToClipboard(element) {
|
||||
var $temp = $("<input>");
|
||||
$("body").append($temp);
|
||||
$temp.val($(element).text()).select();
|
||||
document.execCommand("copy");
|
||||
$temp.remove();
|
||||
}
|
||||
|
||||
|
||||
// $(".key").mouseenter(function(){
|
||||
//
|
||||
// })
|
||||
Vendored
+2
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 95 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB |
Reference in New Issue
Block a user