mirrors/ympd
1
0
Fork 0
mirror of https://github.com/SuperBFG7/ympd synced 2025-10-12 05:07:40 +00:00
Code Issues Releases Wiki Activity

Feat: error handling in startup dialog

Browse Source
This commit is contained in:
jcorporation
2019-02-04 19:28:46 +01:00
parent 50e5fc9081
commit ccf25a578d
3 changed files with 89 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
htdocs/css/mympd.css
View File

@@ -343,4 +343,3 @@ ol#searchCrumb {
.nodropdown::after { .nodropdown::after {
content: none; content: none;
} }

10
htdocs/index.html
View File

@@ -627,9 +627,13 @@
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p>Please wait, myMPD is initializing...</p> <p>Please wait, myMPD is initializing...</p>
<p><span id="appInitSettings" class="material-icons unvisible">check</span> Fetch settings</p> <table>
<p><span id="appInitWebsocket" class="material-icons unvisible">check</span> Connect to websocket</p> <tr><td><span id="appInitSettings"></span></td><td>&nbsp;&nbsp;Fetch settings</td></tr>
<p><span id="appInitApply" class="material-icons unvisible">check</span> Applying settings</p> <tr><td><span id="appInitWebsocket"></span></td><td>&nbsp;&nbsp;Connect to websocket</td></tr>
<tr><td><span id="appInitApply"></span></td><td>&nbsp;&nbsp;Applying settings</td></tr>
</table>
<br/>
<div id="modalAppInitAlert" class="alert alert-danger hide"></div>
</div> </div>
</div> </div>
</div> </div>

103
htdocs/js/mympd.js
View File

@@ -30,7 +30,7 @@ var lastState;
var currentSong = new Object(); var currentSong = new Object();
var playstate = ''; var playstate = '';
var settingsLock = false; var settingsLock = false;
var settingsParsed = false; var settingsParsed = 'false';
var settingsNew = {}; var settingsNew = {};
var settings = {}; var settings = {};
var alertTimeout; var alertTimeout;
@@ -185,7 +185,7 @@ function appGoto(a,t,v,s) {
} }
function appRoute() { function appRoute() {
if (settingsParsed == false) { if (settingsParsed == 'false') {
appInitStart(); appInitStart();
return; return;
} }
@@ -365,26 +365,60 @@ function appRoute() {
app.last.view = app.current.view; app.last.view = app.current.view;
}; };
function initState(objId, state) {
var obj = document.getElementById(objId);
obj.classList.remove('text-success', 'text-danger', 'spinner-border', 'spinner-border-sm');
obj.innerHTML = '';
if (state == 'blank') {
obj.innerHTML = '';
}
else if (state == 'load') {
obj.innerHTML = '';
obj.classList.add('spinner-border', 'spinner-border-sm');
}
else if (state == 'ok') {
obj.innerHTML = 'check';
obj.classList.add('material-icons', 'text-success');
}
else if (state == 'error') {
obj.innerHTML = 'error_outline';
obj.classList.add('material-icons', 'text-danger');
}
}
function showAppInitAlert(text) {
var a = document.getElementById('modalAppInitAlert');
a.innerHTML = '<p>' + text + '</p><a id ="appReloadBtn"class="btn btn-danger text-light">Reload</a>';
a.classList.remove('hide');
document.getElementById('appReloadBtn').addEventListener('click', function() {
location.reload();
}, false);
}
function appInitStart() { function appInitStart() {
appInited = false; appInited = false;
document.getElementsByTagName('header')[0].classList.add('hide'); document.getElementsByTagName('header')[0].classList.add('hide');
document.getElementsByTagName('main')[0].classList.add('hide'); document.getElementsByTagName('main')[0].classList.add('hide');
document.getElementsByTagName('footer')[0].classList.add('hide'); document.getElementsByTagName('footer')[0].classList.add('hide');
document.getElementById('appInitSettings').classList.add('unvisible'); initState('appInitSettings', 'load');
document.getElementById('appInitWebsocket').classList.add('unvisible'); initState('appInitWebsocket', 'blank');
document.getElementById('appInitApply').classList.add('unvisible'); initState('appInitApply', 'blank');
var a = document.getElementById('modalAppInitAlert');
a.classList.add('hide');
a.innerText = '';
modalAppInit.show(); modalAppInit.show();
getSettings(); getSettings(true);
appInitWait(); appInitWait();
} }
function appInitWait() { function appInitWait() {
setTimeout(function() { setTimeout(function() {
if (settingsParsed == true && websocketConnected == true) { if (settingsParsed == 'true' && websocketConnected == true) {
//app initialized //app initialized
document.getElementById('appInitWebsocket').classList.remove('unvisible'); initState('appInitWebsocket', 'ok');
initState('appInitApply', 'load');
appInit(); appInit();
document.getElementById('appInitApply').classList.remove('unvisible'); initState('appInitApply', 'ok');
document.getElementsByTagName('header')[0].classList.remove('hide'); document.getElementsByTagName('header')[0].classList.remove('hide');
document.getElementsByTagName('main')[0].classList.remove('hide'); document.getElementsByTagName('main')[0].classList.remove('hide');
document.getElementsByTagName('footer')[0].classList.remove('hide'); document.getElementsByTagName('footer')[0].classList.remove('hide');
@@ -393,11 +427,16 @@ function appInitWait() {
return; return;
} }
if (settingsParsed == true) { if (settingsParsed == 'true') {
//parsed settings, now its save to connect to websocket //parsed settings, now its save to connect to websocket
document.getElementById('appInitSettings').classList.remove('unvisible'); initState('appInitSettings', 'ok');
initState('appInitWebsocket', 'load');
webSocketConnect(); webSocketConnect();
} }
else if (settingsParsed == 'error') {
initState('appInitSettings', 'error');
return;
}
appInitWait(); appInitWait();
}, 500); }, 500);
} }
@@ -1128,6 +1167,9 @@ function webSocketConnect() {
//Show modal only if websocket was already connected before //Show modal only if websocket was already connected before
modalConnectionError.show(); modalConnectionError.show();
} }
else {
showAppInitAlert('Websocket connection failed.');
}
websocketConnected = false; websocketConnected = false;
if (websocketTimer != null) { if (websocketTimer != null) {
clearTimeout(websocketTimer); clearTimeout(websocketTimer);
@@ -1397,7 +1439,7 @@ function parseSettings() {
else if (app.current.app == 'Browse' && app.current.tab == 'Database' && app.current.search != '') else if (app.current.app == 'Browse' && app.current.tab == 'Database' && app.current.search != '')
appRoute(); appRoute();
settingsParsed = true; settingsParsed = 'true';
} }
function setCols(table, className) { function setCols(table, className) {
@@ -1476,19 +1518,31 @@ function setCols(table, className) {
} }
} }
function getSettings() { function getSettings(onerror) {
if (settingsLock == false) { if (settingsLock == false) {
settingsLock = true; settingsLock = true;
sendAPI({"cmd": "MYMPD_API_SETTINGS_GET"}, getMpdSettings); sendAPI({"cmd": "MYMPD_API_SETTINGS_GET"}, getMpdSettings, onerror);
} }
} }
function getMpdSettings(obj) { function getMpdSettings(obj) {
if (obj.type == 'error') {
settingsParsed = 'error';
if (appInited == false) {
showAppInitAlert(obj.data);
}
return false;
}
settingsNew = obj.data; settingsNew = obj.data;
sendAPI({"cmd": "MPD_API_SETTINGS_GET"}, joinSettings); sendAPI({"cmd": "MPD_API_SETTINGS_GET"}, joinSettings, true);
} }function joinSettings(obj) {
if (obj.type == 'error') {
function joinSettings(obj) { settingsParsed = 'error';
if (appInited == false) {
showAppInitAlert(obj.data);
}
return false;
}
for (var key in obj.data) { for (var key in obj.data) {
settingsNew[key] = obj.data[key]; settingsNew[key] = obj.data[key];
} }
@@ -2790,7 +2844,7 @@ function showMenu(el, event) {
popoverInit.show(); popoverInit.show();
} }
function sendAPI(request, callback) { function sendAPI(request, callback, onerror) {
var ajaxRequest=new XMLHttpRequest(); var ajaxRequest=new XMLHttpRequest();
ajaxRequest.open('POST', '/api', true); ajaxRequest.open('POST', '/api', true);
ajaxRequest.setRequestHeader('Content-type', 'application/json'); ajaxRequest.setRequestHeader('Content-type', 'application/json');
@@ -2801,11 +2855,18 @@ function sendAPI(request, callback) {
if (obj.type == 'error') { if (obj.type == 'error') {
showNotification('Error', obj.data, obj.data, 'danger'); showNotification('Error', obj.data, obj.data, 'danger');
console.log('Error: ' + obj.data); console.log('Error: ' + obj.data);
if (onerror == true) {
if (callback != undefined && typeof(callback) == 'function') {
callback(obj);
}
}
} }
else if (obj.type == 'result' && obj.data != 'ok') else if (obj.type == 'result' && obj.data != 'ok') {
showNotification(obj.data, '', '', 'success'); showNotification(obj.data, '', '', 'success');
else if (callback != undefined && typeof(callback) == 'function') }
else if (callback != undefined && typeof(callback) == 'function') {
callback(obj); callback(obj);
}
} }
else { else {
console.log('Empty response for request: ' + JSON.stringify(request)); console.log('Empty response for request: ' + JSON.stringify(request));