iot/spore-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(logging): downgrade info logs to logger.debug in ViewModel, Component lifecycle, and App navigation

Browse Source
This commit is contained in:
0x1d
2025-08-31 11:58:20 +02:00
parent 1bdaed9a2c
commit ab03cd772d
1 changed files with 34 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
public/scripts/framework.js
View File

@@ -88,7 +88,7 @@ class ViewModel {
// Set data property and notify listeners // Set data property and notify listeners
set(property, value) { set(property, value) {
console.log(`ViewModel: Setting property '${property}' to:`, value); logger.debug(`ViewModel: Setting property '${property}' to:`, value);
// Check if the value has actually changed // Check if the value has actually changed
const hasChanged = this._data[property] !== value; const hasChanged = this._data[property] !== value;
@@ -100,10 +100,10 @@ class ViewModel {
// Update the data // Update the data
this._data[property] = value; this._data[property] = value;
console.log(`ViewModel: Property '${property}' changed, notifying listeners...`); logger.debug(`ViewModel: Property '${property}' changed, notifying listeners...`);
this._notifyListeners(property, value, this._previousData[property]); this._notifyListeners(property, value, this._previousData[property]);
} else { } else {
console.log(`ViewModel: Property '${property}' unchanged, skipping notification`); logger.debug(`ViewModel: Property '${property}' unchanged, skipping notification`);
} }
} }
@@ -132,7 +132,7 @@ class ViewModel {
}); });
if (Object.keys(changedProperties).length > 0) { if (Object.keys(changedProperties).length > 0) {
console.log(`ViewModel: Updated ${Object.keys(changedProperties).length} changed properties:`, Object.keys(changedProperties)); logger.debug(`ViewModel: Updated ${Object.keys(changedProperties).length} changed properties:`, Object.keys(changedProperties));
} }
} }
@@ -157,20 +157,20 @@ class ViewModel {
// Notify listeners of property changes // Notify listeners of property changes
_notifyListeners(property, value, previousValue) { _notifyListeners(property, value, previousValue) {
console.log(`ViewModel: _notifyListeners called for property '${property}'`); logger.debug(`ViewModel: _notifyListeners called for property '${property}'`);
if (this._listeners.has(property)) { if (this._listeners.has(property)) {
const callbacks = this._listeners.get(property); const callbacks = this._listeners.get(property);
console.log(`ViewModel: Found ${callbacks.length} listeners for property '${property}'`); logger.debug(`ViewModel: Found ${callbacks.length} listeners for property '${property}'`);
callbacks.forEach((callback, index) => { callbacks.forEach((callback, index) => {
try { try {
console.log(`ViewModel: Calling listener ${index} for property '${property}'`); logger.debug(`ViewModel: Calling listener ${index} for property '${property}'`);
callback(value, previousValue); callback(value, previousValue);
} catch (error) { } catch (error) {
console.error(`Error in property listener for ${property}:`, error); console.error(`Error in property listener for ${property}:`, error);
} }
}); });
} else { } else {
console.log(`ViewModel: No listeners found for property '${property}'`); logger.debug(`ViewModel: No listeners found for property '${property}'`);
} }
} }
@@ -285,13 +285,13 @@ class Component {
mount() { mount() {
if (this.isMounted) return; if (this.isMounted) return;
console.log(`${this.constructor.name}: Starting mount...`); logger.debug(`${this.constructor.name}: Starting mount...`);
this.isMounted = true; this.isMounted = true;
this.setupEventListeners(); this.setupEventListeners();
this.setupViewModelListeners(); this.setupViewModelListeners();
this.render(); this.render();
console.log(`${this.constructor.name}: Mounted successfully`); logger.debug(`${this.constructor.name}: Mounted successfully`);
} }
// Unmount the component // Unmount the component
@@ -302,14 +302,14 @@ class Component {
this.cleanupEventListeners(); this.cleanupEventListeners();
this.cleanupViewModelListeners(); this.cleanupViewModelListeners();
console.log(`${this.constructor.name} unmounted`); logger.debug(`${this.constructor.name} unmounted`);
} }
// Pause the component (keep alive but pause activity) // Pause the component (keep alive but pause activity)
pause() { pause() {
if (!this.isMounted) return; if (!this.isMounted) return;
console.log(`${this.constructor.name}: Pausing component`); logger.debug(`${this.constructor.name}: Pausing component`);
// Pause any active timers or animations // Pause any active timers or animations
if (this.updateInterval) { if (this.updateInterval) {
@@ -328,7 +328,7 @@ class Component {
resume() { resume() {
if (!this.isMounted || !this.isPaused) return; if (!this.isMounted || !this.isPaused) return;
console.log(`${this.constructor.name}: Resuming component`); logger.debug(`${this.constructor.name}: Resuming component`);
this.isPaused = false; this.isPaused = false;
@@ -385,7 +385,7 @@ class Component {
// Partial update method for efficient data updates // Partial update method for efficient data updates
updatePartial(property, newValue, previousValue) { updatePartial(property, newValue, previousValue) {
// Override in subclasses to implement partial updates // Override in subclasses to implement partial updates
console.log(`${this.constructor.name}: Partial update for '${property}':`, { newValue, previousValue }); logger.debug(`${this.constructor.name}: Partial update for '${property}':`, { newValue, previousValue });
} }
// UI State Management Methods // UI State Management Methods
@@ -474,22 +474,22 @@ class Component {
// Helper method to set innerHTML safely // Helper method to set innerHTML safely
setHTML(selector, html) { setHTML(selector, html) {
console.log(`${this.constructor.name}: setHTML called with selector '${selector}', html length: ${html.length}`); logger.debug(`${this.constructor.name}: setHTML called with selector '${selector}', html length: ${html.length}`);
let element; let element;
if (selector === '') { if (selector === '') {
// Empty selector means set HTML on the component's container itself // Empty selector means set HTML on the component's container itself
element = this.container; element = this.container;
console.log(`${this.constructor.name}: Using component container for empty selector`); logger.debug(`${this.constructor.name}: Using component container for empty selector`);
} else { } else {
// Find element within the component's container // Find element within the component's container
element = this.findElement(selector); element = this.findElement(selector);
} }
if (element) { if (element) {
console.log(`${this.constructor.name}: Element found, setting innerHTML`); logger.debug(`${this.constructor.name}: Element found, setting innerHTML`);
element.innerHTML = html; element.innerHTML = html;
console.log(`${this.constructor.name}: innerHTML set successfully`); logger.debug(`${this.constructor.name}: innerHTML set successfully`);
} else { } else {
console.error(`${this.constructor.name}: Element not found for selector '${selector}'`); console.error(`${this.constructor.name}: Element not found for selector '${selector}'`);
} }
@@ -651,7 +651,7 @@ class App {
// Store in cache // Store in cache
this.componentCache.set(name, component); this.componentCache.set(name, component);
console.log(`App: Pre-initialized component for route '${name}'`); logger.debug(`App: Pre-initialized component for route '${name}'`);
} }
// Navigate to a route // Navigate to a route
@@ -659,13 +659,13 @@ class App {
// Check cooldown period // Check cooldown period
const now = Date.now(); const now = Date.now();
if (now - this.lastNavigationTime < this.navigationCooldown) { if (now - this.lastNavigationTime < this.navigationCooldown) {
console.log(`App: Navigation cooldown active, skipping route '${routeName}'`); logger.debug(`App: Navigation cooldown active, skipping route '${routeName}'`);
return; return;
} }
// If navigation is already in progress, queue this request // If navigation is already in progress, queue this request
if (this.navigationInProgress) { if (this.navigationInProgress) {
console.log(`App: Navigation in progress, queuing route '${routeName}'`); logger.debug(`App: Navigation in progress, queuing route '${routeName}'`);
if (!this.navigationQueue.includes(routeName)) { if (!this.navigationQueue.includes(routeName)) {
this.navigationQueue.push(routeName); this.navigationQueue.push(routeName);
} }
@@ -674,7 +674,7 @@ class App {
// If trying to navigate to the same route, do nothing // If trying to navigate to the same route, do nothing
if (this.currentView && this.currentView.routeName === routeName) { if (this.currentView && this.currentView.routeName === routeName) {
console.log(`App: Already on route '${routeName}', skipping navigation`); logger.debug(`App: Already on route '${routeName}', skipping navigation`);
return; return;
} }
@@ -687,19 +687,19 @@ class App {
this.navigationInProgress = true; this.navigationInProgress = true;
try { try {
console.log(`App: Navigating to route '${routeName}'`); logger.debug(`App: Navigating to route '${routeName}'`);
const route = this.routes.get(routeName); const route = this.routes.get(routeName);
if (!route) { if (!route) {
console.error(`Route '${routeName}' not found`); console.error(`Route '${routeName}' not found`);
return; return;
} }
console.log(`App: Route found, component: ${route.componentClass.name}, container: ${route.containerId}`); logger.debug(`App: Route found, component: ${route.componentClass.name}, container: ${route.containerId}`);
// Get or create component from cache // Get or create component from cache
let component = this.componentCache.get(routeName); let component = this.componentCache.get(routeName);
if (!component) { if (!component) {
console.log(`App: Component not in cache, creating new instance for '${routeName}'`); logger.debug(`App: Component not in cache, creating new instance for '${routeName}'`);
const container = document.getElementById(route.containerId); const container = document.getElementById(route.containerId);
if (!container) { if (!container) {
console.error(`Container '${route.containerId}' not found`); console.error(`Container '${route.containerId}' not found`);
@@ -714,12 +714,12 @@ class App {
// Hide current view smoothly // Hide current view smoothly
if (this.currentView) { if (this.currentView) {
console.log('App: Hiding current view'); logger.debug('App: Hiding current view');
await this.hideCurrentView(); await this.hideCurrentView();
} }
// Show new view // Show new view
console.log(`App: Showing new view '${routeName}'`); logger.debug(`App: Showing new view '${routeName}'`);
await this.showView(routeName, component); await this.showView(routeName, component);
// Update navigation state // Update navigation state
@@ -731,7 +731,7 @@ class App {
// Mark view as cached for future use // Mark view as cached for future use
this.cachedViews.add(routeName); this.cachedViews.add(routeName);
console.log(`App: Navigation to '${routeName}' completed`); logger.debug(`App: Navigation to '${routeName}' completed`);
} catch (error) { } catch (error) {
console.error('App: Navigation failed:', error); console.error('App: Navigation failed:', error);
@@ -741,7 +741,7 @@ class App {
// Process any queued navigation requests // Process any queued navigation requests
if (this.navigationQueue.length > 0) { if (this.navigationQueue.length > 0) {
const nextRoute = this.navigationQueue.shift(); const nextRoute = this.navigationQueue.shift();
console.log(`App: Processing queued navigation to '${nextRoute}'`); logger.debug(`App: Processing queued navigation to '${nextRoute}'`);
setTimeout(() => this.navigateTo(nextRoute), 100); setTimeout(() => this.navigateTo(nextRoute), 100);
} }
} }
@@ -753,7 +753,7 @@ class App {
// If component is mounted, pause it instead of unmounting // If component is mounted, pause it instead of unmounting
if (this.currentView.isMounted) { if (this.currentView.isMounted) {
console.log('App: Pausing current view instead of unmounting'); logger.debug('App: Pausing current view instead of unmounting');
this.currentView.pause(); this.currentView.pause();
} }
@@ -773,10 +773,10 @@ class App {
// Ensure component is mounted (but not necessarily active) // Ensure component is mounted (but not necessarily active)
if (!component.isMounted) { if (!component.isMounted) {
console.log(`App: Mounting component for '${routeName}'`); logger.debug(`App: Mounting component for '${routeName}'`);
component.mount(); component.mount();
} else { } else {
console.log(`App: Resuming component for '${routeName}'`); logger.debug(`App: Resuming component for '${routeName}'`);
component.resume(); component.resume();
} }
@@ -858,11 +858,11 @@ class App {
// Clean up cached components (call when app is shutting down) // Clean up cached components (call when app is shutting down)
cleanup() { cleanup() {
console.log('App: Cleaning up cached components...'); logger.debug('App: Cleaning up cached components...');
this.componentCache.forEach((component, routeName) => { this.componentCache.forEach((component, routeName) => {
if (component.isMounted) { if (component.isMounted) {
console.log(`App: Unmounting cached component '${routeName}'`); logger.debug(`App: Unmounting cached component '${routeName}'`);
component.unmount(); component.unmount();
} }
}); });