50 lines
1.5 KiB
JavaScript
50 lines
1.5 KiB
JavaScript
export class Playlist {
|
|
constructor() {
|
|
this._tracks = [];
|
|
}
|
|
|
|
get tracks() {
|
|
return this._tracks;
|
|
}
|
|
|
|
addTrack(track) {
|
|
this._tracks.push(track);
|
|
|
|
const div = document.createElement('div');
|
|
|
|
div.classList.add('d-flex');
|
|
div.classList.add('align-items-center');
|
|
div.classList.add('justify-content-between');
|
|
|
|
const deleteBtn = document.createElement('button');
|
|
deleteBtn.innerHTML = `<i class="bi bi-trash"></i>`;
|
|
deleteBtn.classList.add("btn");
|
|
deleteBtn.classList.add("btn-danger");
|
|
deleteBtn.classList.add("col-md-1");
|
|
deleteBtn.style.marginRight = "10px";
|
|
deleteBtn.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
this._tracks.splice(this._tracks.indexOf(track), 1);
|
|
div.remove();
|
|
});
|
|
div.appendChild(deleteBtn);
|
|
const li = document.createElement('li');
|
|
li.classList.add("card");
|
|
li.classList.add("shadow-sm");
|
|
li.classList.add("p-4");
|
|
li.classList.add("col-md-11");
|
|
li.textContent = track.name;
|
|
li.style.margin = "5px 0";
|
|
|
|
div.appendChild(li);
|
|
|
|
div.setAttribute('id', this._tracks.indexOf(track).toString());
|
|
div.setAttribute('draggable', 'true');
|
|
|
|
div.addEventListener('dragstart', (e) => {
|
|
e.dataTransfer.setData('text/plain', e.target.id);
|
|
});
|
|
|
|
return div;
|
|
}
|
|
} |