changes from pr

Author: Lauest-Iterator

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

@@ -1,15 +1,5 @@
 <div class="map-page">
   @if(coordinateList){
-  <app-map [coordinateList]="coordinateList" [isFromApplication]="true" [applicationId]="22"></app-map>
+  <app-map [coordinateList]="coordinateList" [isFromApplication]="true"></app-map>
   }
-  <div class="map-overlay">
-    <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,3 +1,5 @@
+@import "../../../../assets/scss/setup/variables";
+
 :host .map-page {
   background-color: #ffffff;
   padding: 20px;
@@ -6,9 +8,9 @@
 }
 
 :host .map-overlay {
-  height: 89px;
+  height: 50px;
   width: 132px;
-  background-color: #ffffff;
+  background-color: $white;
   position: absolute;
   bottom: 30px;
   left: 30px;
@@ -24,3 +26,11 @@
   flex-direction: row;
   align-items: center;
 }
+
+.mdc-checkbox__background {
+  background-color: $white !important;
+}
+
+.mdc-checkbox {
+  background-color: $white !important;
+}

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

@@ -1,12 +1,14 @@
 import { Component, OnDestroy, OnInit } from "@angular/core";
 import { MatCheckboxModule } from "@angular/material/checkbox";
+import { Gateway } from "@app/gateway/gateway.model";
 import { ApplicationService } from "@applications/application.service";
 import { ApplicationStatus, ApplicationStatusCheck } from "@applications/enums/status.enum";
 import { IotDevice } from "@applications/iot-devices/iot-device.model";
 import { TranslateService } from "@ngx-translate/core";
 import { MapCoordinates } from "@shared/components/map/map-coordinates.model";
+import { ChirpstackGatewayService } from "@shared/services/chirpstack-gateway.service";
 import { SharedVariableService } from "@shared/shared-variable/shared-variable.service";
-import { Subscription } from "rxjs";
+import { forkJoin, Subscription } from "rxjs";
 import { SharedModule } from "../../../shared/shared.module";
 import { ApplicationsFilterService } from "../application-filter/applications-filter.service";
 
@@ -19,6 +21,7 @@ import { ApplicationsFilterService } from "../application-filter/applications-fi
 })
 export class ApplicationMapComponent implements OnInit, OnDestroy {
   public devices: IotDevice[] = [];
+  public gateways: Gateway[] = [];
   public device: boolean = true;
   public gateway: boolean = true;
   filterValues: {
@@ -32,11 +35,13 @@ export class ApplicationMapComponent implements OnInit, OnDestroy {
     private filterService: ApplicationsFilterService,
     private applicationService: ApplicationService,
     public translate: TranslateService,
-    private sharedVariableService: SharedVariableService
+    private sharedVariableService: SharedVariableService,
+    private gatewayService: ChirpstackGatewayService
   ) {}
 
   ngOnInit() {
-    this.getApplications();
+    this.loadMapData();
+
     this.valueSubscription = this.filterService.filterChanges$.subscribe(updatedValues => {
       this.filterValues = updatedValues;
     });
@@ -50,7 +55,7 @@ export class ApplicationMapComponent implements OnInit, OnDestroy {
 
   coordinateList: MapCoordinates[] = null;
 
-  private mapDevicesToCoordinateList() {
+  private mapToCoordinateList() {
     const tempCoordinateList: MapCoordinates[] = [];
 
     if (Array.isArray(this.devices)) {
@@ -77,15 +82,41 @@ export class ApplicationMapComponent implements OnInit, OnDestroy {
       });
     }
 
+    if (Array.isArray(this.gateways)) {
+      this.gateways.forEach(gw => {
+        tempCoordinateList.push({
+          longitude: gw.location.longitude,
+          latitude: gw.location.latitude,
+          draggable: false,
+          editEnabled: false,
+          useGeolocation: false,
+          markerInfo: {
+            internalOrganizationName: "s",
+            name: gw.name,
+            active: true,
+            id: gw.id,
+            isDevice: false,
+            isGateway: true,
+            internalOrganizationId: this.sharedVariableService.getSelectedOrganisationId(),
+            networkTechnology: "loRaWAN",
+            lastActive: undefined,
+          },
+        });
+      });
+    }
+
     this.coordinateList = tempCoordinateList;
   }
 
-  getApplications(): void {
-    this.applicationService
-      .getApplicationDevices(this.sharedVariableService.getSelectedOrganisationId())
-      .subscribe(data => {
-        this.devices = data;
-        this.mapDevicesToCoordinateList();
-      });
+  loadMapData(): void {
+    forkJoin({
+      devices: this.applicationService.getApplicationDevices(this.sharedVariableService.getSelectedOrganisationId()),
+      gateways: this.gatewayService.getForMaps(),
+    }).subscribe(({ devices, gateways }) => {
+      this.devices = devices;
+      this.gateways = gateways.resultList;
+
+      this.mapToCoordinateList();
+    });
   }
 }

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

@@ -30,7 +30,7 @@
     [width]="25"
     [matSVGSrc]="'satellite-dish'"
     [type]="'default'"
-    [count]="gateways"
+    [count]="totalGateways"
     [description]="'APPLICATION-INFORMATION-BOX.GATEWAYS' | translate"
   />
 </div>

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

@@ -15,7 +15,6 @@ import { BasicInformationBoxComponent } from "../../../shared/components/basic-i
   styleUrl: "./applications-list-dashboard.component.scss",
 })
 export class ApplicationsListDashboardComponent implements OnInit {
-  gateways: number = 0;
   total: number = 0;
   withError: number = 0;
   withoutError: number = 0;
@@ -55,12 +54,11 @@ export class ApplicationsListDashboardComponent implements OnInit {
     );
   }
   ngOnInit(): void {
-    this.gatewayService.getMultiple().subscribe(data => (this.gateways = data.totalCount));
     this.applicationService
       .getApplicationsWithError(this.sharedVariableService.getSelectedOrganisationId())
       .subscribe(data => {
         this.withError = data.withError;
-        this.totalDevices = data.withError;
+        this.totalDevices = data.totalDevices;
         this.withoutError = data.total - data.withError;
         this.total = data.total;
       });

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

@@ -25,15 +25,12 @@ <h2>{{ "WELCOME-DIALOG.NO-ACCESS" | translate }}</h2>
       <app-application-filter />
       <app-applications-list-dashboard />
       <div class="switch-content-container">
-        <app-basic-tap-switch [taps]="taps" (newItemEvent)="onNewSwitchIndex($event)"> </app-basic-tap-switch>
-        @switch (index) { @case (1) {
-
+        <app-basic-tap-switch [tabs]="tabs"> </app-basic-tap-switch>
+        @if(router.url === mapRoute){
         <app-application-map></app-application-map>
-        } @default {
-
+        } @if(router.url === listRoute){
         <app-applications-table [organizationId]="organizationId" *ngIf="organizationId"></app-applications-table>
-
-        } }
+        }
       </div>
     </ng-container>
   </ng-container>

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

@@ -2,14 +2,14 @@ import { Component, Input, OnInit } from "@angular/core";
 import { MatDialog } from "@angular/material/dialog";
 import { MatIconRegistry } from "@angular/material/icon";
 import { DomSanitizer, Title } from "@angular/platform-browser";
-import { ActivatedRoute, Router } from "@angular/router";
+import { ActivatedRoute, NavigationEnd, Router } from "@angular/router";
 import { UserMinimalService } from "@app/admin/users/user-minimal.service";
 import { NavbarComponent } from "@app/navbar/navbar.component";
 import { ApplicationService } from "@applications/application.service";
 import { AuthService } from "@auth/auth.service";
 import { environment } from "@environments/environment";
 import { TranslateService } from "@ngx-translate/core";
-import { Counter, Tap } from "@shared/components/basic-tap-switch/basic-tap-switch.component";
+import { Counter, Tab } from "@shared/components/basic-tap-switch/basic-tap-switch.component";
 import { WelcomeDialogComponent } from "@shared/components/welcome-dialog/welcome-dialog.component";
 import { OrganizationAccessScope } from "@shared/enums/access-scopes";
 import { WelcomeDialogModel } from "@shared/models/dialog.model";
@@ -26,14 +26,15 @@ const welcomeDialogId = "welcome-dialog";
 })
 export class ApplicationsListComponent implements OnInit {
   currentSubPath: string = "";
-  taps: Tap[];
+  tabs: Tab[];
 
-  index = 0;
   isLoadingResults = true;
 
   public pageLimit = environment.tablePageSize;
   public resultsLength: number;
   public pageOffset = 0;
+  mapRoute = "/applications/map";
+  listRoute = "/applications";
 
   @Input() organizationId: number;
   canEdit: boolean;
@@ -43,8 +44,7 @@ export class ApplicationsListComponent implements OnInit {
   hasSomePermission: boolean;
   isGlobalAdmin = false;
 
-  applicationWithError = 0;
-  totalApplication = 0;
+  currentPath = "";
 
   constructor(
     public translate: TranslateService,
@@ -53,8 +53,8 @@ export class ApplicationsListComponent implements OnInit {
     private meService: MeService,
     private sharedVariableService: SharedVariableService,
     private authService: AuthService,
-    private route: ActivatedRoute,
-    private router: Router,
+    public route: ActivatedRoute,
+    public router: Router,
     private dialog: MatDialog,
     private userMinimalService: UserMinimalService,
     private matIconRegistry: MatIconRegistry,
@@ -101,18 +101,25 @@ export class ApplicationsListComponent implements OnInit {
           counters.push({ color: "alert", value: data.withError.toString() });
         }
 
-        this.taps = [
+        this.tabs = [
           {
             title: "Applikationer",
             icon: { matSVGSrc: "layers-tap", height: 16, width: 16 },
             counters: counters,
+            uri: this.listRoute,
           },
-          { title: "Kort", icon: { matSVGSrc: "map-tap", height: 17, width: 18 } },
+          { title: "Kort", icon: { matSVGSrc: "map-tap", height: 17, width: 18 }, uri: this.mapRoute },
         ];
       });
 
     // Authenticate user
     this.verifyUserAndInit();
+
+    this.router.events.subscribe(event => {
+      if (event instanceof NavigationEnd) {
+        this.currentPath = event.url;
+      }
+    });
   }
 
   verifyUserAndInit() {
@@ -208,8 +215,4 @@ export class ApplicationsListComponent implements OnInit {
       this.isLoadingResults = false;
     });
   }
-
-  onNewSwitchIndex(index: number) {
-    this.index = index;
-  }
 }

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

@@ -40,7 +40,7 @@
           <div class="options-container">
             <app-option-field
               [title]="'APPLICATION.STATUS.' + application.status | translate"
-              [type]="application.status === 'IN-OPERATION' ? 'warring' : ''"
+              [type]="application.status === 'IN-OPERATION' ? 'warning' : 'default'"
             />
           </div>
         </td>
@@ -73,7 +73,6 @@
           <app-table-sort-icon [sortDirection]="getSortDirection('data')" />
         </th>
         <td mat-cell *matCellDef="let application">
-          <!-- TODO:: add @for when data is found  -->
           <div class="options-container">
             @for (property of application.controlledProperties; track $index) {
             <app-option-field [title]="property.type" />

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

@@ -60,6 +60,7 @@
 
 .column-title-color {
   color: $color-link;
+  font-weight: bold;
 }
 
 .column-title-color-inactive {

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

@@ -164,7 +164,7 @@ export class ApplicationsTableComponent implements AfterViewInit, OnInit {
   }
 
   announceSortChange(event: { active: string; direction: string }) {
-    this.columnDefinitions.find(column => column.id === event.active).sort = event.direction as "acs" | "desc";
+    this.columnDefinitions.find(column => column.id === event.active).sort = event.direction as "asc" | "desc";
   }
   ngAfterViewInit() {
     // If the user changes the sort order, reset back to the first page.