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 546e639..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
@@ -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 });
+ }
}
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
index b846a08..babc77f 100644
--- 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
@@ -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]
})
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
index d4d37b4..43ff437 100644
--- 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
@@ -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">
- <ion-toolbar>
- <ion-title size="large">edit-allowance</ion-title>
- </ion-toolbar>
- </ion-header>
+ <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
index e69de29..3fee56e 100644
--- 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
@@ -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.ts b/frontend/allowance-planner-v2/src/app/pages/edit-allowance/edit-allowance.page.ts
index fceee05..81f7c55 100644
--- 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
@@ -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]);
+ }
}
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