-
Notifications
You must be signed in to change notification settings - Fork 8
/
details.page.html
125 lines (124 loc) · 4.15 KB
/
details.page.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<mat-toolbar *transloco="let t">
<button routerLink=".." routerDirection="back" mat-icon-button>
<mat-icon>arrow_back</mat-icon>
</button>
<div class="toolbar-spacer"></div>
<ng-container *ngrxLet="activeDetailedCapture$ as activeDetailedCapture">
<button
*ngIf="activeDetailedCapture.id"
(click)="openShareMenu()"
mat-icon-button
>
<mat-icon>share</mat-icon>
</button>
</ng-container>
<button
*ngIf="(isFromSeriesPage$ | ngrxPush) === false"
(click)="openOptionsMenu()"
mat-icon-button
>
<mat-icon>more_vert</mat-icon>
</button>
</mat-toolbar>
<div class="content" *ngrxLet="detailedCaptures$ as detailedCaptures">
<swiper
*ngrxLet="initialSlideIndex$ as initialSlideIndex"
[virtual]="true"
[initialSlide]="initialSlideIndex"
[resistanceRatio]="0"
[observeSlideChildren]="true"
[resizeObserver]="true"
[observeParents]="true"
(swiper)="onSwiperCreated($event)"
(slideChange)="onSlidesChanged()"
class="swiper"
>
<ng-template
swiperSlide
*ngFor="
let detailedCapture of detailedCaptures;
trackBy: trackDetailedCapture
"
>
<div class="slide">
<app-media
[src]="detailedCapture.mediaUrl$ | ngrxPush"
[mimeType]="detailedCapture.mediaMimeType$ | ngrxPush"
[routerLink]="[
'/media-viewer',
detailedCapture.mediaUrl$ | ngrxPush,
{ mimeType: detailedCapture.mediaMimeType$ | ngrxPush }
]"
></app-media>
<ion-list lines="none">
<ion-item>
<ion-icon name="person" slot="start"></ion-icon>
<ion-label>{{ detailedCapture.creator$ | ngrxPush }}</ion-label>
</ion-item>
<ion-item (click)="openMap()">
<ion-icon name="location" slot="start"></ion-icon>
<ion-label>
{{ detailedCapture.locationDisplay$ | ngrxPush }}
</ion-label>
</ion-item>
<ion-item>
<ion-icon name="time" slot="start"></ion-icon>
<ion-label>
{{
(detailedCapture.timestamp$ | ngrxPush | date: 'long') ||
('notDisclosed' | transloco)
}}
</ion-label>
</ion-item>
<ion-item>
<ion-icon src="/assets/images/media-id.svg" slot="start"></ion-icon>
<ion-label
(click)="openCertificate()"
*ngIf="detailedCapture.id; else notRegistered"
>
{{ detailedCapture.id }}
</ion-label>
<ng-template #notRegistered>
{{ 'notRegistered' | transloco }}
</ng-template>
</ion-item>
<ng-container *ngrxLet="detailedCapture.nftToken$ as nftToken">
<ion-item *ngIf="nftToken">
<ion-icon src="/assets/images/nft.svg" slot="start"></ion-icon>
<ion-label>
{{ nftToken.tokenType }}
<a href="{{ nftToken.explorerUrl }}">
{{ nftToken.tokenId }}
</a>
</ion-label>
</ion-item>
</ng-container>
<ng-container *ngIf="captionOn">
<ng-container *ngrxLet="detailedCapture.caption$ as caption">
<ion-item (click)="editCaption()">
<ion-icon name="document-text" slot="start"></ion-icon>
<ion-label text-wrap *ngIf="caption; else emptyCaption">
{{ caption }}
</ion-label>
<ng-template #emptyCaption>
<ion-label>
{{ 'clickToEditCaption' | transloco }}
<ion-icon
name="pencil-outline"
id="caption-edit-icon"
></ion-icon>
</ion-label>
</ng-template>
</ion-item>
</ng-container>
</ng-container>
</ion-list>
<div class="text-center">
<ion-button routerLink="information">
{{ 'moreInformation' | transloco }}
</ion-button>
</div>
</div>
</ng-template>
</swiper>
</div>