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

wip state management for the input

main
roberts 2023-05-21 18:20:17 +02:00
parent 4c262ba076
commit e68d999681
8 changed files with 93 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
TODOS
View File

@ -3,4 +3,14 @@ for stase management:
2. Wenn CurrentEdit gesetzt zeig die Set Optionen an. 2. Wenn CurrentEdit gesetzt zeig die Set Optionen an.
3. Speichere die Sets in User.Chest 3. Speichere die Sets in User.Chest
4. Cleare den CurrentEdit 4. Cleare den CurrentEdit
5. Display oben was Eingetragen wurde in User.Chest 5. Display oben was Eingetragen wurde in User.Chest
In this rewritten example, we still use reactive to create the reactive inputValues object and ref to create the currentButton reference.
The setCurrentButton function sets the value of currentButton to the ID of the button that was clicked.
The saveInputValue function saves the input value for the current button in inputValues[currentButton.value].value.
The rest of the code remains largely the same, with the buttons array being rendered using v-for, and the input field and value display being updated based on the currently selected button.
With the Composition API, the reactive state and functions are defined within the setup function, providing a cleaner and more organized way to handle component logic.

2
dist/assets/index-4ea6f92e.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
dist/assets/index-60b231bc.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/index.html vendored
View File

@ -1 +1 @@
<!doctype html><html lang="en"><head><meta charset="UTF-8"><link rel="icon" href="./logo.ico"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Gym Tracker</title><script type="module" crossorigin src="./assets/index-60b231bc.js"></script></head><body><div id="app"></div></body></html> <!doctype html><html lang="en"><head><meta charset="UTF-8"><link rel="icon" href="./logo.ico"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Gym Tracker</title><script type="module" crossorigin src="./assets/index-4ea6f92e.js"></script></head><body><div id="app"></div></body></html>

20
src/components/ExerciseList.vue
View File

@ -34,22 +34,22 @@
await json.fetchMuscleExercise() await json.fetchMuscleExercise()
switch (muscle.muscle) { switch (muscle.muscle) {
case "Legs": case "Legs":
exercises.value = json.postList.muscle[0].exercises exercises.value = json.exerciseList.muscle[0].exercises
break; break;
case "Back": case "Back":
exercises.value = json.postList.muscle[1].exercises exercises.value = json.exerciseList.muscle[1].exercises
break; break;
case "Chest": case "Chest":
exercises.value = json.postList.muscle[2].exercises exercises.value = json.exerciseList.muscle[2].exercises
break; break;
case "Shoulder": case "Shoulder":
exercises.value = json.postList.muscle[3].exercises exercises.value = json.exerciseList.muscle[3].exercises
break; break;
case "Biceps": case "Biceps":
exercises.value = json.postList.muscle[4].exercises exercises.value = json.exerciseList.muscle[4].exercises
break; break;
case "Triceps": case "Triceps":
exercises.value = json.postList.muscle[5].exercises exercises.value = json.exerciseList.muscle[5].exercises
break; break;
} }
} }
@ -65,16 +65,8 @@
const exerciseClick = (exercise) => { const exerciseClick = (exercise) => {
selectedExercise.value = exercise; selectedExercise.value = exercise;
// const existingExercise = selectedExercises.value.find((selected) => selected.name === exercise.name);
// if (!existingExercise) {
// selectedExercises.value.push({ exercise, weight: '' });
// }
}; };
// const selectedExercise = computed(() => {
// return selectedExercises.value.length > 0 ? selectedExercises.value[0] : null;
// });
</script> </script>
<style> <style>

7
src/stores/storeExercise.js
View File

@ -4,19 +4,14 @@ import { ref } from 'vue'
export const useExerciseStore = defineStore('json', () => { export const useExerciseStore = defineStore('json', () => {
const exerciseList = ref([]) const exerciseList = ref([])
const error = ref([])
async function fetchMuscleExercise() { async function fetchMuscleExercise() {
exerciseList.value = muscleExercise exerciseList.value = muscleExercise
error.value = []
} }
return { return {
postList: exerciseList, exerciseList,
error,
fetchMuscleExercise fetchMuscleExercise
} }
} }
) )
export default useExerciseStore

61
src/stores/storeInput.js
View File

@ -1,32 +1,51 @@
import { defineStore } from 'pinia' import { defineStore } from 'pinia'
//https://vueuse.org/core/useStorage/
import { useStorage } from '@vueuse/core'
import { useExerciseStore } from './storeExercise.js'; import { useExerciseStore } from './storeExercise.js';
//see https://stephanlangeveld.medium.com/simple-local-storage-implementation-using-vue-3-vueuse-and-pinia-with-zero-extra-lines-of-code-cb9ed2cce42a //see https://stephanlangeveld.medium.com/simple-local-storage-implementation-using-vue-3-vueuse-and-pinia-with-zero-extra-lines-of-code-cb9ed2cce42a
export const useWeightInputStore = defineStore({ export const useWeightInputStore = defineStore(('weightInput'),{
id: 'weightInput',
state: () => ({ state: () => ({
workingSets: useStorage('workingSets', []), selectedExercise: "",
workingReps: useStorage('workingReps', []), workingSets: [
workingSetsWeight: useStorage('workingSetsWeight', []), {
warmUpSets: useStorage('warmUpSets', []), // workingSets: [],
warmUpReps: useStorage('warmUpReps', []), // workingReps: [],
warmUpSetsWeight: useStorage('warmUpSetsWeight', []), // workingSetsWeight: [],
selectedExercise: [], // workingSetCount: 0,
warmUpSetCount: useStorage('warmUpSetCount', 0), }
workingSetCount: useStorage('workingSetCount', 0), ],
warmUpSets: [
{
// warmUpSets: [],
// warmUpReps: [],
// warmUpSetsWeight: [],
// warmUpSetCount: 0,
}
],
}), }),
getters: { getters: {
getInputsPerExercise : (state) => {
const exercise = useExerciseStore.exerciseList.value;
return state.selectedExercise.filter((item) => item.exercise === exercise.exerciseList.value);
}
}, },
actions: { actions: {
removeWarmUpSet() { removeWorkingSet(selectedExercise) {
this.workingSets.pop(); this.sets = this.sets.filter(e => {return e.selectedExercise !== selectedExercise})
this.warmUpSetCount--; },
addWorkingSet(selectedExercise) {
this.workingSets.push({
selectedExercise: selectedExercise,
workingSets: [],
workingReps: [],
workingSetsWeight: [],
workingSetCount: this.workingSetCount++,
})
},
addWarmUpSet(selectedExercise) {
this.warmUpSets.push({
selectedExercise: selectedExercise,
warmUpSets: [],
warmUpReps: [],
warmUpSetsWeight: [],
warmUpSetCount: this.warmUpSetCount++,
})
} }
}, }
}) })

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

@ -2,7 +2,7 @@
<div class="w-2/3 mx-auto"> <div class="w-2/3 mx-auto">
<div class="warmup-sets mt-2"> <div class="warmup-sets mt-2">
<label>Warm-Up Sets</label> <label>Warm-Up Sets</label>
<button @click="warmUpAddSet()" <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>
@ -12,11 +12,11 @@
Remove Remove
</button> </button>
<div> <div>
<div v-for="(warmUpSet, warmUpSetCount) in weightInput.warmUpSets" :key="warmUpSetCount" class="item flex justify-smart mt-1"> <div v-for="(warmUpSet, warmUpSetCount) in weightInput.warmUpSets.warmUpSets" :key="warmUpSetCount" class="item flex justify-smart mt-1">
{{ warmUpSet }} {{ warmUpSet }}
<div class="ml-3"> <div class="ml-3">
<input <input
v-model="weightInput.warmUpSetsWeight[warmUpSetCount]" v-model="weightInput.warmUpSets.warmUpSetsWeight[warmUpSetCount]"
type="number" type="number"
class="mt-1 px-3 py-2 bg-black border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none block rounded-md sm:text-sm " class="mt-1 px-3 py-2 bg-black border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none block rounded-md sm:text-sm "
placeholder="Weight (kg)" placeholder="Weight (kg)"
@ -25,7 +25,7 @@
<label class="ml-3 mt-2">Reps</label> <label class="ml-3 mt-2">Reps</label>
<div class="ml-3"> <div class="ml-3">
<input <input
v-model="weightInput.warmUpReps[warmUpSetCount]" v-model="weightInput.warmUpSets.warmUpReps[warmUpSetCount]"
type="number" type="number"
class="mt-1 px-3 py-2 bg-black border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none block rounded-md sm:text-sm " class="mt-1 px-3 py-2 bg-black border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none block rounded-md sm:text-sm "
placeholder="Reps" placeholder="Reps"
@ -36,22 +36,22 @@
<div class="working-set mt-5"> <div class="working-set mt-5">
<label>Working Sets</label> <label>Working Sets</label>
<button @click="workingAddSet()" <button @click="weightInput.addWorkingSet(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="!setSmallerOne" <button :disabled="!workingSetSmallerOne"
@click="removeWarmUpSet()" @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
</button> </button>
<div> <div>
<div v-for="(workingset, workingSetCount) in weightInput.workingSets" :key="workingSetCount" class="item flex justify-smart mt-1"> <div v-for="(workingset, workingSetCount) in weightInput.workingSets.workingSets" :key="workingSetCount" class="item flex justify-smart mt-1">
{{ workingset }} {{ workingset }}
<div class="ml-3"> <div class="ml-3">
<input <input
v-model="weightInput.workingSetsWeight[workingSetCount]" v-model="weightInput.workingSets.workingSetsWeight[workingSetCount]"
type="number" type="number"
class="mt-1 px-3 py-2 bg-black border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none block rounded-md sm:text-sm " class="mt-1 px-3 py-2 bg-black border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none block rounded-md sm:text-sm "
placeholder="Weight (Kg)" placeholder="Weight (Kg)"
@ -59,7 +59,7 @@
</div> </div>
<label class="ml-3 mt-2">Reps</label> <label class="ml-3 mt-2">Reps</label>
<div class="ml-3"> <div class="ml-3">
<input v-model="weightInput.workingReps[workingSetCount]" <input v-model="weightInput.workingSets.workingReps[workingSetCount]"
type="number" type="number"
class="mt-1 px-3 py-2 bg-black border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none block rounded-md sm:text-sm " class="mt-1 px-3 py-2 bg-black border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none block rounded-md sm:text-sm "
placeholder="Reps" placeholder="Reps"
@ -74,50 +74,56 @@
<script setup> <script setup>
import { useWeightInputStore } from '@/stores/storeInput'; import { useWeightInputStore } from '@/stores/storeInput';
import { computed } from 'vue'; import { ref, computed } from 'vue';
const selectedExercise = defineProps({ const selectedExercise = defineProps({
selectedExercise: String selectedExercise: String
}); });
const weightInput = useWeightInputStore(); const weightInput = useWeightInputStore();
weightInput.selectedExercise = selectedExercise; weightInput.selectedExercise = ref(selectedExercise.selectedExercise);
const warmUpAddSet = () => { const warmUpAddSet = () => {
const newWarmUpSet = { const newWarmUpSet = {
id: weightInput.warmUpSetCount++, id: weightInput.sets.warmUpSetCount++,
content: weightInput.warmUpSetCount.toString().concat('. Set') content:weightInput.sets.warmUpSetCount.toString().concat('. Set'),
}; };
weightInput.warmUpSets.push(newWarmUpSet.content); weightInput.sets.warmUpSets.push(newWarmUpSet.content);
}; };
const workingAddSet = () => { const workingAddSet = () => {
const newWorkingSet = { const newWorkingSet = {
id: weightInput.workingSetCount++, id: weightInput.sets.workingSetCount++,
content: weightInput.workingSetCount.toString().concat('. Set') content: weightInput.sets.workingSetCount.toString().concat('. Set'),
}; };
weightInput.workingSets.push(newWorkingSet.content); weightInput.sets.workingSets.push(newWorkingSet.content);
}; };
const removeWarmUpSet = () => { const removeWarmUpSet = () => {
weightInput.warmUpSets.pop(); weightInput.sets.warmUpSets.pop();
weightInput.warmUpSetsWeight.pop(); weightInput.sets.warmUpSetsWeight.pop();
weightInput.warmUpSetCount--; weightInput.sets.warmUpSetCount--;
}; };
const removeWorkingSet = () => { const removeWorkingSet = () => {
weightInput.workingSets.pop(); weightInput.sets.workingSets.pop();
weightInput.workingSetsWeight.pop(); weightInput.sets.workingSetsWeight.pop();
weightInput.workingSetCount--; weightInput.sets.workingSetCount--;
}; };
const warmUpSetSmallerOne = computed(() => { const warmUpSetSmallerOne = computed(() => {
if (weightInput.warmUpSetCount < 1) { if (weightInput.warmUpSets.warmUpSetCount < 1) {
return false;
}
return true;
});
const workingSetSmallerOne = computed(() => {
if (weightInput.workingSets.workingSetCount < 1) {
return false; return false;
} }
return true; return true;
}); });
</script> </script>