I'm currently working on developing a Barbell plate calculator that allows users to input the desired total weight and barbell weight, after which the application will show them the weights needed on each side. Although it's in its early stages, I've hit a roadblock where I'm seeking some guidance. The challenge lies within my "pounds" component where I aim to calculate the required weight distribution. Here are some snippets of the code with explanations:
public barWeight: string = '45';
public totalWeight: string = '';
public weight: number = 0;
public plates= [
{ weights: 100, id: 2, value: false},
{ weights: 45, id: 3, value: true},
{ weights: 35, id: 4, value: true},
{ weights: 25, id: 5, value: true},
{ weights: 10, id: 6, value: true},
{ weights: 5, id: 7, value: true},
{ weights: 2.5, id: 8, value: true},
{ weights: 1.25, id: 9, value: false},
];
// Filtering out selected plates based on user checkboxes
get selectedPlates() {
return this.plates
.filter(plate => plate.value)
}
public calc() {
this.weight = ((parseFloat(this.totalWeight) - parseFloat(this.barWeight)) / 2);
var totalUsed = [];
var idsUsed = [] ;
var exp = 1; // used for counting
var platesUsed = [];
for (let i = 0; i < this.selectedPlates.length; i += 1) {
let count = 0;
while (this.weight >= this.selectedPlates[i].weights) {
this.weight -= this.selectedPlates[i].weights;
count += 1;
}
if (count >= 1) {
exp = count;
totalUsed.push(this.selectedPlates[i].weights);
totalUsed.push(this.selectedPlates[i].id);
}
}
for (let i = 0; i < totalUsed.length; i += 2) {
idsUsed.push(totalUsed[i + 1]);
}
for (let i = 0; i < totalUsed.length; i += 2) {
platesUsed.push(totalUsed[i]);
}
console.log(exp);
console.log(idsUsed);
console.log(platesUsed);
console.log(totalUsed);
return {remaining: this.weight};
}
}
The Calc() function is meant to calculate the weights when clicked. Displaying arrays created within calc(), like idsUsed, is problematic. Currently, I have associated pictures of weightlifting plates with ID values using public URLs, but this will be changed later. My goal is to showcase them in a grid list.
Here are relevant excerpts from pounds.component.html:
<md-card>
<md-input-container>
<input [(ngModel)]="barWeight" mdInput placeholder="Bar Weight" dividerColor="accent">
</md-input-container>
<md-input-container>
<input [(ngModel)]="totalWeight" mdInput placeholder="Total Weight" dividerColor="accent">
</md-input-container>
<button md-raised-button color="primary" (click)="calc()">CALCULATE</button>
</md-card>
<md-card>
<md-checkbox *ngFor="let plate of plates"
[(ngModel)]="plate.value">
{{plate.weights}}
</md-checkbox>
</md-card>
<md-card>
<md-card-content>
<md-grid-list cols="4" rowHeight="200px">
<md-grid-tile *ngFor="let idUsed of idsUsed">
<img src="http://www.roguefitness.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/r/o/rogue-calibrated-lb-steel-plates-web{{idUsed}}.jpg" layout-fill>
</md-grid-tile>
</md-grid-list>
</md-card-content>
Despite obtaining the necessary values in console logs, I can't seem to get idsUsed to display properly. Any assistance would be greatly appreciated. Thank you for your help.