add sp widget to custom dashboard
This commit is contained in:
Mononaut
@@ -305,6 +305,20 @@
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@case ('simpleproof') {
|
||||
<div class="col" style="max-height: 410px" [style.order]="isMobile && widget.mobileOrder || 8">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<a class="title-link" href="" [routerLink]="['/sp/verified' | relativeUrl]">
|
||||
<h5 class="card-title d-inline" i18n="dashboard.recent-blocks">{{ widget.props?.label }}</h5>
|
||||
<span> </span>
|
||||
<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
|
||||
</a>
|
||||
<app-simpleproof-widget [label]="widget.props.label" [key]="widget.props.key" [widget]="true"></app-simpleproof-widget>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,75 @@
|
||||
<div class="container-xl" style="min-height: 335px" [ngClass]="{'widget': widget, 'full-height': !widget}">
|
||||
<div *ngIf="!widget" class="float-left" style="display: flex; width: 100%; align-items: center;">
|
||||
<h1>{{ label }}</h1>
|
||||
<div *ngIf="!widget && isLoading" class="spinner-border" role="status"></div>
|
||||
</div>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
|
||||
@if (isLoading) {
|
||||
loading!
|
||||
<div class="spinner-wrapper">
|
||||
<div class="ml-2 spinner-border text-light" style="width: 25px; height: 25px"></div>
|
||||
</div>
|
||||
} @else if (error || !verified.length) {
|
||||
<div class="error-wrapper">
|
||||
<span>temporarily unavailable</span>
|
||||
</div>
|
||||
} @else {
|
||||
<div style="min-height: 295px">
|
||||
<table class="table table-borderless" [class.table-fixed]="widget">
|
||||
<thead>
|
||||
<th class="filename text-left" [ngClass]="{'widget': widget}" i18n="simpleproof.filename">Filename</th>
|
||||
<th class="hash text-left" [ngClass]="{'widget': widget}" i18n="simpleproof.hash">Hash</th>
|
||||
<th class="verified text-right" [ngClass]="{'widget': widget}" i18n="simpleproof.verified">Verified</th>
|
||||
<th class="proof text-right" [ngClass]="{'widget': widget}" i18n="simpleproof.proof">Proof</th>
|
||||
</thead>
|
||||
<tbody *ngIf="verifiedPage; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
|
||||
<tr *ngFor="let item of verifiedPage">
|
||||
<td class="filename text-left" [class]="widget ? 'widget' : ''">{{ item.file_name }}</td>
|
||||
<td class="hash text-left" [class]="widget ? 'widget' : ''">{{ item.sha256 }}</td>
|
||||
<td class="verified text-right" [class]="widget ? 'widget' : ''">
|
||||
<app-timestamp [unixTime]="item.block_time" [customFormat]="'yyyy-MM-dd'" [hideTimeSince]="true"></app-timestamp>
|
||||
</td>
|
||||
<td class="proof text-right" [class]="widget ? 'widget' : ''">
|
||||
<a [href]="item.sanitized_url" target="_blank" class="badge badge-primary badge-verify">
|
||||
<span class="icon">
|
||||
<img class="icon-img" src="/resources/sp.svg">
|
||||
</span>
|
||||
<span i18n="simpleproof.verify">Verify</span>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<ng-template #skeleton>
|
||||
<tbody>
|
||||
<tr *ngFor="let item of [].constructor(itemsPerPage)">
|
||||
<td class="filename text-left" [ngClass]="{'widget': widget}">
|
||||
<span class="skeleton-loader" style="max-width: 75px"></span>
|
||||
</td>
|
||||
<td class="hash text-left" [ngClass]="{'widget': widget}">
|
||||
<span class="skeleton-loader" style="max-width: 75px"></span>
|
||||
</td>
|
||||
<td class="verified text-right" [ngClass]="{'widget': widget}">
|
||||
<span class="skeleton-loader" style="max-width: 75px"></span>
|
||||
</td>
|
||||
<td class="proof text-right" [ngClass]="{'widget': widget}">
|
||||
<span class="skeleton-loader" style="max-width: 75px"></span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</ng-template>
|
||||
</table>
|
||||
|
||||
<ngb-pagination *ngIf="!widget" class="pagination-container float-right mt-2" [class]="isLoading ? 'disabled' : ''"
|
||||
[collectionSize]="verified.length" [rotate]="true" [maxSize]="paginationMaxSize" [pageSize]="itemsPerPage" [(page)]="page"
|
||||
(pageChange)="pageChange(page)" [boundaryLinks]="true" [ellipses]="false">
|
||||
</ngb-pagination>
|
||||
|
||||
<ng-template [ngIf]="!widget">
|
||||
<div class="clearfix"></div>
|
||||
<br>
|
||||
</ng-template>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
@@ -0,0 +1,114 @@
|
||||
.spinner-wrapper, .error-wrapper {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.spinner-border {
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
margin-top: -10px;
|
||||
margin-left: -13px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.container-xl {
|
||||
max-width: 1400px;
|
||||
}
|
||||
.container-xl.widget {
|
||||
padding-left: 0px;
|
||||
padding-bottom: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
.container-xl.legacy {
|
||||
max-width: 1140px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
tr, td, th {
|
||||
border: 0px;
|
||||
padding-top: 0.71rem !important;
|
||||
padding-bottom: 0.7rem !important;
|
||||
}
|
||||
|
||||
.clear-link {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.progress {
|
||||
background-color: var(--secondary);
|
||||
}
|
||||
|
||||
.filename {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.hash {
|
||||
width: 25%;
|
||||
max-width: 700px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
td.hash {
|
||||
font-family: monospace;
|
||||
}
|
||||
.widget .hash {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.hash {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.verified {
|
||||
width: 25%;
|
||||
}
|
||||
td.verified {
|
||||
color: var(--tertiary);
|
||||
}
|
||||
|
||||
.proof {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.badge-verify {
|
||||
font-size: 1.05em;
|
||||
font-weight: normal;
|
||||
background: var(--nav-bg);
|
||||
color: white;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: auto;
|
||||
|
||||
.icon {
|
||||
margin: -0.25em;
|
||||
margin-right: 0.5em;
|
||||
|
||||
.icon-img {
|
||||
width: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
import { Component, Input, SecurityContext, SimpleChanges, OnChanges } from '@angular/core';
|
||||
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
|
||||
import { ServicesApiServices } from '@app/services/services-api.service';
|
||||
import { catchError, of } from 'rxjs';
|
||||
|
||||
export interface SimpleProof {
|
||||
file_name: string;
|
||||
sha256: string;
|
||||
ots_verification: string;
|
||||
block_height: number;
|
||||
block_hash: string;
|
||||
block_time: number;
|
||||
simpleproof_url: string;
|
||||
key?: string;
|
||||
sanitized_url?: SafeResourceUrl;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-simpleproof-widget',
|
||||
templateUrl: './simpleproof-widget.component.html',
|
||||
styleUrls: ['./simpleproof-widget.component.scss'],
|
||||
})
|
||||
export class SimpleProofWidgetComponent implements OnChanges {
|
||||
@Input() key: string = window['__env']?.customize?.dashboard.widgets?.find(w => w.component ==='simpleproof')?.props?.key ?? '';
|
||||
@Input() label: string = window['__env']?.customize?.dashboard.widgets?.find(w => w.component ==='simpleproof')?.props?.label ?? 'Verified Documents';
|
||||
@Input() widget: boolean = false;
|
||||
@Input() width = 300;
|
||||
@Input() height = 400;
|
||||
|
||||
verified: SimpleProof[] = [];
|
||||
verifiedPage: SimpleProof[] = [];
|
||||
isLoading: boolean = true;
|
||||
error: boolean = false;
|
||||
page = 1;
|
||||
lastPage = 1;
|
||||
itemsPerPage = 15;
|
||||
paginationMaxSize = window.innerWidth <= 767.98 ? 3 : 5;
|
||||
|
||||
constructor(
|
||||
private servicesApiService: ServicesApiServices,
|
||||
public sanitizer: DomSanitizer,
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.loadVerifications();
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges): void {
|
||||
if (changes.widget) {
|
||||
this.itemsPerPage = this.widget ? 6 : 15;
|
||||
}
|
||||
if (changes.key) {
|
||||
this.loadVerifications();
|
||||
}
|
||||
}
|
||||
|
||||
loadVerifications(): void {
|
||||
if (this.key) {
|
||||
this.isLoading = true;
|
||||
this.servicesApiService.getSimpleProofs$(this.key).pipe(
|
||||
catchError(() => {
|
||||
this.isLoading = false;
|
||||
this.error = true;
|
||||
return of({});
|
||||
}),
|
||||
).subscribe((data: Record<string, SimpleProof>) => {
|
||||
if (Object.keys(data).length) {
|
||||
this.verified = Object.keys(data).map(key => ({
|
||||
...data[key],
|
||||
file_name: data[key].file_name.replace('source-', '').replace('_', ' '),
|
||||
key,
|
||||
sanitized_url: this.sanitizer.bypassSecurityTrustResourceUrl(this.sanitizer.sanitize(SecurityContext.URL, data[key]['simpleproof-url']) ?? ''),
|
||||
})).sort((a, b) => b.key.localeCompare(a.key));
|
||||
this.verifiedPage = this.verified.slice((this.page - 1) * this.itemsPerPage, this.page * this.itemsPerPage);
|
||||
this.isLoading = false;
|
||||
this.error = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
pageChange(page: number): void {
|
||||
this.page = page;
|
||||
this.verifiedPage = this.verified.slice((this.page - 1) * this.itemsPerPage, this.page * this.itemsPerPage);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user