refactor bet steps position on players setup

maldestor95 · May 8, 2024 · 3c3e878 · 3c3e878
1 parent 151219f
commit 3c3e878
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 19 deletions.
diff --git a/src/pages/wizard/definesteps.vue b/src/pages/wizard/definesteps.vue
@@ -1,26 +1,33 @@
 <template>
-  <form class="text-left">
-    <h3>
-      <slot>Choose the steps</slot>
-    </h3>
-    <div v-for="(option, index) in choices" :key="index" class="flex">
-      <input
-        type="radio"
-        :name="choice"
-        :value="option.id"
-        @click="updateSteps(option.id)"
-      />
-      <label :for="option.id" class="ml-2 pt-2">{{ option.opt.join("\ \ \ \ ") }}</label>
-      <br />
-    </div>
-  </form>
+  <div>
+    <form class="text-left">
+      <h3>
+        <slot>Choose the steps</slot>
+      </h3>
+      <div v-for="(option, index) in choices" :key="index" class="flex">
+        <input
+          type="radio"
+          :name="choice"
+          :value="option.id"
+          :disabled="!disabled"
+          @click="updateSteps(option.id)"
+        />
+        <label :for="option.id" class="ml-2 pt-2">{{
+          option.opt.join("\ \ \ \ ")
+        }}</label>
+        <br />
+      </div>
+    </form>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { reactive, ref } from "vue";
+
 type stepsType = number[];
 type Props = {
   steps?: number[];
+  disabled: boolean;
 };
 
 const emit = defineEmits<{
@@ -31,6 +38,7 @@ const props = withDefaults(defineProps<Props>(), {
   steps: () => {
     return [-5, -2, -1, 1, 2, 5];
   },
+  disabled: false,
 });
 
 const choice = ref("opt1");

diff --git a/src/pages/wizard/players.vue b/src/pages/wizard/players.vue
@@ -13,9 +13,6 @@
         <toggleSwitch v-model="showStepsSetup" square class="text-black justify-self-end"
           >Steps Setup</toggleSwitch
         >
-        <toggleSwitch v-model="store.trackBets" square class="text-black justify-self-end"
-          >Bets
-        </toggleSwitch>
       </div>
     </container>
 
@@ -31,14 +28,18 @@
           >ROUND STEPS</defineSteps
         >
       </container>
-      <container class="basis-full pl-4 md:basis-1/2" v-if="store.trackBets">
+      <container class="basis-full pl-4 md:basis-1/2">
+        <toggleSwitch v-model="store.trackBets" square class="text-black justify-self-end"
+          >Bets
+        </toggleSwitch>
         <defineSteps
           :steps="store.betSteps"
           @change="
             (ev) => {
               store.betSteps = ev;
             }
           "
+          :disabled="store.trackBets"
           >BETS STEPS</defineSteps
         ></container
       >