Theaninova/openstapps
1
0
Fork 0
mirror of https://gitlab.com/openstapps/openstapps.git synced 2025-12-11 08:46:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: live update distance in list items

Browse Source
This commit is contained in:
Thea Schöbl
2023-09-20 10:16:30 +02:00
committed by Thea Schöbl
parent 38fb7a398d
commit e0b7e616b3
3 changed files with 25 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/loud-buttons-repeat.md Normal file
View File

@@ -0,0 +1,5 @@
---
'@openstapps/app': patch
---
Fixed distance not updating in list items

27
frontend/app/src/app/modules/data/types/place/place-list-item.component.ts
View File

@@ -12,10 +12,11 @@
* You should have received a copy of the GNU General Public License along with
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
import {Component, Input} from '@angular/core';
import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
import {PositionService} from '../../../map/position.service';
import {interval, Subscription} from 'rxjs';
import {Observable, timer} from 'rxjs';
import {hasValidLocation, isSCFloor, PlaceTypes, PlaceTypesWithDistance} from './place-types';
import {map} from 'rxjs/operators';
/**
* Shows a place as a list item
@@ -24,14 +25,10 @@ import {hasValidLocation, isSCFloor, PlaceTypes, PlaceTypesWithDistance} from '.
selector: 'stapps-place-list-item',
templateUrl: 'place-list-item.html',
styleUrls: ['place-list-item.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PlaceListItemComponent {
/**
* Item getter
*/
get item(): PlaceTypesWithDistance {
return this._item;
}
_item: PlaceTypesWithDistance;
/**
* An item to show (setter is used as there were issues assigning the distance to the right place in a list)
@@ -39,24 +36,14 @@ export class PlaceListItemComponent {
@Input() set item(item: PlaceTypes) {
this._item = item;
if (!isSCFloor(item) && hasValidLocation(item)) {
this.distance = this.positionService.getDistance(item.geo.point);
this.distanceSubscription = interval(10_000).subscribe(_ => {
this.distance = this.positionService.getDistance(item.geo.point);
});
this.distance = timer(0, 10_000).pipe(map(() => this.positionService.getDistance(item.geo.point)));
}
}
/**
* An item to show
*/
private _item: PlaceTypesWithDistance;
/**
* Distance in meters
*/
distance?: number;
distanceSubscription?: Subscription;
distance?: Observable<number | undefined>;
constructor(private positionService: PositionService) {}
}

26
frontend/app/src/app/modules/data/types/place/place-list-item.html
View File

@@ -17,17 +17,17 @@
<ion-row>
<ion-col>
<div class="ion-text-wrap">
<ion-label class="title">{{ 'name' | thingTranslate: item }}</ion-label>
<ng-container *ngIf="item.type !== 'floor'">
<p class="title-sub" *ngIf="item.openingHours">
<ion-label class="title">{{ 'name' | thingTranslate: _item }}</ion-label>
<ng-container *ngIf="_item.type !== 'floor'">
<p class="title-sub" *ngIf="_item.openingHours">
<span>
<stapps-opening-hours [openingHours]="item.openingHours"></stapps-opening-hours>
<stapps-opening-hours [openingHours]="_item.openingHours"></stapps-opening-hours>
</span>
</p>
<p>
<ion-note *ngIf="item.categories && item.type !== 'building'; else onlyType">
<ion-label> {{ 'categories' | thingTranslate: item | join: ', ' | titlecase }} </ion-label>
<ion-label *ngIf="distance" class="distance">
<ion-note *ngIf="_item.categories && _item.type !== 'building'; else onlyType">
<ion-label> {{ 'categories' | thingTranslate: _item | join: ', ' | titlecase }} </ion-label>
<ion-label *ngIf="distance | async as distance" class="distance">
<ion-icon name="directions_walk"></ion-icon>
{{ distance | metersLocalized }}
</ion-label>
@@ -35,21 +35,21 @@
</p>
<ng-template #onlyType>
<ion-note>
<ion-label> {{ 'type' | thingTranslate: item | titlecase }} </ion-label>
<ion-label *ngIf="distance" class="distance">
<ion-label> {{ 'type' | thingTranslate: _item | titlecase }} </ion-label>
<ion-label *ngIf="distance | async as distance" class="distance">
<ion-icon name="directions_walk"></ion-icon>
{{ distance | metersLocalized }}
</ion-label>
</ion-note>
</ng-template>
</ng-container>
<p *ngIf="item.description">{{ 'description' | thingTranslate: item }}</p>
<p *ngIf="_item.description">{{ 'description' | thingTranslate: _item }}</p>
</div>
</ion-col>
<ng-container *ngIf="item.type !== 'building'">
<ion-col size="auto" class="in-place" *ngIf="item.inPlace">
<ng-container *ngIf="_item.type !== 'building'">
<ion-col size="auto" class="in-place" *ngIf="_item.inPlace">
<ion-icon name="pin_drop"></ion-icon
><ion-label>{{ 'name' | thingTranslate: item.inPlace }}</ion-label>
><ion-label>{{ 'name' | thingTranslate: _item.inPlace }}</ion-label>
</ion-col>
</ng-container>
</ion-row>