lots of progress
This commit is contained in:
Doar Mihai
@@ -0,0 +1,206 @@
|
||||
/* Additional custom styles for the monitoring dashboard */
|
||||
|
||||
/* Smooth transitions */
|
||||
* {
|
||||
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
/* Status indicators */
|
||||
.status-online::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: #10b981;
|
||||
margin-right: 8px;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.status-down::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: #ef4444;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
/* Loading spinner */
|
||||
.spinner {
|
||||
border: 3px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 50%;
|
||||
border-top: 3px solid var(--indigo-600);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Dark mode scrollbar */
|
||||
.dark::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
.dark::-webkit-scrollbar-track {
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.dark::-webkit-scrollbar-thumb {
|
||||
background: #4b5563;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.dark::-webkit-scrollbar-thumb:hover {
|
||||
background: #6b7280;
|
||||
}
|
||||
|
||||
/* Hover effects for cards */
|
||||
.card {
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.dark .card:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Alert animations */
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.alert {
|
||||
animation: slideIn 0.3s ease;
|
||||
}
|
||||
|
||||
/* Chart container */
|
||||
.chart-container {
|
||||
position: relative;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
/* Responsive table improvements */
|
||||
@media (max-width: 768px) {
|
||||
.table-responsive {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.table-responsive table {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Badge improvements */
|
||||
.badge {
|
||||
font-weight: 500;
|
||||
padding: 0.375rem 0.75rem;
|
||||
}
|
||||
|
||||
/* Button focus states */
|
||||
.btn:focus {
|
||||
outline: 2px solid var(--indigo-600);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Custom utilities */
|
||||
.text-truncate-2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Sidebar hover effect */
|
||||
.sidebar-nav-link {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sidebar-nav-link::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 3px;
|
||||
background-color: var(--indigo-600);
|
||||
transform: scaleY(0);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.sidebar-nav-link:hover::before,
|
||||
.sidebar-nav-link.active::before {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
/* Notification dot */
|
||||
.notification-dot {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -4px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: #ef4444;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--bg-primary);
|
||||
}
|
||||
|
||||
/* Empty state illustrations */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 3rem 1rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.empty-state i {
|
||||
font-size: 3rem;
|
||||
opacity: 0.5;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Progress bars */
|
||||
.progress-thin {
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
/* Card stat improvements */
|
||||
.card-stat {
|
||||
border-left: 4px solid var(--indigo-600);
|
||||
}
|
||||
|
||||
.card-stat.success {
|
||||
border-left-color: #10b981;
|
||||
}
|
||||
|
||||
.card-stat.danger {
|
||||
border-left-color: #ef4444;
|
||||
}
|
||||
|
||||
.card-stat.warning {
|
||||
border-left-color: #f59e0b;
|
||||
}
|
||||
@@ -0,0 +1,232 @@
|
||||
/**
|
||||
* Custom JavaScript for the monitoring dashboard
|
||||
*/
|
||||
|
||||
// Auto-dismiss alerts after 5 seconds
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const alerts = document.querySelectorAll('.alert-dismissible');
|
||||
alerts.forEach(alert => {
|
||||
setTimeout(() => {
|
||||
const bsAlert = new bootstrap.Alert(alert);
|
||||
bsAlert.close();
|
||||
}, 5000);
|
||||
});
|
||||
});
|
||||
|
||||
// Copy to clipboard functionality
|
||||
function copyToClipboard(text) {
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
showToast('Copied to clipboard!', 'success');
|
||||
}).catch(err => {
|
||||
console.error('Failed to copy:', err);
|
||||
showToast('Failed to copy', 'danger');
|
||||
});
|
||||
}
|
||||
|
||||
// Show toast notification
|
||||
function showToast(message, type = 'info') {
|
||||
const toastContainer = document.getElementById('toastContainer');
|
||||
if (!toastContainer) {
|
||||
const container = document.createElement('div');
|
||||
container.id = 'toastContainer';
|
||||
container.className = 'position-fixed bottom-0 end-0 p-3';
|
||||
container.style.zIndex = '9999';
|
||||
document.body.appendChild(container);
|
||||
}
|
||||
|
||||
const toast = document.createElement('div');
|
||||
toast.className = `toast align-items-center text-white bg-${type} border-0`;
|
||||
toast.setAttribute('role', 'alert');
|
||||
toast.setAttribute('aria-live', 'assertive');
|
||||
toast.setAttribute('aria-atomic', 'true');
|
||||
|
||||
toast.innerHTML = `
|
||||
<div class="d-flex">
|
||||
<div class="toast-body">
|
||||
${message}
|
||||
</div>
|
||||
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.getElementById('toastContainer').appendChild(toast);
|
||||
const bsToast = new bootstrap.Toast(toast);
|
||||
bsToast.show();
|
||||
|
||||
toast.addEventListener('hidden.bs.toast', () => {
|
||||
toast.remove();
|
||||
});
|
||||
}
|
||||
|
||||
// Refresh data without page reload
|
||||
function refreshStats() {
|
||||
const refreshBtn = document.getElementById('refreshBtn');
|
||||
if (refreshBtn) {
|
||||
refreshBtn.classList.add('disabled');
|
||||
refreshBtn.innerHTML = '<i class="bi bi-arrow-clockwise"></i> Refreshing...';
|
||||
|
||||
setTimeout(() => {
|
||||
location.reload();
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
// Format timestamps to relative time
|
||||
function formatRelativeTime() {
|
||||
const timeElements = document.querySelectorAll('[data-timestamp]');
|
||||
timeElements.forEach(element => {
|
||||
const timestamp = parseInt(element.getAttribute('data-timestamp'));
|
||||
const date = new Date(timestamp * 1000);
|
||||
element.textContent = getRelativeTime(date);
|
||||
});
|
||||
}
|
||||
|
||||
function getRelativeTime(date) {
|
||||
const now = new Date();
|
||||
const diff = now - date;
|
||||
const seconds = Math.floor(diff / 1000);
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
const hours = Math.floor(minutes / 60);
|
||||
const days = Math.floor(hours / 24);
|
||||
|
||||
if (seconds < 60) return 'just now';
|
||||
if (minutes < 60) return `${minutes} minute${minutes > 1 ? 's' : ''} ago`;
|
||||
if (hours < 24) return `${hours} hour${hours > 1 ? 's' : ''} ago`;
|
||||
if (days < 30) return `${days} day${days > 1 ? 's' : ''} ago`;
|
||||
return date.toLocaleDateString();
|
||||
}
|
||||
|
||||
// Auto-refresh dashboard every 5 minutes
|
||||
let autoRefreshInterval;
|
||||
function startAutoRefresh(interval = 300000) { // 5 minutes default
|
||||
if (autoRefreshInterval) {
|
||||
clearInterval(autoRefreshInterval);
|
||||
}
|
||||
|
||||
autoRefreshInterval = setInterval(() => {
|
||||
console.log('Auto-refreshing dashboard...');
|
||||
location.reload();
|
||||
}, interval);
|
||||
}
|
||||
|
||||
// Stop auto-refresh
|
||||
function stopAutoRefresh() {
|
||||
if (autoRefreshInterval) {
|
||||
clearInterval(autoRefreshInterval);
|
||||
autoRefreshInterval = null;
|
||||
}
|
||||
}
|
||||
|
||||
// Keyboard shortcuts
|
||||
document.addEventListener('keydown', function(e) {
|
||||
// Ctrl/Cmd + K to focus search (if exists)
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
|
||||
e.preventDefault();
|
||||
const searchInput = document.querySelector('[type="search"]');
|
||||
if (searchInput) searchInput.focus();
|
||||
}
|
||||
|
||||
// Ctrl/Cmd + N to create new site
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 'n') {
|
||||
e.preventDefault();
|
||||
const createBtn = document.querySelector('[href*="sites/create"]');
|
||||
if (createBtn) window.location.href = createBtn.href;
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize tooltips
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
||||
tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl);
|
||||
});
|
||||
});
|
||||
|
||||
// Initialize popovers
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
|
||||
popoverTriggerList.map(function (popoverTriggerEl) {
|
||||
return new bootstrap.Popover(popoverTriggerEl);
|
||||
});
|
||||
});
|
||||
|
||||
// Chart.js default configuration
|
||||
if (typeof Chart !== 'undefined') {
|
||||
Chart.defaults.font.family = "'Inter', sans-serif";
|
||||
Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--text-secondary');
|
||||
}
|
||||
|
||||
// Handle dark mode chart updates
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const darkModeObserver = new MutationObserver(function(mutations) {
|
||||
mutations.forEach(function(mutation) {
|
||||
if (mutation.attributeName === 'class') {
|
||||
const isDark = document.documentElement.classList.contains('dark');
|
||||
updateChartsForTheme(isDark);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
darkModeObserver.observe(document.documentElement, {
|
||||
attributes: true,
|
||||
attributeFilter: ['class']
|
||||
});
|
||||
});
|
||||
|
||||
function updateChartsForTheme(isDark) {
|
||||
if (typeof Chart !== 'undefined' && Chart.instances.length > 0) {
|
||||
const textColor = isDark ? '#9ca3af' : '#6b7280';
|
||||
Chart.defaults.color = textColor;
|
||||
|
||||
// Update all chart instances
|
||||
Chart.instances.forEach(chart => {
|
||||
chart.options.scales.x.ticks.color = textColor;
|
||||
chart.options.scales.y.ticks.color = textColor;
|
||||
chart.options.scales.x.grid.color = isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
|
||||
chart.options.scales.y.grid.color = isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
|
||||
chart.update();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Status badge updater
|
||||
function updateStatusBadge(element, status) {
|
||||
element.className = 'badge';
|
||||
if (status >= 200 && status < 400) {
|
||||
element.classList.add('bg-success');
|
||||
element.innerHTML = '<i class="bi bi-check-circle"></i> Online';
|
||||
} else if (status) {
|
||||
element.classList.add('bg-danger');
|
||||
element.innerHTML = '<i class="bi bi-x-circle"></i> Down';
|
||||
} else {
|
||||
element.classList.add('bg-secondary');
|
||||
element.textContent = 'Not Checked';
|
||||
}
|
||||
}
|
||||
|
||||
// Export data as CSV
|
||||
function exportToCSV(data, filename = 'export.csv') {
|
||||
const csv = data.map(row => row.join(',')).join('\n');
|
||||
const blob = new Blob([csv], { type: 'text/csv' });
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = filename;
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
// Print functionality
|
||||
function printReport() {
|
||||
window.print();
|
||||
}
|
||||
|
||||
// Console welcome message
|
||||
console.log(
|
||||
'%cSite Monitor Dashboard',
|
||||
'font-size: 20px; font-weight: bold; color: #4f46e5;'
|
||||
);
|
||||
console.log(
|
||||
'%cBuilt with Laravel + Bootstrap + Alpine.js',
|
||||
'font-size: 12px; color: #6b7280;'
|
||||
);
|
||||
Reference in New Issue
Block a user