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

feat: implement proper Store with Muscle Group #2

Open
Flycro wants to merge 2 commits from fix_store into main
pull from: fix_store
merge into: Yeti:main
Conversation 0 Commits 2 Files Changed 4
4 changed files with 71 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/ExerciseList.vue
View File

@ -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>

2
src/router/index.js
View File

@ -1,6 +1,6 @@
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/Home.vue'
import MusclesRouter from './muscle.js';
import MusclesRouter from './Muscle.js';
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),

67
src/stores/storeInput.js
View File

@ -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 }
}
)
)

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

@ -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>