Project

General

Profile

1
<div *ngIf="stakeholder && canEdit">
2
  <div class="uk-text-right uk-width-expand">
3
    <a class="uk-margin-bottom uk-margin-right  " uk-icon="icon:download" title="Export indicators (JSON file)"
4
       (click)="export_indicators()">
5
      <span class="uk-text-small">Export</span>
6
    </a>
7
    <div uk-form-custom class="js-upload uk-margin-top">
8
      <input id="exampleInputFile" type="file" class="uk-width-medium" (change)="fileChangeEvent($event)"/>
9
      <a class=" uk-margin-bottom" uk-icon="icon:upload" title="Import indicators (JSON file)"> Import</a>
10
    </div>
11
  </div>
12

    
13
  <div *ngIf="numberSections">
14
    <h6 class="uk-text-bold">Number Indicators</h6>
15
    <ng-template ngFor [ngForOf]="displayNumbers" let-number let-i="index">
16
      <div [id]="'number-' + number._id"
17
           class="uk-grid-match  uk-grid-small uk-grid uk-margin-top section"
18
           uk-sortable="group: number" uk-grid>
19
        <div class="tools disable-sortable uk-sortable-nodrag">
20
          <div class="actions">
21
            <a [class.uk-disabled]="editing" class="" (click)="createSection(i, 'number')"
22
               title="Create a new section">
23
              <icon name="add"></icon>
24
            </a>
25
            <!--<button class="md-btn md-btn-mini"><i class="material-icons rotate-90">drag_indicator</i></button>-->
26
            <a [title]="(number.defaultId?'Default sections cannot be deleted':'Delete section')"
27
               (click)="deleteSectionOpen(number, i, 'number', 'delete')">
28
              <icon name="close"></icon>
29
            </a>
30
            <!--              <ng-container *ngIf="!stakeholder.defaultId">-->
31
            <!--                <button   [disabled]="editing || number.defaultId  " class="md-btn md-btn-mini"-->
32
            <!--                          [title]="(number.defaultId?'Default sections cannot be deleted':'Delete all related sections')"-->
33
            <!--                          (click)="deleteSectionOpen(number, i, 'number', 'delete')"><i class="material-icons">highlight_off</i>-->
34
            <!--                </button>-->
35
            <!--                <button   [disabled]="editing || number.defaultId  " class="md-btn md-btn-mini"-->
36
            <!--                          [title]="(number.defaultId?'Default sections cannot be deleted':'Delete section and disconnect related')"-->
37
            <!--                          (click)="deleteSectionOpen(number, i, 'number', 'disconnect')"><i class="material-icons">link_off</i>-->
38
            <!--                </button>-->
39
            <!--              </ng-container>-->
40
          </div>
41
        </div>
42
        <div *ngIf="numberSections.at(i)"
43
             class="uk-width-1-1 uk-margin-medium-bottom disable-sortable uk-sortable-nodrag">
44
          <div dashboard-input [formInput]="numberSections.at(i).get('title')"
45
               [extraLeft]="false" class="uk-width-1-3@m uk-width-1-1" placeholder="Title"
46
               inputClass="input-borderless uk-h5 uk-margin-remove">
47
            <div [class.uk-invisible]="numberSections.at(i).get('title').pristine">
48
              <button class="uk-button uk-button-secondary" [disabled]="editing"
49
                      (click)="saveSection(numberSections.at(i).value, i, 'number')">
50
                Save
51
              </button>
52
            </div>
53
          </div>
54
        </div>
55
        <ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
56
          <div *ngIf="indicator" [id]="indicator._id"
57
               [ngClass]="getNumberClassBySize(indicator.width)"
58
               [class.disable-sortable]="!canReorder"
59
               [class.uk-sortable-nodrag]="!canReorder">
60
            <div class="uk-card uk-card-default uk-card-body uk-position-relative" [class.uk-card-hover]="canReorder">
61
              <ng-container
62
                  *ngTemplateOutlet="visibilityOptions; context:{indicator: indicator, sectionId: number._id}"></ng-container>
63
              <div class="uk-position-top-right uk-margin-small-right uk-margin-small-top clickable">
64
                <i uk-icon="more-vertical" (click)="$event.stopPropagation();$event.preventDefault()"></i>
65
                <div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false">
66
                  <ul class="uk-nav uk-dropdown-nav">
67
                    <li *ngIf="!editing"><a
68
                        (click)="editNumberIndicatorOpen(number, indicator._id)">Edit</a></li>
69
                    <ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v>
70
                      <li *ngIf="indicator.visibility != v.value"><a (click)="changeIndicatorStatus(number._id,
71
                           indicator, v.value); hide(element)">
72
                        {{'Make ' + v.label.toLowerCase()}}</a>
73
                      </li>
74
                    </ng-template>
75
                    <hr *ngIf="!indicator.defaultId" class="uk-nav-divider">
76
                    <li *ngIf="!indicator.defaultId && !editing"><a
77
                        (click)="deleteIndicatorOpen(number, indicator._id, 'number', 'delete');hide(element)">Delete</a>
78
                      <!--                            <ng-container *ngIf="!stakeholder.defaultId">-->
79
                      <!--                              <a (click)="deleteIndicatorOpen(number, indicator._id, 'number', 'delete');hide(element)">Delete from all profiles</a>-->
80
                      <!--                              <a (click)="deleteIndicatorOpen(number, indicator._id, 'number', 'disconnect');hide(element)">Delete and disconnect from all profiles</a>-->
81
                      <!--                            </ng-container>-->
82
                    </li>
83
                  </ul>
84
                </div>
85
              </div>
86
              <div>
87
                <div class="uk-text-center uk-text-bold">
88
                  {{indicator.name ? indicator.name : 'No title available'}}
89
                </div>
90
                <h3 class="uk-margin-medium-top uk-text-center uk-text-bold">
91
                  <span *ngIf="numberResults.get(i + '-' + j)">{{numberResults.get(i + '-' + j) | number}}</span>
92
                  <span *ngIf="!numberResults.get(i + '-' + j)">--</span>
93
                </h3>
94
                <!--<ng-container *ngTemplateOutlet="description; context: {indicator:indicator}"></ng-container>-->
95
              </div>
96
            </div>
97
          </div>
98
        </ng-template>
99
        <div class="disable-sortable uk-sortable-nodrag uk-width-1-1">
100
          <div class="uk-grid uk-grid-small" uk-grid>
101
            <div class="uk-width-1-4@xl uk-width-1-3@l uk-width-1-2@m uk-width-1-1">
102
              <div class="uk-card uk-card-default uk-card-body clickable" (click)="editNumberIndicatorOpen(number)">
103
                <h5 class="uk-text-bold">
104
                  Create a new number Indicator
105
                </h5>
106
                <div class="uk-flex uk-flex-center uk-text-secondary uk-margin-large-top">
107
                  <icon name="add" ratio="5"></icon>
108
                </div>
109
              </div>
110
            </div>
111
          </div>
112
        </div>
113
      </div>
114
    </ng-template>
115
    <ng-container *ngTemplateOutlet="new_section; context:{type: 'number'}"></ng-container>
116
  </div>
117
  <div *ngIf="chartSections" class="uk-margin-large-top">
118
    <h6 class="uk-text-bold">Chart Indicators</h6>
119
    <ng-template ngFor [ngForOf]="displayCharts" let-chart let-i="index">
120
      <div [id]="'chart-' + chart._id"
121
           class="uk-grid-match section uk-grid-small uk-grid uk-margin-top"
122
           uk-sortable="group: chart" uk-grid>
123
        <div class="tools disable-sortable uk-sortable-nodrag">
124
          <div class="actions">
125
            <a [class.uk-disabled]="editing" class="" (click)="createSection(i)"
126
               title="Create a new section">
127
              <icon name="add"></icon>
128
            </a>
129
            <!--<button class="md-btn md-btn-mini"><i class="material-icons rotate-90">drag_indicator</i></button>-->
130
            <a [title]="(chart.defaultId?'Default sections cannot be deleted':'Delete section')"
131
               (click)="deleteSectionOpen(chart, i, 'chart', 'delete')">
132
              <icon name="close"></icon>
133
            </a>
134
            <!--              <ng-container *ngIf="!stakeholder.defaultId">-->
135
            <!--                <button   [disabled]="editing || chart.defaultId  " class="md-btn md-btn-mini"-->
136
            <!--                          [title]="(chart.defaultId?'Default sections cannot be deleted':'Delete all related sections')"-->
137
            <!--                          (click)="deleteSectionOpen(chart, i, 'chart', 'delete')"><i class="material-icons">highlight_off</i>-->
138
            <!--                </button>-->
139
            <!--                <button   [disabled]="editing || chart.defaultId  " class="md-btn md-btn-mini"-->
140
            <!--                          [title]="(chart.defaultId?'Default sections cannot be deleted':'Delete section and disconnect related')"-->
141
            <!--                          (click)="deleteSectionOpen(chart, i, 'chart', 'disconnect')"><i class="material-icons">link_off</i>-->
142
            <!--                </button>-->
143
            <!--              </ng-container>-->
144
          </div>
145
        </div>
146
        <div *ngIf="chartSections.at(i)"
147
             class="uk-width-1-1 uk-margin-medium-bottom disable-sortable uk-sortable-nodrag">
148
          <div dashboard-input [formInput]="chartSections.at(i).get('title')"
149
               [extraLeft]="false" class="uk-width-1-3@m uk-width-1-1" placeholder="Title"
150
               inputClass="input-borderless uk-h5 uk-margin-remove">
151
            <div [class.uk-invisible]="chartSections.at(i).get('title').pristine">
152
              <button class="uk-button uk-button-secondary" [disabled]="editing"
153
                      (click)="saveSection(chartSections.at(i).value, i)">
154
                Save
155
              </button>
156
            </div>
157
          </div>
158
        </div>
159
        <ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
160
          <div *ngIf="indicator" [id]="indicator._id"
161
               [ngClass]="getChartClassBySize(indicator.width)"
162
               [class.disable-sortable]="!canReorder"
163
               [class.uk-sortable-nodrag]="!canReorder">
164
            <div class="uk-card uk-card-default uk-card-body uk-position-relative" [class.uk-card-hover]="canReorder">
165
              <ng-container
166
                  *ngTemplateOutlet="visibilityOptions; context:{indicator: indicator, sectionId: chart._id}"></ng-container>
167
              <div class="uk-position-top-right uk-margin-small-right uk-margin-small-top clickable">
168
                <i uk-icon="more-vertical" (click)="$event.stopPropagation();$event.preventDefault()"></i>
169
                <div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false">
170
                  <ul class="uk-nav uk-dropdown-nav">
171
                    <li *ngIf="!editing"><a
172
                        (click)="editChartIndicatorOpen(chart, indicator._id);hide(element)">Edit</a>
173
                    </li>
174
                    <ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v>
175
                      <li *ngIf="indicator.visibility != v.value"><a (click)="changeIndicatorStatus(chart._id,
176
                             indicator, v.value); hide(element)">
177
                        {{'Make ' + v.label.toLowerCase()}}</a>
178
                      </li>
179
                    </ng-template>
180
                    <hr *ngIf="!indicator.defaultId " class="uk-nav-divider">
181
                    <li *ngIf="!editing && !indicator.defaultId "><a
182
                        (click)="deleteIndicatorOpen(chart, indicator._id, 'chart', 'delete');hide(element)">
183
                      Delete</a>
184
                      <!--                            <a (click)="deleteIndicatorOpen(chart, indicator._id, 'chart', 'delete');hide(element)">Delete from all profiles</a>-->
185
                      <!--                            <a (click)="deleteIndicatorOpen(chart, indicator._id, 'chart', 'disconnect');hide(element)">Delete and disconnect from all profiles</a>-->
186
                    </li>
187
                  </ul>
188
                </div>
189
              </div>
190
              <div>
191
                <div *ngIf="indicator.name" class="uk-text-center uk-text-bold uk-margin-small-bottom">
192
                  {{indicator.name}}
193
                </div>
194
                <iframe *ngIf="!properties.disableFrameLoad && indicator.indicatorPaths[0] &&
195
                indicator.indicatorPaths[0].source !==
196
                'image' &&
197
                                  safeUrls.get(indicatorUtils.getFullUrl(stakeholder, indicator.indicatorPaths[0]))"
198
                        [src]="safeUrls.get(indicatorUtils.getFullUrl(stakeholder, indicator.indicatorPaths[0]))"
199
                        [class]="' uk-width-1-1 uk-height-' +
200
                        (indicator.height?indicator.height.toLowerCase():'medium')"></iframe>
201
                <div *ngIf="properties.disableFrameLoad &&
202
                indicator.indicatorPaths[0].source !==
203
                'image'" class="uk-alert uk-alert-danger uk-text-center">I frames
204
                  preview is disabled
205
                </div>
206
                <div *ngIf="indicator.indicatorPaths[0] && indicator.indicatorPaths[0].source === 'image'">
207
                  <img [class]="' uk-width-1-1 uk-height-' +
208
                        (indicator.height?indicator.height.toLowerCase():'medium')"
209
                       [src]="indicator.indicatorPaths[0].url">
210
                </div>
211
                <!--<ng-container *ngTemplateOutlet="description; context: {indicator:indicator}"></ng-container>-->
212
              </div>
213
            </div>
214
          </div>
215
        </ng-template>
216
        <div class="disable-sortable uk-sortable-nodrag uk-width-1-1">
217
          <div class="uk-grid uk-grid-small" uk-grid>
218
            <div class="uk-width-1-3@xl uk-width-1-2@m uk-width-1-1">
219
              <div class=" uk-card uk-card-default uk-card-body clickable" (click)="editChartIndicatorOpen(chart)">
220
                <h5 class="uk-text-bold">
221
                  Create a custom indicator
222
                </h5>
223
                <div class="uk-text-muted uk-text-small">
224
                  Use our advance tool to create a custom Indicator that suit the needs of your funding
225
                  KPI's.
226
                </div>
227
                <div class="uk-flex uk-flex-center uk-text-secondary uk-margin-medium-top">
228
                  <icon name="add" ratio="5"></icon>
229
                </div>
230
              </div>
231
            </div>
232
          </div>
233
        </div>
234
      </div>
235
    </ng-template>
236
    <ng-container *ngTemplateOutlet="new_section; context:{type: 'chart'}"></ng-container>
237
  </div>
238
</div>
239

    
240
<modal-alert #editNumberModal
241
             [large]="true"
242
             (alertOutput)="saveIndicator()"
243
             [okDisabled]="numberIndicatorFb && (numberIndicatorFb.invalid || numberIndicatorFb.pristine)">
244
  <div class="uk-padding-small">
245
    <div *ngIf="numberIndicatorFb" class="uk-grid" [formGroup]="numberIndicatorFb" uk-grid>
246
      <div dashboard-input class="uk-width-1-1" [formInput]="numberIndicatorFb.get('name')" placeholder="Write a title"
247
           label="Title"></div>
248
      <div dashboard-input class="uk-width-1-1" *ngIf="stakeholder.defaultId !=-1 && (  (indicator.description &&
249
      indicator.description.length > 0) || !stakeholder.defaultId)"
250
           [formInput]="numberIndicatorFb.get('description')"
251
           placeholder="Write a description"
252
           label="Profile description" type="textarea">
253
      </div>
254
      <div dashboard-input class="uk-width-1-1" *ngIf="stakeholder.defaultId"
255
           [formInput]="numberIndicatorFb.get('additionalDescription')"
256
           placeholder="Write a description"
257
           label="Description" type="textarea">
258
      </div>
259
      <div dashboard-input class="uk-width-1-2@m" [formInput]="numberIndicatorFb.get('visibility')"
260
           placeholder="Select a status"
261
           label="Visibility" [options]="stakeholderUtils.visibility" type="select">
262
      </div>
263
      <div dashboard-input class="uk-width-1-2@m" [formInput]="numberIndicatorFb.get('width')"
264
           type="select" [options]="indicatorUtils.indicatorSizes"
265
           placeholder="Select a size" label="Number Size">
266
      </div>
267
      <div *ngIf="numberIndicatorPaths" formArrayName="indicatorPaths">
268
        <div *ngFor="let indicatorPath of numberIndicatorPaths.controls; let i=index"
269
             [formGroup]="indicatorPath">
270
          <div class="uk-grid" uk-grid>
271
            <div class="uk-width-1-1">
272
              <div class="uk-grid" uk-grid>
273
                <div class="uk-width-1-1">
274
                  <div dashboard-input [formInput]="indicatorPath.get('url')" label="Number URL"
275
                       placeholder="Write a URL">
276
                    <div *ngIf="urlParameterizedMessage" warning>{{urlParameterizedMessage}}</div>
277
                  </div>
278
                </div>
279
                <div *ngIf="showCheckForSchemaEnhancements" class=" uk-width-1-1 ">
280
                  <div class="uk-alert uk-alert-warning">
281
                    There are schema enchancements that can be applied in this query. <a
282
                      (click)="indicatorPath.get('url').setValue(indicatorUtils.applySchemaEnhancements(indicatorPath.get('url').value)); indicatorPath.get('url').markAsDirty()">Apply
283
                    now</a>
284
                  </div>
285
                </div>
286
                <div class="uk-width-1-1">
287
                  <div dashboard-input [formInput]="indicatorPath.get('source')" label="Source"
288
                       type="select" placeholder="Select a source"
289
                       [options]="isAdministrator?indicatorUtils.allSourceTypes:indicatorUtils.sourceTypes">
290
                  </div>
291
                </div>
292
              </div>
293
            </div>
294
            <div formArrayName="jsonPath" class="uk-width-1-1">
295
              <h6 class="uk-text-bold uk-flex uk-flex-middle uk-margin-remove-bottom">
296
                <span>JSON Path</span>
297
              </h6>
298
              <div
299
                  *ngIf="numberIndicatorPaths.at(i).get('result').invalid && numberIndicatorPaths.at(i).get('result').errors.required">
300
                <div class="uk-text-danger uk-text-small">
301
                  This JSON path is not valid or the result has not been calculated yet.
302
                  Please press calculate on box below to see the result.
303
                </div>
304
              </div>
305
              <div class="uk-grid uk-child-width-1-3@m uk-child-width-1-1 uk-margin-top" uk-grid>
306
                <div *ngFor="let jsonPath of getJsonPath(i).controls; let j=index" class="uk-flex uk-flex-middle">
307
                  <div dashboard-input class="uk-width-1-1"
308
                       [extraLeft]="false"
309
                       [formInput]="jsonPath"
310
                       placeholder="Write a field"
311
                       [label]="'Level ' + +(j + 1)">
312
                    <div class="uk-flex uk-flex-middle">
313
                    <span *ngIf="getJsonPath(i).length !== 1"
314
                          [class.uk-hidden]="numberIndicatorFb.get('defaultId').value"
315
                          class="uk-margin-small-left uk-text-danger clickable"
316
                          [class.uk-disabled]="getJsonPath(i).disabled"
317
                          (click)="removeJsonPath(i, j)">
318
                      <icon name="close"></icon>
319
                    </span>
320
                      <span class="uk-text-center uk-margin-left">
321
                      <icon *ngIf="indicator.defaultId === null || j < (getJsonPath(i).controls.length - 1)"
322
                            name="arrow_right"></icon>
323
                    </span>
324
                    </div>
325
                  </div>
326
                </div>
327
                <div *ngIf="indicator.defaultId === null" class="uk-flex uk-flex-middle">
328
                  <button class="uk-icon-button uk-button-secondary uk-margin-medium-top"
329
                          (click)="addJsonPath(i)">
330
                    <icon name="add"></icon>
331
                  </button>
332
                </div>
333
              </div>
334
            </div>
335
            <div class="uk-width-1-1 uk-flex uk-flex-center">
336
              <div class="uk-flex uk-position-relative">
337
                <span class="uk-padding number number-preview uk-text-center">
338
                  <span
339
                      *ngIf="numberIndicatorPaths.at(i).get('result').valid && numberIndicatorPaths.at(i).get('result').value !== 0">
340
                    {{numberIndicatorPaths.at(i).get('result').value | number}}
341
                  </span>
342
                  <span
343
                      *ngIf="numberIndicatorPaths.at(i).get('result').valid && numberIndicatorPaths.at(i).get('result').value === 0">
344
                    --
345
                  </span>
346
                </span>
347
                <div *ngIf="numberIndicatorPaths.at(i).get('result').invalid"
348
                     class="uk-width-1-1 uk-height-1-1 refresh-indicator">
349
                  <div class="uk-position-relative uk-height-1-1">
350
                    <div class="uk-position-center uk-text-center clickable uk-text-small"
351
                         [class.uk-disabled]="numberIndicatorPaths.at(i).get('url').invalid"
352
                         (click)="validateJsonPath(i, true)">
353
                      <div>
354
                        <icon name="refresh"></icon>
355
                      </div>
356
                      <span *ngIf="numberIndicatorPaths.at(i).get('result').errors.required">Calculate</span>
357
                      <span *ngIf="numberIndicatorPaths.at(i).get('result').errors.validating">Calculating...</span>
358
                    </div>
359
                  </div>
360
                </div>
361
              </div>
362
            </div>
363
          </div>
364
        </div>
365
      </div>
366
    </div>
367
    <div #editNumberNotify notify-form class="uk-width-1-1 uk-margin-medium-top"
368
         [class.uk-hidden]="properties.environment === 'production'"></div>
369
  </div>
370
</modal-alert>
371
<modal-alert #editChartModal
372
             [large]="true"
373
             (alertOutput)="saveIndicator()"
374
             [okDisabled]="chartIndicatorFb && (chartIndicatorFb.invalid || chartIndicatorFb.pristine)">
375
  <div class="uk-padding-small">
376
    <div *ngIf="chartIndicatorFb" [formGroup]="chartIndicatorFb" class="uk-grid" uk-grid>
377
      <div dashboard-input class="uk-width-1-1" [formInput]="chartIndicatorFb.get('name')" placeholder="Write a title"
378
           label="Title"></div>
379
      <div dashboard-input class="uk-width-1-1" *ngIf="stakeholder.defaultId !=-1 && (  (indicator.description &&
380
      indicator.description.length > 0) || !stakeholder.defaultId)"
381
           [formInput]="chartIndicatorFb.get('description')" placeholder="Write a description"
382
           label="Default Description" type="textarea">
383
      </div>
384
      <div dashboard-input *ngIf="stakeholder.defaultId" class="uk-width-1-1"
385
           [formInput]="chartIndicatorFb.get('additionalDescription')" placeholder="Write a default description"
386
           label="Description" type="textarea">
387
      </div>
388
      <div dashboard-input class="uk-width-1-2@m" [formInput]="chartIndicatorFb.get('visibility')"
389
           placeholder="Select a status"
390
           label="Status" [options]="stakeholderUtils.visibility" type="select">
391
      </div>
392
      <div dashboard-input class="uk-width-1-2@m" [formInput]="chartIndicatorFb.get('width')"
393
           type="select" [options]="indicatorUtils.indicatorSizes" placeholder="Select a size"
394
           label="Chart width">
395
      </div>
396
      <div dashboard-input class="uk-width-1-2@m" [formInput]="chartIndicatorFb.get('height')"
397
           type="select" [options]="indicatorUtils.indicatorSizes" placeholder="Select a size"
398
           label="Chart height">
399
      </div>
400
      <div *ngIf="chartIndicatorPaths" formArrayName="indicatorPaths" class="uk-width-1-1">
401
        <div *ngFor="let indicatorPath of chartIndicatorPaths.controls; let  i=index;"
402
             [formGroup]="indicatorPath" class="uk-grid" uk-grid>
403
          <div dashboard-input class="uk-width-1-1"
404
               [title]="indicatorPath.get('url').disabled?'Default chart URLs cannot change':''"
405
               [formInput]="indicatorPath.get('url')" placeholder="Write a URL" label="Chart URL">
406
            <div *ngIf="urlParameterizedMessage" warning>{{urlParameterizedMessage}}</div>
407
          </div>
408
          <div *ngIf="showCheckForSchemaEnhancements" class=" uk-width-1-1 ">
409
            <div class="uk-alert uk-alert-warning">
410
              There are schema enchancements that can be applied in this query. <a
411
                (click)="indicatorPath.get('url').setValue(indicatorUtils.applySchemaEnhancements(indicatorPath.get('url').value)); indicatorPath.get('url').markAsDirty()">Apply
412
              now</a>
413
            </div>
414
          </div>
415
          <div class="uk-width-1-1" formArrayName="parameters">
416
            <div class="uk-grid" uk-grid>
417
              <div *ngIf="getParameter(i, 'title')" class="uk-width-1-1">
418
                <div dashboard-input
419
                     [formInput]="getParameter(i, 'title').get('value')"
420
                     placeholder="Write a title"
421
                     label="Chart Title"></div>
422
              </div>
423
              <div *ngIf="getParameter(i, 'subtitle')" class="uk-width-1-1">
424
                <div dashboard-input placeholder="Write a subtitle"
425
                     [formInput]="getParameter(i, 'subtitle').get('value')"
426
                     label="Chart Subtitle"></div>
427
              </div>
428
              <div *ngIf="!getParameter(i, 'type')" class="uk-width-1-3@s">
429
                <div dashboard-input [formInput]="indicatorPath.get('type')"
430
                     type="select" placeholder="Select a type"
431
                     [options]="(indicatorPath.get('type').value == 'table' && getParameter(i, 'data_title_0'))?indicatorUtils.getChartTypes(indicatorPath.get('type').value):indicatorUtils.allChartTypes"
432
                     label="Chart Type"></div>
433
              </div>
434
              <div *ngIf="getParameter(i, 'type')" class="uk-width-1-3@s">
435
                <div dashboard-input [formInput]="getParameter(i, 'type').get('value')"
436
                     placeholder="Select a type"
437
                     type="select" [options]="indicatorUtils.getChartTypes(getParameter(i, 'type').get('value').value)"
438
                     label="Chart Type"></div>
439
              </div>
440
              <div *ngIf="getParameter(i, 'xAxisTitle')" class="uk-width-1-3@s">
441
                <div dashboard-input [formInput]="getParameter(i, 'xAxisTitle').get('value')"
442
                     placeholder="Write a title for X-Axis"
443
                     label="X-Axis Title"></div>
444
              </div>
445
              <div *ngIf="getParameter(i, 'yAxisTitle')" class="uk-width-1-3@s">
446
                <div dashboard-input [formInput]="getParameter(i, 'yAxisTitle').get('value')"
447
                     placeholder="Write a title"
448
                     label="Y-Axis Title"></div>
449
              </div>
450
              <div *ngIf="getParameter(i, 'data_title_0')" class="uk-width-1-3@s">
451
                <div dashboard-input [formInput]="getParameter(i, 'data_title_0').get('value')"
452
                     placeholder="Write a title"
453
                     label="Data title"></div>
454
              </div>
455
              <div *ngIf="getParameter(i, 'data_title_1')" class="uk-width-1-3@s">
456
                <div dashboard-input [formInput]="getParameter(i, 'data_title_1').get('value')"
457
                     placeholder="Write a title"
458
                     label="Data title"></div>
459
              </div>
460
              <div *ngIf="getParameter(i, 'start_year')" class="uk-width-1-3@s">
461
                <div dashboard-input [formInput]="getParameter(i, 'start_year').get('value')"
462
                     placeholder="Write a year"
463
                     label="Year (From)"></div>
464
              </div>
465
              <div *ngIf="getParameter(i, 'end_year')" class="uk-width-1-3@s">
466
                <div dashboard-input [formInput]="getParameter(i, 'end_year').get('value')"
467
                     placeholder="Write a year"
468
                     label="Year (To)"></div>
469
              </div>
470
            </div>
471
          </div>
472
          <div *ngIf="indicator && indicator.indicatorPaths[i] && indicator.indicatorPaths[i].safeResourceUrl"
473
               class="uk-margin-medium-top uk-position-relative uk-width-1-1 uk-flex uk-flex-center">
474
            <div *ngIf="(hasDifference(i)) && !indicatorPath.invalid"
475
                 class="uk-width-1-1 uk-height-large refresh-indicator">
476
              <div class="uk-position-relative uk-height-1-1">
477
                <div class="uk-position-center uk-text-center clickable"
478
                     (click)="refreshIndicator()">
479
                  <div>
480
                    <icon name="refresh"></icon>
481
                  </div>
482
                  <span>Click to refresh the graph view</span>
483
                </div>
484
              </div>
485
            </div>
486
            <iframe *ngIf="indicator.indicatorPaths[i].source !== 'image'"
487
                    [src]="indicator.indicatorPaths[i].safeResourceUrl"
488
                    class="uk-width-1-1 uk-height-large"></iframe>
489
            <!--            <div *ngIf="properties.disableFrameLoad  && indicator.indicatorPaths[i].source !== 'image'" class="uk-alert uk-alert-danger uk-text-center">I frames-->
490
            <!--              preview is disabled</div>-->
491
            <div *ngIf="indicator.indicatorPaths[i].source === 'image'">
492
              <img class="uk-width-1-1 uk-height-large" [src]="indicator.indicatorPaths[i].url">
493
            </div>
494
          </div>
495
        </div>
496
      </div>
497
    </div>
498
    <div #editChartNotify notify-form class="uk-width-1-1 uk-margin-medium-top"
499
         [class.uk-hidden]="properties.environment === 'production'"></div>
500
  </div>
501
</modal-alert>
502
<modal-alert #deleteModal (alertOutput)="deleteIndicator()">
503
  You are about to delete <span class="uk-text-bold" *ngIf="indicator && index !== -1">
504
  "{{indicator.name ? indicator.name : indicator.indicatorPaths[0].parameters.title}}"</span> indicator permanently.
505
  <div *ngIf="indicatorChildrenActionOnDelete == 'delete'" class="uk-text-bold">
506
    Indicators of all profiles based on this default indicator, will be deleted as well.
507
  </div>
508
  <!--  <span *ngIf="indicatorChildrenActionOnDelete == 'disconnect'" class="uk-text-bold">-->
509
  <!--    Indicators of all profiles based on this default indicator, will not be marked as copied from default anymore.-->
510
  <!--  </span>-->
511
  Are you sure you want to proceed?
512
  <div #deleteNotify notify-form class="uk-width-1-1 uk-margin-medium-top"
513
       [class.uk-hidden]="properties.environment === 'production'"></div>
514
</modal-alert>
515
<!--<modal-alert #deleteAllModal (alertOutput)="deleteIndicator('delete')">
516
  You are about to delete <span class="uk-text-bold" *ngIf="indicator && index !== -1">
517
  "{{indicator.name ? indicator.name : indicator.indicatorPaths[0].parameters.title}}"</span> indicator permanently.
518
  <span class="uk-text-bold">Indicators of all profiles based on this default indicator, will be deleted as well.</span>
519
  Are you sure you want to proceed?
520
</modal-alert>
521
<modal-alert #deleteAndDisconnectModal (alertOutput)="deleteIndicator('disconnect')">
522
  You are about to delete <span class="uk-text-bold" *ngIf="indicator && index !== -1">
523
  "{{indicator.name ? indicator.name : indicator.indicatorPaths[0].parameters.title}}"</span> indicator permanently.
524
  <span class="uk-text-bold">Indicators of all profiles based on this default indicator, will not be marked as copied from default anymore.</span>
525
  Are you sure you want to proceed?
526
</modal-alert>-->
527
<modal-alert #deleteSectionModal (alertOutput)="deleteSection()">
528
  You are about to delete this section and its indicators permanently.
529
  <div *ngIf="sectionChildrenActionOnDelete == 'delete' && !stakeholder.defaultId" class="uk-text-bold">
530
    Sections of all profiles based on this default section and their contents, will be deleted as well.
531
  </div>
532
  <!--  <span *ngIf="sectionChildrenActionOnDelete == 'disconnect'" class="uk-text-bold">-->
533
  <!--    Sections of all profiles based on this default section and their contents, will not be marked as copied from default anymore.-->
534
  <!--  </span>-->
535
  Are you sure you want to proceed?
536
</modal-alert>
537
<!--<modal-alert #deleteNumberSectionModal (alertOutput)="deleteSection('number')">
538
  You are about to delete this section and its indicators permanently.
539
  Are you sure you want to proceed?
540
</modal-alert>
541
<modal-alert #deleteChartSectionModal (alertOutput)="deleteSection()">
542
  You are about to delete this section and its indicators permanently.
543
  Are you sure you want to proceed?
544
</modal-alert>-->
545
<ng-template #visibilityOptions let-indicator="indicator" let-sectionId="sectionId">
546
   <span class="uk-position-top-left uk-margin-small-left uk-margin-small-top clickable visibility">
547
      <span class="clickable color">
548
          <icon [name]="stakeholderUtils.visibilityIcon.get(indicator.visibility)"></icon>
549
        </span>
550
      <div #element uk-dropdown="mode: click; pos: bottom-left; delay-hide: 0; flip: false">
551
        <ul class="uk-nav uk-dropdown-nav">
552
          <li *ngFor="let v of stakeholderUtils.visibility" class="uk-position-relative">
553
            <a *ngIf="indicator.visibility != v.value"
554
               (click)="$event.stopPropagation();changeIndicatorStatus(sectionId, indicator,v.value);hide(element);$event.preventDefault()">
555
                <icon [name]="stakeholderUtils.visibilityIcon.get(v.value)" ratio="0.8"></icon>
556
                <span> {{v.label}}</span>
557
            </a>
558
            <a *ngIf="indicator.visibility == v.value">
559
              <icon [name]="stakeholderUtils.visibilityIcon.get(v.value)" [ratio]="0.8"></icon>
560
              <span> {{v.label}}</span>
561
              <span class="uk-position-center-right">
562
                <icon customClass="uk-text-secondary" [ratio]="0.5" name="bullet"></icon>
563
              </span>
564
            </a>
565
          </li>
566
        </ul>
567
      </div>
568
   </span>
569
</ng-template>
570
<ng-template #new_section let-type="type">
571
  <div class="new-section uk-margin-large-top">
572
    <div class="tools uk-flex uk-flex-middle clickable" (click)="createSection(-1, type)">
573
      <button class="uk-margin-small-right uk-icon-button uk-button-secondary">
574
        <icon name="add" [ratio]="1.5"></icon>
575
      </button>
576
      <span>Create a new section</span>
577
    </div>
578
  </div>
579
</ng-template>
580
<ng-template #description let-indicator="indicator">
581
<span class="descriptionIcon"
582
      *ngIf="(indicator.description && indicator.description.length > 0)
583
                       || (indicator.additionalDescription && indicator.additionalDescription.length > 0)"
584
      uk-icon="info"
585
      [attr.uk-tooltip]="'title:<div class=\'uk-padding-small\'>'+
586
  (indicator.description&& indicator.description.length > 0?indicator.description:'') +'<br>'+
587
(indicator.additionalDescription && indicator.additionalDescription.length?indicator.additionalDescription:'')
588
  +'</div>'">
589
  </span>
590
</ng-template>
(2-2/7)