2022-01-12 19:53:36 -05:00
<!-- index.html - < WGDashboard > - Copyright(C) 2021 Donald Zou [https://github.com/donaldzou]-->
< html lang = "en" >
2021-08-14 23:30:05 -04:00
{% with %}
{% set title="Home" %}
{% include "header.html"%}
{% endwith %}
2020-10-18 01:10:13 -04:00
< body >
2021-05-04 01:32:34 -04:00
{% include "navbar.html" %}
2020-10-18 01:10:13 -04:00
< div class = "container-fluid" >
2021-05-04 01:32:34 -04:00
{% include "sidebar.html" %}
2021-05-13 18:00:40 -04:00
< main role = "main" class = "col-md-9 ml-sm-auto col-lg-10 px-md-4 mb-4" >
2022-01-12 19:53:36 -05:00
< div style = "display: flex; flex-direction: row; align-items: center;" >
< h1 class = "pb-4 mt-4" > Home</ h1 >
</ div >
2022-01-13 09:37:23 -05:00
{% if msg != "" %}
< div class = "alert alert-danger" role = "alert" >
Configuration toggle failed. Please check the following error message:
</ div >
< pre class = "index-alert" >< code > {{ msg }}</ code ></ pre >
{% endif %}
2022-01-12 19:53:36 -05:00
2021-07-02 13:23:04 -04:00
{% if conf == [] %}
< p class = "text-muted" > You don't have any WireGuard configurations yet. Please check the configuration folder or change it in "Settings". By default the folder is "/etc/wireguard".</ p >
{% endif %}
2022-03-21 22:33:19 -04:00
2020-10-18 01:10:13 -04:00
{% for i in conf%}
2022-03-21 22:33:19 -04:00
< div class = "card mt-3 conf_card" data-conf-id = "{{i['conf']}}" >
2020-10-18 01:10:13 -04:00
< div class = "card-body" >
2020-10-18 01:52:53 -04:00
< div class = "row" >
2021-05-04 01:32:34 -04:00
< div class = "col card-col" >
2020-10-23 01:31:10 -04:00
< small class = "text-muted" >< strong > CONFIGURATION</ strong ></ small >
2021-12-29 12:17:44 -05:00
< a href = "/configuration/{{i['conf']}}" class = "conf_link" >
2022-01-12 19:53:36 -05:00
< h6 class = "card-title" style = "margin:0 !important;" >< samp > {{i['conf']}}</ samp ></ h6 >
2020-10-18 12:23:38 -04:00
</ a >
</ div >
2021-05-04 01:32:34 -04:00
< div class = "col card-col" >
2020-10-18 01:52:53 -04:00
< small class = "text-muted" >< strong > STATUS</ strong ></ small >
2022-03-21 22:33:19 -04:00
< h6 style = "text-transform: uppercase; margin:0 !important;" >< span > {{i['status']}}</ span >< span class = "dot dot-{{i['status']}}" ></ span ></ h6 >
2020-10-18 01:52:53 -04:00
</ div >
2022-03-21 22:33:19 -04:00
< div class = "col-sm card-col" >
2020-10-18 01:52:53 -04:00
< small class = "text-muted" >< strong > PUBLIC KEY</ strong ></ small >
2022-01-16 20:35:24 -05:00
< h6 style = "margin:0 !important;" >< samp > {{i['public_key']}}</ samp ></ h6 >
2021-05-04 01:32:34 -04:00
</ div >
2022-03-21 22:33:19 -04:00
< div class = "col-sm index-switch" >
< div class = "switch-test" >
< input type = "checkbox" class = "toggle--switch" id = "{{i['conf']}}-switch" {{ i [' checked ']}} data-conf-id = "{{i['conf']}}" >
< label for = "{{i['conf']}}-switch" class = "toggleLabel" ></ label >
</ div >
<!-- {% if i['checked'] == "checked" %}
<a href="#" id="{{i['conf']}}" class="switch text-primary tt"><i class="bi bi-toggle2-on"></i></a>
2021-05-04 01:32:34 -04:00
{% else %}
<a href="#" id="{{i['conf']}}" {{i['checked']}} class="switch text-secondary"><i class="bi bi-toggle2-off"></i></a>
2022-03-21 22:33:19 -04:00
{% endif %} -->
<!-- <div class="spinner-border text-primary" role="status" style="display: none">
2021-05-04 21:26:40 -04:00
<span class="sr-only">Loading...</span>
2022-03-21 22:33:19 -04:00
</div> -->
2020-10-18 01:52:53 -04:00
</ div >
</ div >
2020-10-18 01:10:13 -04:00
</ div >
</ div >
{%endfor%}
</ main >
</ div >
2022-03-21 22:33:19 -04:00
< div class = "position-fixed top-0 right-0 p-3 toastContainer" style = "z-index: 5; right: 0; top: 50px;" >
</ div >
2021-05-13 18:00:40 -04:00
{% include "tools.html" %}
2020-10-18 01:10:13 -04:00
</ body >
2021-05-04 01:32:34 -04:00
{% include "footer.html" %}
2020-10-18 01:10:13 -04:00
< script >
2022-03-21 22:33:19 -04:00
let numberToast = 0 ;
function showToast ( msg ){
$ ( ".toastContainer" ). append (
`<div id=" ${ numberToast } -toast" class="toast hide" role="alert" data-delay="5000">
<div class="toast-header">
<strong class="mr-auto">WGDashboard</strong>
<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"> ${ msg } </div>
<div class="toast-progressbar"></div>
</div>` )
$ ( `# ${ numberToast } -toast` ). toast ( 'show' );
$ ( `# ${ numberToast } -toast .toast-body` ). html ( msg );
$ ( `# ${ numberToast } -toast .toast-progressbar` ). css ( "transition" , `width ${ $ ( `# ${ numberToast } -toast .toast-progressbar` ). parent (). data ( 'delay' ) } ms cubic-bezier(0, 0, 0, 0)` );
$ ( `# ${ numberToast } -toast .toast-progressbar` ). css ( "width" , "0px" );
numberToast ++ ;
}
$ ( ".toggle--switch" ). on ( "change" , function (){
$ ( this ). addClass ( "waiting" ). attr ( "disabled" , "disabled" );
let id = $ ( this ). data ( "conf-id" );
let status = $ ( this ). prop ( "checked" );
let ele = $ ( this );
let label = $ ( this ). siblings ( "label" );
$ . ajax ({
url : `/switch/ ${ id } `
}). done ( function ( res ){
let dot = $ ( `div[data-conf-id=" ${ id } "] .dot` );
console . log ();
if ( res ){
if ( status ){
dot . removeClass ( "dot-stopped" ). addClass ( "dot-running" );
dot . siblings (). text ( "Running" );
showToast ( ` ${ id } is running.` )
} else {
dot . removeClass ( "dot-running" ). addClass ( "dot-stopped" );
showToast ( ` ${ id } is stopped.` )
}
ele . removeClass ( "waiting" );
ele . removeAttr ( "disabled" );
} else {
if ( status ){
$ ( this ). prop ( "checked" , false )
} else {
$ ( this ). prop ( "checked" , true )
}
}
})
});
2021-12-29 12:17:44 -05:00
$ ( '.switch' ). on ( "click" , function () {
2021-05-04 21:26:40 -04:00
$ ( this ). siblings ( $ ( ".spinner-border" )). css ( "display" , "inline-block" )
$ ( this ). remove ()
2021-05-04 01:32:34 -04:00
location . replace ( "/switch/" + $ ( this ). attr ( 'id' ))
2020-10-23 01:31:10 -04:00
});
2021-12-29 12:17:44 -05:00
$ ( ".sb-home-url" ). addClass ( "active" );
$ ( ".card-body" ). on ( "click" , function ( handle ){
2022-03-21 22:33:19 -04:00
if ( $ ( handle . target ). attr ( "class" ) !== "toggleLabel" && $ ( handle . target ). attr ( "class" ) !== "toggle--switch" ) {
2021-12-29 12:17:44 -05:00
window . open ( $ ( this ). find ( "a" ). attr ( "href" ), "_self" );
}
2022-02-28 13:34:46 -05:00
});
2020-10-18 01:10:13 -04:00
</ script >
</ html >
