refactor: improve display of distances

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) {}
 }

src/app/modules/data/types/place/place-list-item.html

@@ -20,12 +20,8 @@
                   }}
                 </li>
                 <li *ngIf="distance">
-                  <ion-icon name="walk"></ion-icon
-                  >{{
-                    distance
-                      | numberLocalized
-                        : 'style:unit,unit:meter,notation:compact'
-                  }}
+                  <ion-icon name="walk"></ion-icon>
+                  {{ distance | metersLocalized }}
                 </li>
               </ul>
             </ion-note>
@@ -37,12 +33,8 @@
                   {{ 'type' | thingTranslate: item }}
                 </li>
                 <li *ngIf="distance">
-                  <ion-icon name="walk"></ion-icon
-                  >{{
-                    distance
-                      | numberLocalized
-                        : 'style:unit,unit:meter,notation:compact'
-                  }}
+                  <ion-icon name="walk"></ion-icon>
+                  {{ distance | metersLocalized }}
                 </li>
               </ul>
             </ion-note>