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.
3. Speichere die Sets in User.Chest
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()
switch (muscle.muscle) {
case "Legs":
exercises.value = json.postList.muscle[0].exercises
exercises.value = json.exerciseList.muscle[0].exercises
break;
case "Back":
exercises.value = json.postList.muscle[1].exercises
exercises.value = json.exerciseList.muscle[1].exercises
break;
case "Chest":
exercises.value = json.postList.muscle[2].exercises
exercises.value = json.exerciseList.muscle[2].exercises
break;
case "Shoulder":
exercises.value = json.postList.muscle[3].exercises
exercises.value = json.exerciseList.muscle[3].exercises
break;
case "Biceps":
exercises.value = json.postList.muscle[4].exercises
exercises.value = json.exerciseList.muscle[4].exercises
break;
case "Triceps":
exercises.value = json.postList.muscle[5].exercises
exercises.value = json.exerciseList.muscle[5].exercises
break;
}
}
@ -65,16 +65,8 @@
const exerciseClick = (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>
<style>

7
src/stores/storeExercise.js
View File

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

61
src/stores/storeInput.js
View File

@ -1,32 +1,51 @@
import { defineStore } from 'pinia'
//https://vueuse.org/core/useStorage/
import { useStorage } from '@vueuse/core'
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
export const useWeightInputStore = defineStore({
id: 'weightInput',
export const useWeightInputStore = defineStore(('weightInput'),{
state: () => ({
workingSets: useStorage('workingSets', []),
workingReps: useStorage('workingReps', []),
workingSetsWeight: useStorage('workingSetsWeight', []),
warmUpSets: useStorage('warmUpSets', []),
warmUpReps: useStorage('warmUpReps', []),
warmUpSetsWeight: useStorage('warmUpSetsWeight', []),
selectedExercise: [],
warmUpSetCount: useStorage('warmUpSetCount', 0),
workingSetCount: useStorage('workingSetCount', 0),
selectedExercise: "",
workingSets: [
{
// workingSets: [],
// workingReps: [],
// workingSetsWeight: [],
// workingSetCount: 0,
}
],
warmUpSets: [
{
// warmUpSets: [],
// warmUpReps: [],
// warmUpSetsWeight: [],
// warmUpSetCount: 0,
}
],
}),
getters: {
getInputsPerExercise : (state) => {
const exercise = useExerciseStore.exerciseList.value;
return state.selectedExercise.filter((item) => item.exercise === exercise.exerciseList.value);
}
},
actions: {
removeWarmUpSet() {
this.workingSets.pop();
this.warmUpSetCount--;
removeWorkingSet(selectedExercise) {
this.sets = this.sets.filter(e => {return e.selectedExercise !== selectedExercise})
},
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="warmup-sets mt-2">
<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">
Add
</button>
@ -12,11 +12,11 @@
Remove
</button>
<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 }}
<div class="ml-3">
<input
v-model="weightInput.warmUpSetsWeight[warmUpSetCount]"
v-model="weightInput.warmUpSets.warmUpSetsWeight[warmUpSetCount]"
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 "
placeholder="Weight (kg)"
@ -25,7 +25,7 @@
<label class="ml-3 mt-2">Reps</label>
<div class="ml-3">
<input
v-model="weightInput.warmUpReps[warmUpSetCount]"
v-model="weightInput.warmUpSets.warmUpReps[warmUpSetCount]"
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 "
placeholder="Reps"
@ -36,22 +36,22 @@
<div class="working-set mt-5">
<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">
Add
</button>
<button :disabled="!setSmallerOne"
@click="removeWarmUpSet()"
<button :disabled="!workingSetSmallerOne"
@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
</button>
<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 }}
<div class="ml-3">
<input
v-model="weightInput.workingSetsWeight[workingSetCount]"
v-model="weightInput.workingSets.workingSetsWeight[workingSetCount]"
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 "
placeholder="Weight (Kg)"
@ -59,7 +59,7 @@
</div>
<label class="ml-3 mt-2">Reps</label>
<div class="ml-3">
<input v-model="weightInput.workingReps[workingSetCount]"
<input v-model="weightInput.workingSets.workingReps[workingSetCount]"
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 "
placeholder="Reps"
@ -74,50 +74,56 @@
<script setup>
import { useWeightInputStore } from '@/stores/storeInput';
import { computed } from 'vue';
import { ref, computed } from 'vue';
const selectedExercise = defineProps({
selectedExercise: String
});
const weightInput = useWeightInputStore();
weightInput.selectedExercise = selectedExercise;
weightInput.selectedExercise = ref(selectedExercise.selectedExercise);
const warmUpAddSet = () => {
const newWarmUpSet = {
id: weightInput.warmUpSetCount++,
content: weightInput.warmUpSetCount.toString().concat('. Set')
id: weightInput.sets.warmUpSetCount++,
content:weightInput.sets.warmUpSetCount.toString().concat('. Set'),
};
weightInput.warmUpSets.push(newWarmUpSet.content);
weightInput.sets.warmUpSets.push(newWarmUpSet.content);
};
const workingAddSet = () => {
const newWorkingSet = {
id: weightInput.workingSetCount++,
content: weightInput.workingSetCount.toString().concat('. Set')
id: weightInput.sets.workingSetCount++,
content: weightInput.sets.workingSetCount.toString().concat('. Set'),
};
weightInput.workingSets.push(newWorkingSet.content);
weightInput.sets.workingSets.push(newWorkingSet.content);
};
const removeWarmUpSet = () => {
weightInput.warmUpSets.pop();
weightInput.warmUpSetsWeight.pop();
weightInput.warmUpSetCount--;
weightInput.sets.warmUpSets.pop();
weightInput.sets.warmUpSetsWeight.pop();
weightInput.sets.warmUpSetCount--;
};
const removeWorkingSet = () => {
weightInput.workingSets.pop();
weightInput.workingSetsWeight.pop();
weightInput.workingSetCount--;
weightInput.sets.workingSets.pop();
weightInput.sets.workingSetsWeight.pop();
weightInput.sets.workingSetCount--;
};
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 true;
});
</script>