added state for weightsinput
parent
d305af0547
commit
dd3aa18cd4
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
exerciseName = exercise.name
|
||||
console.log(isClicked)
|
||||
const existingExercise = selectedExercises.value.find((selected) => selected.name === exercise.name);
|
||||
if (!existingExercise) {
|
||||
selectedExercises.value.push({ exercise, weight: '' });
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
// },
|
||||
// }
|
||||
})
|
||||
|
|
@ -4,9 +4,6 @@
|
|||
<h1>Chest</h1>
|
||||
<ExerciseList muscle="Chest"/>
|
||||
</div>
|
||||
<div>
|
||||
<weightsInput/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
Loading…
Reference in New Issue