diff options
Diffstat (limited to 'ufund-ui/src/app/components/funding-basket/funding-basket.component.html')
| -rw-r--r-- | ufund-ui/src/app/components/funding-basket/funding-basket.component.html | 112 |
1 files changed, 77 insertions, 35 deletions
diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.html b/ufund-ui/src/app/components/funding-basket/funding-basket.component.html index 504e694..52b35c1 100644 --- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.html +++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.html @@ -1,39 +1,81 @@ -<h1>Funding Basket</h1> -<div id="needCount"> - <label for="needCount">Needs in Basket:</label> - <span>{{ this.usersService.getBasket().getValue().length }}</span> -</div> +<!--<div id="needCount">--> +<!-- <label for="needCount">Needs in Basket:</label>--> +<!-- <span>{{ this.usersService.getBasket().getValue().length }}</span>--> +<!--</div>--> -<div *ngIf="this.usersService.getBasket().getValue().length == 0"> - <h2>There are no needs in the basket</h2> -</div> +<!--<div *ngIf="this.usersService.getBasket().getValue().length == 0">--> +<!-- <h2>There are no needs in the basket</h2>--> +<!--</div>--> + +<!--<table class="needs" id="funding-basket" *ngIf="this.usersService.getBasket().getValue().length != 0">--> +<!-- <thead>--> +<!-- <tr>--> +<!-- <th class="need"></th>--> +<!-- </tr>--> +<!-- </thead>--> +<!-- <tbody>--> +<!-- <tr *ngFor="let need of usersService.getBasket().getValue()">--> +<!-- <td>--> +<!-- <a routerLink="/need/{{need.id}}">{{need.name}}</a>--> +<!-- <p>Goal: {{need.maxGoal}}</p>--> +<!-- <p>Current: {{(need.current).toFixed(2)}}</p>--> +<!-- <p>How much to Contribute: <input type="number" placeholder="insert value" min="1" id={{need.id}} class="contribution"></p>--> +<!-- <br>--> +<!-- <div>--> +<!-- <button type="button" class="removeNeed" title="delete need"--> +<!-- (click)="this.usersService.removeNeed(need.id)">Remove Need</button>--> +<!-- </div>--> +<!-- </td>--> +<!-- </tr>--> +<!-- </tbody>--> +<!--</table>--> +<!--<br>--> +<div id="box"> + <h1>Funding Basket</h1> + <ng-template [ngIf]="usersService.getBasket().getValue().length"> + <div id="needList"> + <div *ngFor="let need of usersService.getBasket().getValue()" class="needEntry"> + <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> -<table class="needs" id="funding-basket" *ngIf="this.usersService.getBasket().getValue().length != 0"> - <thead> - <tr> - <th class="need"></th> - </tr> - </thead> - <tbody> - <tr *ngFor="let need of usersService.getBasket().getValue()"> - <td> - <a routerLink="/need/{{need.id}}">{{need.name}}</a> - <p>Goal: {{need.maxGoal}}</p> - <p>Current: {{(need.current).toFixed(2)}}</p> - <p>How much to Contribute: <input type="number" placeholder="insert value" min="1" id={{need.id}} class="contribution"></p> - <br> - <div> - <button type="button" class="removeNeed" title="delete need" - (click)="this.usersService.removeNeed(need.id)">Remove Need</button> + <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 class="description">--> + <!-- {{need.description}}--> + <!-- </div>--> + </div> + + <div class="actionArea"> + <input type="number" placeholder="Quantity" min="1" id={{need.id}} class="contribution"> + <button class="removeNeed" title="delete need" (click)="this.usersService.removeNeed(need.id)"> + <span class="icon">delete</span> Remove from Basket + </button> </div> - </td> - </tr> - </tbody> -</table> -<br> -<div> - <p *ngIf="!isValid">Invalid input in funding basket!</p> - <button type="submit" class="checkout" title="checkout" (click)="checkout()">Checkout</button> - <span *ngIf="statusText">{{statusText | async}}</span> -</div>
\ No newline at end of file + </div> + </div> + <br> + <div id="footer"> + <button class="button2" title="checkout" (click)="checkout()">Checkout</button> + </div> + </ng-template> + <div *ngIf="!usersService.getBasket().getValue().length"> + <span>There are no needs in your basket! </span><a routerLink="/cupboard">Browse the cupboard</a> + </div> +</div> |