Feature/43938 update applications list

src/app/applications/application-detail/application-detail.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, EventEmitter, OnDestroy, OnInit, Output } from "@angular/core";
+import { AfterViewInit, ChangeDetectorRef, Component, EventEmitter, OnDestroy, OnInit, Output } from "@angular/core";
 import { MatDialog } from "@angular/material/dialog";
 import { Title } from "@angular/platform-browser";
 import { ActivatedRoute, Router } from "@angular/router";
@@ -71,11 +71,13 @@ export class ApplicationDetailComponent implements OnInit, OnDestroy, AfterViewI
     private restService: RestService,
     private sharedVariableService: SharedVariableService,
     private chirpstackGatewayService: ChirpstackGatewayService,
-    private changeOrganizationDialog: MatDialog
+    private changeOrganizationDialog: MatDialog,
+    private cdr: ChangeDetectorRef
   ) {}
 
   ngOnInit(): void {
     this.id = +this.route.snapshot.paramMap.get("id");
+
     if (this.id) {
       this.bindApplication(this.id);
       this.dropdownButton = {
@@ -148,7 +150,7 @@ export class ApplicationDetailComponent implements OnInit, OnDestroy, AfterViewI
           name: dev.name,
           active: dev.type,
           id: dev.id,
-          isDevice: false,
+          isDevice: true,
           internalOrganizationId: this.sharedVariableService.getSelectedOrganisationId(),
           networkTechnology: dev.type,
           lastActive: dev.latestSentMessage,
@@ -213,6 +215,7 @@ export class ApplicationDetailComponent implements OnInit, OnDestroy, AfterViewI
   bindApplication(id: number): void {
     this.applicationsSubscription = this.applicationService.getApplication(id).subscribe(application => {
       this.application = application;
+      this.cdr.detectChanges();
     });
   }
 

src/app/applications/application.service.ts

@@ -1,12 +1,12 @@
 import { Injectable } from "@angular/core";
 import { UserMinimalService } from "@app/admin/users/user-minimal.service";
 import { Application, ApplicationData, UpdateApplicationOrganization } from "@applications/application.model";
-import { forkJoin, Observable } from "rxjs";
+import { Observable } from "rxjs";
 import { map } from "rxjs/operators";
 import { RestService } from "../shared/services/rest.service";
 import { ApplicationsFilterService } from "./applications-list/application-filter/applications-filter.service";
 import { ApplicationStatus, ApplicationStatusCheck } from "./enums/status.enum";
-import { IotDevicesApplicationMapResponse } from "./iot-devices/iot-device.model";
+import { IotDevice } from "./iot-devices/iot-device.model";
 
 interface GetApplicationParameters {
   limit: number;
@@ -20,6 +20,12 @@ interface GetApplicationParameters {
   owner?: string;
 }
 
+interface GetDevicesParameters {
+  status?: ApplicationStatus;
+  statusCheck?: ApplicationStatusCheck;
+  owner?: string;
+}
+
 @Injectable({
   providedIn: "root",
 })
@@ -51,26 +57,18 @@ export class ApplicationService {
       })
     );
   }
-  getApplicationDevicesForMap(applicationIds: number[]): Observable<IotDevicesApplicationMapResponse[]> {
-    const requests = applicationIds.map(applicationId =>
-      this.restService.get(`application/${applicationId}/iot-devices-map`).pipe(
-        map((data: IotDevicesApplicationMapResponse[]) => {
-          return data;
-        })
-      )
-    );
-
-    return forkJoin(requests).pipe(
-      map((responses: IotDevicesApplicationMapResponse[][]) => {
-        return responses.reduce((acc, val) => acc.concat(val), []);
-      })
-    );
-  }
-
   getApplicationFilterOptions(id: number): Observable<string[]> {
     return this.restService.get(`application/${id}/filter-information`);
   }
 
+  getApplicationsWithError(id: number): Observable<{
+    total: number;
+    withError: number;
+    totalDevices: number;
+  }> {
+    return this.restService.get(`application/${id}/application-dashboard-data`);
+  }
+
   getApplications(
     limit: number,
     offset: number,
@@ -98,6 +96,16 @@ export class ApplicationService {
     return this.restService.get("application", body);
   }
 
+  getApplicationDevices(organizationId?: number): Observable<IotDevice[]> {
+    const body: GetDevicesParameters = {
+      statusCheck: this.filterService.statusCheck === "All" ? null : this.filterService.statusCheck,
+      status: this.filterService.status === "All" ? null : this.filterService.status,
+      owner: this.filterService.owner === "All" ? null : this.filterService.owner,
+    };
+
+    return this.restService.get(`application/${organizationId}/iot-devices-org`, body);
+  }
+
   getApplicationsByOrganizationId(organizationId: number): Observable<ApplicationData> {
     const body = {
       organizationId,

src/app/applications/applications-list/application-filter/application-filter.component.html

@@ -1,30 +1,33 @@
 <div class="filter-container">
   <div class="filter-selector-container">
-    <div class="filter-title">Status</div>
+    <div class="filter-title">{{ "APPLICATION-FILTER.STATUS" | translate }}</div>
     <mat-form-field appearance="outline">
-      <mat-select class="withoutArrow" [(value)]="state" placeholder="test" (selectionChange)="onStatus($event)">
+      <mat-select class="withoutArrow" [(value)]="state" placeholder="test" (selectionChange)="onStatusCheck($event)">
         <mat-option *ngFor="let option of statusOptions" [value]="option.value">
-          {{ option.label }}
+          {{ option.label | translate }}
         </mat-option>
       </mat-select>
     </mat-form-field>
   </div>
 
   <div class="filter-selector-container">
-    <div class="filter-title">Tilstand</div>
+    <div class="filter-title">{{ "APPLICATION-FILTER.STATE" | translate }}</div>
     <mat-form-field appearance="outline">
-      <mat-select class="withoutArrow" [(value)]="status" (selectionChange)="onStatusCheck($event)">
+      <mat-select class="withoutArrow" [(value)]="status" (selectionChange)="onStatus($event)">
         <mat-option *ngFor="let option of stateOptions" [value]="option.value">
-          {{ option.label }}
+          {{ option.label | translate }}
         </mat-option>
       </mat-select>
     </mat-form-field>
   </div>
 
   <div class="filter-selector-container">
-    <div class="filter-title">Ejer</div>
+    <div class="filter-title">{{ "APPLICATION-FILTER.OWNER" | translate }}</div>
     <mat-form-field appearance="outline">
       <mat-select class="withoutArrow" [(value)]="owner" (selectionChange)="onOwner($event)">
+        <mat-option [value]="owner">
+          {{ "APPLICATION-FILTER.ALL" | translate }}
+        </mat-option>
         <mat-option *ngFor="let option of ownerOptions" [value]="option.value">
           {{ option.label }}
         </mat-option>
@@ -35,8 +38,10 @@
   <div class="spacer"></div>
   <button class="filter-button" mat-flat-button (click)="onButtonClick()">
     <div class="filter-icon-container">
-      <img class="filter-icon" ngSrc="../../../../assets/images/filter.png" width="25" height="25" priority />
-      Reset filtre
+      <img ngSrc="../../../../assets/images/sliders.svg" width="18" height="16" priority />
+      <div class="filter-label">
+        {{ "APPLICATION-FILTER.RESET-FILTER" | translate }}
+      </div>
     </div>
   </button>
 </div>

src/app/applications/applications-list/application-filter/application-filter.component.scss

@@ -4,15 +4,23 @@
   display: flex;
   flex-direction: row;
   flex: 1;
-  height: 65px;
+  min-height: 65px;
   margin-bottom: 25px;
+  flex-wrap: wrap;
+}
+
+@media (max-width: 768px) {
+  .filter-container {
+    flex-direction: column;
+  }
 }
 
 .filter-selector-container {
-  width: 200;
+  width: 200px;
   margin-right: 30px;
   display: flex;
   flex-direction: column;
+  margin-bottom: 30px;
 }
 
 .filter-title {
@@ -41,12 +49,15 @@
   justify-content: center;
   gap: 10px;
   width: 150px;
+}
+
+.filter-label {
   font-size: 16px;
+  font-weight: 500;
 }
 
 :host .mat-mdc-select {
-  height: 20px;
-  line-height: 35px;
+  height: 24px;
   display: flex;
   align-items: center;
   font-size: 16px !important;
@@ -64,6 +75,7 @@
   height: 40px !important;
   display: flex !important;
   align-items: center !important;
+  font-size: 16px !important;
 }
 
 :host .mat-mdc-select-arrow {

src/app/applications/applications-list/application-filter/application-filter.component.ts

@@ -7,6 +7,9 @@ import { MatIconModule } from "@angular/material/icon";
 import { MatSelectModule } from "@angular/material/select";
 import { ApplicationService } from "@applications/application.service";
 import { ApplicationStatus, ApplicationStatusCheck } from "@applications/enums/status.enum";
+import { ChirpstackGatewayService } from "./../../../shared/services/chirpstack-gateway.service";
+
+import { TranslateModule, TranslateService } from "@ngx-translate/core";
 import { SharedVariableService } from "@shared/shared-variable/shared-variable.service";
 import { ApplicationsFilterService } from "./applications-filter.service";
 
@@ -21,6 +24,7 @@ import { ApplicationsFilterService } from "./applications-filter.service";
     MatSelectModule,
     MatOptionModule,
     MatButtonModule,
+    TranslateModule,
   ],
   templateUrl: "./application-filter.component.html",
   styleUrl: "./application-filter.component.scss",
@@ -30,56 +34,55 @@ export class ApplicationFilterComponent implements OnInit {
   constructor(
     private applicationService: ApplicationService,
     private filterService: ApplicationsFilterService,
-    private sharedVariableService: SharedVariableService
+    private sharedVariableService: SharedVariableService,
+    public translate: TranslateService,
+    public ChirpstackGatewayService: ChirpstackGatewayService
   ) {}
   ngOnInit(): void {
-    this.sharedVariableService.getValue().subscribe(organizationId => {
-      this.loadOwnerOptions(organizationId);
-    });
+    this.loadOwnerOptions();
+    this.ChirpstackGatewayService.getMultiple().subscribe(data => data);
   }
 
   stateOptions: { label: string; value: ApplicationStatus | "All" }[] = [
-    { label: "Alle", value: "All" },
-    { label: "Ingen", value: ApplicationStatus["NONE"] },
-    { label: "In operation", value: ApplicationStatus["IN-OPERATION"] },
-    { label: "Project", value: ApplicationStatus["PROJECT"] },
-    { label: "Prototype", value: ApplicationStatus["PROTOTYPE"] },
-    { label: "other", value: ApplicationStatus["OTHER"] },
+    { label: "APPLICATION-FILTER.ALL", value: "All" },
+    { label: "APPLICATION-FILTER.NONE", value: ApplicationStatus["NONE"] },
+    { label: "APPLICATION-FILTER.IN-OPERATION", value: ApplicationStatus["IN-OPERATION"] },
+    { label: "APPLICATION-FILTER.PROJECT", value: ApplicationStatus["PROJECT"] },
+    { label: "APPLICATION-FILTER.PROTOTYPE", value: ApplicationStatus["PROTOTYPE"] },
+    { label: "APPLICATION-FILTER.OTHER", value: ApplicationStatus["OTHER"] },
   ];
 
   statusOptions: { label: string; value: ApplicationStatusCheck | "All" }[] = [
-    { label: "Alle", value: "All" },
-    { label: "Alert", value: "alert" },
-    { label: "Stable", value: "stable" },
+    { label: "APPLICATION-FILTER.ALL", value: "All" },
+    { label: "APPLICATION-FILTER.ALERT", value: "alert" },
+    { label: "APPLICATION-FILTER.STABLE", value: "stable" },
   ];
 
   ownerOptions: { label: string; value: string | "All" }[] = [];
 
-  loadOwnerOptions(orgId: number): void {
-    this.applicationService.getApplicationFilterOptions(1).subscribe(options => {
-      console.log(options[0]);
-      const optionsArray: { label: string; value: string }[] = [{ label: "Alle", value: "All" }];
-      options.forEach(option => optionsArray.push({ label: option, value: option }));
-      this.ownerOptions = optionsArray;
-    });
+  loadOwnerOptions(): void {
+    this.applicationService
+      .getApplicationFilterOptions(this.sharedVariableService.getSelectedOrganisationId())
+      .subscribe(options => {
+        const optionsArray: { label: string; value: string }[] = [];
+        options.forEach(option => optionsArray.push({ label: option, value: option }));
+        this.ownerOptions = optionsArray;
+      });
   }
 
   state: string = "All";
   status: string = "All";
   owner: string = "All";
 
   onStatusCheck(event: any): void {
-    console.log("Tilstand changed:", event.value);
     this.filterService.updateStatusCheck(event.value);
   }
 
   onStatus(event: any): void {
-    console.log("Status changed:", event.value);
     this.filterService.updateStatus(event.value);
   }
 
   onOwner(event: any): void {
-    console.log("Ejer changed:", event.value);
     this.filterService.updateOwner(event.value);
   }
 

src/app/applications/applications-list/application-map/application-map.component.html

@@ -3,7 +3,13 @@
   <app-map [coordinateList]="coordinateList" [isFromApplication]="true" [applicationId]="22"></app-map>
   }
   <div class="map-overlay">
-    <mat-checkbox class="example-margin" />
-    <mat-checkbox class="example-margin" />
+    <div class="check-box-container">
+      <mat-checkbox class="example-margin" [checked]="device" />
+      <div>{{ "APPLICATION-INFORMATION-BOX.DEVICES" | translate }}</div>
+    </div>
+    <div class="check-box-container">
+      <mat-checkbox class="example-margin" [checked]="gateway" />
+      <div>{{ "APPLICATION-INFORMATION-BOX.GATEWAYS" | translate }}</div>
+    </div>
   </div>
 </div>

src/app/applications/applications-list/application-map/application-map.component.scss

@@ -1,17 +1,26 @@
-.map-page {
-  background-color: #ffff;
+:host .map-page {
+  background-color: #ffffff;
   padding: 20px;
   height: 600px;
   position: relative;
 }
 
-.map-overlay {
+:host .map-overlay {
   height: 89px;
   width: 132px;
-  background-color: #ffff;
+  background-color: #ffffff;
   position: absolute;
   bottom: 30px;
   left: 30px;
   z-index: 10000;
   border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  padding-top: 5px;
+}
+
+.check-box-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }