Revision 52995
Added by Myrto Koukouli over 5 years ago
metrics-usagestats-report-results.component.html | ||
---|---|---|
26 | 26 |
<div class=" uk-width-expand@m" style="min-height:500px;"> |
27 | 27 |
|
28 | 28 |
<div *ngIf="errorMessage" class="uk-alert uk-alert-warning">{{errorMessage}}</div> |
29 |
<div *ngIf="loadingMessage" class="loading-big"> |
|
30 |
<div class="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;"> |
|
31 |
{{ loadingMessage }} |
|
32 |
</div> |
|
33 |
<div class="whiteFilm"></div> |
|
34 |
</div> |
|
29 | 35 |
<div *ngIf="repoResponse" class="uk-margin-top"> |
30 | 36 |
<h3>{{ repoResponse.ReportDefinition['@Name'] }} Report Results |
31 | 37 |
<span *ngIf="repoResponse.Report && |
... | ... | |
34 | 40 |
repoResponse.Report.Report.Customer.ReportItems && |
35 | 41 |
repoResponse.Report.Report.Customer.ReportItems.length > 0">for {{ repoResponse.Report.Report.Customer.ReportItems[0].ItemPlatform }}</span> |
36 | 42 |
</h3> |
37 |
<table class="uk-table uk-align-left"> |
|
38 |
<tr> |
|
39 |
<th>Period covered</th> |
|
40 |
<td>{{ coveredPeriod }}</td> |
|
41 |
</tr> |
|
42 |
<tr> |
|
43 |
<th>Filters</th> |
|
44 |
<td> |
|
45 |
<span *ngFor="let filter of repoResponse.ReportDefinition.Filters.Filter; let i = index"> |
|
46 |
<br *ngIf="i>0"> |
|
47 |
{{ filter.Name }}: {{ filter.Value }} |
|
43 |
<div class="uk-width-1-2"> |
|
44 |
<table class="uk-table"> |
|
45 |
<tr> |
|
46 |
<th>Period covered</th> |
|
47 |
<td>{{ coveredPeriod }}</td> |
|
48 |
</tr> |
|
49 |
<tr> |
|
50 |
<th>Filters</th> |
|
51 |
<td> |
|
52 |
<span *ngFor="let filter of repoResponse.ReportDefinition.Filters.Filter; let i = index"> |
|
53 |
<br *ngIf="i>0"> |
|
54 |
{{ filter.Name }}: {{ filter.Value }} |
|
55 |
</span> |
|
56 |
</td> |
|
57 |
</tr> |
|
58 |
<tr> |
|
59 |
<th>Date run</th> |
|
60 |
<td>{{ repoResponse.Report.Report['@Created'] | date: "yyyy-MM-dd HH:mm:ss" }}</td> |
|
61 |
</tr> |
|
62 |
<tr> |
|
63 |
<th>Number of results</th> |
|
64 |
<td>{{ repoResponse.ReportDefinition.Filters.ReportAttribute[1].Value }}</td> |
|
65 |
</tr> |
|
66 |
</table> |
|
67 |
</div> |
|
68 |
<div *ngIf="repoResponse.Report.Report.Customer && |
|
69 |
repoResponse.Report.Report.Customer.ReportItems"> |
|
70 |
<div> |
|
71 |
<div class="show-options uk-inline" style="float: right;"> |
|
72 |
<div class="filterLabel" style="display: inline;">Results per page:</div> |
|
73 |
<div class="inlineBlock"> |
|
74 |
<select #itemsPerPage class="form-control" (change)="getPageSize(itemsPerPage.value)"> |
|
75 |
<option value="10" selected>10</option> |
|
76 |
<option value="25">25</option> |
|
77 |
<option value="50">50</option> |
|
78 |
<option value="100">100</option> |
|
79 |
</select> |
|
80 |
</div> |
|
81 |
</div> |
|
82 |
</div><br> |
|
83 |
<div class="contentAndPagerPanel"> |
|
84 |
|
|
85 |
<!-- TOP PAGINATION LINKS --> |
|
86 |
<div> |
|
87 |
<ul class="uk-pagination"> |
|
88 |
<li> |
|
89 |
<a class="uk-link uk-link-muted" (click)="goToPreviousPage()"> |
|
90 |
<span class="uk-margin-small-right uk-pagination-previous uk-icon" uk-pagination-previous=""> |
|
91 |
<svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg" |
|
92 |
icon="pagination-previous" ratio="1"></svg> |
|
48 | 93 |
</span> |
49 |
</td> |
|
50 |
</tr> |
|
51 |
<tr> |
|
52 |
<th>Date run</th> |
|
53 |
<td>{{ repoResponse.Report.Report['@Created'] | date: "yyyy-MM-dd HH:mm:ss" }}</td> |
|
54 |
</tr> |
|
55 |
<tr> |
|
56 |
<th>Number of results</th> |
|
57 |
<td>{{ repoResponse.ReportDefinition.Filters.ReportAttribute[1].Value }}</td> |
|
58 |
</tr> |
|
59 |
</table> |
|
94 |
Previous |
|
95 |
</a> |
|
96 |
</li> |
|
97 |
<li class="uk-margin-auto-left"> |
|
98 |
<a class="uk-link uk-link-muted" (click)="goToNextPage()"> |
|
99 |
Next |
|
100 |
<span class="uk-margin-small-left uk-pagination-next uk-icon" uk-pagination-next=""> |
|
101 |
<svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg" |
|
102 |
icon="pagination-next" ratio="1"></svg> |
|
103 |
</span> |
|
104 |
</a> |
|
105 |
</li> |
|
106 |
</ul> |
|
107 |
<div class="resultsPageLabel">page {{ (totalPages > 0) ? page+1 : 0 }} of {{ totalPages }}</div> |
|
108 |
</div> |
|
60 | 109 |
|
61 |
<table class="uk-table uk-table-expand"> |
|
62 |
<thead> |
|
63 |
<tr> |
|
64 |
<th>ItemUrl</th> |
|
65 |
<th>Title</th> |
|
66 |
<th>Publisher</th> |
|
67 |
<th>Item Type</th> |
|
68 |
<th colspan="2">Apr 2018</th> |
|
69 |
</tr> |
|
70 |
</thead> |
|
71 |
<tbody> |
|
72 |
<tr *ngFor="let item of repoResponse.Report.Report.Customer.ReportItems"> |
|
73 |
<td>{{ transformItem(item.ItemIdentifier[1].Value) }}</td> |
|
74 |
<td>{{ item.ItemName }}</td> |
|
75 |
<td>{{ item.ItemPublisher }}</td> |
|
76 |
<td>{{ item.ItemDataType }}</td> |
|
77 |
<td>{{ item.ItemPerformance[0].Instance[0].Count }}</td> |
|
78 |
<td>{{ item.ItemPerformance[0].Instance[1].Count }}</td> |
|
79 |
</tr> |
|
80 |
</tbody> |
|
81 |
</table> |
|
110 |
|
|
111 |
<!-- RESULTS TABLE --> |
|
112 |
<div> |
|
113 |
<div> |
|
114 |
<div class="uk-overflow-auto uk-scrollspy-inview uk-animation-slide-top-medium uk-margin-top uk-margin-bottom"> |
|
115 |
|
|
116 |
<table class="uk-table uk-table-middle uk-table-striped" style="vertical-align: top !important;"> |
|
117 |
<thead> |
|
118 |
<tr> |
|
119 |
<th>Item Urls</th> |
|
120 |
<th>Title</th> |
|
121 |
<th>Publisher</th> |
|
122 |
<th>Type</th> |
|
123 |
<th colspan="2">Downloads/Views</th> |
|
124 |
<!--<th *ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Totals'"> |
|
125 |
Total Downloads |
|
126 |
</th> |
|
127 |
<th *ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Totals'"> |
|
128 |
Total Views |
|
129 |
</th>--> |
|
130 |
</tr> |
|
131 |
</thead> |
|
132 |
<td colspan="6" *ngIf="infoMessage" class="uk-alert">{{ infoMessage }}</td> |
|
133 |
<!--<tbody *ngFor="let item of repoResponse.Report.Report.Customer.ReportItems; let item_i = index" |
|
134 |
style="{{ (item_i % 2) > 0 ? 'background-color:white; border-bottom: 1px solid gray;': 'border-bottom: 1px solid gray;'">--> |
|
135 |
<tbody *ngFor="let item of repoResponse.Report.Report.Customer.ReportItems; let item_i = index" |
|
136 |
style="border-bottom: 1px solid whitesmoke;"> |
|
137 |
<tr> |
|
138 |
<td> |
|
139 |
<span *ngFor="let url of transformItem(item.ItemIdentifier[1].Value); let i = index"> |
|
140 |
<br *ngIf="i>0">{{ url }} |
|
141 |
</span> |
|
142 |
</td> |
|
143 |
<td>{{ item.ItemName }}</td> |
|
144 |
<td>{{ item.ItemPublisher }}</td> |
|
145 |
<td>{{ item.ItemDataType }}</td> |
|
146 |
<td class="uk-text-center" |
|
147 |
*ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Monthly'" colspan="2"> |
|
148 |
<a *ngIf="item.ItemPerformance && (item.ItemPerformance.length > 0)" |
|
149 |
(click)="displayItemPerformance(item_i)">See results</a> |
|
150 |
</td> |
|
151 |
<td class="uk-text-center" |
|
152 |
*ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Totals'"> |
|
153 |
{{ item.ItemPerformance[0].Instance[0].Count }} |
|
154 |
</td> |
|
155 |
<td class="uk-text-center" |
|
156 |
*ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Totals'"> |
|
157 |
{{ item.ItemPerformance[0].Instance[1].Count }} |
|
158 |
</td> |
|
159 |
</tr> |
|
160 |
<tr *ngIf="(selectedItemIndex === item_i)"> |
|
161 |
<td colspan="6"> |
|
162 |
<div class="uk-animation-slide-top-medium uk-margin-small-top"> |
|
163 |
<!--<div class="uk-child-width-expand uk-grid" uk-grid> |
|
164 |
<div class="uk-h5">Month</div> |
|
165 |
<div class="uk-h5">Downloads</div> |
|
166 |
<div class="uk-h5">Views</div> |
|
167 |
</div> |
|
168 |
<div *ngFor="let month of item.ItemPerformance" class="uk-child-width-expand uk-grid" uk-grid> |
|
169 |
<div>{{ month.Period.Begin | date: "MMM yyyy" }}</div> |
|
170 |
<div>{{ month.Instance[0].Count }}</div> |
|
171 |
<div>{{ month.Instance[1].Count }}</div> |
|
172 |
</div>--> |
|
173 |
<table class="uk-table uk-table-middle uk-table-striped"> |
|
174 |
<tr> |
|
175 |
<th>Month</th> |
|
176 |
<th>Downloads</th> |
|
177 |
<th>Views</th> |
|
178 |
</tr> |
|
179 |
<tr *ngFor="let month of item.ItemPerformance"> |
|
180 |
<td>{{ month.Period.Begin | date: "MMM yyyy" }}</td> |
|
181 |
<td>{{ month.Instance[0].Count }}</td> |
|
182 |
<td>{{ month.Instance[1].Count }}</td> |
|
183 |
</tr> |
|
184 |
</table> |
|
185 |
</div> |
|
186 |
</td> |
|
187 |
</tr> |
|
188 |
</tbody> |
|
189 |
</table> |
|
190 |
|
|
191 |
</div> |
|
192 |
</div> |
|
193 |
</div> |
|
194 |
|
|
195 |
<!-- BOTTOM PAGINATION LINKS --> |
|
196 |
<div> |
|
197 |
<ul class="uk-pagination"> |
|
198 |
<li> |
|
199 |
<a class="uk-link uk-link-muted" (click)="goToPreviousPage()"> |
|
200 |
<span class="uk-margin-small-right uk-pagination-previous uk-icon" uk-pagination-previous=""> |
|
201 |
<svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg" |
|
202 |
icon="pagination-previous" ratio="1"></svg> |
|
203 |
</span> |
|
204 |
Previous |
|
205 |
</a> |
|
206 |
</li> |
|
207 |
<li class="uk-margin-auto-left"> |
|
208 |
<a class="uk-link uk-link-muted" (click)="goToNextPage()"> |
|
209 |
Next |
|
210 |
<span class="uk-margin-small-left uk-pagination-next uk-icon" uk-pagination-next=""> |
|
211 |
<svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg" |
|
212 |
icon="pagination-next" ratio="1"></svg> |
|
213 |
</span> |
|
214 |
</a> |
|
215 |
</li> |
|
216 |
</ul> |
|
217 |
<div class="resultsPageLabel">page {{ (totalPages > 0) ? page+1 : 0 }} of {{ totalPages }}</div> |
|
218 |
</div> |
|
219 |
</div> |
|
220 |
</div> |
|
221 |
|
|
82 | 222 |
</div> |
83 | 223 |
|
84 | 224 |
</div> |
Also available in: Unified diff
almost ready for release