adds styling and last routing

EsraDoerksen · Oct 29, 2023 · aa97499 · aa97499
1 parent c18bb90
commit aa97499
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 52 deletions.
diff --git a/bank-advisor/src/app/app-routing.module.ts b/bank-advisor/src/app/app-routing.module.ts
@@ -3,11 +3,13 @@ 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';
+import { ContractExpensesComponent } from './components/contract-expenses/contract-expenses.component';
 
 const routes: Routes = [
   { path: '', component: AllExpensesComponent },
   { path: 'big-expenses', component: BigExpensesComponent },
   { path: 'regular-expenses', component: RegularExpensesComponent },
+  { path: 'contracts', component: ContractExpensesComponent },
   { path: '**', redirectTo: 'matches', pathMatch: 'full' },
 ];
 

diff --git a/bank-advisor/src/app/app.component.html b/bank-advisor/src/app/app.component.html
@@ -35,7 +35,7 @@
         <li class="nav-item">
           <a
             class="nav-link"
-            routerLink="/regular-expenses"
+            routerLink="/contracts"
             routerLinkActive="selected"
             >Contracts</a
           >
@@ -44,8 +44,8 @@
     </div>
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="25"
-      height="25"
+      width="30"
+      height="30"
       fill="currentColor"
       class="bi bi-robot"
       viewBox="0 0 16 16"

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,3 @@
 <div class="margin-x">
-  <!--<app-big-expenses></app-big-expenses>
-  <app-regular-expenses></app-regular-expenses>
-  <app-contract-expenses></app-contract-expenses>-->
+  <div></div>
 </div>
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,4 +1,4 @@
-<div class="margin-x">
+<div class="margin-x mt-3">
   <h1 class="display-5">Big expenses</h1>
   <p>
     Those are the transactions, which have a big spending amount. You should
@@ -37,8 +37,11 @@ <h5 class="card-title">{{ bigTransaction.description }}</h5>
     <div class="row g-0">
       <div>
         <div class="card-body">
-          <h5 class="card-title">Test</h5>
-          <p class="card-text">Test</p>
+          <h5 class="card-title">Big saving potential</h5>
+          <p class="card-text">
+            We can see, that you bought a lot of electronics in the past! There
+            are other options. Secondary buys and toppreise.ch
+          </p>
         </div>
       </div>
     </div>

diff --git a/bank-advisor/src/app/components/big-expenses/big-expenses.component.spec.ts b/bank-advisor/src/app/components/big-expenses/big-expenses.component.spec.ts
@@ -8,7 +8,7 @@ describe('BigExpensesComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [BigExpensesComponent]
+      declarations: [BigExpensesComponent],
     });
     fixture = TestBed.createComponent(BigExpensesComponent);
     component = fixture.componentInstance;

diff --git a/bank-advisor/src/app/components/contract-expenses/contract-expenses.component.html b/bank-advisor/src/app/components/contract-expenses/contract-expenses.component.html
@@ -1,23 +1,48 @@
-<h1 class="display-3">Contract expenses</h1>
-<p>
-  Those are the transactions, which are bound to a contract. Are those contract
-  really the best.
-</p>
-<ul *ngFor="let transaction of this.contractTransactions" class="list-group">
-  <li class="border">
-    <div class="card" style="width: 18rem">
-      <div class="card-body">
-        <h5 class="card-title">{{ transaction.description }}</h5>
-        <h6 class="card-subtitle mb-2 text-muted">
-          You purchased a {{ transaction.description }} at
-          {{ transaction.location }}
-        </h6>
-        <p class="card-text">
-          You payed {{ transaction.amount }} CHF for a
-          {{ transaction.description }}. In the future you could definitely save
-          money there!
-        </p>
+<div class="margin-x mt-3">
+  <h1 class="display-5">Contract expenses</h1>
+  <p>
+    Those are the transactions, which are bound to a contract. Are those
+    contract really the best.
+  </p>
+
+  <ul *ngFor="let transaction of this.contractTransactions" 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">
+              {{ transaction.amount }} CHF
+            </p>
+          </div>
+          <div class="col-md-8">
+            <div class="card-body">
+              <h5 class="card-title">{{ transaction.description }}</h5>
+              <p class="card-text">
+                You bought a
+                {{ transaction.description }} at {{ transaction.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 {{ transaction.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">Big saving potential</h5>
+          <p class="card-text">
+            We can see, that you bought a lot of electronics in the past! There
+            are other options. Secondary buys and toppreise.ch
+          </p>
+        </div>
       </div>
     </div>
-  </li>
-</ul>
+  </div>
+</div>
diff --git a/bank-advisor/src/app/components/regular-expenses/regular-expenses.component.html b/bank-advisor/src/app/components/regular-expenses/regular-expenses.component.html
@@ -1,24 +1,48 @@
-<h1 class="display-3">Regular expenses</h1>
-<p>
-  Those are the transactions, which are regulary executed. You should ask
-  yoursef the question if that's really neccessary.
-</p>
+<div class="margin-x mt-3">
+  <h1 class="display-5">Regular expenses</h1>
+  <p>
+    Those are the transactions, which are regulary executed. You should ask
+    yoursef the question if that's really neccessary.
+  </p>
 
-<ul *ngFor="let transaction of this.regularTransactions" class="list-group">
-  <li class="border">
-    <div class="card" style="width: 18rem">
-      <div class="card-body">
-        <h5 class="card-title">{{ transaction.description }}</h5>
-        <h6 class="card-subtitle mb-2 text-muted">
-          You purchased a {{ transaction.description }} at
-          {{ transaction.location }}
-        </h6>
-        <p class="card-text">
-          You payed {{ transaction.amount }} CHF for a
-          {{ transaction.description }}. In the future you could definitely save
-          money there!
-        </p>
+  <ul *ngFor="let transaction of this.regularTransactions" 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">
+              {{ transaction.amount }} CHF
+            </p>
+          </div>
+          <div class="col-md-8">
+            <div class="card-body">
+              <h5 class="card-title">{{ transaction.description }}</h5>
+              <p class="card-text">
+                You bought a
+                {{ transaction.description }} at {{ transaction.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 {{ transaction.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">Big saving potential</h5>
+          <p class="card-text">
+            We can see, that you bought a lot of electronics in the past! There
+            are other options. Secondary buys and toppreise.ch
+          </p>
+        </div>
       </div>
     </div>
-  </li>
-</ul>
+  </div>
+</div>