@dcrackel/hematournamentui 1.0.98 → 1.0.99

package/src/stories/Molecules/Modals/DirectorModal/DirectorModal.stories.js

@@ -0,0 +1,52 @@
+import DirectorModal from './DirectorModal.vue';
+import eventRules from '../../../../mocks/eventRules.js';
+import getPoolsWithBouts from "../../../../mocks/getPoolsWithBouts.js";
+
+export default {
+    title: 'Molecules/Modals/DirectorModal',
+    component: DirectorModal,
+    tags: ['autodocs'],
+    args: {
+        show: true,
+        eventRules: eventRules,
+        bout: getPoolsWithBouts[0],
+        hostingClubColors: {
+            Color1: 'red',
+            Color2: 'blue'
+        },
+        ringName: 'Ring 1'
+    },
+    argTypes: {
+        show: { control: 'boolean' },
+        eventRules: { control: 'object' },
+        bout: { control: 'object' },
+        hostingClubColors: { control: 'object' },
+        ringName: { control: 'text' }
+    },
+};
+
+export const Default = {
+    args: {
+        show: true,
+        eventRules: eventRules,
+        bout: getPoolsWithBouts[0],
+        hostingClubColors: {
+            Color1: 'red',
+            Color2: 'blue'
+        },
+        ringName: 'Ring 1'
+    }
+};
+
+export const WithDEBout = {
+    args: {
+        show: true,
+        eventRules: eventRules,
+        bout: getPoolsWithBouts[0],
+        hostingClubColors: {
+            Color1: 'red',
+            Color2: 'blue'
+        },
+        ringName: 'Ring 2'
+    }
+};

package/src/stories/Molecules/Modals/DirectorModal/DirectorModal.vue

@@ -0,0 +1,64 @@
+<template>
+  <transition
+      enter-active-class="transition-opacity duration-500"
+      enter-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="transition-opacity duration-500"
+      leave-class="opacity-100"
+      leave-to-class="opacity-0"
+  >
+    <div v-if="show" class="fixed inset-0 bg-secondary bg-opacity-75 flex items-center justify-center z-50"
+         @click="close">
+      <div class="w-1/3 min-w-[30rem] bg-neutral rounded-lg shadow-lg pb-6 px-2" @click.stop>
+        <div class="flex w-full justify-end mt-1">
+          <BaseIcon icon-name="fa-circle-xmark" size="lg" color="quaternary" hover="alarm" @click="close"/>
+        </div>
+        <DirectorCard :eventRules="eventRules" :bout="bout" :hostingClubColors="hostingClubColors" :ringName="ringName"
+                      @update:bout="handleBoutChange" @submit:bout="handleSubmitBout"/>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import DirectorCard from "../../../Organisms/Cards/Director/DirectorCard.vue";
+import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
+
+export default {
+  name: "DirectorModal",
+  components: {BaseIcon, DirectorCard},
+  props: {
+    show: {
+      type: Boolean,
+      default: true
+    },
+    bout: {
+      type: Object,
+      required: true
+    },
+    eventRules: {
+      type: Object,
+      required: true
+    },
+    hostingClubColors: {
+      type: Object,
+      required: true
+    },
+    ringName: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    close() {
+      this.$emit('update:closeModal', this.bout);
+    },
+    handleBoutChange(bout) {
+      this.$emit('update:bout', bout);
+    },
+    handleSubmitBout() {
+      this.$emit('submit:bout', this.bout);
+    }
+  }
+};
+</script>

package/src/stories/Molecules/Modals/EditBoutModal/EditBoutModal.stories.js

@@ -0,0 +1,56 @@
+import EditBoutModal from './EditBoutModal.vue';
+import getPoolsWithBouts from "../../../../mocks/getPoolsWithBouts.js";
+import eventRules from '../../../../mocks/eventRules.js';
+
+export default {
+    title: 'Molecules/Modals/EditBoutModal',
+    component: EditBoutModal,
+    tags: ['autodocs'],
+    args: {
+        show: true,
+        bout: getPoolsWithBouts[1],
+        hostingClubColors: {
+            Color1: 'red',
+            Color2: 'blue'
+        },
+        eventRules: eventRules
+    },
+    argTypes: {
+        show: {
+            control: 'boolean'
+        },
+        bout: {
+            control: 'object'
+        },
+        hostingClubColors: {
+            control: 'object'
+        },
+        eventRules: {
+            control: 'array'
+        }
+    }
+};
+
+export const Default = {
+    args: {
+        show: true,
+        bout: getPoolsWithBouts[0],
+        hostingClubColors: {
+            Color1: 'red',
+            Color2: 'blue'
+        },
+        eventRules: eventRules
+    }
+}
+
+export const Hidden = {
+args: {
+    show: true,
+        bout: getPoolsWithBouts[0],
+        hostingClubColors: {
+        Color1: 'red',
+            Color2: 'blue'
+    },
+    eventRules: eventRules
+}
+};

package/src/stories/Molecules/Modals/EditBoutModal/EditBoutModal.vue

@@ -0,0 +1,57 @@
+<template>
+  <transition
+      enter-active-class="transition-opacity duration-500"
+      enter-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="transition-opacity duration-500"
+      leave-class="opacity-100"
+      leave-to-class="opacity-0"
+  >
+    <div v-if="show" class="fixed inset-0 bg-secondary bg-opacity-75 flex items-center justify-center z-50"
+         @click="close">
+      <div class="w-1/2 min-w-[50rem] bg-neutral rounded-lg shadow-lg pb-6 px-2" @click.stop>
+        <div class="flex w-full justify-end mt-1">
+          <BaseIcon icon-name="fa-circle-xmark" size="lg" color="quaternary" hover="alarm" @click="close"/>
+        </div>
+        <EditBout :bout="bout" :hostingClubColors="hostingClubColors" :eventRules="eventRules"
+                  @submit:bout="handleSubmitBout"/>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
+import EditBout from "../../../Organisms/Cards/EditBout/EditBout.vue";
+
+export default {
+  name: "EditBoutModal",
+  components: { BaseIcon, EditBout },
+  props: {
+    show: {
+      type: Boolean,
+      default: true
+    },
+    bout: {
+      type: Object,
+      required: true
+    },
+    eventRules: {
+      type: Object,
+      required: true
+    },
+    hostingClubColors: {
+      type: Object,
+      required: true
+    },
+  },
+  methods: {
+    close() {
+      this.$emit('update:closeModal', this.bout);
+    },
+    handleSubmitBout(bout2) {
+      this.$emit('submit:bout', bout2);
+    }
+  }
+};
+</script>

package/src/stories/Organisms/Cards/BoutCard/BoutCard.stories.js

@@ -0,0 +1,81 @@
+import BoutCard from './BoutCard.vue';
+import getPoolsWithBouts from '../../../../mocks/getPoolsWithBouts.js';
+
+export default {
+    title: 'Organisms/Cards/BoutCard',
+    component: BoutCard,
+    tags: ['autodocs'],
+    args: {
+        bout: getPoolsWithBouts[0],
+        isWaiting: false,
+        timerStatus: 'stopped',
+        hostingClubColors: {
+            Color1: 'red',
+            Color2: 'blue'
+        },
+    },
+    argTypes: {
+        bout: {
+            control: 'object'
+        },
+        isSkeleton: {
+          control: 'boolean'
+        },
+        timerStatus: {
+            control: 'text'
+        },
+        hostingClubColors: {
+            control: 'object'
+        },
+
+    }
+};
+
+
+export const Default = {
+    args: {
+        bout: getPoolsWithBouts[0],
+        isWaiting: false,
+        timerStatus: 'running',
+        hostingClubColors: {
+            Color1: 'red',
+            Color2: 'blue'
+        }
+    }
+};
+
+export const Scheduled = {
+    args: {
+        bout: getPoolsWithBouts[4],
+        isWaiting: false,
+        timerStatus: 'stopped',
+        hostingClubColors: {
+            Color1: 'red',
+            Color2: 'blue'
+        }
+    }
+}
+
+export const Completed = {
+    args: {
+        bout: getPoolsWithBouts[2],
+        isWaiting: false,
+        timerStatus: 'stopped',
+        hostingClubColors: {
+            Color1: 'red',
+            Color2: 'blue'
+        }
+    }
+}
+
+export const Skeleton = {
+    args: {
+        bout: getPoolsWithBouts[2],
+        isWaiting: true,
+        timerStatus: 'stopped',
+        hostingClubColors: {
+            Color1: 'red',
+            Color2: 'blue'
+        }
+    }
+}

package/src/stories/Organisms/Cards/BoutCard/BoutCard.vue

@@ -0,0 +1,212 @@
+<template>
+  <section>
+    <div v-if="isWaiting" class="flex items-center justify-between rounded-lg w-full">
+      <!-- Fencer 1 -->
+      <div class="flex justify-between shadow-lg drop-shadow p-2 rounded-xl bg-poolBox w-5/12">
+        <div class="flex space-x-4 items-center">
+          <div>
+            <div :class="`w-4 h-4 rounded-full bg-${hostingClubColors.Color1} absolute top-10 left-11 `"></div>
+            <img :src="missingPortrait" alt="Portrait" class="w-12 h-12 rounded-full" />
+          </div>
+          <div>
+            <BaseText text="Waiting to be selected" size="md" color="primary" weight="bold" />
+            <BaseText text="starting soon" size="xs" color="quaternary" />
+          </div>
+        </div>
+        <BaseText text="" size="3xl" weight="bold" :class="`align-middle pr-3 pt-0.5`"/>
+      </div>
+
+      <!-- Timer -->
+      <div class="text-center mx-8"></div>
+
+      <!-- Fencer 2 -->
+      <div class="flex justify-between shadow-lg drop-shadow p-2 rounded-xl bg-poolBox w-5/12">
+        <div class="flex justify-end space-x-4 ml-4 w-full">
+          <div>
+            <BaseText text="Waiting to be selected" size="md" color="primary" weight="bold" class="text-right" />
+            <BaseText text="starting soon" size="xs" color="quaternary" class="text-right" />
+          </div>
+          <div>
+            <div :class="`w-4 h-4 rounded-full bg-${hostingClubColors.Color2} absolute top-10 right-12`"></div>
+            <img :src="missingPortrait" alt="Portrait" class="w-12 h-12 rounded-full" />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Custom Status -->
+    <div v-if="bout.customStatus && bout.Status !== 'Active'" class="text-left">
+      <BaseText :text="bout.customStatus" size="sm" color="primary"/>
+    </div>
+
+    <!-- Bout Card -->
+    <div v-if="!isWaiting" class="flex items-center justify-between rounded-lg">
+      <!-- Fencer 1 -->
+      <div class="flex justify-between shadow-lg drop-shadow p-2 rounded-xl bg-poolBox" :class="fencer1Class">
+        <div class="flex space-x-4 items-center">
+          <div>
+            <div :class="`w-4 h-4 rounded-full bg-${hostingClubColors.Color1} absolute top-10 left-11 `"></div>
+            <img :src="fencer1.portrait" alt="Portrait" class="w-12 h-12 rounded-full" />
+          </div>
+          <div>
+            <BaseText :text="fencer1.name" size="md" color="primary" weight="bold" />
+            <BaseText :text="fencer1.team" size="xs" color="quaternary" />
+          </div>
+        </div>
+        <BaseText :text="fencer1Score" size="3xl" weight="bold" :class="`align-middle pr-3 pt-0.5`"/>
+      </div>
+
+      <!-- Timer -->
+      <div v-if="bout.Status === 'Active'" class="text-center mx-8 ">
+        <p class="text-xl font-bold">{{ displayTime }}</p>
+      </div>
+
+      <!-- Fencer 2 -->
+      <div class="flex justify-between shadow-lg drop-shadow p-2 rounded-xl bg-poolBox" :class="fencer2Class">
+        <div class="flex space-x-4 justify-between w-full">
+          <BaseText :text="fencer2Score" size="3xl" weight="bold" :class="`align-middle pl-3 pt-0.5`"/>
+          <div class="w-full">
+            <BaseText :text="fencer2.name" size="md" color="primary" weight="bold" class="text-right" />
+            <BaseText :text="fencer2.team" size="xs" color="quaternary" class="text-right" />
+          </div>
+          <div class="w-20">
+            <div :class="`w-4 h-4 rounded-full bg-${hostingClubColors.Color2} absolute top-10 right-12`"></div>
+            <img :src="fencer2.portrait" alt="Portrait" class="w-12 h-12 rounded-full" />
+          </div>
+        </div>
+      </div>
+
+      <div v-if="bout.Status === 'Completed'" class="text-right pl-4">
+        <BaseButton label="Edit" size="sm" type="primary" @click="handleEditBout" class="w-12" />
+      </div>
+      <div v-if="bout.Status === 'Scheduled'" class="text-right pl-4">
+        <BaseButton label="Start" size="sm" type="primary" @click="handleStartBout" class="w-12" />
+      </div>
+
+    </div>
+  </section>
+</template>
+
+<script>
+import missingPortrait from "../../../../assets/portrait1.png";
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
+
+export default {
+  components: {BaseButton, BaseText},
+  props: {
+    bout: {
+      type: Object,
+      required: true
+    },
+    isWaiting: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    timerStatus: {
+      type: String,
+      required: false,
+      default: 'stopped'
+    },
+    hostingClubColors: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      remainingTime: this.bout.TimeLeft,
+      interval: null,
+      missingPortrait
+    };
+  },
+  mounted() {
+    if (this.timerStatus === 'running') {
+      this.startTimer();
+    }
+  },
+  beforeDestroy() {
+    this.stopTimer();
+  },
+  computed: {
+    fencer1() {
+      return {
+        portrait: this.bout.Person1.Images.length ? this.bout.Person1.Images[0].URL : this.missingPortrait,
+        name: this.bout.Person1.DisplayName,
+        team: this.bout.Person1.Club.Name,
+        score: this.bout.Score1
+      };
+    },
+    fencer2() {
+      return {
+        portrait: this.bout.Person2.Images.length ? this.bout.Person2.Images[0].URL : this.missingPortrait,
+        name: this.bout.Person2.DisplayName,
+        team: this.bout.Person2.Club.Name,
+        score: this.bout.Score2
+      };
+    },
+    fencer1Score() {
+      return this.bout.Status !== 'Scheduled' ? this.fencer1.score : '-';
+    },
+    fencer2Score() {
+      return this.bout.Status !== 'Scheduled' ? this.fencer2.score : '-';
+    },
+    displayTime() {
+      const minutes = Math.floor(this.remainingTime / 60).toString().padStart(2, '0');
+      const seconds = (this.remainingTime % 60).toString().padStart(2, '0');
+      return `${minutes}:${seconds}`;
+    },
+    fencer1Class() {
+      return {
+        'w-5/12': this.bout.Status === 'Active',
+        'w-full mr-4': this.bout.Status !== 'Active',
+      };
+    },
+    fencer2Class() {
+      return {
+        'w-5/12': this.bout.Status === 'Active',
+        'w-full ml-4': this.bout.Status !== 'Active',
+      };
+    }
+  },
+  watch: {
+    timerStatus(newStatus) {
+      if (newStatus === 'running') {
+        this.startTimer();
+      } else {
+        this.stopTimer();
+      }
+    },
+    bout: {
+      deep: true,
+      handler(newBout) {
+        this.remainingTime = newBout.TimeLeft;
+        newBout.TimerStatus === 'running' ? this.startTimer() : this.stopTimer();
+      }
+    }
+  },
+  methods: {
+    startTimer() {
+      if (this.interval) clearInterval(this.interval);
+      this.interval = setInterval(() => {
+        if (this.remainingTime > 0) {
+          this.remainingTime--;
+        } else {
+          this.stopTimer();
+        }
+      }, 1000);
+    },
+    stopTimer() {
+      if (this.interval) clearInterval(this.interval);
+      this.interval = null;
+    },
+    handleEditBout(){
+      this.$emit('action:editBout', this.bout);
+    },
+    handleStartBout() {
+      this.$emit('action:startBout', this.bout);
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,34 @@
+import DirectorCard from './DirectorCard.vue';
+import eventRules from '../../../../mocks/eventRules.js';
+import getPoolsWithBouts from "../../../../mocks/getPoolsWithBouts.js";
+
+const hostingClubColors = {
+    Color1: 'red',
+    Color2: 'blue'
+}
+
+export default {
+    title: 'Organisms/Cards/DirectorCard',
+    component: DirectorCard,
+    tags: ['autodocs'],
+    args: {
+        eventRules: eventRules,
+        bout: getPoolsWithBouts[0],
+        hostingClubColors: hostingClubColors,
+        ringName: 'Pool 1 - Ring 1',
+    },
+    argTypes: {
+        eventRules: { control: 'object' },
+        bout: { control: 'object' },
+        hostingClubColors: { control: 'object' },
+        ringName: { control: 'string' },
+    },
+};
+
+export const Default = {
+    args: {
+        eventRules: eventRules,
+        bout: getPoolsWithBouts[0],
+        hostingClubColors: hostingClubColors
+    }
+};

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

@@ -0,0 +1,100 @@
+<template>
+  <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"/>
+    <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"/>
+    </div>
+  </section>
+</template>
+
+<script>
+import ScoreBox from "../../../Molecules/Boxes/BoutBoxes/ScoreBox/ScoreBox.vue";
+import TimerBox from "../../../Molecules/Boxes/BoutBoxes/TimerBox/TimerBox.vue";
+import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
+
+export default {
+  name: "DirectorCard",
+  components: {
+    BaseButton,
+    TimerBox,
+    ScoreBox
+  },
+  props: {
+    eventRules: {
+      type: Object,
+      required: true
+    },
+    bout: {
+      type: Object,
+      required: true
+    },
+    hostingClubColors: {
+      type: Object,
+      required: true
+    },
+    ringName: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      showSubmit: false,
+      localBout: { ...this.bout }
+    }
+  },
+  mounted() {
+    this.localBout.TimeLeft = this.startTime;
+    this.emitBout();
+  },
+  computed: {
+    showTimerBox() {
+      return this.eventRules.some(rule => rule.RuleName === "PoolTime") || this.eventRules.some(rule => rule.RuleName === "DETime");
+    },
+    startTime() {
+      if (this.localBout.DEBoutId) {
+        const rule = this.eventRules.find(rule => rule.RuleName === "DETime");
+        return rule ? parseInt(rule.RuleValue) : 90;
+      }
+      const rule = this.eventRules.find(rule => rule.RuleName === "PoolTime");
+      return rule ? parseInt(rule.RuleValue) : 90;
+    },
+    maxPoints() {
+      if (this.localBout.DEBoutId) {
+        const rule = this.eventRules.find(rule => rule.RuleName === "DEMaxPoints");
+        return rule ? parseInt(rule.RuleValue) : 7;
+      }
+      const rule = this.eventRules.find(rule => rule.RuleName === "PoolMaxPoints");
+      return rule ? parseInt(rule.RuleValue) : 7;
+    }
+  },
+  methods: {
+    handleTimeChange(time){
+      this.localBout.TimeLeft = time;
+    },
+    handleTimeStateChange(time) {
+      this.localBout.TimeLeft = time.time;
+      this.localBout.TimerStatus = time.running ? 'running' : 'stopped';
+      this.emitBout();
+    },
+    updateScore1(score) {
+      this.localBout.Score1 = score;
+      this.emitBout();
+    },
+    updateScore2(score) {
+      this.localBout.Score2 = score;
+      this.emitBout();
+    },
+    submitBout() {
+      if (this.showSubmit) this.$emit('submit:bout', this.localBout)
+    },
+    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)
+    }
+  }
+};
+</script>