Skip to content

Commit c8b2212

Browse files
fcv-iteratorItfcv-iteratorIt
authored
IOT-1276: Column administration on gateway-status-table (#151)
* Fixed routing of gateway list + fixed memory leak by unsubscribing properly from gateway fetches * Fixed routing errors in gateway list * Changed mqtt datatarget topic placeholder + added tooltip * Added additional text changes from Product Owner * Removed maxLenght from device AND gateway EUI, now removes non-hex digits on submit * Added sticky to name column on gateway status table * Implemented application table column selection * Removed unused controller name from select * Moved column selector to own component + implemented column selection on iot-device table * Changed datastructure of gateway to match database + Column administration on gateway-status-table * Changed column selector for a cog icon button * First set of pr changes * Try to get ahead of merge error * Implemented sorting again on gateway table
1 parent c4cafb1 commit c8b2212

File tree

6 files changed

+338
-321
lines changed

6 files changed

+338
-321
lines changed

‎src/app/gateway/gateway-detail/gateway-detail.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export class GatewayDetailComponent implements OnInit, OnDestroy, AfterViewInit
3535
public gateway: Gateway;
3636
public backButton: BackButton = { label: "", routerLink: 0 as any };
3737
gatewayId: string;
38-
deleteGateway = new EventEmitter();
38+
3939
private deleteDialogSubscription: Subscription;
4040
public dropdownButton: DropdownButton;
4141
isLoadingResults = true;

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

Lines changed: 94 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,118 +1,116 @@
1-
import { AfterViewInit, Component, OnDestroy, OnInit } from '@angular/core';
2-
import { Gateway, GatewayResponseMany } from '@app/gateway/gateway.model';
3-
import { Subscription } from 'rxjs';
4-
import { ChirpstackGatewayService } from '@shared/services/chirpstack-gateway.service';
5-
import { OrganizationAccessScope } from '@shared/enums/access-scopes';
6-
import { GatewayService } from '@app/gateway/gateway.service';
7-
import { MeService } from '@shared/services/me.service';
1+
import { AfterViewInit, Component, OnDestroy, OnInit } from "@angular/core";
2+
import { Gateway, GatewayResponseMany } from "@app/gateway/gateway.model";
3+
import { Subscription } from "rxjs";
4+
import { ChirpstackGatewayService } from "@shared/services/chirpstack-gateway.service";
5+
import { OrganizationAccessScope } from "@shared/enums/access-scopes";
6+
import { GatewayService } from "@app/gateway/gateway.service";
7+
import { MeService } from "@shared/services/me.service";
88

99
@Component({
10-
selector: 'app-gateway-map',
11-
templateUrl: './gateway-map.component.html',
12-
styleUrls: ['./gateway-map.component.scss'],
10+
selector: "app-gateway-map",
11+
templateUrl: "./gateway-map.component.html",
12+
styleUrls: ["./gateway-map.component.scss"],
1313
})
1414
export class GatewayMapComponent implements OnInit, OnDestroy, AfterViewInit {
15-
public gateways: Gateway[];
16-
public coordinateList = [];
17-
private gatewaySubscription: Subscription;
18-
private organizationChangeSubscription: Subscription;
19-
isLoadingResults = true;
15+
public gateways: Gateway[];
16+
public coordinateList = [];
17+
private gatewaySubscription: Subscription;
18+
private organizationChangeSubscription: Subscription;
19+
isLoadingResults = true;
2020

21-
constructor(
22-
private chirpstackGatewayService: ChirpstackGatewayService,
23-
private gatewayService: GatewayService,
24-
private meService: MeService
25-
) {}
21+
constructor(
22+
private chirpstackGatewayService: ChirpstackGatewayService,
23+
private gatewayService: GatewayService,
24+
private meService: MeService
25+
) {}
2626

27-
ngOnInit(): void {}
27+
ngOnInit(): void {}
2828

29-
ngAfterViewInit() {
30-
this.organizationChangeSubscription = this.gatewayService.organisationChangeSubject.subscribe(
31-
(x) => {
32-
if (x) {
33-
this.getGatewayWith(x);
29+
ngAfterViewInit() {
30+
this.organizationChangeSubscription = this.gatewayService.organisationChangeSubject.subscribe(x => {
31+
if (x) {
32+
this.getGatewayWith(x);
33+
} else {
34+
this.getGateways();
35+
}
36+
});
37+
if (this.gatewayService.selectedOrg) {
38+
this.getGatewayWith(this.gatewayService.selectedOrg);
3439
} else {
35-
this.getGateways();
40+
this.getGateways();
3641
}
37-
}
38-
);
39-
if (this.gatewayService.selectedOrg) {
40-
this.getGatewayWith(this.gatewayService.selectedOrg);
41-
} else {
42-
this.getGateways();
4342
}
44-
}
4543

46-
private getGateways(): void {
47-
this.gatewaySubscription = this.chirpstackGatewayService
48-
.getMultiple({
49-
limit: null,
50-
offset: null,
51-
sort: null,
52-
orderOn: null,
53-
})
54-
.subscribe((gateways: GatewayResponseMany) => {
44+
private getGateways(): void {
45+
this.gatewaySubscription = this.chirpstackGatewayService
46+
.getMultiple({
47+
limit: null,
48+
offset: null,
49+
sort: null,
50+
orderOn: null,
51+
})
52+
.subscribe((gateways: GatewayResponseMany) => {
5553
this.gateways = gateways.resultList;
56-
this.mapToCoordinateList();
57-
this.setCanEdit();
58-
this.isLoadingResults = false;
59-
});
60-
}
54+
this.mapToCoordinateList();
55+
this.setCanEdit();
56+
this.isLoadingResults = false;
57+
});
58+
}
6159

62-
private getGatewayWith(orgId: number): void {
63-
this.gatewaySubscription = this.chirpstackGatewayService
64-
.getMultiple({
65-
limit: null,
66-
offset: null,
67-
sort: null,
68-
orderOn: null,
69-
organizationId: orgId,
70-
})
71-
.subscribe((gateways: GatewayResponseMany) => {
60+
private getGatewayWith(orgId: number): void {
61+
this.gatewaySubscription = this.chirpstackGatewayService
62+
.getMultiple({
63+
limit: null,
64+
offset: null,
65+
sort: null,
66+
orderOn: null,
67+
organizationId: orgId,
68+
})
69+
.subscribe((gateways: GatewayResponseMany) => {
7270
this.gateways = gateways.resultList;
73-
this.mapToCoordinateList();
74-
this.setCanEdit();
75-
this.isLoadingResults = false;
76-
});
77-
}
71+
this.mapToCoordinateList();
72+
this.setCanEdit();
73+
this.isLoadingResults = false;
74+
});
75+
}
7876

79-
private mapToCoordinateList() {
80-
const tempcoordinateList = [];
81-
this.gateways.map((gateway) =>
82-
tempcoordinateList.push({
83-
longitude: gateway.location.longitude,
84-
latitude: gateway.location.latitude,
85-
draggable: false,
86-
editEnabled: false,
87-
useGeolocation: false,
88-
markerInfo: {
89-
name: gateway.name,
90-
active: this.gatewayStatus(gateway),
77+
private mapToCoordinateList() {
78+
const tempcoordinateList = [];
79+
this.gateways.map(gateway =>
80+
tempcoordinateList.push({
81+
longitude: gateway.location.longitude,
82+
latitude: gateway.location.latitude,
83+
draggable: false,
84+
editEnabled: false,
85+
useGeolocation: false,
86+
markerInfo: {
87+
name: gateway.name,
88+
active: this.gatewayStatus(gateway),
9189
id: gateway.gatewayId,
9290
internalOrganizationId: gateway.organizationId,
9391
internalOrganizationName: gateway.organizationName,
94-
},
95-
})
96-
);
97-
this.coordinateList = tempcoordinateList;
98-
}
92+
},
93+
})
94+
);
95+
this.coordinateList = tempcoordinateList;
96+
}
9997

100-
gatewayStatus(gateway: Gateway): boolean {
101-
return this.chirpstackGatewayService.isGatewayActive(gateway);
102-
}
98+
gatewayStatus(gateway: Gateway): boolean {
99+
return this.chirpstackGatewayService.isGatewayActive(gateway);
100+
}
103101

104-
setCanEdit() {
105-
this.gateways.forEach((gateway) => {
106-
gateway.canEdit = this.meService.hasAccessToTargetOrganization(
107-
OrganizationAccessScope.GatewayWrite,
108-
gateway.organizationId
109-
);
110-
});
111-
}
102+
setCanEdit() {
103+
this.gateways.forEach(gateway => {
104+
gateway.canEdit = this.meService.hasAccessToTargetOrganization(
105+
OrganizationAccessScope.GatewayWrite,
106+
gateway.organizationId
107+
);
108+
});
109+
}
112110

113-
ngOnDestroy() {
114-
// prevent memory leak by unsubscribing
115-
this.gatewaySubscription?.unsubscribe();
116-
this.organizationChangeSubscription.unsubscribe();
117-
}
111+
ngOnDestroy() {
112+
// prevent memory leak by unsubscribing
113+
this.gatewaySubscription?.unsubscribe();
114+
this.organizationChangeSubscription.unsubscribe();
115+
}
118116
}

‎src/app/gateway/gateway-table/gateway-table.component.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<div class="loading-shade" *ngIf="isLoadingResults">
99
<mat-spinner *ngIf="isLoadingResults"></mat-spinner>
1010
</div>
11-
<table mat-table [dataSource]="dataSource" matSort matSortActive="name" matSortDirection="asc" matSortDisableClear>
11+
<table mat-table [dataSource]="data" matSort matSortActive="name" matSortDirection="asc" matSortDisableClear>
1212

1313
<ng-container matColumnDef="name">
1414
<th mat-header-cell *matHeaderCellDef mat-sort-header>
@@ -21,14 +21,14 @@
2121
</td>
2222
</ng-container>
2323

24-
<ng-container matColumnDef="gateway-id">
24+
<ng-container matColumnDef="gatewayId">
2525
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'LORA-GATEWAY-TABLE.GATEWAYID' | translate }}</th>
2626
<td mat-cell *matCellDef="let gateway">
2727
{{ gateway.gatewayId }}
2828
</td>
2929
</ng-container>
3030

31-
<ng-container matColumnDef="internalOrganizationName">
31+
<ng-container matColumnDef="organizationName">
3232
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'LORA-GATEWAY-TABLE.ORGANIZATION' | translate }}
3333
</th>
3434
<td mat-cell *matCellDef="let gateway">
@@ -51,7 +51,7 @@
5151
</ng-container>
5252

5353
<ng-container matColumnDef="tags">
54-
<th mat-header-cell *matHeaderCellDef>{{ 'LORA-GATEWAY-TABLE.TAGS' | translate }}</th>
54+
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'LORA-GATEWAY-TABLE.TAGS' | translate }}</th>
5555
<td mat-cell *matCellDef="let gateway">
5656
{{gateway.tagsString}}
5757
</td>
@@ -72,7 +72,7 @@
7272
</td>
7373
</ng-container>
7474

75-
<ng-container matColumnDef="last-seen">
75+
<ng-container matColumnDef="lastSeenAt">
7676
<th mat-header-cell *matHeaderCellDef mat-sort-header>
7777
{{ 'LORA-GATEWAY-TABLE.LAST-SEEN-AT' | translate }}
7878
</th>

0 commit comments

Comments
 (0)