mirror of
https://github.com/unraid/api.git
synced 2026-02-13 19:48:29 -06:00
af5ca11860
<!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - New Features - Introduced Docker management UI components: Overview, Logs, Console, Preview, and Edit. - Added responsive Card/Detail layouts with grouping, bulk actions, and tabs. - New UnraidToaster component and global toaster configuration. - Component auto-mounting improved with async loading and multi-selector support. - UI/UX - Overhauled theme system (light/dark tokens, primary/orange accents) and added theme variants. - Header OS version now includes integrated changelog modal. - Registration displays warning states; multiple visual polish updates. - API - CPU load now includes percentGuest and percentSteal metrics. - Chores - Migrated web app to Vite; updated artifacts and manifests. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: mdatelle <mike@datelle.net> Co-authored-by: Michael Datelle <mdatelle@icloud.com>
203 lines
6.0 KiB
HTML
203 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Dashboard - Unraid Component Test</title>
|
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
|
<style>
|
|
body {
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
margin: 0;
|
|
padding: 20px;
|
|
background: #f3f4f6;
|
|
}
|
|
.dashboard-header {
|
|
background: #1f2937;
|
|
color: white;
|
|
padding: 16px 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
border-radius: 8px;
|
|
}
|
|
.header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
.logo {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
}
|
|
.main-content {
|
|
padding: 20px;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
.card {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
}
|
|
.card h2 {
|
|
margin-top: 0;
|
|
color: #1f2937;
|
|
}
|
|
.breadcrumb {
|
|
padding: 10px 20px;
|
|
background: white;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
}
|
|
.breadcrumb a {
|
|
color: #3b82f6;
|
|
text-decoration: none;
|
|
}
|
|
.component-mount {
|
|
padding: 10px;
|
|
border: 2px dashed #e5e7eb;
|
|
border-radius: 4px;
|
|
min-height: 50px;
|
|
position: relative;
|
|
}
|
|
.component-mount::before {
|
|
content: attr(data-component);
|
|
position: absolute;
|
|
top: -10px;
|
|
left: 10px;
|
|
background: white;
|
|
padding: 0 5px;
|
|
font-size: 12px;
|
|
color: #6b7280;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Main dashboard content -->
|
|
<div class="dashboard-header">
|
|
<div class="header-left">
|
|
<div class="logo">UNRAID</div>
|
|
<!-- OS Version Component -->
|
|
<unraid-header-os-version></unraid-header-os-version>
|
|
</div>
|
|
<div class="header-right">
|
|
<!-- User Profile Component -->
|
|
<unraid-user-profile id="header-user-profile"></unraid-user-profile>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Breadcrumb -->
|
|
<div class="breadcrumb">
|
|
<a href="/test-pages/">Test Pages</a> / Dashboard
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="main-content">
|
|
<div class="card">
|
|
<h2>System Information</h2>
|
|
<div class="component-mount" data-component="unraid-header-os-version">
|
|
<unraid-header-os-version></unraid-header-os-version>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>Theme Settings</h2>
|
|
<div class="component-mount" data-component="unraid-theme-switcher">
|
|
<unraid-theme-switcher current="white"></unraid-theme-switcher>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>Authentication</h2>
|
|
<div class="component-mount" data-component="unraid-auth">
|
|
<unraid-auth></unraid-auth>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>WAN IP Check</h2>
|
|
<div class="component-mount" data-component="unraid-wan-ip-check">
|
|
<unraid-wan-ip-check php-wan-ip="192.168.1.1"></unraid-wan-ip-check>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>API Logs</h2>
|
|
<button id="toggle-logs" style="padding: 8px 16px; background: #3b82f6; color: white; border: none; border-radius: 4px; cursor: pointer;">
|
|
Toggle Log Component
|
|
</button>
|
|
<div id="logs-container" class="component-mount" data-component="unraid-download-api-logs" style="margin-top: 10px; display: none;">
|
|
<unraid-download-api-logs></unraid-download-api-logs>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Global Modals -->
|
|
<unraid-modals></unraid-modals>
|
|
|
|
<!-- Load the manifest and inject resources (mimics PHP extractor) -->
|
|
<script src="/test-pages/load-manifest.js"></script>
|
|
<script src="/test-pages/test-server-state.js"></script>
|
|
<script src="/test-pages/shared-header.js"></script>
|
|
|
|
<!-- jQuery interactions mimicking Unraid -->
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Example: Pass server data to user profile component via jQuery
|
|
// This mimics how Unraid PHP would set data
|
|
var serverData = {
|
|
name: 'TestServer',
|
|
version: '6.12.4',
|
|
username: 'admin',
|
|
email: 'admin@unraid.net',
|
|
avatarUrl: '/webGui/images/default-avatar.png'
|
|
};
|
|
|
|
// Set attribute on the component (Vue will pick this up)
|
|
$('#header-user-profile').attr('server', JSON.stringify(serverData));
|
|
|
|
// Toggle logs visibility with jQuery
|
|
$('#toggle-logs').on('click', function() {
|
|
$('#logs-container').slideToggle();
|
|
});
|
|
|
|
// Example: Update WAN IP dynamically (like Unraid would do after an AJAX call)
|
|
setTimeout(function() {
|
|
$('unraid-wan-ip-check').attr('php-wan-ip', '203.0.113.42');
|
|
console.log('Updated WAN IP via jQuery');
|
|
}, 3000);
|
|
|
|
// Example: Trigger component methods from jQuery
|
|
// Components can expose methods via window object
|
|
window.updateUserProfile = function(newData) {
|
|
$('#header-user-profile').attr('server', JSON.stringify(newData));
|
|
};
|
|
|
|
// Example: Listen for events from Vue components
|
|
// Components can emit custom DOM events
|
|
$(document).on('unraid:theme-changed', function(e, data) {
|
|
console.log('Theme changed to:', data.theme);
|
|
// Update body class or do other jQuery operations
|
|
$('body').toggleClass('dark-mode', data.theme === 'dark');
|
|
});
|
|
|
|
// Example: Show a notification (like Unraid's addNotification)
|
|
window.addNotification = function(title, message, type) {
|
|
// This would trigger the Vue toast/notification system
|
|
var event = new CustomEvent('unraid:notification', {
|
|
detail: { title: title, message: message, type: type }
|
|
});
|
|
document.dispatchEvent(event);
|
|
};
|
|
|
|
// Test notification after 2 seconds
|
|
setTimeout(function() {
|
|
addNotification('Test Notification', 'This is from jQuery!', 'success');
|
|
}, 2000);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |