mirror of https://github.com/ghostfolio/ghostfolio
Thomas Kaul
3 years ago
committed by
GitHub
GitHub
23 changed files with 224 additions and 114 deletions
@ -0,0 +1,15 @@ |
|||
import { NgModule } from '@angular/core'; |
|||
import { RouterModule, Routes } from '@angular/router'; |
|||
import { AuthGuard } from '@ghostfolio/client/core/auth.guard'; |
|||
|
|||
import { MarketsPageComponent } from './markets-page.component'; |
|||
|
|||
const routes: Routes = [ |
|||
{ path: '', component: MarketsPageComponent, canActivate: [AuthGuard] } |
|||
]; |
|||
|
|||
@NgModule({ |
|||
imports: [RouterModule.forChild(routes)], |
|||
exports: [RouterModule] |
|||
}) |
|||
export class MarketsPageRoutingModule {} |
|||
@ -0,0 +1,21 @@ |
|||
import { Component, OnDestroy, OnInit } from '@angular/core'; |
|||
import { Subject } from 'rxjs'; |
|||
|
|||
@Component({ |
|||
host: { class: 'page' }, |
|||
selector: 'gf-markets-page', |
|||
styleUrls: ['./markets-page.scss'], |
|||
templateUrl: './markets-page.html' |
|||
}) |
|||
export class MarketsPageComponent implements OnDestroy, OnInit { |
|||
private unsubscribeSubject = new Subject<void>(); |
|||
|
|||
public constructor() {} |
|||
|
|||
public ngOnInit() {} |
|||
|
|||
public ngOnDestroy() { |
|||
this.unsubscribeSubject.next(); |
|||
this.unsubscribeSubject.complete(); |
|||
} |
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
<div class="container"> |
|||
<div class="row"> |
|||
<div class="col"> |
|||
<gf-home-market></gf-home-market> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,13 @@ |
|||
import { CommonModule } from '@angular/common'; |
|||
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; |
|||
import { GfHomeMarketModule } from '@ghostfolio/client/components/home-market/home-market.module'; |
|||
|
|||
import { MarketsPageRoutingModule } from './markets-page-routing.module'; |
|||
import { MarketsPageComponent } from './markets-page.component'; |
|||
|
|||
@NgModule({ |
|||
declarations: [MarketsPageComponent], |
|||
imports: [CommonModule, GfHomeMarketModule, MarketsPageRoutingModule], |
|||
schemas: [CUSTOM_ELEMENTS_SCHEMA] |
|||
}) |
|||
export class MarketsPageModule {} |
|||
@ -0,0 +1,3 @@ |
|||
:host { |
|||
display: block; |
|||
} |
|||
@ -1,49 +1,50 @@ |
|||
<div class="align-items-center d-flex"> |
|||
<div *ngIf="benchmark?.name" class="flex-grow-1 text-truncate"> |
|||
{{ benchmark.name }} |
|||
</div> |
|||
<div *ngIf="!benchmark?.name" class="flex-grow-1"> |
|||
<ngx-skeleton-loader |
|||
animation="pulse" |
|||
[theme]="{ |
|||
width: '67%' |
|||
}" |
|||
></ngx-skeleton-loader> |
|||
</div> |
|||
<gf-value |
|||
class="mx-2" |
|||
size="medium" |
|||
[isPercent]="true" |
|||
[locale]="locale" |
|||
[ngClass]="{ |
|||
'text-danger': |
|||
benchmark?.performances?.allTimeHigh?.performancePercent < 0, |
|||
'text-success': |
|||
benchmark?.performances?.allTimeHigh?.performancePercent > 0 |
|||
}" |
|||
[value]=" |
|||
benchmark?.performances?.allTimeHigh?.performancePercent ?? undefined |
|||
" |
|||
></gf-value> |
|||
<div class="text-muted"> |
|||
<small class="d-none d-sm-block text-nowrap" i18n>from All Time High</small |
|||
><small class="d-block d-sm-none text-nowrap" i18n>from ATH</small> |
|||
</div> |
|||
<div class="ml-2"> |
|||
<div |
|||
*ngIf="benchmark?.marketCondition" |
|||
[title]="benchmark?.marketCondition" |
|||
> |
|||
{{ resolveMarketCondition(benchmark.marketCondition).emoji }} |
|||
</div> |
|||
<ngx-skeleton-loader |
|||
*ngIf="!benchmark?.marketCondition" |
|||
animation="pulse" |
|||
appearance="circle" |
|||
[theme]="{ |
|||
height: '1rem', |
|||
width: '1rem' |
|||
}" |
|||
></ngx-skeleton-loader> |
|||
</div> |
|||
</div> |
|||
<table class="gf-table w-100"> |
|||
<thead> |
|||
<tr class="mat-header-row"> |
|||
<th class="mat-header-cell px-1 py-2" i18n>Index</th> |
|||
<th class="mat-header-cell px-1 py-2 text-right"> |
|||
<span class="d-none d-sm-block text-nowrap" i18n |
|||
>Change from All Time High</span |
|||
> |
|||
<span class="d-block d-sm-none text-nowrap" i18n>from ATH</span> |
|||
</th> |
|||
<th class="mat-header-cell px-1 py-2 text-right" i18n></th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr *ngFor="let benchmark of benchmarks" class="mat-row"> |
|||
<td class="mat-cell px-1 py-2"> |
|||
<div class="d-flex align-items-center"> |
|||
{{ benchmark.name }} |
|||
</div> |
|||
</td> |
|||
<td class="mat-cell px-1 py-2 text-right"> |
|||
<gf-value |
|||
class="d-inline-block justify-content-end" |
|||
size="medium" |
|||
[isPercent]="true" |
|||
[locale]="locale" |
|||
[ngClass]="{ |
|||
'text-danger': |
|||
benchmark?.performances?.allTimeHigh?.performancePercent < 0, |
|||
'text-success': |
|||
benchmark?.performances?.allTimeHigh?.performancePercent > 0 |
|||
}" |
|||
[value]=" |
|||
benchmark?.performances?.allTimeHigh?.performancePercent ?? |
|||
undefined |
|||
" |
|||
></gf-value> |
|||
</td> |
|||
<td class="mat-cell px-1 py-2"> |
|||
<div |
|||
*ngIf="benchmark?.marketCondition" |
|||
class="text-center" |
|||
[title]="benchmark?.marketCondition" |
|||
> |
|||
{{ resolveMarketCondition(benchmark.marketCondition).emoji }} |
|||
</div> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
Loading…
Reference in new issue