Theaninova/openstapps
1
0
Fork 0
mirror of https://gitlab.com/openstapps/openstapps.git synced 2026-01-21 00:52:55 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: update to ionic v6

Browse Source
This commit is contained in:
Rainer Killinger
2022-03-21 11:23:07 +00:00
parent e68d1b73f9
commit edd2ccffe9
25 changed files with 401 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/app/modules/map/item/map-item.component.html
View File

@@ -1,9 +1,19 @@
<ion-card class="compact">
<ion-card-header>
<stapps-data-list-item
[item]="item"
(click)="showMore()"
[item]="$any(item)"
id="show-more"
></stapps-data-list-item>
<ion-modal
trigger="show-more"
[presentingElement]="routerOutlet.nativeEl"
swipeToClose="true"
>
<ng-template>
<app-map-single-modal [item]="item" style="height: 100%">
</app-map-single-modal>
</ng-template>
</ion-modal>
<stapps-skeleton-list-item *ngIf="!item"></stapps-skeleton-list-item>
</ion-card-header>
<ion-card-content>
@@ -12,15 +22,27 @@
<ion-col size="7">
<ion-note>
<span *ngIf="item.address as address">
<span *ngIf="item.inPlace">{{ item.inPlace.name }},</span>
<span *ngIf="$any(item).inPlace"
>{{ $any(item).inPlace.name }},</span
>
{{ address.streetAddress }}, {{ address.addressLocality }}
</span>
</ion-note>
</ion-col>
<ion-col size="5">
<ion-button size="small" (click)="showMore()"
<ion-button size="small" id="show-more-button"
>More&nbsp;<ion-icon name="information-circle"></ion-icon
></ion-button>
<ion-modal
trigger="show-more-button"
swipeToClose="true"
[presentingElement]="routerOutlet.nativeEl"
>
<ng-template>
<app-map-single-modal [item]="item" style="height: 100%">
</app-map-single-modal>
</ng-template>
</ion-modal>
</ion-col>
</ion-row>
</ion-grid>

15
src/app/modules/map/item/map-item.component.ts
View File

@@ -12,8 +12,9 @@
* 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, EventEmitter, Input, Output} from '@angular/core';
import {Component, Input} from '@angular/core';
import {SCPlace} from '@openstapps/core';
import {IonRouterOutlet} from '@ionic/angular';
@Component({
selector: 'stapps-map-item',
@@ -26,15 +27,5 @@ export class MapItemComponent {
*/
@Input() item: SCPlace;
/**
* An item to show
*/
@Output() showDetails = new EventEmitter<SCPlace>();
/**
* Emit event to signalize to show more information
*/
showMore() {
this.showDetails.emit(this.item);
}
constructor(readonly routerOutlet: IonRouterOutlet) {}
}

61
src/app/modules/map/page/map-page.component.ts
View File

@@ -20,7 +20,11 @@ import {
ViewChild,
} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {AlertController, ModalController} from '@ionic/angular';
import {
AlertController,
IonRouterOutlet,
ModalController,
} from '@ionic/angular';
import {TranslateService} from '@ngx-translate/core';
import {
SCBuilding,
@@ -44,8 +48,6 @@ import {DataRoutingService} from '../../data/data-routing.service';
import {ContextMenuService} from '../../menu/context/context-menu.service';
import {MapProvider} from '../map.provider';
import {MapPosition, PositionService} from '../position.service';
import {MapListModalComponent} from './modals/map-list-modal.component';
import {MapSingleModalComponent} from './modals/map-single-modal.component';
import {Geolocation, PermissionStatus} from '@capacitor/geolocation';
import {Capacitor} from '@capacitor/core';
@@ -116,11 +118,6 @@ export class MapPageComponent {
*/
MAX_ZOOM = 18;
/**
* Modal for additional information on places or for a list of places
*/
modal: HTMLIonModalElement;
/**
* Options of the leaflet map
*/
@@ -158,6 +155,7 @@ export class MapPageComponent {
private modalController: ModalController,
private dataRoutingService: DataRoutingService,
private positionService: PositionService,
readonly routerOutlet: IonRouterOutlet,
) {
// initialize the options
this.options = {
@@ -277,8 +275,10 @@ export class MapPageComponent {
this.dataRoutingService.itemSelectListener().subscribe(async item => {
// in case the list item is clicked
if (this.items.length > 1) {
await this.modal.dismiss();
await this.showItem(item.uid);
await Promise.all([
this.modalController.dismiss(),
this.showItem(item.uid),
]);
}
}),
this.positionService.watchCurrentLocation({maximumAge: 3000}).subscribe({
@@ -439,45 +439,4 @@ export class MapPageComponent {
// center the selected place
this.focus(geoJSON(this.items[0].geo.point).getBounds().getCenter());
}
/**
* Show a single place
*/
async showItemModal(item: SCPlace) {
const placeWithNullLocation = {
...item,
geo: {point: {coordinates: [0, 0]}},
};
this.modal = await this.modalController.create({
component: MapSingleModalComponent,
swipeToClose: true,
componentProps: {
item: placeWithNullLocation,
dismissAction: () => {
this.modal.dismiss();
},
},
});
await this.modal.present();
}
/**
* Show the list of shown places
*/
async showListModal() {
this.modal = await this.modalController.create({
component: MapListModalComponent,
swipeToClose: true,
componentProps: {
filterQuery: this.filterQuery,
queryText: this.queryText,
dismissAction: () => {
this.modal.dismiss();
},
},
});
await this.modal.present();
}
}

34
src/app/modules/map/page/map-page.html
View File

@@ -1,3 +1,18 @@
<!--
~ Copyright (C) 2022 StApps
~ This program is free software: you can redistribute it and/or modify it
~ under the terms of the GNU General Public License as published by the Free
~ Software Foundation, version 3.
~
~ This program is distributed in the hope that it will be useful, but WITHOUT
~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public Licens for
~ more details.
~
~ You should have received a copy of the GNU General Public License along with
~ this program. If not, see <https://www.gnu.org/licenses/>.
-->
<stapps-context contentId="map"></stapps-context>
<ion-header class="ion-no-border" translucent="true">
@@ -46,7 +61,7 @@
color="light"
shape="round"
size="small"
(click)="showListModal()"
(click)="mapListModal.present()"
>
<ion-icon name="list"></ion-icon>&nbsp;&nbsp;{{
'map.page.buttons.SHOW_LIST' | translate
@@ -71,7 +86,6 @@
<stapps-map-item
*ngIf="items.length === 1"
[item]="items[0]"
(showDetails)="showItemModal($event)"
></stapps-map-item>
</div>
<div class="map-buttons floating-buttons">
@@ -80,7 +94,7 @@
color="light"
shape="round"
size="small"
(click)="showListModal()"
(click)="mapListModal.present()"
>
<ion-icon name="list"></ion-icon>&nbsp;&nbsp;{{
'map.page.buttons.SHOW_LIST' | translate
@@ -102,4 +116,18 @@
</ng-template>
</ion-button>
</div>
<ion-modal
[swipeToClose]="true"
[presentingElement]="routerOutlet.nativeEl"
#mapListModal
>
<ng-template>
<map-list-modal
style="height: 100%"
[filterQuery]="filterQuery"
[queryText]="queryText"
></map-list-modal>
</ng-template>
</ion-modal>
</ion-content>

11
src/app/modules/map/page/modals/map-list-modal.component.ts
View File

@@ -15,6 +15,7 @@
import {Component, Input, OnInit} from '@angular/core';
import {SCPlace, SCSearchFilter} from '@openstapps/core';
import {MapProvider} from '../../map.provider';
import {ModalController} from '@ionic/angular';
/**
* Modal showing a provided list of places
@@ -25,11 +26,6 @@ import {MapProvider} from '../../map.provider';
styleUrls: ['map-list.scss'],
})
export class MapListModalComponent implements OnInit {
/**
* Action when close is pressed
*/
@Input() dismissAction: () => void;
/**
* Used for creating the search for the shown list
*/
@@ -45,7 +41,10 @@ export class MapListModalComponent implements OnInit {
*/
@Input() queryText?: string;
constructor(private mapProvider: MapProvider) {}
constructor(
private mapProvider: MapProvider,
readonly modalController: ModalController,
) {}
/**
* Populate the list with the results from the search

46
src/app/modules/map/page/modals/map-list.html
View File

@@ -1,13 +1,33 @@
<ion-header translucent>
<ion-toolbar color="primary">
<ion-title>{{ 'map.modals.list.TITLE' | translate }}</ion-title>
<ion-buttons slot="end">
<ion-button (click)="dismissAction()">{{
'app.ui.CLOSE' | translate
}}</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<stapps-data-list [items]="items"></stapps-data-list>
</ion-content>
<!--
~ Copyright (C) 2022 StApps
~ This program is free software: you can redistribute it and/or modify it
~ under the terms of the GNU General Public License as published by the Free
~ Software Foundation, version 3.
~
~ This program is distributed in the hope that it will be useful, but WITHOUT
~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public Licens for
~ more details.
~
~ You should have received a copy of the GNU General Public License along with
~ this program. If not, see <https://www.gnu.org/licenses/>.
-->
<div class="container">
<ion-header translucent>
<ion-toolbar color="primary">
<ion-title>{{ 'map.modals.list.TITLE' | translate }}</ion-title>
<ion-buttons slot="end">
<ion-button (click)="modalController.dismiss()">{{
'app.ui.CLOSE' | translate
}}</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content fullscreen>
<stapps-data-list
[loading]="!items"
[items]="$any(items)"
></stapps-data-list>
</ion-content>
</div>

20
src/app/modules/map/page/modals/map-list.scss
View File

@@ -0,0 +1,20 @@
/*!
* Copyright (C) 2022 StApps
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation, version 3.
*
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public Licens for
* more details.
*
* You should have received a copy of the GNU General Public License along with
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
.container {
display: flex;
flex-direction: column;
height: 100%;
}

8
src/app/modules/map/page/modals/map-single-modal.component.ts
View File

@@ -14,6 +14,7 @@
*/
import {Component, Input} from '@angular/core';
import {SCPlace} from '@openstapps/core';
import {ModalController} from '@ionic/angular';
@Component({
selector: 'app-map-single-modal',
@@ -21,13 +22,10 @@ import {SCPlace} from '@openstapps/core';
styleUrls: ['./map-single.scss'],
})
export class MapSingleModalComponent {
/**
* Action when close is pressed
*/
@Input() dismissAction: () => void;
/**
* The item to be shown
*/
@Input() item: SCPlace;
constructor(readonly modalController: ModalController) {}
}

4
src/app/modules/map/page/modals/map-single.html
View File

@@ -2,12 +2,12 @@
<ion-toolbar color="primary">
<ion-title>{{ 'map.modals.single.TITLE' | translate }}</ion-title>
<ion-buttons slot="end">
<ion-button (click)="dismissAction()">{{
<ion-button (click)="modalController.dismiss()">{{
'app.ui.CLOSE' | translate
}}</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<stapps-data-detail-content [item]="item"></stapps-data-detail-content>
<stapps-data-detail-content [item]="$any(item)"></stapps-data-detail-content>
</ion-content>