eventlineup enhancments (availability notes, reminders, flags popup)

src/public/js/eventlineup.js

@@ -50,6 +50,7 @@ function initFlagsCheckboxes(){
     ).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;
       } 
 
@@ -509,14 +510,14 @@ function toggleChildSlots (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), div.position-label-flags ')
+    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')
     })
   }
 }
 
-async function submitEmail () {
+async function copyEmailTable (element) {
   // range=document.createRange();
   // window.getSelection().removeAllRanges();
   // // range.selectNode(document.querySelector('.Modal').querySelector('.Modal-body')); 
@@ -558,16 +559,25 @@ async function submitEmail () {
     margin: 0;
   }</style>
   `
-  html_content = emailStyle+tinymce.activeEditor.getContent()
-  console.log(html_content)
+  // html_content = emailStyle+tinymce.activeEditor.getContent()
+  // console.log(html_content)
+  const table = element.closest('form').querySelector('.lineup-table table')
 
-  navigator.clipboard.write(
-    [new ClipboardItem(
-      {
-        'text/plain': new Blob([tinymce.activeEditor.getContent({format: "text"})], {type: 'text/plain'}),
-        'text/html': new Blob([html_content], {type: 'text/html'})
-      })
-    ])
+  // navigator.clipboard.write(
+  //   [new ClipboardItem(
+  //     {
+  //       // 'text/plain': new Blob([tinymce.activeEditor.getContent({format: "text"})], {type: 'text/plain'}),
+  //       'text/plain': new Blob([table.innerText], {type: 'text/plain'}),
+  //       'text/html': new Blob([emailStyle+table.outerHTML], {type: 'text/html'})
+  //     })
+  //   ])
+  
+  window.getSelection().removeAllRanges();
+  var range = document.createRange();
+  range.selectNode(table);
+  window.getSelection().addRange(range);
+  document.execCommand("copy");
+  window.getSelection().removeAllRanges();
 }
 
 function insertLineup(direction, teamId, eventId, element) {
@@ -657,11 +667,77 @@ function initPage (){
   }
   
   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), div.position-label-flags')
+    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='mailto') {
+  console.log(el)
+  console.log(el.dataset)
+  const {to, bcc, subject} = el.dataset
+  const params = new URLSearchParams({
+    bcc, subject: encodeURIComponent(subject),
+  })
+  const url = `${protocol}:${to}?${params}`
+  console.log(url)
+  // location.href=`mailto:${to}${params}`
+  const windowRef = window.open(url, '_blank');
+  windowRef.focus();
+}
+
+function sparkMailToLink(el) {
+  const protocol = 'readdle-spark'
+  const {to, bcc, subject} = el.dataset
+  const url = `${protocol}://compose?recipient=${to}&bcc=${bcc}&subject=${encodeURIComponent(subject)}`
+  console.log(url)
+  // location.href=`mailto:${to}${params}`
+  const windowRef = window.open(url, '_blank');
+  windowRef.focus();
+}
+
+function sendAvailabilityReminder(element, eventId, memberIds, csrf_token) {
+  const icon = element.querySelector('svg')
+  const button_text = element.querySelector('span')
+  icon.classList.toggle('u-hidden')
+  button_text.classList.toggle('u-hidden')
+  const loader = '<span class="PulseAnimation"><span class="PulseAnimation-dot"></span><span class="PulseAnimation-dot"></span><span class="PulseAnimation-dot"></span></span>'
+  const loader_node = new DOMParser().parseFromString(loader, "text/html").firstChild.querySelector('span');
+  element.appendChild(loader_node)
+  element.blur();
+
+  const data = new FormData();
+  const url = "../availability_reminders"
+  data.append('eventId', eventId)
+  for (var i = 0; i < memberIds.length; i++) {
+    data.append('memberIds[]', memberIds[i]);
+  }
+  console.log(data)
+
+  fetch(url, {
+    method: "POST",
+    body: data,
+    headers: {
+      'CSRF-Token': csrf_token
+    }
+  })
+    .then((response) => {
+      if (response.ok) {
+        console.log(response)
+        return response.text();
+      } else {
+        return Promise.reject(response.text());
+      }
+    })
+    .finally(()=>{
+      loader_node.remove()
+      icon.classList.toggle('u-hidden')
+      button_text.classList.toggle('u-hidden')
+    })
+
+  console.log(element, eventId, memberIds) 
+}
+
 document.addEventListener('DOMContentLoaded', initPage)