refactor: added exerciseList.vue to ensure modularity
parent
ba858e70c0
commit
16ae5880e1
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-76441c37.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-1edf561f.js"></script></head><body><div id="app"></div></body></html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
/*
|
||||
import { usePostStore } from '@/stores/store.js'
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
const json = usePostStore()
|
||||
const exercises = ref([])
|
||||
export const muscle = ref("")
|
||||
|
||||
onMounted(async () => {
|
||||
await json.fetchMuscleExercise()
|
||||
switch (muscle) {
|
||||
case "legs":
|
||||
exercises.value = json.postList.muscle[0].exercises
|
||||
case "back":
|
||||
exercises.value = json.postList.muscle[1].exercises
|
||||
case "chest":
|
||||
exercises.value = json.postList.muscle[2].exercises
|
||||
case "shoulders":
|
||||
exercises.value = json.postList.muscle[3].exercises
|
||||
case "biceps":
|
||||
exercises.value = json.postList.muscle[4].exercises
|
||||
case "triceps":
|
||||
exercises.value = json.postList.muscle[5].exercises
|
||||
}
|
||||
}
|
||||
)
|
||||
/*
|
||||
let input = ref('');
|
||||
export function filterExercises(){
|
||||
return exercises.value.filter((exercise) => {
|
||||
return exercise.name.toLowerCase().includes(input.value.toLowerCase());
|
||||
});
|
||||
};
|
||||
*/
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<template>
|
||||
<input type="text" v-model="input" placeholder="Search..." />
|
||||
<div v-for="exercise in filterExercises()" :key="exercise.name">
|
||||
<button>{{ exercise.name }}</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import { usePostStore } from '@/stores/store.js'
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
const json = usePostStore()
|
||||
const exercises = ref([])
|
||||
|
||||
const muscle = defineProps({
|
||||
muscle: String
|
||||
})
|
||||
|
||||
console.log(muscle.muscle)
|
||||
|
||||
onMounted(async () => {
|
||||
await json.fetchMuscleExercise()
|
||||
switch (muscle.muscle) {
|
||||
case "Legs":
|
||||
exercises.value = json.postList.muscle[0].exercises
|
||||
break;
|
||||
case "Back":
|
||||
exercises.value = json.postList.muscle[1].exercises
|
||||
break;
|
||||
case "Chest":
|
||||
exercises.value = json.postList.muscle[2].exercises
|
||||
break;
|
||||
case "Shoulder":
|
||||
exercises.value = json.postList.muscle[3].exercises
|
||||
break;
|
||||
case "Biceps":
|
||||
exercises.value = json.postList.muscle[4].exercises
|
||||
break;
|
||||
case "Triceps":
|
||||
exercises.value = json.postList.muscle[5].exercises
|
||||
break;
|
||||
}
|
||||
}
|
||||
)
|
||||
let input = ref('');
|
||||
function filterExercises(){
|
||||
return exercises.value.filter((exercise) => {
|
||||
return exercise.name.toLowerCase().includes(input.value.toLowerCase());
|
||||
});
|
||||
};
|
||||
|
||||
</script>
|
||||
|
|
@ -1 +1,2 @@
|
|||
export { default as NavigationModel } from './NavigationModel.vue';
|
||||
export { default as NavigationModel } from './NavigationModel.vue';
|
||||
export { default as ExerciseList } from './ExerciseList.vue';
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import { ref, computed } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
export const useCounterStore = defineStore('counter', () => {
|
||||
const count = ref(0)
|
||||
const doubleCount = computed(() => count.value * 2)
|
||||
function increment() {
|
||||
count.value++
|
||||
}
|
||||
|
||||
return { count, doubleCount, increment }
|
||||
})
|
||||
|
|
@ -1,32 +1,12 @@
|
|||
<template>
|
||||
<div class="back">
|
||||
<h1>Back</h1>
|
||||
<input type="text" v-model="input" placeholder="Search..." />
|
||||
<div v-for="exercise in filterExercises()" :key="exercise.name">
|
||||
<button>{{ exercise.name }}</button>
|
||||
</div>
|
||||
<ExerciseList muscle="Back"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { usePostStore } from '@/stores/store.js'
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
const json = usePostStore()
|
||||
const exercises = ref([])
|
||||
|
||||
onMounted(async () => {
|
||||
await json.fetchMuscleExercise()
|
||||
exercises.value = json.postList.muscle[1].exercises
|
||||
}
|
||||
)
|
||||
|
||||
let input = ref('');
|
||||
function filterExercises(){
|
||||
return exercises.value.filter((exercise) => {
|
||||
return exercise.name.toLowerCase().includes(input.value.toLowerCase());
|
||||
});
|
||||
};
|
||||
import {ExerciseList} from "@/components/Index.js";
|
||||
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,32 +1,12 @@
|
|||
<template>
|
||||
<div class="biceps">
|
||||
<h1>Biceps</h1>
|
||||
<input type="text" v-model="input" placeholder="Search..." />
|
||||
<div v-for="exercise in filterExercises()" :key="exercise.name">
|
||||
<button>{{ exercise.name }}</button>
|
||||
</div>
|
||||
<ExerciseList muscle="Biceps"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { usePostStore } from '@/stores/store.js'
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
const json = usePostStore()
|
||||
const exercises = ref([])
|
||||
|
||||
onMounted(async () => {
|
||||
await json.fetchMuscleExercise()
|
||||
exercises.value = json.postList.muscle[4].exercises
|
||||
}
|
||||
)
|
||||
|
||||
let input = ref('');
|
||||
function filterExercises(){
|
||||
return exercises.value.filter((exercise) => {
|
||||
return exercise.name.toLowerCase().includes(input.value.toLowerCase());
|
||||
});
|
||||
};
|
||||
import {ExerciseList} from "@/components/Index.js";
|
||||
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,32 +1,12 @@
|
|||
<template>
|
||||
<div class="chest">
|
||||
<h1>Chest</h1>
|
||||
<input type="text" v-model="input" placeholder="Search..." />
|
||||
<div v-for="exercise in filterExercises()" :key="exercise.name">
|
||||
<button>{{ exercise.name }}</button>
|
||||
</div>
|
||||
<ExerciseList muscle="Chest"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { usePostStore } from '@/stores/store.js'
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
const json = usePostStore()
|
||||
const exercises = ref([])
|
||||
|
||||
onMounted(async () => {
|
||||
await json.fetchMuscleExercise()
|
||||
exercises.value = json.postList.muscle[2].exercises
|
||||
}
|
||||
)
|
||||
|
||||
let input = ref('');
|
||||
function filterExercises(){
|
||||
return exercises.value.filter((exercise) => {
|
||||
return exercise.name.toLowerCase().includes(input.value.toLowerCase());
|
||||
});
|
||||
};
|
||||
import {ExerciseList} from "@/components/Index.js";
|
||||
|
||||
</script>
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,32 +1,12 @@
|
|||
<template>
|
||||
<div class="legs">
|
||||
<h1>Legs</h1>
|
||||
<input type="text" v-model="input" placeholder="Search..." />
|
||||
<div v-for="exercise in filterExercises()" :key="exercise.name">
|
||||
<button>{{ exercise.name }}</button>
|
||||
</div>
|
||||
<ExerciseList muscle="Legs"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { usePostStore } from '@/stores/store.js'
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
const json = usePostStore()
|
||||
const exercises = ref([])
|
||||
|
||||
onMounted(async () => {
|
||||
await json.fetchMuscleExercise()
|
||||
exercises.value = json.postList.muscle[0].exercises
|
||||
}
|
||||
)
|
||||
|
||||
let input = ref('');
|
||||
function filterExercises(){
|
||||
return exercises.value.filter((exercise) => {
|
||||
return exercise.name.toLowerCase().includes(input.value.toLowerCase());
|
||||
});
|
||||
};
|
||||
import {ExerciseList} from "@/components/Index.js";
|
||||
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,33 +1,12 @@
|
|||
<template>
|
||||
<div class="shoulder">
|
||||
<h1>Shoulder</h1>
|
||||
<input type="text" v-model="input" placeholder="Search..." />
|
||||
<div v-for="exercise in filterExercises()" :key="exercise.name">
|
||||
<button>{{ exercise.name }}</button>
|
||||
</div>
|
||||
<ExerciseList muscle="Shoulder"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { usePostStore } from '@/stores/store.js'
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
const json = usePostStore()
|
||||
const exercises = ref([])
|
||||
|
||||
onMounted(async () => {
|
||||
await json.fetchMuscleExercise()
|
||||
exercises.value = json.postList.muscle[3].exercises
|
||||
}
|
||||
)
|
||||
|
||||
let input = ref('');
|
||||
function filterExercises(){
|
||||
return exercises.value.filter((exercise) => {
|
||||
return exercise.name.toLowerCase().includes(input.value.toLowerCase());
|
||||
});
|
||||
};
|
||||
|
||||
import {ExerciseList} from "@/components/Index.js";
|
||||
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,33 +1,12 @@
|
|||
<template>
|
||||
<div class="triceps">
|
||||
<h1>Triceps</h1>
|
||||
<input type="text" v-model="input" placeholder="Search..." />
|
||||
<div v-for="exercise in filterExercises()" :key="exercise.name">
|
||||
<button>{{ exercise.name }}</button>
|
||||
</div>
|
||||
<ExerciseList muscle="Triceps"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { usePostStore } from '@/stores/store.js'
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
const json = usePostStore()
|
||||
const exercises = ref([])
|
||||
|
||||
onMounted(async () => {
|
||||
await json.fetchMuscleExercise()
|
||||
exercises.value = json.postList.muscle[5].exercises
|
||||
}
|
||||
)
|
||||
|
||||
let input = ref('');
|
||||
function filterExercises(){
|
||||
return exercises.value.filter((exercise) => {
|
||||
return exercise.name.toLowerCase().includes(input.value.toLowerCase());
|
||||
});
|
||||
};
|
||||
|
||||
import {ExerciseList} from "@/components/Index.js";
|
||||
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue