Как визуализировать время нахождения сотрудника в онлайн?

Для визуализации времени нахождения сотрудника в онлайн с использованием Angular, можно использовать различные подходы и инструменты.

Один из способов - использовать сервис времени сессии, который будет отслеживать, когда сотрудник входит и выходит из системы. Мы можем создать сервис, который будет хранить информацию о времени входа и выхода пользователя.

Примерно вот так может выглядеть код сервиса:

import { Injectable } from '@angular/core';

@Injectable()
export class SessionService {
  private startTime: Date;
  private endTime: Date;

  startSession(): void {
    this.startTime = new Date();
  }

  endSession(): void {
    this.endTime = new Date();
  }

  getSessionDuration(): number {
    if (this.startTime && this.endTime) {
      return this.endTime.getTime() - this.startTime.getTime();
    }
    return 0;
  }
}

Здесь мы создаем переменные startTime и endTime для хранения времени начала и окончания сессии сотрудника. Метод startSession() устанавливает startTime на текущую дату и время при входе пользователя в систему. Метод endSession() устанавливает endTime на текущую дату и время при выходе пользователя. Метод getSessionDuration() возвращает разницу между endTime и startTime в миллисекундах, что представляет длительность сессии сотрудника.

Далее мы можем использовать этот сервис в компонентах Angular для отображения времени нахождения сотрудника в онлайне. Например, мы можем создать компонент, который будет отображать время в формате "часы:минуты:секунды" и обновлять его каждую секунду.

Вот пример кода компонента:

import { Component, OnInit } from '@angular/core';
import { SessionService } from 'путь/к/сервису/session.service';

@Component({
  selector: 'app-online-time',
  templateUrl: './online-time.component.html',
  styleUrls: ['./online-time.component.css']
})
export class OnlineTimeComponent implements OnInit {
  onlineDuration: number = 0;
  timerInterval: any;

  constructor(private sessionService: SessionService) { }

  ngOnInit(): void {
    this.sessionService.startSession();
    this.timerInterval = setInterval(() => {
      this.onlineDuration = this.sessionService.getSessionDuration();
    }, 1000);
  }

  ngOnDestroy(): void {
    this.sessionService.endSession();
    clearInterval(this.timerInterval);
  }
}

В этом примере мы используем SessionService для запуска и остановки сессии сотрудника, а также для получения длительности сессии. В методе ngOnInit() мы начинаем сессию сотрудника вызовом startSession() и устанавливаем интервал обновления значения onlineDuration каждую секунду с помощью метода getSessionDuration(). В методе ngOnDestroy() мы останавливаем сессию сотрудника вызовом endSession() и очищаем интервал обновления.

Далее, мы можем создать представление для компонента OnlineTimeComponent, которое будет отображать длительность сессии сотрудника.

Вот пример представления:

<p>Время нахождения в онлайн: {{ onlineDuration | date: 'HH:mm:ss' }}</p>

В этом примере мы используем конвейер date для форматирования значения onlineDuration в формате "часы:минуты:секунды".

Когда сотрудник входит в систему, компонент OnlineTimeComponent начинает отсчет времени, и на экране будет отображаться время его нахождения в онлайне в режиме реального времени.