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

File diff suppressed because one or more lines are too long

2
dist/assets/index-cac31405.js vendored Normal 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>

View File

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

View File

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

View File

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

View File

@ -5,7 +5,7 @@
<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>
<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 }}
<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"/>
@ -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>
<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 }}
<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"/>
@ -40,32 +40,39 @@
<script setup>
import { ref } from 'vue';
import { useWeightStore } from '@/stores/storeWeight';
import { useWeightInputStore } from '@/stores/storeWeight';
const selectedExercise = defineProps({
selectedExercise: String
});
let warmUpSetCount = 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([]);
warmUpInput.value = {
warmUpSets: [],
warmUpReps: []
}
const workingInput = ref([]);
workingInput.value = {
workingSets: [],
workingReps: []
}
// const workingInput = ref([]);
// workingInput.value = {
// workingSets: [],
// workingReps: []
// }
const warmUpAddSet = () => {
const newWarmUpSet = {
id: warmUpSetCount++,
content: warmUpSetCount.toString().concat('. Set')
};
warmUpInput.value.warmUpSets.push(newWarmUpSet.content);
console.log(warmUpInput.warmUpSets);
warmUpSets.value.push(newWarmUpSet.content);
};
const workingAddSet = () => {
@ -73,23 +80,13 @@ const workingAddSet = () => {
id: workingSetCount++,
content: workingSetCount + ". Set"
};
workingInput.value.workingSets.push(newWorkingSet.content);
console.log(workingInput);
workingSets.value.push(newWorkingSet.content);
};
const addWeight = () => {
//TODO: Add warmup sets and reps to store
weight.addWeight(workingSetInput.value, workingRepsSets.value);
workingSetInput.value = "";
workingRepsSets.value = "";
}
console.log(addWeight);
weightInput.addWeightInput(workingSets, workingReps, warmUpSets, warmUpReps, selectedExercise);
</script>
<style>
</style>
export default weightsInput;