feat: implement proper Store with Muscle Group
parent
71ce91cd35
commit
e3fd6abbbc
|
|
@ -7,11 +7,11 @@
|
|||
<div class="flex">
|
||||
<div class="exerciseList">
|
||||
<ul class="exerciseItem" v-for="exercise in filterExercises()" :key="exercise.name">
|
||||
<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>
|
||||
<button @click="exerciseClick(exercise); initSetInput()" :class="isActiveExercise(exercise.name)" >{{ exercise.name }}</button>
|
||||
</ul>
|
||||
</div>
|
||||
<div v-if="selectedExercise">
|
||||
<WeightsInput :selectedExercise="selectedExercise"></WeightsInput>
|
||||
<WeightsInput :muscle="muscle" :selectedExercise="selectedExercise"></WeightsInput>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
import WeightsInput from "@/views/weight/WeightsInput.vue";
|
||||
import { useWeightInputStore } from '@/stores/storeInput';
|
||||
|
||||
const muscle = defineProps({
|
||||
const props = defineProps({
|
||||
muscle: String,
|
||||
})
|
||||
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
|
||||
onMounted(async () => {
|
||||
await json.fetchMuscleExercise()
|
||||
switch (muscle.muscle) {
|
||||
switch (props.muscle) {
|
||||
case "Legs":
|
||||
exercises.value = json.exerciseList.muscle[0].exercises
|
||||
break;
|
||||
|
|
@ -65,12 +65,17 @@
|
|||
});
|
||||
};
|
||||
|
||||
function isActiveExercise(exercise){
|
||||
//TODO: Implement (exercise in weightInput.exercises) to show which exercise are edited, or put them in a proper seperate list
|
||||
return { 'exercise-list-button': selectedExercise.value !== exercise, 'exercise-list-button-active': selectedExercise.value === exercise};
|
||||
};
|
||||
|
||||
const exerciseClick = (exercise) => {
|
||||
selectedExercise.value = exercise;
|
||||
selectedExercise.value = exercise.name;
|
||||
};
|
||||
|
||||
const initSetInput = () => {
|
||||
weightInput.initSetsInputs(selectedExercise.value);
|
||||
weightInput.initSetsInputs(props.muscle, selectedExercise.value);
|
||||
};
|
||||
|
||||
</script>
|
||||
|
|
@ -85,6 +90,14 @@
|
|||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.exercise-list-button {
|
||||
@apply bg-secondary-button hover:bg-accent text-white font-bold py-2 px-2 rounded;
|
||||
}
|
||||
|
||||
.exercise-list-button-active {
|
||||
@apply bg-accent text-white font-bold py-2 px-2 rounded;
|
||||
}
|
||||
|
||||
.search{
|
||||
width: auto;
|
||||
height: 2rem;
|
||||
|
|
@ -112,4 +125,4 @@
|
|||
color: white;
|
||||
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,79 +6,86 @@ export const useWeightInputStore = defineStore('weightInput', () => {
|
|||
// localStorage https://vueuse.org/core/useLocalStorage/
|
||||
const exercises = useLocalStorage('exercises', {});
|
||||
|
||||
function addWorkingSet(selectedExercise) {
|
||||
if (!exercises.value[selectedExercise]) {
|
||||
function addWorkingSet(muscle, selectedExercise) {
|
||||
if (!exercises.value[muscle][selectedExercise]) {
|
||||
return;
|
||||
}
|
||||
exercises.value[selectedExercise].workingSet.push({
|
||||
exercises.value[muscle][selectedExercise].workingSet.push({
|
||||
workingSetReps: [],
|
||||
workingSetWeight: [],
|
||||
});
|
||||
|
||||
console.log('Added working set:', exercises.value[selectedExercise]);
|
||||
console.log('Added working set:', exercises.value[muscle][selectedExercise]);
|
||||
}
|
||||
|
||||
function addWarmUpSet(selectedExercise) {
|
||||
if (!exercises.value[selectedExercise]) {
|
||||
function addWarmUpSet(muscle, selectedExercise) {
|
||||
if (!exercises.value[muscle][selectedExercise]) {
|
||||
return;
|
||||
}
|
||||
exercises.value[selectedExercise].warmUpSet.push({
|
||||
exercises.value[muscle][selectedExercise].warmUpSet.push({
|
||||
warmSetReps: [],
|
||||
warmSetWeight: [],
|
||||
});
|
||||
}
|
||||
|
||||
function removeWorkingSet(selectedExercise) {
|
||||
if(!exercises.value[selectedExercise]) {
|
||||
function removeWorkingSet(muscle, selectedExercise) {
|
||||
if(!exercises.value[muscle][selectedExercise]) {
|
||||
return
|
||||
}
|
||||
exercises.value[selectedExercise].workingSet.pop({
|
||||
exercises.value[muscle][selectedExercise].workingSet.pop({
|
||||
workingSetReps: [],
|
||||
workingSetsWeight: [],
|
||||
})
|
||||
}
|
||||
|
||||
function removeWarmUpSet(selectedExercise) {
|
||||
if(!exercises.value[selectedExercise]) {
|
||||
function removeWarmUpSet(muscle, selectedExercise) {
|
||||
if(!exercises.value[muscle][selectedExercise]) {
|
||||
return;
|
||||
}
|
||||
exercises.value[selectedExercise].warmUpSet.pop({
|
||||
exercises.value[muscle][selectedExercise].warmUpSet.pop({
|
||||
warmUpSetReps: [],
|
||||
warmUpSetsWeight: [],
|
||||
})
|
||||
}
|
||||
|
||||
function getWorkingSetCount(selectedExercise) {
|
||||
if (exercises.value[selectedExercise]) {
|
||||
return exercises.value[selectedExercise].workingSet.length;
|
||||
function getWorkingSetCount(muscle, selectedExercise) {
|
||||
if (exercises.value[muscle][selectedExercise]) {
|
||||
return exercises.value[muscle][selectedExercise].workingSet.length;
|
||||
}
|
||||
return 1;
|
||||
}
|
||||
|
||||
function getWarmUpSetCount(selectedExercise) {
|
||||
if (exercises.value[selectedExercise]) {
|
||||
return exercises.value[selectedExercise].warmUpSet.length;
|
||||
function getWarmUpSetCount(muscle, selectedExercise) {
|
||||
if (exercises.value[muscle][selectedExercise]) {
|
||||
return exercises.value[muscle][selectedExercise].warmUpSet.length;
|
||||
}
|
||||
return 1;
|
||||
}
|
||||
|
||||
function initSetsInputs(selectedExercise) {
|
||||
if(!exercises.value[selectedExercise]) {
|
||||
exercises.value[selectedExercise] = {
|
||||
workingSet: [],
|
||||
warmUpSet: [],
|
||||
};
|
||||
exercises.value[selectedExercise].workingSet.push({
|
||||
function initSetsInputs(muscle, selectedExercise) {
|
||||
if (!exercises.value[muscle]) {
|
||||
exercises.value[muscle] = {};
|
||||
}
|
||||
|
||||
if (!exercises.value[muscle][selectedExercise]) {
|
||||
exercises.value[muscle][selectedExercise] = {
|
||||
workingSet: [],
|
||||
warmUpSet: [],
|
||||
};
|
||||
|
||||
exercises.value[muscle][selectedExercise].workingSet.push({
|
||||
workingSetReps: [],
|
||||
workingSetWeight: [],
|
||||
});
|
||||
exercises.value[selectedExercise].warmUpSet.push({
|
||||
|
||||
exercises.value[muscle][selectedExercise].warmUpSet.push({
|
||||
warmSetReps: [],
|
||||
warmSetWeight: [],
|
||||
});
|
||||
}
|
||||
console.log('Init sets inputs:', exercises.value[selectedExercise], selectedExercise);
|
||||
}
|
||||
|
||||
console.log('Init sets inputs:', exercises.value[muscle][selectedExercise], selectedExercise);
|
||||
}
|
||||
|
||||
return {
|
||||
exercises,
|
||||
|
|
@ -91,4 +98,4 @@ export const useWeightInputStore = defineStore('weightInput', () => {
|
|||
initSetsInputs }
|
||||
|
||||
}
|
||||
)
|
||||
)
|
||||
|
|
|
|||
|
|
@ -3,18 +3,18 @@
|
|||
<div class="w-2/3 mx-auto">
|
||||
<div class="mt-2">
|
||||
<label>Warm-Up Sets</label>
|
||||
<button @click="weightInput.addWarmUpSet(selectedExercise)"
|
||||
<button @click="weightInput.addWarmUpSet(muscle, selectedExercise)"
|
||||
class="bg-accent hover:bg-primary-button text-white font-bold py-2 px-2 rounded ml-5">
|
||||
Add
|
||||
</button>
|
||||
<!-- 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)"
|
||||
<button :disabled="weightInput.getWarmUpSetCount(muscle, selectedExercise) <= 1"
|
||||
@click="weightInput.removeWarmUpSet(muscle, 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 v-for="(warmUpSet, warmUpSetCount) in weightInput.exercises[selectedExercise].warmUpSet" :key="warmUpSetCount"
|
||||
<div v-for="(warmUpSet, warmUpSetCount) in weightInput.exercises[muscle][selectedExercise].warmUpSet" :key="warmUpSetCount"
|
||||
class="flex ml-2">
|
||||
<label>Set {{ warmUpSetCount + 1 }}</label>
|
||||
<div class="ml-3">
|
||||
|
|
@ -38,18 +38,18 @@
|
|||
|
||||
<div class="working-set mt-5">
|
||||
<label>Working Sets</label>
|
||||
<button @click="weightInput.addWorkingSet(selectedExercise.selectedExercise)"
|
||||
<button @click="weightInput.addWorkingSet(muscle, selectedExercise)"
|
||||
class="bg-accent hover:bg-primary-button text-white font-bold py-2 px-2 rounded ml-7">
|
||||
Add
|
||||
</button>
|
||||
<button :disabled="weightInput.getWorkingSetCount(selectedExercise) <= 1"
|
||||
@click="weightInput.removeWorkingSet(selectedExercise)"
|
||||
<button :disabled="weightInput.getWorkingSetCount(muscle, selectedExercise) <= 1"
|
||||
@click="weightInput.removeWorkingSet(muscle, 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="(workingset, workingSetCount) in weightInput.exercises[selectedExercise].workingSet" :key="workingSetCount" class="item flex justify-smart mt-1">
|
||||
<div v-for="(workingset, workingSetCount) in weightInput.exercises[muscle][selectedExercise].workingSet" :key="workingSetCount" class="item flex justify-smart mt-1">
|
||||
<label class=""> {{ workingSetCount + 1 }}. Set</label>
|
||||
<div class="ml-3">
|
||||
<input
|
||||
|
|
@ -79,11 +79,12 @@
|
|||
import { useWeightInputStore } from '@/stores/storeInput';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const selectedExercise = defineProps({
|
||||
selectedExercise: String
|
||||
const props = defineProps({
|
||||
muscle: String,
|
||||
selectedExercise: String,
|
||||
});
|
||||
|
||||
const weightInput = useWeightInputStore();
|
||||
weightInput.selectedExercise = ref(selectedExercise.selectedExercise);
|
||||
weightInput.selectedExercise = ref(props.selectedExercise);
|
||||
|
||||
</script>
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue