add distribution bar

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

@@ -7,13 +7,15 @@ import { AllowancePage } from './allowance.page';
 import { AllowancePageRoutingModule } from './allowance-routing.module';
 import { AllowanceService } from 'src/app/services/allowance.service';
 import { provideHttpClient } from '@angular/common/http';
+import { MatIconModule } from '@angular/material/icon';
 
 @NgModule({
   imports: [
     IonicModule,
     CommonModule,
     FormsModule,
-    AllowancePageRoutingModule
+    AllowancePageRoutingModule,
+    MatIconModule
   ],
   declarations: [AllowancePage],
   providers: [

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

@@ -7,15 +7,37 @@
 </ion-header>
 
 <ion-content>
-  <div class="content">
-    <div class="bar"></div>
+  <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"
-      [ngClass]="{'main-color': goal.id ===0}"
-      *ngFor="let goal of allowance$ | async"
+      [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="name">Main Allowance</div>
+        <div class="title">
+          <div class="name">Main Allowance</div>
+          <div class="icon">
+            <mat-icon>settings</mat-icon>
+          </div>
+        </div>
         <div class="progress">{{ goal.progress }} SP</div>
         <div class="buttons">
           <button class="add-button">Add</button>
@@ -24,14 +46,22 @@
         </div>
       </div>
       <ng-template #other_goal>
-        <div class="color">
-          <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 class="color-wrapper">
+          <div>
+            <div class="title">
+              <div class="name">{{ goal.name }}</div>
+              <div class="icon">
+                <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>

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

@@ -23,17 +23,32 @@
 .bar {
     margin-top: 20px;
     margin-bottom: 20px;
+    margin-left: 20px;
 }
 
-.main-color {
-    --used-color: var(--ion-color-primary);
+.distribution {
+    color: var(--ion-color-primary);
 }
 
-.other-color {
-    --used-color: rgb(85, 26, 56);
+.allowance-bar {
+    display: flex;
+    width: 95%;
+    height: 15px !important;
+    border-radius: 15px;
+    background-color: var(--font-color);
+    overflow: hidden;
 }
 
-.buttons {
+.partition {
+    --partition-color: white;
+    background-color: var(--partition-color);
+    width: 25%;
+    height: 100%;
+    //border-radius: 15px;
+}
+
+.buttons,
+.title {
     display: flex;
     gap: 10px;
 }
@@ -61,4 +76,55 @@ button[disabled]{
 
 .spend-button {
     background-color: var(--negative-amount-color);
+}
+
+.icon {
+    margin-left: auto;
+    color: var(--font-color);
+}
+
+.color-wrapper {
+    padding: 10px;
+    border-radius: 9px;
+    position: relative;
+    z-index: 1;
+}
+
+.color {
+    --background: rgba(0, 0, 0, 0.3);
+    background-color: var(--background);
+    border-radius: 9px;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -1;
+}
+
+.other-goals {
+    padding: unset;
+}
+
+.legend {
+    width: 95%;
+    display: flex;
+    font-size: 13px;
+    gap: 8px;
+    margin-top: 5px;
+    flex-wrap: wrap;
+}
+
+.legend-item {
+    display: flex;
+    --legend-color: white;
+    color: var(--legend-color);
+    align-items: center;
+}
+
+.circle {
+    width: 12px;
+    height: 12px;
+    background-color: var(--legend-color);
+    border-radius: 20px;
+    margin-right: 2px;
 }

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

@@ -3,6 +3,8 @@ import { ActivatedRoute } from '@angular/router';
 import { BehaviorSubject } from 'rxjs';
 import { Allowance } from 'src/app/models/allowance';
 import { AllowanceService } from 'src/app/services/allowance.service';
+import hexRgb from 'hex-rgb';
+import { ViewWillEnter } from '@ionic/angular';
 
 @Component({
   selector: 'app-allowance',
@@ -10,7 +12,7 @@ import { AllowanceService } from 'src/app/services/allowance.service';
   styleUrls: ['allowance.page.scss'],
   standalone: false,
 })
-export class AllowancePage {
+export class AllowancePage implements ViewWillEnter {
   private id: number;
   // Move to add/edit page later
   private possibleColors: Array<string> = [
@@ -35,9 +37,15 @@ export class AllowancePage {
     this.getAllowance();
   }
 
+  ionViewWillEnter(): void {
+    this.getAllowance();
+  }
+
   getAllowance() {
     setTimeout(() => {
       this.allowanceService.getAllowanceList(this.id).subscribe(allowance => {
+        allowance[0].colour = '#9C4BE4';
+        allowance[0].name = 'Main Allowance';
         console.log('Allowance list: ', allowance);
         this.allowance$.next(allowance);
       })
@@ -47,4 +55,21 @@ export class AllowancePage {
   canFinishGoal(allowance: Allowance): boolean {
     return allowance.progress >= allowance.target;
   }
+
+  hexToRgb(color: string) {
+    return hexRgb(color, { alpha: 0.3, format: 'css' })
+  }
+
+  getPercentage(allowance: Allowance): number {
+    return allowance.progress / allowance.target * 100;
+  }
+
+  // Returns number in percent
+  getPartitionSize(goal: Allowance, allowanceList: Array<Allowance>): number {
+    let allowanceTotal = 0;
+    for (let allowance of allowanceList) {
+      allowanceTotal += allowance.progress;
+    }
+    return goal.progress / allowanceTotal * 100;
+  }
 }