kyle/SignageHTML
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Items 10-15: ES modules, inline style cleanup, template modal, code modernization

Browse Source 
- Item 10: Convert to ES modules with import/export, single module entry point
- Item 11: Replace inline styles with CSS classes (background overlay, card
  animations, highlight effect, config modal form elements)
- Item 12: Move ConfigManager modal HTML from JS template literal to
  <template> element in index.html
- Item 13: Replace deprecated url.parse() with new URL() in server.js
  and update route handlers to use searchParams
- Item 14: Replace JSON.parse/stringify deep clone with structuredClone()
- Item 15: Remove dead JSON-fixing regex code from departures.js route

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
kyle
2026-02-15 14:30:03 +01:00
parent 392a50b535
commit 1fdb3e48c7
12 changed files with 1883 additions and 1780 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
public/js/main.js
View File

@@ -3,22 +3,25 @@
* Initializes all components when the DOM is ready
*/
import { Constants } from './utils/constants.js';
import { logger } from './utils/logger.js';
import { ConfigManager } from './components/ConfigManager.js';
import { Clock } from './components/Clock.js';
import { WeatherManager } from './components/WeatherManager.js';
import { DeparturesManager } from './components/DeparturesManager.js';
/**
* Function to ensure content wrapper exists for rotated orientations
*/
function ensureContentWrapper() {
if (!document.getElementById('content-wrapper')) {
if (window.logger) {
window.logger.info('Creating content wrapper');
} else {
console.log('Creating content wrapper');
}
logger.info('Creating content wrapper');
const wrapper = document.createElement('div');
wrapper.id = 'content-wrapper';
// Move all body children to the wrapper except excluded elements
const excludedElements = ['config-button', 'config-modal', 'background-overlay'];
// Create an array of nodes to move (can't modify while iterating)
const nodesToMove = [];
for (let i = 0; i < document.body.children.length; i++) {
@@ -27,12 +30,12 @@ function ensureContentWrapper() {
nodesToMove.push(child);
}
}
// Move the nodes to the wrapper
nodesToMove.forEach(node => {
wrapper.appendChild(node);
});
// Add the wrapper back to the body
document.body.appendChild(wrapper);
}
@@ -40,80 +43,57 @@ function ensureContentWrapper() {
// Initialize components when the DOM is loaded
document.addEventListener('DOMContentLoaded', async function() {
if (window.logger) {
window.logger.info('DOM fully loaded');
} else {
console.log('DOM fully loaded');
}
logger.info('DOM fully loaded');
try {
// Initialize ConfigManager first
if (window.logger) {
window.logger.info('Creating ConfigManager...');
} else {
console.log('Creating ConfigManager...');
}
logger.info('Creating ConfigManager...');
window.configManager = new ConfigManager({
defaultOrientation: 'normal',
defaultDarkMode: 'auto'
});
// Note: ConfigManager already creates the config button and modal
// Initialize Clock
const timezone = window.Constants?.TIMEZONE || 'Europe/Stockholm';
const timezone = Constants.TIMEZONE || 'Europe/Stockholm';
window.clock = new Clock({
elementId: 'clock',
timezone: timezone
});
// Initialize WeatherManager with location from window config or constants
const defaultLat = window.DEFAULT_LOCATION?.latitude ||
(window.Constants?.DEFAULT_LOCATION?.LATITUDE) || 59.3293;
const defaultLon = window.DEFAULT_LOCATION?.longitude ||
(window.Constants?.DEFAULT_LOCATION?.LONGITUDE) || 18.0686;
const defaultLat = window.DEFAULT_LOCATION?.latitude ||
Constants.DEFAULT_LOCATION.LATITUDE || 59.3293;
const defaultLon = window.DEFAULT_LOCATION?.longitude ||
Constants.DEFAULT_LOCATION.LONGITUDE || 18.0686;
window.weatherManager = new WeatherManager({
latitude: defaultLat,
longitude: defaultLon
});
// Initialize departures - use DeparturesManager
if (typeof DeparturesManager !== 'undefined') {
window.departuresManager = new DeparturesManager({
containerId: 'departures',
statusId: 'status',
lastUpdatedId: 'last-updated'
});
} else if (typeof initDepartures === 'function') {
// Fallback to legacy function if DeparturesManager not available
initDepartures();
}
// Initialize DeparturesManager
window.departuresManager = new DeparturesManager({
containerId: 'departures',
statusId: 'status',
lastUpdatedId: 'last-updated'
});
// Set up event listeners
document.addEventListener('darkModeChanged', event => {
document.body.classList.toggle('dark-mode', event.detail.isDarkMode);
});
document.addEventListener('configChanged', event => {
if (['vertical', 'upsidedown', 'vertical-reverse'].includes(event.detail.config.orientation)) {
ensureContentWrapper();
}
});
// Ensure content wrapper exists initially
ensureContentWrapper();
if (window.logger) {
window.logger.info('All components initialized successfully');
} else {
console.log('All components initialized successfully');
}
logger.info('All components initialized successfully');
} catch (error) {
if (window.logger) {
window.logger.error('Error during initialization:', error);
} else {
console.error('Error during initialization:', error);
}
logger.error('Error during initialization:', error);
const errorDiv = document.createElement('div');
errorDiv.className = 'error';
errorDiv.textContent = `Initialization error: ${error.message}`;