blob: 85888520a5a6f2d27cbc5c6f15b3ea96c309ce86 (
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
51
52
53
54
55
56
57
58
59
60
|
<ng-template #warn>
<div *ngIf="!this.warned">
<h1>Not Logged in!</h1>
<p>To contribute please <a routerLink="/login" (click) = "modalService.hideModal()">log in</a></p>
<p>You can still view needs signed out! </p>
<button (click) = "modalService.hideModal(); warned = true"> Continue</button>
</div>
</ng-template>
<div id="box" (mouseenter)="!warned && (!usersService.isHelper() && !usersService.isManager()) ? modalService.showModal(warn) : null">
@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.toLocaleString()}}</span>
<span><strong>Amount Currently Collected:</strong> {{need.type.toString() == 'MONETARY' ? '$' : ''}}{{need.current.toLocaleString()}}</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>
|
