Project

General

Profile

1
<div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
2
  <div class="uk-width-1-1@m uk-first-column">
3

    
4
    <h1 class="uk-h2">Previous validations</h1>
5

    
6
    <!-- TOP HELP CONTENT -->
7
    <!--    <help-content #topHelperContent [position]="'top'"
8
                      [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
9
        </help-content>-->
10

    
11
    <div class="uk-container uk-margin-medium-top uk-margin-medium-bottom">
12
      <div class="uk-grid">
13

    
14
        <!-- LEFT HELP CONTENT -->
15
        <!--        <aside-help-content #leftHelperContent [position]="'left'"
16
                                    [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
17
                </aside-help-content>-->
18

    
19
        <!-- MIDDLE -->
20
        <div class=" uk-width-expand@m">
21

    
22
          <div *ngIf="successMessage" class="uk-alert uk-alert-success">{{ successMessage }}</div>
23
          <div *ngIf="failureMessage" class="uk-alert uk-alert-danger">{{ failureMessage }}</div>
24
          <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{ errorMessage }}</div>
25
          <div *ngIf="loadingMessage" class="loading-big">
26
            <div class="loader-big"
27
                 style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">
28
              {{ loadingMessage }}
29
            </div>
30
            <div class="whiteFilm"></div>
31
          </div>
32
          <div *ngIf="jobsOfUser">
33
            <div class="uk-grid page-controls">
34
              <div class="uk-margin-bottom uk-width-1-1 filters">
35
                <div class="links">
36
                  <div class="filterLabel">Filter by job type:</div>
37
                  <div class="inlineBlock">
38
                    <select class="form-control" #selectType (change)="getJobType(selectType.value)">
39
                      <option value="noneSelected">--none selected--</option>
40
                      <option *ngFor="let type of jobTypes" value="{{type}}">{{type}}</option>
41
                    </select>
42
                  </div>
43
                </div>
44
              </div>
45
              <div class="uk-margin-bottom uk-width-1-1 filters">
46
                <div class="links uk-inline">
47
                  <div class="filterLabel" style="display: inline;">Filter validation jobs:</div>
48
                  <a class="uk-active"
49
                     [class.active]="currentFilter==='all'"
50
                     (click)="filterJobs('all')">All jobs ({{this.jobsOfUser.totalJobs}})</a>
51
                  <a class="uk-active"
52
                     [class.active]="currentFilter==='successful'"
53
                     (click)="filterJobs('successful')">successful ({{this.jobsOfUser.totalJobsSuccessful}})</a>
54
                  <a class="uk-active"
55
                     [class.active]="currentFilter==='failed'"
56
                     (click)="filterJobs('failed')">failed ({{this.jobsOfUser.totalJobsFailed}})</a>
57
                  <a class="uk-active"
58
                     [class.active]="currentFilter==='ongoing'"
59
                     (click)="filterJobs('ongoing')">ongoing ({{this.jobsOfUser.totalJobsOngoing}})</a>
60
                </div>
61
                <div class="show-options uk-inline" style="float: right;">
62
                  <div class="filterLabel" style="display: inline;">Jobs per page:</div>
63
                  <div class="inlineBlock">
64
                    <select #itemsPerPage class="form-control" (change)="getItemsPerPage(itemsPerPage.value)">
65
                      <option value="10" selected>10</option>
66
                      <option value="25">25</option>
67
                      <option value="50">50</option>
68
                      <option value="100">100</option>
69
                    </select>
70
                  </div>
71
                </div>
72
              </div>
73
            </div>
74
            <div class="contentAndPagerPanel">
75
              <div>
76
                <ul class="uk-pagination">
77
                  <li>
78
                    <a class="uk-link uk-link-muted" (click)="goToPreviousPage()">
79
                      <span class="uk-margin-small-right uk-pagination-previous uk-icon" uk-pagination-previous="">
80
                        <svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"
81
                             icon="pagination-previous" ratio="1"></svg>
82
                      </span>
83
                      Previous
84
                    </a>
85
                  </li>
86
                  <li class="uk-margin-auto-left">
87
                    <a class="uk-link uk-link-muted" (click)="goToNextPage()">
88
                      Next
89
                      <span class="uk-margin-small-left uk-pagination-next uk-icon" uk-pagination-next="">
90
                        <svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"
91
                             icon="pagination-next" ratio="1"></svg>
92
                      </span>
93
                    </a>
94
                  </li>
95
                </ul>
96
                <div class="resultsPageLabel">page {{ currentPage+1 }} of {{ totalPages }}</div>
97
              </div>
98
              <div>
99
                <div>
100
                  <div
101
                    class="uk-overflow-auto uk-scrollspy-inview uk-animation-slide-top-medium uk-margin-top uk-margin-bottom">
102
                    <table class="uk-table uk-table-middle uk-table-striped" style="vertical-align: top !important;">
103
                      <thead>
104
                      <tr>
105
                        <th>Repository</th>
106
                        <th>Validation Type</th>
107
                        <th>Status</th>
108
                        <th>Score</th>
109
                        <th>Started</th>
110
                        <th>Guidelines</th>
111
                        <th>Actions</th>
112
                        <th></th>
113
                      </tr>
114
                      </thead>
115
                      <div *ngIf="infoMessage" class="uk-alert">{{ infoMessage }}</div>
116
                      <tbody *ngIf="jobsOfUser && jobsOfUser.jobs">
117
                      <tr class="el-item" *ngFor="let job of jobsOfUser.jobs">
118
                        <td class="uk-table-shrink" style="vertical-align: top !important;">
119
                          <div class="el-title">{{ job.baseUrl }}</div>
120
                        </td>
121
                        <td class="uk-table-shrink">
122
                          <div class="el-title">OAI Content<br>OAI Usage</div>
123
                        </td>
124
                        <td class="uk-table-shrink">
125
                          <div class="el-title">{{ job.contentJobStatus }}<br>{{ job.usageJobStatus }}</div>
126
                        </td>
127
                        <td class="uk-table-shrink">
128
                          <div class="el-title">{{ job.contentJobScore }}<br>{{ job.usageJobScore }}</div>
129
                        </td>
130
                        <td class="uk-table-shrink" style="vertical-align: top !important;">
131
                          <div class="el-title">{{ job.started }}</div>
132
                        </td>
133
                        <td class="uk-table-shrink" style="vertical-align: top !important;">
134
                          <div class="el-title">{{ job.guidelinesShortName }}</div>
135
                        </td>
136
                        <td class="uk-table-shrink" style="vertical-align: top !important;">
137
                          <div class="el-link actions">
138
                            <div class="viewDetailsLinkWrapper">
139
                              <a class="viewDetails" [routerLink]="[job.id]">View Results<i
140
                                class="fa fa-angle-right"></i></a>
141
                            </div>
142
                            <div>
143
                              <a class="resubmitJob" (click)="resubmitJob(job.id)">Resubmit Job<i
144
                                class="fa fa-repeat"></i></a>
145
                            </div>
146
                          </div>
147
                        </td>
148
                        <td class="uk-table-shrink" style="vertical-align: top !important;">
149
                          <img src="{{ getResultImage(job.ended,job.error) }}" width="20" height="20">
150
                        </td>
151
                      </tr>
152
                      </tbody>
153
                    </table>
154
                  </div>
155
                </div>
156
              </div>
157
              <div>
158
                <ul class="uk-pagination">
159
                  <li>
160
                    <a class="uk-link uk-link-muted" (click)="goToPreviousPage()">
161
                    <span class="uk-margin-small-right uk-pagination-previous uk-icon" uk-pagination-previous="">
162
                      <svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"
163
                           icon="pagination-previous" ratio="1"></svg>
164
                    </span>
165
                      Previous
166
                    </a>
167
                  </li>
168
                  <li class="uk-margin-auto-left">
169
                    <a class="uk-link uk-link-muted" (click)="goToNextPage()">
170
                      Next
171
                      <span class="uk-margin-small-left uk-pagination-next uk-icon" uk-pagination-next="">
172
                        <svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"
173
                             icon="pagination-next" ratio="1"></svg>
174
                      </span>
175
                    </a>
176
                  </li>
177
                </ul>
178
                <div class="resultsPageLabel">page {{ currentPage+1 }} of {{ totalPages }}</div>
179
              </div>
180
            </div>
181
            <div class="row"></div>
182
          </div>
183

    
184
        </div>
185

    
186
        <!-- RIGHT HELP CONTENT -->
187
        <aside-help-content #rightHelperContent [position]="'right'"
188
                            [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
189
        </aside-help-content>
190

    
191
      </div>
192
    </div>
193

    
194

    
195
    <!-- BOTTOM HELP CONTENT -->
196
    <help-content #bottomHelperContent [position]="'bottom'"
197
                  [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
198
    </help-content>
199

    
200

    
201
  </div>
202
</div>
203

    
204
<!--   *** OLD HTML ***
205

    
206

    
207
<div class="uk-grid uk-grid-stack">
208
  <div class="uk-width-expand@m uk-first-column">
209
    <div class="uk-margin-medium-bottom">
210
      <h1 class="uk-article-title">Previous validations</h1>
211
    </div>
212
    <div *ngIf="successMessage" class="uk-alert uk-alert-success">{{ successMessage }}</div>
213
    <div *ngIf="failureMessage" class="uk-alert uk-alert-danger">{{ failureMessage }}</div>
214
    <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{ errorMessage }}</div>
215
    <div *ngIf="loadingMessage" class="loading-big">
216
      <div class="loader-big"
217
           style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">
218
        {{ loadingMessage }}
219
      </div>
220
      <div class="whiteFilm"></div>
221
    </div>
222
    <div *ngIf="jobsOfUser">
223
      <div class="uk-grid page-controls">
224
        <div class="uk-margin-bottom uk-width-1-1 filters">
225
          <div class="links">
226
            <div class="filterLabel">Filter by job type:</div>
227
            <div class="inlineBlock">
228
              <select class="form-control" #selectType (change)="getJobType(selectType.value)">
229
                <option value="noneSelected">&#45;&#45;none selected&#45;&#45;</option>
230
                <option *ngFor="let type of jobTypes" value="{{type}}">{{type}}</option>
231
              </select>
232
            </div>
233
          </div>
234
        </div>
235
        <div class="uk-margin-bottom uk-width-1-1 filters">
236
          <div class="links uk-inline">
237
            <div class="filterLabel" style="display: inline;">Filter validation jobs:</div>
238
            <a class="uk-active"
239
               [class.active]="currentFilter==='all'"
240
               (click)="filterJobs('all')">All jobs ({{this.jobsOfUser.totalJobs}})</a>
241
            <a class="uk-active"
242
               [class.active]="currentFilter==='successful'"
243
               (click)="filterJobs('successful')">successful ({{this.jobsOfUser.totalJobsSuccessful}})</a>
244
            <a class="uk-active"
245
               [class.active]="currentFilter==='failed'"
246
               (click)="filterJobs('failed')">failed ({{this.jobsOfUser.totalJobsFailed}})</a>
247
            <a class="uk-active"
248
               [class.active]="currentFilter==='ongoing'"
249
               (click)="filterJobs('ongoing')">ongoing ({{this.jobsOfUser.totalJobsOngoing}})</a>
250
          </div>
251
          <div class="show-options uk-inline" style="float: right;">
252
            <div class="filterLabel" style="display: inline;">Jobs per page:</div>
253
            <div class="inlineBlock">
254
              <select #itemsPerPage class="form-control" (change)="getItemsPerPage(itemsPerPage.value)">
255
                <option value="10" selected>10</option>
256
                <option value="25">25</option>
257
                <option value="50">50</option>
258
                <option value="100">100</option>
259
              </select>
260
            </div>
261
          </div>
262
        </div>
263
      </div>
264
      <div class="contentAndPagerPanel">
265
        <div>
266
          <ul class="uk-pagination">
267
            <li>
268
              <a class="uk-link uk-link-muted" (click)="goToPreviousPage()">
269
                <span class="uk-margin-small-right uk-pagination-previous uk-icon" uk-pagination-previous="">
270
                  <svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"
271
                       icon="pagination-previous" ratio="1"></svg>
272
                </span>
273
                Previous
274
              </a>
275
            </li>
276
            <li class="uk-margin-auto-left">
277
              <a class="uk-link uk-link-muted" (click)="goToNextPage()">
278
                Next
279
                <span class="uk-margin-small-left uk-pagination-next uk-icon" uk-pagination-next="">
280
                  <svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"
281
                       icon="pagination-next" ratio="1"></svg>
282
                </span>
283
              </a>
284
            </li>
285
          </ul>
286
          <div class="resultsPageLabel">page {{ currentPage+1 }} of {{ totalPages }}</div>
287
        </div>
288
        <div>
289
          <div>
290
            <div
291
              class="uk-overflow-auto uk-scrollspy-inview uk-animation-slide-top-medium uk-margin-top uk-margin-bottom">
292
              <table class="uk-table uk-table-middle uk-table-striped" style="vertical-align: top !important;">
293
                <thead>
294
                <tr>
295
                  <th>Repository</th>
296
                  <th>Validation Type</th>
297
                  <th>Status</th>
298
                  <th>Score</th>
299
                  <th>Started</th>
300
                  <th>Guidelines</th>
301
                  <th>Actions</th>
302
                  <th></th>
303
                </tr>
304
                </thead>
305
                <div *ngIf="infoMessage" class="uk-alert">{{ infoMessage }}</div>
306
                <tbody *ngIf="jobsOfUser && jobsOfUser.jobs">
307
                <tr class="el-item" *ngFor="let job of jobsOfUser.jobs">
308
                  <td class="uk-table-shrink" style="vertical-align: top !important;">
309
                    <div class="el-title">{{ job.baseUrl }}</div>
310
                  </td>
311
                  <td class="uk-table-shrink">
312
                    <div class="el-title">OAI Content<br>OAI Usage</div>
313
                  </td>
314
                  <td class="uk-table-shrink">
315
                    <div class="el-title">{{ job.contentJobStatus }}<br>{{ job.usageJobStatus }}</div>
316
                  </td>
317
                  <td class="uk-table-shrink">
318
                    <div class="el-title">{{ job.contentJobScore }}<br>{{ job.usageJobScore }}</div>
319
                  </td>
320
                  <td class="uk-table-shrink" style="vertical-align: top !important;">
321
                    <div class="el-title">{{ job.started }}</div>
322
                  </td>
323
                  <td class="uk-table-shrink" style="vertical-align: top !important;">
324
                    <div class="el-title">{{ job.guidelinesShortName }}</div>
325
                  </td>
326
                  <td class="uk-table-shrink" style="vertical-align: top !important;">
327
                    <div class="el-link actions">
328
                      <div class="viewDetailsLinkWrapper">
329
                        <a class="viewDetails" [routerLink]="[job.id]">View Results<i class="fa fa-angle-right"></i></a>
330
                      </div>
331
                      <div>
332
                        <a class="resubmitJob" (click)="resubmitJob(job.id)">Resubmit Job<i
333
                          class="fa fa-repeat"></i></a>
334
                      </div>
335
                    </div>
336
                  </td>
337
                  <td class="uk-table-shrink" style="vertical-align: top !important;">
338
                    <img src="{{ getResultImage(job.ended,job.error) }}" width="20" height="20">
339
                  </td>
340
                </tr>
341
                </tbody>
342
              </table>
343
            </div>
344
          </div>
345
        </div>
346
        <div>
347
          <ul class="uk-pagination">
348
            <li>
349
              <a class="uk-link uk-link-muted" (click)="goToPreviousPage()">
350
                <span class="uk-margin-small-right uk-pagination-previous uk-icon" uk-pagination-previous="">
351
                  <svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"
352
                       icon="pagination-previous" ratio="1"></svg>
353
                </span>
354
                Previous
355
              </a>
356
            </li>
357
            <li class="uk-margin-auto-left">
358
              <a class="uk-link uk-link-muted" (click)="goToNextPage()">
359
                Next
360
                <span class="uk-margin-small-left uk-pagination-next uk-icon" uk-pagination-next="">
361
                  <svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"
362
                       icon="pagination-next" ratio="1"></svg>
363
                </span>
364
              </a>
365
            </li>
366
          </ul>
367
          <div class="resultsPageLabel">page {{ currentPage+1 }} of {{ totalPages }}</div>
368
        </div>
369
      </div>
370
      <div class="row"></div>
371
    </div>
372
  </div>
373
</div>
374
-->
(9-9/15)