brett.spaulding
/
getDiscography
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[WIP] view rendering issue

Browse Source
refactor_total
Brett Spaulding 1 year ago
parent bbcee3ba06
commit 4ab79d3aab
9 changed files with 84 additions and 82 deletions
Show Stats Download Patch File Download Diff File

29
README.md
Unescape View File

@ -1,29 +1,16 @@
# getDiscography
[For Educational Purposes Only!]
Flask based utility that will allow a user to download an entire Discography for the provided artist.
#### Music Artist Discography Download Utility
## How to use:
This full-stack application will allow users to enter an artist, verify the target and queue up the albums to download.
Open the root directory of this project in a terminal.
Written in Laravel (Application) and Python (Task Runner).
Create a virtual environment with python.
```
python -m venv .
```
To start:
*For more about virtual environments, look here: https://docs.python.org/3/library/venv.html*
``docker compose up -d``
While in the virtual env (venv) install the requirements.txt file with:
```
pip install -r ./requirements.txt
```
To stop:
After all dependencies have been installed successfully, start the service with:
```
python app.py
```
The service will then be accessible at http://localhost for as long as the terminal stays open. To shutdown the service simply close the terminal or ctl + c
## Known issues
The latest versions of Ubuntu (22.04+ I believe) have swicted over to symlinking Firefox to the snap packages. Which causes an issue with the selenium driver. I suppose you could probably point to the executable file directly in the snap (not the symlink). I just use docker with a distro that doesn't have this problem, personally.
``docker compose down``

29
php/src/public/js/app.js
Unescape View File

@ -1,6 +1,4 @@
const appModal = $('#modalDownloadQueue');
const appModalContent = $('#modal_content');
let modalPolling = false;
function proc_notification(icon, title, text) {
Swal.fire({
@ -10,25 +8,12 @@ function proc_notification(icon, title, text) {
})
}
function fill_download_queue() {
$.ajax({
url: '/api/v1/get/queue'
}).done((res) => {
appModalContent.html(res);
})
}
$('.settings_btn').on('click', () => {
$('#modalSettings').modal('toggle');
})
$('.queue_btn').on('click', () => {
console.log('Get Queue!');
if (modalPolling) {
clearInterval(modalPolling);
}
fill_download_queue();
modalPolling = setInterval(fill_download_queue, 12000);
appModal.modal('toggle');
})
@ -56,5 +41,17 @@ $('#download_btn').on('click', () => {
} else {
proc_notification(icon, title, text);
}
})
})
document.addEventListener('alpine:init', () => {
console.log('Alpine:init');
Alpine.store('app', {
init() {
this.Artists = [];
},
Artists: [],
Queue: false,
})
})

2
php/src/resources/views/assets/scripts-footer.blade.php
Unescape View File

@ -3,7 +3,7 @@
crossorigin="anonymous"></script>
<script type="text/javascript">
$(window).on('load', function () {
$("#loader-wrapper").fadeOut(900);
//$("#loader-wrapper").fadeOut(900);
});
</script>
<script src="{{ asset('js/app.js') }}"></script>

51
php/src/resources/views/components/download-queue.blade.php
Unescape View File

@ -0,0 +1,51 @@
<div class="row">
<template x-for="album in $store.app.Queue" x-if="$store.app.Queue">
<div class="col-12">
<div class="queue_card">
<div class="card mb-3 p-0">
<div class="row g-0">
<div class="col-md-3">
<div class="dl_queue_img">
<!-- Downloading Spinner -->
<template x-if="album.state === 'progress'">
<div class="icn-downloading">
<i class="la la-6x la-compact-disc icn-spinner text-white"></i>
</div>
</template>
<!-- Album Art -->
<img src="@{{ album.image }}" class="img-fluid rounded-start"
alt="@{{ album_id.name }}" style="width: 100%; height: 100%; min-height: 180px;">
</div>
</div>
<div class="col-md-9 vinyl-card">
<div class="card-body">
<a href="@{{ album.url_remote }}" target="_blank">
<h3 class="card-title">@{{ album.name }}</h3>
</a>
<h5 class="card-text"
style="font-weight: bold; font-family: serif;">@{{ album.artist_id.name }}</h5>
<template x-if="album.state === 'progress'">
<p>Downloading...</p>
</template>
<template x-if="album.state === 'pending'">
<p class="text-muted">Waiting to Download</p>
</template>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<template x-if="!$store.app.Queue">
<p>Queue is empty</p>
</template>
</div>

8
php/src/resources/views/layouts/public.blade.php
Unescape View File

@ -19,9 +19,15 @@
@include('assets.scripts-header');
</head>
<body>
@include('components.loader');
<div id="loader-wrapper" class="bg-white position-fixed z-3 w-100 h-100 text-center">
<div class="centered text-center" role="status" style="position: fixed; top: 50%;">
<i class="la la-4x la-compact-disc icn-spinner"></i>
<h3>Loading..</h3>
</div>
</div>
<div id="content">
<div class="wrapper">

4
php/src/resources/views/modals/modal-download-queue.blade.php
Unescape View File

@ -10,7 +10,9 @@
aria-label="Close"></button>
</div>
<div class="modal-body">
<div id="modal_content"></div>
<div id="modal_content">
@include('components.download-queue')
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>

0
php/src/resources/views/pages/download.blade.php → php/src/resources/views/pages/main.blade.php
Unescape View File

2
php/src/routes/web.php
Unescape View File

@ -3,5 +3,5 @@
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('pages.download');
return view('pages.main');
});

41
python/templates/download_queue.html
Unescape View File

@ -1,41 +0,0 @@
<div class="row">
{% for album_id in album_ids %}
<div class="col-12">
<div class="queue_card">
<div class="card mb-3 p-0">
<div class="row g-0">
<div class="col-md-3">
<div class="dl_queue_img">
{% if album_id.downloading %}
<div class="icn-downloading">
<i class="la la-6x la-compact-disc icn-spinner text-white"></i>
</div>
{% endif %}
<img src="{{ album_id.cover }}" class="img-fluid rounded-start"
alt="{{ album_id.album }}" style="width: 100%; height: 100%; min-height: 180px;">
</div>
</div>
<div class="col-md-9 vinyl-card">
<div class="card-body">
<a href="https://youtube.com{{ album_id.link }}" target="_blank">
<h3 class="card-title">{{ album_id.album }}</h3>
</a>
<h5 class="card-text" style="font-weight: bold; font-family: serif;">{{ album_id.artist }}</h5>
{% if album_id.downloading %}
<p>Downloading...</p>
{% else %}
<p class="text-muted">Waiting to Download</p>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
{% else %}
<p>Nothing waiting to download</p>
{% endfor %}
</div>
Write Preview
Loading…
Cancel
Save