From 995b74a9713d4750038faff62e09a71520f1bf49 Mon Sep 17 00:00:00 2001
From: lilkidsuave <66171643+lilkidsuave@users.noreply.github.com>
Date: Thu, 27 Jun 2024 02:20:20 -0400
Subject: [PATCH] Update index.html

---
 templates/index.html | 181 ++++++++++++++++++-------------------------
 1 file changed, 76 insertions(+), 105 deletions(-)
diff --git a/templates/index.html b/templates/index.html
index 8ed9318..3d20436 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -14,18 +14,6 @@
 <body>
     <div class="container mt-5">
         <h2 class="mb-4">QobuzDlGui-Reborn</h2>
-        
-        <form id="searchForm">
-            <div class="form-group">
-                <label for="searchQuery">Search for Music:</label>
-                <input type="text" class="form-control" id="searchQuery" placeholder="Enter search term" required>
-            </div>
-            <button type="submit" class="btn btn-primary">Search</button>
-        </form>
-        
-        <div id="searchResults" class="mt-4"></div>
-
-        <h4 class="mt-5">Download Directly</h4>
         <form action="/" method="post" id="downloadForm">
             <div class="form-group">
                 <label for="email">Your QoBuz Email:</label>
@@ -56,9 +44,17 @@ <h4 class="mt-5">Download Directly</h4>
                 <input type="checkbox" class="form-check-input" name="rememberMe" id="rememberMe">
                 <label class="form-check-label" for="rememberMe">Remember me and settings</label>
             </div>
+            <div class="form-group">
+                <label for="searchType">Search Type:</label>
+                <select class="form-control" name="searchType" id="searchType" required>
+                    <option value="album">Album</option>
+                    <option value="artist">Artist</option>
+                    <option value="track">Track</option>
+                    <option value="playlist">Playlist</option>
+                </select>
+            </div>
             <button type="submit" class="btn btn-primary">Download</button>
         </form>
-        
         <div id="progress-container" style="display: none;">
             <h4>Downloading...</h4>
             <div class="progress">
@@ -66,112 +62,37 @@ <h4>Downloading...</h4>
             </div>
             <p id="status-text">Starting download...</p>
         </div>
-        
-        <script>
-        $(document).ready(function() {
-            // Search Form Submission
-            $('#searchForm').submit(function(e) {
-                e.preventDefault();
-                let query = $('#searchQuery').val();
-                let searchResultsDiv = $('#searchResults');
-                searchResultsDiv.empty();
-                
-                $.ajax({
-                    type: 'GET',
-                    url: '/search',
-                    data: { query: query },
-                    success: function(data) {
-                        if (data.length > 0) {
-                            let resultsHtml = '<ul class="list-group">';
-                            data.forEach(result => {
-                                resultsHtml += `
-                                    <li class="list-group-item d-flex justify-content-between align-items-center">
-                                        <span>${result.text}</span>
-                                        <button class="btn btn-success download-btn" data-url="${result.url}">Download</button>
-                                    </li>`;
-                            });
-                            resultsHtml += '</ul>';
-                            searchResultsDiv.html(resultsHtml);
-                        } else {
-                            searchResultsDiv.html('<p>No results found</p>');
-                        }
-                    },
-                    error: function(jqXHR, textStatus, errorThrown) {
-                        searchResultsDiv.html('<p>An error occurred during the search.</p>');
-                    }
-                });
-            });
 
-            // Handle Download Button Clicks
-            $(document).on('click', '.download-btn', function() {
-                let url = $(this).data('url');
-                let email = $('#email').val();
-                let password = $('#password').val();
-                let downloadLocation = $('#download_location').val();
-                let quality = $('#quality').val();
-                
-                $('#progress-container').show();
-                
-                $.ajax({
-                    type: 'POST',
-                    url: '/download',
-                    data: {
-                        url: url,
-                        email: email,
-                        password: password,
-                        download_location: downloadLocation,
-                        quality: quality
-                    },
-                    success: function(data) {
-                        if (data.status === 'completed') {
-                            $('#progress-bar').css('width', '100%');
-                            $('#status-text').text('Download Completed!');
-                            setTimeout(function() {
-                                location.reload();
-                            }, 1000);
-                        }
-                    },
-                    error: function(jqXHR, textStatus, errorThrown) {
-                        $('#status-text').text('An error occurred: ' + jqXHR.responseJSON.message);
-                    },
-                    xhr: function() {
-                        var xhr = new window.XMLHttpRequest();
-                        xhr.upload.addEventListener("progress", function(evt) {
-                            if (evt.lengthComputable) {
-                                var percentComplete = evt.loaded / evt.total;
-                                percentComplete = parseInt(percentComplete * 100);
-                                $('#progress-bar').css('width', percentComplete + '%');
-                            }
-                        }, false);
-                        return xhr;
-                    }
-                });
-            });
+        <div id="search-results" style="margin-top: 20px;">
+            <!-- Search results will be displayed here -->
+        </div>
 
-            // Download Form Submission
-            $('#downloadForm').submit(function(e) {
+        <script>
+            $('#downloadForm').submit(function (e) {
                 e.preventDefault();
                 $('#progress-container').show();
-                
+
                 $.ajax({
                     type: 'POST',
                     url: '/',
                     data: $(this).serialize(),
-                    success: function(data) {
+                    success: function (data) {
                         if (data.status === 'completed') {
                             $('#progress-bar').css('width', '100%');
                             $('#status-text').text('Download Completed!');
-                            setTimeout(function() {
+
+                            // Reload the page after 1 second
+                            setTimeout(function () {
                                 location.reload();
                             }, 1000);
                         }
                     },
-                    error: function(jqXHR, textStatus, errorThrown) {
+                    error: function (jqXHR, textStatus, errorThrown) {
                         $('#status-text').text('An error occurred: ' + jqXHR.responseJSON.message);
                     },
-                    xhr: function() {
+                    xhr: function () {
                         var xhr = new window.XMLHttpRequest();
-                        xhr.upload.addEventListener("progress", function(evt) {
+                        xhr.upload.addEventListener("progress", function (evt) {
                             if (evt.lengthComputable) {
                                 var percentComplete = evt.loaded / evt.total;
                                 percentComplete = parseInt(percentComplete * 100);
@@ -182,13 +103,63 @@ <h4>Downloading...</h4>
                     }
                 });
             });
-        });
+
+            // AJAX search function
+            $('#searchType').change(function () {
+                performSearch();
+            });
+
+            $('#url').on('input', function () {
+                performSearch();
+            });
+
+            function performSearch() {
+                var query = $('#url').val();
+                var searchType = $('#searchType').val();
+
+                if (query.length >= 3) {
+                    $.ajax({
+                        url: '/search',
+                        type: 'GET',
+                        data: {
+                            query: query,
+                            searchType: searchType
+                        },
+                        success: function (data) {
+                            displaySearchResults(data);
+                        },
+                        error: function (jqXHR, textStatus, errorThrown) {
+                            console.error('Error performing search:', errorThrown);
+                        }
+                    });
+                } else {
+                    $('#search-results').empty();
+                }
+            }
+
+            function displaySearchResults(results) {
+                $('#search-results').empty();
+
+                if (results.length > 0) {
+                    var ul = $('<ul class="list-group"></ul>');
+
+                    results.forEach(function (item) {
+                        var li = $('<li class="list-group-item"></li>');
+                        var link = $('<a href="' + item.url + '" target="_blank">' + item.text + '</a>');
+                        li.append(link);
+                        ul.append(li);
+                    });
+
+                    $('#search-results').append(ul);
+                } else {
+                    $('#search-results').append('<p>No results found.</p>');
+                }
+            }
         </script>
-        
-        <div class="footer mt-5">
+        <div class="footer">
             <p>QoBuzDlGui-Reborn &copy; Gyarbij and LilKidSuave 2023-2024</p>
         </div>
-    </div>   
+    </div>
 </body>
 
 </html>

No results found