From c790d0df21b54aec72ccf388171dc9a2b6391cb4 Mon Sep 17 00:00:00 2001 From: Sony Thomas Date: Sat, 26 Oct 2024 23:47:08 +0530 Subject: [PATCH] Feature/Restructure resources page (#3978) * Restructure resources page * Update changelog --------- Co-authored-by: Thomas Kaul <4159106+dtslvr@users.noreply.github.com> --- CHANGELOG.md | 1 + apps/api/src/assets/sitemap.xml | 12 + apps/client/src/app/app.component.ts | 2 +- .../resources-glossary-routing.module.ts | 18 ++ .../resources-glossary.component.html | 138 +++++++++ .../resources-glossary.component.scss | 17 ++ .../glossary/resources-glossary.component.ts | 30 ++ .../glossary/resources-glossary.module.ts | 12 + .../guides/resources-guides-routing.module.ts | 18 ++ .../guides/resources-guides.component.html | 40 +++ .../guides/resources-guides.component.scss | 17 ++ .../guides/resources-guides.component.ts | 8 + .../guides/resources-guides.module.ts | 12 + .../resources-markets-routing.module.ts | 18 ++ .../markets/resources-markets.component.html | 64 ++++ .../markets/resources-markets.component.scss | 17 ++ .../markets/resources-markets.component.ts | 8 + .../markets/resources-markets.module.ts | 11 + .../resources-overview-routing.module.ts | 17 ++ .../resources-overview.component.html | 16 + .../resources-overview.component.scss | 17 ++ .../overview/resources-overview.component.ts | 44 +++ .../overview/resources-overview.module.ts | 12 + .../resources-page-routing.module.ts | 46 ++- .../resources/resources-page.component.ts | 44 +-- .../app/pages/resources/resources-page.html | 288 ++---------------- .../pages/resources/resources-page.module.ts | 9 +- .../app/pages/resources/resources-page.scss | 10 - 28 files changed, 650 insertions(+), 296 deletions(-) create mode 100644 apps/client/src/app/pages/resources/glossary/resources-glossary-routing.module.ts create mode 100644 apps/client/src/app/pages/resources/glossary/resources-glossary.component.html create mode 100644 apps/client/src/app/pages/resources/glossary/resources-glossary.component.scss create mode 100644 apps/client/src/app/pages/resources/glossary/resources-glossary.component.ts create mode 100644 apps/client/src/app/pages/resources/glossary/resources-glossary.module.ts create mode 100644 apps/client/src/app/pages/resources/guides/resources-guides-routing.module.ts create mode 100644 apps/client/src/app/pages/resources/guides/resources-guides.component.html create mode 100644 apps/client/src/app/pages/resources/guides/resources-guides.component.scss create mode 100644 apps/client/src/app/pages/resources/guides/resources-guides.component.ts create mode 100644 apps/client/src/app/pages/resources/guides/resources-guides.module.ts create mode 100644 apps/client/src/app/pages/resources/markets/resources-markets-routing.module.ts create mode 100644 apps/client/src/app/pages/resources/markets/resources-markets.component.html create mode 100644 apps/client/src/app/pages/resources/markets/resources-markets.component.scss create mode 100644 apps/client/src/app/pages/resources/markets/resources-markets.component.ts create mode 100644 apps/client/src/app/pages/resources/markets/resources-markets.module.ts create mode 100644 apps/client/src/app/pages/resources/overview/resources-overview-routing.module.ts create mode 100644 apps/client/src/app/pages/resources/overview/resources-overview.component.html create mode 100644 apps/client/src/app/pages/resources/overview/resources-overview.component.scss create mode 100644 apps/client/src/app/pages/resources/overview/resources-overview.component.ts create mode 100644 apps/client/src/app/pages/resources/overview/resources-overview.module.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index e289b0983..13a5ba96d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed +- Restructured the resources page - Switched the `consistent-generic-constructors` rule from `warn` to `error` in the `eslint` configuration - Switched the `consistent-type-assertions` rule from `warn` to `error` in the `eslint` configuration - Switched the `prefer-optional-chain` rule from `warn` to `error` in the `eslint` configuration diff --git a/apps/api/src/assets/sitemap.xml b/apps/api/src/assets/sitemap.xml index 93d6b38d3..17a6bc0f1 100644 --- a/apps/api/src/assets/sitemap.xml +++ b/apps/api/src/assets/sitemap.xml @@ -214,6 +214,18 @@ https://ghostfol.io/en/resources ${currentDate}T00:00:00+00:00 + + https://ghostfol.io/en/resources/glossary + ${currentDate}T00:00:00+00:00 + + + https://ghostfol.io/en/resources/guides + ${currentDate}T00:00:00+00:00 + + + https://ghostfol.io/en/resources/markets + ${currentDate}T00:00:00+00:00 + https://ghostfol.io/en/resources/personal-finance-tools ${currentDate}T00:00:00+00:00 diff --git a/apps/client/src/app/app.component.ts b/apps/client/src/app/app.component.ts index b67165b68..75841686c 100644 --- a/apps/client/src/app/app.component.ts +++ b/apps/client/src/app/app.component.ts @@ -183,6 +183,7 @@ export class AppComponent implements OnDestroy, OnInit { this.hasTabs = (this.currentRoute === this.routerLinkAbout[0].slice(1) || this.currentRoute === this.routerLinkFaq[0].slice(1) || + this.currentRoute === this.routerLinkResources[0].slice(1) || this.currentRoute === 'account' || this.currentRoute === 'admin' || this.currentRoute === 'home' || @@ -198,7 +199,6 @@ export class AppComponent implements OnDestroy, OnInit { this.currentRoute === 'p' || this.currentRoute === this.routerLinkPricing[0].slice(1) || this.currentRoute === this.routerLinkRegister[0].slice(1) || - this.currentRoute === this.routerLinkResources[0].slice(1) || this.currentRoute === 'start') && this.deviceType !== 'mobile'; diff --git a/apps/client/src/app/pages/resources/glossary/resources-glossary-routing.module.ts b/apps/client/src/app/pages/resources/glossary/resources-glossary-routing.module.ts new file mode 100644 index 000000000..0ca4ecd4f --- /dev/null +++ b/apps/client/src/app/pages/resources/glossary/resources-glossary-routing.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; + +import { ResourcesGlossaryPageComponent } from './resources-glossary.component'; + +const routes: Routes = [ + { + component: ResourcesGlossaryPageComponent, + path: '', + title: $localize`Glossary` + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class ResourcesGlossaryRoutingModule {} diff --git a/apps/client/src/app/pages/resources/glossary/resources-glossary.component.html b/apps/client/src/app/pages/resources/glossary/resources-glossary.component.html new file mode 100644 index 000000000..123b4dac9 --- /dev/null +++ b/apps/client/src/app/pages/resources/glossary/resources-glossary.component.html @@ -0,0 +1,138 @@ +
+
+
+

Glossary

+
+
+
+

Buy and Hold

+
+ Buy and hold is a passive investment strategy where you buy assets + and hold them for a long period regardless of fluctuations in the + market. +
+ +
+
+
+
+

Deflation

+
+ Deflation is a decrease of the general price level for goods and + services in an economy over a period of time. +
+ +
+
+
+
+

Dollar-Cost Averaging (DCA)

+
+ Dollar-cost averaging is an investment strategy where you split + the total amount to be invested across periodic purchases of a + target asset to reduce the impact of volatility on the overall + purchase. +
+ +
+
+
+
+

Financial Independence

+
+ Financial independence is the status of having enough income, for + example with a passive income like dividends, to cover your living + expenses for the rest of your life. +
+ +
+
+
+
+

FIRE

+
+ FIRE is a movement that promotes saving and investing to achieve + financial independence and early retirement. +
+
+ FIRE → +
+
+
+
+
+

Inflation

+
+ Inflation is an increase of the general price level for goods and + services in an economy over a period of time. +
+ +
+
+ @if (hasPermissionForSubscription) { +
+
+

Personal Finance Tools

+
+ Personal finance tools are software applications that help + individuals manage their money, track expenses, set budgets, + monitor investments, and make informed financial decisions. +
+ +
+
+ } +
+
+

Stagflation

+
+ Stagflation describes a situation in which there is a stagnant + economy with high unemployment and high inflation. +
+ +
+
+
+
+
+
diff --git a/apps/client/src/app/pages/resources/glossary/resources-glossary.component.scss b/apps/client/src/app/pages/resources/glossary/resources-glossary.component.scss new file mode 100644 index 000000000..c3109fdf7 --- /dev/null +++ b/apps/client/src/app/pages/resources/glossary/resources-glossary.component.scss @@ -0,0 +1,17 @@ +:host { + color: rgb(var(--dark-primary-text)); + display: block; + + a { + color: rgba(var(--palette-primary-500), 1); + font-weight: 500; + + &:hover { + color: rgba(var(--palette-primary-300), 1); + } + } +} + +:host-context(.theme-dark) { + color: rgb(var(--light-primary-text)); +} diff --git a/apps/client/src/app/pages/resources/glossary/resources-glossary.component.ts b/apps/client/src/app/pages/resources/glossary/resources-glossary.component.ts new file mode 100644 index 000000000..c1a57d4cf --- /dev/null +++ b/apps/client/src/app/pages/resources/glossary/resources-glossary.component.ts @@ -0,0 +1,30 @@ +import { DataService } from '@ghostfolio/client/services/data.service'; +import { InfoItem } from '@ghostfolio/common/interfaces'; +import { hasPermission, permissions } from '@ghostfolio/common/permissions'; + +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'gf-resources-glossary', + styleUrls: ['./resources-glossary.component.scss'], + templateUrl: './resources-glossary.component.html' +}) +export class ResourcesGlossaryPageComponent implements OnInit { + public hasPermissionForSubscription: boolean; + public info: InfoItem; + public routerLinkResourcesPersonalFinanceTools = [ + '/' + $localize`:snake-case:resources`, + 'personal-finance-tools' + ]; + + public constructor(private dataService: DataService) { + this.info = this.dataService.fetchInfo(); + } + + public ngOnInit() { + this.hasPermissionForSubscription = hasPermission( + this.info?.globalPermissions, + permissions.enableSubscription + ); + } +} diff --git a/apps/client/src/app/pages/resources/glossary/resources-glossary.module.ts b/apps/client/src/app/pages/resources/glossary/resources-glossary.module.ts new file mode 100644 index 000000000..ee01909e9 --- /dev/null +++ b/apps/client/src/app/pages/resources/glossary/resources-glossary.module.ts @@ -0,0 +1,12 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; + +import { ResourcesGlossaryRoutingModule } from './resources-glossary-routing.module'; +import { ResourcesGlossaryPageComponent } from './resources-glossary.component'; + +@NgModule({ + declarations: [ResourcesGlossaryPageComponent], + imports: [CommonModule, ResourcesGlossaryRoutingModule, RouterModule] +}) +export class ResourcesGlossaryPageModule {} diff --git a/apps/client/src/app/pages/resources/guides/resources-guides-routing.module.ts b/apps/client/src/app/pages/resources/guides/resources-guides-routing.module.ts new file mode 100644 index 000000000..468881733 --- /dev/null +++ b/apps/client/src/app/pages/resources/guides/resources-guides-routing.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; + +import { ResourcesGuidesComponent } from './resources-guides.component'; + +const routes: Routes = [ + { + component: ResourcesGuidesComponent, + path: '', + title: $localize`Guides` + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class ResourcesGuidesRoutingModule {} diff --git a/apps/client/src/app/pages/resources/guides/resources-guides.component.html b/apps/client/src/app/pages/resources/guides/resources-guides.component.html new file mode 100644 index 000000000..3bd8efec6 --- /dev/null +++ b/apps/client/src/app/pages/resources/guides/resources-guides.component.html @@ -0,0 +1,40 @@ +
+
+
+

Guides

+
+
+
+

Boringly Getting Rich

+
+ The Boringly Getting Rich guide supports you to get started + with investing. It introduces a strategy utilizing a broadly + diversified, low-cost portfolio excluding the risks of individual + stocks. +
+ +
+
+
+
+

How do I get my finances in order?

+
+ Before you can think of long-term investing, you have to get your + finances in order. Learn how you can reach your financial goals + easier and faster in this guide. +
+ +
+
+
+
+
+
diff --git a/apps/client/src/app/pages/resources/guides/resources-guides.component.scss b/apps/client/src/app/pages/resources/guides/resources-guides.component.scss new file mode 100644 index 000000000..c3109fdf7 --- /dev/null +++ b/apps/client/src/app/pages/resources/guides/resources-guides.component.scss @@ -0,0 +1,17 @@ +:host { + color: rgb(var(--dark-primary-text)); + display: block; + + a { + color: rgba(var(--palette-primary-500), 1); + font-weight: 500; + + &:hover { + color: rgba(var(--palette-primary-300), 1); + } + } +} + +:host-context(.theme-dark) { + color: rgb(var(--light-primary-text)); +} diff --git a/apps/client/src/app/pages/resources/guides/resources-guides.component.ts b/apps/client/src/app/pages/resources/guides/resources-guides.component.ts new file mode 100644 index 000000000..eebda3103 --- /dev/null +++ b/apps/client/src/app/pages/resources/guides/resources-guides.component.ts @@ -0,0 +1,8 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'gf-resources-guides', + styleUrls: ['./resources-guides.component.scss'], + templateUrl: './resources-guides.component.html' +}) +export class ResourcesGuidesComponent {} diff --git a/apps/client/src/app/pages/resources/guides/resources-guides.module.ts b/apps/client/src/app/pages/resources/guides/resources-guides.module.ts new file mode 100644 index 000000000..ed6ce1b2d --- /dev/null +++ b/apps/client/src/app/pages/resources/guides/resources-guides.module.ts @@ -0,0 +1,12 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; + +import { ResourcesGuidesRoutingModule } from './resources-guides-routing.module'; +import { ResourcesGuidesComponent } from './resources-guides.component'; + +@NgModule({ + declarations: [ResourcesGuidesComponent], + imports: [CommonModule, ResourcesGuidesRoutingModule, RouterModule] +}) +export class ResourcesGuidesModule {} diff --git a/apps/client/src/app/pages/resources/markets/resources-markets-routing.module.ts b/apps/client/src/app/pages/resources/markets/resources-markets-routing.module.ts new file mode 100644 index 000000000..c8cdb1026 --- /dev/null +++ b/apps/client/src/app/pages/resources/markets/resources-markets-routing.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; + +import { ResourcesMarketsComponent } from './resources-markets.component'; + +const routes: Routes = [ + { + component: ResourcesMarketsComponent, + path: '', + title: $localize`Markets` + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class ResourcesMarketsRoutingModule {} diff --git a/apps/client/src/app/pages/resources/markets/resources-markets.component.html b/apps/client/src/app/pages/resources/markets/resources-markets.component.html new file mode 100644 index 000000000..74d4bb82b --- /dev/null +++ b/apps/client/src/app/pages/resources/markets/resources-markets.component.html @@ -0,0 +1,64 @@ +
+

Markets

+
+
+
+

Crypto Coins Heatmap

+
+ With the Crypto Coins Heatmap you can track the daily market + movements of cryptocurrencies as a visual snapshot. +
+ +
+
+
+
+

Fear & Greed Index

+
+ The fear and greed index was developed by CNNMoney to measure + the primary emotions (fear and greed) that influence how much + investors are willing to pay for stocks. +
+ +
+
+
+
+

Inflation Chart

+
+ Inflation Chart helps you find the intrinsic value of stock + markets, stock prices, goods and services by adjusting them to the + amount of the money supply (M0, M1, M2) or price of other goods (food + or oil). +
+ +
+
+
+
+

Stock Heatmap

+
+ With the Stock Heatmap you can track the daily market movements + of stocks as a visual snapshot. +
+ +
+
+
+
diff --git a/apps/client/src/app/pages/resources/markets/resources-markets.component.scss b/apps/client/src/app/pages/resources/markets/resources-markets.component.scss new file mode 100644 index 000000000..c3109fdf7 --- /dev/null +++ b/apps/client/src/app/pages/resources/markets/resources-markets.component.scss @@ -0,0 +1,17 @@ +:host { + color: rgb(var(--dark-primary-text)); + display: block; + + a { + color: rgba(var(--palette-primary-500), 1); + font-weight: 500; + + &:hover { + color: rgba(var(--palette-primary-300), 1); + } + } +} + +:host-context(.theme-dark) { + color: rgb(var(--light-primary-text)); +} diff --git a/apps/client/src/app/pages/resources/markets/resources-markets.component.ts b/apps/client/src/app/pages/resources/markets/resources-markets.component.ts new file mode 100644 index 000000000..79c185959 --- /dev/null +++ b/apps/client/src/app/pages/resources/markets/resources-markets.component.ts @@ -0,0 +1,8 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'gf-resources-markets', + styleUrls: ['./resources-markets.component.scss'], + templateUrl: './resources-markets.component.html' +}) +export class ResourcesMarketsComponent {} diff --git a/apps/client/src/app/pages/resources/markets/resources-markets.module.ts b/apps/client/src/app/pages/resources/markets/resources-markets.module.ts new file mode 100644 index 000000000..3ec93bb3b --- /dev/null +++ b/apps/client/src/app/pages/resources/markets/resources-markets.module.ts @@ -0,0 +1,11 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; + +import { ResourcesMarketsRoutingModule } from './resources-markets-routing.module'; +import { ResourcesMarketsComponent } from './resources-markets.component'; + +@NgModule({ + declarations: [ResourcesMarketsComponent], + imports: [CommonModule, ResourcesMarketsRoutingModule] +}) +export class ResourcesMarketsModule {} diff --git a/apps/client/src/app/pages/resources/overview/resources-overview-routing.module.ts b/apps/client/src/app/pages/resources/overview/resources-overview-routing.module.ts new file mode 100644 index 000000000..3fada1fc3 --- /dev/null +++ b/apps/client/src/app/pages/resources/overview/resources-overview-routing.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; + +import { ResourcesOverviewComponent } from './resources-overview.component'; + +const routes: Routes = [ + { + component: ResourcesOverviewComponent, + path: '' + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class ResourcesOverviewRoutingModule {} diff --git a/apps/client/src/app/pages/resources/overview/resources-overview.component.html b/apps/client/src/app/pages/resources/overview/resources-overview.component.html new file mode 100644 index 000000000..ad424f05c --- /dev/null +++ b/apps/client/src/app/pages/resources/overview/resources-overview.component.html @@ -0,0 +1,16 @@ +
+
+
+

Resources

+
+ @for (item of overviewItems; track item) { +
+

{{ item.title }}

+

{{ item.description }}

+ Explore {{ item.title }} → +
+ } +
+
+
+
diff --git a/apps/client/src/app/pages/resources/overview/resources-overview.component.scss b/apps/client/src/app/pages/resources/overview/resources-overview.component.scss new file mode 100644 index 000000000..c3109fdf7 --- /dev/null +++ b/apps/client/src/app/pages/resources/overview/resources-overview.component.scss @@ -0,0 +1,17 @@ +:host { + color: rgb(var(--dark-primary-text)); + display: block; + + a { + color: rgba(var(--palette-primary-500), 1); + font-weight: 500; + + &:hover { + color: rgba(var(--palette-primary-300), 1); + } + } +} + +:host-context(.theme-dark) { + color: rgb(var(--light-primary-text)); +} diff --git a/apps/client/src/app/pages/resources/overview/resources-overview.component.ts b/apps/client/src/app/pages/resources/overview/resources-overview.component.ts new file mode 100644 index 000000000..6e7a5e2a8 --- /dev/null +++ b/apps/client/src/app/pages/resources/overview/resources-overview.component.ts @@ -0,0 +1,44 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'gf-resources-overview', + styleUrls: ['./resources-overview.component.scss'], + templateUrl: './resources-overview.component.html' +}) +export class ResourcesOverviewComponent { + public overviewItems = [ + { + title: 'Frequently Asked Questions (FAQ)', + description: + 'Find quick answers to commonly asked questions about Ghostfolio in our Frequently Asked Questions (FAQ) section.', + link: ['/' + $localize`:snake-case:faq`] + }, + { + title: 'Guides', + description: + 'Explore our guides to help you get started with investing and managing your finances.', + link: [ + '/' + $localize`:snake-case:resources`, + $localize`:snake-case:guides` + ] + }, + { + title: 'Markets', + description: + 'Access various market resources and tools to stay informed about financial markets.', + link: [ + '/' + $localize`:snake-case:resources`, + $localize`:snake-case:markets` + ] + }, + { + title: 'Glossary', + description: + 'Learn key financial terms and concepts in our comprehensive glossary.', + link: [ + '/' + $localize`:snake-case:resources`, + $localize`:snake-case:glossary` + ] + } + ]; +} diff --git a/apps/client/src/app/pages/resources/overview/resources-overview.module.ts b/apps/client/src/app/pages/resources/overview/resources-overview.module.ts new file mode 100644 index 000000000..8057e7d2f --- /dev/null +++ b/apps/client/src/app/pages/resources/overview/resources-overview.module.ts @@ -0,0 +1,12 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; + +import { ResourcesOverviewRoutingModule } from './resources-overview-routing.module'; +import { ResourcesOverviewComponent } from './resources-overview.component'; + +@NgModule({ + declarations: [ResourcesOverviewComponent], + imports: [CommonModule, ResourcesOverviewRoutingModule, RouterModule] +}) +export class ResourcesOverviewModule {} diff --git a/apps/client/src/app/pages/resources/resources-page-routing.module.ts b/apps/client/src/app/pages/resources/resources-page-routing.module.ts index be2eaa24e..bcbe1bad5 100644 --- a/apps/client/src/app/pages/resources/resources-page-routing.module.ts +++ b/apps/client/src/app/pages/resources/resources-page-routing.module.ts @@ -9,16 +9,46 @@ const routes: Routes = [ { canActivate: [AuthGuard], component: ResourcesPageComponent, + children: [ + { + path: '', + loadChildren: () => + import('./overview/resources-overview.module').then( + (m) => m.ResourcesOverviewModule + ) + }, + { + path: $localize`:snake-case:glossary`, + loadChildren: () => + import('./glossary/resources-glossary.module').then( + (m) => m.ResourcesGlossaryPageModule + ) + }, + { + path: $localize`:snake-case:guides`, + loadChildren: () => + import('./guides/resources-guides.module').then( + (m) => m.ResourcesGuidesModule + ) + }, + { + path: $localize`:snake-case:markets`, + loadChildren: () => + import('./markets/resources-markets.module').then( + (m) => m.ResourcesMarketsModule + ) + }, + ...['personal-finance-tools'].map((path) => ({ + path, + loadChildren: () => + import( + './personal-finance-tools/personal-finance-tools-page.module' + ).then((m) => m.PersonalFinanceToolsPageModule) + })) + ], path: '', title: $localize`Resources` - }, - ...['personal-finance-tools'].map((path) => ({ - path, - loadChildren: () => - import( - './personal-finance-tools/personal-finance-tools-page.module' - ).then((m) => m.PersonalFinanceToolsPageModule) - })) + } ]; @NgModule({ diff --git a/apps/client/src/app/pages/resources/resources-page.component.ts b/apps/client/src/app/pages/resources/resources-page.component.ts index 51172c0de..d900a38ad 100644 --- a/apps/client/src/app/pages/resources/resources-page.component.ts +++ b/apps/client/src/app/pages/resources/resources-page.component.ts @@ -1,36 +1,44 @@ -import { DataService } from '@ghostfolio/client/services/data.service'; -import { InfoItem } from '@ghostfolio/common/interfaces'; -import { hasPermission, permissions } from '@ghostfolio/common/permissions'; - import { Component, OnInit } from '@angular/core'; +import { DeviceDetectorService } from 'ngx-device-detector'; import { Subject } from 'rxjs'; @Component({ - host: { class: 'page' }, + host: { class: 'page has-tabs' }, selector: 'gf-resources-page', styleUrls: ['./resources-page.scss'], templateUrl: './resources-page.html' }) export class ResourcesPageComponent implements OnInit { - public hasPermissionForSubscription: boolean; - public info: InfoItem; - public routerLinkFaq = ['/' + $localize`:snake-case:faq`]; - public routerLinkResourcesPersonalFinanceTools = [ - '/' + $localize`:snake-case:resources`, - 'personal-finance-tools' + public deviceType: string; + public tabs = [ + { + path: '.', + label: $localize`Overview`, + iconName: 'reader-outline' + }, + { + path: 'guides', + label: $localize`Guides`, + iconName: 'book-outline' + }, + { + path: 'markets', + label: $localize`Markets`, + iconName: 'newspaper-outline' + }, + { + path: 'glossary', + label: $localize`Glossary`, + iconName: 'library-outline' + } ]; private unsubscribeSubject = new Subject(); - public constructor(private dataService: DataService) { - this.info = this.dataService.fetchInfo(); - } + public constructor(private deviceService: DeviceDetectorService) {} public ngOnInit() { - this.hasPermissionForSubscription = hasPermission( - this.info?.globalPermissions, - permissions.enableSubscription - ); + this.deviceType = this.deviceService.getDeviceInfo().deviceType; } public ngOnDestroy() { diff --git a/apps/client/src/app/pages/resources/resources-page.html b/apps/client/src/app/pages/resources/resources-page.html index 49c3d1523..a9dbee450 100644 --- a/apps/client/src/app/pages/resources/resources-page.html +++ b/apps/client/src/app/pages/resources/resources-page.html @@ -1,258 +1,30 @@ -
-
-
-

Resources

-

Ghostfolio

-
-
-
-

Frequently Asked Questions (FAQ)

-
- Find quick answers to commonly asked questions about Ghostfolio in - our Frequently Asked Questions (FAQ) section. -
- -
-
-
-

Guides

-
-
-
-

Boringly Getting Rich

-
- The Boringly Getting Rich guide supports you to get started - with investing. It introduces a strategy utilizing a broadly - diversified, low-cost portfolio excluding the risks of individual - stocks. -
- -
-
-
-
-

How do I get my finances in order?

-
- Before you can think of long-term investing, you have to get your - finances in order. Learn how you can reach your financial goals - easier and faster in this guide. -
- -
-
-
-

Markets

-
-
-
-

Crypto Coins Heatmap

-
- With the Crypto Coins Heatmap you can track the daily - market movements of cryptocurrencies as a visual snapshot. -
- -
-
-
-
-

Fear & Greed Index

-
- The fear and greed index was developed by CNNMoney to - measure the primary emotions (fear and greed) that influence how - much investors are willing to pay for stocks. -
- -
-
-
-
-

Inflation Chart

-
- Inflation Chart helps you find the intrinsic value of stock - markets, stock prices, goods and services by adjusting them to the - amount of the money supply (M0, M1, M2) or price of other goods - (food or oil). -
- -
-
-
-
-

Stock Heatmap

-
- With the Stock Heatmap you can track the daily market - movements of stocks as a visual snapshot. -
- -
-
-
-

Glossary

-
-
-
-

Buy and Hold

-
- Buy and hold is a passive investment strategy where you buy assets - and hold them for a long period regardless of fluctuations in the - market. -
- -
-
-
-
-

Deflation

-
- Deflation is a decrease of the general price level for goods and - services in an economy over a period of time. -
- -
-
-
-
-

Dollar-Cost Averaging (DCA)

-
- Dollar-cost averaging is an investment strategy where you split - the total amount to be invested across periodic purchases of a - target asset to reduce the impact of volatility on the overall - purchase. -
- -
-
-
-
-

Financial Independence

-
- Financial independence is the status of having enough income, for - example with a passive income like dividends, to cover your living - expenses for the rest of your life. -
- -
-
-
-
-

FIRE

-
- FIRE is a movement that promotes saving and investing to achieve - financial independence and early retirement. -
-
- FIRE → -
-
-
-
-
-

Inflation

-
- Inflation is an increase of the general price level for goods and - services in an economy over a period of time. -
- -
-
- @if (hasPermissionForSubscription) { -
-
-

Personal Finance Tools

-
- Personal finance tools are software applications that help - individuals manage their money, track expenses, set budgets, - monitor investments, and make informed financial decisions. -
- -
-
- } -
-
-

Stagflation

-
- Stagflation describes a situation in which there is a stagnant - economy with high unemployment and high inflation. -
- -
-
-
-
-
-
+ + + + + diff --git a/apps/client/src/app/pages/resources/resources-page.module.ts b/apps/client/src/app/pages/resources/resources-page.module.ts index 10845a517..de14a67ba 100644 --- a/apps/client/src/app/pages/resources/resources-page.module.ts +++ b/apps/client/src/app/pages/resources/resources-page.module.ts @@ -1,12 +1,19 @@ import { CommonModule } from '@angular/common'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; +import { MatTabsModule } from '@angular/material/tabs'; +import { RouterModule } from '@angular/router'; import { ResourcesPageRoutingModule } from './resources-page-routing.module'; import { ResourcesPageComponent } from './resources-page.component'; @NgModule({ declarations: [ResourcesPageComponent], - imports: [CommonModule, ResourcesPageRoutingModule], + imports: [ + CommonModule, + MatTabsModule, + ResourcesPageRoutingModule, + RouterModule + ], schemas: [CUSTOM_ELEMENTS_SCHEMA] }) export class ResourcesPageModule {} diff --git a/apps/client/src/app/pages/resources/resources-page.scss b/apps/client/src/app/pages/resources/resources-page.scss index c3109fdf7..b536ec216 100644 --- a/apps/client/src/app/pages/resources/resources-page.scss +++ b/apps/client/src/app/pages/resources/resources-page.scss @@ -1,15 +1,5 @@ :host { color: rgb(var(--dark-primary-text)); - display: block; - - a { - color: rgba(var(--palette-primary-500), 1); - font-weight: 500; - - &:hover { - color: rgba(var(--palette-primary-300), 1); - } - } } :host-context(.theme-dark) {