add functionality to add goal

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

@@ -14,19 +14,6 @@ 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(
@@ -76,4 +63,8 @@ export class AllowancePage implements ViewWillEnter {
   createAllowance() {
     this.router.navigate(['add'], { relativeTo: this.route });
   }
+
+  updateAllowance(id: number) {
+    this.router.navigate(['edit', id], { relativeTo: this.route });
+  }
 }

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

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { IonicModule } from '@ionic/angular';
 
@@ -13,7 +13,8 @@ import { EditAllowancePage } from './edit-allowance.page';
     CommonModule,
     FormsModule,
     IonicModule,
-    EditAllowancePageRoutingModule
+    EditAllowancePageRoutingModule,
+    ReactiveFormsModule
   ],
   declarations: [EditAllowancePage]
 })

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

@@ -1,13 +1,31 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>edit-allowance</ion-title>
+    <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">
-  <ion-header collapse="condense">
+  <form [formGroup]="form">
-    <ion-toolbar>
+    <label>Goal Name</label>
-      <ion-title size="large">edit-allowance</ion-title>
+    <input id="name" type="text" formControlName="name"/>
-    </ion-toolbar>
+
-  </ion-header>
+    <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>

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

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

@@ -1,4 +1,7 @@
 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',
@@ -7,10 +10,66 @@ import { Component, OnInit } from '@angular/core';
   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() { }
+  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]);
+  }
 }

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">

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