funky-framadate-front/public/script.js

202 lines
5.8 KiB
JavaScript

'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();