resolved remove button issue

main
roberts 2023-06-03 18:25:46 +02:00
parent f6f3ad8fa9
commit 71ce91cd35
3 changed files with 17 additions and 23 deletions

View File

@ -7,7 +7,7 @@
<div class="flex"> <div class="flex">
<div class="exerciseList"> <div class="exerciseList">
<ul class="exerciseItem" v-for="exercise in filterExercises()" :key="exercise.name"> <ul class="exerciseItem" v-for="exercise in filterExercises()" :key="exercise.name">
<button @click="exerciseClick(exercise); addSets()" class="btn bg-secondary-button hover:bg-accent text-white font-bold py-2 px-2 rounded" >{{ exercise.name }}</button> <button @click="exerciseClick(exercise); initSetInput()" class="btn bg-secondary-button hover:bg-accent text-white font-bold py-2 px-2 rounded" >{{ exercise.name }}</button>
</ul> </ul>
</div> </div>
<div v-if="selectedExercise"> <div v-if="selectedExercise">
@ -69,7 +69,7 @@
selectedExercise.value = exercise; selectedExercise.value = exercise;
}; };
const addSets = () => { const initSetInput = () => {
weightInput.initSetsInputs(selectedExercise.value); weightInput.initSetsInputs(selectedExercise.value);
}; };

View File

@ -42,7 +42,7 @@ export const useWeightInputStore = defineStore('weightInput', () => {
if(!exercises.value[selectedExercise]) { if(!exercises.value[selectedExercise]) {
return; return;
} }
exercises.value[selectedExercise].workingSet.pop({ exercises.value[selectedExercise].warmUpSet.pop({
warmUpSetReps: [], warmUpSetReps: [],
warmUpSetsWeight: [], warmUpSetsWeight: [],
}) })
@ -68,7 +68,7 @@ export const useWeightInputStore = defineStore('weightInput', () => {
workingSet: [], workingSet: [],
warmUpSet: [], warmUpSet: [],
}; };
exercises.value[selectedExercise].workingSet.push({ exercises.value[selectedExercise].workingSet.push({
workingSetReps: [], workingSetReps: [],
workingSetWeight: [], workingSetWeight: [],
}); });
@ -77,6 +77,7 @@ export const useWeightInputStore = defineStore('weightInput', () => {
warmSetWeight: [], warmSetWeight: [],
}); });
} }
console.log('Init sets inputs:', exercises.value[selectedExercise], selectedExercise);
} }
return { return {

View File

@ -1,19 +1,22 @@
<template> <template>
<div class="w-2/3 mx-auto"> <div class="w-2/3 mx-auto">
<div class="warmup-sets mt-2"> <div class="mt-2">
<label>Warm-Up Sets</label> <label>Warm-Up Sets</label>
<button @click="weightInput.addWarmUpSet(selectedExercise)" <button @click="weightInput.addWarmUpSet(selectedExercise)"
class="bg-accent hover:bg-primary-button text-white font-bold py-2 px-2 rounded ml-5"> class="bg-accent hover:bg-primary-button text-white font-bold py-2 px-2 rounded ml-5">
Add Add
</button> </button>
<button :disabled="!warmUpSetSmallerOne" <!-- https://www.designcise.com/web/tutorial/how-to-conditionally-disable-a-button-in-vue-js -->
@click="weightInput.removeWarmUpSet()" <button :disabled="weightInput.getWarmUpSetCount(selectedExercise) <= 1"
@click="weightInput.removeWarmUpSet(selectedExercise)"
class="bg-accent hover:bg-primary-button text-white font-bold py-2 px-2 rounded ml-5 disabled:opacity-25"> class="bg-accent hover:bg-primary-button text-white font-bold py-2 px-2 rounded ml-5 disabled:opacity-25">
Remove Remove
</button> </button>
<div>
<div v-for="(warmUpSet, warmUpSetCount) in weightInput.exercises[selectedExercise].warmUpSet" :key="warmUpSetCount" class="item flex justify-smart mt-1"> <div v-for="(warmUpSet, warmUpSetCount) in weightInput.exercises[selectedExercise].warmUpSet" :key="warmUpSetCount"
<label class="break-normal"> {{ warmUpSetCount + 1 }}. Set</label> class="flex ml-2">
<label>Set {{ warmUpSetCount + 1 }}</label>
<div class="ml-3"> <div class="ml-3">
<input <input
v-model="warmUpSet.warmUpWeight" v-model="warmUpSet.warmUpWeight"
@ -31,7 +34,7 @@
onkeypress='return event.charCode >= 48 && event.charCode <= 57'/> onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>
</div> </div>
</div> </div>
</div>
<div class="working-set mt-5"> <div class="working-set mt-5">
<label>Working Sets</label> <label>Working Sets</label>
@ -39,7 +42,7 @@
class="bg-accent hover:bg-primary-button text-white font-bold py-2 px-2 rounded ml-7"> class="bg-accent hover:bg-primary-button text-white font-bold py-2 px-2 rounded ml-7">
Add Add
</button> </button>
<button :disabled="!workingSetSmallerOne" <button :disabled="weightInput.getWorkingSetCount(selectedExercise) <= 1"
@click="weightInput.removeWorkingSet(selectedExercise)" @click="weightInput.removeWorkingSet(selectedExercise)"
class="bg-accent hover:bg-primary-button text-white font-bold py-2 px-2 rounded ml-5 disabled:opacity-25"> class="bg-accent hover:bg-primary-button text-white font-bold py-2 px-2 rounded ml-5 disabled:opacity-25">
Remove Remove
@ -69,6 +72,7 @@
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
@ -82,15 +86,4 @@ const selectedExercise = defineProps({
const weightInput = useWeightInputStore(); const weightInput = useWeightInputStore();
weightInput.selectedExercise = ref(selectedExercise.selectedExercise); weightInput.selectedExercise = ref(selectedExercise.selectedExercise);
// const addWorkingSet = () => {
// weightInput.addWorkingSet(selectedExercise.selectedExercise);}
const warmUpSetSmallerOne = () => {
weightInput.getWarmUpSetCount <= 1 ? false : true;
};
const workingSetSmallerOne = () => {
weightInput.getWorkingSetCount <= 1 ? false : true;
};
</script> </script>