Feature/add markets to public pages (#1062)
* Add Markets to public pages * Update changelogpull/1063/head
Thomas Kaul
2 years ago
committed by
GitHub
parent
fd2408dd62
commit
2060fcaf0b
@ -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