MOBILE-4081 airnotifier: Improve devices list format

main
Pau Ferrer Ocaña 2022-11-23 11:49:09 +01:00
parent eac671c5b3
commit 9b6a1e04fe
2 changed files with 62 additions and 33 deletions

View File

@ -9,24 +9,36 @@
</ion-toolbar>
</ion-header>
<ion-content>
<ion-refresher slot="fixed" [disabled]="!devicesLoaded" (ionRefresh)="refreshDevices($event.target)">
<ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshDevices($event.target)">
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
</ion-refresher>
<core-loading [hideUntil]="devicesLoaded">
<ion-list>
<ion-item class="ion-text-wrap" *ngFor="let device of devices" [class.item-current]="device.current">
<ion-label [class.core-bold]="device.current">
<p class="item-heading">
{{ device.name }} {{ device.model }}
<span *ngIf="device.current">({{ 'core.currentdevice' | translate }})</span>
</p>
<p>{{ device.platform }} {{ device.version }}</p>
<core-loading [hideUntil]="loaded">
<ng-container *ngFor="let platform of platformDevices">
<ion-item-divider class="ion-text-wrap">
<ion-label>
<h2>{{ platform.platform }}</h2>
</ion-label>
<core-button-with-spinner [loading]="device.updating" slot="end">
<ion-toggle [(ngModel)]="device.enable" (ngModelChange)="enableDevice(device, device.enable)">
</ion-toggle>
</core-button-with-spinner>
</ion-item>
</ion-list>
</ion-item-divider>
<ion-card>
<ion-list>
<ion-item class="ion-text-wrap" *ngFor="let device of platform.devices" [class.item-current]="device.current">
<ion-label>
<p class="item-heading">
<strong>{{ device.name }} {{ device.model }}</strong> ({{platform.platform}} {{ device.version }})
</p>
<p *ngIf="device.current"><strong>{{ 'core.currentdevice' | translate }}</strong></p>
<p>
{{ 'core.lastmodified' | translate }}: {{ device.timemodified * 1000 |
coreFormatDate:'strftimedatetimeshort' }}
</p>
</ion-label>
<core-button-with-spinner [loading]="device.updating" slot="end">
<ion-toggle [(ngModel)]="device.enable" (ngModelChange)="enableDevice(device, device.enable)">
</ion-toggle>
</core-button-with-spinner>
</ion-item>
</ion-list>
</ion-card>
</ng-container>
</core-loading>
</ion-content>

View File

@ -29,13 +29,13 @@ import { CoreUtils } from '@services/utils/utils';
})
export class AddonMessageOutputAirnotifierDevicesPage implements OnInit, OnDestroy {
devices?: AddonMessageOutputAirnotifierDeviceFormatted[] = [];
devicesLoaded = false;
platformDevices: AddonMessageOutputAirnotifierPlatformDevices[] = [];
loaded = false;
protected updateTimeout?: number;
/**
* Component being initialized.
* @inheritdoc
*/
ngOnInit(): void {
this.fetchDevices();
@ -49,12 +49,11 @@ export class AddonMessageOutputAirnotifierDevicesPage implements OnInit, OnDestr
protected async fetchDevices(): Promise<void> {
try {
const devices = await AddonMessageOutputAirnotifier.getUserDevices();
this.devices = this.formatDevices(devices);
this.formatDevices(devices);
} catch (error) {
CoreDomUtils.showErrorModal(error);
} finally {
this.devicesLoaded = true;
this.loaded = true;
}
}
@ -62,24 +61,37 @@ export class AddonMessageOutputAirnotifierDevicesPage implements OnInit, OnDestr
* Add some calculated data for devices.
*
* @param devices Devices to format.
* @return Formatted devices.
*/
protected formatDevices(devices: AddonMessageOutputAirnotifierDevice[]): AddonMessageOutputAirnotifierDeviceFormatted[] {
const formattedDevices: AddonMessageOutputAirnotifierDeviceFormatted[] = devices;
protected formatDevices(devices: AddonMessageOutputAirnotifierDevice[]): void {
this.platformDevices = [];
const formattedDevices: Record<string, AddonMessageOutputAirnotifierPlatformDevices> = {};
const pushId = CorePushNotifications.getPushId();
// Convert enabled to boolean and search current device.
formattedDevices.forEach((device) => {
devices.forEach((device: AddonMessageOutputAirnotifierDeviceFormatted) => {
if (formattedDevices[device.platform] === undefined) {
formattedDevices[device.platform] = {
platform: device.platform,
devices: [],
};
}
device.enable = !!device.enable;
device.current = !!(pushId && pushId == device.pushid);
device.current = pushId === device.pushid;
formattedDevices[device.platform].devices.push(device);
});
return formattedDevices.sort((a, b) => {
const compareA = a.name.toLowerCase();
const compareB = b.name.toLowerCase();
for (const platform in formattedDevices) {
const devices = formattedDevices[platform];
devices.devices.sort((a, b) => b.timemodified - a.timemodified);
return compareA.localeCompare(compareB);
});
devices.platform = devices.platform.replace('-fcm', '');
this.platformDevices.push(devices);
}
}
/**
@ -145,7 +157,7 @@ export class AddonMessageOutputAirnotifierDevicesPage implements OnInit, OnDestr
}
/**
* Page destroyed.
* @inheritdoc
*/
ngOnDestroy(): void {
// If there is a pending action to update devices, execute it right now.
@ -157,6 +169,11 @@ export class AddonMessageOutputAirnotifierDevicesPage implements OnInit, OnDestr
}
type AddonMessageOutputAirnotifierPlatformDevices = {
platform: string;
devices: AddonMessageOutputAirnotifierDeviceFormatted[];
};
/**
* User device with some calculated data.
*/