73 lines
2.5 KiB
HTML
73 lines
2.5 KiB
HTML
<ion-header [translucent]="true" class="ion-no-border">
|
|
<ion-toolbar>
|
|
<div class="toolbar">
|
|
<ion-title>
|
|
Allowance
|
|
</ion-title>
|
|
<button class="top-add-button" (click)="createAllowance()">Add Goal</button>
|
|
</div>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
|
|
<ion-content>
|
|
<div class="content" *ngIf="allowance$ | async as allowance">
|
|
<div class="bar">
|
|
<div class="distribution">Allowance distribution</div>
|
|
<div class="allowance-bar">
|
|
<span
|
|
*ngFor="let goal of allowance"
|
|
class="partition"
|
|
[style.--partition-color]="goal.colour"
|
|
[style.width.%]="getPartitionSize(goal, allowance)"
|
|
></span>
|
|
</div>
|
|
<div class="legend">
|
|
<div class="legend-item" [style.--legend-color]="goal.colour" *ngFor="let goal of allowance">
|
|
<div class="circle"></div>
|
|
<div class="title">{{ goal.name }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="goal"
|
|
[style.--used-color]="goal.colour"
|
|
[ngClass]="{'other-goals': goal.id !== 0}"
|
|
*ngFor="let goal of allowance"
|
|
>
|
|
<div class="main" *ngIf="goal.id === 0; else other_goal">
|
|
<div class="title">
|
|
<div class="name">Main Allowance</div>
|
|
<div class="icon" (click)="updateAllowance(goal.id)">
|
|
<mat-icon>settings</mat-icon>
|
|
</div>
|
|
</div>
|
|
<div class="progress">{{ goal.progress }} SP</div>
|
|
<div class="buttons">
|
|
<button class="add-button">Add</button>
|
|
<!-- <button class="move-button">Move</button> -->
|
|
<button class="spend-button">Spend</button>
|
|
</div>
|
|
</div>
|
|
<ng-template #other_goal>
|
|
<div class="color-wrapper">
|
|
<div>
|
|
<div class="title">
|
|
<div class="name">{{ goal.name }}</div>
|
|
<div class="icon" (click)="updateAllowance(goal.id)">
|
|
<mat-icon>settings</mat-icon>
|
|
</div>
|
|
</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 class="color" [style.--background]="hexToRgb(goal.colour)" [style.width.%]="getPercentage(goal)"></div>
|
|
</div>
|
|
</ng-template>
|
|
</div>
|
|
</div>
|
|
</ion-content>
|