Skip to content

Commit 9ec8f13

Browse files
fcv-iteratorItfcv-iteratorIt
committed
Merge branch 'stage' into feature/Application-overview-feedback-changes
2 parents 247c1f7 + 2d6302f commit 9ec8f13

19 files changed

+457
-192
lines changed

‎src/app/app.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div *ngIf="isLoggedIn">
2-
<app-navbar></app-navbar>
2+
<app-navbar (navToggle)="onNavToggle($event)"></app-navbar>
33
</div>
4-
<div id="content">
4+
<div id="content" [class.nav-visible]="isNavVisible">
55
<div id="mainBody">
66
<router-outlet></router-outlet>
77
</div>

‎src/app/app.component.scss‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@
33

44
#content {
55
@media (min-width: $screen-md-min) {
6-
padding-left: $navWidth;
6+
padding-left: 0;
7+
transition: padding-left 0.3s ease-in-out;
8+
&.nav-visible {
9+
padding-left: $navWidth;
10+
}
711
}
812
}

‎src/app/app.component.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@ import { LoggedInService } from "@shared/services/loggedin.service";
99
export class AppComponent {
1010
title = "OS2IoT-frontend";
1111
isLoggedIn = true;
12+
isNavVisible = true;
13+
14+
onNavToggle(isVisible: boolean) {
15+
this.isNavVisible = isVisible;
16+
}
1217

1318
constructor(private loggedInService: LoggedInService) {
1419
loggedInService.changeEmitted?.subscribe(change => {

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -208,7 +208,6 @@
208208

209209
<ng-container matColumnDef="menu">
210210
<th *matHeaderCellDef class="col-1" mat-header-cell></th>
211-
212211
<td *matCellDef="let element" mat-cell>
213212
<div *ngIf="element?.id | canEditApplication" class="dropdown">
214213
<a

‎src/app/applications/iot-devices/iot-devices-table/iot-devices-table.component.html‎

Lines changed: 63 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,10 @@
2020
<!-- Name Column -->
2121
<ng-container matColumnDef="name">
2222
<th mat-sort-header="name" *matHeaderCellDef mat-header-cell>
23-
{{ "APPLICATION-TABLE.NAME" | translate }}
23+
<div [ngClass]="this.sort.active === 'name' ? 'column-title-color' : 'column-title-color-inactive'">
24+
{{ "APPLICATION-TABLE.NAME" | translate }}
25+
</div>
26+
<app-table-sort-icon [sortDirection]="getSortDirection('name')" />
2427
</th>
2528
<td mat-cell *matCellDef="let iotDevice">
2629
<a [routerLink]="['../iot-device', iotDevice.id]" routerLinkActive="active" class="device-link">{{
@@ -31,41 +34,80 @@
3134

3235
<!-- Technology Column -->
3336
<ng-container matColumnDef="type">
34-
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "IOT-TABLE.NETWORK-TECHNOLOGY" | translate }}</th>
37+
<th mat-header-cell *matHeaderCellDef mat-sort-header>
38+
<div [ngClass]="this.sort.active === 'type' ? 'column-title-color' : 'column-title-color-inactive'">
39+
{{ "IOT-TABLE.NETWORK-TECHNOLOGY" | translate }}
40+
</div>
41+
<app-table-sort-icon [sortDirection]="getSortDirection('type')" />
42+
</th>
3543
<td mat-cell *matCellDef="let iotDevice">{{ "IOT-DEVICE-TYPES." + iotDevice.type | translate }}</td>
3644
</ng-container>
3745

3846
<ng-container matColumnDef="commentOnLocation">
39-
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "GATEWAY.PLACEMENT-LABEL" | translate }}</th>
47+
<th mat-header-cell *matHeaderCellDef mat-sort-header>
48+
<div
49+
[ngClass]="this.sort.active === 'commentOnLocation' ? 'column-title-color' : 'column-title-color-inactive'"
50+
>
51+
{{ "GATEWAY.PLACEMENT-LABEL" | translate }}
52+
</div>
53+
<app-table-sort-icon [sortDirection]="getSortDirection('commentOnLocation')" />
54+
</th>
4055
<td mat-cell *matCellDef="let iotDevice">
4156
{{ iotDevice.commentOnLocation ? truncateText(iotDevice.commentOnLocation) : "-" }}
4257
</td>
4358
</ng-container>
4459

4560
<ng-container matColumnDef="deviceModel">
46-
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "IOTDEVICE.DEVICEMODEL" | translate }}</th>
61+
<th mat-header-cell *matHeaderCellDef mat-sort-header>
62+
<div [ngClass]="this.sort.active === 'deviceModel' ? 'column-title-color' : 'column-title-color-inactive'">
63+
{{ "IOTDEVICE.DEVICEMODEL" | translate }}
64+
</div>
65+
<app-table-sort-icon [sortDirection]="getSortDirection('deviceModel')" />
66+
</th>
4767
<td mat-cell *matCellDef="let iotDevice">{{ iotDevice.deviceModel?.body?.name ?? "-" }}</td>
4868
</ng-container>
4969

5070
<ng-container matColumnDef="deviceProfileName">
51-
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "IOTDEVICE.LORA.DEVICEPROFILE" | translate }}</th>
71+
<th mat-header-cell *matHeaderCellDef mat-sort-header>
72+
<div
73+
[ngClass]="this.sort.active === 'deviceProfileName' ? 'column-title-color' : 'column-title-color-inactive'"
74+
>
75+
{{ "IOTDEVICE.LORA.DEVICEPROFILE" | translate }}
76+
</div>
77+
<app-table-sort-icon [sortDirection]="getSortDirection('deviceProfileName')" />
78+
</th>
5279
<td mat-cell *matCellDef="let iotDevice">{{ iotDevice.deviceProfileName ?? "-" }}</td>
5380
</ng-container>
5481

5582
<ng-container matColumnDef="deviceEUI">
56-
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "IOT-TABLE.DEV-EUI" | translate }}</th>
83+
<th mat-header-cell *matHeaderCellDef mat-sort-header>
84+
<div [ngClass]="this.sort.active === 'deviceEUI' ? 'column-title-color' : 'column-title-color-inactive'">
85+
{{ "IOT-TABLE.DEV-EUI" | translate }}
86+
</div>
87+
<app-table-sort-icon [sortDirection]="getSortDirection('deviceEUI')" />
88+
</th>
5789
<td mat-cell *matCellDef="let iotDevice">{{ iotDevice.deviceEUI ?? "-" }}</td>
5890
</ng-container>
5991

6092
<ng-container matColumnDef="OTAAapplicationKey">
61-
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "IOT-TABLE.APP-KEY" | translate }}</th>
93+
<th mat-header-cell *matHeaderCellDef mat-sort-header>
94+
<div
95+
[ngClass]="this.sort.active === 'OTAAapplicationKey' ? 'column-title-color' : 'column-title-color-inactive'"
96+
>
97+
{{ "IOT-TABLE.APP-KEY" | translate }}
98+
</div>
99+
<app-table-sort-icon [sortDirection]="getSortDirection('OTAAapplicationKey')" />
100+
</th>
62101
<td mat-cell *matCellDef="let iotDevice">{{ iotDevice.OTAAapplicationKey ?? "-" }}</td>
63102
</ng-container>
64103

65104
<!-- RSSI column -->
66105
<ng-container matColumnDef="rssi">
67106
<th *matHeaderCellDef mat-header-cell mat-sort-header="rssi">
68-
{{ "IOT-TABLE.RSSI" | translate }}
107+
<div [ngClass]="this.sort.active === 'rssi' ? 'column-title-color' : 'column-title-color-inactive'">
108+
{{ "IOT-TABLE.RSSI" | translate }}
109+
</div>
110+
<app-table-sort-icon [sortDirection]="getSortDirection('rssi')" />
69111
</th>
70112
<td mat-cell *matCellDef="let iotDevice">
71113
<ng-container *ngIf="iotDevice.type === 'LORAWAN' || iotDevice.type === 'SIGFOX'; else notSupported">
@@ -79,7 +121,10 @@
79121
<!-- SNR column -->
80122
<ng-container matColumnDef="snr">
81123
<th *matHeaderCellDef mat-header-cell mat-sort-header="snr">
82-
{{ "IOT-TABLE.SNR" | translate }}
124+
<div [ngClass]="this.sort.active === 'snr' ? 'column-title-color' : 'column-title-color-inactive'">
125+
{{ "IOT-TABLE.SNR" | translate }}
126+
</div>
127+
<app-table-sort-icon [sortDirection]="getSortDirection('snr')" />
83128
</th>
84129
<td mat-cell *matCellDef="let iotDevice">
85130
<ng-container *ngIf="iotDevice.type === 'LORAWAN' || iotDevice.type === 'SIGFOX'; else notSupported">
@@ -92,7 +137,10 @@
92137

93138
<ng-container matColumnDef="dataTargets">
94139
<th mat-header-cell *matHeaderCellDef mat-sort-header>
95-
{{ "APPLICATION-TABLE.DATA-TARGETS" | translate }}
140+
<div [ngClass]="this.sort.active === 'dataTargets' ? 'column-title-color' : 'column-title-color-inactive'">
141+
{{ "APPLICATION-TABLE.DATA-TARGETS" | translate }}
142+
</div>
143+
<app-table-sort-icon [sortDirection]="getSortDirection('dataTargets')" />
96144
</th>
97145
<td mat-cell *matCellDef="let iotDevice">{{ iotDevice.connections?.length ?? 0 }}</td>
98146
</ng-container>
@@ -118,7 +166,10 @@
118166
<!-- Active Column -->
119167
<ng-container matColumnDef="active">
120168
<th mat-header-cell *matHeaderCellDef mat-sort-header="active">
121-
{{ "IOT-TABLE.ACTIVE" | translate }}
169+
<div [ngClass]="this.sort.active === 'active' ? 'column-title-color' : 'column-title-color-inactive'">
170+
{{ "IOT-TABLE.ACTIVE" | translate }}
171+
</div>
172+
<app-table-sort-icon [sortDirection]="getSortDirection('active')" />
122173
</th>
123174
<td mat-cell *matCellDef="let iotDevice">{{ lastActive(iotDevice) }}</td>
124175
</ng-container>
@@ -142,7 +193,7 @@
142193
>{{ "IOTDEVICE-TABLE-ROW.EDIT" | translate }}
143194
</a>
144195
</li>
145-
<li class="dropdown-item" *ngIf="iotDevice.type!==deviceTypes.SIGFOX">
196+
<li class="dropdown-item" *ngIf="iotDevice.type !== deviceTypes.SIGFOX">
146197
<a (click)="onOpenChangeApplicationDialog(iotDevice.id)" routerLinkActive="active">{{
147198
"IOTDEVICE.CHANGE-APPLICATION.TITLE" | translate
148199
}}</a>

‎src/app/applications/iot-devices/iot-devices-table/iot-devices-table.component.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
@import "../../../../assets/scss/setup/variables";
2+
.column-title-color {
3+
color: $color-link;
4+
font-weight: bold;
5+
}
6+
7+
.column-title-color-inactive {
8+
color: $default-icon-color;
9+
}
10+
11+
.mat-sort-header-arrow {
12+
display: none !important;
13+
}

‎src/app/applications/iot-devices/iot-devices-table/iot-devices-table.component.ts‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
1-
import { AfterViewInit, Component, Input, OnInit, ViewChild } from "@angular/core";
1+
import { AfterViewInit, Component, Input, OnInit, ViewChild, ViewEncapsulation } from "@angular/core";
22
import { MatDialog } from "@angular/material/dialog";
33
import { MatPaginator } from "@angular/material/paginator";
44
import { MatSort } from "@angular/material/sort";
5+
import { ActivatedRoute } from "@angular/router";
56
import { IotDevice, IotDevicesResponse } from "@applications/iot-devices/iot-device.model";
67
import { environment } from "@environments/environment";
78
import { TranslateService } from "@ngx-translate/core";
89
import { DeleteDialogComponent } from "@shared/components/delete-dialog/delete-dialog.component";
910
import { DeleteDialogService } from "@shared/components/delete-dialog/delete-dialog.service";
11+
import { DefaultPageSizeOptions } from "@shared/constants/page.constants";
12+
import { OrganizationAccessScope } from "@shared/enums/access-scopes";
1013
import { DeviceType } from "@shared/enums/device-type";
14+
import { IoTDeviceApplicationDialogModel } from "@shared/models/dialog.model";
1115
import { MeService } from "@shared/services/me.service";
12-
import { OrganizationAccessScope } from "@shared/enums/access-scopes";
16+
import { TableColumn } from "@shared/types/table.type";
1317
import moment from "moment";
1418
import { merge, Observable, of as observableOf } from "rxjs";
1519
import { catchError, map, startWith, switchMap } from "rxjs/operators";
1620
import { RestService } from "src/app/shared/services/rest.service";
17-
import { IoTDeviceService } from "../iot-device.service";
18-
import { DefaultPageSizeOptions } from "@shared/constants/page.constants";
19-
import { ActivatedRoute } from "@angular/router";
20-
import { TableColumn } from "@shared/types/table.type";
2121
import { IoTDeviceChangeApplicationDialogComponent } from "../iot-device-change-application-dialog/iot-device-change-application-dialog.component";
22-
import { IoTDeviceApplicationDialogModel } from "@shared/models/dialog.model";
22+
import { IoTDeviceService } from "../iot-device.service";
2323

2424
const columnDefinitions: TableColumn[] = [
2525
{
@@ -106,6 +106,7 @@ const columnDefinitions: TableColumn[] = [
106106
selector: "app-iot-devices-table",
107107
templateUrl: "./iot-devices-table.component.html",
108108
styleUrls: ["./iot-devices-table.component.scss"],
109+
encapsulation: ViewEncapsulation.None,
109110
})
110111
export class IotDevicesTableComponent implements AfterViewInit, OnInit {
111112
@Input() applicationId: number;
@@ -262,6 +263,10 @@ export class IotDevicesTableComponent implements AfterViewInit, OnInit {
262263
});
263264
}
264265

266+
getSortDirection(id: string) {
267+
return columnDefinitions.find(c => c.id === id).sort;
268+
}
269+
265270
public truncateText(text: string): string {
266271
const maxLength = 32;
267272
if (text.length <= maxLength) {

‎src/app/applications/iot-devices/iot-devices.module.ts‎

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,41 @@
1+
import { ClipboardModule } from "@angular/cdk/clipboard";
12
import { CommonModule } from "@angular/common";
23
import { NgModule } from "@angular/core";
34
import { FormsModule } from "@angular/forms";
45
import { RouterModule } from "@angular/router";
6+
import { GraphModule } from "@app/graph/graph.module";
7+
import { IotDeviceDetailsMqttExternalBrokerComponent } from "@applications/iot-devices/iot-device-detail/iot-device-details-mqtt-external-broker/iot-device-details-mqtt-external-broker.component";
8+
import { IotDeviceDetailsMqttInternalBrokerComponent } from "@applications/iot-devices/iot-device-detail/iot-device-details-mqtt-internal-broker/iot-device-details-mqtt-internal-broker.component";
9+
import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
510
import { TranslateModule } from "@ngx-translate/core";
611
import { FormModule } from "@shared/components/forms/form.module";
12+
import { TableSortIconComponent } from "@shared/components/table-sort-icon/table-sort-icon.component";
713
import { NGMaterialModule } from "@shared/Modules/materiale.module";
14+
import { PipesModule } from "@shared/pipes/pipes.module";
15+
import { SharedModule } from "@shared/shared.module";
16+
import { MonacoEditorModule } from "ngx-monaco-editor-v2";
17+
import { IoTDeviceChangeApplicationDialogComponent } from "./iot-device-change-application-dialog/iot-device-change-application-dialog.component";
18+
import { DataPackageComponent } from "./iot-device-detail/data-package/data-package.component";
19+
import { DataPackagesTimestampComponent } from "./iot-device-detail/data-packages-timestamp/data-packages-timestamp.component";
20+
import { DeviceModelComponent } from "./iot-device-detail/device-model/device-model.component";
21+
import { DownlinkDialogComponent } from "./iot-device-detail/downlink/downlink-dialog/downlink-dialog.component";
22+
import { DownlinkTablesComponent } from "./iot-device-detail/downlink/downlink-tables/downlink-tables.component";
823
import { DownlinkComponent } from "./iot-device-detail/downlink/downlinks/downlink.component";
24+
import { IotDeviceDataPacketsTabComponent } from "./iot-device-detail/iot-device-data-packets-tab/iot-device-data-packets-tab.component";
925
import { IotDeviceDetailGenericComponent } from "./iot-device-detail/iot-device-detail-generic/iot-device-detail-generic.component";
1026
import { IotDeviceDetailLorawanComponent } from "./iot-device-detail/iot-device-detail-lorawan/iot-device-detail-lorawan.component";
1127
import { IotDeviceDetailSigfoxComponent } from "./iot-device-detail/iot-device-detail-sigfox/iot-device-detail-sigfox.component";
1228
import { IoTDeviceDetailComponent } from "./iot-device-detail/iot-device-detail.component";
13-
import { IotDeviceEditComponent } from "./iot-device-edit/iot-device-edit.component";
14-
import { SigfoxDeviceEditComponent } from "./iot-device-edit/sigfox-device-edit/sigfox-device-edit.component";
15-
import { IotDevicesTableComponent } from "./iot-devices-table/iot-devices-table.component";
16-
import { DownlinkDialogComponent } from "./iot-device-detail/downlink/downlink-dialog/downlink-dialog.component";
17-
import { SharedModule } from "@shared/shared.module";
18-
import { PipesModule } from "@shared/pipes/pipes.module";
19-
import { DeviceModelComponent } from "./iot-device-detail/device-model/device-model.component";
20-
import { MonacoEditorModule } from "ngx-monaco-editor-v2";
21-
import { DataPackageComponent } from "./iot-device-detail/data-package/data-package.component";
22-
import { DataPackagesTimestampComponent } from "./iot-device-detail/data-packages-timestamp/data-packages-timestamp.component";
23-
import { GraphModule } from "@app/graph/graph.module";
24-
import { IotDevicesTabComponent } from "./iot-devices-tab/iot-devices-tab.component";
25-
import { IotDeviceHistoryTabComponent } from "./iot-device-detail/iot-device-history-tab/iot-device-history-tab.component";
2629
import { IotDeviceDetailsTabComponent } from "./iot-device-detail/iot-device-details-tab/iot-device-details-tab.component";
27-
import { IotDeviceDataPacketsTabComponent } from "./iot-device-detail/iot-device-data-packets-tab/iot-device-data-packets-tab.component";
2830
import { IotDeviceDownlinkTabComponent } from "./iot-device-detail/iot-device-downlink-tab/iot-device-downlink-tab.component";
29-
import { MqttDeviceEditComponent } from "./iot-device-edit/mqtt-device-edit/mqtt-device-edit.component";
30-
import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
31+
import { IotDeviceHistoryTabComponent } from "./iot-device-detail/iot-device-history-tab/iot-device-history-tab.component";
32+
import { IotDeviceEditComponent } from "./iot-device-edit/iot-device-edit.component";
3133
import { MqttAuthenticationSelectComponent } from "./iot-device-edit/mqtt-device-edit/mqtt-authentication-select/mqtt-authentication-select.component";
32-
import { ClipboardModule } from "@angular/cdk/clipboard";
34+
import { MqttDeviceEditComponent } from "./iot-device-edit/mqtt-device-edit/mqtt-device-edit.component";
35+
import { SigfoxDeviceEditComponent } from "./iot-device-edit/sigfox-device-edit/sigfox-device-edit.component";
3336
import { ExportCsvDialogComponent } from "./iot-devices-tab/export-csv-dialog/export-csv-dialog.component";
34-
import { IotDeviceDetailsMqttInternalBrokerComponent } from "@applications/iot-devices/iot-device-detail/iot-device-details-mqtt-internal-broker/iot-device-details-mqtt-internal-broker.component";
35-
import { IotDeviceDetailsMqttExternalBrokerComponent } from "@applications/iot-devices/iot-device-detail/iot-device-details-mqtt-external-broker/iot-device-details-mqtt-external-broker.component";
36-
import { DownlinkTablesComponent } from "./iot-device-detail/downlink/downlink-tables/downlink-tables.component";
37-
import { IoTDeviceChangeApplicationDialogComponent } from "./iot-device-change-application-dialog/iot-device-change-application-dialog.component";
37+
import { IotDevicesTabComponent } from "./iot-devices-tab/iot-devices-tab.component";
38+
import { IotDevicesTableComponent } from "./iot-devices-table/iot-devices-table.component";
3839

3940
@NgModule({
4041
declarations: [
@@ -77,6 +78,7 @@ import { IoTDeviceChangeApplicationDialogComponent } from "./iot-device-change-a
7778
GraphModule,
7879
FontAwesomeModule,
7980
ClipboardModule,
81+
TableSortIconComponent,
8082
],
8183
})
8284
export class IotDevicesModule {}

0 commit comments

Comments
 (0)