frontend/allowance-planner-v2/src/app/models/history.ts

@@ -0,0 +1,4 @@
+export interface History {
+    timestamp: string;
+    allowance: number;
+}

frontend/allowance-planner-v2/src/app/pages/history/history.module.ts

@@ -5,6 +5,8 @@ import { FormsModule } from '@angular/forms';
 import { HistoryPage } from './history.page';
 
 import { HistoryPageRoutingModule } from './history-routing.module';
+import { provideHttpClient } from '@angular/common/http';
+import { HistoryService } from 'src/app/services/history.service';
 
 @NgModule({
   imports: [
@@ -13,6 +15,10 @@ import { HistoryPageRoutingModule } from './history-routing.module';
     FormsModule,
     HistoryPageRoutingModule
   ],
-  declarations: [HistoryPage]
+  declarations: [HistoryPage],
+  providers: [
+    provideHttpClient(),
+    HistoryService
+  ]
 })
 export class HistoryPageModule {}

frontend/allowance-planner-v2/src/app/pages/history/history.page.html

@@ -7,5 +7,14 @@
 </ion-header>
 
 <ion-content>
-
+  <div class="item" *ngFor="let history of history$ | async">
+    <div class="left">
+      <div class="date">{{ history.timestamp | date: 'yyyy-MM-dd' }}</div>
+      <div class="description">Seba made an oopsie</div>
+    </div>
+    <div
+      class="amount"
+      [ngClass]="{ 'negative': history.allowance < 0 }"
+    >{{ history.allowance }}</div>
+  </div>
 </ion-content>

frontend/allowance-planner-v2/src/app/pages/history/history.page.scss

@@ -0,0 +1,25 @@
+.item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-bottom: 1px solid var(--line-color);
+    padding: 8px;
+}
+
+.date {
+    color: var(--line-color);
+}
+
+.description {
+    color: var(--font-color);
+}
+
+.amount {
+    margin-left: auto;
+    font-size: 22px;
+    color: var(--positive-amount-color);
+}
+
+.negative {
+    color: var(--negative-amount-color);
+}

frontend/allowance-planner-v2/src/app/pages/history/history.page.ts

@@ -1,4 +1,9 @@
 import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { ViewWillEnter } from '@ionic/angular';
+import { BehaviorSubject } from 'rxjs';
+import { History } from 'src/app/models/history';
+import { HistoryService } from 'src/app/services/history.service';
 
 @Component({
   selector: 'app-history',
@@ -6,8 +11,29 @@ import { Component } from '@angular/core';
   styleUrls: ['history.page.scss'],
   standalone: false,
 })
-export class HistoryPage {
+export class HistoryPage implements ViewWillEnter {
+  userId: number;
+  public history$: BehaviorSubject<Array<History>> = new BehaviorSubject<Array<History>>([]);
+  
 
-  constructor() {}
+  constructor(
+    private route: ActivatedRoute,
+    private historyService: HistoryService
+  ) {
+    this.userId = this.route.snapshot.params['id'];
+    this.getHistory();
+  }
 
+  ionViewWillEnter(): void {
+    this.getHistory();
+  }
+
+  getHistory() {
+    setTimeout(() => {
+      this.historyService.getHistoryList(this.userId).subscribe(history => {
+        console.log('HISTORY: ', history);
+        this.history$.next(history);
+      })
+    }, 20);
+  }
 }

frontend/allowance-planner-v2/src/app/pages/tabs/tabs-routing.module.ts

@@ -8,7 +8,7 @@ const routes: Routes = [
     component: TabsPage,
     children: [
       {
-        path: 'history',
+        path: 'history/:id',
         loadChildren: () => import('../history/history.module').then(m => m.HistoryPageModule)
       },
       {

frontend/allowance-planner-v2/src/app/pages/tabs/tabs.page.html

@@ -1,6 +1,6 @@
 <ion-tabs>
   <ion-tab-bar slot="bottom">
-    <ion-tab-button tab="history" href="/tabs/history">
+    <ion-tab-button [tab]="historyTab" [href]="historyNav">
       <mat-icon>history</mat-icon>
     </ion-tab-button>
     <ion-tab-button tab="allowance" href="/tabs/allowance">

frontend/allowance-planner-v2/src/app/pages/tabs/tabs.page.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { StorageService } from 'src/app/services/storage.service';
 
 @Component({
   selector: 'app-tabs',
@@ -7,6 +8,16 @@ import { Component } from '@angular/core';
   standalone: false,
 })
 export class TabsPage {
-  constructor() {}
+  historyNav = '';
+  historyTab = '';
+
+  constructor(private storageService: StorageService) {
+    this.storageService.getCurrentUserId().then((userId) => {
+        if (userId !== undefined && userId !== null) {
+          this.historyNav = `/tabs/history/${userId}`;
+          this.historyTab = `history/${userId}`;
+        }
+      });
+  }
 
 }

frontend/allowance-planner-v2/src/app/services/history.service.ts

@@ -0,0 +1,17 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { History } from '../models/history';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class HistoryService {
+    private url = 'http://localhost:8080/api';
+
+    constructor(private http: HttpClient) {}
+
+    getHistoryList(userId: number): Observable<Array<History>> {
+        return this.http.get<History[]>(`${this.url}/user/${userId}/history`);
+    }
+}