Revision 57812
Added by Argiro Kokogiannaki over 4 years ago
| monitor.component.html | ||
|---|---|---|
| 3 | 3 |
<div class=""> |
| 4 | 4 |
<div id="header_menu" class="uk-width-1-1"> |
| 5 | 5 |
<nav class="uk-navbar"> |
| 6 |
|
|
| 6 | 7 |
<div class="uk-navbar-left"> |
| 8 |
<img class="large-badge" |
|
| 9 |
src="assets/theme-assets/prototype_flag.svg" |
|
| 10 |
alt="BETA"> |
|
| 7 | 11 |
<a *ngIf="stakeholder" class="uk-logo uk-navbar-item ng-star-inserted uk-link uk-margin-small-top" |
| 8 | 12 |
routerlink="/" |
| 9 | 13 |
routerlinkactive="uk-link" href="/"> |
| ... | ... | |
| 14 | 18 |
</a> |
| 15 | 19 |
<div class="uk-margin-large-left uk-width-medium ng-star-inserted"> |
| 16 | 20 |
<div class=""> |
| 17 |
<!-- <form class="uk-search uk-search-default uk-width-1-1 "> |
|
| 18 |
<a |
|
| 19 |
class="uk-search-icon-flip uk-icon uk-search-icon" routerlinkactive="uk-link" uk-search-icon="" |
|
| 20 |
> |
|
| 21 |
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" |
|
| 22 |
data-svg="search-icon"> |
|
| 23 |
<circle fill="none" stroke="#000" stroke-width="1.1" cx="9" cy="9" r="7"></circle> |
|
| 24 |
<path fill="none" stroke="#000" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path> |
|
| 25 |
</svg> |
|
| 26 |
</a><input aria-describedby="sizing-addon2" class="uk-search-input " |
|
| 27 |
name="keyword" type="search" placeholder="Search for..."></form>--> |
|
| 28 |
<div dashboard-input label="Search for..." [formInput]="keyword"></div> |
|
| 21 |
<!-- <div dashboard-input label="Search for..." [formInput]="keyword"></div>--> |
|
| 29 | 22 |
</div> |
| 30 | 23 |
</div> |
| 31 | 24 |
</div> |
| 32 | 25 |
|
| 33 | 26 |
<div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="uk-navbar-right uk-margin-right"> |
| 34 |
<ul class="uk-navbar-nav"> |
|
| 27 |
<!--<ul class="uk-navbar-nav">
|
|
| 35 | 28 |
<li class="uk-active"> |
| 36 | 29 |
<a class="uk-margin-remove-bottom "><span>Monitor</span></a> |
| 37 | 30 |
</li> |
| ... | ... | |
| 42 | 35 |
<a class="uk-margin-remove-bottom ">Help</a> |
| 43 | 36 |
</li> |
| 44 | 37 |
|
| 45 |
</ul> |
|
| 38 |
</ul>-->
|
|
| 46 | 39 |
</div> |
| 47 | 40 |
</nav> |
| 48 | 41 |
</div> |
| ... | ... | |
| 91 | 84 |
[(ngModel)]="endYear"> |
| 92 | 85 |
<button class="uk-button uk-button-primary" (click)="setIndicators()">Apply</button> |
| 93 | 86 |
</div>--> |
| 94 |
<h4 class="uk-margin uk-margin-top uk-text-bold">Indicators</h4> |
|
| 87 |
<h4 *ngIf="activeSubCategory.numbers.length > 0 ||activeSubCategory.charts.length > 0; else noIndicators " |
|
| 88 |
class="uk-margin uk-margin-top uk-text-bold">Indicators |
|
| 89 |
</h4> |
|
| 90 |
<ng-template #noIndicators> |
|
| 91 |
|
|
| 92 |
<div class=""> |
|
| 93 |
<div class=""> |
|
| 94 |
<div class="uk-h3"> |
|
| 95 |
No indicators available yet. Stay tuned! |
|
| 96 |
</div> |
|
| 97 |
</div> |
|
| 98 |
</div> |
|
| 99 |
<div *ngIf="activeSubCategory.description && activeSubCategory.description.length > 0 || |
|
| 100 |
activeCategory.description && activeCategory.description.length > 0 || |
|
| 101 |
activeTopic.description && activeTopic.description.length > 0" |
|
| 102 |
class=""> |
|
| 103 |
<div class=""> |
|
| 104 |
<div class="uk-h5"> |
|
| 105 |
{{activeSubCategory.description && activeSubCategory.description.length > 0 ? activeSubCategory.description
|
|
| 106 |
:(activeCategory.description && activeCategory.description.length > 0 ? activeCategory.description : |
|
| 107 |
(activeTopic.description && activeTopic.description.length > 0 ? activeTopic.description : ""))}} |
|
| 108 |
</div> |
|
| 109 |
</div> |
|
| 110 |
</div> |
|
| 111 |
</ng-template> |
|
| 95 | 112 |
<div class="uk-grid uk-grid-medium uk-margin-bottom" uk-height-match="target: div.md-card"> |
| 113 |
|
|
| 96 | 114 |
<ng-template ngFor [ngForOf]="activeSubCategory.numbers" let-number let-i="index"> |
| 97 | 115 |
<div *ngIf="number.isActive && number.isPublic" |
| 98 | 116 |
[class.uk-width-1-3@m]="number.width === 'small'" |
| ... | ... | |
| 110 | 128 |
</div> |
| 111 | 129 |
</ng-template> |
| 112 | 130 |
</div> |
| 113 |
<div class="uk-grid uk-grid-medium uk-margin-bottom" uk-height-match="target: div > div > h5"> |
|
| 131 |
<div class="uk-grid uk-grid-medium uk-margin-bottom uk-flex uk-flex-bottom " |
|
| 132 |
uk-height-match="target: div > div > .chartTitle"> |
|
| 114 | 133 |
<ng-template ngFor [ngForOf]="activeSubCategory.charts" let-chart let-i="index"> |
| 115 | 134 |
<div *ngIf="chart.isActive && chart.isPublic && chartsActiveType.get(i)" |
| 116 | 135 |
[class.uk-width-1-3@m]="chart.width === 'small'" |
| 117 | 136 |
[class.uk-width-1-2@m]="chart.width === 'medium'" |
| 118 | 137 |
[class.uk-width-1-1]="chart.width === 'large'"> |
| 119 |
<div> |
|
| 120 |
<h5 class="uk-margin-bottom uk-margin-top">{{chart.name}}</h5>
|
|
| 121 |
<div class="md-card" |
|
| 122 |
[attr.uk-tooltip]="chart.description"> |
|
| 138 |
<div class="indicatorBox"> |
|
| 139 |
|
|
| 140 |
<h4 class="uk-margin-bottom uk-margin-top chartTitle uk-flex uk-flex-bottom "> |
|
| 141 |
<div>{{chart.name + " "}}</div>
|
|
| 142 |
</h4> |
|
| 143 |
<div class="md-card" [attr.uk-tooltip]="chart.description"> |
|
| 123 | 144 |
<div class="md-card-content uk-text-center"> |
| 124 | 145 |
<div *ngIf="chart.indicatorPaths.length > 1" class="uk-button-group"> |
| 125 | 146 |
<button *ngFor="let indicatorPath of chart.indicatorPaths;" |
| ... | ... | |
| 129 | 150 |
{{indicatorPath.type}}
|
| 130 | 151 |
</button> |
| 131 | 152 |
</div> |
| 132 |
<iframe *ngIf="chartsActiveType.get(i).source !== 'fake'"
|
|
| 153 |
<iframe *ngIf="chartsActiveType.get(i).source !== 'image'"
|
|
| 133 | 154 |
[src]="chartsActiveType.get(i).safeResourceUrl" |
| 134 | 155 |
class="uk-width-1-1 uk-height-medium"></iframe> |
| 135 | 156 |
<!-- {{chartsActiveType.get(i).safeResourceUrl}}-->
|
| 136 |
<img *ngIf="chartsActiveType.get(i).source === 'fake'"
|
|
| 157 |
<img *ngIf="chartsActiveType.get(i).source === 'image'"
|
|
| 137 | 158 |
[src]="chartsActiveType.get(i).safeResourceUrl" |
| 138 | 159 |
class="uk-width-1-1 uk-height-medium"> |
| 139 | 160 |
</div> |
| ... | ... | |
| 145 | 166 |
</div> |
| 146 | 167 |
</div> |
| 147 | 168 |
</div> |
| 169 |
<a id="style_switcher" class="" routerLinkActive="active" |
|
| 170 |
[routerLink]="['/admin', this.stakeholder.alias]"> |
|
| 171 |
<div id="style_switcher_toggle"><i class="material-icons"></i></div> |
|
| 172 |
</a> |
|
| 148 | 173 |
</div> |
| 174 |
|
|
| 175 |
|
|
Also available in: Unified diff
Funder page:
add message when there are no indicators & description
hide search & menu items
match height for indicators: title & frame stays at the bottom
add link to admin
add prototype badge
Indicator Creator:
add more categories