Skip to content

Commit

Permalink
Update index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@lilkidsuave
lilkidsuave authored Jun 27, 2024
1 parent f145298 commit 995b74a
Showing 1 changed file with 76 additions and 105 deletions.
181 changes: 76 additions & 105 deletions templates/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -56,122 +44,55 @@ <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">
<div class="progress-bar" role="progressbar" style="width: 0%;" id="progress-bar"></div>
</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);
Expand All @@ -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>

0 comments on commit 995b74a

Please sign in to comment.