Add list of tasks

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 {}

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>

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);
+}

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;
+    });
+  }
 
 }