Yeti
/
gym
1
0
Fork 0
Code Issues Pull Requests 2 Packages Projects Releases Wiki Activity

resolved binding error and added number validator for inputs

main
rYeti 2023-05-14 01:20:43 +02:00
parent dd3aa18cd4
commit c44c3c4fb4
2 changed files with 40 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/stores/storeWeight.js
View File

@ -13,13 +13,13 @@ export const useWeightInputStore = defineStore('weightInput', () => {
const selectedExercise = ref([]); const selectedExercise = ref([]);
function addWeightInput(workingSetWeight, workingRepsInput, warmUpSetsWeight, warmUpRepsInput, selectedExerciseInput) { function addWeightInput(workingSetWeight, workingRepsInput, warmUpSetsWeight, warmUpRepsInput, selectedExerciseInput) {
workingSets.value.push(workingSetWeight); workingSets.value = workingSetWeight;
workingReps.value.push(workingRepsInput); workingReps.value = workingRepsInput;
warmUpSets.value.push(warmUpSetsWeight); warmUpSets.value = warmUpSetsWeight;
warmUpReps.value.push(warmUpRepsInput); warmUpReps.value = warmUpRepsInput;
selectedExercise.value.push(selectedExerciseInput); selectedExercise.value = selectedExerciseInput;
} }
return { return {
workingSets, workingSets,
workingReps, workingReps,

42
src/views/weight/WeightsInput.vue
View File

@ -5,14 +5,21 @@
<label>Warm-Up Sets</label> <label>Warm-Up Sets</label>
<button @click="warmUpAddSet()" class="add-btn bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded ml-5">Add</button> <button @click="warmUpAddSet()" class="add-btn bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded ml-5">Add</button>
<div> <div>
<div v-for="warmUpSet in warmUpSets" :key="warmUpSet" class="item flex justify-smart mt-1"> <div v-for="(warmUpSet, warmUpSetCount) in warmUpSets" :key="warmUpSetCount" class="item flex justify-smart mt-1">
{{ warmUpSet }} {{ warmUpSet }}
<div class="ml-3"> <div class="ml-3">
<input v-model="warmUpSets" class="mt-1 px-3 py-2 bg-black border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block rounded-md sm:text-sm focus:ring-1" placeholder="Weight in Kg"/> <input v-model="weightInput.warmUpSets[warmUpSetCount]"
type="number" class="mt-1 px-3 py-2 bg-black border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block rounded-md sm:text-sm focus:ring-1"
placeholder="Weight (kg)"
onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>
</div> </div>
<label class="ml-3 mt-2">Reps</label> <label class="ml-3 mt-2">Reps</label>
<div class="ml-3"> <div class="ml-3">
<input v-model="warmUpReps" class="mt-1 px-3 py-2 bg-black border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block rounded-md sm:text-sm focus:ring-1" placeholder="Reps"> <input v-model="weightInput.warmUpReps[warmUpSetCount]"
type="number"
class="mt-1 px-3 py-2 bg-black border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block rounded-md sm:text-sm focus:ring-1"
placeholder="Reps"
onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>
</div> </div>
</div> </div>
</div> </div>
@ -22,14 +29,22 @@
<button @click="workingAddSet()" class="add-btn bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded ml-7">Add</button> <button @click="workingAddSet()" class="add-btn bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded ml-7">Add</button>
<div> <div>
<div v-for="workingset in set" :key="workingset" class="item flex justify-smart mt-1"> <div v-for="(workingset, workingSetCount) in workingSets" :key="workingSetCount" class="item flex justify-smart mt-1">
{{ workingset }} {{ workingset }}
<div class="ml-3"> <div class="ml-3">
<input v-model="workingSets" class="mt-1 py-2 bg-black border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block rounded-md sm:text-sm focus:ring-1" placeholder="Weight in Kg"/> <input v-model="weightInput.workingSets[workingSetCount]"
type="number"
class="mt-1 py-2 bg-black border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block rounded-md sm:text-sm focus:ring-1"
placeholder="Weight (Kg)"
onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>
</div> </div>
<label class="ml-3 mt-2">Reps</label> <label class="ml-3 mt-2">Reps</label>
<div class="ml-3"> <div class="ml-3">
<input v-model="workingReps" class="mt-1 px-3 py-2 bg-black border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block rounded-md sm:text-sm focus:ring-1" placeholder="Reps"> <input v-model="weightInput.workingReps[workingSetCount]"
type="number"
class="mt-1 px-3 py-2 bg-black border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block rounded-md sm:text-sm focus:ring-1"
placeholder="Reps"
onkeypress='return event.charCode >= 48 && event.charCode <= 57'> <!-- https://stackoverflow.com/questions/66172698/textbox-which-accepts-only-numbers-in-vue-js -->
</div> </div>
</div> </div>
</div> </div>
@ -55,6 +70,7 @@ const warmUpReps = ref([]);
const set = ref([]); const set = ref([]);
const weightInput = useWeightInputStore(); const weightInput = useWeightInputStore();
// const warmUpInput = ref([]); // const warmUpInput = ref([]);
// warmUpInput.value = { // warmUpInput.value = {
// warmUpSets: [], // warmUpSets: [],
@ -72,7 +88,7 @@ const warmUpAddSet = () => {
id: warmUpSetCount++, id: warmUpSetCount++,
content: warmUpSetCount.toString().concat('. Set') content: warmUpSetCount.toString().concat('. Set')
}; };
warmUpSets.value.push(newWarmUpSet.content); weightInput.warmUpSets.value.push(newWarmUpSet.content);
}; };
const workingAddSet = () => { const workingAddSet = () => {
@ -80,9 +96,19 @@ const workingAddSet = () => {
id: workingSetCount++, id: workingSetCount++,
content: workingSetCount + ". Set" content: workingSetCount + ". Set"
}; };
workingSets.value.push(newWorkingSet.content); weightInput.workingSets.value.push(newWorkingSet.content);
}; };
function validateNumber(event, property, index) {
const inputValue = event.target.value;
const isValid = !isNaN(parseFloat(inputValue)) && isFinite(inputValue);
if (!isValid) {
// If the input is not a valid number, reset the property value to null
weightInput.workingSets.value[index][property] = null;
}
};
weightInput.addWeightInput(workingSets, workingReps, warmUpSets, warmUpReps, selectedExercise); weightInput.addWeightInput(workingSets, workingReps, warmUpSets, warmUpReps, selectedExercise);
</script> </script>