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="exerciseList">
<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>
</div>
<div v-if="selectedExercise">
@ -69,7 +69,7 @@
selectedExercise.value = exercise;
};
const addSets = () => {
const initSetInput = () => {
weightInput.initSetsInputs(selectedExercise.value);
};

View File

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

View File

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