reworkd the storeInput

2023-06-01 17:01:02 +02:00 · 2023-06-01 17:01:02 +02:00 · 39e7f9daa7
parent e9a696dcaa
commit 39e7f9daa7
3 changed files with 108 additions and 128 deletions
--- a/src/components/ExerciseList.vue
+++ b/src/components/ExerciseList.vue
@ -70,7 +70,7 @@
  };

  const addSets = () => {
-    weightInput.initInputs(selectedExercise.value);
+    weightInput.initSetsInputs(selectedExercise.value);
  };

 </script>
--- a/src/stores/storeInput.js
+++ b/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'), {
-    state: () => reactive ({
-        workingSets: [
-            {
-                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: {
+export const useWeightInputStore = defineStore('weightInput', () => {
+    // localStorage https://vueuse.org/core/useLocalStorage/
+    const exercises = useLocalStorage('exercises', {});
    
-    },
-    actions: {
-        removeWorkingSet(selectedExercise) {
-            this.sets = this.sets.filter(e => {return e.selectedExercise !== selectedExercise})
-        },
-        addWorkingSet(selectedExercise) {              
-            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,
+    function addWorkingSet(selectedExercise) {
+        if (!exercises.value[selectedExercise]) {
+            exercises.value[selectedExercise] = {
+              workingSet: [],
+            };
+            exercises.value[selectedExercise].workingSet.push({
                workingSetReps: [],
-                workingSetsWeight: [],
-                workingSetCount: 1,
-            })
-            this.warmUpSets.push({
-                selectedExercise: selectedExercise,
-                warmUpReps: [],
-                warmUpSetsWeight: [],
-                warmUpSetCount: 1,
+                workingSetWeight: [],});
+          }
+          exercises.value[selectedExercise].workingSet.push({
+            workingSetReps: [],
+            workingSetWeight: [],
+          });
+    }
+
+    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 }
+
+    }
+)
--- a/src/views/weight/WeightsInput.vue
+++ b/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()" 
-        class="bg-accent hover:bg-primary-button text-white font-bold py-2 px-2 rounded ml-7">
-        Add
+        <button @click="weightInput.addWorkingSet(selectedExercise.selectedExercise)" 
+                class="bg-accent hover:bg-primary-button text-white font-bold py-2 px-2 rounded ml-7">
+                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">
-            {{ workingset.content }}  
+          <div v-for="(workingset, workingSetCount) in weightInput.exercises.workingSets" :key="workingSetCount" class="item flex justify-smart mt-1">
+            {{ 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 = () => {
-weightInput.addWorkingSet(selectedExercise.selectedExercise);
-}
+// const addWorkingSet = () => {
+// weightInput.addWorkingSet(selectedExercise.selectedExercise);}

-const warmUpAddSet = () => { 
-  const newWarmUpSet = {
-   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) {
+  const warmUpSetSmallerOne = () =>  {
+    if (weightInput.getWarmUpSetCount < 1) {
      return false;
    } 
    return true;
-  });
+  };

-  const workingSetSmallerOne = computed(() => {
-    if (weightInput.workingSets.workingSetCount < 1) {
+  const workingSetSmallerOne = () => {
+    if (weightInput.getWorkingSetCount < 1) {
      return false;
    } 
    return true;
-  });
+  };

 </script>