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

wip weightInput state

main
roberts 2023-05-14 18:02:48 +02:00
parent c44c3c4fb4
commit 3a98ef751f
4 changed files with 63 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/assets/index-cac31405.js → dist/assets/index-0eaa6158.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-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>

59
src/stores/storeWeight.js
View File

@ -4,8 +4,44 @@ import {useStorage} from '@vueuse/core'
import { ref } from 'vue' 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 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 workingSets = ref([]);
const workingReps = ref([]); const workingReps = ref([]);
const warmUpSets = ref([]); const warmUpSets = ref([]);
@ -28,22 +64,5 @@ export const useWeightInputStore = defineStore('weightInput', () => {
selectedExercise, selectedExercise,
addWeightInput 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);
// },
// }
}) })

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

@ -3,19 +3,24 @@
<div class="w-2/3 mx-auto"> <div class="w-2/3 mx-auto">
<div class="warmup-sets mt-12 w-2/3"> <div class="warmup-sets mt-12 w-2/3">
<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, 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 }} {{ warmUpSet }}
<div class="ml-3"> <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" 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)" placeholder="Weight (kg)"
onkeypress='return event.charCode >= 48 && event.charCode <= 57'/> onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>
</div> </div>
<label class="ml-3 mt-2">Reps</label> <label class="ml-3 mt-2">Reps</label>
<div class="ml-3"> <div class="ml-3">
<input v-model="weightInput.warmUpReps[warmUpSetCount]" <input
v-model="weightInput.warmUpReps[warmUpSetCount]"
type="number" 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" 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" placeholder="Reps"
@ -26,13 +31,17 @@
<div class="working-set mt-5"> <div class="working-set mt-5">
<label>Working Sets</label> <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>
<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 }} {{ workingset }}
<div class="ml-3"> <div class="ml-3">
<input v-model="weightInput.workingSets[workingSetCount]" <input
v-model="weightInput.workingSetsWeight[workingSetCount]"
type="number" 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" 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)" placeholder="Weight (Kg)"
@ -54,63 +63,30 @@
</template> </template>
<script setup> <script setup>
import { ref } from 'vue';
import { useWeightInputStore } from '@/stores/storeWeight'; import { useWeightInputStore } from '@/stores/storeWeight';
const selectedExercise = defineProps({ const selectedExercise = defineProps({
selectedExercise: String 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 weightInput = useWeightInputStore();
// const warmUpInput = ref([]);
// warmUpInput.value = {
// warmUpSets: [],
// warmUpReps: []
// }
// const workingInput = ref([]);
// workingInput.value = {
// workingSets: [],
// workingReps: []
// }
const warmUpAddSet = () => { const warmUpAddSet = () => {
const newWarmUpSet = { const newWarmUpSet = {
id: warmUpSetCount++, id: weightInput.warmUpSetCount++,
content: warmUpSetCount.toString().concat('. Set') content: weightInput.warmUpSetCount.toString().concat('. Set')
}; };
weightInput.warmUpSets.value.push(newWarmUpSet.content); weightInput.warmUpSets.push(newWarmUpSet.content);
}; };
const workingAddSet = () => { const workingAddSet = () => {
const newWorkingSet = { const newWorkingSet = {
id: workingSetCount++, id: weightInput.workingSetCount++,
content: workingSetCount + ". Set" 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> </script>
<style> <style>