1 |
57555
|
k.triantaf
|
<div id="page_content" click-outside-or-esc targetId="page_content" (clickOutside)="toggleOpen($event)">
|
2 |
|
|
<div class="uk-padding-small md-bg-white" uk-grid>
|
3 |
|
|
<div class="uk-width-2-3@m uk-width-1-1 uk-child-width-1-3@m uk-child-width-1-1" uk-grid>
|
4 |
|
|
<div class="uk-flex uk-flex-middle">
|
5 |
|
|
<label>Chart Type:</label>
|
6 |
|
|
<select class="uk-select uk-form-small uk-margin-small-left"
|
7 |
|
|
(ngModelChange)="onChartTypeChange($event)"
|
8 |
|
|
[(ngModel)]="chartType">
|
9 |
|
|
<option [value]="'all'">All</option>
|
10 |
|
|
<option [value]="'pie'">Pie</option>
|
11 |
|
|
<option [value]="'table'">Table</option>
|
12 |
|
|
<option [value]="'line'">Line</option>
|
13 |
|
|
<option [value]="'column'">Column</option>
|
14 |
|
|
<option [value]="'bar'">Bar</option>
|
15 |
|
|
</select>
|
16 |
|
|
</div>
|
17 |
|
|
<div class="uk-flex uk-flex-middle">
|
18 |
|
|
<label>Privacy:</label>
|
19 |
|
|
<select class="uk-select uk-form-small uk-margin-small-left"
|
20 |
|
|
(ngModelChange)="onPrivacyChange($event)"
|
21 |
57594
|
k.triantaf
|
[(ngModel)]="privacy">
|
22 |
57555
|
k.triantaf
|
<option [value]="'all'">All</option>
|
23 |
|
|
<option [value]="'public'">Public</option>
|
24 |
|
|
<option [value]="'private'">Private</option>
|
25 |
|
|
</select>
|
26 |
|
|
</div>
|
27 |
|
|
<div class="uk-flex uk-flex-middle">
|
28 |
|
|
<label>Status:</label>
|
29 |
|
|
<select class="uk-select uk-form-small uk-margin-small-left"
|
30 |
|
|
(ngModelChange)="onStatusChange($event)"
|
31 |
57594
|
k.triantaf
|
[(ngModel)]="status">
|
32 |
57555
|
k.triantaf
|
<option [value]="'all'">All</option>
|
33 |
|
|
<option [value]="'active'">Active</option>
|
34 |
|
|
<option [value]="'inactive'">Inactive</option>
|
35 |
|
|
</select>
|
36 |
|
|
</div>
|
37 |
|
|
</div>
|
38 |
|
|
<div class="uk-width-expand@m uk-width-1-1 uk-flex uk-flex-middle uk-flex-right">
|
39 |
|
|
<div class="uk-inline">
|
40 |
|
|
<span class="uk-form-icon uk-form-icon-flip"><i class="material-icons">search</i></span>
|
41 |
|
|
<input (ngModelChange)="onKeywordChange($event)"
|
42 |
|
|
[(ngModel)]="keyword"
|
43 |
|
|
class="uk-input uk-form-small" placeholder="Locate indicator..">
|
44 |
|
|
</div>
|
45 |
|
|
<div [class.uk-active]="grid" class="uk-margin-small-left">
|
46 |
|
|
<a [routerLink]="" class="uk-icon-button" (click)="changeGrid(true)"><i
|
47 |
|
|
class="material-icons">view_module</i></a>
|
48 |
|
|
</div>
|
49 |
|
|
<div [class.uk-active]="!grid" class="uk-margin-small-left">
|
50 |
|
|
<a [routerLink]="" class="uk-icon-button" (click)="changeGrid(false)"><i class="material-icons">list</i></a>
|
51 |
|
|
</div>
|
52 |
|
|
</div>
|
53 |
|
|
</div>
|
54 |
57594
|
k.triantaf
|
<div *ngIf="stakeholder && canEdit" id="page_content_inner">
|
55 |
57555
|
k.triantaf
|
<div class="uk-child-width-1-2 uk-flex-middle" uk-grid>
|
56 |
|
|
<div>
|
57 |
57591
|
k.triantaf
|
<ul id="breadcrumbs">
|
58 |
|
|
<li><span>{{stakeholder.topics[topicIndex].name}}</span></li>
|
59 |
|
|
<li>
|
60 |
57594
|
k.triantaf
|
<span>{{stakeholder.topics[topicIndex].categories[categoryIndex].name}}</span></li>
|
61 |
|
|
<li>
|
62 |
57591
|
k.triantaf
|
<span class="md-color-blue-900 uk-text-bold">
|
63 |
|
|
{{stakeholder.topics[topicIndex].categories[categoryIndex].subCategories[subcategoryIndex].name}}
|
64 |
|
|
</span>
|
65 |
|
|
</li>
|
66 |
57555
|
k.triantaf
|
</ul>
|
67 |
|
|
</div>
|
68 |
|
|
<div class="uk-flex uk-flex-right">
|
69 |
|
|
<button class="md-btn md-btn-primary">Preview</button>
|
70 |
|
|
</div>
|
71 |
|
|
</div>
|
72 |
57591
|
k.triantaf
|
<h5 class="uk-text-bold">Number Indicators</h5>
|
73 |
57555
|
k.triantaf
|
<div [class.uk-child-width-1-3@m]="grid"
|
74 |
|
|
[class.uk-child-width-1-2@s]="grid"
|
75 |
|
|
[class.uk-child-width-1-1]="!grid"
|
76 |
|
|
uk-height-match="target: .md-card"
|
77 |
|
|
uk-grid>
|
78 |
|
|
<ng-template ngFor [ngForOf]="displayNumbers" let-indicator let-i="index">
|
79 |
|
|
<div>
|
80 |
57591
|
k.triantaf
|
<div class="md-card" [class.uk-width-4-5@xl]="!grid">
|
81 |
57555
|
k.triantaf
|
<div class="md-card-toolbar">
|
82 |
|
|
<div class="md-card-toolbar-actions" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
|
83 |
|
|
<span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
|
84 |
|
|
<i
|
85 |
|
|
class="material-icons md-24 uk-margin-small-right">{{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}</i>
|
86 |
|
|
{{(indicator.isPublic) ? 'Public' : 'Private'}}
|
87 |
|
|
</span>
|
88 |
|
|
<span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
|
89 |
|
|
<i class="material-icons md-24 uk-margin-small-right"
|
90 |
|
|
[class.md-color-green-300]="indicator.isActive">{{indicatorUtils.isActiveIcon}}</i>
|
91 |
|
|
{{(indicator.isActive) ? 'Active' : 'Inactive'}}
|
92 |
|
|
</span>
|
93 |
|
|
<i class="md-icon material-icons">more_vert</i>
|
94 |
|
|
</div>
|
95 |
57591
|
k.triantaf
|
<div class="uk-text-bold">{{indicator.name}}</div>
|
96 |
57555
|
k.triantaf
|
</div>
|
97 |
|
|
<div *ngIf="grid" class="md-card-content">
|
98 |
|
|
<div class="uk-flex uk-flex-center" uk-grid>
|
99 |
|
|
<div class="uk-width-1-1">
|
100 |
|
|
{{indicator.description}}
|
101 |
|
|
</div>
|
102 |
|
|
<div class="uk-width-1-2 uk-text-center">
|
103 |
|
|
<i class="material-icons md-24">{{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}</i>
|
104 |
|
|
<div>{{(indicator.isPublic) ? 'Public' : 'Private'}}</div>
|
105 |
|
|
</div>
|
106 |
|
|
<div class="uk-width-1-2 uk-text-center">
|
107 |
|
|
<i class="material-icons md-24"
|
108 |
|
|
[class.md-color-green-300]="indicator.isActive">{{indicatorUtils.isActiveIcon}}</i>
|
109 |
|
|
<div>{{(indicator.isActive) ? 'Active' : 'Inactive'}}</div>
|
110 |
|
|
</div>
|
111 |
|
|
</div>
|
112 |
|
|
</div>
|
113 |
|
|
</div>
|
114 |
|
|
</div>
|
115 |
|
|
</ng-template>
|
116 |
|
|
</div>
|
117 |
57591
|
k.triantaf
|
<h5 class="uk-text-bold">Chart Indicators</h5>
|
118 |
57555
|
k.triantaf
|
<div [class.uk-child-width-1-3@m]="grid"
|
119 |
|
|
[class.uk-child-width-1-2@s]="grid"
|
120 |
|
|
[class.uk-child-width-1-1]="!grid"
|
121 |
|
|
uk-height-match="target: .md-card"
|
122 |
|
|
uk-grid>
|
123 |
|
|
<ng-template ngFor [ngForOf]="displayCharts" let-indicator let-i="index">
|
124 |
|
|
<div>
|
125 |
57591
|
k.triantaf
|
<div class="md-card" [class.uk-width-4-5@xl]="!grid">
|
126 |
57555
|
k.triantaf
|
<div class="md-card-toolbar">
|
127 |
|
|
<div class="md-card-toolbar-actions" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
|
128 |
|
|
<ng-template [ngIf]="!grid">
|
129 |
|
|
<span *ngFor="let indicatorPath of indicator.indicatorPaths"
|
130 |
|
|
class="uk-margin-medium-right uk-text-capitalize uk-flex uk-flex-middle">
|
131 |
|
|
<i
|
132 |
|
|
class="material-icons md-24 uk-margin-small-right">{{indicatorUtils.chartTypes.get(indicatorPath.type)}}</i>
|
133 |
|
|
{{indicatorPath.type + ' Chart'}}
|
134 |
|
|
</span>
|
135 |
|
|
</ng-template>
|
136 |
|
|
<span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
|
137 |
|
|
<i
|
138 |
|
|
class="material-icons md-24 uk-margin-small-right">{{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}</i>
|
139 |
|
|
{{(indicator.isPublic) ? 'Public' : 'Private'}}
|
140 |
|
|
</span>
|
141 |
|
|
<span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
|
142 |
|
|
<i class="material-icons md-24 uk-margin-small-right"
|
143 |
|
|
[class.md-color-green-300]="indicator.isActive">{{indicatorUtils.isActiveIcon}}</i>
|
144 |
|
|
{{(indicator.isActive) ? 'Active' : 'Inactive'}}
|
145 |
|
|
</span>
|
146 |
|
|
<i class="md-icon material-icons">more_vert</i>
|
147 |
|
|
</div>
|
148 |
57591
|
k.triantaf
|
<div class="md-card-toolbar-heading-text">{{indicator.name}}</div>
|
149 |
57555
|
k.triantaf
|
</div>
|
150 |
|
|
<div *ngIf="grid" class="md-card-content">
|
151 |
|
|
<div class="uk-flex uk-flex-center" uk-grid>
|
152 |
|
|
<div class="uk-width-1-1">
|
153 |
|
|
{{indicator.description}}
|
154 |
|
|
</div>
|
155 |
|
|
<div class="uk-width-1-3 uk-text-center"
|
156 |
|
|
[ngClass]="'uk-child-width-1-' + indicator.indicatorPaths.length" uk-grid>
|
157 |
|
|
<div *ngFor="let indicatorPath of indicator.indicatorPaths">
|
158 |
|
|
<i class="material-icons md-24">{{indicatorUtils.chartTypes.get(indicatorPath.type)}}</i>
|
159 |
|
|
<div class="uk-text-capitalize">{{indicatorPath.type + ' Chart'}}</div>
|
160 |
|
|
</div>
|
161 |
|
|
</div>
|
162 |
|
|
<div class="uk-width-1-3 uk-text-center">
|
163 |
|
|
<i class="material-icons md-24">{{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}</i>
|
164 |
|
|
<div>{{(indicator.isPublic) ? 'Public' : 'Private'}}</div>
|
165 |
|
|
</div>
|
166 |
|
|
<div class="uk-width-1-3 uk-text-center">
|
167 |
|
|
<i class="material-icons md-24"
|
168 |
|
|
[class.md-color-green-300]="indicator.isActive">{{indicatorUtils.isActiveIcon}}</i>
|
169 |
|
|
<div>{{(indicator.isActive) ? 'Active' : 'Inactive'}}</div>
|
170 |
|
|
</div>
|
171 |
|
|
</div>
|
172 |
|
|
</div>
|
173 |
|
|
</div>
|
174 |
|
|
</div>
|
175 |
|
|
</ng-template>
|
176 |
|
|
</div>
|
177 |
|
|
</div>
|
178 |
|
|
</div>
|