From 4c262ba076e004ef4ae8321b11b92ed12950a7b9 Mon Sep 17 00:00:00 2001
From: roberts <robert.stertz1@hs-augsburg.de>
Date: Sun, 21 May 2023 00:40:42 +0200
Subject: [PATCH] added a remove button and fixed a bug where the input
 component was added to the view instead of getting a new one for the specifig
 exercise

---
 src/components/ExerciseList.vue           | 33 +++++++++++++----------
 src/components/NavigationModel.vue        |  1 +
 src/stores/{store.js => storeExercise.js} | 10 +++----
 src/stores/storeInput.js                  | 22 ++++++++-------
 src/views/weight/WeightsInput.vue         | 32 ++++++++++++++++++++++
 5 files changed, 69 insertions(+), 29 deletions(-)
 rename src/stores/{store.js => storeExercise.js} (59%)

diff --git a/src/components/ExerciseList.vue b/src/components/ExerciseList.vue
index b548c94..3022fb9 100644
--- a/src/components/ExerciseList.vue
+++ b/src/components/ExerciseList.vue
@@ -1,20 +1,24 @@
 <template>
-    <input class="search text-white font-bold py-2 px-2 rounded mt-5" type="text" v-model="input" placeholder="Search..." />
+    <input class="search 
+    text-black py-2 px-2 rounded mt-5" 
+    v-model="input"
+    type="text" 
+    placeholder="Search..." />
     <div class="flex">
     <div class="exerciseList">
       <ul class="exerciseItem" v-for="exercise in filterExercises()" :key="exercise.name">
         <button @click="exerciseClick(exercise)" class="btn bg-secondary-button hover:bg-accent text-white font-bold py-2 px-2 rounded" >{{ exercise.name }}</button>
       </ul>
     </div>
-    <div v-for="selectedExercise in selectedExercises" :key="selectedExercise" class="show">
-      <WeightsInput v-model:selectedExercise="exerciseName"/>
+    <div v-if="selectedExercise">
+      <WeightsInput :selectedExercise="selectedExercise"></WeightsInput>
     </div>
   </div>
 </template>
 
 <script setup>
 
-  import { usePostStore } from '@/stores/store.js';
+  import { useExerciseStore } from '@/stores/storeExercise.js';
   import { onMounted, ref } from 'vue';
   import WeightsInput from "@/views/weight/WeightsInput.vue";
 
@@ -22,12 +26,9 @@
       muscle: String,
   })
 
-  const json = usePostStore()
+  const json = useExerciseStore()
   const exercises = ref([])
-  // idee mit hilfe von chatGpt
-  const selectedExercises = ref([])
-  // const isClicked = ref(false)
-  let exerciseName = ""
+  const selectedExercise = ref(null)
 
   onMounted(async () => {
         await json.fetchMuscleExercise()
@@ -63,13 +64,17 @@
   };
 
   const exerciseClick = (exercise) => {
-    exerciseName = exercise.name 
-    const existingExercise = selectedExercises.value.find((selected) => selected.name === exercise.name);
-    if (!existingExercise) {
-      selectedExercises.value.push({ exercise, weight: '' });
-    }
+    selectedExercise.value = exercise;
+    // const existingExercise = selectedExercises.value.find((selected) => selected.name === exercise.name);
+    // if (!existingExercise) {
+    // selectedExercises.value.push({ exercise, weight: '' });
+    // }
   };
 
+//   const selectedExercise = computed(() => {
+//   return selectedExercises.value.length > 0 ? selectedExercises.value[0] : null;
+// });
+
 </script>
 
 <style>
diff --git a/src/components/NavigationModel.vue b/src/components/NavigationModel.vue
index 101ba08..70bab60 100644
--- a/src/components/NavigationModel.vue
+++ b/src/components/NavigationModel.vue
@@ -38,6 +38,7 @@
     margin-right: 1rem;
     color: #e7f1df;
     text-decoration: none;
+    font-size: 1.2rem;
 }
 
 .nav-item:hover{
diff --git a/src/stores/store.js b/src/stores/storeExercise.js
similarity index 59%
rename from src/stores/store.js
rename to src/stores/storeExercise.js
index af10cab..4f4fd6b 100644
--- a/src/stores/store.js
+++ b/src/stores/storeExercise.js
@@ -2,21 +2,21 @@ import {defineStore} from 'pinia'
 import muscleExercise from '../assets/muscleExercise';
 import { ref } from 'vue'
 
-export const usePostStore = defineStore('json', () => {
-    const postList = ref([])
+export const useExerciseStore = defineStore('json', () => {
+    const exerciseList = ref([])
     const error = ref([])
    
     async function fetchMuscleExercise() {
-        postList.value = muscleExercise
+        exerciseList.value = muscleExercise
         error.value = []
     }
 
     return {
-        postList, 
+        postList: exerciseList, 
         error, 
         fetchMuscleExercise
     }
     }   
 )
 
-export default usePostStore
\ No newline at end of file
+export default useExerciseStore
\ No newline at end of file
diff --git a/src/stores/storeInput.js b/src/stores/storeInput.js
index 328324a..ab9677d 100644
--- a/src/stores/storeInput.js
+++ b/src/stores/storeInput.js
@@ -1,6 +1,7 @@
-import {defineStore} from 'pinia'
+import { defineStore } from 'pinia'
 //https://vueuse.org/core/useStorage/
-import {useStorage} from '@vueuse/core'
+import { useStorage } from '@vueuse/core'
+import { useExerciseStore } from './storeExercise.js';
 
 //see https://stephanlangeveld.medium.com/simple-local-storage-implementation-using-vue-3-vueuse-and-pinia-with-zero-extra-lines-of-code-cb9ed2cce42a
 export const useWeightInputStore = defineStore({
@@ -12,19 +13,20 @@ export const useWeightInputStore = defineStore({
         warmUpSets: useStorage('warmUpSets', []),
         warmUpReps: useStorage('warmUpReps', []),
         warmUpSetsWeight: useStorage('warmUpSetsWeight', []),
-        selectedExercise: useStorage('selectedExercise', []),
+        selectedExercise: [],
         warmUpSetCount: useStorage('warmUpSetCount', 0),
         workingSetCount: useStorage('workingSetCount', 0),
     }),
     getters: {
-        getAllWeights(state) {
-            return state.weight;
-        },
+        getInputsPerExercise : (state) => {
+            const exercise = useExerciseStore.exerciseList.value;
+            return state.selectedExercise.filter((item) => item.exercise === exercise.exerciseList.value);
+        }
     },
     actions: {
-        addWeight(weight, reps) {
-            this.weight.push(weight);
-            this.reps.push(reps);
-        },
+        removeWarmUpSet() {
+            this.workingSets.pop();
+            this.warmUpSetCount--;
+        }
     },
 })
\ No newline at end of file
diff --git a/src/views/weight/WeightsInput.vue b/src/views/weight/WeightsInput.vue
index abe5a67..880a670 100644
--- a/src/views/weight/WeightsInput.vue
+++ b/src/views/weight/WeightsInput.vue
@@ -6,6 +6,11 @@
                 class="bg-accent hover:bg-primary-button text-white font-bold py-2 px-2 rounded ml-5">
                 Add
         </button>
+        <button :disabled="!warmUpSetSmallerOne"
+                @click="removeWarmUpSet()"
+                class="bg-accent hover:bg-primary-button text-white font-bold py-2 px-2 rounded ml-5 disabled:opacity-25">
+                Remove
+        </button>
         <div>
           <div v-for="(warmUpSet, warmUpSetCount) in weightInput.warmUpSets" :key="warmUpSetCount" class="item flex justify-smart mt-1">
             {{ warmUpSet }}  
@@ -35,6 +40,11 @@
         class="bg-accent hover:bg-primary-button text-white font-bold py-2 px-2 rounded ml-7">
         Add
       </button>
+      <button :disabled="!setSmallerOne"
+                @click="removeWarmUpSet()"
+                class="bg-accent hover:bg-primary-button text-white font-bold py-2 px-2 rounded ml-5 disabled:opacity-25">
+                Remove
+        </button>
         
         <div>
           <div v-for="(workingset, workingSetCount) in weightInput.workingSets" :key="workingSetCount" class="item flex justify-smart mt-1">
@@ -64,12 +74,14 @@
 
 <script setup>
 import { useWeightInputStore } from '@/stores/storeInput';
+import { computed } from 'vue';
 
 const selectedExercise = defineProps({
   selectedExercise: String
 });
 
 const weightInput = useWeightInputStore();
+weightInput.selectedExercise = selectedExercise;
 
 const warmUpAddSet = () => { 
   const newWarmUpSet = {
@@ -87,6 +99,26 @@ const workingAddSet = () => {
   weightInput.workingSets.push(newWorkingSet.content);
 };
 
+const removeWarmUpSet = () => {
+  weightInput.warmUpSets.pop();
+  weightInput.warmUpSetsWeight.pop();
+  weightInput.warmUpSetCount--;
+  };
+
+  const removeWorkingSet = () => {
+    weightInput.workingSets.pop();
+    weightInput.workingSetsWeight.pop();
+    weightInput.workingSetCount--;
+    };
+
+  const warmUpSetSmallerOne = computed(() => {
+    if (weightInput.warmUpSetCount < 1) {
+      return false;
+    } 
+    return true;
+  });
+  
+
 </script>
 
 <style>