Project

General

Profile

1
<div id="page_content_inner">
2
  <h2 class="heading_b uk-margin-bottom">Get usage statistics report</h2>
3

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

    
9
  <div class="uk-grid">
10

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

    
16
    <!-- MIDDLE -->
17
    <div class=" uk-width-expand@m">
18

    
19
      <div *ngIf="errorMessage" class="uk-alert uk-alert-warning">{{errorMessage}}</div>
20
      <div *ngIf="loadingMessage" class="loading-big">
21
        <div class="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">
22
          {{ loadingMessage }}
23
        </div>
24
        <div class="transparentFilm"></div>
25
      </div>
26

    
27
      <div *ngIf="repoResponse" class="md-card">
28
        <div class="md-card-content large-padding">
29

    
30
          <div class="uk-margin-bottom" data-uk-margin="">
31

    
32
            <div class="uk-grid">
33
              <div class="uk-width-4-5@m">
34
                <h3>{{ repoResponse.ReportDefinition['@Name'] }} Report Results
35
                  <!--<span *ngIf="repoResponse.Report &&-->
36
                              <!--repoResponse.Report.Report &&-->
37
                              <!--repoResponse.Report.Report.Customer &&-->
38
                              <!--repoResponse.Report.Report.Customer.ReportItems &&-->
39
                              <!--repoResponse.Report.Report.Customer.ReportItems.length > 0">for {{ repoResponse.Report.Report.Customer.ReportItems[0].ItemPlatform }}</span>-->
40
                </h3>
41
              </div>
42
              <div class="uk-width-1-5@m">
43
                <div [formGroup]="pageSizeSelect" class="md-input-wrapper md-input-filled">
44
                  <label class="">Results per page</label>
45
                  <select class="md-input" formControlName="selectPageSize" (change)="getPageSize()">
46
                    <option value="10" selected>10</option>
47
                    <option value="25">25</option>
48
                    <option value="50">50</option>
49
                    <option value="100">100</option>
50
                  </select>
51
                  <span class="md-input-bar"></span>
52
                </div>
53
              </div>
54
            </div>
55

    
56
          </div>
57

    
58
          <hr>
59

    
60
          <div class="uk-grid uk-grid-divider" data-uk-grid-margin="">
61

    
62
            <div class="uk-width-3-4@m uk-row-first">
63

    
64
              <!-- RESULTS TABLE -->
65
              <div class="uk-overflow-container">
66
                <table class="uk-table table_check" style="overflow-wrap: anywhere;">
67
                  <thead>
68
                  <tr>
69
                    <th class="uk-width-1-6" *ngIf="chosenReport !== 'RR1'">Title</th>
70
                    <th class="uk-width-1-6" *ngIf="chosenReport !== 'RR1'">Publisher</th>
71
                    <th class="uk-width-1-6" *ngIf="chosenReport === 'RR1'">Platform name</th>
72
                    <th class="uk-width-1-6">{{ (chosenReport !== 'RR1') ? 'Item Urls' : 'Url' }}</th>
73
                    <th class="uk-width-1-6">Type</th>
74
                    <th class="uk-width-1-6" colspan="2">Downloads/Views</th>
75
                    <!--<th class="uk-width-2-10">Repository</th>-->
76
                    <!--<th class="uk-width-1-10">Validation Type</th>-->
77
                    <!--<th class="uk-width-1-10">Status</th>-->
78
                    <!--<th class="uk-width-1-10">Score</th>-->
79
                    <!--<th class="uk-width-1-10">Started</th>-->
80
                    <!--<th class="uk-width-2-10">Guidelines</th>-->
81
                    <!--<th class="uk-width-1-10">Actions</th>-->
82
                    <!--<th class="uk-width-1-10"></th>-->
83
                  </tr>
84
                  </thead>
85
                  <tbody>
86
                  <tr *ngIf="infoMessage">
87
                    <td colspan="6">{{ infoMessage }}</td>
88
                  </tr>
89
                  <ng-container *ngIf="repoResponse?.Report?.Report?.Customer?.ReportItems">
90
                    <ng-container *ngFor="let item of repoResponse.Report.Report.Customer.ReportItems; let item_i = index">
91
                      <tr>
92
                        <td *ngIf="chosenReport !== 'RR1'">{{ item.ItemName }}</td>
93
                        <td *ngIf="chosenReport !== 'RR1'">{{ item.ItemPublisher }}</td>
94
                        <td *ngIf="chosenReport === 'RR1'">{{ item.ItemPlatform }}</td>
95
                        <td>
96
                          <div *ngFor="let url of transformItem(item.ItemIdentifier); let i = index" class="uk-margin-small-bottom">
97
                            <!--<br *ngIf="i>0">-->
98
                            {{ url }}
99
                          </div>
100
                        </td>
101
                        <td>{{ item.ItemDataType }}</td>
102
                        <td class="uk-text-center"
103
                            *ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Monthly'" colspan="2">
104
                          <a *ngIf="item.ItemPerformance && (item.ItemPerformance.length > 0)"
105
                             (click)="displayItemPerformance(item_i)">{{ (selectedItemIndex === item_i) ? 'Hide' : 'See' }} results</a>
106
                        </td>
107
                        <td class="uk-text-center"
108
                            *ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Totals'">
109
                          {{ item.ItemPerformance[0].Instance[0].Count }}
110
                        </td>
111
                        <td class="uk-text-center"
112
                            *ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Totals'">
113
                          {{ item.ItemPerformance[0].Instance[1].Count }}
114
                        </td>
115
                      </tr>
116
                      <tr *ngIf="(selectedItemIndex === item_i)">
117
                        <td colspan="6">
118
                          <div class="uk-animation-slide-top-medium uk-margin-small-top">
119
                            <table class="uk-table uk-table-middle uk-table-striped innerTable uk-margin-small-top uk-margin-small-bottom">
120
                              <tr>
121
                                <th>Month</th>
122
                                <th>Downloads</th>
123
                                <th>Views</th>
124
                              </tr>
125
                              <tr *ngFor="let month of item.ItemPerformance">
126
                                <td>{{ month.Period.Begin | date: "MMM yyyy" }}</td>
127
                                <td>{{ month.Instance[0].Count }}</td>
128
                                <td>{{ month.Instance[1].Count }}</td>
129
                              </tr>
130
                            </table>
131
                          </div>
132
                        </td>
133
                      </tr>
134
                    </ng-container>
135
                  </ng-container>
136
                  </tbody>
137
                </table>
138
              </div>
139

    
140

    
141

    
142
              <!--<div>-->
143
              <!--<div>-->
144
              <!--<div class="uk-overflow-auto uk-scrollspy-inview uk-animation-slide-top-medium uk-margin-top uk-margin-bottom">-->
145

    
146
              <!--<table class="uk-table uk-table-middle uk-table-striped" style="vertical-align: top !important;">-->
147
              <!--<thead>-->
148
              <!--<tr>-->
149
              <!--<th *ngIf="chosenReport !== 'RR1'">Title</th>-->
150
              <!--<th *ngIf="chosenReport !== 'RR1'">Publisher</th>-->
151
              <!--<th *ngIf="chosenReport === 'RR1'">Platform name</th>-->
152
              <!--<th>{{ (chosenReport !== 'RR1') ? 'Item Urls' : 'Url' }}</th>-->
153
              <!--<th>Type</th>-->
154
              <!--<th colspan="2">Downloads/Views</th>-->
155
              <!--</tr>-->
156
              <!--</thead>-->
157
              <!--<td colspan="6" *ngIf="infoMessage">{{ infoMessage }}</td>-->
158
              <!--<tbody *ngFor="let item of repoResponse.Report.Report.Customer.ReportItems; let item_i = index"-->
159
              <!--style="border-bottom: 1px solid whitesmoke;">-->
160
              <!--<tr>-->
161
              <!--<td *ngIf="chosenReport !== 'RR1'">{{ item.ItemName }}</td>-->
162
              <!--<td *ngIf="chosenReport !== 'RR1'">{{ item.ItemPublisher }}</td>-->
163
              <!--<td *ngIf="chosenReport === 'RR1'">{{ item.ItemPlatform }}</td>-->
164
              <!--<td style="min-width: 300px;">-->
165
              <!--<span *ngFor="let url of transformItem(item.ItemIdentifier); let i = index">-->
166
              <!--<br *ngIf="i>0">{{ url }}-->
167
              <!--</span>-->
168
              <!--</td>-->
169
              <!--<td>{{ item.ItemDataType }}</td>-->
170
              <!--<td class="uk-text-center"-->
171
              <!--*ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Monthly'" colspan="2">-->
172
              <!--<a *ngIf="item.ItemPerformance && (item.ItemPerformance.length > 0)"-->
173
              <!--(click)="displayItemPerformance(item_i)">{{ (selectedItemIndex === item_i) ? 'Hide' : 'See' }} results</a>-->
174
              <!--</td>-->
175
              <!--<td class="uk-text-center"-->
176
              <!--*ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Totals'">-->
177
              <!--{{ item.ItemPerformance[0].Instance[0].Count }}-->
178
              <!--</td>-->
179
              <!--<td class="uk-text-center"-->
180
              <!--*ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Totals'">-->
181
              <!--{{ item.ItemPerformance[0].Instance[1].Count }}-->
182
              <!--</td>-->
183
              <!--</tr>-->
184
              <!--<tr *ngIf="(selectedItemIndex === item_i)">-->
185
              <!--<td colspan="6">-->
186
              <!--<div class="uk-animation-slide-top-medium uk-margin-small-top">-->
187
              <!--<table class="uk-table uk-table-middle uk-table-striped innerTable">-->
188
              <!--<tr>-->
189
              <!--<th>Month</th>-->
190
              <!--<th>Downloads</th>-->
191
              <!--<th>Views</th>-->
192
              <!--</tr>-->
193
              <!--<tr *ngFor="let month of item.ItemPerformance">-->
194
              <!--<td>{{ month.Period.Begin | date: "MMM yyyy" }}</td>-->
195
              <!--<td>{{ month.Instance[0].Count }}</td>-->
196
              <!--<td>{{ month.Instance[1].Count }}</td>-->
197
              <!--</tr>-->
198
              <!--</table>-->
199
              <!--</div>-->
200
              <!--</td>-->
201
              <!--</tr>-->
202
              <!--</tbody>-->
203
              <!--</table>-->
204

    
205
              <!--</div>-->
206
              <!--</div>-->
207
              <!--</div>-->
208

    
209
              <!-- BOTTOM PAGINATION LINKS -->
210
              <ul class="uk-pagination uk-margin-medium-top">
211
                <li class="uk-pagination-previous"><a (click)="goToPreviousPage()"><i class="uk-icon-angle-left"></i><span class="uk-margin-left">Previous</span></a></li>
212
                <li class=""><span>page {{ (totalPages > 0) ? page+1 : 0 }} of {{ totalPages }}</span></li>
213
                <li class="uk-pagination-next"><a (click)="goToNextPage()"><span class="uk-margin-right">Next</span><i class="uk-icon-angle-right"></i></a></li>
214
              </ul>
215

    
216
            </div>
217

    
218
            <div class="uk-width-1-4@m">
219

    
220
              <div class="uk-margin-medium-bottom">
221
                <p>
222
                  Number of results:
223
                  <span class="uk-badge uk-badge-success uk-text-upper uk-margin-small-left">{{ repoResponse.ReportDefinition.Filters.ReportAttribute[1].Value }}</span>
224
                </p>
225
                <p>
226
                  Filters:
227
                  <span *ngFor="let filter of repoResponse.ReportDefinition.Filters.Filter; let i = index" class="uk-badge uk-badge-outline uk-text-upper uk-margin-small-left">
228
                      {{ filter.Name }}: {{ filter.Value }}
229
                    </span>
230
                </p>
231
              </div>
232
              <h2 class="heading_c uk-margin-small-bottom">Details</h2>
233
              <ul class="md-list md-list-addon">
234
                <li>
235
                  <div class="md-list-addon-element">
236
                    <i class="md-list-addon-icon material-icons"></i>
237
                  </div>
238
                  <div class="md-list-content">
239
                    <span class="md-list-heading">{{ repoResponse.Report.Report['@Created'] | date: "yyyy-MM-dd HH:mm:ss" }}</span>
240
                    <span class="uk-text-small uk-text-muted">Date run</span>
241
                  </div>
242
                </li>
243
                <li>
244
                  <div class="md-list-addon-element">
245
                    <i class="md-list-addon-icon material-icons"></i>
246
                  </div>
247
                  <div class="md-list-content">
248
                    <span class="md-list-heading">{{ coveredPeriod }}</span>
249
                    <span class="uk-text-small uk-text-muted">Period covered</span>
250
                  </div>
251
                </li>
252
              </ul>
253
            </div>
254

    
255
          </div>
256

    
257
        </div>
258
      </div>
259

    
260

    
261

    
262
      <!--<div *ngIf="repoResponse" class="uk-margin-top">-->
263
      <!--<h3>{{ repoResponse.ReportDefinition['@Name'] }} Report Results-->
264
      <!--<span *ngIf="repoResponse.Report &&-->
265
      <!--repoResponse.Report.Report &&-->
266
      <!--repoResponse.Report.Report.Customer &&-->
267
      <!--repoResponse.Report.Report.Customer.ReportItems &&-->
268
      <!--repoResponse.Report.Report.Customer.ReportItems.length > 0">for {{ repoResponse.Report.Report.Customer.ReportItems[0].ItemPlatform }}</span>-->
269
      <!--</h3>-->
270
      <!--<div class="uk-width-1-2">-->
271
      <!--<table class="uk-table">-->
272
      <!--<tr>-->
273
      <!--<th>Period covered</th>-->
274
      <!--<td>{{ coveredPeriod }}</td>-->
275
      <!--</tr>-->
276
      <!--<tr>-->
277
      <!--<th>Filters</th>-->
278
      <!--<td>-->
279
      <!--<span *ngFor="let filter of repoResponse.ReportDefinition.Filters.Filter; let i = index">-->
280
      <!--<br *ngIf="i>0">-->
281
      <!--{{ filter.Name }}: {{ filter.Value }}-->
282
      <!--</span>-->
283
      <!--</td>-->
284
      <!--</tr>-->
285
      <!--<tr>-->
286
      <!--<th>Date run</th>-->
287
      <!--<td>{{ repoResponse.Report.Report['@Created'] | date: "yyyy-MM-dd HH:mm:ss" }}</td>-->
288
      <!--</tr>-->
289
      <!--<tr>-->
290
      <!--<th>Number of results</th>-->
291
      <!--<td>{{ repoResponse.ReportDefinition.Filters.ReportAttribute[1].Value }}</td>-->
292
      <!--</tr>-->
293
      <!--</table>-->
294
      <!--</div>-->
295
      <!--<div *ngIf="repoResponse.Report.Report.Customer &&-->
296
      <!--repoResponse.Report.Report.Customer.ReportItems">-->
297
      <!--<div>-->
298
      <!--<div class="show-options uk-inline" style="float: right;">-->
299
      <!--<div class="filterLabel" style="display: inline;">Results per page:</div>-->
300
      <!--<div [formGroup]="pageSizeSelect" class="inlineBlock">-->
301
      <!--<select class="form-control" formControlName="selectPageSize" (change)="getPageSize()">-->
302
      <!--<option value="10" selected>10</option>-->
303
      <!--<option value="25">25</option>-->
304
      <!--<option value="50">50</option>-->
305
      <!--<option value="100">100</option>-->
306
      <!--</select>-->
307
      <!--</div>-->
308
      <!--</div>-->
309
      <!--</div><br>-->
310
      <!--<div class="contentAndPagerPanel">-->
311

    
312
      <!--&lt;!&ndash; TOP PAGINATION LINKS &ndash;&gt;-->
313
      <!--<div>-->
314
      <!--<ul class="uk-pagination">-->
315
      <!--<li>-->
316
      <!--<a class="uk-link uk-link-muted" (click)="goToPreviousPage()">-->
317
      <!--<span class="uk-margin-small-right uk-pagination-previous uk-icon" uk-pagination-previous="">-->
318
      <!--<svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"-->
319
      <!--icon="pagination-previous" ratio="1"></svg>-->
320
      <!--</span>-->
321
      <!--Previous-->
322
      <!--</a>-->
323
      <!--</li>-->
324
      <!--<li class="uk-margin-auto-left">-->
325
      <!--<a class="uk-link uk-link-muted" (click)="goToNextPage()">-->
326
      <!--Next-->
327
      <!--<span class="uk-margin-small-left uk-pagination-next uk-icon" uk-pagination-next="">-->
328
      <!--<svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"-->
329
      <!--icon="pagination-next" ratio="1"></svg>-->
330
      <!--</span>-->
331
      <!--</a>-->
332
      <!--</li>-->
333
      <!--</ul>-->
334
      <!--<div class="resultsPageLabel">page {{ (totalPages > 0) ? page+1 : 0 }} of {{ totalPages }}</div>-->
335
      <!--</div>-->
336

    
337

    
338
      <!--&lt;!&ndash; RESULTS TABLE &ndash;&gt;-->
339
      <!--<div>-->
340
      <!--<div>-->
341
      <!--<div class="uk-overflow-auto uk-scrollspy-inview uk-animation-slide-top-medium uk-margin-top uk-margin-bottom">-->
342

    
343
      <!--<table class="uk-table uk-table-middle uk-table-striped" style="vertical-align: top !important;">-->
344
      <!--<thead>-->
345
      <!--<tr>-->
346
      <!--<th *ngIf="chosenReport !== 'RR1'">Title</th>-->
347
      <!--<th *ngIf="chosenReport !== 'RR1'">Publisher</th>-->
348
      <!--<th *ngIf="chosenReport === 'RR1'">Platform name</th>-->
349
      <!--<th>{{ (chosenReport !== 'RR1') ? 'Item Urls' : 'Url' }}</th>-->
350
      <!--<th>Type</th>-->
351
      <!--<th colspan="2">Downloads/Views</th>-->
352
      <!--</tr>-->
353
      <!--</thead>-->
354
      <!--<td colspan="6" *ngIf="infoMessage" class="uk-alert">{{ infoMessage }}</td>-->
355
      <!--<tbody *ngFor="let item of repoResponse.Report.Report.Customer.ReportItems; let item_i = index"-->
356
      <!--style="border-bottom: 1px solid whitesmoke;">-->
357
      <!--<tr>-->
358
      <!--<td *ngIf="chosenReport !== 'RR1'">{{ item.ItemName }}</td>-->
359
      <!--<td *ngIf="chosenReport !== 'RR1'">{{ item.ItemPublisher }}</td>-->
360
      <!--<td *ngIf="chosenReport === 'RR1'">{{ item.ItemPlatform }}</td>-->
361
      <!--<td style="min-width: 300px;">-->
362
      <!--<span *ngFor="let url of transformItem(item.ItemIdentifier); let i = index">-->
363
      <!--<br *ngIf="i>0">{{ url }}-->
364
      <!--</span>-->
365
      <!--</td>-->
366
      <!--<td>{{ item.ItemDataType }}</td>-->
367
      <!--<td class="uk-text-center"-->
368
      <!--*ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Monthly'" colspan="2">-->
369
      <!--<a *ngIf="item.ItemPerformance && (item.ItemPerformance.length > 0)"-->
370
      <!--(click)="displayItemPerformance(item_i)">{{ (selectedItemIndex === item_i) ? 'Hide' : 'See' }} results</a>-->
371
      <!--</td>-->
372
      <!--<td class="uk-text-center"-->
373
      <!--*ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Totals'">-->
374
      <!--{{ item.ItemPerformance[0].Instance[0].Count }}-->
375
      <!--</td>-->
376
      <!--<td class="uk-text-center"-->
377
      <!--*ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Totals'">-->
378
      <!--{{ item.ItemPerformance[0].Instance[1].Count }}-->
379
      <!--</td>-->
380
      <!--</tr>-->
381
      <!--<tr *ngIf="(selectedItemIndex === item_i)">-->
382
      <!--<td colspan="6">-->
383
      <!--<div class="uk-animation-slide-top-medium uk-margin-small-top">-->
384
      <!--<table class="uk-table uk-table-middle uk-table-striped innerTable">-->
385
      <!--<tr>-->
386
      <!--<th>Month</th>-->
387
      <!--<th>Downloads</th>-->
388
      <!--<th>Views</th>-->
389
      <!--</tr>-->
390
      <!--<tr *ngFor="let month of item.ItemPerformance">-->
391
      <!--<td>{{ month.Period.Begin | date: "MMM yyyy" }}</td>-->
392
      <!--<td>{{ month.Instance[0].Count }}</td>-->
393
      <!--<td>{{ month.Instance[1].Count }}</td>-->
394
      <!--</tr>-->
395
      <!--</table>-->
396
      <!--</div>-->
397
      <!--</td>-->
398
      <!--</tr>-->
399
      <!--</tbody>-->
400
      <!--</table>-->
401

    
402
      <!--</div>-->
403
      <!--</div>-->
404
      <!--</div>-->
405

    
406
      <!--&lt;!&ndash; BOTTOM PAGINATION LINKS &ndash;&gt;-->
407
      <!--<div>-->
408
      <!--<ul class="uk-pagination">-->
409
      <!--<li>-->
410
      <!--<a class="uk-link uk-link-muted" (click)="goToPreviousPage()">-->
411
      <!--<span class="uk-margin-small-right uk-pagination-previous uk-icon" uk-pagination-previous="">-->
412
      <!--<svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"-->
413
      <!--icon="pagination-previous" ratio="1"></svg>-->
414
      <!--</span>-->
415
      <!--Previous-->
416
      <!--</a>-->
417
      <!--</li>-->
418
      <!--<li class="uk-margin-auto-left">-->
419
      <!--<a class="uk-link uk-link-muted" (click)="goToNextPage()">-->
420
      <!--Next-->
421
      <!--<span class="uk-margin-small-left uk-pagination-next uk-icon" uk-pagination-next="">-->
422
      <!--<svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"-->
423
      <!--icon="pagination-next" ratio="1"></svg>-->
424
      <!--</span>-->
425
      <!--</a>-->
426
      <!--</li>-->
427
      <!--</ul>-->
428
      <!--<div class="resultsPageLabel">page {{ (totalPages > 0) ? page+1 : 0 }} of {{ totalPages }}</div>-->
429
      <!--</div>-->
430
      <!--</div>-->
431
      <!--</div>-->
432

    
433
      <!--</div>-->
434

    
435
    </div>
436

    
437
    <!-- RIGHT HELP CONTENT -->
438
    <aside-help-content #rightHelperContent [position]="'right'"
439
                        [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
440
    </aside-help-content>
441

    
442
  </div>
443

    
444
  <!-- BOTTOM HELP CONTENT -->
445
  <help-content #bottomHelperContent [position]="'bottom'"
446
                [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
447
  </help-content>
448

    
449
</div>
450

    
451

    
(8-8/15)