Skip to content

Commit 781d789

Browse files
Format and fix exception
1 parent 84640de commit 781d789

File tree

2 files changed

+104
-109
lines changed

2 files changed

+104
-109
lines changed

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

Lines changed: 76 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -5,265 +5,262 @@
55
></app-column-selector>
66

77
<div class="mat-elevation-z8 overflow-auto">
8-
<div class="loading-shade" *ngIf="isLoadingResults">
8+
<div *ngIf="isLoadingResults" class="loading-shade">
99
<mat-spinner *ngIf="isLoadingResults"></mat-spinner>
1010
</div>
11-
<table mat-table [dataSource]="data" matSort matSortActive="name" matSortDirection="asc" matSortDisableClear>
11+
<table [dataSource]="data" mat-table matSort matSortActive="name" matSortDirection="asc" matSortDisableClear>
1212
<ng-container matColumnDef="name">
13-
<th mat-header-cell *matHeaderCellDef mat-sort-header class="min-width-150">
13+
<th *matHeaderCellDef class="min-width-150" mat-header-cell mat-sort-header>
1414
<div [ngClass]="this.sort.active === 'name' ? 'column-title-color' : 'column-title-color-inactive'">
1515
{{ "LORA-GATEWAY-TABLE.NAME" | translate }}
1616
</div>
17-
<app-table-sort-icon [sortDirection]="getSortDirection('active')" />
17+
<app-table-sort-icon [sortDirection]="getSortDirection('active')"/>
1818
</th>
19-
<td mat-cell *matCellDef="let gateway">
19+
<td *matCellDef="let gateway" mat-cell>
2020
<a
2121
[routerLink]="'/gateways/gateway-detail/' + gateway.gatewayId"
22-
routerLinkActive="active"
2322
class="application-link"
23+
routerLinkActive="active"
2424
>
2525
{{ gateway.name }}
2626
</a>
2727
</td>
2828
</ng-container>
2929

3030
<ng-container matColumnDef="gatewayId">
31-
<th mat-header-cell *matHeaderCellDef mat-sort-header class="min-width-150">
31+
<th *matHeaderCellDef class="min-width-150" mat-header-cell mat-sort-header>
3232
<div [ngClass]="this.sort.active === 'gatewayId' ? 'column-title-color' : 'column-title-color-inactive'">
3333
{{ "LORA-GATEWAY-TABLE.GATEWAYID" | translate }}
3434
</div>
35-
<app-table-sort-icon [sortDirection]="getSortDirection('active')" />
35+
<app-table-sort-icon [sortDirection]="getSortDirection('active')"/>
3636
</th>
37-
<td mat-cell *matCellDef="let gateway">
37+
<td *matCellDef="let gateway" mat-cell>
3838
{{ gateway.gatewayId }}
3939
</td>
4040
</ng-container>
4141

4242
<ng-container matColumnDef="organizationName">
43-
<th mat-header-cell *matHeaderCellDef mat-sort-header>
43+
<th *matHeaderCellDef mat-header-cell mat-sort-header>
4444
<div [ngClass]="this.sort.active === 'organizationName' ? 'column-title-color' : 'column-title-color-inactive'">
4545
{{ "LORA-GATEWAY-TABLE.ORGANIZATION" | translate }}
4646
</div>
47-
<app-table-sort-icon [sortDirection]="getSortDirection('active')" />
47+
<app-table-sort-icon [sortDirection]="getSortDirection('active')"/>
4848
</th>
49-
<td mat-cell *matCellDef="let gateway">
49+
<td *matCellDef="let gateway" mat-cell>
5050
{{ gateway.organizationName }}
5151
</td>
5252
</ng-container>
5353

5454
<ng-container matColumnDef="rxPacketsReceived">
55-
<th mat-header-cell *matHeaderCellDef mat-sort-header>
55+
<th *matHeaderCellDef mat-header-cell mat-sort-header>
5656
<div
5757
[ngClass]="this.sort.active === 'rxPacketsReceived' ? 'column-title-color' : 'column-title-color-inactive'"
5858
>
5959
{{ "LORA-GATEWAY-TABLE.PACKETS-RECEIVED" | translate }}
6060
</div>
61-
<app-table-sort-icon [sortDirection]="getSortDirection('active')" />
61+
<app-table-sort-icon [sortDirection]="getSortDirection('active')"/>
6262
</th>
63-
<td mat-cell *matCellDef="let gateway">
63+
<td *matCellDef="let gateway" mat-cell>
6464
{{ gateway.rxPacketsReceived }}
6565
</td>
6666
</ng-container>
6767

6868
<ng-container matColumnDef="txPacketsEmitted">
69-
<th mat-header-cell *matHeaderCellDef mat-sort-header>
69+
<th *matHeaderCellDef mat-header-cell mat-sort-header>
7070
<div [ngClass]="this.sort.active === 'txPacketsEmitted' ? 'column-title-color' : 'column-title-color-inactive'">
7171
{{ "LORA-GATEWAY-TABLE.PACKETS-SENT" | translate }}
7272
</div>
73-
<app-table-sort-icon [sortDirection]="getSortDirection('active')" />
73+
<app-table-sort-icon [sortDirection]="getSortDirection('active')"/>
7474
</th>
75-
<td mat-cell *matCellDef="let gateway">
75+
<td *matCellDef="let gateway" mat-cell>
7676
{{ gateway.txPacketsEmitted }}
7777
</td>
7878
</ng-container>
7979

8080
<ng-container matColumnDef="placement">
81-
<th mat-header-cell *matHeaderCellDef mat-sort-header>
81+
<th *matHeaderCellDef mat-header-cell mat-sort-header>
8282
<div [ngClass]="this.sort.active === 'placement' ? 'column-title-color' : 'column-title-color-inactive'">
8383
'
8484

8585
{{ "LORA-GATEWAY-TABLE.PLACEMENT" | translate }}
8686
</div>
87-
<app-table-sort-icon [sortDirection]="getSortDirection('active')" />
87+
<app-table-sort-icon [sortDirection]="getSortDirection('active')"/>
8888
</th>
89-
<td mat-cell *matCellDef="let gateway">
89+
<td *matCellDef="let gateway" mat-cell>
9090
{{ gateway.placement ? ("GATEWAY.PLACEMENT." + gateway.placement | translate) : "" }}
9191
</td>
9292
</ng-container>
9393

9494
<ng-container matColumnDef="modelName">
95-
<th mat-header-cell *matHeaderCellDef mat-sort-header class="min-width-150">
95+
<th *matHeaderCellDef class="min-width-150" mat-header-cell mat-sort-header>
9696
<div [ngClass]="this.sort.active === 'modelName' ? 'column-title-color' : 'column-title-color-inactive'">
9797
{{ "LORA-GATEWAY-TABLE.MODEL-NAME" | translate }}
9898
</div>
99-
<app-table-sort-icon [sortDirection]="getSortDirection('active')" />
99+
<app-table-sort-icon [sortDirection]="getSortDirection('active')"/>
100100
</th>
101-
<td mat-cell *matCellDef="let gateway">
101+
<td *matCellDef="let gateway" mat-cell>
102102
{{ gateway.modelName }}
103103
</td>
104104
</ng-container>
105105

106106
<ng-container matColumnDef="antennaType">
107-
<th mat-header-cell *matHeaderCellDef mat-sort-header>
107+
<th *matHeaderCellDef mat-header-cell mat-sort-header>
108108
<div [ngClass]="this.sort.active === 'antennaType' ? 'column-title-color' : 'column-title-color-inactive'">
109109
{{ "LORA-GATEWAY-TABLE.ANTENNA-TYPE" | translate }}
110110
</div>
111-
<app-table-sort-icon [sortDirection]="getSortDirection('active')" />
111+
<app-table-sort-icon [sortDirection]="getSortDirection('active')"/>
112112
</th>
113-
<td mat-cell *matCellDef="let gateway">
113+
<td *matCellDef="let gateway" mat-cell>
114114
{{ gateway.antennaType }}
115115
</td>
116116
</ng-container>
117117

118118
<ng-container matColumnDef="status">
119-
<th mat-header-cell *matHeaderCellDef mat-sort-header>
119+
<th *matHeaderCellDef mat-header-cell mat-sort-header>
120120
<div [ngClass]="this.sort.active === 'status' ? 'column-title-color' : 'column-title-color-inactive'">
121121
{{ "LORA-GATEWAY-TABLE.STATUS" | translate }}
122122
</div>
123-
<app-table-sort-icon [sortDirection]="getSortDirection('active')" />
123+
<app-table-sort-icon [sortDirection]="getSortDirection('active')"/>
124124
</th>
125-
<td mat-cell *matCellDef="let gateway">
125+
<td *matCellDef="let gateway" mat-cell>
126126
{{ gateway.status ? ("GATEWAY.STATUS." + gateway.status | translate) : "" }}
127127
</td>
128128
</ng-container>
129129

130130
<ng-container matColumnDef="gatewayResponsibleName">
131-
<th mat-header-cell *matHeaderCellDef mat-sort-header class="min-width-150">
131+
<th *matHeaderCellDef class="min-width-150" mat-header-cell mat-sort-header>
132132
<div
133133
[ngClass]="
134134
this.sort.active === 'gatewayResponsibleName' ? 'column-title-color' : 'column-title-color-inactive'
135135
"
136136
>
137137
{{ "LORA-GATEWAY-TABLE.RESPONSIBLE-NAME" | translate }}
138138
</div>
139-
<app-table-sort-icon [sortDirection]="getSortDirection('active')" />
139+
<app-table-sort-icon [sortDirection]="getSortDirection('active')"/>
140140
</th>
141-
<td mat-cell *matCellDef="let gateway">
141+
<td *matCellDef="let gateway" mat-cell>
142142
{{ gateway.gatewayResponsibleName }}
143143
</td>
144144
</ng-container>
145145

146146
<ng-container matColumnDef="gatewayResponsibleEmail">
147-
<th mat-header-cell *matHeaderCellDef mat-sort-header class="min-width-150">
147+
<th *matHeaderCellDef class="min-width-150" mat-header-cell mat-sort-header>
148148
<div
149149
[ngClass]="
150150
this.sort.active === 'gatewayResponsibleEmail' ? 'column-title-color' : 'column-title-color-inactive'
151151
"
152152
>
153153
{{ "LORA-GATEWAY-TABLE.RESPONSIBLE-EMAIL" | translate }}
154154
</div>
155-
<app-table-sort-icon [sortDirection]="getSortDirection('active')" />
155+
<app-table-sort-icon [sortDirection]="getSortDirection('active')"/>
156156
</th>
157-
<td mat-cell *matCellDef="let gateway">
157+
<td *matCellDef="let gateway" mat-cell>
158158
{{ gateway.gatewayResponsibleEmail }}
159159
</td>
160160
</ng-container>
161161

162162
<ng-container matColumnDef="gatewayResponsiblePhoneNumber">
163-
<th mat-header-cell *matHeaderCellDef mat-sort-header>
163+
<th *matHeaderCellDef mat-header-cell mat-sort-header>
164164
<div
165165
[ngClass]="
166166
this.sort.active === 'gatewayResponsiblePhoneNumber' ? 'column-title-color' : 'column-title-color-inactive'
167167
"
168168
>
169169
{{ "LORA-GATEWAY-TABLE.RESPONSIBLE-PHONE-NUMBER" | translate }}
170170
</div>
171-
<app-table-sort-icon [sortDirection]="getSortDirection('active')" />
171+
<app-table-sort-icon [sortDirection]="getSortDirection('active')"/>
172172
</th>
173-
<td mat-cell *matCellDef="let gateway">
173+
<td *matCellDef="let gateway" mat-cell>
174174
{{ gateway.gatewayResponsiblePhoneNumber }}
175175
</td>
176176
</ng-container>
177177

178178
<ng-container matColumnDef="operationalResponsibleName">
179-
<th mat-header-cell *matHeaderCellDef mat-sort-header class="min-width-150">
179+
<th *matHeaderCellDef class="min-width-150" mat-header-cell mat-sort-header>
180180
<div
181181
[ngClass]="
182182
this.sort.active === 'operationalResponsibleName' ? 'column-title-color' : 'column-title-color-inactive'
183183
"
184184
>
185185
{{ "LORA-GATEWAY-TABLE.OPERATIONAL-NAME" | translate }}
186186
</div>
187-
<app-table-sort-icon [sortDirection]="getSortDirection('active')" />
187+
<app-table-sort-icon [sortDirection]="getSortDirection('active')"/>
188188
</th>
189-
<td mat-cell *matCellDef="let gateway">
189+
<td *matCellDef="let gateway" mat-cell>
190190
{{ gateway.operationalResponsibleName }}
191191
</td>
192192
</ng-container>
193193

194194
<ng-container matColumnDef="operationalResponsibleEmail">
195-
<th mat-header-cell *matHeaderCellDef mat-sort-header class="min-width-150">
195+
<th *matHeaderCellDef class="min-width-150" mat-header-cell mat-sort-header>
196196
<div
197197
[ngClass]="
198198
this.sort.active === 'operationalResponsibleEmail' ? 'column-title-color' : 'column-title-color-inactive'
199199
"
200200
>
201201
{{ "LORA-GATEWAY-TABLE.OPERATIONAL-EMAIL" | translate }}
202202
</div>
203-
<app-table-sort-icon [sortDirection]="getSortDirection('active')" />
203+
<app-table-sort-icon [sortDirection]="getSortDirection('active')"/>
204204
</th>
205-
<td mat-cell *matCellDef="let gateway">
205+
<td *matCellDef="let gateway" mat-cell>
206206
{{ gateway.operationalResponsibleEmail }}
207207
</td>
208208
</ng-container>
209209

210210
<ng-container matColumnDef="tags">
211-
<th mat-header-cell *matHeaderCellDef mat-sort-header class="min-width-250">
211+
<th *matHeaderCellDef class="min-width-250" mat-header-cell mat-sort-header>
212212
<div [ngClass]="this.sort.active === 'tags' ? 'column-title-color' : 'column-title-color-inactive'">
213213
{{ "LORA-GATEWAY-TABLE.TAGS" | translate }}
214214
</div>
215-
<app-table-sort-icon [sortDirection]="getSortDirection('active')" />
215+
<app-table-sort-icon [sortDirection]="getSortDirection('active')"/>
216216
</th>
217-
<td mat-cell *matCellDef="let gateway">
217+
<td *matCellDef="let gateway" mat-cell>
218218
{{ gateway.tagsString }}
219219
</td>
220220
</ng-container>
221221

222222
<ng-container matColumnDef="location">
223-
<th mat-header-cell *matHeaderCellDef class="min-width-150">
223+
<th *matHeaderCellDef class="min-width-150" mat-header-cell>
224224
<div [ngClass]="this.sort.active === 'location' ? 'column-title-color' : 'column-title-color-inactive'">
225225
{{ "LORA-GATEWAY-TABLE.LOCATION" | translate }}
226226
</div>
227-
<app-table-sort-icon [sortDirection]="getSortDirection('active')" />
227+
<app-table-sort-icon [sortDirection]="getSortDirection('active')"/>
228228
</th>
229-
<td mat-cell *matCellDef="let gateway">
229+
<td *matCellDef="let gateway" mat-cell>
230230
{{ gateway.location.latitude | number : "2.1-6" }},
231231
{{ gateway.location.longitude | number : "2.1-6" }}
232232
</td>
233233
</ng-container>
234234

235235
<ng-container matColumnDef="createdAt">
236-
<th mat-header-cell *matHeaderCellDef mat-sort-header>
236+
<th *matHeaderCellDef mat-header-cell mat-sort-header>
237237
<div [ngClass]="this.sort.active === 'createdAt' ? 'column-title-color' : 'column-title-color-inactive'">
238238
{{ "LORA-GATEWAY-TABLE.CREATED-AT" | translate }}
239239
</div>
240-
<app-table-sort-icon [sortDirection]="getSortDirection('active')" />
240+
<app-table-sort-icon [sortDirection]="getSortDirection('active')"/>
241241
</th>
242-
<td mat-cell *matCellDef="let gateway">
242+
<td *matCellDef="let gateway" mat-cell>
243243
{{ gateway.createdAt | dateOnly }}
244244
</td>
245245
</ng-container>
246246

247247
<ng-container matColumnDef="lastSeenAt">
248-
<th mat-header-cell *matHeaderCellDef mat-sort-header class="min-width-150">
248+
<th *matHeaderCellDef class="min-width-150" mat-header-cell mat-sort-header>
249249
<div [ngClass]="this.sort.active === 'lastSeenAt' ? 'column-title-color' : 'column-title-color-inactive'">
250250
{{ "LORA-GATEWAY-TABLE.LAST-SEEN-AT" | translate }}
251251
</div>
252-
<app-table-sort-icon [sortDirection]="getSortDirection('active')" />
252+
<app-table-sort-icon [sortDirection]="getSortDirection('active')"/>
253253
</th>
254-
<td mat-cell *matCellDef="let gateway">
254+
<td *matCellDef="let gateway" mat-cell>
255255
{{ lastActive(gateway) }}
256256
</td>
257257
</ng-container>
258258

259259
<ng-container matColumnDef="onlineStatus">
260-
<th mat-header-cell *matHeaderCellDef>
261-
<div [ngClass]="this.sort.active === 'onlineStatus' ? 'column-title-color' : 'column-title-color-inactive'">
262-
{{ "LORA-GATEWAY-TABLE.STATUS" | translate }}
263-
</div>
264-
<app-table-sort-icon [sortDirection]="getSortDirection('active')" />
260+
<th *matHeaderCellDef mat-header-cell>
261+
{{ "LORA-GATEWAY-TABLE.STATUS" | translate }}
265262
</th>
266-
<td mat-cell *matCellDef="let gateway">
263+
<td *matCellDef="let gateway" mat-cell>
267264
<ng-container *ngIf="gatewayStatus(gateway); then statusOk; else statusError"></ng-container>
268265
<ng-template #statusOk>
269266
<fa-icon [icon]="faCheckCircle" class="fa-ok"></fa-icon>
@@ -275,28 +272,28 @@
275272
</ng-container>
276273

277274
<ng-container matColumnDef="menu">
278-
<th mat-header-cell *matHeaderCellDef></th>
279-
<td mat-cell *matCellDef="let gateway" class="overflowVisible">
280-
<div class="dropdown" *ngIf="gateway.canEdit">
275+
<th *matHeaderCellDef mat-header-cell></th>
276+
<td *matCellDef="let gateway" class="overflowVisible" mat-cell>
277+
<div *ngIf="gateway.canEdit" class="dropdown">
281278
<a
282-
href="#"
283-
role="button"
284-
id="tableRowDropdown-{{ gateway.id }}"
279+
[attr.aria-label]="'LORA-GATEWAY-TABLE-ROW.SHOW-OPTIONS' | translate"
280+
aria-expanded="false"
285281
class="applicationRow__edit dropdown-toggle"
286282
data-toggle="dropdown"
287-
aria-expanded="false"
288-
[attr.aria-label]="'LORA-GATEWAY-TABLE-ROW.SHOW-OPTIONS' | translate"
283+
href="#"
284+
id="tableRowDropdown-{{ gateway.id }}"
285+
role="button"
289286
></a>
290-
<ul class="dropdown-menu dropdown-menu--table" attr.aria-labelledby="tableRowDropdown-{{ gateway.id }}">
287+
<ul attr.aria-labelledby="tableRowDropdown-{{ gateway.id }}" class="dropdown-menu dropdown-menu--table">
291288
<li class="dropdown-item">
292289
<a [routerLink]="['../gateway-edit', gateway.gatewayId]" routerLinkActive="active">{{
293-
"GEN.EDIT" | translate
294-
}}</a>
290+
"GEN.EDIT" | translate
291+
}}</a>
295292
</li>
296293
<li class="dropdown-item">
297294
<a (click)="onOpenChangeOrganizationDialog(gateway.id)" routerLinkActive="active">{{
298-
"GATEWAY.CHANGE-ORGANIZATION.TITLE" | translate
299-
}}</a>
295+
"GATEWAY.CHANGE-ORGANIZATION.TITLE" | translate
296+
}}</a>
300297
</li>
301298
<li class="dropdown-item">
302299
<a (click)="clickDelete(gateway)" [routerLink]="[]">{{ "GEN.DELETE" | translate }}</a>
@@ -306,13 +303,13 @@
306303
</td>
307304
</ng-container>
308305

309-
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
310-
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
306+
<tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
307+
<tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
311308
</table>
312309
<mat-paginator
310+
[length]="resultsLength"
313311
[pageSizeOptions]="pageSizeOptions"
314312
[pageSize]="pageSize"
315-
[length]="resultsLength"
316313
showFirstLastButtons
317314
>
318315
</mat-paginator>

0 commit comments

Comments
 (0)