Skip to content

Commit

Permalink
Add countdown timer to BookmarkComponent and refactor project details…
Browse files Browse the repository at this point in the history 
… display
  • Loading branch information
@miladsoft
miladsoft committed Dec 13, 2024
1 parent afc94e2 commit 3576637
Show file tree
Hide file tree
Showing 2 changed files with 79 additions and 26 deletions.
100 changes: 74 additions & 26 deletions src/app/components/bookmark/bookmark.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,12 @@ <h2 class="text-xl font-semibold">Bookmark</h2>
" onerror="this.onerror=null; this.src='/images/avatars/avatar-placeholder.png';"
alt="Project logo" />
</div>
<div class="ml-auto">
<countdown-timer
[startDate]="project.startDate"
[expiryDate]="project.expiryDate">
</countdown-timer>
</div>
</div>
<div class="flex flex-col px-8 pb-6 pt-4">
<div class="flex items-center justify-between">
Expand Down Expand Up @@ -94,34 +100,76 @@ <h2 class="text-xl font-semibold">Bookmark</h2>
}
</div>
<hr class="my-6 w-full border-t" />
<!-- <div class="flex items-center justify-between">
<div class="text-secondary mr-3 text-md font-medium">
{{ project.totalInvestmentsCount || 0 }}
investors
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="flex items-center space-x-2 p-4 bg-white shadow-md rounded-lg">
<mat-icon class="text-primary text-3xl" [svgIcon]="'heroicons_outline:currency-dollar'"></mat-icon>
<div class="flex flex-col">
<span class="text-sm text-gray-500">Target Amount</span>
<span class="font-semibold">{{ project.targetAmount | number }} {{ indexerService.getNetwork() === 'mainnet' ? 'BTC' : 'TBTC' }}</span>
</div>
</div>
<div class="flex items-center space-x-2 p-4 bg-white shadow-md rounded-lg">
<mat-icon class="text-primary text-3xl" [svgIcon]="'heroicons_outline:calendar'"></mat-icon>
<div class="flex flex-col">
<span class="text-sm text-gray-500">Start Date</span>
<span class="font-semibold">{{ project.startDate*1000 | date }}</span>
</div>
</div>
<div class="flex items-center">
<ng-container *ngFor="
let investor of [].constructor(
project.totalInvestmentsCount ||
0
);
let i = index
">
<ng-container *ngIf="i < 10">
<img class="text-card ring-bg-card m-0.5 h-6 w-6 rounded-full ring-2"
[ngClass]="{
'-ml-3':
project.totalInvestmentsCount >
1 && i > 0,
}" [src]="
'images/avatars/avatar-placeholder.png'
" alt="Investor avatar {{
i + 1
}}" />
</ng-container>
</ng-container>
<div class="flex items-center space-x-2 p-4 bg-white shadow-md rounded-lg">
<mat-icon class="text-primary text-3xl" [svgIcon]="'heroicons_outline:clock'"></mat-icon>
<div class="flex flex-col">
<span class="text-sm text-gray-500">Penalty Days</span>
<span class="font-semibold">{{ project.penaltyDays }} days</span>
</div>
</div>
<div class="flex items-center space-x-2 p-4 bg-white shadow-md rounded-lg">
<mat-icon class="text-primary text-3xl" [svgIcon]="'heroicons_outline:calendar'"></mat-icon>
<div class="flex flex-col">
<span class="text-sm text-gray-500">Expiry Date</span>
<span class="font-semibold">{{ project.expiryDate*1000 | date }}</span>
</div>
</div>
</div> -->
<div class="flex items-center space-x-2 p-4 bg-white shadow-md rounded-lg">
<mat-icon class="text-primary text-3xl" [svgIcon]="'heroicons_outline:chart-bar'"></mat-icon>
<div class="flex flex-col">
<span class="text-sm text-gray-500">Stages</span>
<span class="font-semibold">{{ project.stages?.length || 0 }}</span>
</div>
</div>
<div class="flex items-center space-x-2 p-4 bg-white shadow-md rounded-lg">
<mat-icon class="text-primary text-3xl" [svgIcon]="'heroicons_outline:user-group'"></mat-icon>
<div class="flex flex-col">
<span class="text-sm text-gray-500">Seeders</span>
<span class="font-semibold">{{ project.projectSeeders?.secretHashes?.length || 0 }}</span>
</div>
</div>
</div>

<!-- Investment Buttons -->
<div class="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-4">
<!-- Invest Button -->
<a [href]="(indexerService.getNetwork() === 'mainnet' ? 'https://beta.angor.io/view/' : 'https://test.angor.io/view/') + project.projectIdentifier"
target="_blank"
class="group relative inline-flex items-center justify-center overflow-hidden rounded-lg bg-primary p-0.5 text-sm font-medium hover:bg-primary-700 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary dark:hover:bg-primary-600 dark:focus:ring-primary-800 w-full">
<span class="relative flex items-center justify-center gap-2 rounded-md bg-card w-full px-4 py-2.5 transition-all duration-75 ease-in group-hover:bg-opacity-0">
<mat-icon class="icon-size-5 text-primary dark:text-primary-400 group-hover:text-white"
[svgIcon]="'heroicons_solid:circle-stack'">
</mat-icon>
<span class="text-primary dark:text-primary-400 group-hover:text-white">Invest Now</span>
</span>
</a>

<!-- Profile Button -->
<button (click)="goToProjectDetails(project)"
class="group relative inline-flex items-center justify-center overflow-hidden rounded-lg bg-gray-200 dark:bg-gray-700 p-0.5 text-sm font-medium hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-800 w-full">
<span class="relative flex items-center justify-center gap-2 rounded-md bg-card w-full px-4 py-2.5 transition-all duration-75 ease-in group-hover:bg-opacity-0">
<mat-icon class="icon-size-5 text-gray-700 dark:text-gray-300 group-hover:text-white"
[svgIcon]="'heroicons_outline:document-text'">
</mat-icon>
<span class="text-gray-700 dark:text-gray-300 group-hover:text-white">View Details</span>
</span>
</button>
</div>
</div>
</angor-card>
</ng-container>
Expand Down
5 changes: 5 additions & 0 deletions src/app/components/bookmark/bookmark.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { AngorCardComponent } from '@angor/components/card';
import { CommonModule, NgClass } from '@angular/common';
import { Component, OnDestroy, OnInit, inject, signal } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { IndexerService } from 'app/services/indexer.service';
import { MatOptionModule } from '@angular/material/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
Expand All @@ -17,6 +18,7 @@ import { BookmarkService } from 'app/services/bookmark.service';
import { ProjectsService } from 'app/services/projects.service';
import { StorageService } from 'app/services/storage.service';
import { catchError, Observable, of, Subject, takeUntil, tap } from 'rxjs';
import { CountdownTimerComponent } from 'app/layout/common/countdown-timer/countdown-timer.component';

@Component({
selector: 'app-bookmark',
Expand All @@ -35,12 +37,15 @@ import { catchError, Observable, of, Subject, takeUntil, tap } from 'rxjs';
MatProgressBarModule,
CommonModule,
MatProgressSpinnerModule,
CountdownTimerComponent
],
templateUrl: './bookmark.component.html',
styleUrls: ['./bookmark.component.scss'],
})
export class BookmarkComponent implements OnInit, OnDestroy {
bookmarkService = inject(BookmarkService);
indexerService = inject(IndexerService);

savedProjectDetailes = signal<ProjectDetails[]>([]);
isLoading = signal(false);
bookmarks$ = this.bookmarkService.bookmarks$;
Expand Down

0 comments on commit 3576637

Please sign in to comment.