This repository has been archived by the owner on Nov 22, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 15
/
connections.component.html
107 lines (99 loc) · 5.17 KB
/
connections.component.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<div style="margin-left: 150px">
<div id="connections-breadcrumb-bar">
<app-breadcrumbs>
<li i18n="@@connections.connections" app-breadcrumb label="Connections" icon="plug" class="active"></li>
</app-breadcrumbs>
</div>
<app-page-error [error]="pageError" *ngIf="pageError"></app-page-error>
<div class="container-fluid connection-list-connections" *ngIf="!pageError">
<div class="col-sm-12">
<h2 i18n="@@connections.connections">Connections</h2>
</div>
<div class="row toolbar-pf">
<div class="col-sm-12">
<form class="toolbar-pf-actions" #filterForm="ngForm">
<div class="form-group toolbar-pf-filter">
<label i18n="@@connections.name" class="sr-only" for="filter">Name</label>
<div class="input-group" style="width: 100%">
<input name="name-filter" [(ngModel)]="nameFilter" type="text" class="form-control name-filter" id="filter" placeholder="Filter by name...">
</div>
</div>
<div class="form-group">
<button class="btn btn-link" type="button" (click)="toggleSortDirection()">
<span *ngIf="isSortAscending" class="fa fa-sort-alpha-asc"></span>
<span *ngIf="isSortDescending" class="fa fa-sort-alpha-desc"></span>
</button>
</div>
<div class="form-group">
<a i18n="@@connections.addConnection" class="btn btn-primary" [routerLink]="[addConnectionLink]">Add Connection</a>
</div>
<div class="form-group toolbar-pf-view-selector">
<ul class="list-inline">
<li *ngIf="isListLayout"><a (click)="setCardLayout()"><i class="fa fa-th"></i></a></li>
<li *ngIf="isCardLayout"><a (click)="setListLayout()"><i class="fa fa-th-list"></i></a></li>
</ul>
</div>
</form>
<div class="row toolbar-pf-results">
<div class="col-sm-12">
<h5 i18n="@@connections.connectionsFound" >{{ filteredConnections.length }} Connections found
<a *ngIf="allConnections.length != filteredConnections.length"
class="clear-filters" (click)="clearFilters()">(out of {{
allConnections.length }} total)</a></h5>
</div>
</div>
</div>
</div>
<!-- List of Connections -->
<div class="row connection-list-items">
<div class="col-md-12 empty-state" *ngIf="isLoaded('connections') && allConnections.length === 0">
<div class="blank-slate-pf">
<div class="blank-slate-pf-icon">
<span class="pficon pficon pficon-add-circle-o"></span>
</div>
<h1 i18n="@@connections.noConnectionsFound">No Connections Found</h1>
<p i18n="@@connections.noConnectionsFoundPleaseClick">
No Connections were found - please click below to create a new Connection!
</p>
<div class="blank-slate-pf-main-action">
<div class="btn-group">
<a i18n="@@connections.addConnection" class="btn btn-primary btn-lg" [routerLink]="[ addConnectionLink ]">Add Connection</a>
</div>
</div>
</div>
</div>
<div class="col-md-8 none-matched-state" *ngIf="filteredConnections.length === 0 && isFiltered()">
<div class="alert alert-info">
<span class="pficon pficon-info"></span>
<strong i18n="@@connections.noConnectionsMatchedFilter">No Connections matched the filter! Please try changing your filter criteria... </strong>
</div>
</div>
<!-- The 'loading Connections' card -->
<div class="col-md-12" *ngIf="!isLoaded('connections')">
<div class="container-fluid container-cards-pf">
<div class="row row-cards-pf">
<div class="card-pf card-pf-accented">
<div class="card-pf-heading">
<h1 class="card-pf-title">
<span i18n="@@connections.loadingConnections" class="spinner spinner-xs spinner-inline"></span> Loading Connections...
</h1>
</div>
</div>
</div>
</div>
</div>
<!-- The list or card view -->
<div class="col-md-12" *ngIf="isLoaded('connections')">
<app-connections-list *ngIf="isListLayout" [connections]="filteredConnections" [selectedConnections]="selectedConnections"
(pingConnection)="onPing($event)" (deleteConnection)="onDelete($event)"
(connectionSelected)="onSelected($event)" (connectionDeselected)="onDeselected($event)"></app-connections-list>
<app-connections-cards *ngIf="isCardLayout" [connections]="filteredConnections" [selectedConnections]="selectedConnections"
(pingConnection)="onPing($event)" (deleteConnection)="onDelete($event)"
(connectionSelected)="onSelected($event)" (connectionDeselected)="onDeselected($event)"></app-connections-cards>
</div>
</div>
</div>
</div>
<app-confirm-delete (deleteSelected)="onDeleteConnection()">
<p i18n="@@connections.doYouReallyWantToDeleteSelectedConnection" >Do you really want to delete the selected Connection?</p>
</app-confirm-delete>