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 >
