Mom's spaghetti

function solve() {
  // get sections
  const userSect = document.querySelector('.user-view');
  const adminSect = document.querySelector('.admin-view');

  // get training-modules div
  const trainingModulesDiv = userSect.querySelector('.modules');

  // get form
  const adminForm = adminSect.querySelector('form');
  // get addBtn
  const addBtn = adminForm.querySelector('button');

  // get form inputs
  const inputs = Array.from(adminForm.querySelectorAll('input'));
  // get select
  const select = adminForm.querySelector('select');

  // listen for clicks on addBtn
  addBtn.addEventListener('click', addModule);

  // Helper functions
  function createEle(type, text, cl) {
    const ele = document.createElement(type);

    if (text) {
      ele.textContent = text;
    }

    if (cl) {
      ele.classList.add(cl);
    }

    return ele;
  }

  // Declarations
  function addModule(e) {
    // when addBtn is clicked
    e.preventDefault();

    // map values
    const lecture = {
      name: inputs[0].value,
      date: inputs[1].value,
      module: select.value,
    };

    // validate inputs: empty or default values
    const notValid = () =>
      lecture.name == '' ||
      lecture.date == '' ||
      lecture.module === 'Select module';

    if (notValid()) {
      return;
    }

    // extract date
    let [eDate, eTime] = lecture.date.split('T');
    eDate = eDate.split('-').join('/');

    // create elements
    const moduleDiv = createEle('div', '', 'module');
    const moduleTitle = createEle(
      'h3',
      `${lecture.module.toUpperCase()}-MODULE`
    );

    const ul = createEle('ul');
    const flexLi = createEle('li', '', 'flex');
    const lectureTitle = createEle(
      'h4',
      `${lecture.name} - ${eDate} - ${eTime}`
    );
    const deleteBtn = createEle('button', 'Del', 'red');

    // structure elements
    flexLi.appendChild(lectureTitle);
    flexLi.appendChild(deleteBtn);
    ul.appendChild(flexLi);

    let currentModule = moduleTitle.textContent.split('-')[0];
    moduleDiv.setAttribute('data-module', currentModule);

    // iterate over all existing modules
    let existingModule = false;
    let allModules = Array.from(trainingModulesDiv.children);

    allModules.forEach((module) => {
      let moduleName = module.attributes['data-module'].value;

      if (moduleName == currentModule) {
        let currentUl = module.querySelector('ul');
        currentUl.appendChild(flexLi);

        let sortedLis = sortListItems(currentUl);
        const ul = document.createElement('ul');

        sortedLis.forEach((li) => {
          ul.appendChild(li);
        });

        currentUl.parentNode.replaceChild(ul, currentUl);
        existingModule = true;
      }
    });

    if (!existingModule) {
      moduleDiv.appendChild(moduleTitle);
      moduleDiv.appendChild(ul);
      trainingModulesDiv.appendChild(moduleDiv);
    }

    // append elements

    // click on delete
    deleteBtn.addEventListener('click', (e) => {
      let btn = e.currentTarget;
      let listItem = btn.parentElement;
      let ulEl = listItem.parentElement;
      let moduleDiv = ulEl.parentElement;

      listItem.remove();
      let listItemsArr = Array.from(ulEl.querySelectorAll('li'));

      if (listItemsArr.length == 0) {
        moduleDiv.remove();
      }
    });
  }

  function sortListItems(ulElement) {
    const listItemsArr = Array.from(ulElement.querySelectorAll('li'));

    listItemsArr.sort((a, b) => {
      let [fuseless, fDate, fTime] = a.firstChild.innerText.split(' - ');
      let [suseless, sDate, sTime] = b.firstChild.innerText.split(' - ');

      let firstDateString = `${fDate.split('/').join('-')}T${fTime}`;
      let secondDateString = `${sDate.split('/').join('-')}T${sTime}`;

      return new Date(firstDateString) - new Date(secondDateString);
    });

    return listItemsArr;
  }
}

// function test() {
//   let elements = {
//     form: document.getElementsByTagName('form')[0],
//     name: document.querySelector('input[name="lecture-name"]'),
//     date: document.querySelector('input[name="lecture-date"]'),
//     module: document.querySelector('select[name="lecture-module"]'),
//     addBtn: document.querySelector('form button'),
//     modulesDiv: document.querySelector('.modules'),
//     moduleList: () => Array.from(document.querySelectorAll('.module')),
//     listItems: () => Array.from(document.querySelectorAll('.flex')),
//   };

//   console.log(Array.from(document.querySelectorAll('.module')));
//   debugger;

//   elements.name.value = 'DOM';
//   elements.date.value = '2020-09-28T18:00';
//   elements.module.value = 'Advanced';
//   console.log(Array.from(document.querySelectorAll('.module')));

//   elements.addBtn.click();
//   console.log(Array.from(document.querySelectorAll('.module')));

//   // assert.equal(elements.moduleList()[0].children[0].textContent, 'ADVANCED-MODULE', 'Module name incorrect');

//   elements.name.value = 'Arrays';
//   elements.date.value = '2020-09-17T18:00';
//   elements.module.value = 'Advanced';

//   debugger;
//   elements.addBtn.click();
//   console.log(Array.from(document.querySelectorAll('.module')));
//   console.log('should be 1: ', elements.moduleList().length);
// }
// test();

// assert.equal(elements.moduleList().length, 1, 'Incorrect amount of modules');
// assert.equal(elements.listItems()[0].children[0].textContent, 'Arrays - 2020/09/17 - 18:00', 'Incorrect lecture appended');

elements.name.value = 'Arrays';
elements.date.value = '2020-09-30T18:30';
elements.module.value = 'Fundamentals';

elements.addBtn.click();

// assert.equal(elements.listItems()[0].children[1].className, 'red', 'Incorrect className');

// function solve() {
//   const lectureNameInput = document.querySelector('input[name="lecture-name"]');
//   const lectureDateInput = document.querySelector('input[name="lecture-date"]');
//   const lectureModuleSelect = document.querySelector(
//     'select[name="lecture-module"]'
//   );
//   const addBtn = document.querySelector('form').querySelector('button');
//   const modulesDiv = document.querySelector('.modules');
//   const dateDefaultValue = lectureDateInput.value;
//   const addedModules = [];

//   function addListItemElement() {
//     const liEl = document.createElement('li');
//     liEl.classList.add('flex');

//     let [date, time] = lectureDateInput.value.split('T');
//     date = date.split('-').join('/');

//     const lectureDate = document.createElement('h4');
//     lectureDate.innerText = `${lectureNameInput.value} - ${date} - ${time}`;

//     const deleteButton = document.createElement('button');
//     deleteButton.classList.add('red');
//     deleteButton.innerText = 'Del';

//     liEl.appendChild(lectureDate);
//     liEl.appendChild(deleteButton);

//     deleteButton.addEventListener('click', (e) => {
//       let btn = e.currentTarget;
//       let listItem = btn.parentElement;
//       let ulEl = listItem.parentElement;
//       let moduleDiv = ulEl.parentElement;

//       listItem.remove();
//       let listItemsArr = Array.from(ulEl.querySelectorAll('li'));

//       if (listItemsArr.length == 0) {
//         moduleDiv.remove();
//       }
//     });

//     return liEl;
//   }

//   function sortListItems(ulElement) {
//     const listItemsArr = Array.from(ulElement.querySelectorAll('li'));

//     listItemsArr.sort((a, b) => {
//       let [fuseless, fDate, fTime] = a.firstChild.innerText.split(' - ');
//       let [suseless, sDate, sTime] = b.firstChild.innerText.split(' - ');

//       let firstDateString = `${fDate.split('/').join('-')}T${fTime}`;
//       let secondDateString = `${sDate.split('/').join('-')}T${sTime}`;

//       return new Date(firstDateString) - new Date(secondDateString);
//     });

//     ulElement.innerHTML = '';
//     listItemsArr.forEach((item) => ulElement.appendChild(item));
//   }

//   addBtn.addEventListener('click', (e) => {
//     e.preventDefault();

//     debugger;
//     let lectureNameCheck = lectureNameInput.value != '';
//     let lectureDateCheck = lectureDateInput.value != dateDefaultValue;
//     let lectureModuleCheck = lectureModuleSelect.value != 'Select module...';

//     if (lectureNameCheck && lectureDateCheck && lectureModuleCheck) {
//       if (addedModules.includes(lectureModuleSelect.value)) {
//         let moduleDivEl;
//         const modulesArr = Array.from(modulesDiv.querySelectorAll('div'));

//         for (let module of modulesArr) {
//           if (
//             module.firstChild.innerText ==
//             `${lectureModuleSelect.value.toUpperCase()}-MODULE`
//           ) {
//             moduleDivEl = module;
//             break;
//           }
//         }

//         const liEl = addListItemElement();
//         const ulEl = moduleDivEl.querySelector('ul');
//         ulEl.appendChild(liEl);
//         sortListItems(ulEl);
//       } else {
//         const moduleEl = document.createElement('div');
//         moduleEl.classList.add('module');

//         const heading = document.createElement('h3');
//         heading.innerText = `${lectureModuleSelect.value.toUpperCase()}-MODULE`;
//         addedModules.push(lectureModuleSelect.value);

//         const ulEl = document.createElement('ul');
//         const liEl = addListItemElement();

//         ulEl.appendChild(liEl);
//         moduleEl.appendChild(heading);
//         moduleEl.appendChild(ulEl);
//         modulesDiv.appendChild(moduleEl);
//       }
//     }
//   });
// }