funky-framadate-front/public/script.js

'use strict'

const $ = selector => document.querySelector(selector)
const $$ = selector => document.querySelectorAll(selector)

const debugStorage = () => {
  for(var i = 0; i < localStorage.length; i++) {
    let key = localStorage.key(i)
    console.debug(key, " = ", localStorage[key])
  }
}

const useTextInsteadOfInputFor = (textField) => {
  let $name = $(`#${textField.name}`);
  $name.outerHTML = `<span id="${textField.name}" class="champ-vide-long toggle-field">${$name.getAttribute('value')}</span>`;
  return textField;
}

const createUpdateModalOnClickFor = (textField) => {
  let $name = $(`#${textField.name}`);
  $name.addEventListener("click", (e) => {
    e.preventDefault();
    createModal(`<input type="text" name="${textField.name}" id="${textField.name}UpdateField" value="${e.target.textContent}"><button id="submitTextField" data-reference="${textField.name}">></button>`);
  });
}

$$(".nfl-textfield").forEach((textField) => {
  createUpdateModalOnClickFor(useTextInsteadOfInputFor(textField));
});

const removeOverlay = () => {
  $('body').removeChild($('.overlay'))
  $('body').removeChild($('.modal'))
}

const createModal = (text) => {
  const overlay = document.createElement('div')
  const popin = document.createElement('div')

  popin.innerHTML = text
  popin.className = 'modal'
  overlay.className = 'overlay'
  $('body').appendChild(overlay)
  $('body').appendChild(popin)

  overlay.addEventListener('click', removeOverlay)
  $('body').insertBefore(overlay, $('main'))

  $("#submitTextField").addEventListener("click", (e) => {
    $(`#${e.target.dataset.reference}`).innerHTML = $(`#${e.target.dataset.reference}UpdateField`).value
    removeOverlay()
  });
}

const buildTextField = () => {
  var field = document.createElement("input")
  var deleteButton = document.createElement("button")
  var fieldBloc = document.createElement("span")
  fieldBloc.appendChild(field);
  fieldBloc.appendChild(deleteButton);
  return fieldBloc

}

if($("#add-response-choice")) {
  $("#add-response-choice").addEventListener('click', (e) => {
    e.preventDefault();
    let response = document.createElement("li");
    response.appendChild(buildTextField());

    $("#responses").appendChild(response);
  });
}


$$(".next").forEach((button) => {
  button.addEventListener("click", (e) => {
    $$(".toggle-field").forEach((field) => {
      localStorage.setItem(field.id, field.innerText);
    });
  });
});

if(document.getElementById("type_sondage")) {
  type_sondage.addEventListener('change', function() {
    let typeSondage = this.options[this.selectedIndex].text;
    if(typeSondage == "classique") {
      localStorage.setItem('type_sondage', this.options[this.selectedIndex].text);
      $('#next').href = "responses.html";
    } else {
      localStorage.setItem('type_sondage', 'dates');
      $('#next').href = "dates.html";
    }
  })
}

if(document.getElementById("startButton")) {
  startButton.addEventListener('click', () => {
    localStorage.clear()
    localStorage.setItem('type_sondage', 'classique');
  });
}

if(document.getElementById("addDateButton")) {
  addDateButton.addEventListener('click', () => {
    let newLi = document.createElement("li")
    let content = $("ul>li").innerHTML.replace("date-1", `date-${$$("li").length + 1}`)
    newLi.innerHTML = content
    $("ul").appendChild(newLi);
    initEventOnScreen();
  });
}

if($('#validation-pool-title') && localStorage["title"]) {
  $('#validation-pool-title').innerHTML = localStorage["title"]

}


if($('#ajouterDesHoraires')) {
  ajouterDesHoraires.addEventListener('change', () => {
    if (ajouterDesHoraires.value == 'avec des') {
      identiquesDifferentsPourChaqueJour.style.display = 'inline'
      $$('.horaire-identique').forEach((e) => {
        e.style.display = 'inline'
      });
    } else {
      identiquesDifferentsPourChaqueJour.style.display = 'none'
      $$('.horaire-identique').forEach((e) => {
        e.style.display = 'none'
      });
    }
  });
}

if($('#horairesIdentiquesOuDifferents')) {
  horairesIdentiquesOuDifferents.addEventListener('change', () => {
    if (horairesIdentiquesOuDifferents.value == 'identiques') {
      $('.horaire-identique').style.display = 'inline'
      $$('.horaire-different').forEach( (e) => {
        e.style.display = 'none'
      });
    } else {
      $('.horaire-identique').style.display = 'none'
      $$('.horaire-different').forEach( (e) => {
        e.style.display = 'inline'
      });
    }
  });
}

const addDeleteParentEvent = () => {
  $$(".remove").forEach((element) => {
    element.addEventListener('click', () => {
      element.parentElement.remove();
    });
  });
}

const addInputToStorageEvent = () => {
  $$('input').forEach((inputElement) => {
    inputElement.addEventListener("change", () => {
      localStorage[inputElement.name] = inputElement.value
    });
  });
}

const initEventOnScreen = () => {
  addDeleteParentEvent();
  addInputToStorageEvent();
}

if($('#recapitulatif')) {

  var tableauDeDates = []

  for(var i = 0; i < localStorage.length; i++) {
    let key = localStorage.key(i)
    let splittedKey = key.split('-')
    if(splittedKey[0] == 'date') {

      tableauDeDates.push(new Date(localStorage[key]))
    }
  }
  tableauDeDates.sort().reverse().forEach( (date) => {
    var spanDate = document.createElement("span")
    spanDate.className = "bold"
    let jours = ["Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi", "Dimanche"]
    let mois = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"]
    let dateEnTexte = `${jours[date.getDay()]} ${date.getDate()} ${mois[(date.getMonth())]} ${date.getFullYear()}`
    spanDate.appendChild(document.createTextNode(dateEnTexte))

    var article = document.createElement("article")
    article.appendChild(spanDate)

    $('#recapitulatif').appendChild(article)
  })
}

initEventOnScreen();
debugStorage();