Project

General

Profile

« Previous | Next » 

Revision 60004

Added by Konstantinos Triantafyllou over 3 years ago

[Monitor Dashboard | Trunk]: Some UI changes

View differences:

indicators.component.html
43 43 
        </div>
44 44 
        <ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
45 45 
          <div *ngIf="indicator" [id]="indicator._id"
46 
               [class.uk-width-1-5@m]="indicator.width === 'small'"
47 
               [class.uk-width-1-3@m]=" indicator.width === 'medium'"
48 
               [class.uk-width-1-2@m]=" indicator.width === 'large'"
46 
               [ngClass]="getNumberClassBySize(indicator.width)"
49 47 
               [class.disable-sortable]="!canReorder"
50 48 
               [class.uk-sortable-nodrag]="!canReorder">
51 49 
            <div class="uk-card uk-card-default uk-card-body uk-position-relative" [class.uk-card-hover]="canReorder">
......
81 79 
                <h3 *ngIf="numberResults.get(i + '-' + j)" class="uk-margin-medium-top uk-text-center uk-text-bold">
82 80 
                  <span>{{numberResults.get(i + '-' + j) | number}}</span>
83 81 
                </h3>
84 
                <ng-container *ngTemplateOutlet="description; context: {indicator:indicator}"></ng-container>
82 
                <!--<ng-container *ngTemplateOutlet="description; context: {indicator:indicator}"></ng-container>-->
85 83 
              </div>
86 84 
            </div>
87 85 
          </div>
88 86 
        </ng-template>
89 87 
        <div class="disable-sortable uk-sortable-nodrag uk-width-1-1">
90 
          <div class="uk-width-1-3@l uk-width-1-2@m uk-width-1-1 uk-card uk-card-default uk-card-body clickable"
91 
               (click)="editNumberIndicatorOpen(number)">
92 
            <div>
93 
              <h5 class="uk-text-bold">
94 
                Create a new number Indicator
95 
              </h5>
96 
              <div class="uk-flex uk-flex-center uk-text-secondary uk-margin-large">
97 
                <icon name="add" ratio="5"></icon>
88 
          <div class="uk-grid uk-grid-small" uk-grid>
89 
            <div class="uk-width-1-4@xl uk-width-1-3@l uk-width-1-2@m uk-width-1-1">
90 
              <div class="uk-card uk-card-default uk-card-body clickable" (click)="editNumberIndicatorOpen(number)">
91 
                <h5 class="uk-text-bold">
92 
                  Create a new number Indicator
93 
                </h5>
94 
                <div class="uk-flex uk-flex-center uk-text-secondary uk-margin-medium-top">
95 
                  <icon name="add" ratio="5"></icon>
96 
                </div>
98 97 
              </div>
99 98 
            </div>
100 99 
          </div>
......
147 146 
        </div>
148 147 
        <ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
149 148 
          <div *ngIf="indicator" [id]="indicator._id"
150 
               [class.uk-width-1-3@m]="indicator.width === 'small'"
151 
               [class.uk-width-1-2@m]=" indicator.width === 'medium'"
152 
               [class.uk-width-1-1@m]="indicator.width === 'large'"
149 
               [ngClass]="getChartClassBySize(indicator.width)"
153 150 
               [class.disable-sortable]="!canReorder"
154 151 
               [class.uk-sortable-nodrag]="!canReorder">
155 152 
            <div class="uk-card uk-card-default uk-card-body uk-position-relative" [class.uk-card-hover]="canReorder">
......
185 182 
                <iframe *ngIf="indicator.indicatorPaths[0] && indicator.indicatorPaths[0].source !== 'image' &&
186 183 
                                  safeUrls.get(indicatorUtils.getFullUrl(stakeholder, indicator.indicatorPaths[0]))"
187 184 
                        [src]="safeUrls.get(indicatorUtils.getFullUrl(stakeholder, indicator.indicatorPaths[0]))"
188 
                         [class]="' uk-width-1-1 uk-height-' +
185 
                        [class]="' uk-width-1-1 uk-height-' +
189 186 
                        (indicator.height?indicator.height.toLowerCase():'medium')"></iframe>
190 187 
                <!--                    <div>Uncomment for iframes preview</div>-->
191 188 
                <div *ngIf="indicator.indicatorPaths[0] && indicator.indicatorPaths[0].source === 'image'">
192 189 
                  <img [class]="' uk-width-1-1 uk-height-' +
193 
                        (indicator.height?indicator.height.toLowerCase():'medium')" [src]="indicator.indicatorPaths[0].url">
190 
                        (indicator.height?indicator.height.toLowerCase():'medium')"
191 
                       [src]="indicator.indicatorPaths[0].url">
194 192 
                </div>
195 
                <ng-container *ngTemplateOutlet="description; context: {indicator:indicator}"></ng-container>
193 
                <!--<ng-container *ngTemplateOutlet="description; context: {indicator:indicator}"></ng-container>-->
196 194 
              </div>
197 195 
            </div>
198 196 
          </div>
199 197 
        </ng-template>
200 198 
        <div class="disable-sortable uk-sortable-nodrag uk-width-1-1">
201 
          <div class="uk-width-1-3@l uk-width-1-2@m uk-width-1-1 uk-card uk-card-default uk-card-body clickable"
202 
               (click)="editChartIndicatorOpen(chart)">
203 
            <div>
204 
              <h5 class="uk-text-bold">
205 
                Create a custom indicator
206 
              </h5>
207 
              <div class="uk-text-muted uk-text-small">
208 
                Use our advance tool to create a custom Indicator that suit the needs of your funding
209 
                KPI's.
199 
          <div class="uk-grid uk-grid-small" uk-grid>
200 
            <div class="uk-width-1-3@xl uk-width-1-2@m uk-width-1-1">
201 
              <div class=" uk-card uk-card-default uk-card-body clickable" (click)="editChartIndicatorOpen(chart)">
202 
                <h5 class="uk-text-bold">
203 
                  Create a custom indicator
204 
                </h5>
205 
                <div class="uk-text-muted uk-text-small">
206 
                  Use our advance tool to create a custom Indicator that suit the needs of your funding
207 
                  KPI's.
208 
                </div>
209 
                <div class="uk-flex uk-flex-center uk-text-secondary uk-margin-medium-top">
210 
                  <icon name="add" ratio="5"></icon>
211 
                </div>
210 212 
              </div>
211 
              <div class="uk-flex uk-flex-center uk-text-secondary uk-margin-large">
212 
                <icon name="add" ratio="5"></icon>
213 
              </div>
214 213 
            </div>
215 214 
          </div>
216 215 
        </div>
......
267 266 
                  [class.uk-text-danger]="numberIndicatorPaths.at(i).get('result').invalid && numberIndicatorPaths.at(i).get('result').errors.required">
268 267 
                <span>JSON Path</span>
269 268 
              </h6>
270 
              <div *ngIf="numberIndicatorPaths.at(i).get('result').invalid && numberIndicatorPaths.at(i).get('result').errors.required">
269 
              <div
270 
                  *ngIf="numberIndicatorPaths.at(i).get('result').invalid && numberIndicatorPaths.at(i).get('result').errors.required">
271 271 
                <div class="uk-text-danger uk-text-small">
272 272 
                  This JSON path is not valid or the result has not been calculated yet.
273 273 
                  Please press calculate on box below to see the result.
......
302 302 
            <div class="uk-width-1-1 uk-flex uk-flex-center">
303 303 
              <div class="uk-flex uk-position-relative">
304 304 
                <span class="uk-padding number number-preview">
305 
                  <span *ngIf="numberIndicatorPaths.at(i).get('result').valid">{{numberIndicatorPaths.at(i).get('result').value | number}}</span>
305 
                  <span
306 
                      *ngIf="numberIndicatorPaths.at(i).get('result').valid">{{numberIndicatorPaths.at(i).get('result').value | number}}</span>
306 307 
                </span>
307 
                <div *ngIf="numberIndicatorPaths.at(i).get('result').invalid" class="uk-width-1-1 uk-height-1-1 refresh-indicator">
308 
                <div *ngIf="numberIndicatorPaths.at(i).get('result').invalid"
309 
                     class="uk-width-1-1 uk-height-1-1 refresh-indicator">
308 310 
                  <div class="uk-position-relative uk-height-1-1">
309 311 
                    <div class="uk-position-center uk-text-center clickable uk-text-small"
310 312 
                         (click)="validateJsonPath(i)">
......
331 333 
  <div *ngIf="chartIndicatorFb" class="uk-padding-small" [formGroup]="chartIndicatorFb">
332 334 
    <div class="uk-grid" uk-grid>
333 335 
      <div dashboard-input class="uk-width-1-1" [formInput]="chartIndicatorFb.get('name')" label="Title"></div>
334 
      <div dashboard-input class="uk-width-1-1"  *ngIf="stakeholder.defaultId !=-1 && (  (indicator.description &&
336 
      <div dashboard-input class="uk-width-1-1" *ngIf="stakeholder.defaultId !=-1 && (  (indicator.description &&
335 337 
      indicator.description.length > 0) || !stakeholder.defaultId)"
336 338 
           [formInput]="chartIndicatorFb.get('description')"
337 339 
           label="Default Description" type="textarea">

Also available in: Unified diff