From 550933db1156e6a0bb9fcb2d01d7212e6972a086 Mon Sep 17 00:00:00 2001
From: Huffle <knaepen.selina@gmail.com>
Date: Mon, 26 May 2025 09:10:25 +0200
Subject: [PATCH] AP-64 (#86)

closes #64

Reviewed-on: https://gitea.seeseepuff.be/seeseemelk/allowance_planner_2000/pulls/86
---
 backend/allowance_planner.db3.backup.2        | Bin 0 -> 20480 bytes
 .../src/app/app-routing.module.ts             |   1 -
 .../allowance/allowance-routing.module.ts     |   8 ++
 .../app/pages/allowance/allowance.page.html   |   9 ++-
 .../app/pages/allowance/allowance.page.scss   |  13 ++-
 .../src/app/pages/allowance/allowance.page.ts |  25 +++---
 .../edit-allowance-routing.module.ts          |  17 ++++
 .../edit-allowance/edit-allowance.module.ts   |  21 +++++
 .../edit-allowance/edit-allowance.page.html   |  31 ++++++++
 .../edit-allowance/edit-allowance.page.scss   |  45 +++++++++++
 .../edit-allowance.page.spec.ts               |  17 ++++
 .../edit-allowance/edit-allowance.page.ts     |  75 ++++++++++++++++++
 .../app/pages/edit-task/edit-task.page.html   |   2 +-
 .../src/app/services/allowance.service.ts     |   4 +
 frontend/allowance-planner-v2/src/global.scss |   4 +
 15 files changed, 250 insertions(+), 22 deletions(-)
 create mode 100644 backend/allowance_planner.db3.backup.2
 create mode 100644 frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance-routing.module.ts
 create mode 100644 frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.module.ts
 create mode 100644 frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.html
 create mode 100644 frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.scss
 create mode 100644 frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.spec.ts
 create mode 100644 frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.ts

diff --git a/backend/allowance_planner.db3.backup.2 b/backend/allowance_planner.db3.backup.2
new file mode 100644
index 0000000000000000000000000000000000000000..ab889f0775aee5a7834bd26a8e0249297685ea12
GIT binary patch
literal 20480
zcmeI(F-%iI7zgls_g-yj`@B{XD#76xOlg9MmQ@295(Z*a7;qvFdTn2L?IZ79Q*i^M
zlZ%Oq1B;_E(cL(?IciLFVAS1MXT5v0lmY<~0}lQ#dF{LV`tIHR?vCWq-rSv8R|;PC
zgPJ3Gkz@#^WRi122vtW+9i61ltxiV08|u)XIV@2!_PAi%o5V`B2%9|nG}W^8bx06^
z00bZa0SG_<0uX?}DG6*O&3JBj*m$@ooh45=p6556`mzYSXV%TT(^K=)e17W2>@@F|
z+sP3-$yIVo+^tJd5dmKf+?o@t@fEQ)YA5>|p$Hath3mfL^@iuEn7**?)C8B}zAEeu
zNGGTWxl`+&=#t~<ChiOKk|;Y3PxA40{Y~Lks*(q)TRV5KlcRju_xwh%@A|^}pcT*M
za>hnB!jMk55=Jkv9)hUo=-waN!$35hpzF4$hfWx}mAcr8+sT5O53OjRF8wzHRahUT
z@!Zgmv2i)-bJY!{AFQ?C%$_l67ang^j+mCxtqC>mwN+kn)bsG(v8nlu`u@48hG_ko
zu|0k6Ma|WB38NR<)6}SFcSF?*I&k?MI)M(F+ua2))>#5auNBpB9?HO7mbRK>lx-2V
z#eSU9pC8-?0uX=z1Rwwb2tWV=5P$##AOL~C6UZ7dGMu1uLWDxp&P6%1ofF;)`8;FO
z7#ZxNGmUcD6UA5h`9Hy)5%!aPV_(<@_Kv+~FH`{%1Rwwb2tWV=5P$##AOHafKmY<K
zDv(aZh+$D$EsiXVr&IA5>9g9I^qEd5|1zIR#o8gANn4#z_Tw#{GTR}YNvmi6?FzHk
zRfX!m0#SuJW3x}hVvh)W%f7Qsb%F!|2tWV=5P$##AOHafKmY;|fWXNJ3|I+b4AO*p
zMz8p4-^#?q0wuo*xnQdDi&6QM+L2IIn{9O5dJ{zl3>D2$YM69h?OnK%&*U?v^Zcu7
zW51Czb#1!*DtUkVJk=jH>8_#&Pbm3S%<Av|)uw;KS|`&r)CvIzKmY;|fB*y_009U<
W00Izzz`qelsviLKQ{psB<LN*1Ns?Ot

literal 0
HcmV?d00001

diff --git a/frontend/allowance-planner-v2/src/app/app-routing.module.ts b/frontend/allowance-planner-v2/src/app/app-routing.module.ts
index 2750f02..ffe16e8 100644
--- a/frontend/allowance-planner-v2/src/app/app-routing.module.ts
+++ b/frontend/allowance-planner-v2/src/app/app-routing.module.ts
@@ -11,7 +11,6 @@ const routes: Routes = [
     path: '',
     loadChildren: () => import('./pages/tabs/tabs.module').then(m => m.TabsPageModule)
   },
-
 ];
 @NgModule({
   imports: [
diff --git a/frontend/allowance-planner-v2/src/app/pages/allowance/allowance-routing.module.ts b/frontend/allowance-planner-v2/src/app/pages/allowance/allowance-routing.module.ts
index 607bbf1..5616c78 100644
--- a/frontend/allowance-planner-v2/src/app/pages/allowance/allowance-routing.module.ts
+++ b/frontend/allowance-planner-v2/src/app/pages/allowance/allowance-routing.module.ts
@@ -6,6 +6,14 @@ const routes: Routes = [
   {
     path: ':id',
     component: AllowancePage,
+  },
+  {
+    path: ':id/add',
+    loadChildren: () => import('../edit-allowance/edit-allowance.module').then(m => m.EditAllowancePageModule)
+  },
+  {
+    path: ':id/edit/:goalId',
+    loadChildren: () => import('../edit-allowance/edit-allowance.module').then(m => m.EditAllowancePageModule)
   }
 ];
 
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 0641aa1..eed3155 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,8 +1,11 @@
 <ion-header [translucent]="true" class="ion-no-border">
   <ion-toolbar>
-    <ion-title>
-      Allowance
-    </ion-title>
+    <div class="toolbar">
+      <ion-title>
+        Allowance
+      </ion-title>
+      <button class="top-add-button" (click)="createAllowance()">Add Goal</button>
+    </div>
   </ion-toolbar>
 </ion-header>
 
diff --git a/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.scss b/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.scss
index 696cb46..45530b8 100644
--- a/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.scss
+++ b/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.scss
@@ -58,11 +58,10 @@ button {
     padding-inline: 30px;
     border-radius: 10px;
     color: white;
-    font-size: 16px;
 }
 
 button:disabled,
-button[disabled]{
+button[disabled] {
     opacity: 0.5;
 }
 
@@ -127,4 +126,14 @@ button[disabled]{
     background-color: var(--legend-color);
     border-radius: 20px;
     margin-right: 2px;
+}
+
+.toolbar {
+    display: flex;
+}
+
+.top-add-button {
+    background-color: var(--ion-color-primary);
+    margin-right: 15px;
+    padding-inline: 15px;
 }
\ No newline at end of file
diff --git a/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.ts b/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.ts
index afe1e89..fdd460d 100644
--- a/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.ts
+++ b/frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { BehaviorSubject } from 'rxjs';
 import { Allowance } from 'src/app/models/allowance';
 import { AllowanceService } from 'src/app/services/allowance.service';
@@ -14,23 +14,11 @@ import { ViewWillEnter } from '@ionic/angular';
 })
 export class AllowancePage implements ViewWillEnter {
   private id: number;
-  // Move to add/edit page later
-  private possibleColors: Array<string> = [
-    '#6199D9',
-    '#D98B61',
-    '#DBC307',
-    '#13DEB5',
-    '#7DCB7D',
-    '#CF1DBD',
-    '#F53311',
-    '#2F00FF',
-    '#098B0D',
-    '#1BC2E8'
-  ];
   public allowance$: BehaviorSubject<Array<Allowance>> = new BehaviorSubject<Array<Allowance>>([]);
 
   constructor(
     private route: ActivatedRoute,
+    private router: Router,
     private allowanceService: AllowanceService
   ) {
     this.id = this.route.snapshot.params['id'];
@@ -46,7 +34,6 @@ export class AllowancePage implements ViewWillEnter {
       this.allowanceService.getAllowanceList(this.id).subscribe(allowance => {
         allowance[0].colour = '#9C4BE4';
         allowance[0].name = 'Main Allowance';
-        console.log('Allowance list: ', allowance);
         this.allowance$.next(allowance);
       })
     }, 10);
@@ -72,4 +59,12 @@ export class AllowancePage implements ViewWillEnter {
     }
     return goal.progress / allowanceTotal * 100;
   }
+
+  createAllowance() {
+    this.router.navigate(['add'], { relativeTo: this.route });
+  }
+
+  updateAllowance(id: number) {
+    this.router.navigate(['edit', id], { relativeTo: this.route });
+  }
 }
diff --git a/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance-routing.module.ts b/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance-routing.module.ts
new file mode 100644
index 0000000..728b259
--- /dev/null
+++ b/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance-routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { EditAllowancePage } from './edit-allowance.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: EditAllowancePage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class EditAllowancePageRoutingModule {}
diff --git a/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.module.ts b/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.module.ts
new file mode 100644
index 0000000..babc77f
--- /dev/null
+++ b/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.module.ts
@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { EditAllowancePageRoutingModule } from './edit-allowance-routing.module';
+
+import { EditAllowancePage } from './edit-allowance.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    EditAllowancePageRoutingModule,
+    ReactiveFormsModule
+  ],
+  declarations: [EditAllowancePage]
+})
+export class EditAllowancePageModule {}
diff --git a/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.html b/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.html
new file mode 100644
index 0000000..43ff437
--- /dev/null
+++ b/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.html
@@ -0,0 +1,31 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <div class="toolbar">
+      <ion-title *ngIf="isAddMode">Create Goal</ion-title>
+      <ion-title *ngIf="!isAddMode">Edit Goal</ion-title>
+    </div>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <form [formGroup]="form">
+    <label>Goal Name</label>
+    <input id="name" type="text" formControlName="name"/>
+
+    <label>Target</label>
+    <input id="target" type="number" placeholder="0.00" name="price" min="0" value="0" step="0.01" formControlName="target"/>
+
+    <label>Weight</label>
+    <input id="weight" type="number" placeholder="0.00" name="price" min="0" value="0" step="0.01" formControlName="weight"/>
+
+    <label>Colour</label>
+    <select formControlName="color">
+      <option *ngFor="let color of possibleColors" [value]="color" [style.--background]="color">{{color}}</option>
+    </select>
+
+    <button type="button" [disabled]="!form.valid" (click)="submit()">
+      <span *ngIf="isAddMode">Add Goal</span>
+      <span *ngIf="!isAddMode">Update Goal</span>
+    </button>
+  </form>
+</ion-content>
diff --git a/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.scss b/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.scss
new file mode 100644
index 0000000..3fee56e
--- /dev/null
+++ b/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.scss
@@ -0,0 +1,45 @@
+.toolbar {
+    display: flex;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 100%;
+}
+
+label {
+    color: var(--ion-color-primary);
+    margin-top: 25px;
+    margin-bottom: 10px;
+}
+
+input,
+select {
+    border: 1px solid var(--ion-color-primary);
+    border-radius: 5px;
+    width: 250px;
+}
+
+option {
+    --background: white;
+    background-color: var(--background);
+    color: var(--background);
+    font-family: var(--ion-font-family);
+}
+
+button {
+    background-color: var(--ion-color-primary);
+    border-radius: 5px;
+    color: white;
+    padding: 10px;
+    width: 250px;
+    margin-top: auto;
+    margin-bottom: 50px;
+}
+
+button:disabled,
+button[disabled]{
+    opacity: 0.5;
+}
\ No newline at end of file
diff --git a/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.spec.ts b/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.spec.ts
new file mode 100644
index 0000000..07d6d12
--- /dev/null
+++ b/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.spec.ts
@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { EditAllowancePage } from './edit-allowance.page';
+
+describe('EditAllowancePage', () => {
+  let component: EditAllowancePage;
+  let fixture: ComponentFixture<EditAllowancePage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditAllowancePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.ts b/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.ts
new file mode 100644
index 0000000..81f7c55
--- /dev/null
+++ b/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.ts
@@ -0,0 +1,75 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { AllowanceService } from 'src/app/services/allowance.service';
+
+@Component({
+  selector: 'app-edit-allowance',
+  templateUrl: './edit-allowance.page.html',
+  styleUrls: ['./edit-allowance.page.scss'],
+  standalone: false
+})
+export class EditAllowancePage implements OnInit {
+  public form: FormGroup;
+  public goalId: number;
+  public userId: number;
+  public isAddMode: boolean;
+  public possibleColors: Array<string> = [
+    '#6199D9',
+    '#D98B61',
+    '#DBC307',
+    '#13DEB5',
+    '#7DCB7D',
+    '#CF1DBD',
+    '#F53311',
+    '#2F00FF',
+    '#098B0D',
+    '#1BC2E8'
+  ];
+
+  constructor(
+    private route: ActivatedRoute,
+    private formBuilder: FormBuilder,
+    private allowanceService: AllowanceService,
+    private router: Router
+  ) {
+    this.userId = this.route.snapshot.params['id'];
+    this.goalId = this.route.snapshot.params['goalId'];
+    this.isAddMode = !this.goalId;
+
+    this.allowanceService.getAllowanceList(this.userId).subscribe((list) => {
+      for (let allowance of list) {
+        this.possibleColors = this.possibleColors.filter(color => color !== allowance.colour);
+        if (!this.isAddMode && this.goalId === allowance.id) {
+          this.possibleColors.unshift(allowance.colour);
+        }
+      }
+    });
+
+    this.form = this.formBuilder.group({
+      name: ['', Validators.required],
+      target: ['', Validators.required],
+      weight: ['', Validators.required],
+      color: ['', Validators.required]
+    });
+  }
+
+  ngOnInit() {
+  }
+
+  submit() {
+    const formValue = this.form.value;
+    const allowance = {
+      name: formValue.name,
+      target: formValue.target,
+      weight: formValue.weight,
+      colour: formValue.color,
+    };
+
+    if (this.isAddMode) {
+      this.allowanceService.createAllowance(allowance, this.userId);
+    }
+
+    this.router.navigate(['/tabs/allowance', this.userId]);
+  }
+}
diff --git a/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.html b/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.html
index 52eb693..3d9ee5c 100644
--- a/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.html
+++ b/frontend/allowance-planner-v2/src/app/pages/edit-task/edit-task.page.html
@@ -18,7 +18,7 @@
     <input id="name" type="text" formControlName="name"/>
 
     <label>Reward</label>
-    <input id="name" type="number" placeholder="0.00" name="price" min="0" value="0" step="0.01" formControlName="reward"/>
+    <input id="reward" type="number" placeholder="0.00" name="price" min="0" value="0" step="0.01" formControlName="reward"/>
 
     <label>Assigned</label>
     <select formControlName="assigned">
diff --git a/frontend/allowance-planner-v2/src/app/services/allowance.service.ts b/frontend/allowance-planner-v2/src/app/services/allowance.service.ts
index a32538a..c84189b 100644
--- a/frontend/allowance-planner-v2/src/app/services/allowance.service.ts
+++ b/frontend/allowance-planner-v2/src/app/services/allowance.service.ts
@@ -14,4 +14,8 @@ export class AllowanceService {
     getAllowanceList(userId: number): Observable<Array<Allowance>> {
         return this.http.get<Allowance[]>(`${this.url}/user/${userId}/allowance`);
     }
+
+    createAllowance(allowance: Partial<Allowance>, userId: number) {
+        this.http.post(`${this.url}/user/${userId}/allowance`, allowance).subscribe();
+    }
 }
\ 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 ed5e308..8fb9355 100644
--- a/frontend/allowance-planner-v2/src/global.scss
+++ b/frontend/allowance-planner-v2/src/global.scss
@@ -42,4 +42,8 @@ ion-title {
 
 ion-header {
     border-bottom: 1px solid var(--line-color);
+}
+
+button {
+    font-size: 16px;
 }
\ No newline at end of file