home.js

/**
 * Controller and event handler for home.html
 */

const axios = require('axios');

window.linkTextInputClicked = () => {
  document.getElementById('linkTextInput').setAttribute('placeholder', '');
}

/**
 * Initiates the conversion of te input link.
 */
window.convertLinkButton = () => {
  // check if there is link ready
  const linkToConvert = document.getElementById('linkTextInput').value;
  document.getElementById('linkTextInput').value = '';
  axios.get('/convert', {params: {youtubeLink: linkToConvert}});
  addNewRow(linkToConvert);
}

/**
 * @param {string} link
 */
function addNewRow(link) {
  const cells = createNewEntryForLink();

  axios.get('/get-video-title', {params: {youtubeLink: link}})
  .then((response) => {
    cells[0].setAttribute('data-title', 'Name');
    cells[0].innerHTML = response.data;
  })
  .catch((err) =>{
    if (err) throw err
  });

  let aTagLink = document.createElement('a');
  aTagLink.setAttribute('href', link);
  aTagLink.setAttribute('target', '_blank');
  aTagLink.innerHTML ='Youtube Video';

  cells[1].setAttribute('data-title', 'Link');
  cells[1].appendChild(aTagLink);

  cells[2].setAttribute('data-title', 'Status');
  cells[2].innerHTML  = 'just started';

  updateProgress();
}

/**
 * Builds a new empty entry in the table.
 * @return {!Array<HTMLCollection>}
 */
function createNewEntryForLink() {
  const table = document.getElementById('table');
  let newEntry = table.insertRow(1);
  newEntry.insertCell(0);
  newEntry.insertCell(1);
  newEntry.insertCell(2);

  return newEntry.cells;
}