servicetechs

const initializeTechDataModule = function() {
  // initialize service techs
  const initializeTechData = function() {
    // fetch serviceTech data
    return fetch("/api/service_techs")
      // convert json response to js object
      .then(response => response.json())
      // send data to render method
      .then(serviceTechs => render(serviceTechs))
      // add click event listener
      .then(serviceTechEvents)
  }
  // render data to html
  const render = function(serviceTechs) {
    const container = document.querySelector('#serviceTechDropdownMenu');
    // create array to hold table data
    let content = [];
    // iterate over data and append data to content
    serviceTechs.forEach((serviceTech) => {
      content.push(`<a class="dropdown-item techDropdown" href="#">${serviceTech['tech_name']}</a>`);
    });
    // append data to html container
    container.innerHTML = content.join('');
    // return promise for async functionality
    return Promise.resolve(serviceTechs);
  }
  // add tech event listener
  const serviceTechEvents = function(serviceTechs) {

    let techsArray = [];
    serviceTechs.forEach(function(tech) {
      techsArray.push(tech['tech_name']);
    });
    // event listener for tech dropdown menu
    document.querySelectorAll(".techDropdown").forEach((tech) => {
      // iterate over every tech in dropdown
      tech.addEventListener("click", function() {
        const nameCheck = checkIfElementExists();
        // name of tech is equal to current selection textContent
        const name = this.textContent;
        // iterate over every tech in serviceTechs
        serviceTechs.forEach(function(serviceTech) {
          // if name is same as tech you selected invoke insertTechInfo
          // if ((name === serviceTech['tech_name']) && (nameCheck in techsArray)) {
          if (name === serviceTech['tech_name'])  {
            insertTechInfo(serviceTech);
          }
        });
      });
    });
  }
  const checkIfElementExists = function() {
    const elementCheck = document.querySelector('#serviceTechTable tbody tr:nth-child(1)');
    if (elementCheck) {
      const checkedName = document.querySelector('#serviceTechTable tbody tr:nth-child(1)').cells[0].textContent;
      console.log('This is the name that exists', checkedName);
      return checkedName;
    }
  }
  const insertTechInfo = function(serviceTech) {
    const container = document.querySelector("#serviceTechTable tbody");
    // create variable firstRow and lastRow and set equal to insertRow(index).
    const firstRow = container.insertRow(0);
    const lastRow = container.insertRow(-1);
    firstRow.innerHTML = `<td>${serviceTech['tech_name']}</td><td>${serviceTech['tech_address']}</td><td></td><td></td><td><input id="techDeparture" onchange="tableValidationModule.tableValidationTechDeparture(this);"/></td>`;
    lastRow.outerHTML = `<td>${serviceTech['tech_name']}</td><td>${serviceTech['tech_address']}</td><td></td><td></td><td></td>`;
  }
  return { initializeTechData }
}();