[WIP] view rendering issue

README.md

@@ -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.
+To start:
-``` 
-python -m venv .
-```
 
-*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:
+To stop:
-``` 
-pip install -r ./requirements.txt
-```
 
-After all dependencies have been installed successfully, start the service with:
+``docker compose down``
-```
-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.

php/src/public/js/app.js

@@ -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,
+
+    })
+})

php/src/resources/views/assets/scripts-footer.blade.php

@@ -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>

php/src/resources/views/components/download-queue.blade.php

@@ -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>

php/src/resources/views/layouts/public.blade.php

@@ -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">

php/src/resources/views/modals/modal-download-queue.blade.php

@@ -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>

php/src/routes/web.php

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

python/templates/download_queue.html

@@ -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>