106 lines
2.8 KiB
Vue
106 lines
2.8 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
muscle: String,
|
|
})
|
|
|
|
const exerciseStore = useExerciseStore()
|
|
const weightInput = useWeightInputStore()
|
|
const exercises = ref([])
|
|
const selectedExercise = ref(null)
|
|
|
|
const selectedDate = ref(new Date().toISOString().substr(0, 10))
|
|
|
|
onMounted(() => {
|
|
exercises.value = exerciseStore.getExercisesByMuscle(props.muscle)
|
|
},
|
|
)
|
|
|
|
// filter exercises with help from https://blog.logrocket.com/create-search-bar-vue/ last accessed 05.05.2023
|
|
const input = ref('')
|
|
function filterExercises() {
|
|
return exercises.value.filter((exercise) => {
|
|
return exercise.name.toLowerCase().includes(input.value.toLowerCase())
|
|
})
|
|
}
|
|
|
|
function isActiveExercise(exercise) {
|
|
// TODO: Implement (exercise in weightInput.exercises) to show which exercise are edited, or put them in a proper seperate list
|
|
return { 'exercise-list-button exerciseItem': selectedExercise.value !== exercise, 'exercise-list-button-active exerciseItem': selectedExercise.value === exercise }
|
|
}
|
|
|
|
function exerciseClick(exercise) {
|
|
selectedExercise.value = exercise.name
|
|
}
|
|
|
|
function initSetInput() {
|
|
weightInput.initSetsInputs(selectedDate.value, props.muscle, selectedExercise.value)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col">
|
|
<div class="flex">
|
|
<div class="w-1/4">
|
|
<input
|
|
v-model="input"
|
|
class="text-black py-2 px-2 mt-5 rounded-md mb-4 w-full"
|
|
type="text"
|
|
placeholder="Search..."
|
|
>
|
|
</div>
|
|
<div class="w-3/4 flex justify-end">
|
|
<input
|
|
id="date"
|
|
v-model="selectedDate"
|
|
type="date"
|
|
class="text-black py-2 px-2 mt-5 rounded-md mb-4 w-2/4"
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="flex flex-col">
|
|
<div class="flex flex-row">
|
|
<div class="w-1/4">
|
|
<button v-for="exercise in filterExercises()" :key="exercise.name" :class="isActiveExercise(exercise.name)" @click="exerciseClick(exercise); initSetInput()">
|
|
{{ exercise.name }}
|
|
</button>
|
|
</div>
|
|
<div v-if="selectedExercise" class="w-3/4">
|
|
<WeightForm :date="selectedDate" :muscle="muscle" :selected-exercise="selectedExercise" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.exercise-list-button {
|
|
@apply bg-green-500 hover:bg-green-400 text-white font-bold py-2 px-2 rounded my-1 w-full;
|
|
}
|
|
|
|
.exercise-list-button-active {
|
|
@apply bg-green-600 text-white font-bold py-2 px-2 rounded mb-1 w-full;
|
|
}
|
|
|
|
.weights{
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 0.25rem;
|
|
margin-top: 0.5rem;
|
|
margin-left: 5rem;
|
|
color: white;
|
|
}
|
|
|
|
.set{
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
gap: 0.25rem;
|
|
margin-top: 0.5rem;
|
|
color: white;
|
|
|
|
}
|
|
</style>
|