112 lines
3.9 KiB
Vue
112 lines
3.9 KiB
Vue
<script setup lang="ts">
|
|
import { defineProps, ref } from 'vue'
|
|
|
|
const props = defineProps({
|
|
date: String,
|
|
muscle: String,
|
|
selectedExercise: String,
|
|
})
|
|
|
|
const weightInput = useWeightInputStore()
|
|
weightInput.selectedExercise = ref(props.selectedExercise)
|
|
|
|
const addWorkingSet = () => weightInput.addWorkingSet(props.date, props.muscle, props.selectedExercise)
|
|
const removeWorkingSet = () => weightInput.removeWorkingSet(props.date, props.muscle, props.selectedExercise)
|
|
const getWorkingSetCount = weightInput.getWorkingSetCount(props.date, props.muscle, props.selectedExercise)
|
|
const addWarmUpSet = () => weightInput.addWarmUpSet(props.date, props.muscle, props.selectedExercise)
|
|
const removeWarmUpSet = () => weightInput.removeWarmUpSet(props.date, props.muscle, props.selectedExercise)
|
|
const getWarmUpSetCount = weightInput.getWarmUpSetCount(props.date, props.muscle, props.selectedExercise)
|
|
|
|
function restrictToNumbers(event) {
|
|
const charCode = event.which ? event.which : event.keyCode
|
|
if (charCode > 31 && (charCode < 48 || charCode > 57))
|
|
event.preventDefault()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-2/3 mx-auto">
|
|
<div class="mt-2">
|
|
<label>Warm-Up Sets</label>
|
|
<button
|
|
class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-2 rounded ml-5"
|
|
@click="addWarmUpSet"
|
|
>
|
|
Add
|
|
</button>
|
|
<button
|
|
:disabled="getWarmUpSetCount <= 1"
|
|
class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-2 rounded ml-5 disabled:opacity-25"
|
|
@click="removeWarmUpSet"
|
|
>
|
|
Remove
|
|
</button>
|
|
|
|
<div
|
|
v-for="(warmUpSet, warmUpSetCount) in weightInput.exercises[date][muscle][selectedExercise].warmUpSet"
|
|
:key="warmUpSetCount"
|
|
class="flex ml-2"
|
|
>
|
|
<label>Set {{ warmUpSetCount + 1 }}</label>
|
|
<div class="ml-3">
|
|
<input
|
|
v-model="warmUpSet.warmSetWeight"
|
|
type="number"
|
|
class="mt-1 px-3 py-2 border shadow-sm weightInput.exercises[ focus:outline-none block rounded-md sm:text-sm"
|
|
placeholder="Weight (kg)"
|
|
@keypress="restrictToNumbers"
|
|
>
|
|
</div>
|
|
<div class="ml-3">
|
|
<input
|
|
v-model="warmUpSet.warmSetReps"
|
|
type="number"
|
|
class="mt-1 px-3 py-2 border shadow-sm weightInput.exercises[ focus:outline-none block rounded-md sm:text-sm"
|
|
placeholder="Reps"
|
|
@keypress="restrictToNumbers"
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="working-set mt-5">
|
|
<label>Working Sets</label>
|
|
<button
|
|
class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-2 rounded ml-7"
|
|
@click="addWorkingSet"
|
|
>
|
|
Add
|
|
</button>
|
|
<button
|
|
:disabled="getWorkingSetCount <= 1"
|
|
class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-2 rounded ml-5 disabled:opacity-25"
|
|
@click="removeWorkingSet"
|
|
>
|
|
Remove
|
|
</button>
|
|
|
|
<div v-for="(workingset, workingSetCount) in weightInput.exercises[date][muscle][selectedExercise].workingSet" :key="workingSetCount" class="item flex justify-smart mt-1">
|
|
<label class="">{{ workingSetCount + 1 }}. Set</label>
|
|
<div class="ml-3">
|
|
<input
|
|
v-model="workingset.workingSetWeight"
|
|
type="number"
|
|
class="mt-1 px-3 py-2 border shadow-sm weightInput.exercises[ focus:outline-none block rounded-md sm:text-sm"
|
|
placeholder="Weight (Kg)"
|
|
@keypress="restrictToNumbers"
|
|
>
|
|
</div>
|
|
<div class="ml-3">
|
|
<input
|
|
v-model="workingset.workingSetReps"
|
|
type="number"
|
|
class="mt-1 px-3 py-2 border shadow-sm focus:outline-none block rounded-md sm:text-sm"
|
|
placeholder="Reps"
|
|
@keypress="restrictToNumbers"
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|