@dcrackel/hematournamentui 1.0.124 → 1.0.126

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

@@ -0,0 +1,211 @@
+<template>
+  <section>
+    <EditEventsTopMenu :currentTab="'Bracket'" :tabs="tabs" @tabMenuClick="handleTabMenuClick"/>
+    <ToggleHeader :currentSelection="viewName"
+                  firstButtonLabel="List View"
+                  secondButtonLabel="Tableau"
+                  :showToggle="true"
+                  :largeCards="largeCards"
+                  :connectedToServer="connectedToServer"
+                  @update:selection="handleViewChange"
+                  @update:cardSize="handleCardSizeToggle"/>
+
+    <Tableau :bouts="sortedBouts"
+             :hostingClubColors="hostingClubColors"
+             :bracketSize="bracketSize"
+             :largeCards="largeCards"
+             @action:editBout="editBout"
+             @action:directingBout="directBout" />
+
+    <DirectorModal :bout="selectedBout"
+                   :eventRules="eventRules"
+                   :hostingClubColors="hostingClubColors"
+                   :show="showDirectorModal" ringName="RingName"
+                   @update:closeModal="handleCloseModal"
+                   @update:bout="handleUpdateBout"
+                   @submit:bout="handleSubmitBout"/>
+
+    <EditBoutModal :bout="selectedBout" :eventRules="eventRules" :hostingClubColors="hostingClubColors"
+                   :show="showEditBoutModal"
+                   @update:closeModal="handleCloseModal"
+                   @submit:bout="handleSubmitBout"/>
+
+  </section>
+</template>
+
+<script>
+import EditEventsTopMenu from "../../Menus/EditEventsTopMenu/EditEventsTopMenu.vue";
+import ToggleHeader from "../../../Organisms/Headers/ToggleHeader/ToggleHeader.vue";
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+import BoutCard from "../../../Organisms/Cards/BoutCard/BoutCard.vue";
+import DirectorModal from "../../../Molecules/Modals/DirectorModal/DirectorModal.vue";
+import EditBoutModal from "../../../Molecules/Modals/EditBoutModal/EditBoutModal.vue";
+import Tableau from "../../../Organisms/Containers/Tableau/Tableau.vue";
+import TableauColumn from "../../../Organisms/Containers/TableauColumn/TableauColumn.vue";
+import ServerConnected from "../../../Molecules/Indicators/ServerConnected/ServerConnected.vue";
+
+export default {
+  components: {
+    ServerConnected,
+    TableauColumn,
+    Tableau,
+    EditBoutModal,
+    DirectorModal,
+    BoutCard,
+    BaseText,
+    ToggleHeader,
+    EditEventsTopMenu
+  },
+  props: {
+    bouts: {
+      type: Array,
+      required: true
+    },
+    eventRules: {
+      type: Object,
+      required: true
+    },
+    hostingClubColors: {
+      type: Object,
+      required: true
+    },
+    connectedToServer: {
+      type: Boolean,
+      required: true
+    }
+  },
+  computed: {
+    // upcomingBouts() {
+    //   return this.bouts.filter(bout =>
+    //       bout.Status === 'Scheduled' &&
+    //       bout.Person1Id !== 0 &&
+    //       bout.Person2Id !== 0
+    //   ).map(bout => this.updateBoutStatus(bout));
+    // },
+    // completedBouts() {
+    //   return this.bouts.filter(bout => bout.Status === 'Completed');
+    // },
+    bracketSize() {
+      return this.bouts[0].RoundLabel
+    },
+    activeBouts() {
+      return this.bouts.filter(bout => bout.Status === 'Active');
+    },
+    sortedBouts() {
+      return this.bouts.sort((a, b) => {
+        if (a.DEBoutId < b.DEBoutId) {
+          return -1;
+        }
+        if (a.DEBoutId > b.DEBoutId) {
+          return 1;
+        }
+        return 0;
+      });
+    }
+  },
+  data() {
+    return {
+      showDirectorModal: false,
+      showEditBoutModal: false,
+      selectedBout: {},
+      tabs: [
+        {id: 'Staff', label: 'Staff', color: 'primaryHighlight'},
+        {id: 'Checkin', label: 'Seeding & Checkin', color: 'primaryHighlight'},
+        {id: 'Pools', label: 'Pools', color: 'primaryHighlight'},
+        {id: 'Pool Results', label: 'Pool Results', color: 'primaryHighlight'},
+        {id: 'Bracket', label: 'Bracket', color: 'primaryHighlight'},
+        {id: 'Final', label: 'Final Results', color: 'primaryHighlight'}
+      ],
+      viewName: "Tableau",
+      largeCards: true
+    };
+  },
+  watch: {
+    bouts: {
+      handler() { //newBouts
+        this.$forceUpdate();
+      },
+      deep: true,
+    }
+  },
+  methods: {
+    updateBoutStatus(bout) {
+      return {
+        ...bout,
+        customStatus: bout.Status
+      };
+    },
+    handleCloseModal(bout) {
+      this.showDirectorModal = false;
+      this.showEditBoutModal = false;
+
+      if (bout.Status !== 'Completed') {
+        const updatedBout = this.bouts.find(b => b.BoutId === bout.BoutId);
+        if (updatedBout) {
+          updatedBout.Status = 'Scheduled';
+          updatedBout.Score1 = 0;
+          updatedBout.Score2 = 0;
+        }
+        this.$emit('update:bout', updatedBout);
+      }
+    },
+    handleTabMenuClick(value) {
+      this.$emit('tab:menu-click', value);
+    },
+    handleViewChange() {
+      console.log('handleViewChange')
+    },
+    handleUpdateBout(bout) {
+      if (!this.activeBouts || this.activeBouts.length === 0) {
+        return;
+      }
+
+      const updatedBout = this.activeBouts.find(b => b.BoutId === bout.BoutId);
+
+      if (!updatedBout) {
+        return;
+      }
+
+      Object.assign(updatedBout, bout);
+      updatedBout.Status = 'Active';
+      this.$emit('update:bout', updatedBout);
+    },
+    handleSubmitBout(bout) {
+      this.showEditBoutModal = false;
+      this.showDirectorModal = false;
+      const updatedBout = this.bouts.find(b => b.BoutId === bout.BoutId);
+
+      Object.assign(updatedBout, bout);
+      updatedBout.Status = 'Completed';
+      updatedBout.Ended = new Date().toISOString();
+
+      this.$emit('submit:bout', updatedBout);
+    },
+    directBout(bout) {
+      console.log('Bracket: updatedBout', bout)
+      console.log('Bracket: updatedBout', bout.Person1.PersonId)
+      //can not edit a BYE round or future round
+      if (bout.Person1.PersonId === 0 || bout.Person2.PersonId === 0) {
+        console.log('BYE BYE BYE BYE BYE')
+        return;
+      }
+
+      bout.Status = 'Active';
+      this.showDirectorModal = true;
+      this.selectedBout = bout;
+      this.$emit('update:directing-bout', bout)
+    },
+    editBout(bout) {
+      console.log('Bracket: editBout', bout)
+      const updatedBout = this.bouts.find(b => b.BoutId === bout.BoutId);
+      if (updatedBout) {
+        this.showEditBoutModal = true;
+        this.selectedBout = bout;
+      }
+    },
+    handleCardSizeToggle(value){
+      this.largeCards = value
+    }
+  }
+}
+</script>

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

@@ -2,16 +2,11 @@
   <section>
     <EditEventsTopMenu :currentTab="'Pools'" :tabs="tabs" @tabMenuClick="handleTabMenuClick"/>
     <ToggleHeader :currentSelection="viewName" firstButtonLabel="List View" secondButtonLabel="Pool Grid"
-                  @update:selection="handleViewChange"/>
+                  @update:selection="handleViewChange" :connectedToServer="connectedToServer"/>
 
     <!-- active bout -->
     <section v-if="remainingBoutsCount > 0">
-      <div class="flex flex-row">
-        <div class="w-5 h-5 rounded-full border-2 mt-5 mr-2">
-          <div :class="connectedToServer ? 'bg-green' : 'bg-red'" class="w-3 h-3 rounded-full mt-0.5 ml-0.5"></div>
-        </div>
-        <BaseText class="mt-5" color="primaryHighlight" size="md" text="Connected" weight="bold"/>
-      </div>
+      <ServerConnected :connectedToServer="connectedToServer" />
       <div class="border-b border-dropdownSelect mb-8"></div>
 
       <div class="w-full flex flex-col items-center">
@@ -76,9 +71,11 @@ import BaseText from "../../../Atoms/Text/BaseText.vue";
 import BoutCard from "../../../Organisms/Cards/BoutCard/BoutCard.vue";
 import DirectorModal from "../../../Molecules/Modals/DirectorModal/DirectorModal.vue";
 import EditBoutModal from "../../../Molecules/Modals/EditBoutModal/EditBoutModal.vue";
+import ServerConnected from "../../../Molecules/Indicators/ServerConnected/ServerConnected.vue";
 
 export default {
   components: {
+    ServerConnected,
     EditBoutModal,
     DirectorModal,
     BoutCard,

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

@@ -29,6 +29,15 @@ export const Default = {
     }
 };
 
+modifiedEvent = {...eventPersonGetPoolAssignmentEvent, Status: "de"}
+export const EventIsInDE = {
+    args: {
+        event: modifiedEvent,
+        poolResults: getPoolResults.report,
+        numPromoted: '100%'
+    }
+};
+
 
 modifiedEvent = {...eventPersonGetPoolAssignmentEvent, Status: "planning"}
 export const EventIsInPlanning = {

package/tailwind.config.js

@@ -92,7 +92,7 @@ module.exports = {
         },
     },
     plugins: [
-        function ({addBase, theme}) {
+        function ({ addBase, theme }) {
             addBase({
                 h1: {
                     fontSize: theme('fontSize.3xl'),
@@ -108,5 +108,26 @@ module.exports = {
                 },
             });
         },
+        function ({ addUtilities }) {
+            const newUtilities = {
+                '.scrollbar-thin': {
+                    '&::-webkit-scrollbar': {
+                        width: '8px',
+                        height: '8px',
+                    },
+                    '&::-webkit-scrollbar-track': {
+                        background: '#f1f1f1',
+                    },
+                    '&::-webkit-scrollbar-thumb': {
+                        background: '#888',
+                        borderRadius: '9999px',
+                    },
+                    '&::-webkit-scrollbar-thumb:hover': {
+                        background: '#555',
+                    },
+                },
+            }
+            addUtilities(newUtilities, ['responsive', 'hover'])
+        }
     ],
-};
+};