From 353417eded2795c13cefe15981730ad3d66e620b Mon Sep 17 00:00:00 2001
From: jcorporation <mail@jcgames.de>
Date: Sun, 22 Jul 2018 20:42:01 +0100
Subject: [PATCH] Feat: validation feedback for add stream

---
 htdocs/index.html | 11 ++++++-----
 htdocs/js/mpd.js  | 42 ++++++++++++++++++++++++++++--------------
 2 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/htdocs/index.html b/htdocs/index.html
index 5fa784c..34370db 100644
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -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">
diff --git a/htdocs/js/mpd.js b/htdocs/js/mpd.js
index 0284dc4..2cb85a4 100644
--- a/htdocs/js/mpd.js
+++ b/htdocs/js/mpd.js
@@ -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');