AP-63 (#85)

closes #63

Reviewed-on: #85

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

@@ -7,4 +7,63 @@
 </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">
+            <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">
+                <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>