mirror of
https://github.com/unraid/api.git
synced 2026-02-11 18:48:48 -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>
225 lines
6.6 KiB
HTML
225 lines
6.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Settings - 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;
|
|
}
|
|
.header {
|
|
background: white;
|
|
padding: 16px 20px;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
}
|
|
.header h1 {
|
|
margin: 0;
|
|
color: #1f2937;
|
|
}
|
|
.tabs {
|
|
background: white;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
padding: 0 20px;
|
|
display: flex;
|
|
gap: 20px;
|
|
}
|
|
.tab {
|
|
padding: 12px 0;
|
|
border-bottom: 2px solid transparent;
|
|
cursor: pointer;
|
|
color: #6b7280;
|
|
}
|
|
.tab.active {
|
|
border-bottom-color: #3b82f6;
|
|
color: #3b82f6;
|
|
}
|
|
.main-content {
|
|
padding: 20px;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
.settings-section {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
}
|
|
.settings-section h2 {
|
|
margin-top: 0;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
color: #1f2937;
|
|
}
|
|
.setting-item {
|
|
padding: 15px 0;
|
|
border-bottom: 1px solid #f3f4f6;
|
|
}
|
|
.setting-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.setting-label {
|
|
font-weight: 500;
|
|
color: #374151;
|
|
margin-bottom: 5px;
|
|
}
|
|
.setting-description {
|
|
font-size: 14px;
|
|
color: #6b7280;
|
|
margin-bottom: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Settings Container -->
|
|
<div class="settings-container" style="max-width: 1200px; margin: 0 auto;">
|
|
|
|
<!-- Tabs -->
|
|
<div class="tabs">
|
|
<div class="tab active" data-tab="general">
|
|
General
|
|
</div>
|
|
<div class="tab" data-tab="connect">
|
|
Connect
|
|
</div>
|
|
<div class="tab" data-tab="registration">
|
|
Registration
|
|
</div>
|
|
<div class="tab" data-tab="api">
|
|
API Keys
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="main-content">
|
|
<!-- General Settings -->
|
|
<div class="tab-content" data-tab-content="general" style="display: block;">
|
|
<div class="settings-section">
|
|
<h2>Appearance</h2>
|
|
<div class="setting-item">
|
|
<div class="setting-label">Theme</div>
|
|
<div class="setting-description">Choose between light and dark theme</div>
|
|
<unraid-theme-switcher current="white"></unraid-theme-switcher>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-section">
|
|
<h2>System Information</h2>
|
|
<div class="setting-item">
|
|
<div class="setting-label">OS Version</div>
|
|
<unraid-header-os-version></unraid-header-os-version>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Connect Settings -->
|
|
<div class="tab-content" data-tab-content="connect" style="display: none;">
|
|
<div class="settings-section">
|
|
<h2>Unraid Connect Settings</h2>
|
|
<unraid-connect-settings></unraid-connect-settings>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Registration -->
|
|
<div class="tab-content" data-tab-content="registration" style="display: none;">
|
|
<div class="settings-section">
|
|
<h2>System Registration</h2>
|
|
<unraid-registration></unraid-registration>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- API Keys -->
|
|
<div class="tab-content" data-tab-content="api" style="display: none;">
|
|
<div class="settings-section">
|
|
<h2>API Key Management</h2>
|
|
<unraid-api-key-manager></unraid-api-key-manager>
|
|
</div>
|
|
|
|
<div class="settings-section">
|
|
<h2>API Key Authorization</h2>
|
|
<unraid-api-key-authorize></unraid-api-key-authorize>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> <!-- End settings-container -->
|
|
|
|
<!-- 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 tab functionality and component interaction -->
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Tab switching functionality
|
|
$('.tab').on('click', function() {
|
|
var tabName = $(this).data('tab');
|
|
|
|
// Update active tab styling
|
|
$('.tab').removeClass('active');
|
|
$(this).addClass('active');
|
|
|
|
// Show/hide content
|
|
$('.tab-content').hide();
|
|
$('.tab-content[data-tab-content="' + tabName + '"]').fadeIn();
|
|
});
|
|
|
|
// Example: Programmatically update settings from jQuery
|
|
// This mimics how Unraid might update settings after saving
|
|
window.updateConnectSettings = function(settings) {
|
|
// You could pass this to the Vue component
|
|
console.log('Updating connect settings:', settings);
|
|
// The component would listen for attribute changes
|
|
$('unraid-connect-settings').attr('settings', JSON.stringify(settings));
|
|
};
|
|
|
|
// Example: Listen for events from Vue components
|
|
$(document).on('unraid:settings-saved', function(e, data) {
|
|
console.log('Settings saved:', data);
|
|
// Show a jQuery notification or update the UI
|
|
showSuccessMessage('Settings saved successfully!');
|
|
});
|
|
|
|
// Simple success message function (like Unraid's)
|
|
function showSuccessMessage(message) {
|
|
var $msg = $('<div class="success-message" style="position: fixed; top: 20px; right: 20px; background: #10b981; color: white; padding: 12px 20px; border-radius: 4px; z-index: 9999;">' + message + '</div>');
|
|
$('body').append($msg);
|
|
setTimeout(function() {
|
|
$msg.fadeOut(function() {
|
|
$(this).remove();
|
|
});
|
|
}, 3000);
|
|
}
|
|
|
|
// Example: Load settings via AJAX and update components
|
|
function loadSettings() {
|
|
// Simulate AJAX call
|
|
setTimeout(function() {
|
|
var settings = {
|
|
connect: { enabled: true, url: 'https://connect.unraid.net' },
|
|
theme: 'dark',
|
|
registration: { key: 'XXXX-XXXX-XXXX' }
|
|
};
|
|
|
|
// Update components with loaded data
|
|
$('unraid-connect-settings').attr('initial-settings', JSON.stringify(settings.connect));
|
|
$('unraid-registration').attr('registration-data', JSON.stringify(settings.registration));
|
|
|
|
console.log('Settings loaded via jQuery');
|
|
}, 1000);
|
|
}
|
|
|
|
// Load settings on page load
|
|
loadSettings();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |