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

added state for weightsinput

main
roberts 2023-05-13 17:45:02 +02:00
parent d305af0547
commit dd3aa18cd4
7 changed files with 87 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/assets/index-3d69e972.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/assets/index-cac31405.js vendored Normal file
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-3d69e972.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-cac31405.js"></script></head><body><div id="app"></div></body></html>

32
src/components/ExerciseList.vue
View File

@ -3,12 +3,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)" class="btn bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4" >{{ exercise.name }}</Button> <button @click="exerciseClick(exercise)" class="btn bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4" >{{ exercise.name }}</button>
</ul> </ul>
</div> </div>
<div v-show="isClicked" class="show"> <div v-for="selectedExercise in selectedExercises" :key="selectedExercise" class="show">
<label> {{ exerciseName }}</label> <WeightsInput v-model:selectedExercise="exerciseName"/>
<WeightsInput/>
</div> </div>
</div> </div>
</template> </template>
@ -21,15 +20,13 @@
const muscle = defineProps({ const muscle = defineProps({
muscle: String, muscle: String,
warmUpSets: Array,
workingSets: Array,
warmUpReps: Array,
workingReps: Array,
}) })
let isClicked = false
const json = usePostStore() const json = usePostStore()
const exercises = ref([]) const exercises = ref([])
// idee mit hilfe von chatGpt
const selectedExercises = ref([])
// const isClicked = ref(false)
let exerciseName = "" let exerciseName = ""
onMounted(async () => { onMounted(async () => {
@ -65,16 +62,13 @@
}); });
}; };
const showWeightInput = (isClicked) => { const exerciseClick = (exercise) => {
isClicked.value = true exerciseName = exercise.name
} const existingExercise = selectedExercises.value.find((selected) => selected.name === exercise.name);
if (!existingExercise) {
const exerciseClick = (exercise) => { selectedExercises.value.push({ exercise, weight: '' });
isClicked = true }
exerciseName = exercise.name };
console.log(isClicked)
}
</script> </script>

59
src/stores/storeWeight.js
View File

@ -1,22 +1,49 @@
import {defineStore} from 'pinia' import {defineStore} from 'pinia'
//https://vueuse.org/core/useStorage/
import {useStorage} from '@vueuse/core' import {useStorage} from '@vueuse/core'
import { ref } from 'vue'
//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 useWeightStore = defineStore({ export const useWeightInputStore = defineStore('weightInput', () => {
id: 'weight',
state: () => ({ const workingSets = ref([]);
weight: [], const workingReps = ref([]);
reps: [] const warmUpSets = ref([]);
}), const warmUpReps = ref([]);
getters: { const selectedExercise = ref([]);
getAllWeights() {
return this.weight.value function addWeightInput(workingSetWeight, workingRepsInput, warmUpSetsWeight, warmUpRepsInput, selectedExerciseInput) {
}, workingSets.value.push(workingSetWeight);
}, workingReps.value.push(workingRepsInput);
actions: { warmUpSets.value.push(warmUpSetsWeight);
addWeight(weight, reps) { warmUpReps.value.push(warmUpRepsInput);
this.weight.push(weight); selectedExercise.value.push(selectedExerciseInput);
this.reps.push(reps);
},
} }
return {
workingSets,
workingReps,
warmUpSets,
warmUpReps,
selectedExercise,
addWeightInput
}
// state: () => ({
// workingSets: [],
// workingReps: [],
// warmUpSets: [],
// warmUpReps: [],
// selectedExercise: []
// }),
// getters: {
// getAllWeights() {
// return this.weight.value
// },
// },
// actions: {
// addWeight(weight, reps) {
// this.weight.push(weight);
// this.reps.push(reps);
// },
// }
}) })

3
src/views/muscles/Chest.vue
View File

@ -4,9 +4,6 @@
<h1>Chest</h1> <h1>Chest</h1>
<ExerciseList muscle="Chest"/> <ExerciseList muscle="Chest"/>
</div> </div>
<div>
<weightsInput/>
</div>
</div> </div>
</template> </template>

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

@ -5,7 +5,7 @@
<label>Warm-Up Sets</label> <label>Warm-Up Sets</label>
<button @click="warmUpAddSet()" class="add-btn bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded ml-5">Add</button> <button @click="warmUpAddSet()" class="add-btn bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded ml-5">Add</button>
<div> <div>
<div v-for="warmUpSet in warmUpInput.warmUpSets" class="item flex justify-smart mt-1"> <div v-for="warmUpSet in warmUpSets" :key="warmUpSet" class="item flex justify-smart mt-1">
{{ warmUpSet }} {{ warmUpSet }}
<div class="ml-3"> <div class="ml-3">
<input v-model="warmUpSets" class="mt-1 px-3 py-2 bg-black border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block rounded-md sm:text-sm focus:ring-1" placeholder="Weight in Kg"/> <input v-model="warmUpSets" class="mt-1 px-3 py-2 bg-black border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block rounded-md sm:text-sm focus:ring-1" placeholder="Weight in Kg"/>
@ -22,7 +22,7 @@
<button @click="workingAddSet()" class="add-btn bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded ml-7">Add</button> <button @click="workingAddSet()" class="add-btn bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded ml-7">Add</button>
<div> <div>
<div v-for="workingset in workingInput.workingSets" class="item flex justify-smart mt-1"> <div v-for="workingset in set" :key="workingset" class="item flex justify-smart mt-1">
{{ workingset }} {{ workingset }}
<div class="ml-3"> <div class="ml-3">
<input v-model="workingSets" class="mt-1 py-2 bg-black border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block rounded-md sm:text-sm focus:ring-1" placeholder="Weight in Kg"/> <input v-model="workingSets" class="mt-1 py-2 bg-black border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block rounded-md sm:text-sm focus:ring-1" placeholder="Weight in Kg"/>
@ -34,38 +34,45 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { useWeightStore } from '@/stores/storeWeight'; import { useWeightInputStore } from '@/stores/storeWeight';
const selectedExercise = defineProps({
selectedExercise: String
});
let warmUpSetCount = 0; let warmUpSetCount = 0;
let workingSetCount = 0; let workingSetCount = 0;
const workingSets = ref([]);
const workingReps = ref([]);
const warmUpSets = ref([]);
const warmUpReps = ref([]);
const set = ref([]);
const weightInput = useWeightInputStore();
const weight = useWeightStore(); // const warmUpInput = ref([]);
// warmUpInput.value = {
// warmUpSets: [],
// warmUpReps: []
// }
const warmUpInput = ref([]); // const workingInput = ref([]);
warmUpInput.value = { // workingInput.value = {
warmUpSets: [], // workingSets: [],
warmUpReps: [] // workingReps: []
} // }
const workingInput = ref([]);
workingInput.value = {
workingSets: [],
workingReps: []
}
const warmUpAddSet = () => { const warmUpAddSet = () => {
const newWarmUpSet = { const newWarmUpSet = {
id: warmUpSetCount++, id: warmUpSetCount++,
content: warmUpSetCount.toString().concat('. Set') content: warmUpSetCount.toString().concat('. Set')
}; };
warmUpInput.value.warmUpSets.push(newWarmUpSet.content); warmUpSets.value.push(newWarmUpSet.content);
console.log(warmUpInput.warmUpSets);
}; };
const workingAddSet = () => { const workingAddSet = () => {
@ -73,23 +80,13 @@ const workingAddSet = () => {
id: workingSetCount++, id: workingSetCount++,
content: workingSetCount + ". Set" content: workingSetCount + ". Set"
}; };
workingInput.value.workingSets.push(newWorkingSet.content); workingSets.value.push(newWorkingSet.content);
console.log(workingInput);
}; };
const addWeight = () => { weightInput.addWeightInput(workingSets, workingReps, warmUpSets, warmUpReps, selectedExercise);
//TODO: Add warmup sets and reps to store
weight.addWeight(workingSetInput.value, workingRepsSets.value);
workingSetInput.value = "";
workingRepsSets.value = "";
}
console.log(addWeight);
</script> </script>
<style> <style>
</style> </style>
export default weightsInput;