openvpn-endpoint-server/server/app/static/js/app.js

83 lines
2.5 KiB
JavaScript

// mGuard VPN Manager - Custom JavaScript
// HTMX Configuration
document.body.addEventListener('htmx:configRequest', function(evt) {
// Add CSRF token to all HTMX requests
// evt.detail.headers['X-CSRFToken'] = document.querySelector('meta[name="csrf-token"]')?.content;
});
// Show loading indicator during HTMX requests
document.body.addEventListener('htmx:beforeRequest', function(evt) {
// Optional: Show global loading indicator
});
document.body.addEventListener('htmx:afterRequest', function(evt) {
// Optional: Hide global loading indicator
});
// Handle HTMX errors
document.body.addEventListener('htmx:responseError', function(evt) {
console.error('HTMX Error:', evt.detail);
// Show error toast or alert
});
// Initialize tooltips
document.addEventListener('DOMContentLoaded', function() {
// Bootstrap tooltips
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
tooltipTriggerList.map(function(tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
// Bootstrap popovers
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
popoverTriggerList.map(function(popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl);
});
});
// Confirm delete dialogs
function confirmDelete(message, formId) {
if (confirm(message || 'Wirklich löschen?')) {
document.getElementById(formId).submit();
}
return false;
}
// Auto-refresh gateway status
function refreshGatewayStatus() {
// Handled by HTMX polling
}
// Format relative time
function formatRelativeTime(dateString) {
if (!dateString) return 'Nie';
const date = new Date(dateString);
const now = new Date();
const diff = Math.floor((now - date) / 1000);
if (diff < 60) return 'Gerade eben';
if (diff < 3600) return Math.floor(diff / 60) + ' Min.';
if (diff < 86400) return Math.floor(diff / 3600) + ' Std.';
return Math.floor(diff / 86400) + ' Tage';
}
// Update all relative times on page
function updateRelativeTimes() {
document.querySelectorAll('[data-relative-time]').forEach(function(el) {
el.textContent = formatRelativeTime(el.dataset.relativeTime);
});
}
// Update times every minute
setInterval(updateRelativeTimes, 60000);
// Copy to clipboard
function copyToClipboard(text) {
navigator.clipboard.writeText(text).then(function() {
// Show success toast
console.log('Copied to clipboard');
});
}