1
0
mirror of https://github.com/SuperBFG7/ympd synced 2024-06-16 10:09:56 +00:00

Feat: validation feedback for add stream

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

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">
<span class="material-icons">clear_all</span>
</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>
</button>
</div>
@ -696,11 +696,12 @@
</button>
</div>
<div class="modal-body">
<form id="addstreamFrm">
<form id="addStreamFrm" class="needs-validation" novalidate>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label" for="streamurl">Stream URL</label>
<input type="text" class="form-control" id="streamurl" />
<label class="control-label" for="streamUrl">Stream URL</label>
<input type="text" class="form-control" id="streamUrl" placeholder="http://uri.to/stream.mp3"/>
<div class="invalid-feedback">Invalid uri</div>
</div>
</div>
</form>
@ -713,7 +714,7 @@
</div><!-- /.modal-dialog -->
</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-content">
<div class="modal-header">

View File

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