refactor: keep opening hours content up to date

src/app/translation/common-string-pipes.ts

@@ -18,11 +18,7 @@ import {LangChangeEvent, TranslateService} from '@ngx-translate/core';
 import moment from 'moment';
 import {Subscription} from 'rxjs';
 import {logger} from '../_helpers/ts-logger';
-// TODO: use import for opening_hours when the change is published with a new update
-// see https://github.com/opening-hours/opening_hours.js/pull/407
-// eslint-disable-next-line @typescript-eslint/no-var-requires, unicorn/prefer-module
-const ohFunction = require('opening_hours');
-
+import opening_hours from 'opening_hours';
 @Injectable()
 @Pipe({
   name: 'join',
@@ -119,7 +115,7 @@ export class StringSplitPipe implements PipeTransform {
 @Injectable()
 @Pipe({
   name: 'openingHours',
-  pure: true,
+  pure: false,
 })
 export class OpeningHoursPipe implements PipeTransform, OnDestroy {
   locale: string;
@@ -166,7 +162,7 @@ export class OpeningHoursPipe implements PipeTransform, OnDestroy {
     let openingHours;
 
     try {
-      openingHours = new ohFunction(aString, {
+      openingHours = new opening_hours(aString, {
         address: {
           country_code: 'de',
           state: 'Hessen',
@@ -184,7 +180,7 @@ export class OpeningHoursPipe implements PipeTransform, OnDestroy {
     const isOpen: boolean = openingHours.getState();
     const isUnknown: boolean = openingHours.getUnknown();
 
-    const nextChange: Date = openingHours.getNextChange();
+    const nextChange = openingHours.getNextChange();
     const nextChangeIsOpen: boolean = openingHours.getState(nextChange);
     const nextChangeUnknown: boolean = openingHours.getUnknown(nextChange);
     const nextChangeIsToday: boolean = moment().isSame(nextChange, 'day');

src/app/util/opening-hours.component.ts

@@ -13,13 +13,21 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {Component, ContentChild, Input, TemplateRef} from '@angular/core';
+import {
+  Component,
+  ContentChild,
+  Input,
+  OnDestroy,
+  OnInit,
+  TemplateRef,
+} from '@angular/core';
+import opening_hours from 'opening_hours';
 
 @Component({
   selector: 'stapps-opening-hours',
   templateUrl: 'opening-hours.html',
 })
-export class OpeningHoursComponent {
+export class OpeningHoursComponent implements OnDestroy, OnInit {
   @ContentChild(TemplateRef) content: TemplateRef<unknown>;
 
   @Input() openingHours?: string;
@@ -27,4 +35,42 @@ export class OpeningHoursComponent {
   @Input() colorize = true;
 
   @Input() showNextChange = true;
+
+  timer: NodeJS.Timeout;
+
+  updateTimer() {
+    if (typeof this.openingHours !== 'string') {
+      return;
+    }
+    clearTimeout(this.timer);
+
+    const ohObject = new opening_hours(this.openingHours, {
+      address: {
+        country_code: 'de',
+        state: 'Hessen',
+      },
+      lon: 8.667_97,
+      lat: 50.129_16,
+    });
+
+    const millisecondsRemaining =
+      // eslint-disable-next-line unicorn/prefer-date-now
+      (ohObject.getNextChange()?.getTime() ?? 0) - new Date().getTime();
+
+    if (millisecondsRemaining > 0) {
+      this.timer = setTimeout(() => {
+        // pseudo update value to tigger openingHours pipe
+        this.openingHours = `${this.openingHours}`;
+        this.updateTimer();
+      }, millisecondsRemaining);
+    }
+  }
+
+  ngOnInit() {
+    this.updateTimer();
+  }
+
+  ngOnDestroy() {
+    clearTimeout(this.timer);
+  }
 }