Project

General

Profile

« Previous | Next » 

Revision 57697

Added by Konstantinos Triantafyllou over 4 years ago

[Monitor Dashboard]: 1. Change inputs to materials. 2. Add fonts. 3. Add uikit.js on index 4. Add reorder functionality on indicators. 5. Fix height of header to 70px

View differences:

indicators.component.html
1 1 
<div id="page_content" click-outside-or-esc targetId="page_content" [escClose]="false"
2 2 
     (clickOutside)="toggleOpen($event)">
3 3 
  <div class="uk-padding-small md-bg-white" uk-grid>
4 
    <div class="uk-width-2-3@m uk-width-1-1 uk-child-width-1-3@m uk-child-width-1-1" uk-grid>
5 
      <div class="uk-flex uk-flex-middle">
6 
        <label>Chart Type:</label>
7 
        <select class="uk-select uk-form-small uk-margin-small-left"
8 
                (ngModelChange)="onChartTypeChange($event)"
9 
                [(ngModel)]="chartType">
10 
          <option [value]="'all'">All</option>
11 
          <option [value]="'pie'">Pie</option>
12 
          <option [value]="'table'">Table</option>
13 
          <option [value]="'line'">Line</option>
14 
          <option [value]="'column'">Column</option>
15 
          <option [value]="'bar'">Bar</option>
16 
        </select>
4 
    <div *ngIf="filters" class="uk-width-2-3@m uk-width-1-1 uk-child-width-1-3@m uk-child-width-1-1" uk-grid>
5 
      <div>
6 
        <div dashboard-input [formInput]="filters.get('chartType')"
7 
             type="select" [options]="[all].concat(indicatorUtils.chartTypes)"
8 
             label="Chart Type"></div>
17 9 
      </div>
18 
      <div class="uk-flex uk-flex-middle">
19 
        <label>Privacy:</label>
20 
        <select class="uk-select uk-form-small uk-margin-small-left"
21 
                (ngModelChange)="onPrivacyChange($event)"
22 
                [(ngModel)]="privacy">
23 
          <option [value]="'all'">All</option>
24 
          <option [value]="'public'">Public</option>
25 
          <option [value]="'private'">Private</option>
26 
        </select>
10 
      <div>
11 
        <div dashboard-input [formInput]="filters.get('privacy')"
12 
             type="select" [options]="[all].concat(indicatorUtils.isPublic)"
13 
             label="Privacy"></div>
27 14 
      </div>
28 
      <div class="uk-flex uk-flex-middle">
29 
        <label>Status:</label>
30 
        <select class="uk-select uk-form-small uk-margin-small-left"
31 
                (ngModelChange)="onStatusChange($event)"
32 
                [(ngModel)]="status">
33 
          <option [value]="'all'">All</option>
34 
          <option [value]="'active'">Active</option>
35 
          <option [value]="'inactive'">Inactive</option>
36 
        </select>
15 
      <div>
16 
        <div dashboard-input [formInput]="filters.get('status')"
17 
             type="select" [options]="[all].concat(indicatorUtils.isActive)"
18 
             label="Status"></div>
37 19 
      </div>
38 20 
    </div>
39 21 
    <div class="uk-width-expand@m uk-width-1-1 uk-flex uk-flex-middle uk-flex-right">
40 
      <div class="uk-inline">
41 
        <span class="uk-form-icon uk-form-icon-flip"><i class="material-icons">search</i></span>
42 
        <input (ngModelChange)="onKeywordChange($event)"
43 
               [(ngModel)]="keyword"
44 
               class="uk-input uk-form-small" placeholder="Locate indicator..">
22 
      <div class="uk-inline uk-width-medium">
23 
        <span class="uk-position-center-right"><i class="material-icons">search</i></span>
24 
        <div dashboard-input [formInput]="filters.get('keyword')" label="Locate indicator"></div>
45 25 
      </div>
46 26 
      <div [class.uk-active]="grid" class="uk-margin-small-left">
47 27 
        <a [routerLink]="" class="uk-icon-button" (click)="changeGrid(true)"><i
......
74 54 
    <div [class.uk-child-width-1-3@m]="grid"
75 55 
         [class.uk-child-width-1-2@s]="grid"
76 56 
         [class.uk-child-width-1-1]="!grid"
77 
         [class.list]="!grid" id="numbers"
57 
         [class.list]="!grid" id="number"
78 58 
         class="uk-grid-match uk-grid-small"
79 59 
         uk-sortable uk-grid>
80 60 
      <ng-template ngFor [ngForOf]="displayNumbers" let-indicator let-i="index">
81 
        <div *ngIf="indicator" [id]="i">
61 
        <div *ngIf="indicator" [id]="indicator._id">
82 62 
          <div class="md-card" [class.uk-sortable-nodrag]="!canNumbersReorder">
83 63 
            <div class="md-card-toolbar">
84 64 
              <div class="md-card-toolbar-actions" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
......
92 72 
                     [class.md-color-green-300]="indicator.isActive">{{indicatorUtils.isActiveIcon}}</i>
93 73 
                  {{(indicator.isActive) ? 'Active' : 'Inactive'}}
94 74 
                </span>
95 
                <i class="md-icon material-icons">more_vert</i>
75 
                <div class="md-card-dropdown uk-inline">
76 
                  <i class="md-icon material-icons">more_vert</i>
77 
                  <div uk-dropdown="mode: click; pos: bottom-right" class="uk-padding-remove-horizontal">
78 
                    <ul class="uk-nav uk-dropdown-nav">
79 
                      <li><a (click)="editIndicatorOpen(i)">Edit</a></li>
80 
                      <li><a (click)="deleteIndicatorOpen(i, 'number')">Delete</a></li>
81 
                    </ul>
82 
                  </div>
83 
                </div>
96 84 
              </div>
97 85 
              <div class="md-card-toolbar-heading-text">{{indicator.name}}</div>
98 86 
            </div>
......
120 108 
    <div [class.uk-child-width-1-3@m]="grid"
121 109 
         [class.uk-child-width-1-2@s]="grid"
122 110 
         [class.uk-child-width-1-1]="!grid"
123 
         [class.list]="!grid" id="charts"
111 
         [class.list]="!grid" id="chart"
124 112 
         class="uk-grid-match uk-grid-small uk-grid"
125 113 
         uk-sortable uk-grid>
126 114 
      <ng-template ngFor [ngForOf]="displayCharts" let-indicator let-i="index">
127 
        <div *ngIf="indicator" [id]="i">
115 
        <div *ngIf="indicator" [id]="indicator._id">
128 116 
          <div class="md-card" [class.uk-sortable-nodrag]="!canChartsReorder">
129 117 
            <div class="md-card-toolbar">
130 118 
              <div class="md-card-toolbar-actions" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
......
150 138 
                  </i>
151 139 
                  {{(indicator.isActive) ? 'Active' : 'Inactive'}}
152 140 
                </span>
153 
                <i class="md-icon material-icons" (click)="editIndicatorOpen(i)">more_vert</i>
141 
                <div class="md-card-dropdown uk-inline">
142 
                  <i class="md-icon material-icons">more_vert</i>
143 
                  <div uk-dropdown="mode: click; pos: bottom-right" class="uk-padding-remove-horizontal">
144 
                    <ul class="uk-nav uk-dropdown-nav">
145 
                      <li><a (click)="editIndicatorOpen(i)">Edit</a></li>
146 
                      <li><a (click)="deleteIndicatorOpen(i)">Delete</a></li>
147 
                    </ul>
148 
                  </div>
149 
                </div>
154 150 
              </div>
155 151 
              <div class="md-card-toolbar-heading-text">{{indicator.name}}</div>
156 152 
            </div>
......
185 181 
          </div>
186 182 
        </div>
187 183 
      </ng-template>
188 
      <div>
184 
      <div class="disable-sortable">
189 185 
        <div class="md-card clickable uk-sortable-nodrag" (click)="createIndicatorOpen()">
190 186 
          <div class="md-card-toolbar">
191 187 
            <div class="md-card-toolbar-heading-text"
......
299 295 
    </div>
300 296 
  </div>
301 297 
</modal-alert>
298 
<modal-alert #deleteIndicatorModal (alertOutput)="deleteIndicator()"></modal-alert>

Also available in: Unified diff