1 files changed, 37 insertions, 4 deletions
diff --git a/ufund-ui/src/app/components/need-page/need-page.component.html b/ufund-ui/src/app/components/need-page/need-page.component.html
index a72167c..a8479fd 100644
--- a/ufund-ui/src/app/components/need-page/need-page.component.html
+++ b/ufund-ui/src/app/components/need-page/need-page.component.html
@@ -13,14 +13,47 @@
     </div>
 
     <hr>
+    <span>{{need?.description}}</span>
+    <img *ngIf="need?.image" alt="Need image" [src]="need?.image"/>
     <p>Location: {{need?.location}}</p>
     <p>Urgent: {{need?.urgent}}</p>
     <span>{{need?.current}} / {{need?.maxGoal}}</span>
     <progress [value]="need?.current" [max]="need?.maxGoal"></progress>
     <span>This goal is <strong>{{(((need?.current ?? 0)*100) / (need?.maxGoal ?? 0)).toFixed(0)}}%</strong> complete!</span>
-    <div>
-        <button>Add to basket</button>
-        <button>Edit</button>
-        <button>Delete</button>
+    <div class="actionArea">
+        <button *ngIf="isHelper()" (click)="add(need!)">
+            <span class="icon">add</span>Add To Basket
+        </button>
+        <button *ngIf="isManager()" (click)="edit(need!)">
+            <span class="icon">edit</span>Edit Need
+        </button>
+        <button *ngIf="isManager()" (click)="delete(need!.id)" >
+            <span class="icon">delete</span>Delete Need
+        </button>
+    </div>
+
+    <div [routerLink]="'/need/' + need.id" class="clickable">
+        <div class="split">
+            <div class="left">
+                <span class="needName">{{need.name}}</span>
+                <span class="needType">{{need.type}}</span>
+            </div>
+
+            <div class="right">
+                <span *ngIf="need.urgent" class="urgent">URGENT</span>
+                <span *ngIf="need.location"><span class="icon">location_on</span>{{need.location}}</span>
+            </div>
+        </div>
+
+        <br>
+
+        <div class="prog">
+            <span id="hover-status-label-{{need.id}}"> </span>
+            <span>{{need.current}}/{{need.maxGoal}} ({{((need.current / need.maxGoal) * 100).toFixed(0)}}%)</span>
+            <progress [value]="need.current" [max]="need.maxGoal"></progress>
+        </div>
+
     </div>
+
+<!--    <app-need-edit id="editor" [selectedNeed]="need!"></app-need-edit>-->
 </div>