Merge branch 'stage' into feature/44446_missing_sorting_arrow

Author: fcv-iteratorIt

src/app/app.component.html

@@ -1,7 +1,7 @@
 <div *ngIf="isLoggedIn">
-  <app-navbar></app-navbar>
+  <app-navbar (navToggle)="onNavToggle($event)"></app-navbar>
 </div>
-<div id="content">
+<div id="content" [class.nav-visible]="isNavVisible">
   <div id="mainBody">
     <router-outlet></router-outlet>
   </div>

src/app/app.component.scss

@@ -3,6 +3,10 @@
 
 #content {
   @media (min-width: $screen-md-min) {
-    padding-left: $navWidth;
+    padding-left: 0;
+    transition: padding-left 0.3s ease-in-out;
+    &.nav-visible {
+      padding-left: $navWidth;
+    }
   }
 }

src/app/app.component.ts

@@ -9,6 +9,11 @@ import { LoggedInService } from "@shared/services/loggedin.service";
 export class AppComponent {
   title = "OS2IoT-frontend";
   isLoggedIn = true;
+  isNavVisible = true;
+
+  onNavToggle(isVisible: boolean) {
+    this.isNavVisible = isVisible;
+  }
 
   constructor(private loggedInService: LoggedInService) {
     loggedInService.changeEmitted?.subscribe(change => {

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

@@ -11,6 +11,7 @@ import { SharedVariableService } from "@shared/shared-variable/shared-variable.s
 import { forkJoin, Subscription } from "rxjs";
 import { SharedModule } from "../../../shared/shared.module";
 import { ApplicationsFilterService } from "../application-filter/applications-filter.service";
+import moment from "moment";
 
 @Component({
   selector: "app-application-map",
@@ -29,6 +30,7 @@ export class ApplicationMapComponent implements OnInit, OnDestroy {
     statusCheck: ApplicationStatusCheck | "All";
     owner: string | "All";
   };
+  coordinateList: MapCoordinates[] = null;
   private valueSubscription!: Subscription;
 
   constructor(
@@ -53,7 +55,17 @@ export class ApplicationMapComponent implements OnInit, OnDestroy {
     }
   }
 
-  coordinateList: MapCoordinates[] = null;
+  private 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();
+    });
+  }
 
   private mapToCoordinateList() {
     const tempCoordinateList: MapCoordinates[] = [];
@@ -62,6 +74,10 @@ export class ApplicationMapComponent implements OnInit, OnDestroy {
       this.devices.forEach(dev => {
         const [longitude, latitude] = dev.location.coordinates;
 
+        const isActive = dev.latestReceivedMessage?.sentTime
+          ? moment(dev.latestReceivedMessage?.sentTime).unix() > moment(new Date()).subtract(1, "day").unix()
+          : false;
+
         tempCoordinateList.push({
           longitude: longitude,
           latitude: latitude,
@@ -71,12 +87,13 @@ export class ApplicationMapComponent implements OnInit, OnDestroy {
           markerInfo: {
             internalOrganizationName: "s",
             name: dev.name,
-            active: true,
+            active: isActive,
+            isGateway: false,
             id: dev.id,
             isDevice: true,
             internalOrganizationId: this.sharedVariableService.getSelectedOrganisationId(),
             networkTechnology: dev.type,
-            lastActive: dev?.latestReceivedMessage ? dev?.latestReceivedMessage.sentTime : null,
+            lastActive: dev?.latestReceivedMessage?.sentTime,
           },
         });
       });
@@ -91,32 +108,20 @@ export class ApplicationMapComponent implements OnInit, OnDestroy {
           editEnabled: false,
           useGeolocation: false,
           markerInfo: {
-            internalOrganizationName: "s",
+            internalOrganizationName: gw.organizationName,
             name: gw.name,
-            active: true,
+            active: this.gatewayService.isGatewayActive(gw),
             id: gw.id,
             isDevice: false,
             isGateway: true,
             internalOrganizationId: this.sharedVariableService.getSelectedOrganisationId(),
-            networkTechnology: "loRaWAN",
-            lastActive: undefined,
+            networkTechnology: "",
+            lastActive: gw.lastSeenAt,
           },
         });
       });
     }
 
     this.coordinateList = tempCoordinateList;
   }
-
-  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.component.html

@@ -13,27 +13,28 @@ <h2>{{ "WELCOME-DIALOG.NO-ACCESS" | translate }}</h2>
   </header>
 </ng-template>
 <app-top-bar
-  [title]="'NAV.APPLICATIONS' | translate"
+  [canEdit]="canEdit"
   [ctaLabel]="'FORM.CREATE-NEW-APPLICATION' | translate"
   [ctaRouterLink]="'new-application'"
-  [canEdit]="canEdit"
+  [title]="'NAV.APPLICATIONS' | translate"
 >
 </app-top-bar>
 <div class="main-page d-flex flex-column">
   <ng-container *ngIf="!isLoadingResults">
     <ng-container *ngIf="hasSomePermission" ; else noPermissions>
-      <app-application-filter />
-      <app-applications-list-dashboard />
+      <app-application-filter/>
+      <app-applications-list-dashboard/>
       <div class="switch-content-container">
-        <app-basic-tap-switch [tabs]="tabs" [currentUrl]="currentPath" (tabClicked)="onTapClicked($event)">
-        </app-basic-tap-switch>
-        @if(currentPath === mapRoute){
-        <app-application-map></app-application-map>
-        } @if(currentPath === listRoute){
-        <app-applications-table [organizationId]="organizationId" *ngIf="organizationId"></app-applications-table>
+        <app-basic-tab-switch (tabClicked)="onTapClicked($event)" [currentUrl]="currentPath" [tabs]="tabs">
+        </app-basic-tab-switch>
+        @if (currentPath === mapRoute) {
+          <app-application-map></app-application-map>
+        }
+        @if (currentPath === listRoute) {
+          <app-applications-table [organizationId]="organizationId" *ngIf="organizationId"></app-applications-table>
         }
       </div>
     </ng-container>
   </ng-container>
-  <mat-spinner ngClass="align-self-center" *ngIf="isLoadingResults"></mat-spinner>
+  <mat-spinner *ngIf="isLoadingResults" ngClass="align-self-center"></mat-spinner>
 </div>

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

@@ -9,12 +9,12 @@ 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, 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";
 import { MeService } from "@shared/services/me.service";
 import { SharedVariableService } from "@shared/shared-variable/shared-variable.service";
+import { Counter, Tab } from "@shared/components/basic-tab-switch/basic-tab-switch.component";
 
 const welcomeDialogId = "welcome-dialog";
 
@@ -32,19 +32,17 @@ export class ApplicationsListComponent implements OnInit {
 
   public pageLimit = environment.tablePageSize;
   public resultsLength: number;
-  public pageOffset = 0;
   mapRoute = "/applications/map";
   listRoute = "/applications";
 
   @Input() organizationId: number;
   canEdit: boolean;
-  private unauthorizedMessage: string;
-  private kombitError: string;
-  private noAccess: string;
   hasSomePermission: boolean;
   isGlobalAdmin = false;
-
   currentPath = "";
+  private unauthorizedMessage: string;
+  private kombitError: string;
+  private noAccess: string;
 
   constructor(
     public translate: TranslateService,

src/app/applications/applications.module.ts

@@ -5,7 +5,6 @@ import { RouterModule } from "@angular/router";
 import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
 import { TranslateModule } from "@ngx-translate/core";
 import { BasicInformationBoxComponent } from "@shared/components/basic-information-box/basic-information-box.component";
-import { BasicTapSwitchComponent } from "@shared/components/basic-tap-switch/basic-tap-switch.component";
 import { FormModule } from "@shared/components/forms/form.module";
 import { OptionFieldComponent } from "@shared/components/option-field/option-field.component";
 import { StatusIconComponent } from "@shared/components/status-icon/status-icon.component";
@@ -29,6 +28,7 @@ import { BulkImportComponent } from "./bulk-import/bulk-import.component";
 import { DatatargetModule } from "./datatarget/datatarget.module";
 import { IotDevicesModule } from "./iot-devices/iot-devices.module";
 import { MulticastModule } from "./multicast/multicast.module";
+import { BasicTabSwitchComponent } from "@shared/components/basic-tab-switch/basic-tab-switch.component";
 
 @NgModule({
   declarations: [
@@ -59,7 +59,7 @@ import { MulticastModule } from "./multicast/multicast.module";
     StatusIconComponent,
     TableSortIconComponent,
     TablePaginatorComponent,
-    BasicTapSwitchComponent,
+    BasicTabSwitchComponent,
     ApplicationMapComponent,
     BasicInformationBoxComponent,
     ApplicationFilterComponent,

src/app/gateway/gateway-overview/gateway-tabs/gateway-map/gateway-map.component.ts

@@ -14,9 +14,9 @@ import { MeService } from "@shared/services/me.service";
 export class GatewayMapComponent implements OnInit, OnDestroy, AfterViewInit {
   public gateways: Gateway[];
   public coordinateList = [];
+  isLoadingResults = true;
   private gatewaySubscription: Subscription;
   private organizationChangeSubscription: Subscription;
-  isLoadingResults = true;
 
   constructor(
     private chirpstackGatewayService: ChirpstackGatewayService,
@@ -41,6 +41,25 @@ export class GatewayMapComponent implements OnInit, OnDestroy, AfterViewInit {
     }
   }
 
+  gatewayStatus(gateway: Gateway): boolean {
+    return this.chirpstackGatewayService.isGatewayActive(gateway);
+  }
+
+  setCanEdit() {
+    this.gateways.forEach(gateway => {
+      gateway.canEdit = this.meService.hasAccessToTargetOrganization(
+        OrganizationAccessScope.GatewayWrite,
+        gateway.organizationId
+      );
+    });
+  }
+
+  ngOnDestroy() {
+    // prevent memory leak by unsubscribing
+    this.gatewaySubscription?.unsubscribe();
+    this.organizationChangeSubscription.unsubscribe();
+  }
+
   private getGateways(): void {
     this.gatewaySubscription = this.chirpstackGatewayService.getForMaps().subscribe((gateways: GatewayResponseMany) => {
       this.gateways = gateways.resultList;
@@ -75,6 +94,7 @@ export class GatewayMapComponent implements OnInit, OnDestroy, AfterViewInit {
         markerInfo: {
           name: gateway.name,
           active: this.gatewayStatus(gateway),
+          isGateway: true,
           id: gateway.gatewayId,
           internalOrganizationId: gateway.organizationId,
           internalOrganizationName: gateway.organizationName,
@@ -83,23 +103,4 @@ export class GatewayMapComponent implements OnInit, OnDestroy, AfterViewInit {
     );
     this.coordinateList = tempcoordinateList;
   }
-
-  gatewayStatus(gateway: Gateway): boolean {
-    return this.chirpstackGatewayService.isGatewayActive(gateway);
-  }
-
-  setCanEdit() {
-    this.gateways.forEach(gateway => {
-      gateway.canEdit = this.meService.hasAccessToTargetOrganization(
-        OrganizationAccessScope.GatewayWrite,
-        gateway.organizationId
-      );
-    });
-  }
-
-  ngOnDestroy() {
-    // prevent memory leak by unsubscribing
-    this.gatewaySubscription?.unsubscribe();
-    this.organizationChangeSubscription.unsubscribe();
-  }
 }