Refactoring

apps/client/src/app/pages/alternatives/alternatives-page-routing.module.ts

@@ -3,7 +3,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
 
 import { AlternativesPageComponent } from './alternatives-page.component';
-import { data } from './data';
+import { products } from './products';
 
 const routes: Routes = [
   {
@@ -12,14 +12,27 @@ const routes: Routes = [
     path: '',
     title: $localize`Alternatives`
   },
-  {
+  ...products
+    .filter(({ key }) => {
+      return key !== 'ghostfolio';
+    })
+    .map(({ component, key, name }) => {
+      return {
+        canActivate: [AuthGuard],
+        path: key,
+        loadComponent: () =>
+          import(`./products/${key}-page.component`).then(() => component),
+        title: `Open Source Alternative to ${name}`
+      };
+    })
+  /*{
     canActivate: [AuthGuard],
     path: 'maybe',
     loadComponent: () =>
       import('./products/maybe-page.component').then(
         (c) => c.MaybePageComponent
       ),
-    title: data.find(({ key }) => key === 'maybe').name
+    title: products.find(({ key }) => key === 'maybe').name
   },
   {
     canActivate: [AuthGuard],
@@ -28,7 +41,7 @@ const routes: Routes = [
       import('./products/parqet-page.component').then(
         (c) => c.ParqetPageComponent
       ),
-    title: data.find(({ key }) => key === 'parqet').name
+    title: products.find(({ key }) => key === 'parqet').name
   },
   {
     canActivate: [AuthGuard],
@@ -37,8 +50,8 @@ const routes: Routes = [
       import('./products/yeekatee-page.component').then(
         (c) => c.YeekateePageComponent
       ),
-    title: data.find(({ key }) => key === 'yeekatee').name
+    title: products.find(({ key }) => key === 'yeekatee').name
-  }
+  }*/
 ];
 
 @NgModule({

apps/client/src/app/pages/alternatives/alternatives-page.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnDestroy } from '@angular/core';
 import { Subject } from 'rxjs';
 
-import { data } from './data';
+import { products } from './products';
 
 @Component({
   host: { class: 'page' },
@@ -10,7 +10,7 @@ import { data } from './data';
   templateUrl: './alternatives-page.html'
 })
 export class AlternativesPageComponent implements OnDestroy {
-  public products = data.filter(({ key }) => {
+  public products = products.filter(({ key }) => {
     return key !== 'ghostfolio';
   });
 

apps/client/src/app/pages/alternatives/page-template.html

@@ -145,6 +145,11 @@
             </li>
           </ol>
         </nav>
+        <section class="m-4 text-center">
+          <small class="text-muted"
+            >This website is not affiliated with {{ product2.name }}.</small
+          >
+        </section>
       </article>
     </div>
   </div>

apps/client/src/app/pages/alternatives/data.ts → apps/client/src/app/pages/alternatives/products.ts

@@ -1,7 +1,11 @@
-import { Comparison } from '@ghostfolio/common/interfaces';
+import { Product } from '@ghostfolio/common/interfaces';
+import { MaybePageComponent } from './products/maybe-page.component';
+import { ParqetPageComponent } from './products/parqet-page.component';
+import { YeekateePageComponent } from './products/yeekatee-page.component';
 
-export const data: Comparison[] = [
+export const products: Product[] = [
   {
+    component: undefined,
     founded: 2021,
     hasFreePlan: true,
     isOpenSource: true,
@@ -15,6 +19,7 @@ export const data: Comparison[] = [
     slogan: 'Open Source Wealth Management'
   },
   {
+    component: MaybePageComponent,
     founded: 2021,
     isOpenSource: false,
     key: 'maybe',
@@ -27,21 +32,25 @@ export const data: Comparison[] = [
     slogan: 'Your financial future, in your control'
   },
   {
+    component: ParqetPageComponent,
+    founded: 2020,
     hasFreePlan: true,
     isOpenSource: false,
     key: 'parqet',
     name: 'Parqet',
     origin: 'Germany',
-    region: 'DACH',
+    pricing: 'Starting from €88 / year',
+    region: 'Austria, Germany, Switzerland',
     slogan: 'Dein Vermögen immer im Blick'
   },
   {
+    component: YeekateePageComponent,
     founded: 2021,
     isOpenSource: false,
     key: 'yeekatee',
     name: 'yeekatee',
     origin: 'Switzerland',
-    region: 'CH',
+    region: 'Switzerland',
     slogan: 'Connect. Share. Invest.'
   }
 ];

apps/client/src/app/pages/alternatives/products/maybe-page.component.ts

@@ -2,9 +2,8 @@ import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
-import { Comparison } from '@ghostfolio/common/interfaces';
 
-import { data } from '../data';
+import { products } from '../products';
 
 @Component({
   host: { class: 'page' },
@@ -14,11 +13,11 @@ import { data } from '../data';
   templateUrl: '../page-template.html'
 })
 export class MaybePageComponent {
-  public product1: Comparison = data.find(({ key }) => {
+  public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
 
-  public product2: Comparison = data.find(({ key }) => {
+  public product2 = products.find(({ key }) => {
     return key === 'maybe';
   });
 }

apps/client/src/app/pages/alternatives/products/parqet-page.component.ts

@@ -2,9 +2,8 @@ import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
-import { Comparison } from '@ghostfolio/common/interfaces';
 
-import { data } from '../data';
+import { products } from '../products';
 
 @Component({
   host: { class: 'page' },
@@ -14,11 +13,11 @@ import { data } from '../data';
   templateUrl: '../page-template.html'
 })
 export class ParqetPageComponent {
-  public product1: Comparison = data.find(({ key }) => {
+  public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
 
-  public product2: Comparison = data.find(({ key }) => {
+  public product2 = products.find(({ key }) => {
     return key === 'parqet';
   });
 }

apps/client/src/app/pages/alternatives/products/yeekatee-page.component.ts

@@ -2,9 +2,8 @@ import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
-import { Comparison } from '@ghostfolio/common/interfaces';
 
-import { data } from '../data';
+import { products } from '../products';
 
 @Component({
   host: { class: 'page' },
@@ -14,11 +13,11 @@ import { data } from '../data';
   templateUrl: '../page-template.html'
 })
 export class YeekateePageComponent {
-  public product1: Comparison = data.find(({ key }) => {
+  public product1 = products.find(({ key }) => {
     return key === 'ghostfolio';
   });
 
-  public product2: Comparison = data.find(({ key }) => {
+  public product2 = products.find(({ key }) => {
     return key === 'yeekatee';
   });
 }

libs/common/src/lib/interfaces/index.ts

@@ -10,7 +10,6 @@ import type {
 import type { BenchmarkMarketDataDetails } from './benchmark-market-data-details.interface';
 import type { BenchmarkProperty } from './benchmark-property.interface';
 import type { Benchmark } from './benchmark.interface';
-import { Comparison } from './comparison';
 import type { Coupon } from './coupon.interface';
 import type { DataProviderInfo } from './data-provider-info.interface';
 import type { EnhancedSymbolProfile } from './enhanced-symbol-profile.interface';
@@ -33,6 +32,7 @@ import type { PortfolioReportRule } from './portfolio-report-rule.interface';
 import type { PortfolioReport } from './portfolio-report.interface';
 import type { PortfolioSummary } from './portfolio-summary.interface';
 import type { Position } from './position.interface';
+import type { Product } from './product';
 import type { BenchmarkResponse } from './responses/benchmark-response.interface';
 import type { ResponseError } from './responses/errors.interface';
 import type { ImportResponse } from './responses/import-response.interface';
@@ -59,7 +59,6 @@ export {
   BenchmarkMarketDataDetails,
   BenchmarkProperty,
   BenchmarkResponse,
-  Comparison,
   Coupon,
   DataProviderInfo,
   EnhancedSymbolProfile,
@@ -85,6 +84,7 @@ export {
   PortfolioReportRule,
   PortfolioSummary,
   Position,
+  Product,
   ResponseError,
   ScraperConfiguration,
   Statistics,

libs/common/src/lib/interfaces/comparison.ts → libs/common/src/lib/interfaces/product.ts

@@ -1,4 +1,5 @@
-export interface Comparison {
+export interface Product {
+  component: any;
   founded?: number;
   hasFreePlan?: boolean;
   isOpenSource: boolean;