simplifications

compile css

src/helpers/eventlineup.js

@@ -98,22 +98,22 @@ exports.loadSlots = (options) =>{
     const availability = availabilities?.find(a=>a.memberId==eventLineupEntry.memberId)
     const member = members.find(m=>m.id==eventLineupEntry.memberId)
     const {positionFlags} = parsePositionLabel(eventLineupEntry.label)
-    const initial_slotset = `lineup-${positionFlags.has('PO') ? 'positiononly' : 'starting'}-${event.id}`
+    const initial_lineup_segment = `${positionFlags.has('PO') ? 'position-only' : 'starting'}`
     
-    s+=options.fn({eventLineupEntry, availability, member, event, initial_slotset})
+    s+=options.fn({eventLineupEntry, availability, member, event, initial_lineup_segment})
   })
   const players_without_lineup_entry = members.filter(
     member=>!event_lineup_entries.map(lue=>lue.memberId).includes(member.id) && !member.isNonPlayer
     )
   players_without_lineup_entry.forEach(member =>{
       const availability = availabilities?.find(a=>a.memberId==member.id)
-      let initial_slotset
+      let initial_lineup_segment
       if (availability?.statusCode == 0 || availability?.statusCode == null) {
-        initial_slotset =`lineup-out-${event.id}`
+        initial_lineup_segment =`out`
       } else {
-        initial_slotset =`lineup-bench-${event.id}`
+        initial_lineup_segment =`bench`
       }
-      s+=options.fn({availability, member, event, initial_slotset})
+      s+=options.fn({availability, member, event, initial_lineup_segment})
     })
   return s
 }

src/public/css/application.css

@@ -2312,13 +2312,13 @@ input:-webkit-autofill:focus {
 }
 
 .Popup-container::before {
-  top: calc( 100% - 6px );
+  top: calc(100% - 6px);
   border: solid #d6d6d6 1px;
   box-shadow: 0 0 2px rgba(56, 56, 56, 0.15);
 }
 
 .Popup-container::after {
-  top: calc( 100% - 7px );
+  top: calc(100% - 7px);
 }
 
 .Popup-content {
@@ -2757,7 +2757,7 @@ input:-webkit-autofill:focus {
 
 .StepNav-stepTitle {
   width: 150px;
-  left: calc( 0px - 43px);
+  left: calc(0px - 43px);
   padding-top: 4px;
 }
 
@@ -2875,7 +2875,7 @@ input:-webkit-autofill:focus {
 }
 .StepNav--small .StepNav-stepTitle {
   width: 150px;
-  left: calc( 0px - 53px);
+  left: calc(0px - 53px);
   padding-top: 2px;
 }
 .StepNav--small .StepNav-stepIcon {
@@ -2910,7 +2910,7 @@ input:-webkit-autofill:focus {
 }
 .StepNav--xsmall .StepNav-stepTitle {
   width: 150px;
-  left: calc( 0px - 62px);
+  left: calc(0px - 62px);
   padding-top: 1px;
 }
 .StepNav--xsmall .StepNav-stepIcon {
@@ -7014,7 +7014,7 @@ a.Panel-row {
   align-items: center;
 }
 
-div[id^=event-lineup] {
+div.event-lineup {
   max-width: 576px;
   counter-reset: lineup-sequence-counter 0;
   margin-left: 8px;
@@ -7093,9 +7093,15 @@ li .availability-status-code- {
   padding: 0;
 }
 
-div[id^=event-lineup] .Panel.position-only .Panel-cell:has(.sequence), div[id^=event-lineup] .Panel.bench .Panel-cell:has(.sequence), div[id^=event-lineup] .Panel.out .Panel-cell:has(.sequence) {
+div.event-lineup .lineup-segment:has(input.Toggle-input:not(:checked)).out .Panel-cell:has(.SelectBox),
+div.event-lineup .lineup-segment:has(input.Toggle-input:not(:checked)).out .Panel-cell:has(.drag-handle),
+div.event-lineup .lineup-segment:has(input.Toggle-input:not(:checked)).out button:has(+ .position-label-flags) {
   display: none;
 }
+div.event-lineup .lineup-segment.bench .Panel-cell:has(.sequence), div.event-lineup .lineup-segment.position-only .Panel-cell:has(.sequence), div.event-lineup .lineup-segment.out .Panel-cell:has(.sequence) {
+  display: none;
+}
+
 .Tooltip:after {
   padding: 2px !important;
   font-size: inherit !important;

src/public/js/eventlineup.js

@@ -1,4 +1,42 @@
-/* Project specific Javascript goes here. */
+const lineupChangedEvent = new Event('bc:lineupChanged')
+
+document.querySelectorAll('.event-lineup').forEach(lineup=>{
+  lineup.addEventListener('bc:lineupChanged', (evt)=>{
+    console.log(`lineup changed`, evt.target)
+    const lineup = evt.target
+    colorPositions(lineup)
+    lineup.querySelectorAll(".lineup-slot").forEach((slot, i) => {
+      const lineup_segment = determineLineupSegment(slot)
+      if (lineup_segment != 'bench' && lineup_segment != 'out'){
+        slot.querySelector("input[name=sequence]").value = i;
+      } else {
+        slot.querySelector("input[name=sequence]").value = null;
+      }
+      updateFlagInput(slot)
+      updatePositionInput(slot)
+    });
+  }
+    )
+})
+
+document.querySelectorAll('[data-control=popup]').forEach(popup_control=>{
+  console.log(popup_control)
+  popup_control.addEventListener('click', (evt)=>{
+    const popup = evt.target.closest(".Popup")
+    const to_open = popup.querySelector(".Popup-toggle").dataset.open
+    popup.querySelectorAll(`[data-popup=${to_open}]`).forEach(popup_container => {
+      console.log(evt, evt.target, popup, popup_container)
+      popup_container.classList.toggle('is-open')
+      evt.stopPropagation()
+    })
+  })
+})
+
+document.querySelectorAll('.position-label-flags input[type="checkbox"]').forEach(flagCheckbox => {
+  const lineup = flagCheckbox.closest('.event-lineup')
+  flagCheckbox.addEventListener('click', ()=>{lineup.dispatchEvent(lineupChangedEvent)})
+})
+
 function onPositionSelectChange(elem) {
   elem.querySelectorAll("option").forEach((option) => {
     if (option.innerText.trim() == elem.value) {
@@ -7,113 +45,102 @@ function onPositionSelectChange(elem) {
       option.removeAttribute("selected");
     }
   });
-  colorPositions();
-  refreshLineup();
+  const lineup = elem.closest('.event-lineup')
+  lineup.dispatchEvent(lineupChangedEvent)
+  elem
 }
 
-function togglePopup(el) {
-  el.querySelector(".Popup-container").classList.toggle("is-open");
-}
+function colorPositions(lineup) {
+  const class_none = "u-colorNegative"
+  const class_good = "u-colorPositive"
+  const class_over = "u-colorHighlight"
 
-function colorPositions() {
-  for (bcLineup of document.querySelectorAll("[id^=event-lineup]")) {
-    selected_lineup_positions = Array.from(
-      bcLineup.querySelectorAll(".position-select-box option:checked")
-    ).map((el) => el.value);
-
-    for (position_status of bcLineup.querySelectorAll(".position-status")) {
-      for (class_name of ["u-colorNegative", "u-colorHighlight", "u-colorPositive"]) {
-        position_status.classList.remove(class_name);
+  lineup.querySelectorAll('.position-status').forEach(
+    position_status=>{ 
+      position_status.classList.remove(class_over, class_good, class_none);
+      const occurences = lineup.querySelectorAll(`.position-select-box option:checked[value="${position_status.dataset.value}"]`)
+      switch (occurences.length){
+        case 0:
+          position_status.classList.add(class_none)
+          break;
+        case 1:
+          position_status.classList.add(class_good)
+          break;
+        default:
+          position_status.classList.add(class_over)
+          break;
       }
-
-      occurrences = selected_lineup_positions.filter((s) => s == position_status.innerText).length;
-
-      if (occurrences == 1) {
-        position_status.classList.add("u-colorPositive");
-      } else if (occurrences > 1) {
-        position_status.classList.add("u-colorHighlight");
-      } else {
-        position_status.classList.add("u-colorNegative");
-      }
-    }
-  }
+    })
 }
 
 function initFlagsCheckboxes(){
-  Array.from(document.querySelectorAll("[id^=event-lineup]")).forEach((bcLineup) => {
-    Array.from(
-      bcLineup.querySelectorAll(
-        ".starting .lineup-slot, \
-        .position-only .lineup-slot, \
-        .bench .lineup-slot"
-      )
-    ).forEach((slot, i) => {
-      const flags = new Set(slot.querySelector("input[name*=flags]")?.value?.split(',')?.map(s=>s.trim())) || new Set()
-      if (flags.has('DHd')) {
-        console.log('dhd')
-        slot.querySelector('[name=flag-dhd]').checked = true;
-      } 
+  document.querySelectorAll(".lineup-slot").forEach(lineup_slot=>{
+    const possible_flags = ['DHd', 'DRd']
+    const flags_string = lineup_slot.querySelector("input[name=flags]")?.value
+    const flags = flagSetFromString(flags_string)
 
-      if (flags.has('DRd') ) {
-        slot.querySelector('[name=flag-drd]').checked = true;
+    possible_flags.forEach(flag=>{
+      if (flags.has(flag)){
+        lineup_slot.querySelector(`input[type=checkbox][name=${flag}]`).checked = true
       }
-    })}
-    )
+    })
+
+  })
 }
 
-function refreshLineup() {
-  Array.from(document.querySelectorAll("[id^=event-lineup]")).forEach((bcLineup) => {
-    Array.from(
-      bcLineup.querySelectorAll(
-        ".starting .lineup-slot, \
-        .position-only .lineup-slot, \
-        .bench .lineup-slot"
-      )
-    ).forEach((slot, i) => {
-      slot.querySelector("input[name*=sequence]").value = i;
-      selected_position = slot.querySelector(".position-select-box option:checked");
-      const flags = new Set(slot.querySelector("input[name*=flags]")?.value?.split(',')?.map(s=>s.trim())) || new Set()
-
-      if (slot.querySelector('[name=flag-dhd]').checked) {
-        flags.add('DHd')
-      } else {
-        flags.delete('DHd')
-      }
-
-      if (slot.querySelector('[name=flag-drd]').checked) {
-        flags.add('DRd') 
-      } else {
-        flags.delete('DRd')
-      }
-
-      if (selected_position && selected_position.text != "--") {
-        slot.querySelector("input[name*=label]").value = selected_position.text;
-      } else {
-        slot.querySelector("input[name*=label]").value = null;
-      }
-      if (slot.closest('.position-only')){
-        flags.add('PO');flags.delete('')
-      }
-      else {
-        flags.delete('PO');flags.delete('')
-      }
-      if (slot.closest('.bench')){
-        slot.querySelector("input[name*=sequence]").value = '';
-        slot.querySelector("input[name*=label]").value = '';
-      }
-      slot.querySelector("input[name*=flags]").value = Array.from(flags).join(",");
-    });
-  });
+const flagSetFromString = (s) => {
+  if (!s) {return new Set()}
+  const array = s.split(',').map(item=>item.trim())
+  return new Set(array)
 }
 
-function refreshFlags(){
+const flagSetFromSlot = (slot) => {
+  const inputs = slot.querySelectorAll('.position-label-flags input[type=checkbox]:checked')
+  const set = new Set()
+  inputs.forEach(i=>set.add(i.name))
+  return set
+}
 
+const flagSetToString = (set) => {
+  return Array.from(set).join(",");
+}
+
+const updateFlagInput = (slot) => {
+  const flags = flagSetFromSlot(slot)
+  const lineup_segment = slot.closest('.lineup-segment')
+  lineup_segment.classList.contains('position-only') ? flags.add('PO') : flags.delete('PO')
+  slot.querySelector('input[name="flags"]').value = flagSetToString(flags);
+}
+
+const updatePositionInput = (slot) => {
+  const selected_position = slot.querySelector(".position-select-box option:checked");
+  const lineup_segment = slot.closest('.lineup-segment')
+
+  if (selected_position && selected_position.text != "--" && !lineup_segment.classList.contains('bench')) {
+    slot.querySelector("input[name=label]").value = selected_position.text;
+  } else {
+    slot.querySelector("input[name=label]").value = null;
+  }
+}
+
+const determineLineupSegment = (slot) => {
+  const lineup_segments = ['starting', 'position-only', 'bench', 'out']
+  const lineup_segment = slot.closest('.lineup-segment')
+  const classList = Array.from(lineup_segment.classList)
+  const segments = classList.filter(c=>lineup_segments.includes(c))
+
+  if (segments.length == 1) {
+    return segments[0]
+  } else {
+    return ''
+  }
 }
 
 function openAvailabilityReminderModal (el, team_id, event_id) {
   const url = `/${team_id}/event/${event_id}/modal-confirm-availability-reminders/`
   const form = el.closest('form')
   const form_data = new FormData (form)
+
   fetch(url)
   .then((response) => {
     if (response.ok) {
@@ -155,11 +182,10 @@ function openAvailabilityReminderModal (el, team_id, event_id) {
   
 }
 
-function confirmModal(prompt, fn, options) {
+function confirmModal(el, prompt, fn, options) {
   const url = "/modal-confirm"
   const params = new URLSearchParams(prompt)
   url.search = params.toString()
-
   fetch(url+"?"+params.toString(), {method:"GET"})
   .then((response) => {
     if (response.ok) {
@@ -176,25 +202,64 @@ function confirmModal(prompt, fn, options) {
     const modal_node_accept = modal.querySelector('Button[data-confirm=yes]')
     const body = document.querySelector('body')
     body.appendChild(modal_node)
-    modal_node_accept.addEventListener("click", ()=>{fn(options);body.removeChild(modal_node)})
+    modal_node_accept.addEventListener("click", ()=>{fn(modal_node, options)})
   })
 }
 
-function submitClearLineup(options){
+const toggleShowAndHideLoading = (el) => {
+  console.log(el)
+  el.querySelectorAll('.hideOnLoading').forEach((element)=>{
+    element.classList.add('u-hidden')
+  })
+  el.querySelectorAll('.showOnLoading').forEach((element)=>{
+    element.classList.remove('u-hidden')
+  })
+}
+
+const completeLoad = (el, success) => {
+  el.querySelectorAll('.hideOnLoading, .showOnLoading, .showOnFailure, .showOnSuccess').forEach((element)=>{
+    element.classList.add('u-hidden')
+  })
+  if (success) {
+    el.querySelectorAll('.showOnSuccess').forEach((element) => {
+      element.classList.remove('u-hidden')
+    })
+  } else {
+    el.querySelectorAll('.showOnFailure').forEach((element) => {
+      element.classList.remove('u-hidden')
+    })
+  } 
+}
+
+function submitClearLineup(modal, options){
   console.log('clearing lineup...')
+  toggleShowAndHideLoading(modal)
   const {team_id, event_id, event_lineup_id} = options
   const url = `/${team_id}/event/${event_id}/lineup/${event_lineup_id}/delete`
   const form = document.querySelector(`#event-lineup-${event_id} form`);
   const data = new FormData(form);
   const memberIds = data.getAll('memberId')
-
   console.log(url)
   fetch(url, {method:"POST", body: JSON.stringify({memberIds, event_id}), headers: {"Content-Type": "application/json"}})
-  .finally(()=>{location.reload()});//refresh page
+  .then((response) => {
+    if (response.ok) {
+      completeLoad(modal, true);
+      return response.text();
+    } else {
+      completeLoad(modal, false);
+      return Promise.reject(response.text());
+    }
+  })
+  .finally(()=>{
+    setTimeout(function (){
+      location.reload()      
+    }, 500)
+  });//refresh page
 }
 
-function submitResetAvailabilities(options){
+function submitResetAvailabilities(modal, options){
   const {team_id, event_id} = options
+  toggleShowAndHideLoading(modal)
   const url = `/${team_id}/event/${event_id}/reset_availabilities`
   const form = document.querySelector(`#event-lineup-${event_id} form`);
   const data = new FormData(form);
@@ -202,7 +267,20 @@ function submitResetAvailabilities(options){
 
   console.log('submitting...', url)
   fetch(url, {method:"POST", body: JSON.stringify({memberIds, event_id}), headers: {"Content-Type": "application/json"}})
-  .finally(()=>{location.reload()});//refresh page
+  .then((response) => {
+    if (response.ok) {
+      completeLoad(modal, true);
+      return response.text();
+    } else {
+      completeLoad(modal, false);
+      return Promise.reject(response.text());
+    }
+  })
+  .finally(()=>{
+    setTimeout(function (){
+      location.reload()      
+    }, 500)
+  });//refresh page
 }
 
 function emailModal(el, url) {
@@ -241,11 +319,10 @@ function emailModal(el, url) {
         paste_data_images: true,
         statusbar:false})
       tinymce.remove();
-   
   });
 }
 
-async function onSubmit(form, event) {
+async function submitEventLineup(form, event) {
   event.preventDefault();
   console.log(event)
   teamsnap_icon = form.querySelector("#teamsnap-icon");
@@ -255,8 +332,7 @@ async function onSubmit(form, event) {
   data = new FormData(form);
   console.log(form)
   url = form.attributes.action.textContent;
-  teamsnap_icon.classList.add("u-hidden")
-  waiting_icon.classList.remove("u-hidden");
+  toggleShowAndHideLoading(form)
   await fetch(url, {
     method: "POST",
     body: data,
@@ -265,8 +341,8 @@ async function onSubmit(form, event) {
     }
   })
     .then((response) => {
-      waiting_icon.classList.add("u-hidden");
       if (response.ok) {
+
         return response.text();
       } else {
         return Promise.reject(response.text());
@@ -274,17 +350,13 @@ async function onSubmit(form, event) {
     })
     .then((text) => {
       event.submitter.blur()
-      waiting_icon.classList.add("u-hidden");
-      success_icon.classList.remove("u-hidden");
+      completeLoad(form, true)
       console.log(text);
-      // success_icon.querySelector("span.message").innerHTML = text;
     })
     .catch((error) => {
       event.submitter.blur()
-      waiting_icon.classList.add("u-hidden");
-      failure_icon.classList.remove("u-hidden");
+      completeLoad(form, false)
       console.log(error);
-      // success_icon.querySelector("span.message").innerHTML = error;
     })
     .finally(()=>{location.reload()});//refresh page
   setTimeout(() => {
@@ -356,30 +428,44 @@ async function copyEmailTable (element) {
   window.getSelection().removeAllRanges();
 }
 
-function toggleChildSlots (element) {
-  console.log(element);
-  console.log(element.closest(".slot-set"))
-  for (lineup_slot of document.querySelectorAll("[id^=lineup-out] .lineup-slot")) {
-    console.log(lineup_slot)
-    const cells = lineup_slot.querySelectorAll('.Panel-cell:has(.sequence), .Panel-cell:has(.drag-handle), .Panel-cell:has(.position-select-box), button:has(+.position-label-flags)')
-    Array.from(cells).forEach(cell=>{
-      cell.classList.toggle('u-hidden')
-    })
+moveToLineupSegment = (slot, segment_name) => {
+  if (!slot.classList.contains('lineup-slot')) {
+    slot = slot.closest('.lineup-slot')
+    if (!slot) {return}
   }
+
+  const current_lineup_segment = slot.closest('.lineup-segment')
+
+  if (current_lineup_segment.classList.contains(segment_name)) {
+    return
+  }
+
+  const lineup = slot.closest('.event-lineup')
+  const newParent = lineup.querySelector(`.lineup-segment.${segment_name} .slot-set`)
+  newParent.append(slot)
 }
 
-
 function initSlots () {
-  const slots = Array.from(document.querySelectorAll('.lineup-slot'))
-  slots.forEach(slot=>{
-    if (slot.dataset.initialSlotset) {
-      const parent = document.querySelector(`#${slot.dataset.initialSlotset} .slot-set`)
-      parent.appendChild(slot)
-      slot.removeAttribute('data-initial-slotset')
+  document.querySelectorAll('.lineup-slot').forEach(slot=>{
+    if (slot.dataset.initialLineupSegment) {
+      moveToLineupSegment(slot, slot.dataset.initialLineupSegment)
+      slot.removeAttribute('data-initial-lineup-segment')
     }
   })
 }
 
+addToStarting = (el) => {
+  const slot = el.closest('.lineup-slot')
+
+  this.blur()
+}
+
+removeToBench = (el) => {
+  const slot = el.closest('.lineup-slot')
+
+  this.blue()
+}
+
 function insertLineup(direction, teamId, eventId, element) {
   const currentUrl = window.location.href;
   let search_params
@@ -408,7 +494,7 @@ function insertLineup(direction, teamId, eventId, element) {
     .then((html) =>{
       const parser = new DOMParser();
       const new_lineup_doc = parser.parseFromString(html, 'text/html')
-      const new_lineup_doc_node = new_lineup_doc.firstElementChild.querySelector('[id*=event-lineup]')
+      const new_lineup_doc_node = new_lineup_doc.firstElementChild.querySelector('.event-lineup')
       const main = document.querySelector("main")
       const new_csrf_token = new_lineup_doc.querySelector('form input[name=csrfToken]').value
 
@@ -417,13 +503,13 @@ function insertLineup(direction, teamId, eventId, element) {
       main.classList.remove(...main.classList)
       main.classList.add('scroll-horizontal', 'u-spaceSidesSm', 'u-flex')
 
-      Array.from(document.querySelectorAll("[id^=event-lineup]")).forEach((bcLineup) => {
+      Array.from(document.querySelectorAll(".event-lineup")).forEach((bcLineup) => {
         // main.classList.remove('.u-max1200', 'u-flexExpandSides')
         bcLineup.classList.remove('u-spaceSidesNone', 'u-sm-spaceSidesAuto')
       }
       )
 
-      Array.from(document.querySelectorAll("[id^=event-lineup] .Panel")).forEach((bcLineupPanel) => {
+      Array.from(document.querySelectorAll(".event-lineup .Panel")).forEach((bcLineupPanel) => {
         bcLineupPanel.classList.remove('Panel--full')
       })
       for (input of document.querySelectorAll("form input[name=csrfToken]")){
@@ -436,11 +522,10 @@ function insertLineup(direction, teamId, eventId, element) {
 }
 
 function initPage (){
-  colorPositions();
   initSlots();
   initFlagsCheckboxes();
-	refreshLineup();
-  for (bcLineup of document.querySelectorAll("[id^=event-lineup]")) {
+  for (bcLineup of document.querySelectorAll(".event-lineup")) {
+    bcLineup.dispatchEvent(lineupChangedEvent)
     options = {
       animation: 150,
       handle: ".Panel-cell:has(.drag-handle), .Panel-cell:has(.sequence)",
@@ -451,32 +536,24 @@ function initPage (){
         pull: [bcLineup.id],
       },
       onAdd: function (/**Event*/ evt) {
-        console.log("added to lineup");
-        // Add to Lineup
-        var itemEl = evt.item; // dragged HTMLElement
-  
-        refreshLineup();
+        bcLineup.dispatchEvent(lineupChangedEvent)
       },
       onUpdate: function (/**Event*/ evt) {
-        console.log("update to lineup");
-        // var itemEl = evt.item; // dragged HTMLElement
-        // refresh_lineup_order(itemEl);
-        refreshLineup();
+        bcLineup.dispatchEvent(lineupChangedEvent)
       },
     };
-    new Sortable.create(bcLineup.querySelector("[id^=lineup-starting] .slot-set"), options);
-    new Sortable.create(bcLineup.querySelector("[id^=lineup-positiononly] .slot-set"), options);
-    options["sort"] = false;
-    new Sortable.create(bcLineup.querySelector("[id^=lineup-bench] .slot-set"), options);
-    new Sortable.create(bcLineup.querySelector("[id^=lineup-out] .slot-set"), {...options, group:{...options.group, put:[]}});
+    new Sortable.create(bcLineup.querySelector(".lineup-segment.starting .slot-set"), options);
+    new Sortable.create(bcLineup.querySelector(".lineup-segment.position-only .slot-set"), options);
+    new Sortable.create(bcLineup.querySelector(".lineup-segment.bench .slot-set"), {...options, sort:false});
+    new Sortable.create(bcLineup.querySelector(".lineup-segment.out .slot-set"), {...options, sort:false, group:{...options.group, put:[]}});
   }
   
-  for (lineup_slot of document.querySelectorAll("[id^=lineup-out] .lineup-slot")) {
-    const cells = lineup_slot.querySelectorAll('.Panel-cell:has(.sequence), .Panel-cell:has(.drag-handle), .Panel-cell:has(.position-select-box), button:has(+.position-label-flags)')
-    Array.from(cells).forEach(cell=>{
-      cell.classList.add('u-hidden')
-    })
-  }
+  // for (lineup_slot of document.querySelectorAll(".lineup-segment.out .lineup-slot")) {
+  //   const cells = lineup_slot.querySelectorAll('.Panel-cell:has(.sequence), .Panel-cell:has(.drag-handle), .Panel-cell:has(.position-select-box), button:has(+.position-label-flags)')
+  //   Array.from(cells).forEach(cell=>{
+  //     cell.classList.add('u-hidden')
+  //   })
+  // }
 }
 
 function mailToLink(el, protocol) {

src/scss/application.scss

@@ -189,7 +189,7 @@ a.Panel-row {
   align-items: center;
 }
 
-div[id^="event-lineup"] {
+div.event-lineup {
   max-width: 576px;
   counter-reset: lineup-sequence-counter 0;
   margin-left: 8px;
@@ -289,17 +289,23 @@ li .availability-status-code- {
   
 }
 
-div[id^="event-lineup"] .Panel {
-  &.position-only .Panel-cell:has(.sequence), &.bench .Panel-cell:has(.sequence),  &.out .Panel-cell:has(.sequence){
-    display: none;
-  }
-  
-  &.out {
-    .Panel-cell {
-      &:has(.sequence), .drag-handle, .SelectBox {
-        // display: none;
+div.event-lineup {
+  .lineup-segment {
+    &:has(input.Toggle-input:not(:checked)) {
+      &.out {
+        .Panel-cell:has(.SelectBox), 
+        .Panel-cell:has(.drag-handle), 
+        button:has(+.position-label-flags), 
+        {
+          display: none;
+        }
       }
     }
+    &.bench, &.position-only, &.out {
+    .Panel-cell:has(.sequence) {
+      display: none;
+    }
+  }
   }
 }
   

src/views/eventlineup/edit.hbs

@@ -1,81 +1,70 @@
-<div class="u-spaceSidesNone u-sm-spaceSidesAuto" id="event-lineup-{{event.id}}" data-event-lineup-id="{{event_lineup.id}}" data-event-id="{{event.id}}">
-<form onsubmit="onSubmit(this,event)" action="/{{team.id}}/event/{{event.id}}/lineup/{{event_lineup.id}}">
+<div class="u-spaceSidesNone u-sm-spaceSidesAuto event-lineup" id="event-lineup-{{event.id}}" data-event-lineup-id="{{event_lineup.id}}" data-event-id="{{event.id}}">
+<form onsubmit="submitEventLineup(this,event)" action="/{{team.id}}/event/{{event.id}}/lineup/{{event_lineup.id}}">
   <input type="hidden" name="event_lineup_id" value="{{event_lineup.id}}">
   {{!-- <input type="hidden" name="_csrf" value="{{csrfToken}}"> --}}
   <input type="hidden" name="csrfToken" value="{{csrfToken}}">
   <div class="Panel Panel--full">
     <div class="Panel-header u-padEndsSm">
       <h3 style="flex: 1 1 0%;">{{event.formattedTitle}}</h3>
-      <div class="ButtonGroup">
-        <button class="Button Button--orange" type="submit" formmethod="post">
-          <div>
-            <span id="teamsnap-icon">{{{embeddedSvgFromPath "/media/teamsnap_star.svg"}}}</span>
-            <span id="waiting-icon" class="u-hidden">{{{embeddedSvgFromPath "/teamsnap-ui/assets/icons/loader.svg" "Icon--loader"}}}</span>
-            <span id="success-icon" class="u-hidden">{{{embeddedSvgFromPath "/teamsnap-ui/assets/icons/check.svg"}}}</span>
-            <span id="failure-icon" class="u-hidden">{{{embeddedSvgFromPath "/teamsnap-ui/assets/icons/dismiss.svg"}}}</span>
-            Save
-            </div>
-        </button>
-        <div class="Button Button--orange .u-padSidesXs Popup" onclick="togglePopup(this)">
-          {{{embeddedSvgFromPath "/teamsnap-ui/assets/icons/caret-down.svg"}}}
-          <div class="Popup-container Popup-container--down Popup-container--right" style="width: 200px">
-            <div class="Popup-content u-textDecorationNone">
-              <a class="u-padEndsSm u-padSidesMd u-textDecorationNone" href="javascript:void(0)" onclick="emailModal(this, '{{event_lineup.id}}/email')">
-                  {{{embeddedSvgFromPath "/bootstrap-icons/envelope.svg"}}}
-                  <span>Generate Email</span>
-              </a>
-              <hr class="Divider u-spaceEndsNone">
-              <a class="u-padEndsSm u-padSidesMd u-textDecorationNone" href="/{{team.id}}/event/{{event.id}}/sheet">
-                  <span>{{{embeddedSvgFromPath "/bootstrap-icons/file-earmark.svg"}}}</span> 
-                  <span class="u-hidden u-xs-inline">Game Sheet</span> 
-              </a>
-              <hr class="Divider u-spaceEndsNone">
-              <a class="u-padEndsSm u-padSidesMd u-textDecorationNone" href="javascript:void(0)" onclick="insertLineup(1, {{team.id}}, {{event.id}}, this)">
-                  {{{embeddedSvgFromPath "/bootstrap-icons/caret-right.svg"}}}
-                  <span>Insert next lineup</span>
-              </a>
-              <hr class="Divider u-spaceEndsNone">
-              <a class="u-padEndsSm u-padSidesMd u-textDecorationNone" href="javascript:void(0)" onclick="insertLineup(-1, {{team.id}}, {{event.id}}, this)">
-                  {{{embeddedSvgFromPath "/bootstrap-icons/caret-left.svg"}}}
-                  <span>Insert previous lineup</span>
-              </a>
-              <hr class="Divider u-spaceEndsNone">
-              <a class="u-padEndsSm u-padSidesMd u-textDecorationNone" href="javascript:void(0)" onclick="openAvailabilityReminderModal(this, {{team.id}}, {{event.id}})">
-                  {{{embeddedSvgFromPath "/teamsnap-ui/assets/icons/send.svg"}}}
-                  <span>Availability Reminders</span>
-              </a>
-              <hr class="Divider u-spaceEndsNone">
-              <a class="u-padEndsSm u-padSidesMd u-textDecorationNone" href="javascript:void(0)" onclick="confirmModal({title:'Reset Availabilities',body:'Are sure you want to reset availabilities?'}, submitResetAvailabilities, {team_id:{{team.id}}, event_id:{{event.id}} })";>
-                  {{{embeddedSvgFromPath "/teamsnap-ui/assets/icons/refresh.svg"}}}
-                  <span>Reset All Availabilities</span>
-              </a>
-              <hr class="Divider u-spaceEndsNone">
-              <a class="u-padEndsSm u-padSidesMd u-textDecorationNone" href="javascript:void(0)" onclick="confirmModal({title:'Clear Lineup',body:'Are sure you want to clear lineup?'}, submitClearLineup, {team_id:{{team.id}}, event_id:{{event.id}}, event_lineup_id:{{event_lineup.id}} })">
-                  {{{embeddedSvgFromPath "/teamsnap-ui/assets/icons/trash.svg"}}}
-                  <span>Clear Lineup</span>
-              </a>
-              <div class="u-hidden">
+      <div class="Popup">
+        <div class="ButtonGroup">
+          <button class="Button Button--orange" type="submit" formmethod="post">
+            <div>
+              <span id="teamsnap-icon" class="hideOnLoading">{{{embeddedSvgFromPath "/media/teamsnap_star.svg"}}}</span>
+              <span id="waiting-icon" class="u-hidden showOnLoading">{{{embeddedSvgFromPath "/teamsnap-ui/assets/icons/loader.svg" "Icon--loader"}}}</span>
+              <span id="success-icon" class="u-hidden showOnSuccess">{{{embeddedSvgFromPath "/teamsnap-ui/assets/icons/check.svg"}}}</span>
+              <span id="failure-icon" class="u-hidden showOnFailure">{{{embeddedSvgFromPath "/teamsnap-ui/assets/icons/dismiss.svg"}}}</span>
+              Save
+              </div>
+          </button>
+          <div class="Button Button--orange .u-padSidesXs Popup-toggle" data-control="popup" data-open="event-lineup-more-actions-{{event_lineup.id}}">
+            {{{embeddedSvgFromPath "/teamsnap-ui/assets/icons/caret-down.svg"}}}
+            <div class="Popup-container Popup-container--down Popup-container--right" style="width: 200px" data-popup="event-lineup-more-actions-{{event_lineup.id}}">
+              <div class="Popup-content u-textDecorationNone">
+                <a class="u-padEndsSm u-padSidesMd u-textDecorationNone" href="javascript:void(0)" onclick="emailModal(this, '{{event_lineup.id}}/email')">
+                    {{{embeddedSvgFromPath "/bootstrap-icons/envelope.svg"}}}
+                    <span>Generate Email</span>
+                </a>
                 <hr class="Divider u-spaceEndsNone">
-                <span class="u-padEndsSm u-padSidesMd u-textDecorationNone" href="javascript:void(0)" onclick="console.log('not implemented yet')">
+                <a class="u-padEndsSm u-padSidesMd u-textDecorationNone" href="/{{team.id}}/event/{{event.id}}/sheet">
+                    <span>{{{embeddedSvgFromPath "/bootstrap-icons/file-earmark.svg"}}}</span>
+                    <span class="u-hidden u-xs-inline">Game Sheet</span>
+                </a>
+                <hr class="Divider u-spaceEndsNone">
+                <a class="u-padEndsSm u-padSidesMd u-textDecorationNone" href="javascript:void(0)" onclick="insertLineup(1, {{team.id}}, {{event.id}}, this)">
+                    {{{embeddedSvgFromPath "/bootstrap-icons/caret-right.svg"}}}
+                    <span>Insert next lineup</span>
+                </a>
+                <hr class="Divider u-spaceEndsNone">
+                <a class="u-padEndsSm u-padSidesMd u-textDecorationNone" href="javascript:void(0)" onclick="insertLineup(-1, {{team.id}}, {{event.id}}, this)">
+                    {{{embeddedSvgFromPath "/bootstrap-icons/caret-left.svg"}}}
+                    <span>Insert previous lineup</span>
+                </a>
+                <hr class="Divider u-spaceEndsNone">
+                <a class="u-padEndsSm u-padSidesMd u-textDecorationNone" href="javascript:void(0)" onclick="openAvailabilityReminderModal(this, {{team.id}}, {{event.id}})">
                     {{{embeddedSvgFromPath "/teamsnap-ui/assets/icons/send.svg"}}}
                     <span>Availability Reminders</span>
-                </span>
+                </a>
                 <hr class="Divider u-spaceEndsNone">
-                <span class="u-padEndsSm u-padSidesMd u-textDecorationNone" href="javascript:void(0)" onclick="console.log('not implemented yet')">
+                <a class="u-padEndsSm u-padSidesMd u-textDecorationNone" href="javascript:void(0)" onclick="confirmModal(this, {title:'Reset Availabilities',body:'Are sure you want to reset availabilities?'}, submitResetAvailabilities, {team_id:{{team.id}}, event_id:{{event.id}} })";>
+                    {{{embeddedSvgFromPath "/teamsnap-ui/assets/icons/refresh.svg"}}}
                     <span>Reset All Availabilities</span>
-                </span>
+                </a>
                 <hr class="Divider u-spaceEndsNone">
-                <span class="u-padEndsSm u-padSidesMd u-textDecorationNone" href="javascript:void(0)" onclick="console.log('not implemented yet')">
+                <a class="u-padEndsSm u-padSidesMd u-textDecorationNone" href="javascript:void(0)" onclick="confirmModal(this, {title:'Clear Lineup',body:'Are sure you want to clear lineup?'}, submitClearLineup, {team_id:{{team.id}}, event_id:{{event.id}}, event_lineup_id:{{event_lineup.id}} })">
+                    {{{embeddedSvgFromPath "/teamsnap-ui/assets/icons/trash.svg"}}}
                     <span>Clear Lineup</span>
-                </span>
-                <hr class="Divider u-spaceEndsNone">
-                <span class="u-padEndsSm u-padSidesMd u-textDecorationNone" href="javascript:void(0)" onclick="console.log('not implemented yet')">
-                    <span>Publish</span>
-                </span>
+                </a>
+                <div class="u-hidden">
+                  <hr class="Divider u-spaceEndsNone">
+                  <span class="u-padEndsSm u-padSidesMd u-textDecorationNone" href="javascript:void(0)" onclick="console.log('not implemented yet')">
+                      <span>Publish</span>
+                  </span>
+                </div>
               </div>
             </div>
           </div>
-          </div>
+        </div>
       </div>
     </div>
     <div class=" Panel-body u-padEndsSm">
@@ -88,7 +77,7 @@
         </div>
     </div>
   </div>
-  <div id="lineup-starting-{{event.id}}" class="Panel u-maxWidthSm starting Panel--fullWidthMobile Panel--full">
+  <div class="Panel u-maxWidthSm lineup-segment starting Panel--fullWidthMobile Panel--full">
     <div class="Panel-body">
       <div class="Panel-row Panel-title u-padXs">
         <i>{{{embeddedSvgFromPath "/bootstrap-icons/clipboard-check.svg"}}}</i>
@@ -96,7 +85,7 @@
       </div>
       <div class=" Panel-row Grid Grid--fit u-textBold u-textCenter u-padXs">
         {{#each (positions)}}
-          <div class="Grid-cell position-status">{{this}}</div>
+          <div class="Grid-cell position-status" data-value="{{this}}">{{this}}</div>
         {{/each}}
       </div>
       <div class="slot-set">
@@ -104,7 +93,7 @@
       </div>
     </div>
   </div>
-  <div id="lineup-positiononly-{{event.id}}" class="Panel u-maxWidthSm position-only Panel--full">
+  <div class="Panel u-maxWidthSm lineup-segment position-only Panel--full">
     <div class="Panel-row Panel-title u-padXs">
         {{{embeddedSvgFromPath "/bootstrap-icons/clipboard-check.svg"}}}
         <span>Position Only</span>
@@ -113,7 +102,7 @@
         
       </div>
   </div>
-  <div id="lineup-bench-{{event.id}}" class="Panel u-maxWidthSm bench Panel--full">
+  <div class="Panel u-maxWidthSm lineup-segment bench Panel--full">
     <div class="Panel-row Panel-title u-padXs">
         {{{embeddedSvgFromPath "/bootstrap-icons/clipboard-minus.svg"}}}
         <span>Bench</span>
@@ -124,12 +113,12 @@
       {{/loadSlots}}
     </div>
   </div>
-  <div id="lineup-out-{{event.id}}" class="Panel u-maxWidthSm out Panel--full">
+  <div class="Panel u-maxWidthSm lineup-segment out Panel--full">
     <div class="Panel-row Panel-title u-padXs u-flex">
         <div><span style="flex: 1 1 0%;">{{{embeddedSvgFromPath "/bootstrap-icons/clipboard-x.svg"}}}Out</span></div>
         <div class="u-flexGrow1"></div>
         <div class="Toggle">
-          <input class="Toggle-input" type="checkbox" id="enable-slots" onclick="toggleChildSlots(this);">
+          <input class="Toggle-input" type="checkbox" id="enable-slots">
           <label class="Toggle-label" for="enable-slots"></label>
         </div>
       </div>

src/views/eventlineup/partials/slot.hbs

@@ -1,4 +1,4 @@
-<div class="Panel-expandableRow lineup-slot" data-initial-slotset="{{initial_slotset}}">
+<div class="Panel-expandableRow lineup-slot" data-initial-lineup-segment="{{initial_lineup_segment}}">
   <input type="hidden" name="label" value="{{eventLineupEntry.label}}">
   <input type="hidden" name="flags" value="{{flagsString eventLineupEntry.flags}}">
 	<input type="hidden" name="sequence" value="{{eventLineupEntry.sequence}}">
@@ -23,26 +23,27 @@
       >
         {{#if availability}}
           {{#with availability}}
-          <button class="Popup-toggle Button Button--smallSquare {{avail_status_code_class statusCode}}" 
-            type="button" 
-            data-control="popup" 
-            data-open="availablility-popup-{{memberId}}-{{eventId}}"
-            onclick="this.closest('div').querySelector('.Popup-container').classList.toggle('is-open')"
-            >
-          {{#if notes}}{{{embeddedSvgFromPath "/bootstrap-icons/asterisk.svg"}}}{{else}}{{{avail_status_code_icon statusCode}}}{{/if}}
-          </button>
-          <div class="Popup-container Popup-container--left" data-popup="availablility-popup-{{memberId}}-{{eventId}}">
-            <div class="Popup-content u-padSm u-textCenter">
-              <h3 class="u-spaceBottomSm">Availability</h3>
-              {{#if notes}}
-              <p class="u-textLeft">“ <i>{{notes}}</i> ”</p>
-              {{else}}
-              <p class="u-textLeft">No notes.</p>
-              {{/if}}
-              <button type="button" class="Button u-spaceTopSm" onclick="sendAvailabilityReminder(this, {{eventId}}, ['{{memberId}}'], {{csrfToken}})">
-                {{{embeddedSvgFromPath "/teamsnap-ui/assets/icons/send.svg"}}}
-                <span>Send Reminder</span>
-              </button>
+          <div class="Popup">
+            <button class="Popup-toggle Button Button--smallSquare {{avail_status_code_class statusCode}}"
+              type="button"
+              data-control="popup"
+              data-open="availablility-popup-{{eventId}}-{{memberId}}"
+              >
+            {{#if notes}}{{{embeddedSvgFromPath "/bootstrap-icons/asterisk.svg"}}}{{else}}{{{avail_status_code_icon statusCode}}}{{/if}}
+            </button>
+            <div class="Popup-container Popup-container--left" data-popup="availablility-popup-{{eventId}}-{{memberId}}">
+              <div class="Popup-content u-padSm u-textCenter">
+                <h3 class="u-spaceBottomSm">Availability</h3>
+                {{#if notes}}
+                <p class="u-textLeft">“ <i>{{notes}}</i> ”</p>
+                {{else}}
+                <p class="u-textLeft">No notes.</p>
+                {{/if}}
+                <button type="button" class="Button u-spaceTopSm" onclick="sendAvailabilityReminder(this, {{eventId}}, ['{{memberId}}'], {{csrfToken}})">
+                  {{{embeddedSvgFromPath "/teamsnap-ui/assets/icons/send.svg"}}}
+                  <span>Send Reminder</span>
+                </button>
+              </div>
             </div>
           </div>
           {{/with}}
@@ -68,11 +69,11 @@
         <div class="Popup-container Popup-container--rightHang position-label-flags">
           <div class="Popup-content u-padSm u-textCenter">
             <div class="Checkbox Checkbox--inline">
-              <input class="Checkbox-input" type="checkbox" name="flag-drd" id="flag-drd-{{member.id}}-{{eventLineupEntry.id}}" onclick="refreshLineup()">
+              <input class="Checkbox-input" type="checkbox" name="DRd" id="flag-drd-{{member.id}}-{{eventLineupEntry.id}}">
               <label class="Checkbox-label" for="flag-drd-{{member.id}}-{{eventLineupEntry.id}}">DR<small>d</small></label>
             </div>
             <div class="Checkbox Checkbox--inline">
-              <input class="Checkbox-input" type="checkbox" name="flag-dhd" id="flag-dhd-{{member.id}}-{{eventLineupEntry.id}}" onclick="refreshLineup()">
+              <input class="Checkbox-input" type="checkbox" name="DHd" id="flag-dhd-{{member.id}}-{{eventLineupEntry.id}}">
               <label class="Checkbox-label" for="flag-dhd-{{member.id}}-{{eventLineupEntry.id}}">DH<small>d</small></label>
             </div>
           </div>