add client name to selectors and list

Author: Idrimi

src/app/pages/devices/device-details/device-details.page.html

@@ -41,7 +41,7 @@
             <ion-select slot="end" interface="action-sheet" [(ngModel)]="group.clients" multiple="true"
               placeholder="Select Clients">
               <ion-select-option *ngFor="let client of group.clients" [value]="client">
-                {{ client.id }} 
+                {{ client.config.name || client.id }} 
               </ion-select-option>
             </ion-select>
           </ion-item>

src/app/pages/devices/devices.page.html

@@ -25,11 +25,12 @@ <h2>{{ group.name || group.id }}</h2>
       <ion-list-header>
         <ion-label>Clients</ion-label>
       </ion-list-header>
-     <ng-container *ngFor="let group of state.server.groups">
+      <ng-container *ngFor="let group of state.server.groups">
         <ng-container *ngFor="let client of group.clients">
           <ion-item [routerLink]="['/tabs/clients', client.id]">
             <ion-label>
-              <h2>{{ client.id }}</h2>
+              <h2> {{ client.config.name || client.id }}
+              </h2>
               <p>Group: {{ group.name || group.id }}</p>
               <p>Volume: {{ client.config.volume.percent || 'N/A' }}%</p>
               <p>Last Seen: {{ client.lastSeen.sec *1000 | date }}</p>
@@ -38,8 +39,8 @@ <h2>{{ client.id }}</h2>
           </ion-item>
         </ng-container>
 
-     </ng-container>
-    
+      </ng-container>
+
     </ion-list>
   </div>
   <ng-template #noState>