blob: 262934688f0e0cf0a5443cd4ba6a075a807a65a1 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
<div id="box">
@if (need) {
<img *ngIf="need.image" alt="Need image" class="need-image" [src]="need.image"/>
<h1>{{need.name}}</h1>
<span class="needType">{{need.type}} GOAL</span>
<p>{{need.description}}</p>
<div class="prog">
<progress [value]="need.current" [max]="need.maxGoal"></progress>
<span>This goal is <strong>{{(((need.current)*100) / (need.maxGoal)).toFixed(0)}}%</strong> complete!</span>
</div>
<span><strong>Target Goal:</strong> {{(need.type === GoalType.MONETARY) ? "$" : ""}}{{need.maxGoal}}</span>
<span><strong>Amount Currently Collected:</strong> {{need.type.toString() == 'MONETARY' ? '$' : ''}}{{need.current}}</span>
<span><strong>Location:</strong> {{need.location}}</span>
<span><strong>Urgency: </strong>
<span *ngIf="!need.urgent">Not urgent</span>
<span *ngIf="need.urgent" class="urgent">URGENT</span>
</span>
<div *ngIf="need.filterAttributes?.length">
<strong>Tags:</strong>
<ul style="display: flex; column-gap: 24px;">
<li *ngFor="let tag of need?.filterAttributes">
<p>{{tag}}</p>
</li>
</ul>
</div>
<div class="actionArea">
<button *ngIf="usersService.isHelper()" (click)="add(need)" [disabled]="usersService.inBasket(usersService.getBasket() | async, need)">
<span class="icon">{{usersService.inBasket(usersService.getBasket() | async, need)? "check": "add" }}</span>Add To Basket
</button>
<ng-template #edit>
<app-need-edit [mode]="'Edit'" *ngIf="need" [need]="need" (refreshNeedList)="ngOnInit()"></app-need-edit>
</ng-template>
<button *ngIf="usersService.isManager()" (click)="modalService.showModal(edit)">
<span class="icon">edit</span>Edit Need
</button>
<button *ngIf="usersService.isManager()" (click)="delete(need!.id)" >
<span class="icon">delete</span>Delete Need
</button>
</div>
} @else {
<h1>Need not found</h1>
<span>The requested need does not exist. <a routerLink="/cupboard">Browse the cupboard</a></span>
}
</div>
|
