Feature/add tools section (#120)

* Add tools section

* Update changelog

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Added a section for _Analysis_, _X-ray_ and upcoming tools
+
 ### Changed
 
 - Introduced a user service implemented as an observable store (single source of truth for state)

apps/client/src/app/app-routing.module.ts

@@ -71,6 +71,11 @@ const routes: Routes = [
     loadChildren: () =>
       import('./pages/login/login-page.module').then((m) => m.LoginPageModule)
   },
+  {
+    path: 'tools',
+    loadChildren: () =>
+      import('./pages/tools/tools-page.module').then((m) => m.ToolsPageModule)
+  },
   {
     path: 'transactions',
     loadChildren: () =>

apps/client/src/app/components/header/header.component.html

@@ -19,18 +19,15 @@
       class="d-none d-sm-block mx-1"
       i18n
       mat-flat-button
-      [color]="currentRoute === 'analysis' ? 'primary' : null"
-      [routerLink]="['/analysis']"
-      >Analysis</a
-    >
-    <a
-      *ngIf="user?.settings?.viewMode === 'DEFAULT'"
-      class="d-none d-sm-block mx-1"
-      i18n
-      mat-flat-button
-      [color]="currentRoute === 'report' ? 'primary' : null"
-      [routerLink]="['/report']"
-      >X-ray</a
+      [color]="
+        currentRoute === 'analysis' ||
+        currentRoute === 'report' ||
+        currentRoute === 'tools'
+          ? 'primary'
+          : null
+      "
+      [routerLink]="['/tools']"
+      >Tools</a
     >
     <a
       class="d-none d-sm-block mx-1"
@@ -142,17 +139,14 @@
         class="d-block d-sm-none"
         i18n
         mat-menu-item
-        [ngClass]="{ 'font-weight-bold': currentRoute === 'analysis' }"
-        [routerLink]="['/analysis']"
-        >Analysis</a
-      >
-      <a
-        class="d-block d-sm-none"
-        i18n
-        mat-menu-item
-        [ngClass]="{ 'font-weight-bold': currentRoute === 'report' }"
-        [routerLink]="['/report']"
-        >X-ray</a
+        [ngClass]="{
+          'font-weight-bold':
+            currentRoute === 'analysis' ||
+            currentRoute === 'report' ||
+            currentRoute === 'tools'
+        }"
+        [routerLink]="['/tools']"
+        >Tools</a
       >
       <a
         class="d-block d-sm-none"

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

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
+
+import { ToolsPageComponent } from './tools-page.component';
+
+const routes: Routes = [
+  { path: '', component: ToolsPageComponent, canActivate: [AuthGuard] }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ToolsPageRoutingModule {}

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

@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Component({
+  selector: 'gf-tools-page',
+  templateUrl: './tools-page.html',
+  styleUrls: ['./tools-page.scss']
+})
+export class ToolsPageComponent implements OnInit {
+  private unsubscribeSubject = new Subject<void>();
+
+  /**
+   * @constructor
+   */
+  public constructor() {}
+
+  /**
+   * Initializes the controller
+   */
+  public ngOnInit() {}
+}

apps/client/src/app/pages/tools/tools-page.html

@@ -0,0 +1,33 @@
+<div class="container">
+  <h3 class="d-flex justify-content-center mb-3" i18n>Tools</h3>
+  <div class="row">
+    <div class="col-xs-12 col-md-6">
+      <mat-card class="mb-3">
+        <h4 i18n>Analysis</h4>
+        <p class="mb-0">
+          Ghostfolio Analysis shows your positions and visualizes your
+          portfolio.
+        </p>
+        <p class="text-right">
+          <button color="primary" i18n mat-button [routerLink]="['/analysis']">
+            Open Analysis →
+          </button>
+        </p>
+      </mat-card>
+    </div>
+    <div class="col-xs-12 col-md-6">
+      <mat-card class="mb-3">
+        <h4 i18n>X-ray</h4>
+        <p class="mb-0">
+          Ghostfolio X-ray uses static analysis to identify potential issues and
+          risks in your portfolio.
+        </p>
+        <p class="text-right">
+          <button color="primary" i18n mat-button [routerLink]="['/report']">
+            Open X-ray →
+          </button>
+        </p>
+      </mat-card>
+    </div>
+  </div>
+</div>

apps/client/src/app/pages/tools/tools-page.module.ts

@@ -0,0 +1,23 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { RouterModule } from '@angular/router';
+
+import { ToolsPageRoutingModule } from './tools-page-routing.module';
+import { ToolsPageComponent } from './tools-page.component';
+
+@NgModule({
+  declarations: [ToolsPageComponent],
+  exports: [],
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatCardModule,
+    RouterModule,
+    ToolsPageRoutingModule
+  ],
+  providers: [],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class ToolsPageModule {}

apps/client/src/app/pages/tools/tools-page.scss

@@ -0,0 +1,8 @@
+:host {
+  color: rgb(var(--dark-primary-text));
+  display: block;
+}
+
+:host-context(.is-dark-theme) {
+  color: rgb(var(--light-primary-text));
+}