MOBILE-4081 airnotifier: Improve devices list format

src/addons/messageoutput/airnotifier/pages/devices/devices.html

@@ -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">
+    <core-loading [hideUntil]="loaded">
-        <ion-list>
+        <ng-container *ngFor="let platform of platformDevices">
-            <ion-item class="ion-text-wrap" *ngFor="let device of devices" [class.item-current]="device.current">
+            <ion-item-divider class="ion-text-wrap">
-                <ion-label [class.core-bold]="device.current">
+                <ion-label>
-                    <p class="item-heading">
+                    <h2>{{ platform.platform }}</h2>
-                        {{ device.name }} {{ device.model }}
-                        <span *ngIf="device.current">({{ 'core.currentdevice' | translate }})</span>
-                    </p>
-                    <p>{{ device.platform }} {{ device.version }}</p>
                 </ion-label>
-                <core-button-with-spinner [loading]="device.updating" slot="end">
+            </ion-item-divider>
-                    <ion-toggle [(ngModel)]="device.enable" (ngModelChange)="enableDevice(device, device.enable)">
+            <ion-card>
-                    </ion-toggle>
+                <ion-list>
-                </core-button-with-spinner>
+                    <ion-item class="ion-text-wrap" *ngFor="let device of platform.devices" [class.item-current]="device.current">
-            </ion-item>
+                        <ion-label>
-        </ion-list>
+                            <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>

src/addons/messageoutput/airnotifier/pages/devices/devices.ts

@@ -29,13 +29,13 @@ import { CoreUtils } from '@services/utils/utils';
 })
 export class AddonMessageOutputAirnotifierDevicesPage implements OnInit, OnDestroy {
 
-    devices?: AddonMessageOutputAirnotifierDeviceFormatted[] = [];
+    platformDevices: AddonMessageOutputAirnotifierPlatformDevices[] = [];
-    devicesLoaded = false;
+    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.formatDevices(devices);
-            this.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[] {
+    protected formatDevices(devices: AddonMessageOutputAirnotifierDevice[]): void {
-        const formattedDevices: AddonMessageOutputAirnotifierDeviceFormatted[] = devices;
+        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) => {
+        for (const platform in formattedDevices) {
-            const compareA = a.name.toLowerCase();
+            const devices = formattedDevices[platform];
-            const compareB = b.name.toLowerCase();
+            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.
  */