From f8aaa9a657e7507a394668435e6053c0e8c7706f Mon Sep 17 00:00:00 2001 From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com> Date: Sat, 26 Oct 2024 19:58:20 +0200 Subject: [PATCH] Refactoring --- apps/api/src/assets/sitemap.xml | 12 ++ .../resources-glossary.component.html | 134 +++++++++++++++++- .../glossary/resources-glossary.component.ts | 67 +++------ .../glossary/resources-glossary.module.ts | 3 +- .../guides/resources-guides.component.html | 38 ++++- .../guides/resources-guides.component.ts | 17 +-- .../guides/resources-guides.module.ts | 3 +- .../markets/resources-markets.component.html | 68 +++++++-- .../markets/resources-markets.component.ts | 29 +--- .../resources-overview.component.html | 2 +- .../overview/resources-overview.component.ts | 17 ++- .../resources-page-routing.module.ts | 15 +- .../resources/resources-page.component.ts | 22 +-- 13 files changed, 285 insertions(+), 142 deletions(-) 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/pages/resources/glossary/resources-glossary.component.html b/apps/client/src/app/pages/resources/glossary/resources-glossary.component.html index 7225a4e69..123b4dac9 100644 --- a/apps/client/src/app/pages/resources/glossary/resources-glossary.component.html +++ b/apps/client/src/app/pages/resources/glossary/resources-glossary.component.html @@ -2,14 +2,136 @@

Glossary

-
- @for (item of glossaryItems; track item) { -
-

{{ item.term }}

-

{{ item.definition }}

- Learn more → +
+
+
+

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.ts b/apps/client/src/app/pages/resources/glossary/resources-glossary.component.ts index 8f0bded53..c1a57d4cf 100644 --- a/apps/client/src/app/pages/resources/glossary/resources-glossary.component.ts +++ b/apps/client/src/app/pages/resources/glossary/resources-glossary.component.ts @@ -1,53 +1,30 @@ -import { Component } from '@angular/core'; +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 { - public glossaryItems = [ - { - term: 'Buy and Hold', - definition: - '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.', - link: 'https://www.investopedia.com/terms/b/buyandhold.asp' - }, - { - term: 'Deflation', - definition: - 'Deflation is a decrease of the general price level for goods and services in an economy over a period of time.', - link: 'https://www.investopedia.com/terms/d/deflation.asp' - }, - { - term: 'Dollar-Cost Averaging (DCA)', - definition: - '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.', - link: 'https://www.investopedia.com/terms/d/dollarcostaveraging.asp' - }, - { - term: 'Financial Independence', - definition: - '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.', - link: 'https://en.wikipedia.org/wiki/Financial_independence' - }, - { - term: 'FIRE', - definition: - 'FIRE is a movement that promotes saving and investing to achieve financial independence and early retirement.', - link: '../en/blog/2023/07/exploring-the-path-to-fire' - }, - { - term: 'Inflation', - definition: - 'Inflation is an increase of the general price level for goods and services in an economy over a period of time.', - link: 'https://www.investopedia.com/terms/i/inflation.asp' - }, - { - term: 'Stagflation', - definition: - 'Stagflation describes a situation in which there is a stagnant economy with high unemployment and high inflation.', - link: 'https://www.investopedia.com/terms/s/stagflation.asp' - } +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 index 1c19fbc5f..ee01909e9 100644 --- a/apps/client/src/app/pages/resources/glossary/resources-glossary.module.ts +++ b/apps/client/src/app/pages/resources/glossary/resources-glossary.module.ts @@ -1,11 +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] + imports: [CommonModule, ResourcesGlossaryRoutingModule, RouterModule] }) export class ResourcesGlossaryPageModule {} 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 index d130ae668..3bd8efec6 100644 --- a/apps/client/src/app/pages/resources/guides/resources-guides.component.html +++ b/apps/client/src/app/pages/resources/guides/resources-guides.component.html @@ -2,14 +2,38 @@

Guides

-
- @for (guide of guides; track guide) { -
-

{{ guide.title }}

-

{{ guide.description }}

- Read more → +
+
+
+

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.ts b/apps/client/src/app/pages/resources/guides/resources-guides.component.ts index 851f6e3e0..eebda3103 100644 --- a/apps/client/src/app/pages/resources/guides/resources-guides.component.ts +++ b/apps/client/src/app/pages/resources/guides/resources-guides.component.ts @@ -5,19 +5,4 @@ import { Component } from '@angular/core'; styleUrls: ['./resources-guides.component.scss'], templateUrl: './resources-guides.component.html' }) -export class ResourcesGuidesComponent { - public guides = [ - { - title: 'Boringly Getting Rich', - description: - '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.', - link: 'https://herget.me/investing-guide' - }, - { - title: 'How do I get my finances in order?', - description: - '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.', - link: '../en/blog/2022/07/how-do-i-get-my-finances-in-order' - } - ]; -} +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 index fcfcb3625..ed6ce1b2d 100644 --- a/apps/client/src/app/pages/resources/guides/resources-guides.module.ts +++ b/apps/client/src/app/pages/resources/guides/resources-guides.module.ts @@ -1,11 +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] + imports: [CommonModule, ResourcesGuidesRoutingModule, RouterModule] }) export class ResourcesGuidesModule {} 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 index a1a3788ac..74d4bb82b 100644 --- a/apps/client/src/app/pages/resources/markets/resources-markets.component.html +++ b/apps/client/src/app/pages/resources/markets/resources-markets.component.html @@ -1,12 +1,64 @@

Markets

-
- @for (resource of marketResources; track resource) { -
-

{{ resource.title }}

-

{{ resource.description }}

- View resource → -
- } +
+
+
+

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.ts b/apps/client/src/app/pages/resources/markets/resources-markets.component.ts index 9e1e6c9e0..79c185959 100644 --- a/apps/client/src/app/pages/resources/markets/resources-markets.component.ts +++ b/apps/client/src/app/pages/resources/markets/resources-markets.component.ts @@ -5,31 +5,4 @@ import { Component } from '@angular/core'; styleUrls: ['./resources-markets.component.scss'], templateUrl: './resources-markets.component.html' }) -export class ResourcesMarketsComponent { - public marketResources = [ - { - title: 'Crypto Coins Heatmap', - description: - 'With the Crypto Coins Heatmap you can track the daily market movements of cryptocurrencies as a visual snapshot.', - link: 'https://www.tradingview.com/heatmap/crypto' - }, - { - title: 'Fear & Greed Index', - description: - '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.', - link: 'https://money.cnn.com/data/fear-and-greed/' - }, - { - title: 'Inflation Chart', - description: - '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).', - link: 'https://inflationchart.com' - }, - { - title: 'Stock Heatmap', - description: - 'With the Stock Heatmap you can track the daily market movements of stocks as a visual snapshot.', - link: 'https://www.tradingview.com/heatmap/stock' - } - ]; -} +export class ResourcesMarketsComponent {} 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 index 1782ee20b..ad424f05c 100644 --- a/apps/client/src/app/pages/resources/overview/resources-overview.component.html +++ b/apps/client/src/app/pages/resources/overview/resources-overview.component.html @@ -7,7 +7,7 @@

{{ item.title }}

{{ item.description }}

- Explore → + Explore {{ item.title }} →
}
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 index 02c48b820..6e7a5e2a8 100644 --- a/apps/client/src/app/pages/resources/overview/resources-overview.component.ts +++ b/apps/client/src/app/pages/resources/overview/resources-overview.component.ts @@ -11,25 +11,34 @@ export class ResourcesOverviewComponent { title: 'Frequently Asked Questions (FAQ)', description: 'Find quick answers to commonly asked questions about Ghostfolio in our Frequently Asked Questions (FAQ) section.', - link: '/faq' + link: ['/' + $localize`:snake-case:faq`] }, { title: 'Guides', description: 'Explore our guides to help you get started with investing and managing your finances.', - link: '/resources/guides' + 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: '/resources/markets' + link: [ + '/' + $localize`:snake-case:resources`, + $localize`:snake-case:markets` + ] }, { title: 'Glossary', description: 'Learn key financial terms and concepts in our comprehensive glossary.', - link: '/resources/glossary' + link: [ + '/' + $localize`:snake-case:resources`, + $localize`:snake-case:glossary` + ] } ]; } 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 70f8d3c8b..5d5d6e670 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 @@ -18,26 +18,33 @@ const routes: Routes = [ ) }, { - path: 'glossary', + path: $localize`:snake-case:glossary`, loadChildren: () => import('./glossary/resources-glossary.module').then( (m) => m.ResourcesGlossaryPageModule ) }, { - path: 'guides', + path: $localize`:snake-case:guides`, loadChildren: () => import('./guides/resources-guides.module').then( (m) => m.ResourcesGuidesModule ) }, { - path: 'markets', + 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: '' } 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 c61f1557f..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,7 +1,3 @@ -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'; @@ -14,13 +10,6 @@ import { Subject } from 'rxjs'; }) export class ResourcesPageComponent implements OnInit { public deviceType: string; - public hasPermissionForSubscription: boolean; - public info: InfoItem; - public routerLinkFaq = ['/' + $localize`:snake-case:faq`]; - public routerLinkResourcesPersonalFinanceTools = [ - '/' + $localize`:snake-case:resources`, - 'personal-finance-tools' - ]; public tabs = [ { path: '.', @@ -46,19 +35,10 @@ export class ResourcesPageComponent implements OnInit { private unsubscribeSubject = new Subject(); - public constructor( - private dataService: DataService, - private deviceService: DeviceDetectorService - ) { - this.info = this.dataService.fetchInfo(); - } + public constructor(private deviceService: DeviceDetectorService) {} public ngOnInit() { this.deviceType = this.deviceService.getDeviceInfo().deviceType; - this.hasPermissionForSubscription = hasPermission( - this.info?.globalPermissions, - permissions.enableSubscription - ); } public ngOnDestroy() {