@dcrackel/hematournamentui 1.0.97 → 1.0.99

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

@@ -0,0 +1,53 @@
+import EditBout from './EditBout.vue';
+import getPoolsWithBouts from '../../../../mocks/getPoolsWithBouts.js';
+
+export default {
+    title: 'Organisms/Cards/EditBout',
+    component: EditBout,
+    tags: ['autodocs'],
+    args: {
+        bout: getPoolsWithBouts[0],
+        hostingClubColors: {
+            Color1: 'red',
+            Color2: 'blue'
+        },
+    },
+    argTypes: {
+        bout: {
+            control: 'object'
+        },
+        hostingClubColors: {
+            control: 'object'
+        }
+    }
+};
+
+export const Default = {
+    args: {
+        bout: getPoolsWithBouts[0],
+        hostingClubColors: {
+            Color1: 'red',
+            Color2: 'blue'
+        }
+    }
+};
+
+export const Scheduled = {
+    args: {
+        bout: getPoolsWithBouts[4],
+        hostingClubColors: {
+            Color1: 'red',
+            Color2: 'blue'
+        }
+    }
+}
+
+export const Completed = {
+    args: {
+        bout: getPoolsWithBouts[2],
+        hostingClubColors: {
+            Color1: 'red',
+            Color2: 'blue'
+        }
+    }
+}

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

@@ -0,0 +1,150 @@
+<template>
+  <div 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 w-1/2 mr-4">
+      <div class="flex space-x-4 items-center">
+        <div>
+          <div :class="`w-4 h-4 rounded-full bg-${computedColor(true)} 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="sm" color="quaternary"/>
+        </div>
+      </div>
+      <div class="flex w-1/4 justify-between">
+        <BaseIcon icon-name="fa-square-minus" size="4xl" :color="computedColor(true)" hover="quaternary" :disabled="fencer1Score <= 0" @click="minus(true)" />
+        <BaseText :text="fencer1Score" size="3xl" weight="bold" :class="`align-middle pt-0.5`"/>
+        <BaseIcon icon-name="fa-square-plus" size="4xl" :color="computedColor(true)" hover="quaternary" :disabled="fencer1Score >= maxPoints" @click="plus(true)" />
+      </div>
+    </div>
+
+    <!-- Fencer 2 -->
+    <div class="flex justify-between shadow-lg drop-shadow p-2 rounded-xl bg-poolBox w-1/2 ml-4">
+      <div class="flex space-x-4 justify-between w-full">
+        <div class="flex w-1/4 justify-between">
+          <BaseIcon icon-name="fa-square-minus" size="4xl" :color="computedColor(false)" hover="quaternary" :disabled="fencer2Score <= 0" @click="minus(false)" />
+          <BaseText :text="fencer2Score" size="3xl" weight="bold" :class="`align-middle pt-0.5`"/>
+          <BaseIcon icon-name="fa-square-plus" size="4xl" :color="computedColor(false)" hover="quaternary" :disabled="fencer2Score >= maxPoints" @click="plus(false)" />
+        </div>
+        <div class="flex space-x-4 items-center">
+          <div>
+            <BaseText :text="fencer2.name" size="md" color="primary" weight="bold" class="text-right"/>
+            <BaseText :text="fencer2.team" size="sm" color="quaternary" class="text-right"/>
+          </div>
+          <div>
+            <div :class="`w-4 h-4 rounded-full bg-${computedColor(false)} absolute top-10 right-12`"></div>
+            <img :src="fencer2.portrait" alt="Portrait" class="w-12 h-12 rounded-full"/>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="w-full flex justify-center mt-5">
+    <div class="w-1/2">
+      <BaseButton  label="Submit" type="grayAndBlue" :selected="true" @click="submitBout"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+import missingPortrait from "../../../../assets/portrait1.png";
+import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
+import eventRules from "../../../../mocks/eventRules.js";
+
+export default {
+  components: {
+    BaseIcon,
+    BaseButton,
+    BaseText
+  },
+  props: {
+    bout: {
+      type: Object,
+      required: true
+    },
+    hostingClubColors: {
+      type: Object,
+      required: true,
+    },
+    eventRules: {
+      type: Object,
+      required: true,
+    },
+  },
+  emits: ['submit:bout', 'update:bout'],
+  data(){
+    return {
+      missingPortrait,
+      localBout: { ...this.bout }
+    };
+  },
+  computed: {
+    fencer1() {
+      const person1 = this.localBout.Person1 || {};
+      return {
+        portrait: (person1.Images && person1.Images.length) ? person1.Images[0].URL : this.missingPortrait,
+        name: person1.DisplayName || 'Unknown',
+        team: (person1.Club && person1.Club.Name) || 'Unknown',
+        score: this.localBout.Score1
+      };
+    },
+    fencer2() {
+      const person2 = this.localBout.Person2 || {};
+      return {
+        portrait: (person2.Images && person2.Images.length) ? person2.Images[0].URL : this.missingPortrait,
+        name: person2.DisplayName || 'Unknown',
+        team: (person2.Club && person2.Club.Name) || 'Unknown',
+        score: this.localBout.Score2
+      };
+    },
+    fencer1Score() {
+      return this.localBout.Status !== 'Scheduled' ? this.fencer1.score : '-';
+    },
+    fencer2Score() {
+      return this.localBout.Status !== 'Scheduled' ? this.fencer2.score : '-';
+    },
+    maxPoints() {
+      if (this.localBout.DEBoutId) {
+        const rule = this.eventRules.find(rule => rule.RuleName === "DEMaxPoints");
+        return rule ? rule.RuleValue : 7;
+      }
+      const rule = this.eventRules.find(rule => rule.RuleName === "PoolMaxPoints");
+      return rule ? rule.RuleValue : 7;
+    }
+  },
+  methods: {
+    minus(isFencer1) {
+      if (isFencer1) {
+        if (this.localBout.Score1 > 0) {
+          this.localBout.Score1--;
+        }
+      } else {
+        if (this.localBout.Score2 > 0) {
+          this.localBout.Score2--;
+        }
+      }
+    },
+    plus(isFencer1) {
+      if (isFencer1) {
+        if (this.localBout.Score1 < this.maxPoints) {
+          this.localBout.Score1++;
+        }
+      } else {
+        if (this.localBout.Score2 < this.maxPoints) {
+          this.localBout.Score2++;
+        }
+      }
+    },
+    computedColor(fencer1) {
+      return fencer1 ? (this.hostingClubColors.Color1?.toLowerCase() || 'red') : (this.hostingClubColors.Color2?.toLowerCase() || 'blue');
+    },
+    submitBout() {
+      this.$emit('submit:bout', this.localBout);
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,202 @@
+import PoolBoutMatchCard from './PoolBoutMatchCard.vue';
+import PoolBouts from '../../../../mocks/getPoolsWithBouts';
+import HostingClubColors from '../../../../mocks/getPoolsWithBoutsClubColors.js';
+
+export default {
+    title: 'Organisms/Cards/PoolBoutMatchCard',
+    component: PoolBoutMatchCard,
+    tags: ['autodocs'],
+    args: {
+        bout: {
+            BoutId: 1823,
+            PoolId: 137,
+            EventId: 5,
+            Person1Id: 10,
+            Person2Id: 1,
+            Status: 'Scheduled',
+            Score1: 0,
+            Score2: 0,
+            Started: null,
+            TimeLeft: 0,
+            RoundLabel: null,
+            DEBoutId: null,
+            DENextBoutId: null,
+            RefereeId: null,
+            createdAt: '2024-06-15T06:45:39.000Z',
+            updatedAt: '2024-06-15T06:45:39.000Z',
+            Person1: {
+                PersonId: 10,
+                DisplayName: 'Melissa Jones',
+                ClubId: 4,
+                Images: [],
+                Club: {
+                    Name: 'Guardians of the Guard',
+                },
+            },
+            Person2: {
+                PersonId: 1,
+                DisplayName: 'Dave Smith',
+                ClubId: 4,
+                Images: [
+                    {
+                        ImageId: 7,
+                        URL: 'https://randomuser.me/api/portraits/men/22.jpg',
+                    },
+                ],
+                Club: {
+                    Name: 'Guardians of the Guard',
+                },
+            },
+        },
+        hostingClubColors: HostingClubColors,
+    },
+    argTypes: {
+        bout: {
+            control: 'object',
+        },
+        hostingClubColors: {
+            control: 'object',
+        },
+    },
+};
+
+export const Default = {
+    args: {
+        bout: {
+            BoutId: 1823,
+            PoolId: 137,
+            EventId: 5,
+            Person1Id: 10,
+            Person2Id: 1,
+            Status: 'Scheduled',
+            Score1: 0,
+            Score2: 0,
+            Started: null,
+            TimeLeft: 0,
+            RoundLabel: null,
+            DEBoutId: null,
+            DENextBoutId: null,
+            RefereeId: null,
+            createdAt: '2024-06-15T06:45:39.000Z',
+            updatedAt: '2024-06-15T06:45:39.000Z',
+            Person1: {
+                PersonId: 10,
+                DisplayName: 'Melissa Jones',
+                ClubId: 4,
+                Images: [],
+                Club: {
+                    Name: 'Guardians of the Guard',
+                },
+            },
+            Person2: {
+                PersonId: 1,
+                DisplayName: 'Dave Smith',
+                ClubId: 4,
+                Images: [
+                    {
+                        ImageId: 7,
+                        URL: 'https://randomuser.me/api/portraits/men/22.jpg',
+                    },
+                ],
+                Club: {
+                    Name: 'Fechtastic Fighters',
+                },
+            },
+        },
+        hostingClubColors: HostingClubColors,
+    },
+};
+
+export const ScheduledBout = {
+    args: {
+        bout: {
+            BoutId: 1824,
+            PoolId: 138,
+            EventId: 6,
+            Person1Id: 11,
+            Person2Id: 2,
+            Status: 'Scheduled',
+            Score1: 0,
+            Score2: 0,
+            Started: null,
+            TimeLeft: 0,
+            RoundLabel: null,
+            DEBoutId: null,
+            DENextBoutId: null,
+            RefereeId: null,
+            createdAt: '2024-06-15T06:45:39.000Z',
+            updatedAt: '2024-06-15T06:45:39.000Z',
+            Person1: {
+                PersonId: 11,
+                DisplayName: 'John Doe',
+                ClubId: 5,
+                Images: [],
+                Club: {
+                    Name: 'Warriors of the West',
+                },
+            },
+            Person2: {
+                PersonId: 2,
+                DisplayName: 'Jane Doe',
+                ClubId: 5,
+                Images: [
+                    {
+                        ImageId: 8,
+                        URL: 'https://randomuser.me/api/portraits/women/22.jpg',
+                    },
+                ],
+                Club: {
+                    Name: 'Warriors of the West',
+                },
+            },
+        },
+        hostingClubColors: { Color1: 'green', Color2: 'purple'},
+    },
+};
+
+export const CompletedBout = {
+    args: {
+        bout: {
+            BoutId: 1825,
+            PoolId: 139,
+            EventId: 7,
+            Person1Id: 12,
+            Person2Id: 3,
+            Status: 'Completed',
+            Score1: 7,
+            Score2: 4,
+            Started: '2024-06-15T07:00:00.000Z',
+            TimeLeft: 0,
+            RoundLabel: 'Final',
+            DEBoutId: 101,
+            DENextBoutId: 102,
+            RefereeId: 5,
+            createdAt: '2024-06-15T06:45:39.000Z',
+            updatedAt: '2024-06-15T07:30:39.000Z',
+            Person1: {
+                PersonId: 12,
+                DisplayName: 'Alice Wonderland',
+                ClubId: 6,
+                Images: [],
+                Club: {
+                    Name: 'Knights of the Round',
+                },
+            },
+            Person2: {
+                PersonId: 3,
+                DisplayName: 'Bob Builder',
+                ClubId: 6,
+                Images: [
+                    {
+                        ImageId: 9,
+                        URL: 'https://randomuser.me/api/portraits/men/23.jpg',
+                    },
+                ],
+                Club: {
+                    Name: 'Fechtastic Fighters',
+                },
+            },
+        },
+        hostingClubColors: { Color1: 'blue', Color2: 'red'},
+    },
+};

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

@@ -0,0 +1,59 @@
+<template>
+    <section class="relative flex items-center justify-between bg-white shadow-md rounded-lg p-4 mb-4 border border-dropdownSelect">
+    <div :class="`absolute left-0 top-0 bottom-0 w-2 rounded-l-lg bg-${hostingClubColors.Color1}`"></div>
+
+    <div class="flex items-center space-x-4 w-1/3">
+      <img :src="bout.Person1.Images[0]?.URL || missingPortrait" alt="Person 1" class="w-16 h-16 rounded-full object-cover">
+      <div class="">
+        <BaseText :text="bout.Person1.DisplayName" size="lg" weight="bold" />
+        <BaseText :text="bout.Person1.Club.Name" size="sm" color="quaternary" />
+      </div>
+    </div>
+
+    <div v-if="bout.Status === 'Scheduled'" class="flex justify-center w-1/3">
+      <BaseText text="VS" size="2xl" weight="bold" color="primary" />
+    </div>
+    <div v-if="bout.Status === 'Completed'" class="flex justify-center w-1/3">
+      <div class="flex flex-col justify-center items-center">
+      <BaseText :text="`${bout.Score1}-${bout.Score2}`" size="2xl" weight="bold" color="primary" />
+      <BaseButton label="Edit Bout" color="primary" size="sm" class="mt-2" />
+      </div>
+    </div>
+
+    <div class="flex justify-end space-x-4 w-1/3">
+      <div class="">
+        <BaseText :text="bout.Person2.DisplayName" size="lg" weight="bold" class="flex justify-end" />
+        <BaseText :text="bout.Person2.Club.Name" size="sm" color="quaternary" class="flex justify-end" />
+      </div>
+      <img :src="bout.Person2.Images[0]?.URL || missingPortrait" alt="Person 2" class="w-16 h-16 rounded-full object-cover">
+    </div>
+    <div :class="`absolute right-0 top-0 bottom-0 w-2 rounded-r-lg bg-${hostingClubColors.Color2}`"></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 {
+  name: 'PoolBoutMatchCard',
+  components: {BaseButton, BaseText},
+  props: {
+    bout: {
+      type: Object,
+      required: true,
+    },
+    hostingClubColors: {
+      type: Array,
+      default: () => [],
+    }
+  },
+  data() {
+    return {
+      missingPortrait,
+    };
+  }
+};
+</script>
+

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

@@ -1,16 +1,19 @@
 <template>
-  <div class="flex items-center p-2 bg-poolSetup shadow rounded-lg hover:bg-dropdownSelect"
-       draggable="true"
-       @dragstart="onDragStart"
-       @dragover.prevent
-       @dragenter.prevent
-       @drop="onDrop">
+  <div
+      class="flex items-center p-2 bg-poolSetup shadow rounded-lg"
+      :class="mode === 'preparation' || mode === 'planning' ? 'hover:bg-dropdownSelect' : ''"
+      :draggable="mode === 'preparation' || mode === 'planning'"
+      @dragstart="onDragStart"
+      @dragover.prevent
+      @dragenter.prevent
+      @drop="onDrop"
+  >
     <div class="text-center mr-2">
       <BaseText :text="poolPosition" size="md" />
     </div>
     <div class="w-8 h-8 rounded-md overflow-hidden">
       <div v-if="!portrait" class="w-14 h-14 bg-dropdownSelect flex items-center justify-center">
-        <BaseText text="" size="sm" color="neutral" weight="bold"/>
+        <BaseText text="" size="sm" color="neutral" weight="bold" />
       </div>
       <img :src="portrait" alt="Fencer Portrait" class="w-full h-full object-cover" />
     </div>
@@ -21,7 +24,7 @@
       </p>
       <BaseText :text="club" size="xs" />
     </div>
-    <BaseIcon icon-name="fa-grip-dots-vertical" size="2xl" />
+    <BaseIcon v-if="mode === 'preparation' || mode === 'planning'" icon-name="fa-grip-dots-vertical" size="2xl" />
   </div>
 </template>
 
@@ -37,23 +40,30 @@ export default {
     name: String,
     club: String,
     seed: Number,
-    portrait: String
+    portrait: String,
+    mode: {
+      type: String,
+      required: true,
+      validator: value => ['planning','preparation','live','results','de','completed'].includes(value)
+    },
   },
   methods: {
     onDragStart(event) {
-      console.log(event)
-      event.dataTransfer.setData('text/plain', JSON.stringify({
-        fromPosition: this.poolPosition,
-        name: this.name,
-        club: this.club,
-        seed: this.seed
-      }));
+      if (mode === 'preparation' || mode === 'planning') {
+        event.dataTransfer.setData('text/plain', JSON.stringify({
+          fromPosition: this.poolPosition,
+          name: this.name,
+          club: this.club,
+          seed: this.seed
+        }));
+      }
     },
     onDrop(event) {
-      const droppedData = JSON.parse(event.dataTransfer.getData('text/plain'));
-      droppedData.toPosition = this.poolPosition;
-
-      this.$emit('swap-fencers', { droppedData });
+      if (mode === 'preparation' || mode === 'planning') {
+        const droppedData = JSON.parse(event.dataTransfer.getData('text/plain'));
+        droppedData.toPosition = this.poolPosition;
+        this.$emit('swap-fencers', {droppedData});
+      }
     }
   }
 }

package/src/stories/Organisms/ComplexInputs/FindLocation/FindLocation.vue

@@ -117,8 +117,6 @@ export default {
       this.formData.locationName = newName
     },
     handleAddressUpdate(newAddress) {
-      console.log("handle address update:")
-      console.log(newAddress)
       this.formData.address = newAddress.address
       this.formData.coordinates = newAddress.coordinates
     },

package/src/stories/Organisms/ComplexInputs/FindOrAddPerson/FindOrAddPerson.vue

@@ -93,12 +93,10 @@ export default {
   },
   computed: {
     formattedClubs() {
-      console.log('Mapping clubs:', this.fencingClubs); // Debug log
       const mappedClubs = this.fencingClubs.map(club => ({
         text: club.Name,
         link: club.ClubId.toString()
       }));
-      console.log('Mapped clubs:', mappedClubs); // Debug log
       return mappedClubs;
     }
   },
@@ -119,8 +117,6 @@ export default {
       this.inputValue = event.target.value;
     },
     selectPerson(person) {
-      console.log(`------- FindOrAddPerson: selectPerson -------`);
-      console.log(person);
       this.showDropdown = false;
       this.inputValue = '';
       this.$emit('person-selected', person);
@@ -161,7 +157,6 @@ export default {
         clubId: this.selectedClub.link
       };
       this.$emit('new-person-submitted', newPerson);
-      console.log(newPerson);
       this.showModal = false;
     },
     handleSelectedClub(value) {

package/src/stories/Organisms/Containers/Pool/Pool.vue

@@ -1,18 +1,26 @@
 <template>
-  <div class="p-4 mr-4 mt-3 bg-neutral rounded-lg shadow-md border border-dropdownSelect min-w-[22rem]">
+  <div class="p-4 mr-4 mt-3 bg-neutral rounded-lg shadow-md border border-dropdownSelect min-w-[22rem]" :class="mode === 'live' ? 'hover:border-bright' : ''" @click="handleSelectPool">
     <div class="flex flex-row justify-between mb-2">
       <h2 class="text-xl font-bold mb-2 flex">
         <BaseText :text="`${poolName} - ${ringName}`" size="lg" color="primary" weight="bold" class="p-2"/>
       </h2>
-      <div class="bg-eventBoxBlue w-40 h-9 rounded-lg my-1 flex flex-row justify-between border border-dropdownSelect">
+      <div v-if="mode === 'preparation' || mode === 'planning'" class="bg-eventBoxBlue w-40 h-9 rounded-lg my-1 flex flex-row justify-between border border-dropdownSelect">
         <BaseText text="STRENGTH" size="xs" color="quinary" weight="bold" class="pt-2.5 pl-3"/>
         <BaseText :text="poolInd" size="2xl" color="primaryHighlight" weight="bold" class="pt-0.5"/>
         <BaseIcon icon-name="fa-circle-info" size="2xl" color="quinary" class="pt-0.5 pr-2"/>
       </div>
+      <div v-if="mode === 'live'" class="bg-eventBoxBlue w-40 h-9 rounded-lg my-1 pt-1.5 flex flex-row justify-between border border-dropdownSelect">
+        <BaseText text="BOUTS LEFT" size="sm" color="quinary" weight="bold" class="w-2/3 text-right"/>
+        <BaseText text="10" size="sm" color="primaryHighlight" weight="bold" class="w-1/3 text-left pl-2"/>
+      </div>
     </div>
 
-    <div class="text-md mb-4 w-full">
-       <DropDownMenu :label="'Director'" :items="directors" :selectedItem="selectedDirector" width="w-full" dropDownWidth="w-full" class="" :alignEnd="false" @update:selectedItem="handleSelectedItem"/>
+    <div v-if="mode === 'preparation' || mode === 'planning'" class="text-md mb-4 w-full">
+       <DropDownMenu :label="'Director'" :items="directors" :selectedItem="selectedDirector" width="w-full" dropDownWidth="w-full" :alignEnd="false" @update:selectedItem="handleSelectedItem"/>
+    </div>
+    <div class="text-md mb-4 w-full flex ">
+      <BaseText text="Director: "size="sm" color="quinary" weight="bold" />
+      <BaseText :text="selectedDirector.text" size="sm" color="primaryHighlight" weight="bold" class="ml-2" />
     </div>
     <div class="grid grid-cols-1 gap-4">
       <PoolFencerCard v-for="(person, index) in pool" :key="person.id"
@@ -22,6 +30,7 @@
                       :club="person.Person.Club.Name"
                       :seed="person.Seed"
                       :portrait="clubLogoURL(person)"
+                      :mode="mode"
                       @swap-fencers="handleSwap"
                       @remove:fencer="handleRemoveFencer"
       />
@@ -71,7 +80,12 @@ export default {
     staff: {
       type: Array,
       required: true
-    }
+    },
+    mode: {
+      type: String,
+      required: true,
+      validator: value => ['planning','preparation','live','results','de','completed'].includes(value)
+    },
   },
   data() {
     return {
@@ -105,6 +119,12 @@ export default {
     },
     handleRemoveFencer(person) {
       this.$emit('remove:fencer', person);
+    },
+    handleSelectPool(){
+      if (this.mode === 'live') {
+        this.$emit('select:pool', this.poolId);
+      }
+
     }
   }
 };

package/src/stories/Organisms/Containers/PoolGrid/PoolGrid.stories.js

@@ -0,0 +1,30 @@
+import PoolGrid from './PoolGrid.vue';
+import getPoolsWithBouts from '../../../../mocks/getPoolsWithBouts.js';
+
+export default {
+    title: 'Organisms/Containers/PoolGrid',
+    component: PoolGrid,
+    tags: ['autodocs'],
+    args: {
+        bouts: getPoolsWithBouts
+    },
+    argTypes: {
+        bouts: {
+            control: 'object'
+        }
+
+    }
+};
+
+export const Default = {
+    args: {
+        bouts: getPoolsWithBouts
+    }
+};
+
+
+export const EmptyPool = {
+    args: {
+        bouts: []
+    }
+};