updates to use the new endpoints

Author: Lauest-Iterator

src/app/applications/application.model.ts

@@ -4,10 +4,12 @@ import { Datatarget } from "@applications/datatarget/datatarget.model";
 import { ApplicationDeviceTypeUnion } from "@shared/enums/device-type";
 import { ControlledProperty } from "@shared/models/controlled-property.model";
 import { Organisation } from "../admin/organisation/organisation.model";
-import { ApplicationState } from "./enums/status.enum";
+import { ApplicationStatus } from "./enums/status.enum";
 import { IotDevice } from "./iot-devices/iot-device.model";
 import { ApplicationDeviceType } from "./models/application-device-type.model";
 
+export type ApplicationWithStatus = Application & { statusCheck: "stable" | "alert" };
+
 export class Application {
   public id: number;
   public createdAt: string;
@@ -20,7 +22,7 @@ export class Application {
   public updatedBy: number;
   public createdByName: string;
   public updatedByName: string;
-  public status?: ApplicationState;
+  public status?: ApplicationStatus;
   public startDate?: Date;
   public endDate?: Date;
   public category?: string;
@@ -41,7 +43,7 @@ export class ApplicationRequest {
   public name: string;
   public description: string;
   public organizationId: number;
-  public status?: ApplicationState;
+  public status?: ApplicationStatus;
   public startDate?: Date;
   public endDate?: Date;
   public category?: string;

src/app/applications/application.service.ts

@@ -4,6 +4,8 @@ import { Application, ApplicationData, UpdateApplicationOrganization } from "@ap
 import { forkJoin, 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";
 
 interface GetApplicationParameters {
@@ -13,6 +15,9 @@ interface GetApplicationParameters {
   orderOn: string;
   organizationId?: number;
   permissionId?: number;
+  status?: ApplicationStatus;
+  statusCheck?: ApplicationStatusCheck;
+  owner?: string;
 }
 
 @Injectable({
@@ -21,7 +26,11 @@ interface GetApplicationParameters {
 export class ApplicationService {
   public id: number;
   public canEdit = false;
-  constructor(private restService: RestService, private userMinimalService: UserMinimalService) {}
+  constructor(
+    private restService: RestService,
+    private userMinimalService: UserMinimalService,
+    private filterService: ApplicationsFilterService
+  ) {}
 
   createApplication(body: any): Observable<ApplicationData> {
     return this.restService.post("application", body, { observe: "response" });
@@ -58,6 +67,10 @@ export class ApplicationService {
     );
   }
 
+  getApplicationFilterOptions(id: number): Observable<string[]> {
+    return this.restService.get(`application/${id}/filter-information`);
+  }
+
   getApplications(
     limit: number,
     offset: number,
@@ -71,6 +84,9 @@ export class ApplicationService {
       offset,
       sort,
       orderOn,
+      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,
     };
     if (permissionId) {
       body.permissionId = permissionId;
@@ -89,10 +105,6 @@ export class ApplicationService {
     return this.restService.get("application", body);
   }
 
-  getApplicationFilterOptions(id: number): Observable<string[]> {
-    return this.restService.get(`application/${id}/filter-information`, {}, id);
-  }
-
   deleteApplication(id: number) {
     return this.restService.delete("application", id);
   }

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

@@ -13,7 +13,7 @@
   <div class="filter-selector-container">
     <div class="filter-title">Tilstand</div>
     <mat-form-field appearance="outline">
-      <mat-select class="withoutArrow" [(value)]="status" (selectionChange)="onState($event)">
+      <mat-select class="withoutArrow" [(value)]="status" (selectionChange)="onStatusCheck($event)">
         <mat-option *ngFor="let option of stateOptions" [value]="option.value">
           {{ option.label }}
         </mat-option>

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

@@ -6,9 +6,9 @@ import { MatFormFieldModule } from "@angular/material/form-field";
 import { MatIconModule } from "@angular/material/icon";
 import { MatSelectModule } from "@angular/material/select";
 import { ApplicationService } from "@applications/application.service";
-import { ApplicationState, ApplicationStatus } from "@applications/enums/status.enum";
+import { ApplicationStatus, ApplicationStatusCheck } from "@applications/enums/status.enum";
 import { SharedVariableService } from "@shared/shared-variable/shared-variable.service";
-import { ApplicationsFilterService } from "../applications-filter.service";
+import { ApplicationsFilterService } from "./applications-filter.service";
 
 @Component({
   selector: "app-application-filter",
@@ -38,26 +38,26 @@ export class ApplicationFilterComponent implements OnInit {
     });
   }
 
-  stateOptions: { label: string; value: ApplicationState | "All" }[] = [
+  stateOptions: { label: string; value: ApplicationStatus | "All" }[] = [
     { label: "Alle", value: "All" },
-    { label: "Ingen", value: ApplicationState["NONE"] },
-    { label: "In operation", value: ApplicationState["IN-OPERATION"] },
-    { label: "Project", value: ApplicationState["PROJECT"] },
-    { label: "Prototype", value: ApplicationState["PROTOTYPE"] },
-    { label: "other", value: ApplicationState["OTHER"] },
+    { 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"] },
   ];
 
-  statusOptions: { label: string; value: ApplicationStatus | "All" }[] = [
+  statusOptions: { label: string; value: ApplicationStatusCheck | "All" }[] = [
     { label: "Alle", value: "All" },
-    { label: "Alert", value: ApplicationStatus.WARNING },
-    { label: "Stable", value: ApplicationStatus.STABLE },
+    { label: "Alert", value: "alert" },
+    { label: "Stable", value: "stable" },
   ];
 
   ownerOptions: { label: string; value: string | "All" }[] = [];
 
   loadOwnerOptions(orgId: number): void {
-    this.applicationService.getApplicationFilterOptions(orgId).subscribe(options => {
-      console.log(options);
+    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;
@@ -68,9 +68,9 @@ export class ApplicationFilterComponent implements OnInit {
   status: string = "All";
   owner: string = "All";
 
-  onState(event: any): void {
+  onStatusCheck(event: any): void {
     console.log("Tilstand changed:", event.value);
-    this.filterService.updateState(event.value);
+    this.filterService.updateStatusCheck(event.value);
   }
 
   onStatus(event: any): void {

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

@@ -0,0 +1,51 @@
+import { Injectable } from "@angular/core";
+import { ApplicationStatus, ApplicationStatusCheck } from "@applications/enums/status.enum";
+import { BehaviorSubject } from "rxjs";
+
+@Injectable({
+  providedIn: "root",
+})
+export class ApplicationsFilterService {
+  public status: ApplicationStatus | "All" = "All";
+
+  public statusCheck: ApplicationStatusCheck | "All" = "All";
+  public owner: string | "All" = "All";
+
+  private valueChanges = new BehaviorSubject<{
+    status: ApplicationStatus | "All";
+    statusCheck: ApplicationStatusCheck | "All";
+    owner: string;
+  }>({
+    status: this.status,
+    statusCheck: this.statusCheck,
+    owner: this.owner,
+  });
+
+  filterChanges$ = this.valueChanges.asObservable();
+
+  updateStatus(newValue: ApplicationStatus | null) {
+    this.status = newValue;
+    this.emitChange();
+  }
+
+  updateStatusCheck(newValue: ApplicationStatusCheck | null) {
+    this.statusCheck = newValue;
+    this.emitChange();
+  }
+
+  updateOwner(newValue: string) {
+    this.owner = newValue;
+    this.emitChange();
+  }
+
+  public resetFilter() {
+    this.statusCheck = "All";
+    this.status = "All";
+    this.owner = "All";
+    this.emitChange();
+  }
+
+  private emitChange() {
+    this.valueChanges.next({ statusCheck: this.statusCheck, status: this.status, owner: this.owner });
+  }
+}

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

@@ -1,15 +1,13 @@
 import { Component, OnDestroy, OnInit } from "@angular/core";
 import { MatCheckboxModule } from "@angular/material/checkbox";
-import { Application } from "@applications/application.model";
 import { ApplicationService } from "@applications/application.service";
-import { ApplicationState, ApplicationStatus } from "@applications/enums/status.enum";
+import { ApplicationStatus, ApplicationStatusCheck } from "@applications/enums/status.enum";
 import { IotDevicesApplicationMapResponse } from "@applications/iot-devices/iot-device.model";
 import { MapCoordinates } from "@shared/components/map/map-coordinates.model";
 import { SharedVariableService } from "@shared/shared-variable/shared-variable.service";
 import { Subscription } from "rxjs";
-import { map } from "rxjs/operators";
 import { SharedModule } from "../../../shared/shared.module";
-import { ApplicationsFilterService } from "../applications-filter.service";
+import { ApplicationsFilterService } from "../application-filter/applications-filter.service";
 
 @Component({
   selector: "app-application-map",
@@ -20,7 +18,11 @@ import { ApplicationsFilterService } from "../applications-filter.service";
 })
 export class ApplicationMapComponent implements OnInit, OnDestroy {
   public devices: IotDevicesApplicationMapResponse[] = [];
-  filterValues: { status: ApplicationStatus | "All"; state: ApplicationState | "All"; owner: string | "All" };
+  filterValues: {
+    status: ApplicationStatus | "All";
+    statusCheck: ApplicationStatusCheck | "All";
+    owner: string | "All";
+  };
   private valueSubscription!: Subscription;
 
   constructor(
@@ -75,19 +77,19 @@ export class ApplicationMapComponent implements OnInit, OnDestroy {
   }
 
   getApplications(): void {
-    this.applicationService
-      .getApplications(100000, 0, "asc", "id")
-      .pipe(
-        map(applicationData => {
-          const filteredApplications = this.filterService.SortApplications(applicationData.data as Application[]);
-          return filteredApplications.map(app => app.id);
-        })
-      )
-      .subscribe(mappedCoordinates => {
-        this.applicationService.getApplicationDevicesForMap(mappedCoordinates).subscribe(data => {
-          this.devices = data;
-          this.mapDevicesToCoordinateList();
-        });
-      });
+    // this.applicationService
+    //   .getApplications(100000, 0, "asc", "id")
+    //   .pipe(
+    //     map(applicationData => {
+    //       const filteredApplications = this.filterService.SortApplications(applicationData.data as Application[]);
+    //       return filteredApplications.map(app => app.id);
+    //     })
+    //   )
+    //   .subscribe(mappedCoordinates => {
+    //     this.applicationService.getApplicationDevicesForMap(mappedCoordinates).subscribe(data => {
+    //       this.devices = data;
+    //       this.mapDevicesToCoordinateList();
+    //     });
+    //   });
   }
 }

src/app/applications/applications-list/applications-filter.service.ts

@@ -23,7 +23,7 @@
           <app-table-sort-icon [sortDirection]="getSortDirection('status')" />
         </th>
         <td mat-cell *matCellDef="let application" class="status-container">
-          <app-status-icon />
+          <app-status-icon [iconType]="application.statusCheck" />
         </td>
       </ng-container>
 

src/app/applications/applications-list/applications-table/applications-table.component.html

@@ -26,7 +26,7 @@ import { ApplicationDialogModel } from "@shared/models/dialog.model";
 import { TableColumn } from "@shared/types/table.type";
 import { merge, Observable, of as observableOf } from "rxjs";
 import { catchError, map, startWith, switchMap } from "rxjs/operators";
-import { ApplicationsFilterService } from "../applications-filter.service";
+import { ApplicationsFilterService } from "../application-filter/applications-filter.service";
 
 const columnDefinitions: TableColumn[] = [
   {
@@ -127,7 +127,7 @@ export class ApplicationsTableComponent implements AfterViewInit, OnInit {
           this.isLoadingResults = false;
           this.resultsLength = data.count;
 
-          return this.filterService.SortApplications(data.data);
+          return data.data;
         }),
         catchError(() => {
           this.isLoadingResults = false;

src/app/applications/applications-list/applications-table/applications-table.component.ts

@@ -1,17 +1,12 @@
 import { recordToEntries } from "@shared/helpers/record.helper";
 
-export enum ApplicationState {
+export enum ApplicationStatus {
   "NONE" = "NONE",
   "IN-OPERATION" = "IN-OPERATION",
   "PROJECT" = "PROJECT",
   "PROTOTYPE" = "PROTOTYPE",
   "OTHER" = "OTHER",
 }
+export type ApplicationStatusCheck = "stable" | "alert";
 
-export enum ApplicationStatus {
-  WARNING = "WARNING",
-  ALERT = "ALERT",
-  STABLE = "STABLE",
-}
-
-export const ApplicationStateEntries = recordToEntries(ApplicationState);
+export const ApplicationStatusEntries = recordToEntries(ApplicationStatus);