chore: more timers

Author: mcdurdin

public/src/app/contributions-tab/contributions-tab.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
 import { issueLabelScopes } from '../../../../shared/issue-labels';
 import { getUserAvatarUrl, getTz } from '../../../../shared/users';
 import { appState } from '../../state';
@@ -13,7 +13,7 @@ import { repoShortNameFromGithubUrl } from '../utility/repoShortNameFromGithubUr
     styleUrls: ['./contributions-tab.component.css'],
     standalone: false
 })
-export class ContributionsTabComponent implements OnInit, OnChanges {
+export class ContributionsTabComponent implements OnInit, OnChanges, OnDestroy {
 
   @Input() user: any;
 
@@ -24,8 +24,18 @@ export class ContributionsTabComponent implements OnInit, OnChanges {
   get sites() { return dataModel.sites }
   get userTz() { return getTz(this.user?.login); }
 
+  private timerId = null;
+  private currentTime: Date = new Date();
+
+  constructor(private changeDetectorRef: ChangeDetectorRef) { }
+
+  refresh() {
+    this.currentTime = new Date();
+    this.changeDetectorRef.detectChanges();
+  }
+
   userDate() {
-    return new Date().toLocaleString([], {
+    return this.currentTime.toLocaleString([], {
       weekday: "short",
       hour: "2-digit",
       minute: "2-digit",
@@ -43,13 +53,16 @@ export class ContributionsTabComponent implements OnInit, OnChanges {
 
   _issues = null;
 
-  constructor() { }
-
   stringify(o: any) {
     return JSON.stringify(o);
   }
 
   ngOnInit(): void {
+    this.timerId = setInterval(() => this.refresh(), 1000);
+  }
+
+  ngOnDestroy() {
+    clearInterval(this.timerId);
   }
 
   ngOnChanges() {

public/src/app/contributions/contributions.component.css

@@ -20,7 +20,7 @@
 }
 
 .availability-tablet {
-  width: 24px;
   height: 18px;
   font-size: 12px;
+  text-align: center;
 }

public/src/app/contributions/contributions.component.html

@@ -1,6 +1,6 @@
-<span *ngIf="shouldDisplay(user)" class="avatar-box {{user.login == activeTab ? 'selected' : ''}}" [style]="{background: userAvailability(user).color}"
+<span *ngIf="shouldDisplay(user)" class="avatar-box {{user.login == activeTab ? 'selected' : ''}}" [style]="{background: userAvailability(user).background, color: userAvailability(user).color}"
   (click)="selectUser(user.login)" [title]="userDate(user)">
   <img *ngIf="user.login == ''" class="avatar-40" src="assets/unassigned.png">
   <img *ngIf="user.login != ''" class="avatar-40" src="{{getUserAvatar(user, 40)}}">
-  <div class='availability-tablet'></div>
+  <div class='availability-tablet'>{{userTime(user)}}</div>
 </span>

public/src/app/contributions/contributions.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
+import { Component, Input, OnInit, Output, EventEmitter, ChangeDetectorRef, OnDestroy } from '@angular/core';
 import { getUserAvatarUrl, getTz } from '../../../../shared/users';
 import { appState } from '../../state';
 import { dataModel } from '../data/data.model';
@@ -9,7 +9,7 @@ import { dataModel } from '../data/data.model';
     styleUrls: ['./contributions.component.css'],
     standalone: false
 })
-export class ContributionsComponent implements OnInit {
+export class ContributionsComponent implements OnInit, OnDestroy {
 
   // data proxies
   get status() { return dataModel.status }
@@ -27,7 +27,7 @@ export class ContributionsComponent implements OnInit {
   private timerId = null;
   private currentTime: Date = new Date();
 
-  constructor() { }
+  constructor(private changeDetectorRef: ChangeDetectorRef) { }
 
   stringify(o: any) {
     return JSON.stringify(o);
@@ -37,8 +37,13 @@ export class ContributionsComponent implements OnInit {
     this.timerId = setInterval(() => this.refresh(), 1000);
   }
 
+  ngOnDestroy() {
+    clearInterval(this.timerId);
+  }
+
   private refresh() {
     this.currentTime = new Date();
+    this.changeDetectorRef.detectChanges();
   }
 
   shouldDisplay(user) {
@@ -59,6 +64,24 @@ export class ContributionsComponent implements OnInit {
     return getUserAvatarUrl(user, size);
   }
 
+  userTime(user) {
+    if(user.login == '') {
+      return ' ';
+    }
+
+    const tz = getTz(user.login);
+    if(!tz) {
+      return ' ';
+    }
+
+    return this.currentTime.toLocaleString([], {
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: false,
+      timeZone: tz,
+    });
+  }
+
   userDate(user) {
     if(user.login == '') {
       return 'Unassigned issues';
@@ -84,22 +107,25 @@ export class ContributionsComponent implements OnInit {
   userAvailability(user) {
     const tz = getTz(user.login);
     if(!tz) {
-      return {color: 'rgba(0,0,0,0)'}; //TODO
+      return {background: 'rgba(0,0,0,0)', color: 'rgba(0,0,0,0)'}; //TODO
     }
-    const now = new Date();
+    const now = this.currentTime;
     const result = {
       weekDay: now.toLocaleString('en-GB', { weekday: 'short', timeZone: tz }),
       time: now.toLocaleString('en-GB', { hour: "2-digit", minute: "2-digit", hour12: false, timeZone: tz }),
       hour: 0,
-      color: 'green'
+      background: 'green',
+      color: 'white',
     };
 
     result.hour = parseInt(result.time, 10);
 
     if(result.weekDay == 'Sat' || result.weekDay == 'Sun' || result.hour < 6 || result.hour > 21) {
-      result.color = 'red';
+      result.background = 'red';
+      // result.color = 'black';
     } else if(result.hour < 8 || result.hour > 17) {
-      result.color = 'orange';
+      result.background = 'orange';
+      result.color = 'black';
     }
     return result;
   }

public/src/app/service-state-popup/service-state-popup.component.ts

@@ -1,7 +1,7 @@
 /*
  * Keyman is copyright (C) SIL Global. MIT License.
  */
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { PopupComponent } from '../popup/popup.component';
 import { PopupCoordinatorService } from '../popup-coordinator.service';
 import { VisibilityService } from '../visibility/visibility.service';
@@ -19,7 +19,7 @@ export class ServiceStatePopupComponent extends PopupComponent implements OnInit
   private timerId = null;
   private currentTime: number = new Date().valueOf();
 
-  constructor(popupCoordinator: PopupCoordinatorService, visibilityService: VisibilityService) {
+  constructor(popupCoordinator: PopupCoordinatorService, visibilityService: VisibilityService, private changeDetectorRef: ChangeDetectorRef) {
     super(popupCoordinator, visibilityService);
   }
 
@@ -52,6 +52,7 @@ export class ServiceStatePopupComponent extends PopupComponent implements OnInit
 
   refresh() {
     this.currentTime = new Date().valueOf();
+    this.changeDetectorRef.detectChanges();
   }
 
   lastChange(service: ServiceStateRecord): string {