wip weightInput state
parent
c44c3c4fb4
commit
3a98ef751f
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-cac31405.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-0eaa6158.js"></script></head><body><div id="app"></div></body></html>
|
||||
|
|
@ -4,8 +4,44 @@ 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 useWeightInputStore = defineStore('weightInput', () => {
|
||||
|
||||
export const useWeightInputStore = defineStore({
|
||||
id: 'weightInput',
|
||||
state: () => ({
|
||||
workingSets: [],
|
||||
workingReps: [],
|
||||
warmUpSets: [],
|
||||
warmUpReps: [],
|
||||
selectedExercise: [],
|
||||
warmUpSetCount: 0,
|
||||
workingSetCount: 0,
|
||||
}),
|
||||
getters: {
|
||||
getAllWeights(state) {
|
||||
return state.weight;
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
addWeight(weight, reps) {
|
||||
this.weight.push(weight);
|
||||
this.reps.push(reps);
|
||||
},/*
|
||||
addWarmUp(){
|
||||
const newWarmUpSet = {
|
||||
id: this.warmUpSetCount++,
|
||||
content: this.warmUpSetCount.toString().concat('. Set')
|
||||
};
|
||||
this.warmUpSets.push(newWarmUpSet.content);
|
||||
},
|
||||
addWorkingSet(){
|
||||
const newWorkingSet = {
|
||||
id: this.workingSetCount++,
|
||||
content: this.workingSetCount.toString().concat('. Set')
|
||||
};
|
||||
this.workingSets.push(newWorkingSet.content);
|
||||
}
|
||||
*/
|
||||
},
|
||||
/*
|
||||
const workingSets = ref([]);
|
||||
const workingReps = ref([]);
|
||||
const warmUpSets = ref([]);
|
||||
|
|
@ -28,22 +64,5 @@ export const useWeightInputStore = defineStore('weightInput', () => {
|
|||
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,19 +3,24 @@
|
|||
<div class="w-2/3 mx-auto">
|
||||
<div class="warmup-sets mt-12 w-2/3">
|
||||
<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 v-for="(warmUpSet, warmUpSetCount) in warmUpSets" :key="warmUpSetCount" class="item flex justify-smart mt-1">
|
||||
<div v-for="(warmUpSet, warmUpSetCount) in weightInput.warmUpSets" :key="warmUpSetCount" class="item flex justify-smart mt-1">
|
||||
{{ warmUpSet }}
|
||||
<div class="ml-3">
|
||||
<input v-model="weightInput.warmUpSets[warmUpSetCount]"
|
||||
<input
|
||||
v-model="weightInput.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 focus:border-sky-500 focus:ring-sky-500 block rounded-md sm:text-sm focus:ring-1"
|
||||
placeholder="Weight (kg)"
|
||||
onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>
|
||||
</div>
|
||||
<label class="ml-3 mt-2">Reps</label>
|
||||
<div class="ml-3">
|
||||
<input v-model="weightInput.warmUpReps[warmUpSetCount]"
|
||||
<input
|
||||
v-model="weightInput.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 focus:border-sky-500 focus:ring-sky-500 block rounded-md sm:text-sm focus:ring-1"
|
||||
placeholder="Reps"
|
||||
|
|
@ -26,13 +31,17 @@
|
|||
|
||||
<div class="working-set mt-5">
|
||||
<label>Working Sets</label>
|
||||
<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 v-for="(workingset, workingSetCount) in workingSets" :key="workingSetCount" class="item flex justify-smart mt-1">
|
||||
<div v-for="(workingset, workingSetCount) in weightInput.workingSets" :key="workingSetCount" class="item flex justify-smart mt-1">
|
||||
{{ workingset }}
|
||||
<div class="ml-3">
|
||||
<input v-model="weightInput.workingSets[workingSetCount]"
|
||||
<input
|
||||
v-model="weightInput.workingSetsWeight[workingSetCount]"
|
||||
type="number"
|
||||
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 (Kg)"
|
||||
|
|
@ -54,63 +63,30 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
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 warmUpInput = ref([]);
|
||||
// warmUpInput.value = {
|
||||
// warmUpSets: [],
|
||||
// warmUpReps: []
|
||||
// }
|
||||
|
||||
// const workingInput = ref([]);
|
||||
// workingInput.value = {
|
||||
// workingSets: [],
|
||||
// workingReps: []
|
||||
// }
|
||||
|
||||
const warmUpAddSet = () => {
|
||||
const newWarmUpSet = {
|
||||
id: warmUpSetCount++,
|
||||
content: warmUpSetCount.toString().concat('. Set')
|
||||
id: weightInput.warmUpSetCount++,
|
||||
content: weightInput.warmUpSetCount.toString().concat('. Set')
|
||||
};
|
||||
weightInput.warmUpSets.value.push(newWarmUpSet.content);
|
||||
weightInput.warmUpSets.push(newWarmUpSet.content);
|
||||
};
|
||||
|
||||
const workingAddSet = () => {
|
||||
const newWorkingSet = {
|
||||
id: workingSetCount++,
|
||||
content: workingSetCount + ". Set"
|
||||
id: weightInput.workingSetCount++,
|
||||
content: weightInput.workingSetCount.toString().concat('. Set')
|
||||
};
|
||||
weightInput.workingSets.value.push(newWorkingSet.content);
|
||||
weightInput.workingSets.push(newWorkingSet.content);
|
||||
};
|
||||
|
||||
function validateNumber(event, property, index) {
|
||||
const inputValue = event.target.value;
|
||||
const isValid = !isNaN(parseFloat(inputValue)) && isFinite(inputValue);
|
||||
|
||||
if (!isValid) {
|
||||
// If the input is not a valid number, reset the property value to null
|
||||
weightInput.workingSets.value[index][property] = null;
|
||||
}
|
||||
};
|
||||
|
||||
weightInput.addWeightInput(workingSets, workingReps, warmUpSets, warmUpReps, selectedExercise);
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue