@dcrackel/hematournamentui 1.0.86 → 1.0.88

package/src/stories/Molecules/Buttons/BaseButton/BaseButton.vue

@@ -1,13 +1,13 @@
 <template>
-  <button :class="classes" data-testid="base-button" type="button" @click="handleClick">
+  <button :class="computedClasses" data-testid="base-button" type="button" @click="handleClick">
     <BaseIcon v-if="iconName && iconLeft" :color="textColor" :icon-name="iconName" :size="size" :style="iconStyle" data-testid="base-icon"/>
-    <BaseText :color="textColor" :size="size" :text="label" data-testid="base-text" weight="normal"/>
+    <BaseText :color="textColor" :size="size" :text="label" data-testid="base-text" weight="normal" />
     <BaseIcon v-if="iconName && !iconLeft" :color="textColor" :icon-name="iconName" :size="size" :style="iconStyle" data-testid="base-icon"/>
   </button>
 </template>
 
 <script>
-import { computed } from 'vue';
+import { computed, watch } from 'vue';
 import BaseText from '../../../Atoms/Text/BaseText.vue';
 import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
 
@@ -40,7 +40,7 @@ export default {
     type: {
       type: String,
       default: 'primary',
-      validator: value => ['primary', 'secondary', 'tertiary', 'bright', 'admin', 'adminSecondary', 'iconOnly', 'editor', 'square', 'tabBar'].includes(value)
+      validator: value => ['primary', 'secondary', 'tertiary', 'bright', 'admin', 'adminSecondary', 'iconOnly', 'editor', 'square', 'tabBar', 'graySecondary'].includes(value)
     },
     selected: {
       type: Boolean,
@@ -49,53 +49,50 @@ export default {
   },
   emits: ['click'],
   setup(props, { emit }) {
-    const typeClasses = {
-      primary: 'mx-1 p-2 items-center gap-2.5 text-center rounded-md shadow border border-dropdownSelect justify-center hover:bg-tertiary ' +
-          (props.selected ? 'bg-dropdownSelect' : 'bg-neutral'),
+    watch(() => props.selected, (newVal) => {
+      console.log('selected prop changed to:', newVal);
+      console.log('props.selected:', props.selected);
+      console.log('props.type:', props.type);  // Access type using props
+    });
 
-      secondary: 'px-2.5 items-center gap-2.5 text-center my-1 p-3 border-b border-secondary hover:border-b hover:border-neutral w-full rounded-lg flex flex-row justify-center ' +
-          (props.selected ? 'bg-secondary' : 'bg-primary'),
+    const computedClasses = computed(() => {
+      const baseClasses = 'inline-flex';
+      const sizeClass = {
+        xs: 'text-xs',
+        sm: 'text-sm',
+        md: 'text-md',
+        lg: 'text-lg',
+        xl: 'text-xl',
+        '2xl': 'text-2xl',
+        '3xl': 'text-3xl',
+        '4xl': 'text-4xl',
+      }[props.size];
 
-      tertiary: 'px-2.5 py-0.5 items-center gap-2.5 rounded-md text-center justify-center hover:bg-primary text-primary ' +
-          (props.selected ? 'bg-primary' : 'bg-tertiary'),
+      const typeClass = {
+        primary: `mx-1 p-2 items-center gap-2.5 text-center rounded-md shadow border border-dropdownSelect justify-center hover:bg-tertiary ${props.selected ? 'bg-dropdownSelect' : 'bg-neutral'}`,
+        secondary: `px-2.5 items-center gap-2.5 text-center my-1 p-3 w-full rounded-lg flex flex-row justify-center hover:bg-primaryHighlight ${props.selected ? 'bg-secondary' : 'bg-primary'}`,
+        tertiary: `px-2.5 py-0.5 items-center gap-2.5 rounded-md text-center justify-center hover:bg-primary text-primary ${props.selected ? 'bg-primary' : 'bg-tertiary'}`,
+        bright: `px-3 py-1 items-center gap-2.5 rounded-md text-center justify-center hover:bg-primary text-neutral ${props.selected ? 'bg-primary' : 'bg-bright'}`,
+        admin: `px-2.5 py-2 items-center rounded-md gap-2.5 text-center my-1 text-neutral hover:bg-primaryHighlight ${props.selected ? 'bg-primary' : 'bg-primary'}`,
+        adminSecondary: `px-2.5 py-2 rounded-xl items-center gap-2.5 text-center my-1 pb-2 border-b border-secondary hover:bg-bright w-11/12 text-neutral ${props.selected ? 'bg-primary' : 'bg-primary'}`,
+        iconOnly: `px-0.5 items-center rounded-full text-center text-tertiary shadow border border-dropdownSelect justify-center bg-primaryHighlight`,
+        editor: `px-1 items-center rounded-md text-center justify-center hover:bg-tertiary`,
+        square: `p-8 my-3 items-center gap-2.5 rounded-md text-center shadow border border-dropdownSelect justify-center hover:bg-tertiary ${props.selected ? 'bg-dropdownSelect' : 'bg-neutral'}`,
+        tabBar: `p-2 items-center justify-center text-center hover:border-b hover:border-b-bright text-primaryHighlight ${props.selected ? 'border-b border-b-bright' : 'border-b border-b-neutral text-bright'}`,
+        graySecondary: `px-2.5 items-center gap-2.5 text-center my-1 p-3 w-full rounded-lg flex flex-row justify-center hover:bg-quinary ${props.selected ? 'bg-secondary' : 'bg-graySecondary'}`,
+        whiteSecondary: `px-2.5 items-center gap-2.5 text-center my-1 p-3 w-full rounded-lg flex flex-row justify-center border border-poolBox hover:border-dropdownSelect ${props.selected ? 'bg-neutral shadow' : 'bg-poolBox'}`,
+        liteGraySecondary: `px-2.5 items-center gap-2.5 text-center my-1 p-3 w-full rounded-lg flex flex-row justify-center border border-poolBox hover:border-dropdownSelect ${props.selected ? 'bg-neutral shadow' : 'bg-poolBox'}`,
+      }[props.type];
 
-      bright: 'px-3 py-1 items-center gap-2.5 rounded-md text-center justify-center hover:bg-primary text-neutral ' +
-          (props.selected ? 'bg-primary' : 'bg-bright'),
-
-      admin: 'px-2.5 py-2 items-center rounded-md gap-2.5 text-center my-1 text-neutral hover:bg-primaryHighlight ' +
-          (props.selected ? 'bg-primary' : 'bg-primary'),
-
-      adminSecondary: 'px-2.5 py-2 rounded-xl items-center gap-2.5 text-center my-1 pb-2 border-b border-secondary hover:bg-bright w-11/12 text-neutral ' +
-          (props.selected ? 'bg-primary' : 'bg-primary'),
-
-      iconOnly: 'px-0.5 items-center rounded-full text-center text-tertiary shadow border border-dropdownSelect justify-center bg-primaryHighlight',
-
-      editor: 'px-1 items-center rounded-md text-center justify-center hover:bg-tertiary',
-
-      square: 'p-8 my-3 items-center gap-2.5 rounded-md text-center shadow border border-dropdownSelect justify-center hover:bg-tertiary ' +
-          (props.selected ? 'bg-dropdownSelect' : 'bg-neutral'),
-
-      tabBar: 'p-2 items-center justify-center text-center hover:border-b hover:border-b-bright text-primaryHighlight ' +
-          (props.selected ? 'border-b border-b-bright' : 'border-b border-b-neutral'),
-    };
-
-    const sizeClasses = {
-      xs: 'text-xs',
-      sm: 'text-sm',
-      md: 'text-md',
-      lg: 'text-lg',
-      xl: 'text-xl',
-      '2xl': 'text-2xl',
-      '3xl': 'text-3xl',
-      '4xl': 'text-4xl',
-    };
+      return `${baseClasses} ${typeClass} ${sizeClass}`;
+    });
 
     return {
       textColor: computed(() => {
         const colorMap = {
           primary: 'primary',
           secondary: 'neutral',
-          tertiary: 'tertiary',
+          tertiary: 'primary',
           bright: 'neutral',
           admin: 'neutral',
           adminSecondary: 'neutral',
@@ -103,17 +100,13 @@ export default {
           editor: props.selected ? 'bright' : 'quaternary',
           square: 'primary',
           tabBar: 'primaryHighlight',
+          graySecondary: 'neutral',
+          whiteSecondary: 'primary',
+          liteGraySecondary: 'primary'
         };
         return colorMap[props.type];
       }),
-      classes: computed(() => {
-        let baseClasses = 'inline-flex';
-
-        let typeClass = typeClasses[props.type];
-
-        let sizeClass = sizeClasses[props.size];
-        return `${baseClasses} ${typeClass} ${sizeClass}`;
-      }),
+      computedClasses,
       handleClick(event) {
         emit('click', event);
       }

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

@@ -15,7 +15,10 @@
       <img :src="portrait" alt="Fencer Portrait" class="w-full h-full object-cover" />
     </div>
     <div class="flex-1 ml-4">
-      <BaseText :text="name" size="md" />
+      <p class="flex">
+        <BaseText :text="name" size="md" />
+        <BaseText v-if="seed !== poolPosition" :text="`${seed}`" size="xs" class="ml-1" color="bright" />
+      </p>
       <BaseText :text="club" size="xs" />
     </div>
     <BaseIcon icon-name="fa-grip-dots-vertical" size="2xl" />

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

@@ -0,0 +1,73 @@
+import getAllStaffByTournamentId from '../../../../mocks/getAllStaffByTournamentId.js';
+import StaffCard from './StaffCard.vue';
+
+export default {
+    title: 'Organisms/Cards/StaffCard',
+    component: StaffCard,
+    tags: ['autodocs'],
+    args: {
+        staff: {
+            "Id": 2,
+            "TournamentId": 4,
+            "EventId": 5,
+            "PoolId": 102,
+            "PersonId": 23,
+            "Role": "Director",
+            "Person": {
+                "DisplayName": "Lucas Garcia",
+                "Club": {
+                    "ClubId": 1,
+                    "Name": "Acme Fencing Club"
+                },
+                "Images": [
+                    {
+                        "URL": "https://randomuser.me/api/portraits/men/77.jpg"
+                    }
+                ]
+            },
+            "Pool": {
+                "PoolId": 102,
+                "Name": "Pool 1",
+                "RingName": "Ring 1"
+            }
+        }
+    },
+    argTypes: {
+        staff: {
+            control: 'object'
+        },
+        'update:assignment': {
+            action: 'update:assignment'
+        }
+    }
+};
+
+export const Default = {
+    args: {
+        staff: {
+            "Id": 2,
+            "TournamentId": 4,
+            "EventId": 5,
+            "PoolId": 102,
+            "PersonId": 23,
+            "Role": "Director",
+            "Person": {
+                "DisplayName": "Lucas Garcia",
+                "Club": {
+                    "ClubId": 1,
+                    "Name": "Acme Fencing Club"
+                },
+                "Images": [
+                    {
+                        "URL": "https://randomuser.me/api/portraits/men/77.jpg"
+                    }
+                ]
+            },
+            "Pool": {
+                "PoolId": 102,
+                "Name": "Pool 1",
+                "RingName": "Ring 1"
+            }
+        }
+    }
+};

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

@@ -0,0 +1,73 @@
+<template>
+  <div class="flex items-center border border-dropdownSelect rounded-lg shadow-md bg-white hover:border-bright">
+    <div class="mr-4 h-20 pl-4 pt-2.5">
+      <div v-if="!portraitURL" class="w-10 h-10 mt-2 rounded-xl bg-dropdownSelect flex items-center justify-center">
+        <BaseText text="" size="sm" color="neutral" weight="bold"/>
+      </div>
+      <img v-if="portraitURL" :src="portraitURL" alt="Portrait" class="mt-2 w-12 h-12 rounded-xl">
+    </div>
+    <div class="flex flex-col w-4/12 justify-star">
+      <span class="w-full flex justify-start">
+        <BaseText :text="fullName" size="md" color="primary" weight="bold"/>
+      </span>
+      <span class="w-full flex justify-start">
+        <BaseText :text="staff.Person.Club.Name" size="xs" color="primary" weight="normal"/>
+      </span>
+    </div>
+
+    <div class="mr-4 ml-auto">
+      <ButtonBar
+          :buttons="buttons"
+          :selected="computedSelected"
+          @update:selected="handleAssignment"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+import ButtonBar from "../../../Molecules/Buttons/ButtonBar/ButtonBar.vue";
+
+export default {
+  name: 'StaffCard',
+  components: { ButtonBar, BaseText },
+  props: {
+    staff: {
+      type: Object,
+      required: true
+    },
+  },
+  data() {
+    return {
+      view: "Staff List"
+    };
+  },
+  computed: {
+    fullName() {
+      return `${this.staff.Person.DisplayName}`;
+    },
+    portraitURL() {
+      const images = this.staff.Person.Images || [];
+      const portrait = images.find(image => image.URL);
+      return portrait ? portrait.URL : '';
+    },
+    buttons() {
+      return [
+        { id: 'Director',  label: 'Director', defaultBgColor: 'bg-natural', selectedBgColor: 'bg-eventBoxBlue' },
+        { id: 'Line Judge', label: 'Line Judge', defaultBgColor: 'bg-natural', selectedBgColor: 'bg-eventBoxBlue' },
+        { id: 'List Table', label: 'List Table', defaultBgColor: 'bg-natural', selectedBgColor: 'bg-eventBoxBlue' }
+      ];
+    },
+    computedSelected() {
+      return this.staff.Role;
+    }
+  },
+  methods: {
+    handleAssignment(selected) {
+      const staff = { ...this.staff, Status: selected };
+      this.$emit('update:assignment', staff);
+    }
+  }
+};
+</script>

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

@@ -62,21 +62,30 @@ export default {
     pool: {
       type: Array,
       required: true
+    },
+    staff: {
+      type: Array,
+      required: true
     }
   },
   data() {
     return {
-      selectedDirector: { text: this.directorName,link: this.directorName },
-      directors: [
-        { text: 'Lucas Garcia', link: 'he-him' },
-        { text: 'Mia Rodriguez', link: 'she-her' },
-        { text: 'Isabella Hernandez', link: 'they-them' }
-      ],
+      selectedDirector: { text: this.directorName, link: this.directorName }
     };
   },
+  computed: {
+    directors() {
+      return this.staff
+          //.filter(staffMember => staffMember.Role === 'Director')
+          .map(staffMember => ({
+            text: staffMember.Person.DisplayName,
+            link: staffMember.PersonId // Assuming PersonId is a suitable unique identifier
+          }));
+    }
+  },
   methods: {
     handleSwap({ droppedData, toPosition }) {
-      this.$emit('swap-fencers', {
+      this.$emit('update:swapFencers', {
         draggedPerson: droppedData,
         toPosition
       });
@@ -85,6 +94,11 @@ export default {
       const socialMediaLinks = person.Person.Club.SocialMedia || [];
       const portrait = socialMediaLinks.find(link => link.Type === 'Web');
       return portrait ? portrait.Link : '';
+    },
+    handleSelectedItem(event){
+      console.log(event)
+      this.selectedDirector = { text: event.text, link: event.link }
+      this.$emit('update:setDirector', event.link)
     }
   }
 };

package/src/stories/Organisms/Headers/PoolSummary/PoolSummary.vue

@@ -1,13 +1,43 @@
 <template>
-  <div class="bg-poolSetup py-1 px-4 rounded-xl flex justify-between items-center shadow border border-dropdownSelect">
-    <section class="flex flex-col pt-2">
-      <BaseText :text="event.EventName" size="lg" color="primary" weight="bold" />
+  <div class="bg-poolSetup px-4 rounded-xl flex justify-between items-center shadow border border-dropdownSelect">
+    <section class="flex flex-col w-1/3 mt-2">
+      <BaseText :text="event.EventName" size="lg" color="primary" weight="bold" class="pt-4" />
       <BaseText :text="event.RuleSummary" size="md" color="quinary" weight="normal" />
       <span class="h-8"></span>
     </section>
-    <section class="flex space-x-4">
-      <CounterBox :recommended="7" :count="poolSize" label="Pool Size" @update:count="handlePoolSizeChange" />
-      <CounterBox :recommended="2" :count="numberOfRings" label="Num Rings" @update:count="handleNumOfRingsChange" />
+
+    <section v-if="mode === 'Planning'" class="flex rounded-xl border border-dropdownSelect mt-2 px-4 pt-2 pb-4 bg-neutral w-1/3 shadow">
+      <div class="mt-1 w-10 pr-4">
+        <BaseIcon icon-name="fa-clipboard-list" size="3xl" color="primaryHighlight" class="" />
+      </div>
+      <span class="w-full">
+        <BaseText text="Pools are in Planning Mode" size="lg" color="quaternary" weight="bold" class="" />
+        <BaseText text="click start pools when ready to start event" size="xs" color="primaryHighlight" />
+      </span>
+
+    </section>
+    <section v-if="mode === 'Preparation'"  class="flex rounded-xl border border-dropdownSelect mt-2 px-4 pt-2 pb-4 bg-neutral w-1/3 shadow">
+      <div class="mt-1 w-10 pr-4">
+        <BaseIcon icon-name="fa-wrench" size="3xl" color="primaryHighlight" class="" />
+      </div>
+      <span class="w-full">
+        <BaseText text="Pools are Preparation Mode" size="lg" color="quaternary" weight="bold" class="" />
+        <BaseText text="only fencers that are present will show" size="xs" color="primaryHighlight" />
+      </span>
+    </section>
+    <section v-if="mode === 'Live'"  class="flex rounded-xl border border-dropdownSelect mt-2 px-4 pt-2 pb-4 bg-neutral w-1/3 shadow">
+      <div class="mt-1 w-10 pr-4">
+        <BaseIcon icon-name="fa-play" size="3xl" color="primaryHighlight" class="" />
+      </div>
+      <span class="w-full">
+        <BaseText text="Pools are now live!" size="lg" color="quaternary" weight="bold" class="" />
+        <BaseText text="Pools can now be run" size="xs" color="primaryHighlight" />
+      </span>
+    </section>
+
+    <section class="flex flex-row w-1/3 justify-end">
+      <CounterBox :recommended="7" :count="poolSize" label="Pool Size" :textColor="'quaternary'" @update:count="handlePoolSizeChange" />
+      <CounterBox :recommended="2" :count="numberOfRings" label="Num Rings" :textColor="'quaternary'" @update:count="handleNumOfRingsChange" />
     </section>
   </div>
 </template>
@@ -16,10 +46,12 @@
 import EventStatusBox from "../../../Molecules/Boxes/EventStatusBox/EventStatusBox.vue";
 import CounterBox from "../../../Molecules/Boxes/CounterBox/CounterBox.vue";
 import BaseText from "../../../Atoms/Text/BaseText.vue";
+import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
+import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
 
 export default {
   name: 'PoolSummary',
-  components: {BaseText, CounterBox, EventStatusBox },
+  components: {BaseIcon, BaseButton, BaseText, CounterBox, EventStatusBox },
   props: {
     event: {
       type: Object,
@@ -37,6 +69,11 @@ export default {
         return true;
       },
     },
+    mode: {
+      type: String,
+      required: true,
+      validator: value => ['Planning', 'Preparation', 'Live', 'Complete'].includes(value)
+    }
   },
   computed: {
     poolSize() {
@@ -54,7 +91,7 @@ export default {
     },
     handleNumOfRingsChange(numberOfRings) {
       this.$emit('update:numberOfRings', numberOfRings);
-    },
+    }
   },
 };
-</script>
+</script>

package/src/stories/Organisms/Headers/StaffSummary/StaffSummary.stories.js

@@ -0,0 +1,35 @@
+import StaffSummary from './StaffSummary.vue';
+
+export default {
+    title: 'Organisms/Headers/StaffBanner',
+    component: StaffSummary,
+    tags: ['autodocs'],
+    args: {
+        eventName: 'Sample Event',
+        currentSelection: 'Staff List'
+    },
+    argTypes: {
+        eventName: {
+            control: 'text',
+            description: 'Name of the event'
+        },
+        currentSelection: {
+            control: 'radio',
+            options: ['Staff List', 'Staff Assignments'],
+            description: 'Currently selected view'
+        },
+        'update:selection': { action: 'update:selection' }
+    }
+};
+
+export const Default = {
+    args: {
+        currentSelection: 'Staff List'
+    }
+};
+
+export const StaffAssignmentsSelected = {
+    args: {
+        currentSelection: 'Staff Assignments'
+    }
+};

package/src/stories/Organisms/Headers/StaffSummary/StaffSummary.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="bg-bannerBackground px-4 py-4 rounded-xl flex justify-center border border-dropdownSelect">
+    <section class="flex flex-row w-3/4 justify-center bg-poolBox rounded-lg p-0.5 border border-dropdownSelect">
+      <BaseButton
+          label="Staff List"
+          :selected="view === 'Staff List'"
+          size="md"
+          type="whiteSecondary"
+          class="mx-2 w-1/2"
+          @click="handleSelection('Staff List')"
+      />
+      <BaseButton
+          label="Staff Assignments"
+          :selected="view === 'Staff Assignments'"
+          size="md"
+          type="liteGraySecondary"
+          class="mx-2 w-1/2"
+          @click="handleSelection('Staff Assignments')"
+      />
+    </section>
+  </div>
+</template>
+
+<script>
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
+
+export default {
+  name: 'StaffSummary',
+  components: { BaseText, BaseButton },
+  props: {
+    currentSelection: {
+      type: String,
+      required: true,
+      validator: value => ['Staff List', 'Staff Assignments'].includes(value)
+    }
+  },
+  data() {
+    return {
+      view: this.currentSelection
+    };
+  },
+  watch: {
+    currentSelection(newValue) {
+      this.view = newValue;
+    }
+  },
+  methods: {
+    handleSelection(selection) {
+      this.view = selection;
+      this.$emit('update:selection', selection);
+    }
+  }
+};
+</script>

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

@@ -1,6 +1,7 @@
 import EditEvents from './PoolManagement.vue';
-import eventPersonGetInitialPoolAssignments from '../../../../mocks/eventPersonGetInitialPoolAssignments.js';
+import eventPersonGetInitialPoolAssignments from '../../../../mocks/eventPersonGetInitialPoolAssignments2.js';
 import eventPersonGetPoolAssignmentEvent from '../../../../mocks/eventPersonGetPoolAssignmentEvent.js';
+import eventPersonGetInitialStaff from '../../../../mocks/eventPersonGetInitialStaff.js';
 
 export default {
     title: 'Templates/EventManagement/PoolManagement',
@@ -8,7 +9,8 @@ export default {
     tags: ['autodocs'],
     args: {
         event: eventPersonGetPoolAssignmentEvent,
-        poolAssignments: eventPersonGetInitialPoolAssignments
+        poolAssignments: eventPersonGetInitialPoolAssignments,
+        staff: eventPersonGetInitialStaff
     },
     argTypes: {
         event: {
@@ -22,26 +24,49 @@ export default {
     }
 };
 
+const modifiedEvent = { ...eventPersonGetPoolAssignmentEvent, Flights: 1 };
+
 export const Default = {
     args: {
-        event: {
-            "EventId": 5,
-            "TournamentId": 4,
-            "EventName": "Feline Longsword",
-            "Date": "2024-05-22",
-            "StartTime": "17:25:31",
-            "NumberOfRings": 3,
-            "NumberOfPools": 3,
-            "PoolSize": 4,
-            "Flights": 1,
-            "WeaponId": 1,
-            "Status": "Upcoming",
-            "Present": 0,
-            "Absent": 10,
-            "Removed": 0,
-            "RuleSummary": "Pools -> DE -> 3rd Place Faceoff"
-        },
-        poolAssignments: eventPersonGetInitialPoolAssignments
+        event:eventPersonGetPoolAssignmentEvent,
+        poolAssignments: eventPersonGetInitialPoolAssignments,
+        staff: eventPersonGetInitialStaff,
+        mode: 'Planning'
+    }
+};
+
+export const planningMode = {
+    args: {
+        event:eventPersonGetPoolAssignmentEvent,
+        poolAssignments: eventPersonGetInitialPoolAssignments,
+        staff: eventPersonGetInitialStaff,
+        mode: 'Planning'
+    }
+};
+
+export const singleFlight = {
+    args: {
+        event:modifiedEvent,
+        poolAssignments: eventPersonGetInitialPoolAssignments,
+        staff: eventPersonGetInitialStaff,
+        mode: 'Preparation'
+    }
+};
+
+export const NoPoolsYet = {
+    args: {
+        event:modifiedEvent,
+        poolAssignments: [],
+        staff: [],
+        mode: 'Preparation'
     }
 };
 
+export const liveMode = {
+    args: {
+        event:eventPersonGetPoolAssignmentEvent,
+        poolAssignments: eventPersonGetInitialPoolAssignments,
+        staff: eventPersonGetInitialStaff,
+        mode: 'Live'
+    }
+};