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

25
src/components/ExerciseList.vue
View File

@ -7,11 +7,11 @@
<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); 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> </ul>
</div> </div>
<div v-if="selectedExercise"> <div v-if="selectedExercise">
<WeightsInput :selectedExercise="selectedExercise"></WeightsInput> <WeightsInput :muscle="muscle" :selectedExercise="selectedExercise"></WeightsInput>
</div> </div>
</div> </div>
</template> </template>
@ -23,7 +23,7 @@
import WeightsInput from "@/views/weight/WeightsInput.vue"; import WeightsInput from "@/views/weight/WeightsInput.vue";
import { useWeightInputStore } from '@/stores/storeInput'; import { useWeightInputStore } from '@/stores/storeInput';
const muscle = defineProps({ const props = defineProps({
muscle: String, muscle: String,
}) })
@ -34,7 +34,7 @@
onMounted(async () => { onMounted(async () => {
await json.fetchMuscleExercise() await json.fetchMuscleExercise()
switch (muscle.muscle) { switch (props.muscle) {
case "Legs": case "Legs":
exercises.value = json.exerciseList.muscle[0].exercises exercises.value = json.exerciseList.muscle[0].exercises
break; 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) => { const exerciseClick = (exercise) => {
selectedExercise.value = exercise; selectedExercise.value = exercise.name;
}; };
const initSetInput = () => { const initSetInput = () => {
weightInput.initSetsInputs(selectedExercise.value); weightInput.initSetsInputs(props.muscle, selectedExercise.value);
}; };
</script> </script>
@ -85,6 +90,14 @@
margin-top: 0.5rem; 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{ .search{
width: auto; width: auto;
height: 2rem; height: 2rem;

2
src/router/index.js
View File

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

57
src/stores/storeInput.js
View File

@ -6,78 +6,85 @@ export const useWeightInputStore = defineStore('weightInput', () => {
// localStorage https://vueuse.org/core/useLocalStorage/ // localStorage https://vueuse.org/core/useLocalStorage/
const exercises = useLocalStorage('exercises', {}); const exercises = useLocalStorage('exercises', {});
function addWorkingSet(selectedExercise) { function addWorkingSet(muscle, selectedExercise) {
if (!exercises.value[selectedExercise]) { if (!exercises.value[muscle][selectedExercise]) {
return; return;
} }
exercises.value[selectedExercise].workingSet.push({ exercises.value[muscle][selectedExercise].workingSet.push({
workingSetReps: [], workingSetReps: [],
workingSetWeight: [], workingSetWeight: [],
}); });
console.log('Added working set:', exercises.value[selectedExercise]); console.log('Added working set:', exercises.value[muscle][selectedExercise]);
} }
function addWarmUpSet(selectedExercise) { function addWarmUpSet(muscle, selectedExercise) {
if (!exercises.value[selectedExercise]) { if (!exercises.value[muscle][selectedExercise]) {
return; return;
} }
exercises.value[selectedExercise].warmUpSet.push({ exercises.value[muscle][selectedExercise].warmUpSet.push({
warmSetReps: [], warmSetReps: [],
warmSetWeight: [], warmSetWeight: [],
}); });
} }
function removeWorkingSet(selectedExercise) { function removeWorkingSet(muscle, selectedExercise) {
if(!exercises.value[selectedExercise]) { if(!exercises.value[muscle][selectedExercise]) {
return return
} }
exercises.value[selectedExercise].workingSet.pop({ exercises.value[muscle][selectedExercise].workingSet.pop({
workingSetReps: [], workingSetReps: [],
workingSetsWeight: [], workingSetsWeight: [],
}) })
} }
function removeWarmUpSet(selectedExercise) { function removeWarmUpSet(muscle, selectedExercise) {
if(!exercises.value[selectedExercise]) { if(!exercises.value[muscle][selectedExercise]) {
return; return;
} }
exercises.value[selectedExercise].warmUpSet.pop({ exercises.value[muscle][selectedExercise].warmUpSet.pop({
warmUpSetReps: [], warmUpSetReps: [],
warmUpSetsWeight: [], warmUpSetsWeight: [],
}) })
} }
function getWorkingSetCount(selectedExercise) { function getWorkingSetCount(muscle, selectedExercise) {
if (exercises.value[selectedExercise]) { if (exercises.value[muscle][selectedExercise]) {
return exercises.value[selectedExercise].workingSet.length; return exercises.value[muscle][selectedExercise].workingSet.length;
} }
return 1; return 1;
} }
function getWarmUpSetCount(selectedExercise) { function getWarmUpSetCount(muscle, selectedExercise) {
if (exercises.value[selectedExercise]) { if (exercises.value[muscle][selectedExercise]) {
return exercises.value[selectedExercise].warmUpSet.length; return exercises.value[muscle][selectedExercise].warmUpSet.length;
} }
return 1; return 1;
} }
function initSetsInputs(selectedExercise) { function initSetsInputs(muscle, selectedExercise) {
if(!exercises.value[selectedExercise]) { if (!exercises.value[muscle]) {
exercises.value[selectedExercise] = { exercises.value[muscle] = {};
}
if (!exercises.value[muscle][selectedExercise]) {
exercises.value[muscle][selectedExercise] = {
workingSet: [], workingSet: [],
warmUpSet: [], warmUpSet: [],
}; };
exercises.value[selectedExercise].workingSet.push({
exercises.value[muscle][selectedExercise].workingSet.push({
workingSetReps: [], workingSetReps: [],
workingSetWeight: [], workingSetWeight: [],
}); });
exercises.value[selectedExercise].warmUpSet.push({
exercises.value[muscle][selectedExercise].warmUpSet.push({
warmSetReps: [], warmSetReps: [],
warmSetWeight: [], warmSetWeight: [],
}); });
} }
console.log('Init sets inputs:', exercises.value[selectedExercise], selectedExercise);
console.log('Init sets inputs:', exercises.value[muscle][selectedExercise], selectedExercise);
} }
return { return {

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

@ -3,18 +3,18 @@
<div class="w-2/3 mx-auto"> <div class="w-2/3 mx-auto">
<div class="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(muscle, 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>
<!-- https://www.designcise.com/web/tutorial/how-to-conditionally-disable-a-button-in-vue-js --> <!-- https://www.designcise.com/web/tutorial/how-to-conditionally-disable-a-button-in-vue-js -->
<button :disabled="weightInput.getWarmUpSetCount(selectedExercise) <= 1" <button :disabled="weightInput.getWarmUpSetCount(muscle, selectedExercise) <= 1"
@click="weightInput.removeWarmUpSet(selectedExercise)" @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"> 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 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"> class="flex ml-2">
<label>Set {{ warmUpSetCount + 1 }}</label> <label>Set {{ warmUpSetCount + 1 }}</label>
<div class="ml-3"> <div class="ml-3">
@ -38,18 +38,18 @@
<div class="working-set mt-5"> <div class="working-set mt-5">
<label>Working Sets</label> <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"> class="bg-accent hover:bg-primary-button text-white font-bold py-2 px-2 rounded ml-7">
Add Add
</button> </button>
<button :disabled="weightInput.getWorkingSetCount(selectedExercise) <= 1" <button :disabled="weightInput.getWorkingSetCount(muscle, selectedExercise) <= 1"
@click="weightInput.removeWorkingSet(selectedExercise)" @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"> 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>
<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> <label class=""> {{ workingSetCount + 1 }}. Set</label>
<div class="ml-3"> <div class="ml-3">
<input <input
@ -79,11 +79,12 @@
import { useWeightInputStore } from '@/stores/storeInput'; import { useWeightInputStore } from '@/stores/storeInput';
import { ref } from 'vue'; import { ref } from 'vue';
const selectedExercise = defineProps({ const props = defineProps({
selectedExercise: String muscle: String,
selectedExercise: String,
}); });
const weightInput = useWeightInputStore(); const weightInput = useWeightInputStore();
weightInput.selectedExercise = ref(selectedExercise.selectedExercise); weightInput.selectedExercise = ref(props.selectedExercise);
</script> </script>