57 lines
2.4 KiB
HTML
57 lines
2.4 KiB
HTML
<div class="container">
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
Card Workout
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="form-group">
|
|
<label for="numCards">Number of cards</label>
|
|
<input type="number" class="form-control" id="numCards" [(ngModel)]="numCards">
|
|
</div>
|
|
<button href="#" class="btn btn-primary" (click)="createCards()">Submit</button>
|
|
<button style="margin-left: 1em" href="#" class="btn btn-danger"
|
|
(click)="resetCards()">Reset</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="workoutDeck && showCards" class="container">
|
|
<div class="row">
|
|
<!-- Exercise info -->
|
|
<div class="col-md-4 col-sm-12 center">
|
|
<div class="alert alert-success" role="alert">
|
|
Current Exercise
|
|
</div>
|
|
<div *ngIf="exercise && reps && !rest" class="card sticky-card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">{{currentCardNumber+1}} : {{exercise}}</h5>
|
|
<p class="card-text">{{reps}} reps</p>
|
|
</div>
|
|
</div>
|
|
<div *ngIf="rest">
|
|
<h5 class="card-title">Rest</h5>
|
|
<p class="card-text">2 minutes</p>
|
|
</div>
|
|
</div>
|
|
<!-- Current card -->
|
|
<div class="col-md-4 col-sm-12 center">
|
|
<div *ngIf="currentCardNumber < workoutDeck.length" class="alert alert-success" role="alert">
|
|
Current Card
|
|
</div>
|
|
<card *ngIf="currentCardNumber < workoutDeck.length" class=""[number]="workoutDeck[currentCardNumber].value"
|
|
[suit]="workoutDeck[currentCardNumber].suit" (click)="incrementCardCounter()"></card>
|
|
</div>
|
|
<!-- Previous card -->
|
|
<div class="col-md-4 col-sm-12 center">
|
|
<div *ngIf="previousCardNumber > -1" class="alert alert-danger" role="alert">
|
|
Previous Card
|
|
</div>
|
|
<card *ngIf="previousCardNumber > -1" class="" [number]="workoutDeck[previousCardNumber].value"
|
|
[suit]="workoutDeck[previousCardNumber].suit" (click)="decrementCardCounter()"></card>
|
|
</div>
|
|
</div>
|
|
</div> |