simplifications

compile css

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) {