add partial css for goals

frontend/allowance-planner-v2/src/app/models/allowance.ts

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

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

@@ -11,7 +11,7 @@
     <div class="bar"></div>
     <div
       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"
     >
       <div class="main" *ngIf="goal.id === 0; else other_goal">
@@ -19,13 +19,19 @@
         <div class="progress">{{ goal.progress }} SP</div>
         <div class="buttons">
           <button class="add-button">Add</button>
-          <button class="move-button">Move</button>
+          <!-- <button class="move-button">Move</button> -->
           <button class="spend-button">Spend</button>
         </div>
       </div>
       <ng-template #other_goal>
         <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>
       </ng-template>
     </div>

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

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

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

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