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 *ngIf="eventsPage" class="uk-h2">{{ eventsPage.datasource }}</h1>
5
    <div *ngIf="eventsPage" class="uk-text uk-text-small uk-text-secondary">{{ topic }}</div>
6

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

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

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

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

    
23
          <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{errorMessage}}</div>
24
          <div *ngIf="loadingMessage" class="loading-big">
25
            <div class="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">{{ loadingMessage }}</div>
26
            <div class="whiteFilm"></div>
27
          </div>
28
          <div *ngIf="noEvents" class="uk-alert">{{ noEvents }}</div>
29
          <div *ngIf="eventsPage && eventsPage.totalPages" class="events-results">
30
            <div class="numberOfEventsLabel">
31
              <span>Showing {{(eventsPage.currPage*10)+1 }}-{{ ( (eventsPage.total < 10) || (eventsPage.total < (eventsPage.currPage+1)*10) ) ? (eventsPage.total) : (eventsPage.currPage+1)*10 }} of {{ eventsPage.total }} results</span>
32
            </div>
33
            <div>
34
              <ul class="uk-pagination">
35
                <li>
36
                  <a class="uk-link uk-link-muted" (click)="goToPreviousPage()">
37
              <span class="uk-margin-small-right uk-pagination-previous uk-icon" uk-pagination-previous="">
38
                <svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg" icon="pagination-previous" ratio="1"></svg>
39
              </span>
40
                    Previous
41
                  </a>
42
                </li>
43
                <li class="uk-margin-auto-left">
44
                  <a class="uk-link uk-link-muted" (click)="goToNextPage()">
45
                    Next
46
                    <span class="uk-margin-small-left uk-pagination-next uk-icon" uk-pagination-next="">
47
                <svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg" icon="pagination-next" ratio="1"></svg>
48
              </span>
49
                  </a>
50
                </li>
51
              </ul>
52
              <div class="resultsPageLabel">page {{ eventsPage.currPage+1 }} of {{ eventsPage.totalPages }}</div>
53
            </div>
54
            <div *ngFor="let event of eventsPage.values" class="events-list">
55
              <div class="uk-card uk-card-default well uk-scrollspy-inview uk-animation-slide-top-medium">
56
                <div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
57
                  <div class="uk-width-1-1@m uk-first-column">
58
                    <p class="text-right"><span class="uk-label">Trust: {{ event.trust }}</span></p>
59
                    <div class="uk-overflow-auto uk-scrollspy-inview uk-animation-slide-top-medium">
60
                      <table class="uk-table uk-table-striped uk-table-middle">
61
                        <tbody>
62
                        <tr class="el-item">
63
                          <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">ID</strong></td>
64
                          <td class="uk-table-shrink">
65
                            <div class="el-title">{{ event.publication.originalId }}</div>
66
                          </td>
67
                        </tr>
68
                        <tr class="el-item">
69
                          <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">Title(s)</strong></td>
70
                          <td class="uk-table-shrink">
71
                            <div class="el-title">
72
                              <span *ngFor="let t of event.publication.titles">{{ t }};&nbsp;&nbsp;</span></div>
73
                          </td>
74
                        </tr>
75
                        <tr class="el-item">
76
                          <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">Author(s)</strong></td>
77
                          <td class="uk-table-shrink">
78
                            <div class="el-title"><span *ngFor="let auth of event.publication.creators">{{ auth }};&nbsp;&nbsp;</span></div>
79
                          </td>
80
                        </tr>
81
                        <tr class="el-item">
82
                          <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">PID(s)</strong></td>
83
                          <td class="uk-table-shrink"><div class="el-title"><span *ngFor="let pid of event.publication.pids">({{ pid.type }}) {{ pid.value }}</span></div></td>
84
                        </tr>
85
                        <tr class="el-item"><td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">Abstract(s)</strong></td>
86
                          <td class="uk-table-shrink"><div class="el-title"><span *ngFor="let abs of event.publication.abstracts">{{ abs }}</span></div></td>
87
                        </tr>
88
                        <tr class="el-item">
89
                          <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">Project(s)/Relation(s)</strong></td>
90
                          <td class="uk-table-shrink"><div class="el-title"><span *ngFor="let rel of event.publication.externalReferences">{{ rel.name }}; </span></div></td>
91
                        </tr>
92
                        <tr class="el-item">
93
                          <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">Subject(s)</strong></td>
94
                          <td class="uk-table-shrink">
95
                            <div class="el-title"><span *ngFor="let subj of event.publication.subjects">{{ subj }};&nbsp;</span></div>
96
                          </td>
97
                        </tr>
98
                        <tr class="el-item">
99
                          <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">Publication date</strong></td>
100
                          <td class="uk-table-shrink"><div class="el-title">{{ event.publication.publicationdate }}</div></td>
101
                        </tr>
102
                        <tr class="el-item success">
103
                          <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">Rights</strong></td>
104
                          <td class="uk-table-shrink">
105
                            <div class="el-title">
106
                              <span *ngFor="let l of event.publication.instances">{{ l.license }}&nbsp;&nbsp;<b>{{ l.hostedby }}</b><br>
107
                                <a href="{{ l.url }}" target="_blank">{{ l.url }}</a><br>
108
                              </span>
109
                              <span class="pull-right">
110
                                <span class="uk-label uk-label-success">added</span>&nbsp;&nbsp;
111
                                <span><b>from: </b>
112
                                  <a href="{{ event.provenance.url }}" target="_blank">{{ event.provenance.repositoryName }}</a>
113
                                  <span> ({{ event.provenance.id }})</span>
114
                                </span>
115
                              </span>
116
                            </div>
117
                          </td>
118
                        </tr>
119
                        </tbody>
120
                      </table>
121
                    </div>
122
                  </div>
123
                </div>
124
              </div>
125
            </div>
126
            <div>
127
              <ul class="uk-pagination">
128
                <li>
129
                  <a class="uk-link uk-link-muted" (click)="goToPreviousPage()">
130
                    <span class="uk-margin-small-right uk-pagination-previous uk-icon" uk-pagination-previous="">
131
                      <svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg" icon="pagination-previous" ratio="1"></svg>
132
                    </span>
133
                    Previous
134
                  </a>
135
                </li>
136
                <li class="uk-margin-auto-left">
137
                  <a class="uk-link uk-link-muted" (click)="goToNextPage()">
138
                    Next
139
                    <span class="uk-margin-small-left uk-pagination-next uk-icon" uk-pagination-next="">
140
                      <svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg" icon="pagination-next" ratio="1"></svg>
141
                    </span>
142
                  </a>
143
                </li>
144
              </ul>
145
              <div class="resultsPageLabel">page {{ eventsPage.currPage+1 }} of {{ eventsPage.totalPages }}</div>
146
            </div>
147
          </div>
148

    
149
        </div>
150

    
151
        <!-- RIGHT HELP CONTENT -->
152
        <aside-help-content #rightHelperContent [position]="'right'"
153
                            [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
154
        </aside-help-content>
155

    
156
      </div>
157
    </div>
158

    
159

    
160
    <!-- BOTTOM HELP CONTENT -->
161
    <help-content #bottomHelperContent [position]="'bottom'"
162
                  [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
163
    </help-content>
164

    
165

    
166
  </div>
167
</div>
168

    
169
<!--   *** OLD HTML ***
170

    
171
<div *ngIf="eventsPage" class="uk-grid uk-grid-stack">
172
  <div class="uk-width-expand@m uk-first-column">
173
    <div class="uk-margin-medium-bottom">
174
      <h1 class="uk-article-title">{{ eventsPage.datasource }}</h1>
175
      <div class="uk-text uk-text-small uk-text-secondary">{{ topic }}</div>
176
    </div>
177
    <div>
178
      <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{errorMessage}}</div>
179
      <div *ngIf="loadingMessage" class="loading-big">
180
        <div class="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">{{ loadingMessage }}</div>
181
        <div class="whiteFilm"></div>
182
      </div>
183
      <div *ngIf="noEvents" class="uk-alert">{{ noEvents }}</div>
184
      <div *ngIf="eventsPage.totalPages" class="events-results">
185
        <div class="numberOfEventsLabel">
186
          <span>Showing {{(eventsPage.currPage*10)+1 }}-{{ ( (eventsPage.total < 10) || (eventsPage.total < (eventsPage.currPage+1)*10) ) ? (eventsPage.total) : (eventsPage.currPage+1)*10 }} of {{ eventsPage.total }} results</span>
187
        </div>
188
        <div>
189
          <ul class="uk-pagination">
190
            <li>
191
              <a class="uk-link uk-link-muted" (click)="goToPreviousPage()">
192
                <span class="uk-margin-small-right uk-pagination-previous uk-icon" uk-pagination-previous="">
193
                  <svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg" icon="pagination-previous" ratio="1"></svg>
194
                </span>
195
                Previous
196
              </a>
197
            </li>
198
            <li class="uk-margin-auto-left">
199
              <a class="uk-link uk-link-muted" (click)="goToNextPage()">
200
                Next
201
                <span class="uk-margin-small-left uk-pagination-next uk-icon" uk-pagination-next="">
202
                  <svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg" icon="pagination-next" ratio="1"></svg>
203
                </span>
204
              </a>
205
            </li>
206
          </ul>
207
          <div class="resultsPageLabel">page {{ eventsPage.currPage+1 }} of {{ eventsPage.totalPages }}</div>
208
        </div>
209
        <div *ngFor="let event of eventsPage.values" class="events-list">
210
          <div class="uk-card uk-card-default well uk-scrollspy-inview uk-animation-slide-top-medium">
211
            <div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
212
              <div class="uk-width-1-1@m uk-first-column">
213
                <p class="text-right"><span class="uk-label">Trust: {{ event.trust }}</span></p>
214
                <div class="uk-overflow-auto uk-scrollspy-inview uk-animation-slide-top-medium">
215
                  <table class="uk-table uk-table-striped uk-table-middle">
216
                    <tbody>
217
                    <tr class="el-item">
218
                      <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">ID</strong></td>
219
                      <td class="uk-table-shrink">
220
                        <div class="el-title">{{ event.publication.originalId }}</div>
221
                      </td>
222
                    </tr>
223
                    <tr class="el-item">
224
                      <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">Title(s)</strong></td>
225
                      <td class="uk-table-shrink">
226
                        <div class="el-title">
227
                          <span *ngFor="let t of event.publication.titles">{{ t }};&nbsp;&nbsp;</span></div>
228
                      </td>
229
                    </tr>
230
                    <tr class="el-item">
231
                      <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">Author(s)</strong></td>
232
                      <td class="uk-table-shrink">
233
                        <div class="el-title"><span *ngFor="let auth of event.publication.creators">{{ auth }};&nbsp;&nbsp;</span></div>
234
                      </td>
235
                    </tr><tr class="el-item">
236
                      <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">PID(s)</strong></td>
237
                      <td class="uk-table-shrink"><div class="el-title"><span *ngFor="let pid of event.publication.pids">({{ pid.type }}) {{ pid.value }}</span></div></td>
238
                    </tr>
239
                    <tr class="el-item"><td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">Abstract(s)</strong></td>
240
                      <td class="uk-table-shrink"><div class="el-title"><span *ngFor="let abs of event.publication.abstracts">{{ abs }}</span></div></td>
241
                    </tr>
242
                    <tr class="el-item">
243
                      <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">Project(s)/Relation(s)</strong></td>
244
                      <td class="uk-table-shrink"><div class="el-title"><span *ngFor="let rel of event.publication.externalReferences">{{ rel.name }}; </span></div></td>
245
                    </tr>
246
                    <tr class="el-item">
247
                      <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">Subject(s)</strong></td>
248
                      <td class="uk-table-shrink">
249
                        <div class="el-title"><span *ngFor="let subj of event.publication.subjects">{{ subj }};&nbsp;</span></div>
250
                      </td>
251
                    </tr>
252
                    <tr class="el-item">
253
                      <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">Publication date</strong></td>
254
                      <td class="uk-table-shrink"><div class="el-title">{{ event.publication.publicationdate }}</div></td>
255
                    </tr>
256
                    <tr class="el-item success">
257
                      <td class="uk-table-shrink uk-width-1-4"><strong class="el-title uk-display-block">Rights</strong></td>
258
                      <td class="uk-table-shrink">
259
                        <div class="el-title">
260
                            <span *ngFor="let l of event.publication.instances">{{ l.license }}&nbsp;&nbsp;<b>{{ l.hostedby }}</b><br>
261
                              <a href="{{ l.url }}" target="_blank">{{ l.url }}</a><br>
262
                            </span>
263
                          <span class="pull-right">
264
                              <span class="uk-label uk-label-success">added</span>&nbsp;&nbsp;
265
                              <span><b>from: </b>
266
                                <a href="{{ event.provenance.url }}" target="_blank">{{ event.provenance.repositoryName }}</a>
267
                                <span> ({{ event.provenance.id }})</span>
268
                              </span>
269
                            </span>
270
                        </div>
271
                      </td>
272
                    </tr>
273
                    </tbody>
274
                  </table>
275
                </div>
276
              </div>
277
            </div>
278
          </div>
279
        </div>
280
        <div>
281
          <ul class="uk-pagination">
282
            <li>
283
              <a class="uk-link uk-link-muted" (click)="goToPreviousPage()">
284
                <span class="uk-margin-small-right uk-pagination-previous uk-icon" uk-pagination-previous="">
285
                  <svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg" icon="pagination-previous" ratio="1"></svg>
286
                </span>
287
                Previous
288
              </a>
289
            </li>
290
            <li class="uk-margin-auto-left">
291
              <a class="uk-link uk-link-muted" (click)="goToNextPage()">
292
                Next
293
                <span class="uk-margin-small-left uk-pagination-next uk-icon" uk-pagination-next="">
294
                  <svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg" icon="pagination-next" ratio="1"></svg>
295
                </span>
296
              </a>
297
            </li>
298
          </ul>
299
          <div class="resultsPageLabel">page {{ eventsPage.currPage+1 }} of {{ eventsPage.totalPages }}</div>
300
        </div>
301
      </div>
302
    </div>
303
  </div>
304
</div>
305
-->
(7-7/13)