refactor: added exerciseList.vue to ensure modularity
rYeti
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>
|
<template>
|
||||||
<div class="back">
|
<div class="back">
|
||||||
<h1>Back</h1>
|
<h1>Back</h1>
|
||||||
<input type="text" v-model="input" placeholder="Search..." />
|
<ExerciseList muscle="Back"/>
|
||||||
<div v-for="exercise in filterExercises()" :key="exercise.name">
|
|
||||||
<button>{{ exercise.name }}</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { usePostStore } from '@/stores/store.js'
|
import {ExerciseList} from "@/components/Index.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());
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,32 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="biceps">
|
<div class="biceps">
|
||||||
<h1>Biceps</h1>
|
<h1>Biceps</h1>
|
||||||
<input type="text" v-model="input" placeholder="Search..." />
|
<ExerciseList muscle="Biceps"/>
|
||||||
<div v-for="exercise in filterExercises()" :key="exercise.name">
|
|
||||||
<button>{{ exercise.name }}</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { usePostStore } from '@/stores/store.js'
|
import {ExerciseList} from "@/components/Index.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());
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,32 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="chest">
|
<div class="chest">
|
||||||
<h1>Chest</h1>
|
<h1>Chest</h1>
|
||||||
<input type="text" v-model="input" placeholder="Search..." />
|
<ExerciseList muscle="Chest"/>
|
||||||
<div v-for="exercise in filterExercises()" :key="exercise.name">
|
|
||||||
<button>{{ exercise.name }}</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { usePostStore } from '@/stores/store.js'
|
import {ExerciseList} from "@/components/Index.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());
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
|
|
|
||||||
|
|
@ -1,32 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="legs">
|
<div class="legs">
|
||||||
<h1>Legs</h1>
|
<h1>Legs</h1>
|
||||||
<input type="text" v-model="input" placeholder="Search..." />
|
<ExerciseList muscle="Legs"/>
|
||||||
<div v-for="exercise in filterExercises()" :key="exercise.name">
|
|
||||||
<button>{{ exercise.name }}</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { usePostStore } from '@/stores/store.js'
|
import {ExerciseList} from "@/components/Index.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());
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,33 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="shoulder">
|
<div class="shoulder">
|
||||||
<h1>Shoulder</h1>
|
<h1>Shoulder</h1>
|
||||||
<input type="text" v-model="input" placeholder="Search..." />
|
<ExerciseList muscle="Shoulder"/>
|
||||||
<div v-for="exercise in filterExercises()" :key="exercise.name">
|
|
||||||
<button>{{ exercise.name }}</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { usePostStore } from '@/stores/store.js'
|
import {ExerciseList} from "@/components/Index.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());
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,33 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="triceps">
|
<div class="triceps">
|
||||||
<h1>Triceps</h1>
|
<h1>Triceps</h1>
|
||||||
<input type="text" v-model="input" placeholder="Search..." />
|
<ExerciseList muscle="Triceps"/>
|
||||||
<div v-for="exercise in filterExercises()" :key="exercise.name">
|
|
||||||
<button>{{ exercise.name }}</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { usePostStore } from '@/stores/store.js'
|
import {ExerciseList} from "@/components/Index.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());
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue