From c44c3c4fb4e4784f7b027642cf843141dce5a1b4 Mon Sep 17 00:00:00 2001
From: rYeti <Robert.Stertz1@HS-Augsburg.DE>
Date: Sun, 14 May 2023 01:20:43 +0200
Subject: [PATCH] resolved binding error and added number validator for inputs

---
 src/stores/storeWeight.js         | 12 ++++-----
 src/views/weight/WeightsInput.vue | 42 +++++++++++++++++++++++++------
 2 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/src/stores/storeWeight.js b/src/stores/storeWeight.js
index a7ae186..4e18fd9 100644
--- a/src/stores/storeWeight.js
+++ b/src/stores/storeWeight.js
@@ -13,13 +13,13 @@ export const useWeightInputStore = defineStore('weightInput', () => {
     const selectedExercise = ref([]);
 
     function addWeightInput(workingSetWeight, workingRepsInput, warmUpSetsWeight, warmUpRepsInput, selectedExerciseInput) {
-        workingSets.value.push(workingSetWeight);
-        workingReps.value.push(workingRepsInput);
-        warmUpSets.value.push(warmUpSetsWeight);
-        warmUpReps.value.push(warmUpRepsInput);
-        selectedExercise.value.push(selectedExerciseInput);
+        workingSets.value = workingSetWeight;
+        workingReps.value  = workingRepsInput;
+        warmUpSets.value  = warmUpSetsWeight;
+        warmUpReps.value  = warmUpRepsInput;
+        selectedExercise.value  = selectedExerciseInput;
+        
     }
-
     return {
         workingSets,
         workingReps,
diff --git a/src/views/weight/WeightsInput.vue b/src/views/weight/WeightsInput.vue
index 3b5202d..cb23821 100644
--- a/src/views/weight/WeightsInput.vue
+++ b/src/views/weight/WeightsInput.vue
@@ -5,14 +5,21 @@
         <label>Warm-Up Sets</label>
         <button @click="warmUpAddSet()" class="add-btn bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded ml-5">Add</button>
         <div>
-          <div v-for="warmUpSet in warmUpSets" :key="warmUpSet" class="item flex justify-smart mt-1">
+          <div v-for="(warmUpSet, warmUpSetCount) in warmUpSets" :key="warmUpSetCount" class="item flex justify-smart mt-1">
             {{ warmUpSet }}  
           <div class="ml-3">
-            <input v-model="warmUpSets" class="mt-1 px-3 py-2 bg-black border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block rounded-md sm:text-sm focus:ring-1" placeholder="Weight in Kg"/>
+            <input v-model="weightInput.warmUpSets[warmUpSetCount]" 
+            type="number" class="mt-1 px-3 py-2 bg-black border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block rounded-md sm:text-sm focus:ring-1" 
+            placeholder="Weight (kg)"
+            onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>
           </div>
           <label class="ml-3 mt-2">Reps</label>
           <div class="ml-3">
-            <input v-model="warmUpReps" class="mt-1 px-3 py-2 bg-black border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block rounded-md sm:text-sm focus:ring-1" placeholder="Reps">
+            <input v-model="weightInput.warmUpReps[warmUpSetCount]" 
+            type="number" 
+            class="mt-1 px-3 py-2 bg-black border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block rounded-md sm:text-sm focus:ring-1" 
+            placeholder="Reps"
+            onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>
           </div>
         </div>  
       </div>
@@ -22,14 +29,22 @@
         <button @click="workingAddSet()" class="add-btn bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded ml-7">Add</button>
         
         <div>
-          <div v-for="workingset in set" :key="workingset" class="item flex justify-smart mt-1">
+          <div v-for="(workingset, workingSetCount) in workingSets" :key="workingSetCount" class="item flex justify-smart mt-1">
             {{ workingset }}  
           <div class="ml-3">
-            <input v-model="workingSets" class="mt-1 py-2 bg-black border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block rounded-md sm:text-sm focus:ring-1" placeholder="Weight in Kg"/>
+            <input v-model="weightInput.workingSets[workingSetCount]" 
+            type="number" 
+            class="mt-1 py-2 bg-black border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block rounded-md sm:text-sm focus:ring-1" 
+            placeholder="Weight (Kg)"
+            onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>
           </div>
           <label class="ml-3 mt-2">Reps</label>
           <div class="ml-3">
-            <input v-model="workingReps" class="mt-1 px-3 py-2 bg-black border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block rounded-md sm:text-sm focus:ring-1" placeholder="Reps">
+            <input v-model="weightInput.workingReps[workingSetCount]" 
+            type="number" 
+            class="mt-1 px-3 py-2 bg-black border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block rounded-md sm:text-sm focus:ring-1" 
+            placeholder="Reps"
+            onkeypress='return event.charCode >= 48 && event.charCode <= 57'> <!-- https://stackoverflow.com/questions/66172698/textbox-which-accepts-only-numbers-in-vue-js -->
           </div>
         </div>  
       </div>
@@ -55,6 +70,7 @@ const warmUpReps = ref([]);
 const set = ref([]);
 const weightInput = useWeightInputStore();
 
+
 // const warmUpInput = ref([]);
 // warmUpInput.value = {
 //     warmUpSets: [],
@@ -72,7 +88,7 @@ const warmUpAddSet = () => {
     id: warmUpSetCount++,
     content: warmUpSetCount.toString().concat('. Set')
   };
-  warmUpSets.value.push(newWarmUpSet.content);
+  weightInput.warmUpSets.value.push(newWarmUpSet.content);
 };
 
 const workingAddSet = () => {   
@@ -80,9 +96,19 @@ const workingAddSet = () => {
     id: workingSetCount++,
     content: workingSetCount + ". Set"
   };
- workingSets.value.push(newWorkingSet.content);
+  weightInput.workingSets.value.push(newWorkingSet.content);
 };
 
+function validateNumber(event, property, index) {
+      const inputValue = event.target.value;
+      const isValid = !isNaN(parseFloat(inputValue)) && isFinite(inputValue);
+      
+      if (!isValid) {
+        // If the input is not a valid number, reset the property value to null
+        weightInput.workingSets.value[index][property] = null;
+      }
+    };
+
 weightInput.addWeightInput(workingSets, workingReps, warmUpSets, warmUpReps, selectedExercise);
 
 </script>