115 lines
3.3 KiB
JavaScript
115 lines
3.3 KiB
JavaScript
function refreshHeight(elem) {
|
|
elem.style.maxHeight = `${elem.scrollHeight}px`;
|
|
}
|
|
function validate(form) {
|
|
var valid = true;
|
|
if (form['artist'].value == '') {
|
|
form['artist'].parentElement.setAttribute('error',
|
|
'Se necesita el nombre del artista');
|
|
valid = false;
|
|
}
|
|
if (form['album'].value == '' && form['track'].value == '') {
|
|
form['album'].parentElement.setAttribute('error',
|
|
'Se necesita al menos uno de entre «canción» o «áblum»');
|
|
form['track'].parentElement.setAttribute('error',
|
|
'Se necesita al menos uno de entre «canción» o «áblum»');
|
|
valid = false;
|
|
}
|
|
refreshHeight(form.closest('.action-wrap'));
|
|
return valid;
|
|
}
|
|
|
|
function deleteSong() {
|
|
var button = this;
|
|
var data = button.closest('.data-elem');
|
|
var index = data.getAttribute('data-info');
|
|
if (confirm('¿Seguro?')) {
|
|
fetch(`del?p=${index}`).then(response => {
|
|
var wrap = button.closest('.action-wrap');
|
|
if (response.ok) {
|
|
data.parentElement.removeChild(data);
|
|
} else {
|
|
button.closest('.action')
|
|
.setAttribute('result', 'Error en la solicitud');
|
|
}
|
|
refreshHeight(wrap);
|
|
});
|
|
}
|
|
}
|
|
|
|
fetch('../list')
|
|
.then(response => {
|
|
if (response.ok) {
|
|
return response.json();
|
|
}
|
|
})
|
|
.then(list => {
|
|
list.forEach((elem, index) => {
|
|
var newButton = document.createElement('button');
|
|
var title = elem['track'] == undefined ? elem['album'] : elem['track'];
|
|
newButton.setAttribute('class', 'data-elem');
|
|
newButton.onclick = deleteSong;
|
|
newButton.setAttribute('data-info', index);
|
|
newButton.innerText = `${elem['artist']} - ${title}`;
|
|
document.querySelector('#dellist').appendChild(newButton);
|
|
});
|
|
})
|
|
.catch(reason => console.log(reason));
|
|
|
|
document.querySelectorAll('.action-wrap').forEach(elem => {
|
|
var cajetin = elem.querySelector('.cajetin');
|
|
elem.setAttribute('collapsed', 'true');
|
|
elem.style.maxHeight = `${cajetin.scrollHeight}px`;
|
|
cajetin.onclick = function() {
|
|
var form = elem.querySelector('form');
|
|
if (elem.getAttribute('collapsed') == 'true') {
|
|
refreshHeight(elem);
|
|
elem.setAttribute('collapsed', 'false');
|
|
} else {
|
|
elem.style.maxHeight = `${cajetin.scrollHeight}px`;
|
|
elem.setAttribute('collapsed', 'true');
|
|
}
|
|
}
|
|
});
|
|
|
|
document.querySelectorAll('.form-elem > input').forEach(elem => {
|
|
elem.addEventListener('input', () => {
|
|
elem.parentElement.removeAttribute('error');
|
|
elem.closest('form').removeAttribute('result');
|
|
refreshHeight(elem.closest('.action-wrap'));
|
|
});
|
|
});
|
|
|
|
const add = document.querySelector('#add');
|
|
add.addEventListener('submit', (event) => {
|
|
event.preventDefault();
|
|
if (validate(add)) {
|
|
var xmlHttp = new XMLHttpRequest();
|
|
var json = {}
|
|
var data = new FormData(add);
|
|
data.forEach((v, k) => json[k] = v);
|
|
if (!json['date']) {
|
|
const date = new Date(Date.now());
|
|
const year = `${date.getFullYear()}`;
|
|
const month = `${date.getMonth() < 10 ? '0' : '' }${date.getMonth()+1}`;
|
|
const day = `${date.getDate() < 10 ? '0' : '' }${date.getDate()+1}`;
|
|
json['date'] = `${year}-${month}-${day}`;
|
|
}
|
|
fetch('add', {
|
|
method: 'POST',
|
|
body: JSON.stringify(json),
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
}
|
|
}).then(response => {
|
|
if (response.ok) {
|
|
add.setAttribute('result', 'Canción añadida');
|
|
} else {
|
|
add.setAttribute('result', 'Error en la solicitud');
|
|
}
|
|
refreshHeight(add.closest('.action-wrap'));
|
|
});
|
|
}
|
|
return false;
|
|
});
|