Migrate rest of JS out of HTML

web/src/js/main.mjs

@@ -603,7 +603,7 @@ const download_dir = download_form.find('input[name=\'dir\']');
 const download_tags = download_form.find('input[name=\'tags\']');
 const download_keywords = download_form.find('input[name=\'keywords\']');
 
-function addAllResults() {
+document.getElementById('add-to-playlist-btn').addEventListener('click', () => {
   const data = getFilters();
   data.action = 'add';
 
@@ -616,9 +616,9 @@ function addAllResults() {
   });
 
   checkForPlaylistUpdate();
-}
+});
 
-function deleteAllResults() {
+document.getElementById('library-delete-btn').addEventListener('click', () => {
   const data = getFilters();
   data.action = 'delete';
 
@@ -632,9 +632,9 @@ function deleteAllResults() {
 
   checkForPlaylistUpdate();
   updateResults();
-}
+});
 
-function downloadAllResults() {
+document.getElementById('library-download-btn').addEventListener('click', () => {
   const cond = getFilters();
   download_id.val();
   download_type.val(cond.type);
@@ -642,7 +642,12 @@ function downloadAllResults() {
   download_tags.val(cond.tags);
   download_keywords.val(cond.keywords);
   download_form.submit();
-}
+});
+
+document.getElementById('library-rescan-btn').addEventListener('click', () => {
+  request('post', {action: 'rescan'});
+  updateResults();
+});
 
 function downloadId(id) {
   download_id.attr('value', id);
@@ -760,7 +765,7 @@ function addTagModalShow(_id, _title, _tag_tuples) {
   add_tag_modal.modal('show');
 }
 
-function addTagModalAdd() {
+document.getElementById('addTagModalAddBtn').addEventListener('click', () => {
   const new_tags = add_tag_modal_input.val().split(',').map(function(str) {
     return str.trim();
   });
@@ -776,9 +781,9 @@ function addTagModalAdd() {
     modal_tag_text.html('');
   });
   add_tag_modal_input.val('');
-}
+});
 
-function addTagModalSubmit() {
+document.getElementById('addTagModalSubmit').addEventListener('click', () => {
   const all_tags = $('.modal-tag-text');
   const tags = [];
   all_tags.each(function(i, element) {
@@ -797,7 +802,7 @@ function addTagModalSubmit() {
     },
   });
   updateResults(active_page);
-}
+});
 
 // ---------------------
 // ------- Volume ------
@@ -1030,6 +1035,23 @@ function uploadCancel() {
   areYouSureToCancelUploading = !areYouSureToCancelUploading;
 }
 
+//
+// URLS & Radio
+//
+
+const musicUrlInput = document.getElementById('music-url-input');
+const radioUrlInput = document.getElementById('radio-url-input');
+
+document.getElementById('add-music-url').querySelector('button').addEventListener('click', () => {
+  request('post', {add_url: musicUrlInput.value});
+  musicUrlInput.value = '';
+});
+
+document.getElementById('add-radio-url').querySelector('button').addEventListener('click', () => {
+  request('post', {add_radio: radioUrlInput.value});
+  radioUrlInput.value = '';
+});
+
 // ---------------------
 // ------  Player ------
 // ---------------------
@@ -1047,9 +1069,21 @@ const playerSkipBtn = document.getElementById('playerSkipBtn');
 
 let currentPlayingItem = null;
 
-function togglePlayer() {
+playerPlayBtn.addEventListener('click', () => {
+  request('post', {action: 'resume'});
+});
+
+playerPauseBtn.addEventListener('click', () => {
+  request('post', {action: 'pause'});
+});
+
+playerSkipBtn.addEventListener('click', () => {
+  request('post', {action: 'next'});
+});
+
+document.getElementById('player-toast').addEventListener('click', () => {
   $(player).toast('show');
-}
+});
 
 function playerSetIdle() {
   playerArtwork.style.display = 'none';

web/src/templates/index.html

@@ -237,13 +237,11 @@
                                     <path d="m5.700245,3.92964l0,14.150376l11.451127,-7.075188l-11.451127,-7.075188z"></path>
                                     <path d="m20.942859,18.221072l-3.323292,0l0,3.323292l-1.107764,0l0,-3.323292l-3.323292,0l0,-1.107764l3.323292,0l0,-3.323292l1.107764,0l0,3.323292l3.323292,0l0,1.107764z"></path>
                                 </svg>
-
                             </button>
                             <button class="library-item-add-bottom library-btn btn btn-info btn-sm btn-space" type="button" title="Add to bottom">
                                 <svg class="library-btn-svg" style="width: 1rem; fill: currentColor;" viewBox="2 2 20 20">
                                     <path d="M2,16H10V14H2M18,14V10H16V14H12V16H16V20H18V16H22V14M14,6H2V8H14M14,10H2V12H14V10Z"></path>
                                 </svg>
-
                             </button>
                             <button class="library-item-download btn btn-primary btn-sm btn-space" type="button">
                                 <i class="fas fa-download" aria-hidden="true"></i>
@@ -267,15 +265,17 @@
                 </div>
 
                 <div class="btn-group mb-2" role="group">
-                    <button type="submit" class="btn btn-secondary mr-1" onclick="addAllResults()"><i class="fas fa-plus" aria-hidden="true"></i> Add All
+                  <button id="add-to-playlist-btn" type="button" class="btn btn-secondary mr-1">
+                    <i class="fas fa-plus" aria-hidden="true"></i> Add All
                   </button>
-                    <button type="submit" class="btn btn-secondary mr-1" onclick="request('post', {action : 'rescan'}); updateResults()">
+                  <button id="library-rescan-btn" type="button" class="btn btn-secondary mr-1">
                     <i class="fas fa-sync-alt" aria-hidden="true"></i> Rescan Files
                   </button>
-                    <button type="submit" class="btn btn-secondary mr-1" onclick="downloadAllResults()"><i class="fas fa-download" aria-hidden="true"></i> Download All
+                  <button id="library-download-btn" type="button" class="btn btn-secondary mr-1">
+                    <i class="fas fa-download" aria-hidden="true"></i> Download All
                   </button>
-                    <button type="button" class="btn btn-danger mr-1" data-toggle="modal" data-target="#deleteWarningModal"><i class="fas fa-trash-alt" aria-hidden="true"></i>
+                  <button type="button" class="btn btn-danger mr-1" data-toggle="modal" data-target="#deleteWarningModal">
-                        Delete All
+                    <i class="fas fa-trash-alt" aria-hidden="true"></i> Delete All
                   </button>
                 </div>
 
@@ -295,7 +295,7 @@
                       </div>
                       <div class="modal-footer">
                         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                                <button type="button" class="btn btn-danger" data-dismiss="modal" onclick="deleteAllResults()">Delete All Listed Files</button>
+                        <button id="library-delete-btn" type="button" class="btn btn-danger" data-dismiss="modal">Delete All Listed Files</button>
                       </div>
                     </div>
                   </div>
@@ -357,38 +357,38 @@
 
     <div class="container mb-5">
         <div class="card-deck">
-            <div class="card">
+            <div id="add-music-url" class="card">
                 <div class="card-header">
                     <h5 class="card-title">Add URL</h5>
                 </div>
                 <div class="card-body">
-                    <label for="add_url_input">Add Youtube or Soundcloud URL</label>
+                    <label for="music-url-input">Add Youtube or Soundcloud URL</label>
                     <div class="input-group mb-2">
-                        <input class="form-control" type="text" id="add_url_input" placeholder="URL...">
+                        <input class="form-control" type="text" id="music-url-input" placeholder="URL...">
                     </div>
-                    <button type="submit" class="btn btn-primary" onclick="var $i = $('#add_url_input')[0]; request('post', {add_url :  $i.value }); $i.value = ''; ">Add
+                    <button type="submit" class="btn btn-primary">
-                        URL
+                      Add URL
                     </button>
                 </div>
             </div>
-            <div class="card">
+            <div id="add-radio-url" class="card">
                 <div class="card-header">
                     <h5 class="card-title">Add Radio</h5>
                 </div>
                 <div class="card-body">
-                    <label for="add_radio_input">Add Radio URL</label>
+                    <label for="radio-url-input">Add Radio URL</label>
                     <div class="input-group mb-2">
-                        <input class="form-control" type="text" id="add_radio_input" placeholder="Radio Address...">
+                        <input id="radio-url-input" class="form-control" type="text" placeholder="Radio Address...">
                     </div>
-                    <button type="submit" class="btn btn-primary" onclick="var $i = $('#add_radio_input')[0]; request('post', {add_radio : $i.value }); $i.value = '';">Add
+                    <button type="submit" class="btn btn-primary">
-                        Radio
+                      Add Radio
                     </button>
                 </div>
             </div>
         </div>
     </div>
 
-    <div class="floating-button" style="bottom: 120px;" onclick="togglePlayer()">
+    <div id="player-toast" class="floating-button" style="bottom: 120px;">
         <i class="fas fa-play" aria-hidden="true"></i>
     </div>
 
@@ -409,13 +409,13 @@
             <img id="playerArtwork" src="static/img/unknown-album.png" style="display: none;" />
             <div id="playerInfo">
                 <div id="playerActionBox">
-                    <button id="playerPlayBtn" class="btn btn-primary btn-sm btn-space" style="display: none" onclick="request('post', {action: 'resume'})">
+                    <button id="playerPlayBtn" class="btn btn-primary btn-sm btn-space" style="display: none">
                         <i class="fas fa-play"></i>
                     </button>
-                    <button id="playerPauseBtn" class="btn btn-primary btn-sm btn-space" style="display: none" onclick="request('post', {action: 'pause'})">
+                    <button id="playerPauseBtn" class="btn btn-primary btn-sm btn-space" style="display: none">
                         <i class="fas fa-pause"></i>
                     </button>
-                    <button id="playerSkipBtn" class="btn btn-primary btn-sm" onclick="request('post', {action : 'next'})">
+                    <button id="playerSkipBtn" class="btn btn-primary btn-sm">
                         <i class="fas fa-fast-forward"></i>
                     </button>
                 </div>
@@ -461,7 +461,7 @@
                     </div>
                     <div class="input-group">
                         <input class="form-control form-control-sm btn-space" type="text" id="addTagModalInput" placeholder="tag1,tag2,...">
-                        <button id="addTagModalAddBtn" type="button" class="btn btn-primary btn-sm" onclick="addTagModalAdd()">
+                        <button id="addTagModalAddBtn" type="button" class="btn btn-primary btn-sm">
                             <i class="fas fa-plus" aria-hidden="true"></i>
                             Add
                         </button>
@@ -469,7 +469,7 @@
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                    <button id="addTagModalSubmit" type="button" class="btn btn-success" data-dismiss="modal" onclick="addTagModalSubmit()">Edit!</button>
+                    <button id="addTagModalSubmit" type="button" class="btn btn-success" data-dismiss="modal">Edit!</button>
                 </div>
             </div>
         </div>