better frontend error handling
This commit is contained in:
parent
93c530e5e7
commit
611ad91088
|
@ -418,4 +418,18 @@ input:checked + .slider:before {
|
||||||
|
|
||||||
.album-downloading {
|
.album-downloading {
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
background-color: rgb(255, 155, 155, 0.3);
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 15px;
|
||||||
|
border: 3px solid rgb(255, 155, 155, 0.8);
|
||||||
|
text-align: center;
|
||||||
|
margin: 15px;
|
||||||
|
width: 400px;
|
||||||
|
display: none; /* this is changed by the js */
|
||||||
|
}
|
||||||
|
.error .big {
|
||||||
|
font-size: x-large;
|
||||||
}
|
}
|
|
@ -22,6 +22,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<span id="main">
|
<span id="main">
|
||||||
|
<div class="error" id="error"></div>
|
||||||
<input type="search" id="album-search" name="q">
|
<input type="search" id="album-search" name="q">
|
||||||
<div id="progress"><div id="progress-album"></div><div id="progress-bar-wrapper"></div></div>
|
<div id="progress"><div id="progress-album"></div><div id="progress-bar-wrapper"></div></div>
|
||||||
<div id="albums"></div>
|
<div id="albums"></div>
|
||||||
|
|
|
@ -76,17 +76,36 @@ function startDownload(id, isAlbum) {
|
||||||
} else if (d.key === 'download') {
|
} else if (d.key === 'download') {
|
||||||
download(d.data);
|
download(d.data);
|
||||||
} else if (d.key === 'finishDownload') {
|
} else if (d.key === 'finishDownload') {
|
||||||
//change();
|
log = addlog(log, 'Download finished');
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
document.getElementById('progress-album').innerHTML = `<div class="album album-downloading" id="album-${id}"><span class="album-image-wrapper"><img class="album-image" width="128" height="128" src="${coverArt}"></span><span class="big">${title || ''}</span><br><span class="small">by ${artist || ''}</span><br><div id="progress-state">${log || ''}</div></div>`;
|
document.getElementById('progress-album').innerHTML = `<div class="album album-downloading" id="album-${id}"><span class="album-image-wrapper"><img class="album-image" width="128" height="128" src="${coverArt}"></span><span class="big">${title || ''}</span><br><span class="small">by ${artist || ''}</span><br><div id="progress-state">${log || ''}</div></div>`;
|
||||||
}
|
}
|
||||||
|
ws.onerror = (e) => {
|
||||||
|
console.log('error: ' + e);
|
||||||
|
error(e.toString());
|
||||||
|
}
|
||||||
|
ws.onclose = (e) => {
|
||||||
|
change();
|
||||||
|
if (e.code !== 1000) error(`websocket closed unexpectedly with code ${e.code}\n${e.reason}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function error(e) {
|
||||||
|
document.getElementById('error').innerHTML = `<div class="big">error!</div>${e.split('\n').join('<br>')}`;
|
||||||
|
document.getElementById('error').style.display = 'block';
|
||||||
|
console.error(e);
|
||||||
|
}
|
||||||
|
function clearError() {
|
||||||
|
document.getElementById('error').innerHTML = '';
|
||||||
|
document.getElementById('error').style.display = 'none';
|
||||||
}
|
}
|
||||||
|
|
||||||
let change; // fuck off js
|
let change; // fuck off js
|
||||||
|
|
||||||
window.onload = () => {
|
window.onload = () => {
|
||||||
|
clearError();
|
||||||
|
|
||||||
// dirty theme hacks :tm:
|
// dirty theme hacks :tm:
|
||||||
|
|
||||||
const color = window.getComputedStyle(document.querySelector('body')).getPropertyValue('color');
|
const color = window.getComputedStyle(document.querySelector('body')).getPropertyValue('color');
|
||||||
|
@ -120,12 +139,20 @@ window.onload = () => {
|
||||||
search.setAttribute('placeholder', placeholders[Math.floor(Math.random() * placeholders.length)]);
|
search.setAttribute('placeholder', placeholders[Math.floor(Math.random() * placeholders.length)]);
|
||||||
|
|
||||||
change = async () => {
|
change = async () => {
|
||||||
|
clearError();
|
||||||
const value = document.getElementById('album-search').value;
|
const value = document.getElementById('album-search').value;
|
||||||
if (value === '') return document.getElementById('albums').innerHTML = '';
|
if (value === '') return document.getElementById('albums').innerHTML = '';
|
||||||
document.getElementById('progress-album').innerHTML = '';
|
document.getElementById('progress-album').innerHTML = '';
|
||||||
document.getElementById('progress-bar-wrapper').innerHTML = '';
|
document.getElementById('progress-bar-wrapper').innerHTML = '';
|
||||||
document.getElementById('albums').innerHTML = '<div class="lds-ring"><div></div><div></div><div></div><div></div></div>';
|
document.getElementById('albums').innerHTML = '<div class="lds-ring"><div></div><div></div><div></div><div></div></div>';
|
||||||
const d = await axios.get('/api/search', {params: {search: value}});
|
let d;
|
||||||
|
try {
|
||||||
|
d = await axios.get('/api/search', {params: {search: value}});
|
||||||
|
} catch(err) {
|
||||||
|
error(err.toString());
|
||||||
|
document.getElementById('albums').innerHTML = '';
|
||||||
|
return;
|
||||||
|
}
|
||||||
document.getElementById('albums').innerHTML = d.data.map(d =>
|
document.getElementById('albums').innerHTML = d.data.map(d =>
|
||||||
`<div class="album" id="album-${d.id}"><span class="album-image-wrapper"><img class="album-image" width="128" height="128" src="https://e-cdns-images.dzcdn.net/images/cover/${d.cover}/128x128-000000-80-0-0.jpg"></span><span class="big">${d.title}</span><br><span class="small">by ${d.artist.name}</span><br><img class="album-download" width="48" height="48" src="https://img.icons8.com/material-sharp/48/000000/download--v1.png"></div><div class="album-bottom" id="album-bottom-${d.id}"></div>`
|
`<div class="album" id="album-${d.id}"><span class="album-image-wrapper"><img class="album-image" width="128" height="128" src="https://e-cdns-images.dzcdn.net/images/cover/${d.cover}/128x128-000000-80-0-0.jpg"></span><span class="big">${d.title}</span><br><span class="small">by ${d.artist.name}</span><br><img class="album-download" width="48" height="48" src="https://img.icons8.com/material-sharp/48/000000/download--v1.png"></div><div class="album-bottom" id="album-bottom-${d.id}"></div>`
|
||||||
).join('<br>');
|
).join('<br>');
|
||||||
|
@ -135,21 +162,30 @@ window.onload = () => {
|
||||||
for (c of document.getElementById('albums').children) {
|
for (c of document.getElementById('albums').children) {
|
||||||
if (c.children[5]) {
|
if (c.children[5]) {
|
||||||
let id = c.id.split('-')[1];
|
let id = c.id.split('-')[1];
|
||||||
c.children[5].onclick = (a) => {
|
c.children[5].onclick = () => {
|
||||||
|
clearError();
|
||||||
startDownload(id, true);
|
startDownload(id, true);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
let id = c.id.split('-')[1];
|
let id = c.id.split('-')[1];
|
||||||
if (document.getElementById('album-bottom-' + id)) {
|
if (document.getElementById('album-bottom-' + id)) {
|
||||||
document.getElementById('album-bottom-' + id).innerHTML = '<div class="lds-ring"><div></div><div></div><div></div><div></div></div>';
|
document.getElementById('album-bottom-' + id).innerHTML = '<div class="lds-ring"><div></div><div></div><div></div><div></div></div>';
|
||||||
const album = await axios.get('/api/album', {params: {id: id}});
|
let album;
|
||||||
|
try {
|
||||||
|
album = await axios.get('/api/album', {params: {id: id}});
|
||||||
|
} catch(err) {
|
||||||
|
error(err.toString());
|
||||||
|
document.getElementById('album-bottom-' + id).innerHTML = '';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
document.getElementById('album-bottom-' + id).innerHTML = album.data.tracks.map(d =>
|
document.getElementById('album-bottom-' + id).innerHTML = album.data.tracks.map(d =>
|
||||||
`<div class="track" id="track-${d.id}"><span>${d.artist} - ${d.title}</span><span><span class="track-download-wrapper"><img class="album-download" width="32" height="32" src="https://img.icons8.com/material-sharp/48/000000/download--v1.png"></span> ${formatTime(d.duration)}</span></div>`
|
`<div class="track" id="track-${d.id}"><span>${d.artist} - ${d.title}</span><span><span class="track-download-wrapper"><img class="album-download" width="32" height="32" src="https://img.icons8.com/material-sharp/48/000000/download--v1.png"></span> ${formatTime(d.duration)}</span></div>`
|
||||||
).join('');
|
).join('');
|
||||||
for (track of document.getElementById('album-bottom-' + id).children) {
|
for (track of document.getElementById('album-bottom-' + id).children) {
|
||||||
let trackId = track.id.split('-')[1];
|
let trackId = track.id.split('-')[1];
|
||||||
track.children[1].children[0].onclick = () => {
|
track.children[1].children[0].onclick = () => {
|
||||||
console.log(trackId);
|
clearError();
|
||||||
startDownload(trackId, false);
|
startDownload(trackId, false);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue