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

add partial css for goals

Browse Source
This commit is contained in:
Huffle 2025-05-25 14:43:09 +02:00
parent cca1f10925
commit 92d03d342b
4 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/allowance-planner-v2/src/app/models/allowance.ts
View File

@ -6,4 +6,5 @@ export interface Allowance {
progress: number; progress: number;
// Can be any positive number (backend checks for number relative to each other) // Can be any positive number (backend checks for number relative to each other)
weight: number; weight: number;
colour: string;
} }

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

@ -11,7 +11,7 @@
<div class="bar"></div> <div class="bar"></div>
<div <div
class="goal" class="goal"
[ngClass]="{'main-color': goal.id ===0, 'other-color': goal.id !== 0 }" [ngClass]="{'main-color': goal.id ===0}"
*ngFor="let goal of allowance$ | async" *ngFor="let goal of allowance$ | async"
> >
<div class="main" *ngIf="goal.id === 0; else other_goal"> <div class="main" *ngIf="goal.id === 0; else other_goal">
@ -19,13 +19,19 @@
<div class="progress">{{ goal.progress }} SP</div> <div class="progress">{{ goal.progress }} SP</div>
<div class="buttons"> <div class="buttons">
<button class="add-button">Add</button> <button class="add-button">Add</button>
<button class="move-button">Move</button> <!-- <button class="move-button">Move</button> -->
<button class="spend-button">Spend</button> <button class="spend-button">Spend</button>
</div> </div>
</div> </div>
<ng-template #other_goal> <ng-template #other_goal>
<div class="color"> <div class="color">
<div class="name">Other goal: {{ goal.name }}</div> <div class="name">{{ goal.name }}</div>
<div class="progress">{{ goal.progress }} / {{ goal.target }} SP</div>
<div class="buttons">
<button class="add-button">Add</button>
<!-- <button class="move-button">Move</button> -->
<button class="spend-button" [disabled]="!canFinishGoal(goal)">Finish goal</button>
</div>
</div> </div>
</ng-template> </ng-template>
</div> </div>

5
frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.scss
View File

@ -46,6 +46,11 @@ button {
font-size: 16px; font-size: 16px;
} }
button:disabled,
button[disabled]{
opacity: 0.5;
}
.add-button { .add-button {
background-color: var(--confirm-button-color); background-color: var(--confirm-button-color);
} }

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

@ -43,4 +43,8 @@ export class AllowancePage {
}) })
}, 10); }, 10);
} }
canFinishGoal(allowance: Allowance): boolean {
return allowance.progress >= allowance.target;
}
} }