@dcrackel/hematournamentui 1.0.124 → 1.0.126

package/src/stories/Molecules/Boxes/CounterBox/CounterBox.vue

@@ -5,14 +5,14 @@
     </section>
     <section :class="boxClass">
       <div class="flex flex-row items-center justify-between h-14 py-2 px-2">
-        <button @click="increase" class="py-1">
+        <button v-if="!disable" @click="increase" class="py-1">
           <BaseIcon icon-name="fa-caret-up" size="xl" color="primaryHighlight"/>
         </button>
         <span class="px-1">
           <BaseText v-if="!directInput" :text="counter" size="xl" color="primary"/>
           <BaseInput v-if="directInput" placeholder="Enter text..." :value="`${counter}%`" size="xl" :centerInput="true" />
         </span>
-        <button @click="decrease" class="py-1">
+        <button v-if="!disable" @click="decrease" class="py-1">
           <BaseIcon icon-name="fa-caret-down" size="xl" color="primaryHighlight"/>
         </button>
 
@@ -49,6 +49,10 @@ export default {
     directInput: {
       type: Boolean,
       default: false
+    },
+    disable: {
+      type: Boolean,
+      default: false
     }
   },
   data() {

package/src/stories/Molecules/Indicators/ServerConnected/ServerConnected.stories.js

@@ -0,0 +1,42 @@
+import ServerConnected from './ServerConnected.vue';
+
+export default {
+    title: 'Molecules/Indicators/ServerConnected',
+    component: ServerConnected,
+    tags: ['autodocs'],
+    args: {
+        connectedToServer: true,
+        statusText: 'Connected'
+    },
+    argTypes: {
+        connectedToServer: {
+            control: 'boolean',
+            description: 'Indicates if the server is connected'
+        },
+        statusText: {
+            control: 'text',
+            description: 'Text to display for the connection status'
+        }
+    }
+};
+
+export const Connected = {
+    args: {
+        connectedToServer: true,
+        statusText: 'Connected'
+    }
+};
+
+export const Disconnected = {
+    args: {
+        connectedToServer: false,
+        statusText: 'Disconnected'
+    }
+};
+
+export const CustomText = {
+    args: {
+        connectedToServer: true,
+        statusText: 'Online'
+    }
+};

package/src/stories/Molecules/Indicators/ServerConnected/ServerConnected.vue

@@ -0,0 +1,32 @@
+<template>
+  <section>
+    <div class="flex flex-row">
+      <div class="w-[21px] h-[20px] rounded-full border-2 mt-2 mr-2">
+        <div :class="connectedToServer ? 'bg-green' : 'bg-red'" class="w-[14px] h-[14px] rounded-full mt-[2px] ml-[2px]">
+        </div>
+      </div>
+      <BaseText class="mt-[0.5rem]" color="quinary" size="sm" :text="statusText" />
+    </div>
+  </section>
+</template>
+
+<script>
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+
+export default {
+  name: 'ServerConnected',
+  components: {BaseText},
+  props: {
+    connectedToServer: {
+      type: Boolean,
+      required: true,
+      default: false
+    },
+    statusText: {
+      type: String,
+      default: 'Connected'
+    }
+  }
+};
+</script>
+

package/src/stories/Molecules/Inputs/Toggle/Toggle.stories.js

@@ -0,0 +1,42 @@
+import ToggleSwitch from './Toggle.vue';
+
+export default {
+    title: 'Molecules/Inputs/ToggleSwitch',
+    component: ToggleSwitch,
+    tags: ['autodocs'],
+    args: {
+        checked: false,
+        label: 'Toggle me'
+    },
+    argTypes: {
+        checked: {
+            control: 'boolean',
+            description: 'Determines if the toggle is checked'
+        },
+        label: {
+            control: 'text',
+            description: 'Label text for the toggle'
+        }
+    }
+};
+
+export const Default = {
+    args: {
+        checked: false,
+        label: 'Toggle me'
+    }
+};
+
+export const Checked = {
+    args: {
+        checked: true,
+        label: 'Toggle me'
+    }
+};
+
+export const CustomLabel = {
+    args: {
+        checked: false,
+        label: 'Custom Label'
+    }
+};

package/src/stories/Molecules/Inputs/Toggle/Toggle.vue

@@ -0,0 +1,56 @@
+<template>
+  <label class="flex cursor-pointer select-none items-center mt-[0.5rem]">
+    <BaseText :text="label" size="sm" class="mr-2" color="quinary" />
+    <div class="relative rounded-2xl">
+      <input type="checkbox" class="sr-only" :checked="isChecked" @change="handleCheckboxChange" />
+      <div class="block h-5 w-8 rounded-full bg-gridBoxHeader"></div>
+      <div
+          :class="dotClasses"
+          class="dot absolute left-1 top-1 h-3 w-3 rounded-full bg-white transition delay-150"
+      ></div>
+    </div>
+  </label>
+</template>
+
+<script>
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+
+export default {
+  name: 'ToggleSwitch',
+  components: {BaseText},
+  props: {
+    checked: {
+      type: Boolean,
+      default: false
+    },
+    label: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      isChecked: this.checked
+    };
+  },
+  watch: {
+    checked(newValue) {
+      this.isChecked = newValue;
+    }
+  },
+  computed: {
+    dotClasses() {
+      return {
+        'translate-x-full': this.isChecked,
+        '!bg-white': this.isChecked
+      };
+    }
+  },
+  methods: {
+    handleCheckboxChange() {
+      this.isChecked = !this.isChecked;
+      this.$emit('update:checked', this.isChecked);
+    }
+  }
+};
+</script>

package/src/stories/Organisms/Cards/FencerPoolResultsCard/FencerPoolResults.stories.js

@@ -6,26 +6,36 @@ export default {
     component: FencerPoolResultsCard,
     tags: ['autodocs'],
     args: {
-        person: getPoolResults[0]
-
+        person: getPoolResults[0],
+        status: "results"
     },
     argTypes: {
         person: {
-            control: 'object'
+            control: { type: 'object' },
+            status: { control: 'text' }
         }
     }
 };
 
 export const Default = {
     args: {
-        person: getPoolResults[1]
+        person: getPoolResults.report[0] ,
+        status: "results"
     }
 };
 
-const modifiedResults = {...getPoolResults[7], Promoted: false};
-
+let modifiedResults = { ...getPoolResults.report[7], Promoted: false };
 export const Alternative = {
     args: {
-        person: modifiedResults
+        person: modifiedResults,
+        status: "results"
+    }
+};
+
+modifiedResults = { ...getPoolResults.report[9], Promoted: false };
+export const NotInResultsStatus = {
+    args: {
+        person: modifiedResults,
+        status: "de"
     }
 };

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

@@ -33,7 +33,7 @@
         <BaseText :text="person.Indicator" size="xs" color="primary" weight="bold" class="flex-1 text-center"/>
       </div>
     </div>
-    <div class="ml-4 border-l border-dropdownSelect h-12 w-12 items-center text-center hover:bg-eventBoxRed rounded-tr-lg rounded-br-lg">
+    <div v-if="status === 'results'" class="ml-4 border-l border-dropdownSelect h-12 w-12 items-center text-center hover:bg-eventBoxRed rounded-tr-lg rounded-br-lg">
       <BaseIcon icon-name="fa-circle-xmark" size="2xl" color="quinary" class="pt-2" hover="alarm" @click="handlerRemoveFencer" />
     </div>
   </div>
@@ -41,16 +41,19 @@
 
 <script>
 import BaseText from "../../../Atoms/Text/BaseText.vue";
-import ButtonBar from "../../../Molecules/Buttons/ButtonBar/ButtonBar.vue";
 import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
 
 export default {
   name: 'FencerPoolResultsCard',
-  components: {BaseIcon, ButtonBar, BaseText },
+  components: { BaseIcon, BaseText },
   props: {
     person: {
       type: Object,
       required: true
+    },
+    status: {
+      type: String,
+      required: true
     }
   },
   computed: {

package/src/stories/Organisms/Cards/TableauBoutCard/SpacingConfig.js

@@ -0,0 +1,27 @@
+export const spacingConfig = {
+    'Table of 8': {
+        large: {
+            'Table of 8': { getTopSpace: 'mt-[0rem] mb-[2rem]', getCardSpace: 'mt-1' },
+            Quarterfinal: { getTopSpace: 'mt-[1.34rem] mb-[3.4rem]', getCardSpace: 'mt-[4.5rem]'  },
+            Semifinal: { getTopSpace: 'mt-[4.6rem] mb-[7rem]', getCardSpace: 'mt-[11.5rem]'  },
+            Final: { getTopSpace: 'mt-[24.6rem]', getCardSpace: 'mt-1'  },
+            'Third Place': { getTopSpace: '-mt-[2rem] -ml-[19.2rem]', getCardSpace: 'mt-1' },
+        },
+        small: {
+            'Table of 8': { getTopSpace: 'mt-[0rem] mb-4', getCardSpace: 'mt-1' },
+            Quarterfinal: { getTopSpace: 'mt-[0.7rem] mb-[1.8rem]', getCardSpace: 'mt-[2.3rem]'  },
+            Semifinal: { getTopSpace: 'mt-[2.3rem] mb-[3.6rem]', getCardSpace: 'mt-[5.9rem]'  },
+            Final: { getTopSpace: 'mt-[12.2rem]', getCardSpace: 'mt-1'  },
+            'Third Place': { getTopSpace: '-mt-[2rem] -ml-[11rem]', getCardSpace: 'mt-1' },
+        }
+    },
+    'Table of 16': {
+        large: {
+            // Define your spacing values here
+        },
+        small: {
+            // Define your spacing values here
+        }
+    },
+    // Add up to Table of 256 as needed
+};

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

@@ -0,0 +1,98 @@
+import TableauBoutCard from './TableauBoutCard.vue';
+import getDEWithBouts from '../../../../mocks/getDEWithBouts.js';
+
+export default {
+    title: 'Organisms/Cards/TableauBoutCard',
+    component: TableauBoutCard,
+    tags: ['autodocs'],
+    args: {
+        bout: getDEWithBouts.pools[0].Bouts[0],
+        hostingClubColors: getDEWithBouts.hostingClubColors,
+        large: true,
+        roundName: getDEWithBouts.pools[0].Bouts[0].RoundLabel,
+        bracketSize: 'Table of 8',
+        highLight: false
+    },
+    argTypes: {
+        bout: {
+            control: 'object',
+            description: 'Bout object containing fencers and scores'
+        },
+        hostingClubColors: {
+            control: 'object',
+            description: 'Colors for hosting club'
+        },
+        large: {
+            control: 'boolean',
+            description: 'Size of the card'
+        },
+        roundName: {
+            control: 'text',
+            description: 'Name of the round'
+        },
+        bracketSize: {
+            control: 'text',
+            description: 'Size of the bracket'
+        },
+        highLight: {
+            control: 'boolean',
+            description: 'Card is highlighed'
+        }
+    }
+};
+
+export const Default = {
+    args: {
+        bout: getDEWithBouts.pools[0].Bouts[2],
+        hostingClubColors: getDEWithBouts.hostingClubColors,
+        large: true,
+        roundName: getDEWithBouts.pools[0].Bouts[1].RoundLabel,
+        bracketSize: 'Table of 8',
+        highLight: false
+    }
+};
+
+let modifiedBout = { ...getDEWithBouts.pools[0].Bouts[2], Status: 'Active' };
+export const ActiveBout = {
+    args: {
+        bout: modifiedBout,
+        hostingClubColors: getDEWithBouts.hostingClubColors,
+        large: true,
+        roundName: getDEWithBouts.pools[0].Bouts[1].RoundLabel,
+        bracketSize: 'Table of 8',
+        highLight: false
+    }
+};
+
+export const smallCardBout = {
+    args: {
+        bout: getDEWithBouts.pools[0].Bouts[1],
+        hostingClubColors: getDEWithBouts.hostingClubColors,
+        large: false,
+        roundName: getDEWithBouts.pools[0].Bouts[1].RoundLabel,
+        bracketSize: 'Table of 8',
+        highLight: false
+    }
+};
+
+modifiedBout = { ...getDEWithBouts.pools[0].Bouts[2], Status: 'Completed' };
+export const CompletedBout = {
+    args: {
+        bout: modifiedBout,
+        large: true,
+        roundName: getDEWithBouts.pools[0].Bouts[1].RoundLabel,
+        highLight: false
+    }
+};
+
+modifiedBout = { ...getDEWithBouts.pools[0].Bouts[0], Status: 'Completed' };
+export const ByeBout = {
+    args: {
+        bout: modifiedBout,
+        hostingClubColors: getDEWithBouts.hostingClubColors,
+        large: false,
+        roundName: getDEWithBouts.pools[0].Bouts[1].RoundLabel,
+        bracketSize: 'Table of 8',
+        highLight: false
+    }
+};

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

@@ -0,0 +1,162 @@
+<template>
+  <section :class="getTopSpace">
+    <div v-if="roundName === 'Third Place'" class="flex justify-center border-b mb-4 mt-8" :class="large ? 'w-72': 'w-40'">
+      <BaseText :text="roundName" size="sm" color="quaternary"/>
+    </div>
+    <div v-if="roundName === 'Final'" class="flex justify-center border-b mb-4 mt-0" :class="large ? 'w-72': 'w-40'">
+      <BaseText :text="roundName" size="sm" color="quaternary"/>
+    </div>
+    <!-- Replacement headers for finals -->
+    <section @click="handleBoutClick(bout)">
+      <TableauFencerCard
+          :fencer="person1Display"
+          :score="score1"
+          :position="dePosition1"
+          :color="hostingClubColors.Color1"
+          :scoreColor="getScoreColor(true)"
+          :large="large"
+          :highLight="highlight"
+          @action:highLight="handleHighlight"
+      />
+    </section>
+    <!-- Card break -->
+    <div :class="getCardSpace"></div>
+    <!-- Card break -->
+    <section>
+      <TableauFencerCard
+          :fencer="person2Display"
+          :score="score2"
+          :position="dePosition2"
+          :color="hostingClubColors.Color2"
+          :scoreColor="getScoreColor(false)"
+          :large="large"
+          :highLight="highlight"
+          @action:highLight="handleHighlight"
+      />
+    </section>
+  </section>
+</template>
+
+<script>
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+import TableauFencerCard from '../TableauFencerCard/TableauFencerCard.vue';
+import { spacingConfig } from './SpacingConfig';
+
+export default {
+  name: 'TableauBoutCard',
+  components: { BaseText, TableauFencerCard },
+  props: {
+    bout: {
+      type: Object,
+      required: true
+    },
+    hostingClubColors: {
+      type: Object,
+      required: true
+    },
+    large: {
+      type: Boolean,
+      default: true
+    },
+    roundName: {
+      type: String,
+      required: true
+    },
+    bracketSize: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      highlight: false,
+      currentConfig: {}
+    };
+  },
+  mounted() {
+    this.updateConfig();
+  },
+  watch: {
+    large(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.updateConfig();
+      }
+    },
+    bracketSize(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.updateConfig();
+      }
+    }
+  },
+  methods: {
+    updateConfig() {
+      const size = this.large ? 'large' : 'small';
+      this.currentConfig = spacingConfig[this.bracketSize]?.[size]?.[this.roundName] || {};
+    },
+    handleBoutClick(bout) {
+      if (bout.Status === 'Completed') {
+        this.$emit('action:editBout', bout);
+      } else {
+        this.$emit('action:directingBout', bout);
+      }
+    },
+    getScoreColor(isPerson1) {
+      if (isPerson1) {
+        if (this.bout.Score1 > this.bout.Score2) {
+          return 'bg-winGreen';
+        }
+
+        if (this.bout.Score1 < this.bout.Score2 && this.bout.Status === 'Active') {
+          return 'bg-lossRed';
+        }
+      } else {
+        if (this.bout.Score1 < this.bout.Score2) {
+          return 'bg-winGreen';
+        }
+
+        if (this.bout.Score1 > this.bout.Score2 && this.bout.Status === 'Active') {
+          return 'bg-lossRed';
+        }
+      }
+      return 'bg-dropdownSelect';
+    },
+    handleHighlight(value) {
+      if (this.bout.Person1.DisplayName.length < 1 || this.bout.Person2.DisplayName.length < 1) return;
+      if (this.bout.Person1.DisplayName === 'BYE' || this.bout.Person2.DisplayName === 'BYE') return;
+      this.highlight = value;
+    }
+  },
+  computed: {
+    dePosition1() {
+      return this.bout.Person1?.EventPersons?.[0]?.DEPosition ?? '';
+    },
+    score1() {
+      return `${this.bout.Score1}`;
+    },
+    dePosition2() {
+      return this.bout.Person2?.EventPersons?.[0]?.DEPosition ?? '';
+    },
+    score2() {
+      return `${this.bout.Score2}`;
+    },
+    getTopSpace() {
+      return this.currentConfig?.getTopSpace || '';
+    },
+    getCardSpace() {
+      return this.currentConfig?.getCardSpace || '';
+    },
+    person1Display() {
+      if (this.bout.Status === "Scheduled" && this.bout.Person1.DisplayName === 'BYE') {
+        return { ...this.bout.Person1, DisplayName: '', Club: { Name: '' } };
+      }
+      return this.bout.Person1;
+    },
+    person2Display() {
+      if (this.bout.Status === "Scheduled" && this.bout.Person2.DisplayName === 'BYE') {
+        return { ...this.bout.Person2, DisplayName: '', Club: { Name: '' } };
+      }
+      return this.bout.Person2;
+    }
+  }
+};
+</script>

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

@@ -0,0 +1,93 @@
+import TableauFencerCard from './TableauFencerCard.vue';
+
+
+export default {
+    title: 'Organisms/Cards/TableauFencerCard',
+    component: TableauFencerCard,
+    args: {
+        fencer: {
+            DisplayName: 'John Doe',
+            Club: {
+                Name: 'Fencing Club'
+            },
+            Images: [
+                {
+                    URL: 'https://randomuser.me/api/portraits/men/91.jpg'
+                }
+            ]
+        },
+        score: '15',
+        position: '1',
+        color: 'blue',
+        scoreColor: 'bg-winGreen',
+        large: true
+    },
+    argTypes: {
+        fencer: {
+            control: 'object',
+            description: 'Object containing fencer details including name, club, and images'
+        },
+        score: {
+            control: 'text',
+            description: 'Score of the fencer'
+        },
+        position: {
+            control: 'text',
+            description: 'Position of the fencer in the bracket'
+        },
+        color: {
+            control: 'color',
+            description: 'Color for the position background'
+        },
+        scoreColor: {
+            control: 'color',
+            description: 'Color for the score background'
+        },
+        large: {
+            control: 'boolean',
+            description: 'Boolean to determine the size of the card'
+        }
+    }
+};
+
+export const Default = {
+    args: {
+        fencer: {
+            DisplayName: 'John Doe',
+            Club: {
+                Name: 'Fencing Club'
+            },
+            Images: [
+                {
+                    URL: 'https://randomuser.me/api/portraits/men/50.jpg'
+                }
+            ]
+        },
+        score: '15',
+        position: '1',
+        color: 'blue',
+        scoreColor: 'bg-winGreen',
+        large: true
+    }
+};
+
+export const Small = {
+    args: {
+        fencer: {
+            DisplayName: 'Jane Doe',
+            Club: {
+                Name: 'Fencing Club'
+            },
+            Images: [
+                {
+                    URL: 'https://via.placeholder.com/40'
+                }
+            ]
+        },
+        score: '12',
+        position: '2',
+        color: 'red',
+        scoreColor: 'bg-lossRed',
+        large: false
+    }
+};