mirrors/ympd
1
0
Fork 0
mirror of https://github.com/SuperBFG7/ympd synced 2025-10-31 22:03:01 +00:00
Code Issues Releases Wiki Activity

Feat: validation feedback for add stream

Browse Source
This commit is contained in:
jcorporation
2018-07-22 20:42:01 +01:00
parent 24eb8d8ef7
commit 353417eded
2 changed files with 34 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
htdocs/index.html
View File

@@ -104,7 +104,7 @@
<button type="button" class="btn btn-secondary" data-href="{'cmd': 'sendAPI', 'options': [{'cmd':'MPD_API_RM_ALL'}]}" title="Clear queue"> <button type="button" class="btn btn-secondary" data-href="{'cmd': 'sendAPI', 'options': [{'cmd':'MPD_API_RM_ALL'}]}" title="Clear queue">
<span class="material-icons">clear_all</span> <span class="material-icons">clear_all</span>
</button> </button>
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#modalSavequeue" title="Save queue"> <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#modalSaveQueue" title="Save queue">
<span class="material-icons">save</span> <span class="material-icons">save</span>
</button> </button>
</div> </div>
@@ -696,11 +696,12 @@
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<form id="addstreamFrm"> <form id="addStreamFrm" class="needs-validation" novalidate>
<div class="row"> <div class="row">
<div class="form-group col-md-12"> <div class="form-group col-md-12">
<label class="control-label" for="streamurl">Stream URL</label> <label class="control-label" for="streamUrl">Stream URL</label>
<input type="text" class="form-control" id="streamurl" /> <input type="text" class="form-control" id="streamUrl" placeholder="http://uri.to/stream.mp3"/>
<div class="invalid-feedback">Invalid uri</div>
</div> </div>
</div> </div>
</form> </form>
@@ -713,7 +714,7 @@
</div><!-- /.modal-dialog --> </div><!-- /.modal-dialog -->
</div><!-- /.modal --> </div><!-- /.modal -->
<div class="modal fade" id="modalSavequeue" tabindex="-1" role="dialog" aria-labelledby="savequeueLabel" aria-hidden="true"> <div class="modal fade" id="modalSaveQueue" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">

40
htdocs/js/mpd.js
View File

@@ -78,7 +78,7 @@ domCache.btnAdd = document.getElementById('btnAdd');
var modalConnectionError = new Modal(document.getElementById('modalConnectionError')); var modalConnectionError = new Modal(document.getElementById('modalConnectionError'));
var modalSettings = new Modal(document.getElementById('modalSettings')); var modalSettings = new Modal(document.getElementById('modalSettings'));
var modalAddstream = new Modal(document.getElementById('modalAddstream')); var modalAddstream = new Modal(document.getElementById('modalAddstream'));
var modalSavequeue = new Modal(document.getElementById('modalSavequeue')); var modalSavequeue = new Modal(document.getElementById('modalSaveQueue'));
var modalSongDetails = new Modal(document.getElementById('modalSongDetails')); var modalSongDetails = new Modal(document.getElementById('modalSongDetails'));
var modalAddToPlaylist = new Modal(document.getElementById('modalAddToPlaylist')); var modalAddToPlaylist = new Modal(document.getElementById('modalAddToPlaylist'));
var modalRenamePlaylist = new Modal(document.getElementById('modalRenamePlaylist')); var modalRenamePlaylist = new Modal(document.getElementById('modalRenamePlaylist'));
@@ -301,6 +301,14 @@ function appInit() {
sendAPI({"cmd": "MPD_API_GET_STATS"}, parseStats); sendAPI({"cmd": "MPD_API_GET_STATS"}, parseStats);
}); });
document.getElementById('modalSaveQueue').addEventListener('shown.bs.modal', function () {
var plName = document.getElementById('saveQueueName');
plName.focus();
plName.value = '';
plName.classList.remove('is-invalid');
document.getElementById('saveQueueFrm').classList.remove('was-validated');
});
document.getElementById('modalSettings').addEventListener('shown.bs.modal', function () { document.getElementById('modalSettings').addEventListener('shown.bs.modal', function () {
getSettings(); getSettings();
document.getElementById('settingsFrm').classList.remove('was-validated'); document.getElementById('settingsFrm').classList.remove('was-validated');
@@ -310,7 +318,11 @@ function appInit() {
}); });
document.getElementById('modalAddstream').addEventListener('shown.bs.modal', function () { document.getElementById('modalAddstream').addEventListener('shown.bs.modal', function () {
document.getElementById('streamurl').focus(); var streamUrl = document.getElementById('streamUrl')
streamUrl.focus();
streamUrl.value = '';
streamUrl.classList.remove('is-invalid');
document.getElementById('addStreamFrm').classList.remove('was-validated');
}); });
addFilterLetter('BrowseFilesystemFilterLetters'); addFilterLetter('BrowseFilesystemFilterLetters');
@@ -1542,22 +1554,24 @@ function gotoPage(x) {
} }
function addStream() { function addStream() {
var streamUrl = document.getElementById('streamurl'); var streamUrl = document.getElementById('streamUrl').value;
if (streamUrl.value != '') if (streamUrl != '' && streamUrl.indexOf('http') == 0) {
sendAPI({"cmd": "MPD_API_ADD_TRACK", "data": {"uri": streamUrl.value}}); sendAPI({"cmd": "MPD_API_ADD_TRACK", "data": {"uri": streamUrl}});
streamUrl.value = '';
modalAddstream.hide(); modalAddstream.hide();
} }
else {
document.getElementById('streamUrl').classList.add('is-invalid');
document.getElementById('addStreamFrm').classList.add('was-validated');
}
}
function saveQueue() { function saveQueue() {
var plName = document.getElementById('saveQueueName'); var plName = document.getElementById('saveQueueName').value;
var valid = plName.value.replace(/\w/g,''); var valid = plName.replace(/\w/g,'');
if (plName.value != '' && valid == '') { if (plName != '' && valid == '') {
sendAPI({"cmd":"MPD_API_SAVE_QUEUE", "data": {"plist": plName.value}}); sendAPI({"cmd":"MPD_API_SAVE_QUEUE", "data": {"plist": plName}});
modalSavequeue.hide(); modalSavequeue.hide();
plName.value = '';
document.getElementById('saveQueueFrm').classList.remove('was-validated');
document.getElementById('saveQueueName').classList.remove('is-invalid');
} }
else { else {
document.getElementById('saveQueueName').classList.add('is-invalid'); document.getElementById('saveQueueName').classList.add('is-invalid');