WinCCOA WebComponent Dashboard

This package is part of the workspace for the WinCC Open Architecture WebComponent Dashboard, built using Lit and managed with Nx.

Usage information and reference details can be found in the WinCC OA documentation.

wui-cleanup-service

The wui-cleanup-service provides centralized resource cleanup during application lifecycle events such as user logout, session timeout, or application shutdown. It automatically discovers cleanable services and executes registered cleanup handlers.

The cleanup service follows a two-phase cleanup approach:

1. Service Discovery: Automatically finds services extending WuiCleanableService
2. Handler Execution: Runs registered cleanup handlers for custom cleanup logic

Creating a Cleanable Service

import { WuiCleanableService } from '@wincc-oa/wui-shared/services/wui-cleanup/wui-cleanable-service.abstract.js';
import { singleton } from 'tsyringe';

@singleton()
export class UserSessionService extends WuiCleanableService {
  /**
   * Performs service-specific cleanup operations.
   * Called automatically during application lifecycle cleanup.
   *
   * @returns Promise resolving to true if cleanup succeeded
   */
  async cleanup(): Promise<boolean> {
    try {
      localStorage.removeItem('userSession');
      sessionStorage.removeItem('tempData');

      console.log('UserSessionService cleanup completed');
      return true;
    } catch (error) {
      console.error('UserSessionService cleanup failed:', error);
      return false;
    }
  }
}

Handler Registration

Register custom cleanup handlers for operations that don't fit into service cleanup:

NOTE!

All registered handlers are removed after cleanup.

import { WuiCleanupService } from '@wincc-oa/wui-shared/services/wui-cleanup/wui-cleanup.service.js';
import { container } from 'tsyringe';

/**
 * Registers various cleanup handlers for different application resources.
 */
export function registerApplicationCleanupHandlers(): void {
  const cleanupService = container.resolve<WuiCleanupService>(WuiCleanupService);

  // Handler with no arguments - simple cache clearing
  cleanupService.registerCleanupHandler(async () => {
    console.log('Clearing application localStorage');
    localStorage.clear();
  });

  // Async handler
  cleanupService.registerCleanupHandler(
    async (userId: string, sessionId: string) => {
      await fetch('/api/cleanup', {
        body: JSON.stringify({ userId, sessionId }),
        headers: { 'Content-Type': 'application/json' }
      });
    },
    ['current-user-id', 'current-session-id']
  );
}

// Register handlers during application initialization
registerApplicationCleanupHandlers();

Executing Cleanup

import { WuiCleanupService } from '@wincc-oa/wui-shared/services/wui-cleanup/wui-cleanup.service.js';
import { container } from 'tsyringe';

/**
 * Executes cleanup during user logout.
 * Discovers and cleans up all registered services and handlers.
 */
export async function handleUserLogout(): Promise<void> {
  const cleanupService = container.resolve<WuiCleanupService>(WuiCleanupService);

  try {
    const cleanupSuccess = await cleanupService.cleanup();

    if (cleanupSuccess) {
      console.log('Logout cleanup completed successfully');
      // Redirect to login page
      window.location.href = '/login';
    } else {
      console.warn('Some cleanup operations failed during logout');
      // Handle partial cleanup failure
    }
  } catch (error) {
    console.error('Critical error during logout cleanup:', error);
  }
}

License

MIT