reworkd the storeInput

src/components/ExerciseList.vue

@@ -70,7 +70,7 @@
   };
 
   const addSets = () => {
-    weightInput.initInputs(selectedExercise.value);
+    weightInput.initSetsInputs(selectedExercise.value);
   };
 
 </script>

src/stores/storeInput.js

@@ -1,91 +1,91 @@
 import { defineStore } from 'pinia'
-import { reactive } from 'vue'
+// import { reactive } from 'vue'
+import { useLocalStorage } from '@vueuse/core'
 
-export const useWeightInputStore = defineStore(('weightInput'), {
+export const useWeightInputStore = defineStore('weightInput', () => {
-    state: () => reactive ({
+    // localStorage https://vueuse.org/core/useLocalStorage/
-        workingSets: [
+    const exercises = useLocalStorage('exercises', {});
-            {
-                selectedExercise: '',
-                workingReps: [],
-                workingSetsWeight: [],
-                workingSetCount: 0,
-                /*
-                selectedExercise: '',
-                workingSet: [
-                    {
-                        workingReps: [],
-                        workingSetsWeight: []
-                    }
-                ],
-                workingSetReps: [],
-                workingSetWeight: [],
-                workingSetCount: 0,
-                */
-            }
-        ],
-        warmUpSets: [
-            {
-                selectedExercise: '',
-                warmUpReps: [],
-                warmUpSetsWeight: [],
-                warmUpSetCount: 0,
-                /*
-                selectedExercise: '',
-                warmUpSet: [
-                    {
-                        warmUpReps: [0,],
-                        warmUpSetsWeight: [0,],
-                    }
-                ],
-                warmUpSetReps: [],
-                warmUpSetWeight: [],
-                warmUpSetCount: 0,*/
-            }
-        ],
-    }),
-    getters: {
     
-    },
+    function addWorkingSet(selectedExercise) {
-    actions: {
+        if (!exercises.value[selectedExercise]) {
-        removeWorkingSet(selectedExercise) {
+            exercises.value[selectedExercise] = {
-            this.sets = this.sets.filter(e => {return e.selectedExercise !== selectedExercise})
+              workingSet: [],
-        },
+            };
-        addWorkingSet(selectedExercise) {              
+            exercises.value[selectedExercise].workingSet.push({
-            const targetExercise = this.state.find(set => set.selectedExercise.name === selectedExercise);
-            if(targetExercise) {
-                targetExercise.warmUpReps.push([]);
-                targetExercise.warmUpSetsWeight.push([]);
-                targetExercise.warmUpSetCount++;
-            } else {
-                this.workingSets.push({
-                  selectedExercise,
-                  workingReps: [],
-                  workingSetsWeight: [],
-                  workingSetCount: 1,
-                })
-              }  
-        },
-        addWarmUpSet(selectedExercise) {
-            this.warmUpSets.push({
-                warmUpSets: [],
-                warmUpReps: [],
-                warmUpSetsWeight: [],
-                warmUpSetCount: warmUpSetCount++,
-            })
-        },
-        initInputs(selectedExercise) {
-            this.workingSets.push({
-                selectedExercise: selectedExercise,
                 workingSetReps: [],
-                workingSetsWeight: [],
+                workingSetWeight: [],});
-                workingSetCount: 1,
+          }
-            })
+          exercises.value[selectedExercise].workingSet.push({
-            this.warmUpSets.push({
+            workingSetReps: [],
-                selectedExercise: selectedExercise,
+            workingSetWeight: [],
-                warmUpReps: [],
+          });
-                warmUpSetsWeight: [],
+    }
-                warmUpSetCount: 1,
+
+    function addWarmUpSet(selectedExercise) {
+        if (!exercises.value[selectedExercise]) {
+            exercises.value[selectedExercise] = {
+                warmUpSet: [],
+            };
+            exercises.value[selectedExercise].warmUpSet.push({
+                warmSetReps: [],
+                warmSetWeight: [],});
+          }
+          exercises.value[selectedExercise].warmUpSet.push({
+            warmSetReps: [],
+            warmSetWeight: [],
+          });
+    }
+
+    function removeWorkingSet(selectedExercise) {
+        if(exercises.value[selectedExercise]) {
+            exercises.workingSet.pop({
+            workingSetReps: [],
+            workingSetsWeight: [],
             })
         }
     }
-})
+    
+    function removeWarmUpSet(selectedExercise) {
+        if(exercises.value[selectedExercise]) {
+            exercises.warmUpSet.pop({
+            warmUpSetReps: [],
+            warmUpSetsWeight: [],
+            })
+        }
+    }
+
+    function getWorkingSetCount(selectedExercise) {
+        if (exercises.value[selectedExercise]) {
+          return exercises.value[selectedExercise].workingSet.length;
+        }
+        return 0;
+      }
+    
+      function getWarmUpSetCount(selectedExercise) {
+        if (exercises.value[selectedExercise]) {
+          return exercises.value[selectedExercise].warmUpSet.length;
+        }
+        return 0;
+      }
+
+      function initSetsInputs(selectedExercise) {
+        if(!exercises.value[selectedExercise]) {
+            exercises.value[selectedExercise] = {
+                workingSet: [],
+                warmUpSet: [],
+              };
+            };
+        exercises.value[selectedExercise].workingSet.push({
+            workingSetReps: [],
+            workingSetWeight: [],
+          });
+          exercises.value[selectedExercise].warmUpSet.push({
+            warmSetReps: [],
+            warmSetWeight: [],
+          });
+    }     
+
+    return { exercises, addWorkingSet, removeWorkingSet, addWarmUpSet, removeWarmUpSet, getWorkingSetCount, getWarmUpSetCount, initSetsInputs }
+
+    }
+)

src/views/weight/WeightsInput.vue

@@ -2,21 +2,22 @@
     <div class="w-2/3 mx-auto">
       <div class="warmup-sets mt-2">
         <label>Warm-Up Sets</label>
-        <button @click="addWarmUpSet(selectedExercise)" 
+        <button @click="weightInput.addWarmUpSet(selectedExercise)" 
                 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()"
+                @click="weightInpug.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.warmUpSets" :key="warmUpSetCount" class="item flex justify-smart mt-1">
+          <div v-for="(warmUpSet, warmUpSetCount) in weightInput.exercises.warmUpSets" :key="warmUpSetCount" class="item flex justify-smart mt-1">
             {{ warmUpSet }}  
           <div class="ml-3">
+            <label class="ml-3 mt-2"> {{ warmUpSetCount }}. Set</label>
             <input 
-            v-model="weightInput.warmUpSets.warmUpSetsWeight[warmUpSetCount]" 
+            v-model="weightInput.exercises.warmUpSets.warmUpSetsWeight[warmUpSetCount]" 
             type="number" 
             class="mt-1 px-3 py-2 bg-black border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none block rounded-md sm:text-sm " 
             placeholder="Weight (kg)"
@@ -25,7 +26,7 @@
           <label class="ml-3 mt-2">Reps</label>
           <div class="ml-3">
             <input 
-            v-model="weightInput.warmUpSets.warmUpReps[warmUpSetCount]" 
+            v-model="weightInput.exercises.warmUpSets.warmUpSetReps[warmUpSetCount]" 
             type="number" 
             class="mt-1 px-3 py-2 bg-black border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none block rounded-md sm:text-sm " 
             placeholder="Reps"
@@ -36,9 +37,9 @@
 
       <div class="working-set mt-5">
         <label>Working Sets</label>
-        <button @click="addWorkingSet()" 
+        <button @click="weightInput.addWorkingSet(selectedExercise.selectedExercise)" 
-        class="bg-accent hover:bg-primary-button text-white font-bold py-2 px-2 rounded ml-7">
+                class="bg-accent hover:bg-primary-button text-white font-bold py-2 px-2 rounded ml-7">
-        Add
+                Add
       </button>
       <button :disabled="!workingSetSmallerOne"
                 @click="weightInput.removeWorkingSet(selectedExercise)"
@@ -47,11 +48,11 @@
         </button>
         
         <div>
-          <div v-for="(workingset, workingSetCount) in weightInput.workingSets" :key="workingSetCount" class="item flex justify-smart mt-1">
+          <div v-for="(workingset, workingSetCount) in weightInput.exercises.workingSets" :key="workingSetCount" class="item flex justify-smart mt-1">
-            {{ workingset.content }}  
+            {{ workingset }}  
           <div class="ml-3">
             <input
-            v-model="weightInput.workingSets.workingSetsWeight[workingSetCount]" 
+            v-model="weightInput.exercises.workingSets.workingSetsWeight[workingSetCount]" 
             type="number" 
             class="mt-1 px-3 py-2 bg-black border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none block rounded-md sm:text-sm " 
             placeholder="Weight (Kg)"
@@ -59,7 +60,8 @@
           </div>
           <label class="ml-3 mt-2">Reps</label>
           <div class="ml-3">
-            <input v-model="weightInput.workingSets.workingReps[workingSetCount]" 
+            <input 
+            v-model="weightInput.exercises.workingSets.workingSetReps[workingSetCount]" 
             type="number" 
             class="mt-1 px-3 py-2 bg-black border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none block rounded-md sm:text-sm " 
             placeholder="Reps"
@@ -74,7 +76,7 @@
 
 <script setup>
 import { useWeightInputStore } from '@/stores/storeInput';
-import { ref, computed } from 'vue';
+import { ref } from 'vue';
 
 const selectedExercise = defineProps({
   selectedExercise: String
@@ -83,44 +85,22 @@ const selectedExercise = defineProps({
 const weightInput = useWeightInputStore();
 weightInput.selectedExercise = ref(selectedExercise.selectedExercise);
 
-const addWorkingSet = () => {
+// const addWorkingSet = () => {
-weightInput.addWorkingSet(selectedExercise.selectedExercise);
+// weightInput.addWorkingSet(selectedExercise.selectedExercise);}
-}
 
-const warmUpAddSet = () => { 
+  const warmUpSetSmallerOne = () =>  {
-  const newWarmUpSet = {
+    if (weightInput.getWarmUpSetCount < 1) {
-   id: weightInput.warmUpSets.warmUpSetCount++,
-   content:weightInput.warmUpSets.warmUpSetCount.toString().concat('. Set'),
-
-  };
-  weightInput.workingSetCount;
-};
-
-const removeWarmUpSet = () => {
-  weightInput.sets.warmUpSets.pop();
-  weightInput.sets.warmUpSetsWeight.pop();
-  weightInput.sets.warmUpSetCount--;
-  };
-
-  const removeWorkingSet = () => {
-    weightInput.sets.workingSets.pop();
-    weightInput.sets.workingSetsWeight.pop();
-    weightInput.sets.workingSetCount--;
-    };
-
-  const warmUpSetSmallerOne = computed(() => {
-    if (weightInput.warmUpSets.warmUpSetCount < 1) {
       return false;
     } 
     return true;
-  });
+  };
 
-  const workingSetSmallerOne = computed(() => {
+  const workingSetSmallerOne = () => {
-    if (weightInput.workingSets.workingSetCount < 1) {
+    if (weightInput.getWorkingSetCount < 1) {
       return false;
     } 
     return true;
-  });
+  };
 
 </script>