From 0007f10ae32097e3755fb888c699955e43815621 Mon Sep 17 00:00:00 2001
From: Huffle <knaepen.selina@gmail.com>
Date: Thu, 15 May 2025 14:55:47 +0200
Subject: [PATCH] Add list of tasks

---
 .../src/app/models/task.ts                    |  6 +++
 .../app/pages/allowance/allowance.page.html   |  2 +-
 .../src/app/pages/history/history.page.html   |  2 +-
 .../src/app/pages/tasks/tasks.module.ts       | 12 ++++-
 .../src/app/pages/tasks/tasks.page.html       | 15 +++++-
 .../src/app/pages/tasks/tasks.page.scss       | 47 +++++++++++++++++++
 .../src/app/pages/tasks/tasks.page.ts         | 17 +++++--
 .../src/app/services/task.service.ts          | 16 +++++++
 frontend/allowance-planner-v2/src/global.scss |  8 ++++
 .../src/theme/variables.scss                  |  5 ++
 10 files changed, 122 insertions(+), 8 deletions(-)
 create mode 100644 frontend/allowance-planner-v2/src/app/models/task.ts
 create mode 100644 frontend/allowance-planner-v2/src/app/services/task.service.ts

diff --git a/frontend/allowance-planner-v2/src/app/models/task.ts b/frontend/allowance-planner-v2/src/app/models/task.ts
new file mode 100644
index 0000000..c2a3ca4
--- /dev/null
+++ b/frontend/allowance-planner-v2/src/app/models/task.ts
@@ -0,0 +1,6 @@
+export interface Task {
+    id: number;
+    name: string;
+    reward: number;
+    assigned: number;
+}
\ No newline at end of file
diff --git a/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.html b/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.html
index 1f9e973..f389801 100644
--- a/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.html
+++ b/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.html
@@ -1,4 +1,4 @@
-<ion-header [translucent]="true">
+<ion-header [translucent]="true" class="ion-no-border">
   <ion-toolbar>
     <ion-title>
       Allowance
diff --git a/frontend/allowance-planner-v2/src/app/pages/history/history.page.html b/frontend/allowance-planner-v2/src/app/pages/history/history.page.html
index 6df4ad8..d95fff2 100644
--- a/frontend/allowance-planner-v2/src/app/pages/history/history.page.html
+++ b/frontend/allowance-planner-v2/src/app/pages/history/history.page.html
@@ -1,4 +1,4 @@
-<ion-header [translucent]="true">
+<ion-header [translucent]="true" class="ion-no-border">
   <ion-toolbar>
     <ion-title>
       History
diff --git a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.module.ts b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.module.ts
index bca7dfe..788ad75 100644
--- a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.module.ts
+++ b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.module.ts
@@ -5,14 +5,22 @@ import { FormsModule } from '@angular/forms';
 import { TasksPage } from './tasks.page';
 
 import { TasksPageRoutingModule } from './tasks-routing.module';
+import { provideHttpClient } from '@angular/common/http';
+import { TaskService } from 'src/app/services/task.service';
+import { MatIconModule } from '@angular/material/icon';
 
 @NgModule({
   imports: [
     IonicModule,
     CommonModule,
     FormsModule,
-    TasksPageRoutingModule
+    TasksPageRoutingModule,
+    MatIconModule,
   ],
-  declarations: [TasksPage]
+  declarations: [TasksPage],
+  providers: [
+    provideHttpClient(),
+    TaskService
+  ]
 })
 export class TasksPageModule {}
diff --git a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.html b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.html
index 522b12c..5521342 100644
--- a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.html
+++ b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.html
@@ -1,4 +1,4 @@
-<ion-header [translucent]="true">
+<ion-header [translucent]="true" class="ion-no-border">
   <ion-toolbar>
     <ion-title>
       Tasks
@@ -7,4 +7,17 @@
 </ion-header>
 
 <ion-content>
+  <div class="icon">
+    <mat-icon>filter_alt</mat-icon>
+  </div>
+  <div class="list">
+    <div class="task" *ngFor="let task of tasks">
+      <button>Done</button>
+      <div class="name">{{ task.name }}</div>
+      <div
+        class="reward"
+        [ngClass]="{ 'negative': task.reward < 0 }"
+      >{{ task.reward.toFixed(2) }} SP</div>
+    </div>
+  </div>
 </ion-content>
diff --git a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.scss b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.scss
index e69de29..aa15767 100644
--- a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.scss
+++ b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.scss
@@ -0,0 +1,47 @@
+.icon {
+    padding: 5px;
+    display: flex;
+    justify-content: flex-end;
+    color: var(--ion-color-primary);
+}
+
+mat-icon {
+    font-size: 35px;
+    width: 35px;
+    height: 35px;
+}
+
+.list {
+    border-top: 1px solid var(--line-color);
+}
+
+.task {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-bottom: 1px solid var(--line-color);
+    padding: 5px;
+}
+
+.name {
+    margin-left: 10px;
+    color: var(--font-color);
+}
+
+.reward {
+    margin-left: auto;
+    margin-right: 15px;
+    color: var(--positive-amount-color);
+}
+
+.negative {
+    color: var(--negative-amount-color);
+}
+
+button {
+    width: 57px;
+    height: 30px;
+    border-radius: 10px;
+    color: white;
+    background: var(--confirm-button-color);
+}
\ No newline at end of file
diff --git a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.ts b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.ts
index 71f1b6a..acec48c 100644
--- a/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.ts
+++ b/frontend/allowance-planner-v2/src/app/pages/tasks/tasks.page.ts
@@ -1,4 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { TaskService } from 'src/app/services/task.service';
+import { Task } from 'src/app/models/task';
 
 @Component({
   selector: 'app-tasks',
@@ -6,8 +8,17 @@ import { Component } from '@angular/core';
   styleUrls: ['tasks.page.scss'],
   standalone: false,
 })
-export class TasksPage {
+export class TasksPage implements OnInit {
+  public tasks: Array<Task> = [];
 
-  constructor() {}
+  constructor(
+    private taskService: TaskService
+  ) {}
+
+  ngOnInit(): void {
+    this.taskService.getTaskList().subscribe(tasks => {
+      this.tasks = tasks;
+    });
+  }
 
 }
diff --git a/frontend/allowance-planner-v2/src/app/services/task.service.ts b/frontend/allowance-planner-v2/src/app/services/task.service.ts
new file mode 100644
index 0000000..5d4890c
--- /dev/null
+++ b/frontend/allowance-planner-v2/src/app/services/task.service.ts
@@ -0,0 +1,16 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Task } from '../models/task';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class TaskService {
+    private url = 'http://localhost:8080/api'
+    constructor(private http: HttpClient) {}
+
+    getTaskList(): Observable<Array<Task>> {
+        return this.http.get<Task[]>(`${this.url}/tasks`);
+    }
+}
\ No newline at end of file
diff --git a/frontend/allowance-planner-v2/src/global.scss b/frontend/allowance-planner-v2/src/global.scss
index 840c6c6..ed5e308 100644
--- a/frontend/allowance-planner-v2/src/global.scss
+++ b/frontend/allowance-planner-v2/src/global.scss
@@ -35,3 +35,11 @@
 /* @import "@ionic/angular/css/palettes/dark.always.css"; */
 /* @import "@ionic/angular/css/palettes/dark.class.css"; */
 @import "@ionic/angular/css/palettes/dark.system.css";
+
+ion-title {
+    color: var(--ion-color-primary);
+}
+
+ion-header {
+    border-bottom: 1px solid var(--line-color);
+}
\ No newline at end of file
diff --git a/frontend/allowance-planner-v2/src/theme/variables.scss b/frontend/allowance-planner-v2/src/theme/variables.scss
index a349613..debd86e 100644
--- a/frontend/allowance-planner-v2/src/theme/variables.scss
+++ b/frontend/allowance-planner-v2/src/theme/variables.scss
@@ -4,6 +4,11 @@
     --ion-color-primary: #9C4BE4;
     --ion-color-secondary: #F5E9FF;
     --ion-background-color: #F3F3F3;
+    --font-color: #7B7B7B;
+    --confirm-button-color: #58A66F;
+    --positive-amount-color: #7DCB7D;
+    --negative-amount-color: #C55454;
+    --line-color: #CACACA;
 
     --ion-font-family: 'Myfont';
 }