Project

General

Profile

« Previous | Next » 

Revision 52995

almost ready for release

View differences:

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