refactor: added exerciseList.vue to ensure modularity

main
rYeti 2023-05-03 00:30:42 +02:00
parent ba858e70c0
commit 16ae5880e1
12 changed files with 103 additions and 149 deletions

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-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>

View File

@ -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());
});
};
*/

View File

@ -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>

View File

@ -1 +1,2 @@
export { default as NavigationModel } from './NavigationModel.vue';
export { default as ExerciseList } from './ExerciseList.vue';

View File

@ -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 }
})

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>