@dcrackel/hematournamentui 1.0.176 → 1.0.178

package/src/stories/Molecules/Boxes/BoutBoxes/PassesBox/PassesBox.vue

@@ -9,23 +9,18 @@
 
       <div class="w-full flex flex-row justify-around text-center px-4 pt-4">
         <div class="pt-1 w-1/4" @click="minusPass">
-          <BaseIcon icon-name="fa-square-minus" size="5xl" color="quaternary" hover="quaternary" class="hover:text-quaternaryHighlight" :disabled="score <= 0" />
+          <BaseIcon icon-name="fa-square-minus" size="5xl" color="quaternary" hover="quaternary" class="hover:text-quaternaryHighlight" :disabled="maxPasses <= 0" />
         </div>
         <div class="flex flex-row w-1/2 justify-center">
             <BaseText :text="currentPass + 1" size="5xl" color="primary" weight="bold" />
         </div>
         <div class="pt-1 w-1/4" @click="addPass">
-          <BaseIcon icon-name="fa-square-plus" size="5xl" color="quaternary" hover="quaternary" class="hover:text-quaternaryHighlight" :disabled="score <= 0" />
+          <BaseIcon icon-name="fa-square-plus" size="5xl" color="quaternary" hover="quaternary" class="hover:text-quaternaryHighlight" :disabled="maxPasses <= 0" />
         </div>
       </div>
 
       <div class="flex flex-row justify-center">
-        <div v-if="showSubmit" class="flex flex-row justify-between m-8 w-9/12">
-          <button class="w-full rounded-xl p-1 bg-red text-cloud" @click="submit">
-            Submit Score
-          </button>
-        </div>
-        <div v-if="!showSubmit" class="flex flex-row justify-between m-4 md:m-9 w-9/12">
+        <div class="flex flex-row justify-between m-4 md:m-9 w-9/12">
           <div v-for="(pass, index) in passes" :key="index">
             <div v-if="currentPass < index" class="w-4 h-4 border border-quaternary rounded-full"></div>
             <div v-if="currentPass >= index" class="w-4 h-4 bg-blue rounded-full"></div>
@@ -52,20 +47,12 @@ export default {
       type: Object,
       required: true,
     },
-    hostingClubColors: {
-      type: Object,
-      required: true
-    },
-    showSubmit: {
-      type: Boolean,
-      default: false,
-    },
     screenHeight: Number
   },
   data() {
     return {
       passes: [],
-      currentPass: this.bout.CurrentPass || 0
+      currentPass: this.bout.CurrentPass || 0,
     }
   },
   created() {
@@ -73,21 +60,24 @@ export default {
   },
   methods: {
     addPass() {
-      if (this.currentPass + 1 >= this.passes.length) {
-        this.showSubmit = true
+      if (this.currentPass+1 >= this.passes.length) {
+        this.emitPass();
         return
       }
+
       this.currentPass++
       this.passes[this.currentPass] = 1
+      this.emitPass()
     },
     minusPass() {
       if (this.currentPass <= 0) return
       this.passes[this.currentPass] = 0
       this.currentPass--
+      this.emitPass()
+    },
+    emitPass(){
+      this.$emit('update:passes', this.currentPass)
     },
-    submit() {
-      this.$emit('submit')
-    }
   }
 }
 </script>

package/src/stories/Organisms/Cards/Director/DirectorCard.vue

@@ -2,9 +2,10 @@
   <section>
     <ScoreBox :fencer1="true" :bout="localBout" :hostingClubColors="hostingClubColors" :maxScore="parseInt(maxPoints)" @update:Score="updateScore1"/>
     <TimerBox v-if="showTimerBox" :ringName="ringName" :initialTime="parseInt(startTime)" @update:time="handleTimeChange" @update:timeChange="handleTimeStateChange"/>
+    <PassesBox v-if="showPassesBox" :bout="localBout" :maxPasses="parseInt(maxPasses)" @update:passes="updatePasses" />
     <ScoreBox :fencer1="false" :bout="localBout" :hostingClubColors="hostingClubColors" :maxScore="parseInt(maxPoints)" @update:Score="updateScore2"/>
     <div class="w-11/12 mt-5 mx-6">
-      <BaseButton  label="Submit" type="grayAndBlue" :selected="showSubmit" @click="submitBout"/>
+      <BaseButton label="Submit" type="grayAndBlue" :selected="showSubmit" @click="submitBout"/>
     </div>
   </section>
 </template>
@@ -12,6 +13,7 @@
 <script>
 import ScoreBox from "../../../Molecules/Boxes/BoutBoxes/ScoreBox/ScoreBox.vue";
 import TimerBox from "../../../Molecules/Boxes/BoutBoxes/TimerBox/TimerBox.vue";
+import PassesBox from "../../../Molecules/Boxes/BoutBoxes/PassesBox/PassesBox.vue";
 import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
 
 export default {
@@ -19,6 +21,7 @@ export default {
   components: {
     BaseButton,
     TimerBox,
+    PassesBox,
     ScoreBox
   },
   props: {
@@ -50,6 +53,9 @@ export default {
     this.emitBout();
   },
   computed: {
+    showPassesBox() {
+      return this.eventRules.some(rule => rule.RuleName === "PoolNumOfPasses") || this.eventRules.some(rule => rule.RuleName === "DENumOfPasses");
+    },
     showTimerBox() {
       return this.eventRules.some(rule => rule.RuleName === "PoolTime") || this.eventRules.some(rule => rule.RuleName === "DETime");
     },
@@ -68,11 +74,20 @@ export default {
       }
       const rule = this.eventRules.find(rule => rule.RuleName === "PoolMaxPoints");
       return rule ? parseInt(rule.RuleValue) : 7;
+    },
+    maxPasses() {
+      if (this.localBout.DEBoutId) {
+        const rule = this.eventRules.find(rule => rule.RuleName === "DENumOfPasses");
+        return rule ? parseInt(rule.RuleValue) : 5;
+      }
+      const rule = this.eventRules.find(rule => rule.RuleName === "PoolNumOfPasses");
+      return rule ? parseInt(rule.RuleValue) : 5;
     }
   },
   methods: {
-    handleTimeChange(time){
+    handleTimeChange(time) {
       this.localBout.TimeLeft = time;
+      this.emitBout();
     },
     handleTimeStateChange(time) {
       this.localBout.TimeLeft = time.time;
@@ -87,14 +102,19 @@ export default {
       this.localBout.Score2 = score;
       this.emitBout();
     },
+    updatePasses(currentPass) {
+      this.localBout.CurrentPass = currentPass;
+      this.emitBout();
+    },
     submitBout() {
-      if (this.showSubmit) this.$emit('submit:bout', this.localBout)
+      if (this.showSubmit) this.$emit('submit:bout', this.localBout);
     },
-    emitBout(){
+    emitBout() {
       if (this.localBout.Started === null) this.localBout.Started = new Date().toISOString();
-      this.showSubmit = this.localBout.Score1 === this.maxPoints || this.localBout.Score2 === this.maxPoints || this.localBout.TimeLeft === 0;
-      this.$emit('update:bout', this.localBout)
+      this.showSubmit = this.localBout.Score1 === this.maxPoints || this.localBout.Score2 === this.maxPoints || this.localBout.TimeLeft === 0 || this.localBout.CurrentPass === this.maxPasses-1;
+      console.log(this.localBout)
+      this.$emit('update:bout', this.localBout);
     }
   }
 };
-</script>
+</script>

package/src/stories/Templates/EventManagement/PoolLive/PoolLive.stories.js

@@ -1,5 +1,6 @@
 import PoolLive from './PoolLive.vue';
 import getPoolsWithBoutsByPoolId from "../../../../mocks/getPoolsWithBoutsByPoolId.js";
+import getPoolsWithBouts6ByPoolId139 from "../../../../mocks/getPoolsWithBouts6PoolId139.js";
 
 export default {
     title: 'Templates/EventManagement/PoolLive',
@@ -48,4 +49,13 @@ export const allBoutsComplete = {
         hostingClubColors: getPoolsWithBoutsByPoolId.hostingClubColors,
         connectedToServer: false
     }
+};
+
+export const eventWithPasses = {
+    args: {
+        bouts: getPoolsWithBouts6ByPoolId139.pools[0].Bouts,
+        eventRules: getPoolsWithBouts6ByPoolId139.eventRules,
+        hostingClubColors: getPoolsWithBouts6ByPoolId139.hostingClubColors,
+        connectedToServer: false
+    }
 };

package/src/stories/Templates/EventManagement/PoolLive/PoolLive.vue

@@ -182,8 +182,6 @@ export default {
         return;
       }
 
-      console.log(bout)
-
       const updatedBout = this.activeBouts.find(b => b.BoutId === bout.BoutId);
 
       if (!updatedBout) {

package/src/stories/Templates/ScoreBoard/ScoreBoard.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="bg-black h-screen">
-    <FencerNameBar :bout="currentBout" :hostingClubColors="hostingClubColors" />
+    <FencerNameBar v-if="currentBout" :bout="currentBout" :hostingClubColors="hostingClubColors" />
     <div class="py-8"></div>
-    <FencerScore  :bout="currentBout" :hostingClubColors="hostingClubColors" />
+    <FencerScore v-if="currentBout" :bout="currentBout" :hostingClubColors="hostingClubColors" />
     <div class="pt-20"></div>
-    <FencerPit  :nextBouts="nextBouts" :hostingClubColors="hostingClubColors" />
+    <FencerPit v-if="nextBouts.length" :nextBouts="nextBouts" :hostingClubColors="hostingClubColors" />
   </div>
 </template>
 
@@ -22,7 +22,7 @@ export default {
   },
   props: {
     bouts: {
-      type: Object,
+      type: Array, // Change to Array since you're using find and filter methods
       required: true,
     },
     eventRules: {
@@ -36,7 +36,7 @@ export default {
   },
   computed: {
     currentBout() {
-      return this.bouts.find(bout => bout.Status === 'Active') || {};
+      return this.bouts.find(bout => bout.Status === 'Active') || null;
     },
     nextBouts() {
       return this.bouts.filter(bout => bout.Status !== 'Completed' && bout.Status !== 'Active').slice(0, 3);