http-request-manager 18.15.33 → 18.15.34

package/src/lib/http-request-services-demo/request-manager-ws-demo/components/ws-notifications/ws-notifications.component.ts

@@ -0,0 +1,239 @@
+import { Component, inject, Input, OnInit, OnDestroy } from '@angular/core';
+import { NotificationServiceDemo } from '../../services/notification-service-demo.service';
+import { StateServiceDemo } from '../../services/state-service-demo.service';
+import { FormBuilder, FormControl, Validators } from '@angular/forms';
+import { Subject, takeUntil, filter, startWith, distinctUntilChanged, map, tap, combineLatest } from 'rxjs';
+
+@Component({
+    selector: 'app-ws-notifications',
+    templateUrl: './ws-notifications.component.html',
+    styleUrls: ['./ws-notifications.component.css'],
+    standalone: false
+})
+export class WsNotificationsComponent implements OnInit, OnDestroy {
+
+  @Input() server!: string;
+  @Input() wsServer!: string;
+  @Input() jwtToken!: string;
+  @Input() user!: any;
+
+  private destroy$ = new Subject<void>();
+
+  fb = inject(FormBuilder);
+  notificationService = inject(NotificationServiceDemo);
+  stateService = inject(StateServiceDemo);
+
+  // Combine in-memory channels and today's DB channels, dedupe and strip prefix for display
+  todaysNotificationChannels$ = combineLatest([
+    this.notificationService.notificationChannels$.pipe(startWith([] as string[])),
+    this.notificationService.todaysNotificationChannels$.pipe(startWith([] as string[]))
+  ]).pipe(
+    tap(([inMemory, fromDb]) => console.log('📢 In-memory channels:', inMemory, 'DB channels:', fromDb)),
+    map(([inMemory, fromDb]) => {
+      // Merge both sources and dedupe
+      const allChannels = [...(inMemory || []), ...(fromDb || [])];
+      const uniqueChannels = [...new Set(allChannels)]
+        .filter(channel => channel.startsWith('MES-'))
+        .map(channel => channel.replace('MES-', ''));
+      return uniqueChannels.sort();
+    }),
+    tap(channels => console.log('📢 Combined channels for display:', channels)),
+    distinctUntilChanged((prev, curr) => prev.length === curr.length && prev.every((v, i) => v === curr[i]))
+  );
+
+  // Track subscribed notification channels, strip prefix for display
+  subscribedNotificationChannels$ = this.notificationService.subscribedNotificationChannels$.pipe(
+    map(set => Array.from(set)
+      .filter(channel => channel.startsWith('MES-'))
+      .map(channel => channel.replace('MES-', ''))
+    ),
+    startWith([] as string[]),
+    distinctUntilChanged((prev, curr) => prev.length === curr.length && prev.every((v, i) => v === curr[i]))
+  );
+
+  // Notification messages
+  notificationMessages$ = this.notificationService.notificationMessages$;
+
+  connectionStatus$ = this.stateService.connectionStatus$;
+
+  /**
+   * Helper to ensure channel has MES- prefix for outgoing communication
+   */
+  private toNotificationChannel(channel: string): string {
+    return channel.startsWith('MES-') ? channel : `MES-${channel}`;
+  }
+
+  // Form for creating new notification channels
+  newChannelName = this.fb.control<string>('', [Validators.required, Validators.minLength(2)]);
+
+  // Channel connection selection
+  selectedConnectionChannel = this.fb.control<string | null>(null);
+  connectedChannel: string | null = null;
+
+  // Table columns for notifications display
+  displayedColumns: string[] = ['date', 'user', 'message'];
+
+  // Form for date filter when subscribing
+  dateFilter = this.fb.group({
+    startDate: this.fb.control<Date | null>(null),
+    endDate: this.fb.control<Date | null>(null),
+  });
+
+  // Form for sending notifications
+  notificationForm = this.fb.group({
+    content: this.fb.control<string | null>(null, Validators.required),
+  });
+
+  get content() {
+    return this.notificationForm.get('content') as FormControl;
+  }
+
+  /**
+   * Check if currently connected to a channel
+   */
+  isChannelConnected(subscribedChannels: string[]): boolean {
+    return this.connectedChannel !== null && subscribedChannels.includes(this.connectedChannel);
+  }
+
+  /**
+   * Connect to the selected channel
+   */
+  onConnectToChannel() {
+    const channel = this.selectedConnectionChannel.value;
+    if (!channel) return;
+
+    this.connectedChannel = channel;
+    this.onSubscribeToChannel(channel);
+  }
+
+  /**
+   * Disconnect from the current channel
+   */
+  onDisconnectFromChannel() {
+    if (this.connectedChannel) {
+      this.onUnsubscribeFromChannel(this.connectedChannel);
+      this.connectedChannel = null;
+    }
+  }
+
+  ngOnInit() {
+    // Request today's notification channels when connection is established
+    this.connectionStatus$.pipe(
+      filter(isConnected => isConnected),
+      takeUntil(this.destroy$)
+    ).subscribe(() => {
+      // Request the list of today's notification channels from database
+      this.notificationService.getTodaysNotificationChannels();
+    });
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  /**
+   * Create a new notification channel
+   */
+  onCreateChannel() {
+    if (this.newChannelName.invalid) return;
+
+    const channelName = this.newChannelName.value?.trim();
+    if (channelName) {
+      this.notificationService.createNotificationChannel(channelName);
+      this.newChannelName.reset();
+    }
+  }
+
+  /**
+   * Define and load previous channels
+   */
+  onDefinePreviousChannels() {
+    this.notificationService.definePreviousNotificationChannels();
+  }
+
+  /**
+   * Subscribe to a notification channel with optional date filter
+   */
+  onSubscribeToChannel(channel: string) {
+    const startDate = this.dateFilter.get('startDate')?.value as Date | null;
+    const endDate = this.dateFilter.get('endDate')?.value as Date | null;
+
+    const options: { startEpoch?: number; endEpoch?: number } = {};
+
+    if (startDate) {
+      // Set to start of day
+      const startOfDay = new Date(startDate);
+      startOfDay.setHours(0, 0, 0, 0);
+      options.startEpoch = Math.floor(startOfDay.getTime() / 1000);
+    }
+    if (endDate) {
+      // Set to end of day
+      const endOfDay = new Date(endDate);
+      endOfDay.setHours(23, 59, 59, 999);
+      options.endEpoch = Math.floor(endOfDay.getTime() / 1000);
+    }
+
+    this.notificationService.subscribeToNotificationChannel(channel, options, this.user);
+  }
+
+  /**
+   * Unsubscribe from a notification channel
+   */
+  onUnsubscribeFromChannel(channel: string) {
+    this.notificationService.unsubscribeFromNotificationChannel(channel);
+  }
+
+  /**
+   * Check if currently subscribed to a channel
+   */
+  isSubscribed(channel: string, subscribedChannels: string[]): boolean {
+    return subscribedChannels.includes(channel);
+  }
+
+  /**
+   * Handle chip click - toggle subscription state
+   */
+  onChipClick(channel: string, subscribedChannels: string[]) {
+    const isCurrentlySubscribed = this.isSubscribed(channel, subscribedChannels);
+    if (isCurrentlySubscribed) {
+      this.onUnsubscribeFromChannel(channel);
+    } else {
+      this.onSubscribeToChannel(channel);
+    }
+  }
+
+  /**
+   * Send a notification
+   */
+  onSendNotification() {
+    this.notificationForm.markAllAsTouched();
+
+    if (this.notificationForm.invalid) return;
+
+    const channel = this.connectedChannel;
+    if (!channel) return;
+
+    const messageContent = {
+      message: this.content.value
+    };
+
+    this.notificationService.sendNotification(channel, messageContent, this.user);
+    this.content.reset();
+  }
+
+  /**
+   * Format epoch timestamp to readable date/time
+   */
+  formatTimestamp(epoch: number): string {
+    return new Date(epoch * 1000).toLocaleString();
+  }
+
+  /**
+   * Get today's date in YYYY-MM-DD format for date input default
+   */
+  getTodayDate(): string {
+    return new Date().toISOString().split('T')[0];
+  }
+
+}

package/src/lib/http-request-services-demo/request-manager-ws-demo/models/oidc-client.model.ts

@@ -0,0 +1,31 @@
+export interface OIDCClientInterface {
+  spiffe: string
+  id: number
+  first_name: string
+  last_name: string
+  email: string
+}
+
+export class OIDCClient implements OIDCClientInterface {
+
+  constructor(
+    public spiffe: string = '',
+    public id: number = 0,
+    public first_name: string = '',
+    public last_name: string = '',
+    public email: string = '',
+  ) {}
+
+  static adapt(item?: any): OIDCClient {
+
+    return new OIDCClient(
+      item?.spiffe,
+      item?.id,
+      item?.first_name,
+      item?.last_name,
+      item?.email,
+    )
+
+  }
+
+}

package/src/lib/http-request-services-demo/request-manager-ws-demo/models/user-data.model.ts

@@ -0,0 +1,32 @@
+import { RandomPaletteColor } from "../../../services/utils/random-color.utils"
+
+export interface UserDataInterface {
+  ldap: string
+  name: string
+  email: string
+  color: string
+}
+
+export class UserData implements UserDataInterface {
+
+  constructor(
+    public ldap = '',
+    public name = '',
+    public email = '',
+    public color = RandomPaletteColor(),
+  ) {}
+
+  static adapt(item?: any): UserData {
+
+    const userName = `${item?.first_name} ${item?.last_name}`
+
+    return new UserData(
+      item?.ldap,
+      userName,
+      item?.email,
+      item?.color,
+    )
+
+  }
+
+}

package/src/lib/http-request-services-demo/request-manager-ws-demo/request-manager-ws-demo.component.html

@@ -0,0 +1,84 @@
+<div style="margin: 2rem;">
+
+  <h2 style="display: flex;">
+    <span style="flex:1">HTTP Request State Manager - Websockets</span>
+    @if ((connectionStatus$ | async); as connected) {
+      <span>
+        WS -
+        <span style="color: green;">Connected</span>
+      </span>
+    } @else {
+      <span style="color: red;">Disconnected {{ retryCount$ | async }} / {{ maxRetries$ | async }}</span>
+    }
+  </h2>
+
+  <div>
+
+    @if ((user$ | async); as userInfo) {
+      <div>
+        <mat-toolbar>
+          <div style="display: flex; flex:1">
+            <div style="flex:1">{{ userInfo.name }}</div>
+            <div>({{ userInfo.ldap }})</div>
+          </div>
+        </mat-toolbar>
+      </div>
+    }
+
+    @if (!(connectionStatus$ | async) && ((retryCount$ | async) ?? 0) < ((maxRetries$ | async) ?? 0)) {
+      <div>
+        <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+      </div>
+    }
+
+    <mat-tab-group animationDuration="0ms" [selectedIndex]="1">
+
+      <mat-tab label="WS - Data Control" [disabled]="!(connectionStatus$ | async)">
+        <!-- DATA CONTROL -->
+        <app-ws-data-control
+          [server]="server"
+          [wsServer]="wsServer"
+          [jwtToken]="jwtToken"
+          [user]="user"
+          [path]="path"
+        ></app-ws-data-control>
+
+      </mat-tab>
+
+      <mat-tab label="WS - Messaging" [disabled]="!(connectionStatus$ | async)">
+        <!-- MESSAGING -->
+        <app-ws-messaging
+          [server]="server"
+          [wsServer]="wsServer"
+          [jwtToken]="jwtToken"
+          [user]="user"
+          [path]="path"
+        ></app-ws-messaging>
+
+    </mat-tab>
+
+    <mat-tab label="WS - Notifications" [disabled]="!(connectionStatus$ | async)">
+      <!-- WS - Notifications -->
+      <app-ws-notifications
+        [server]="server"
+        [wsServer]="wsServer"
+        [jwtToken]="jwtToken"
+        [user]="user"
+      ></app-ws-notifications>
+    </mat-tab>
+
+    <mat-tab label="WS - Chats" [disabled]="true">
+      <!-- WS - Chats -->
+      <app-ws-chats></app-ws-chats>
+    </mat-tab>
+
+    <mat-tab label="WS - AI Messaging" [disabled]="true">
+      <!-- WS - AI Messaging -->
+      <app-ws-ai-messaging></app-ws-ai-messaging>
+    </mat-tab>
+
+  </mat-tab-group>
+</div>
+
+</div>
+

package/src/lib/http-request-services-demo/request-manager-ws-demo/request-manager-ws-demo.component.ts

@@ -0,0 +1,40 @@
+import { Component, inject, OnInit, Input } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
+
+import { HTTPManagerService } from '../../services/request-manager-services/http-manager.service';
+import { StateServiceDemo } from './services';
+
+@Component({
+    selector: 'app-request-manager-ws-demo',
+    templateUrl: './request-manager-ws-demo.component.html',
+    styleUrls: ['./request-manager-ws-demo.component.css'],
+    standalone: false
+})
+export class RequestManagerWsDemoComponent implements OnInit {
+
+  httpManagerService = inject(HTTPManagerService)
+  stateService = inject(StateServiceDemo)
+
+  fb = inject(FormBuilder)
+
+  @Input() server!: string;
+  @Input() wsServer!: string;
+  @Input() jwtToken!: string;
+  @Input() user!: any;
+  @Input() path: string[] = ['ai','tests'];
+
+  user$ = this.stateService.user$
+
+  retryCount$ = this.stateService.wsRetryCount$
+  maxRetries$ = this.stateService.wsMaxRetries$
+
+  connectionStatus$ = this.stateService.connectionStatus$
+
+  data$ = this.stateService.data$;
+  isPending$ = this.stateService.isPending$;
+
+  ngOnInit() { 
+    this.stateService.updateConnection(this.server, this.wsServer, this.jwtToken, this.user, this.path);
+  }
+
+}

package/src/lib/http-request-services-demo/request-manager-ws-demo/services/index.ts

@@ -0,0 +1,3 @@
+export { StateServiceDemo } from './state-service-demo.service';
+export { MessageServiceDemo } from './message-service-demo.service';
+export { NotificationServiceDemo, NotificationMessage } from './notification-service-demo.service';

package/src/lib/http-request-services-demo/request-manager-ws-demo/services/jwt-token.service.ts

@@ -0,0 +1,62 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { HTTPManagerService, ApiRequest } from '../../../services';
+import { environment } from 'src/environments/environment';
+import { BehaviorSubject, filter, take } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class JwtTokenService extends HTTPManagerService<any> {
+
+  options = ApiRequest.adapt({
+    server: environment.baseUrl,
+    path: ['jwt'],
+  });
+
+  private _token = ''
+  private _tokenSubject = new BehaviorSubject<string>('');
+  public token$ = this._tokenSubject.asObservable();
+
+  get token() {
+    return this._tokenSubject.getValue();
+  }
+
+  constructor() {
+    super();
+    this.fetchToken();
+  }
+
+  isTokenExpired(): boolean {
+    // Check if token is empty or expired
+    // You may want to add actual JWT expiry checking here
+    const currentToken = this._tokenSubject.getValue();
+    return !currentToken || currentToken === '';
+  }
+
+  getToken(): Observable<string> {
+    this.fetchToken();  // Trigger HTTP request
+    // Returns Observable that emits when token arrives (non-empty)
+    // Completes after first emission via take(1) in consumer
+    return this.token$.pipe(
+      filter(token => !!token),  // Wait until we have a non-empty token
+      take(1)  // Only take first valid token
+    );
+  }
+
+  fetchToken(): void {
+    this.getRequest(this.options)
+      .subscribe((response: any) => {
+        if (response && response.token) {
+          this._token = response.token;
+          this._tokenSubject.next(response.token);
+        }
+      });
+  }
+
+  forceRefresh(): void {
+    this.fetchToken();
+  }
+
+
+}

package/src/lib/http-request-services-demo/request-manager-ws-demo/services/message-service-demo.service.ts

@@ -0,0 +1,83 @@
+import { Injectable, inject } from '@angular/core';
+import { ChannelMessage } from '../../../services/ws-manager-service/models/channel-message.model';
+import { StateServiceDemo } from './state-service-demo.service';
+
+/**
+ * MessageServiceDemo - Channel messaging service (PUB- prefix channels)
+ *
+ * Handles:
+ * - Sending messages to channels
+ * - Channel subscription for messaging
+ * - Real-time message broadcast
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class MessageServiceDemo {
+
+  private stateService = inject(StateServiceDemo);
+
+  // Expose observables from state service
+  channels$ = this.stateService.channels$;
+  subscribedChannels$ = this.stateService.subscribedChannels$;
+  communicationMessages$ = this.stateService.communicationMessages$;
+  latestCommunicationMessages$ = this.stateService.latestCommunicationMessages$;
+  connectionStatus$ = this.stateService.connectionStatus$;
+  user$ = this.stateService.user$;
+  data$ = this.stateService.data$;
+
+  /**
+   * Helper to ensure channel has PUB- prefix
+   */
+  private toPublicChannel(channel: string): string {
+    return channel.startsWith('PUB-') ? channel : `PUB-${channel}`;
+  }
+
+  /**
+   * Helper to strip PUB- prefix for display
+   */
+  private fromPublicChannel(channel: string): string {
+    return channel.startsWith('PUB-') ? channel.replace('PUB-', '') : channel;
+  }
+
+  /**
+   * Create a new public channel
+   */
+  createChannel(channel: string) {
+    const publicChannel = this.toPublicChannel(channel);
+    this.stateService.createChannel(publicChannel);
+  }
+
+  /**
+   * Get all available channels
+   */
+  getAllChannels() {
+    this.stateService.getAllChannels();
+  }
+
+  /**
+   * Subscribe to a channel to receive messages
+   */
+  subscribeToChannel(channel: string) {
+    const publicChannel = this.toPublicChannel(channel);
+    this.stateService.subscribeToChannel(publicChannel);
+  }
+
+  /**
+   * Unsubscribe from a channel
+   */
+  unsubscribeFromChannel(channel: string) {
+    const publicChannel = this.toPublicChannel(channel);
+    this.stateService.unsubscribeFromChannel(publicChannel);
+  }
+
+  /**
+   * Send a message to one or more channels
+   */
+  sendMessage(data: ChannelMessage, channels?: string[]) {
+    const publicChannels = channels?.map(ch => this.toPublicChannel(ch));
+    console.log('sendMessage', data, 'to channels:', publicChannels);
+    this.stateService.wsMessaging(data, publicChannels);
+  }
+
+}