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

feature/refactoring #3

Merged
master merged 18 commits from feature/refactoring into main 2025-09-02 13:26:13 +02:00
Conversation 0 Commits 18 Files Changed 21 +34 -34
1 changed files with 34 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit ab03cd772d - Show all commits

68
public/scripts/framework.js
View File

@@ -88,7 +88,7 @@ class ViewModel {
// Set data property and notify listeners
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
const hasChanged = this._data[property] !== value;
@@ -100,10 +100,10 @@ class ViewModel {
// Update the data
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]);
} 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) {
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
_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)) {
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) => {
try {
console.log(`ViewModel: Calling listener ${index} for property '${property}'`);
logger.debug(`ViewModel: Calling listener ${index} for property '${property}'`);
callback(value, previousValue);
} catch (error) {
console.error(`Error in property listener for ${property}:`, error);
}
});
} 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() {
if (this.isMounted) return;
console.log(`${this.constructor.name}: Starting mount...`);
logger.debug(`${this.constructor.name}: Starting mount...`);
this.isMounted = true;
this.setupEventListeners();
this.setupViewModelListeners();
this.render();
console.log(`${this.constructor.name}: Mounted successfully`);
logger.debug(`${this.constructor.name}: Mounted successfully`);
}
// Unmount the component
@@ -302,14 +302,14 @@ class Component {
this.cleanupEventListeners();
this.cleanupViewModelListeners();
console.log(`${this.constructor.name} unmounted`);
logger.debug(`${this.constructor.name} unmounted`);
}
// Pause the component (keep alive but pause activity)
pause() {
if (!this.isMounted) return;
console.log(`${this.constructor.name}: Pausing component`);
logger.debug(`${this.constructor.name}: Pausing component`);
// Pause any active timers or animations
if (this.updateInterval) {
@@ -328,7 +328,7 @@ class Component {
resume() {
if (!this.isMounted || !this.isPaused) return;
console.log(`${this.constructor.name}: Resuming component`);
logger.debug(`${this.constructor.name}: Resuming component`);
this.isPaused = false;
@@ -385,7 +385,7 @@ class Component {
// Partial update method for efficient data updates
updatePartial(property, newValue, previousValue) {
// 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
@@ -474,22 +474,22 @@ class Component {
// Helper method to set innerHTML safely
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;
if (selector === '') {
// Empty selector means set HTML on the component's container itself
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 {
// Find element within the component's container
element = this.findElement(selector);
}
if (element) {
console.log(`${this.constructor.name}: Element found, setting innerHTML`);
logger.debug(`${this.constructor.name}: Element found, setting innerHTML`);
element.innerHTML = html;
console.log(`${this.constructor.name}: innerHTML set successfully`);
logger.debug(`${this.constructor.name}: innerHTML set successfully`);
} else {
console.error(`${this.constructor.name}: Element not found for selector '${selector}'`);
}
@@ -651,7 +651,7 @@ class App {
// Store in cache
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
@@ -659,13 +659,13 @@ class App {
// Check cooldown period
const now = Date.now();
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;
}
// If navigation is already in progress, queue this request
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)) {
this.navigationQueue.push(routeName);
}
@@ -674,7 +674,7 @@ class App {
// If trying to navigate to the same route, do nothing
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;
}
@@ -687,19 +687,19 @@ class App {
this.navigationInProgress = true;
try {
console.log(`App: Navigating to route '${routeName}'`);
logger.debug(`App: Navigating to route '${routeName}'`);
const route = this.routes.get(routeName);
if (!route) {
console.error(`Route '${routeName}' not found`);
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
let component = this.componentCache.get(routeName);
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);
if (!container) {
console.error(`Container '${route.containerId}' not found`);
@@ -714,12 +714,12 @@ class App {
// Hide current view smoothly
if (this.currentView) {
console.log('App: Hiding current view');
logger.debug('App: Hiding current view');
await this.hideCurrentView();
}
// Show new view
console.log(`App: Showing new view '${routeName}'`);
logger.debug(`App: Showing new view '${routeName}'`);
await this.showView(routeName, component);
// Update navigation state
@@ -731,7 +731,7 @@ class App {
// Mark view as cached for future use
this.cachedViews.add(routeName);
console.log(`App: Navigation to '${routeName}' completed`);
logger.debug(`App: Navigation to '${routeName}' completed`);
} catch (error) {
console.error('App: Navigation failed:', error);
@@ -741,7 +741,7 @@ class App {
// Process any queued navigation requests
if (this.navigationQueue.length > 0) {
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);
}
}
@@ -753,7 +753,7 @@ class App {
// If component is mounted, pause it instead of unmounting
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();
}
@@ -773,10 +773,10 @@ class App {
// Ensure component is mounted (but not necessarily active)
if (!component.isMounted) {
console.log(`App: Mounting component for '${routeName}'`);
logger.debug(`App: Mounting component for '${routeName}'`);
component.mount();
} else {
console.log(`App: Resuming component for '${routeName}'`);
logger.debug(`App: Resuming component for '${routeName}'`);
component.resume();
}
@@ -858,11 +858,11 @@ class App {
// Clean up cached components (call when app is shutting down)
cleanup() {
console.log('App: Cleaning up cached components...');
logger.debug('App: Cleaning up cached components...');
this.componentCache.forEach((component, routeName) => {
if (component.isMounted) {
console.log(`App: Unmounting cached component '${routeName}'`);
logger.debug(`App: Unmounting cached component '${routeName}'`);
component.unmount();
}
});