mirror.MikroTik/techgarage-ir.MTWireGuard
1
0
Fork 0
mirror of https://github.com/techgarage-ir/MTWireGuard.git synced 2025-08-18 16:38:19 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Change project to 3-Layer structure

Browse source
This commit is contained in:
Tech Garage 2023-06-02 15:26:29 +03:30
parent 2f900a5036
commit 2d67540e13
1365 changed files with 760 additions and 618 deletions
Download patch file Download diff file Expand all files Collapse all files

166
UI/wwwroot/js/script.js Normal file
View file

@ -0,0 +1,166 @@
let container = document.getElementById('toastContainer');
let Forms = document.querySelectorAll('form');
let dropdownBTNs = document.querySelectorAll('a[data-target="_self"]');
Forms.forEach(form => {
form.addEventListener('submit', function (event) {
event.preventDefault();
let data = this;
let formData = new FormData(data);
fetch(data.getAttribute('action'), {
method: data.getAttribute('method'),
body: formData
}).then(res => res.json())
.then(function (data) {
var toast = document.createElement('div');
toast.className = 'toast text-bg-' + data.background;
toast.setAttribute('role', 'alert');
toast.setAttribute('aria-live', 'assertive');
toast.setAttribute('aria-atomic', 'true');
toast.innerHTML = `<div class='toast-header'>
<strong class='me-auto'>${data['title']}</strong>
<button type='button' class='btn-close' data-coreui-dismiss='toast' aria-label='Close'></button>
</div>
<div class='toast-body'>${data['body']}</div>`;
toast.addEventListener('hidden.coreui.toast', (event) => {
event.target.remove();
});
container.appendChild(toast);
let toastAlert = new coreui.Toast(toast, { "delay": 5000, "autohide": true });
toastAlert.show();
refreshTables();
});
});
});
dropdownBTNs.forEach(btn => {
btn.addEventListener('click', dropdownBtnClick);
});
document.addEventListener("DOMContentLoaded", function (event) {
refreshSidebar();
refreshTables();
});
function loadServers() {
fetch("/Servers/getAll")
.then((response) => response.text())
.then((data) => {
document.querySelector('table tbody').innerHTML = data;
});
}
function loadClients() {
fetch("/Clients/getAll")
.then((response) => response.text())
.then((data) => {
document.querySelector('table tbody').innerHTML = data;
});
}
function refreshTables() {
if (window.location.href.endsWith("Clients")) {
loadClients();
} else if (window.location.href.endsWith("Servers")) {
loadServers();
}
}
function dropdownBtnClick(event) {
event.preventDefault();
fetch(event.target.getAttribute('href'))
.then(res => res.json())
.then(function (data) {
var toast = document.createElement('div');
toast.className = 'toast text-bg-' + data.background;
toast.setAttribute('role', 'alert');
toast.setAttribute('aria-live', 'assertive');
toast.setAttribute('aria-atomic', 'true');
toast.innerHTML = `<div class='toast-header'>
<strong class='me-auto'>${data['title']}</strong>
<button type='button' class='btn-close' data-coreui-dismiss='toast' aria-label='Close'></button>
</div>
<div class='toast-body'>${data["body"]}</div>`;
toast.addEventListener('hidden.coreui.toast', (event) => {
event.target.remove();
});
container.appendChild(toast);
let toastAlert = new coreui.Toast(toast, { "delay": 5000, "autohide": true });
toastAlert.show();
refreshTables();
});
}
function deleteBtn(event) {
let Id = event.target.closest('tr').getAttribute('data-id');
document.querySelector('#DeleteModal input[name="Id"]').value = Id;
}
function syncBtn(event) {
let Id = event.target.closest('tr').getAttribute('data-id');
document.querySelector('#SyncModal input[name="ID"]').value = Id;
}
function updateClientBtn(event) {
document.querySelector('#EditModal form').reset();
let row = event.target.closest('tr');
let Id = row.getAttribute('data-id');
let name = row.querySelector('td:nth-child(2)').innerText;
let interface = row.querySelector('td:nth-child(3)').innerText;
let address = row.querySelector('td:nth-child(4)').innerText;
let publicKey = row.querySelector('td:nth-child(5)').innerText;
document.querySelector('#EditModal input[name="ID"]').value = Id;
document.querySelector('#EditModal input[name="Name"]').placeholder = name;
document.querySelector('#EditModal input[name="AllowedAddress"]').placeholder = address;
document.querySelector('#EditModal input[name="PublicKey"]').placeholder = publicKey;
let ifOption = document.querySelector('#EditModal option[value="' + interface + '"]');
if (ifOption)
ifOption.setAttribute("selected", true);
}
function updateServerBtn(event) {
document.querySelector('#EditModal form').reset();
let row = event.target.closest('tr');
let Id = row.getAttribute('data-id');
let name = row.querySelector('td:nth-child(2)').innerText;
let port = row.querySelector('td:nth-child(3)').innerText;
let mtu = row.querySelector('td:nth-child(4)').innerText;
let publicKey = row.querySelector('td:nth-child(5)').innerText;
document.querySelector('#EditModal input[name="ID"]').value = Id;
document.querySelector('#EditModal input[name="Name"]').placeholder = name;
document.querySelector('#EditModal input[name="Port"]').placeholder = port;
document.querySelector('#EditModal input[name="MTU"]').placeholder = mtu;
document.querySelector('#EditModal input[id$="PubKey"]').placeholder = publicKey;
}
function refreshSidebar() {
fetch("/Settings/getInfo")
.then((response) => response.json())
.then((data) => {
let cpuProgress = document.querySelector('#cpuUsage div.progress-bar');
let ramProgress = document.querySelector('#ramUsage div.progress-bar');
let hddProgress = document.querySelector('#hddUsage div.progress-bar');
let cpuText = document.querySelector('#cpuUsage small.text-medium-emphasis-inverse');
let ramText = document.querySelector('#ramUsage small.text-medium-emphasis-inverse');
let hddText = document.querySelector('#hddUsage small.text-medium-emphasis-inverse');
cpuProgress.ariaValueNow = data.cpuUsedPercentage;
ramProgress.ariaValueNow = data.ramUsedPercentage;
hddProgress.ariaValueNow = data.hddUsedPercentage;
cpuProgress.style.width = data.cpuUsedPercentage + '%';
ramProgress.style.width = data.ramUsedPercentage + '%';
hddProgress.style.width = data.hddUsedPercentage + '%';
cpuProgress.setAttribute('class', 'progress-bar');
ramProgress.setAttribute('class', 'progress-bar');
hddProgress.setAttribute('class', 'progress-bar');
cpuProgress.classList.add(data.cpuBgColor);
ramProgress.classList.add(data.ramBgColor);
hddProgress.classList.add(data.hddBgColor);
cpuText.textContent = `${data.cpuUsedPercentage}% using`;
ramText.textContent = `${data.ramUsed}/${data.totalRAM} using`;
hddText.textContent = `${data.hddUsed}/${data.totalHDD} using`;
// Settings Page
if (window.location.href.endsWith("/Settings")) {
document.getElementById('cpuLoad').innerText = `${data.cpuUsedPercentage}%`;
}
});
}