seeseemelk/allowance_planner_2000
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

Add functionality to add allowance (#101)
All checks were successful
Backend Deploy / build (push) Successful in 20s
Details
Backend Build and Test / build (push) Successful in 2m33s
Details

Browse Source 
closes #69
closes #107

Reviewed-on: #101
This commit is contained in:
Huffle 2025-05-27 18:39:51 +02:00
parent a0d0c37fdb
commit 8c2af22c85
13 changed files with 289 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/allowance-planner-v2/src/app/pages/add-allowance/add-allowance-routing.module.ts Normal file
View File

@ -0,0 +1,17 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AddAllowancePage } from './add-allowance.page';
const routes: Routes = [
{
path: '',
component: AddAllowancePage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class AddAllowancePageRoutingModule {}

23
frontend/allowance-planner-v2/src/app/pages/add-allowance/add-allowance.module.ts Normal file
View File

@ -0,0 +1,23 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { AddAllowancePageRoutingModule } from './add-allowance-routing.module';
import { AddAllowancePage } from './add-allowance.page';
import { MatIconModule } from '@angular/material/icon';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
AddAllowancePageRoutingModule,
ReactiveFormsModule,
MatIconModule
],
declarations: [AddAllowancePage]
})
export class AddAllowancePageModule {}

27
frontend/allowance-planner-v2/src/app/pages/add-allowance/add-allowance.page.html Normal file
View File

@ -0,0 +1,27 @@
<ion-header [translucent]="true">
<ion-toolbar>
<div class="toolbar">
<div class="icon" (click)="navigateBack()">
<mat-icon>arrow_back</mat-icon>
</div>
<ion-title *ngIf="isAddMode && goalId == 0">Add to Allowance</ion-title>
<ion-title *ngIf="isAddMode && goalId != 0">Add to Goal</ion-title>
<ion-title *ngIf="!isAddMode">Spend Allowance</ion-title>
</div>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<form [formGroup]="form">
<label>Amount</label>
<input id="amount" type="number" placeholder="0.00" name="price" min="0" value="0" step="0.01" formControlName="amount"/>
<label>Description</label>
<input id="description" type="text" formControlName="description"/>
<button type="button" [disabled]="!form.valid" (click)="changeAllowance()">
<span *ngIf="isAddMode">Add</span>
<span *ngIf="!isAddMode">Spend</span>
</button>
</form>
</ion-content>

40
frontend/allowance-planner-v2/src/app/pages/add-allowance/add-allowance.page.scss Normal file
View File

@ -0,0 +1,40 @@
.toolbar {
display: flex;
align-items: center;
}
.icon {
margin-left: 5px;
}
form {
height: 100%;
}
form,
.item {
display: flex;
flex-direction: column;
align-items: center;
}
label {
color: var(--ion-color-primary);
margin-top: 25px;
margin-bottom: 10px;
}
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;
}

17
frontend/allowance-planner-v2/src/app/pages/add-allowance/add-allowance.page.spec.ts Normal file
View File

@ -0,0 +1,17 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AddAllowancePage } from './add-allowance.page';
describe('AddAllowancePage', () => {
let component: AddAllowancePage;
let fixture: ComponentFixture<AddAllowancePage>;
beforeEach(() => {
fixture = TestBed.createComponent(AddAllowancePage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

51
frontend/allowance-planner-v2/src/app/pages/add-allowance/add-allowance.page.ts Normal file
View File

@ -0,0 +1,51 @@
import { Location } from '@angular/common';
import { Component } 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-add-allowance',
templateUrl: './add-allowance.page.html',
styleUrls: ['./add-allowance.page.scss'],
standalone: false,
})
export class AddAllowancePage {
public form: FormGroup;
public goalId: number;
public userId: number;
public isAddMode = true;
// Marcus' first comment
// b ........a`.OK ø¶Ópppppppp--P09OP
constructor(
private allowanceService: AllowanceService,
private route: ActivatedRoute,
private formBuilder: FormBuilder,
private router: Router,
private location: Location
) {
this.userId = this.route.snapshot.params['id'];
this.goalId = this.route.snapshot.params['goalId'];
this.form = this.formBuilder.group({
amount: ['', Validators.required],
description: ['', Validators.required]
});
}
changeAllowance() {
this.allowanceService.addOrSpendAllowance(
this.goalId,
this.userId,
this.form.value.amount,
this.form.value.description
);
this.router.navigate(['/tabs/allowance', this.userId]);
}
navigateBack() {
this.location.back();
}
}

17
frontend/allowance-planner-v2/src/app/pages/add-allowance/spend-allowance-routing.module.ts Normal file
View File

@ -0,0 +1,17 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SpendllowancePage } from './spend-allowance.page';
const routes: Routes = [
{
path: '',
component: SpendllowancePage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class SpendAllowancePageRoutingModule {}

22
frontend/allowance-planner-v2/src/app/pages/add-allowance/spend-allowance.module.ts Normal file
View File

@ -0,0 +1,22 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { SpendAllowancePageRoutingModule } from './spend-allowance-routing.module';
import { SpendllowancePage } from './spend-allowance.page';
import { MatIconModule } from '@angular/material/icon';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
SpendAllowancePageRoutingModule,
ReactiveFormsModule,
MatIconModule
],
declarations: [SpendllowancePage]
})
export class SpendAllowancePageModule {}

52
frontend/allowance-planner-v2/src/app/pages/add-allowance/spend-allowance.page.ts Normal file
View File

@ -0,0 +1,52 @@
import { Location } from '@angular/common';
import { Component } 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-spend-allowance',
templateUrl: './add-allowance.page.html',
styleUrls: ['./add-allowance.page.scss'],
standalone: false,
})
export class SpendllowancePage {
public form: FormGroup;
public goalId: number;
public userId: number;
public isAddMode = false;
constructor(
private allowanceService: AllowanceService,
private route: ActivatedRoute,
private formBuilder: FormBuilder,
private router: Router,
private location: Location
) {
this.userId = this.route.snapshot.params['id'];
this.goalId = this.route.snapshot.params['goalId'];
this.form = this.formBuilder.group({
amount: ['', Validators.required],
description: ['', Validators.required]
});
this.allowanceService.getAllowanceById(this.goalId, this.userId).subscribe(allowance => {
this.form.controls['amount'].addValidators([Validators.max(allowance.progress)]);
});
}
changeAllowance() {
this.allowanceService.addOrSpendAllowance(
this.goalId,
this.userId,
-this.form.value.amount,
this.form.value.description
);
this.router.navigate(['/tabs/allowance', this.userId]);
}
navigateBack() {
this.location.back();
}
}

8
frontend/allowance-planner-v2/src/app/pages/allowance/allowance-routing.module.ts
View File

@ -14,6 +14,14 @@ const routes: Routes = [
{
path: ':id/edit/:goalId',
loadChildren: () => import('../edit-allowance/edit-allowance.module').then(m => m.EditAllowancePageModule)
},
{
path: ':id/increase/:goalId',
loadChildren: () => import('../add-allowance/add-allowance.module').then(m => m.AddAllowancePageModule)
},
{
path: ':id/spend/:goalId',
loadChildren: () => import('../add-allowance/spend-allowance.module').then(m => m.SpendAllowancePageModule)
}
];

6
frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.html
View File

@ -43,9 +43,9 @@
</div>
<div class="progress">{{ goal.progress }} SP</div>
<div class="buttons">
<button class="add-button">Add</button>
<button class="add-button" (click)="addAllowance(goal.id)">Add</button>
<!-- <button class="move-button">Move</button> -->
<button class="spend-button">Spend</button>
<button class="spend-button" (click)="spendAllowance(goal.id)">Spend</button>
</div>
</div>
<ng-template #other_goal>
@ -59,7 +59,7 @@
</div>
<div class="progress">{{ goal.progress }} / {{ goal.target }} SP</div>
<div class="buttons">
<button class="add-button">Add</button>
<button class="add-button" (click)="addAllowance(goal.id)">Add</button>
<!-- <button class="move-button">Move</button> -->
<button class="spend-button" [disabled]="!canFinishGoal(goal)" (click)="completeGoal(goal.id)">Finish goal</button>
</div>

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

@ -72,4 +72,12 @@ export class AllowancePage implements ViewWillEnter {
this.allowanceService.completeGoal(goalId, this.id);
this.getAllowance();
}
addAllowance(id: number) {
this.router.navigate(['increase', id], { relativeTo: this.route });
}
spendAllowance(id: number) {
this.router.navigate(['spend', id], { relativeTo: this.route });
}
}

4
frontend/allowance-planner-v2/src/app/services/allowance.service.ts
View File

@ -34,4 +34,8 @@ export class AllowanceService {
completeGoal(goalId: number, userId: number) {
this.http.post(`${this.url}/user/${userId}/allowance/${goalId}/complete`, {}).subscribe();
}
addOrSpendAllowance(goalId: number, userId: number, amount: number, description: string) {
this.http.post(`${this.url}/user/${userId}/allowance/${goalId}/add`, { amount, description }).subscribe();
}
}