adds routing and styling

EsraDoerksen · Oct 29, 2023 · 8990768 · 8990768
1 parent 34044b6
commit 8990768
Show file tree

Hide file tree

Showing 9 changed files with 98 additions and 59 deletions.
diff --git a/bank-advisor/src/app/app-routing.module.ts b/bank-advisor/src/app/app-routing.module.ts
@@ -2,9 +2,10 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { BigExpensesComponent } from './components/big-expenses/big-expenses.component';
 import { RegularExpensesComponent } from './components/regular-expenses/regular-expenses.component';
+import { AllExpensesComponent } from './components/all-expenses/all-expenses.component';
 
 const routes: Routes = [
-  { path: '', redirectTo: 'matches', pathMatch: 'full' },
+  { path: '', component: AllExpensesComponent },
   { path: 'big-expenses', component: BigExpensesComponent },
   { path: 'regular-expenses', component: RegularExpensesComponent },
   { path: '**', redirectTo: 'matches', pathMatch: 'full' },

diff --git a/bank-advisor/src/app/app.component.html b/bank-advisor/src/app/app.component.html
@@ -16,9 +16,13 @@
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
       <ul class="navbar-nav me-auto mb-2 mb-lg-0">
         <li class="nav-item">
-          <button class="nav-link active" (click)="setBigTransactions()">
-            Big expeses
-          </button>
+          <a
+            class="nav-link"
+            routerLink="/big-expenses"
+            routerLinkActive="active"
+            ariaCurrentWhenActive="page"
+            >Big expenses</a
+          >
         </li>
         <li class="nav-item">
           <a
@@ -58,4 +62,4 @@
 <div>
   <app-all-expenses></app-all-expenses>
 </div>
-<router-outlet></router-outlet>
+<div><router-outlet></router-outlet></div>
diff --git a/bank-advisor/src/app/components/all-expenses/all-expenses.component.html b/bank-advisor/src/app/components/all-expenses/all-expenses.component.html
@@ -1,5 +1,5 @@
 <div class="margin-x">
-  <app-big-expenses></app-big-expenses>
+  <!--<app-big-expenses></app-big-expenses>
   <app-regular-expenses></app-regular-expenses>
-  <app-contract-expenses></app-contract-expenses>
+  <app-contract-expenses></app-contract-expenses>-->
 </div>
diff --git a/bank-advisor/src/app/components/big-expenses/big-expenses.component.css b/bank-advisor/src/app/components/big-expenses/big-expenses.component.css
@@ -1,17 +1,4 @@
-.text-orange {
-  border-color: orange;
-}
-
-.text-red {
-  border-color: red;
-}
-
-.red {
-  fill: red;
-  color: red;
-  background-color: red;
-}
-
-.bg-grey {
-  background-color: grey;
+.margin-x {
+  margin-left: 15%;
+  margin-right: 15%;
 }
diff --git a/bank-advisor/src/app/components/big-expenses/big-expenses.component.html b/bank-advisor/src/app/components/big-expenses/big-expenses.component.html
@@ -1,42 +1,45 @@
-<h1 class="display-5">Big expenses</h1>
-<p>
-  Those are the transactions, which have a big spending amount. You should
-  analyze what you are spending your money on.
-</p>
+<div class="margin-x">
+  <h1 class="display-5">Big expenses</h1>
+  <p>
+    Those are the transactions, which have a big spending amount. You should
+    analyze what you are spending your money on.
+  </p>
 
-<ul *ngFor="let bigTransaction of bigTransactions" class="list-group">
-  <li class="d-flex align-items-center justify-content-center mb-2 rounded">
-    <div class="card mb-3 w-100 border border-success rounded">
-      <div class="row g-0">
-        <div class="col-md-2 bg-light">
-          <p class="text-center align-text-middle fw-bold mt-4 h5">
-            {{ bigTransaction.amount }} CHF
-          </p>
-        </div>
-        <div class="col-md-8">
-          <div class="card-body">
-            <h5 class="card-title">{{ bigTransaction.description }}</h5>
-            <p class="card-text">
-              You bought a
-              {{ bigTransaction.description }} at {{ bigTransaction.location }}.
+  <ul *ngFor="let bigTransaction of bigTransactions" class="list-group">
+    <li class="d-flex align-items-center justify-content-center mb-2 rounded">
+      <div class="card mb-3 w-100 border border-success rounded">
+        <div class="row g-0">
+          <div class="col-md-2 bg-light">
+            <p class="text-center align-text-middle fw-bold mt-4 h5">
+              {{ bigTransaction.amount }} CHF
+            </p>
+          </div>
+          <div class="col-md-8">
+            <div class="card-body">
+              <h5 class="card-title">{{ bigTransaction.description }}</h5>
+              <p class="card-text">
+                You bought a
+                {{ bigTransaction.description }} at
+                {{ bigTransaction.location }}.
+              </p>
+            </div>
+          </div>
+          <div class="col-md-2 bg-light p-1">
+            <p class="text-center align-text-middle mt-4">
+              Bought at the {{ bigTransaction.timeStamp }}
             </p>
           </div>
-        </div>
-        <div class="col-md-2 bg-light p-1">
-          <p class="text-center align-text-middle mt-4">
-            Bought at the {{ bigTransaction.timeStamp }}
-          </p>
         </div>
       </div>
-    </div>
-  </li>
-</ul>
-<div class="card mb-3 w-100 border border-success rounded bg-success">
-  <div class="row g-0">
-    <div>
-      <div class="card-body">
-        <h5 class="card-title">Test</h5>
-        <p class="card-text">Test</p>
+    </li>
+  </ul>
+  <div class="card mb-3 w-100 border border-success rounded bg-success">
+    <div class="row g-0">
+      <div>
+        <div class="card-body">
+          <h5 class="card-title">Test</h5>
+          <p class="card-text">Test</p>
+        </div>
       </div>
     </div>
   </div>

diff --git a/bank-advisor/src/app/components/contract-expenses/contract-expenses.component.css b/bank-advisor/src/app/components/contract-expenses/contract-expenses.component.css
@@ -0,0 +1,4 @@
+.margin-x {
+  margin-left: 15%;
+  margin-right: 15%;
+}
diff --git a/bank-advisor/src/app/components/contract-expenses/contract-expenses.component.ts b/bank-advisor/src/app/components/contract-expenses/contract-expenses.component.ts
@@ -1,11 +1,24 @@
 import { Component, Input } from '@angular/core';
 import { Transaction } from 'src/app/models/transaction.interface';
+import { User } from '../../models/user.interface';
+import { Account } from '../../models/account.interface';
+import { DataService } from '../../services/data.service';
 
 @Component({
   selector: 'app-contract-expenses',
   templateUrl: './contract-expenses.component.html',
   styleUrls: ['./contract-expenses.component.css'],
 })
 export class ContractExpensesComponent {
-  @Input() contractTransactions: Transaction[] = [];
+  private user: User = {} as User;
+  private account: Account = {} as Account;
+  contractTransactions: Transaction[] = [];
+
+  constructor(dataService: DataService) {
+    this.user = dataService.getUser();
+    this.account = dataService.getAccount();
+    this.contractTransactions = this.account.transactions.filter(
+      (t) => t.standingOrder
+    );
+  }
 }
diff --git a/bank-advisor/src/app/components/regular-expenses/regular-expenses.component.css b/bank-advisor/src/app/components/regular-expenses/regular-expenses.component.css
@@ -0,0 +1,4 @@
+.margin-x {
+  margin-left: 15%;
+  margin-right: 15%;
+}
diff --git a/bank-advisor/src/app/components/regular-expenses/regular-expenses.component.ts b/bank-advisor/src/app/components/regular-expenses/regular-expenses.component.ts
@@ -1,11 +1,34 @@
 import { Component, Input } from '@angular/core';
 import { Transaction } from 'src/app/models/transaction.interface';
+import { DataService } from '../../services/data.service';
+import { Account } from '../../models/account.interface';
+import { User } from '../../models/user.interface';
 
 @Component({
   selector: 'app-regular-expenses',
   templateUrl: './regular-expenses.component.html',
   styleUrls: ['./regular-expenses.component.css'],
 })
 export class RegularExpensesComponent {
-  @Input() regularTransactions: Transaction[] = [];
+  private user: User = {} as User;
+  private account: Account = {} as Account;
+  regularTransactions: Transaction[] = [];
+
+  constructor(dataService: DataService) {
+    this.user = dataService.getUser();
+    this.account = dataService.getAccount();
+    const transactionCounts: { [key: string]: number } = {};
+
+    this.account.transactions.forEach((t) => {
+      if (transactionCounts[t.location]) {
+        transactionCounts[t.location]++;
+      } else {
+        transactionCounts[t.location] = 1;
+      }
+    });
+
+    this.regularTransactions = this.account.transactions.filter(
+      (t) => transactionCounts[t.location] > 2
+    );
+  }
 }