// Shared header component for all test pages
// This provides consistent navigation and server state management
(function () {
'use strict';
// Function to inject the shared header HTML
window.injectSharedHeader = function () {
const headerHTML = `
`;
// Insert at the beginning of body
const bodyFirstChild = document.body.firstChild;
const headerContainer = document.createElement('div');
headerContainer.innerHTML = headerHTML;
document.body.insertBefore(headerContainer.firstChild, bodyFirstChild);
// Add padding to body to account for sticky header
document.body.style.paddingTop = '20px';
};
// Function to initialize header functionality
window.initializeSharedHeader = function (pageTitle) {
// Set page title
if (pageTitle) {
const titleElement = document.getElementById('page-title');
if (titleElement) {
titleElement.textContent = pageTitle;
}
}
// Mark active navigation link
const currentPath = window.location.pathname;
document.querySelectorAll('.nav-link').forEach((link) => {
if (link.getAttribute('href') === currentPath) {
link.classList.add('active');
}
});
// Console functionality
const consoleOutput = document.getElementById('console-output');
const testConsole = document.getElementById('test-console');
window.testLog = function (message, type = 'info') {
if (!consoleOutput) return;
const timestamp = new Date().toLocaleTimeString();
const prefix = type === 'error' ? 'โ' : type === 'success' ? 'โ
' : '>';
const color = type === 'error' ? '#ef4444' : type === 'success' ? '#10b981' : '#10b981';
const logLine = document.createElement('div');
logLine.style.color = color;
logLine.textContent = `${prefix} [${timestamp}] ${message}`;
consoleOutput.appendChild(logLine);
consoleOutput.scrollTop = consoleOutput.scrollHeight;
};
// Toggle console
document.getElementById('toggle-console')?.addEventListener('click', function () {
if (testConsole) {
const isVisible = testConsole.style.display !== 'none';
testConsole.style.display = isVisible ? 'none' : 'block';
this.textContent = isVisible ? '๐ Console' : '๐ Hide';
}
});
// Clear console
document.getElementById('clear-console')?.addEventListener('click', function () {
if (consoleOutput) {
consoleOutput.innerHTML = '> Console cleared...';
}
});
// Server state selector
const stateSelect = document.getElementById('server-state-select');
if (stateSelect && window.applyServerStateToComponents) {
stateSelect.addEventListener('change', function () {
const selectedState = this.value;
window.applyServerStateToComponents(selectedState);
window.testLog(`Server state changed to: ${selectedState}`, 'success');
});
}
// Refresh state button
document.getElementById('refresh-state')?.addEventListener('click', function () {
const currentState = stateSelect?.value || 'default';
if (window.applyServerStateToComponents) {
window.applyServerStateToComponents(currentState);
window.testLog('Server state refreshed', 'success');
}
});
// Initial log
window.testLog('Test page initialized');
// Load and apply server state after a delay
setTimeout(function () {
if (window.applyServerStateToComponents) {
window.applyServerStateToComponents('default');
window.testLog('Server state applied to components', 'success');
}
}, 1000);
};
// Function to set base font size to match Unraid's 10px
window.setBaseFontSize = function () {
const baseFontStyle = document.createElement('style');
baseFontStyle.id = 'unraid-base-font';
baseFontStyle.innerHTML = `
/* Match Unraid's 10px base font size */
html {
font-size: 10px;
}
`;
document.head.appendChild(baseFontStyle);
};
// Auto-inject and initialize when DOM is ready
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', function () {
window.setBaseFontSize();
window.injectSharedHeader();
// Get page title from existing h1 or title tag
const existingTitle =
document.querySelector('h1')?.textContent ||
document.title.replace(' - Unraid Component Test', '');
window.initializeSharedHeader(existingTitle);
});
} else {
window.setBaseFontSize();
window.injectSharedHeader();
const existingTitle =
document.querySelector('h1')?.textContent ||
document.title.replace(' - Unraid Component Test', '');
window.initializeSharedHeader(existingTitle);
}
})();