diff --git a/src/app/modules/data/types/place/place-list-item.component.ts b/src/app/modules/data/types/place/place-list-item.component.ts index 443bcec9..d640ced5 100644 --- a/src/app/modules/data/types/place/place-list-item.component.ts +++ b/src/app/modules/data/types/place/place-list-item.component.ts @@ -15,6 +15,7 @@ import {Component, Input} from '@angular/core'; import {SCBuilding, SCFloor, SCPointOfInterest, SCRoom} from '@openstapps/core'; import {PositionService} from '../../../map/position.service'; +import {Subscription, interval} from 'rxjs'; type placeTypes = (SCBuilding | SCRoom | SCPointOfInterest | SCFloor) & { distance?: number; @@ -51,6 +52,9 @@ export class PlaceListItemComponent { this._item = item; if (!isSCFloor(item)) { this.distance = this.positionService.getDistance(item.geo.point); + this.distanceSubscription = interval(10_000).subscribe(_ => { + this.distance = this.positionService.getDistance(item.geo.point); + }); } } @@ -64,5 +68,7 @@ export class PlaceListItemComponent { */ distance?: number; + distanceSubscription?: Subscription; + constructor(private positionService: PositionService) {} } diff --git a/src/app/modules/data/types/place/place-list-item.html b/src/app/modules/data/types/place/place-list-item.html index 345661ef..d4146272 100644 --- a/src/app/modules/data/types/place/place-list-item.html +++ b/src/app/modules/data/types/place/place-list-item.html @@ -20,12 +20,8 @@ }}
  • - {{ - distance - | numberLocalized - : 'style:unit,unit:meter,notation:compact' - }} + + {{ distance | metersLocalized }}
  • @@ -37,12 +33,8 @@ {{ 'type' | thingTranslate: item }}
  • - {{ - distance - | numberLocalized - : 'style:unit,unit:meter,notation:compact' - }} + + {{ distance | metersLocalized }}
  • diff --git a/src/app/translation/common-string-pipes.ts b/src/app/translation/common-string-pipes.ts index addfee8d..cce3e294 100644 --- a/src/app/translation/common-string-pipes.ts +++ b/src/app/translation/common-string-pipes.ts @@ -25,7 +25,7 @@ const openingHoursFn = require('opening_hours'); @Injectable() @Pipe({ name: 'join', - pure: false, // required to update the value when the promise is resolved + pure: true, }) export class ArrayJoinPipe implements PipeTransform { value = ''; @@ -50,7 +50,7 @@ export class ArrayJoinPipe implements PipeTransform { @Injectable() @Pipe({ name: 'sentencecase', - pure: false, // required to update the value when the promise is resolved + pure: true, }) export class SentenceCasePipe implements PipeTransform { value = ''; @@ -71,7 +71,7 @@ export class SentenceCasePipe implements PipeTransform { @Injectable() @Pipe({ name: 'split', - pure: false, // required to update the value when the promise is resolved + pure: true, }) export class StringSplitPipe implements PipeTransform { value = new Array(); @@ -96,9 +96,9 @@ export class StringSplitPipe implements PipeTransform { @Injectable() @Pipe({ name: 'openingHours', - pure: false, // required to update the value when the promise is resolved + pure: false, }) -export class OpeningHoursPipe implements PipeTransform { +export class OpeningHoursPipe implements PipeTransform, OnDestroy { locale: string; onLangChange?: Subscription; @@ -115,6 +115,10 @@ export class OpeningHoursPipe implements PipeTransform { } } + ngOnDestroy(): void { + this._dispose(); + } + transform(aString: string | unknown): string { this.updateValue(aString); this._dispose(); @@ -165,10 +169,86 @@ export class OpeningHoursPipe implements PipeTransform { } } +@Injectable() +@Pipe({ + name: 'metersLocalized', + pure: false, +}) +export class MetersLocalizedPipe implements PipeTransform, OnDestroy { + locale: string; + + onLangChange?: Subscription; + + value = ''; + + constructor(private readonly translate: TranslateService) { + this.locale = translate.currentLang; + } + + private _dispose(): void { + if (this.onLangChange?.closed === false) { + this.onLangChange?.unsubscribe(); + } + } + + ngOnDestroy(): void { + this._dispose(); + } + + transform(value: string | number | unknown): string { + this.updateValue(value); + this._dispose(); + if (this.onLangChange?.closed === true) { + this.onLangChange = this.translate.onLangChange.subscribe( + (event: LangChangeEvent) => { + this.locale = event.lang; + this.updateValue(value); + }, + ); + } + + return this.value; + } + + updateValue(value: string | number | unknown) { + if (typeof value !== 'string' && typeof value !== 'number') { + logger.warn(`metersLocalized pipe unable to parse input: ${value}`); + + return; + } + const imperialLocale = ['US', 'UK', 'LR', 'MM'].some(term => + this.locale.includes(term), + ); + const meters = + typeof value === 'string' ? Number.parseFloat(value) : (value as number); + + if (imperialLocale) { + const yards = meters * 1.0936; + const options = { + style: 'unit', + unit: yards >= 1760 ? 'mile' : 'yard', + maximumFractionDigits: yards >= 1760 ? 1 : 0, + } as unknown as Intl.NumberFormatOptions; + this.value = new Intl.NumberFormat(this.locale, options).format( + yards >= 1760 ? yards / 1760 : yards, + ); + } else { + const options = { + style: 'unit', + unit: meters >= 1000 ? 'kilometer' : 'meter', + maximumFractionDigits: meters >= 1000 ? 1 : 0, + } as unknown as Intl.NumberFormatOptions; + this.value = new Intl.NumberFormat(this.locale, options).format( + meters >= 1000 ? meters / 1000 : meters, + ); + } + } +} + @Injectable() @Pipe({ name: 'numberLocalized', - pure: false, // required to update the value when the promise is resolved + pure: false, }) export class NumberLocalizedPipe implements PipeTransform, OnDestroy { locale: string; @@ -237,7 +317,7 @@ export class NumberLocalizedPipe implements PipeTransform, OnDestroy { @Injectable() @Pipe({ name: 'dateFormat', - pure: false, // required to update the value when the promise is resolved + pure: false, }) export class DateLocalizedFormatPipe implements PipeTransform, OnDestroy { locale: string; diff --git a/src/app/translation/thing-translate.module.ts b/src/app/translation/thing-translate.module.ts index ebeac613..b97955c8 100644 --- a/src/app/translation/thing-translate.module.ts +++ b/src/app/translation/thing-translate.module.ts @@ -18,6 +18,7 @@ import { ArrayJoinPipe, DateLocalizedFormatPipe, NumberLocalizedPipe, + MetersLocalizedPipe, SentenceCasePipe, StringSplitPipe, OpeningHoursPipe, @@ -40,6 +41,7 @@ export interface ThingTranslateModuleConfig { declarations: [ ArrayJoinPipe, NumberLocalizedPipe, + MetersLocalizedPipe, StringSplitPipe, ThingPropertyNameTranslatePipe, ThingTranslatePipe, @@ -50,6 +52,7 @@ export interface ThingTranslateModuleConfig { exports: [ ArrayJoinPipe, NumberLocalizedPipe, + MetersLocalizedPipe, StringSplitPipe, ThingPropertyNameTranslatePipe, ThingTranslatePipe,