[FIX] php: AlpineJS template issue

php/src/public/js/app.js

@@ -1,4 +1,5 @@
 const appModal = $('#modalDownloadQueue');
+const loader = $("#loader-wrapper");
 
 function proc_notification(icon, title, text) {
     Swal.fire({
@@ -8,12 +9,11 @@ function proc_notification(icon, title, text) {
     })
 }
 
-$('.settings_btn').on('click', () => {
+$('#settings_btn').on('click', () => {
     $('#modalSettings').modal('toggle');
 })
 
-$('.queue_btn').on('click', () => {
-    console.log('Get Queue!');
+$('#queue_btn').on('click', () => {
     appModal.modal('toggle');
 })
 
@@ -29,18 +29,17 @@ $('#download_btn').on('click', () => {
         $("#loader-wrapper").fadeIn(300);
         $.ajax({
             url: `/api/v1/get/artist/${artist}`,
+            async: false,
         }).done(function (res) {
             text = res.message;
             if (res.status === 200) {
                 icon = 'success';
                 title = 'Shazam!';
             }
-            $("#loader-wrapper").fadeOut(700);
-            proc_notification(icon, title, text);
         });
-    } else {
-        proc_notification(icon, title, text);
     }
+    loader().fadeOut(700);
+    proc_notification(icon, title, text);
 })
 
 document.addEventListener('alpine:init', () => {
@@ -48,6 +47,7 @@ document.addEventListener('alpine:init', () => {
     Alpine.store('app', {
         init() {
             this.Artists = [];
+            this.Queue = [];
         },
 
         Artists: [],

php/src/resources/views/components/action-menu.blade.php

@@ -1,10 +1,12 @@
 <div id="action_list">
     <span>
-        <a href="#download-queue" class="pl-2">
-            <i class="las la-2x la-list queue_btn"></i>
+        <a id="queue_btn" href="#download-queue" class="p-2">
+            <i class="las la-list queue_btn"></i>
+            Queue
         </a>
-        <a href="#settings" class="pl-2">
-            <i class="las la-2x la-cog settings_btn"></i>
+        <a id="settings_btn" href="#settings" class="p-2">
+            <i class="las la-cog settings_btn"></i>
+            Settings
         </a>
     </span>
 </div>

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

@@ -1,5 +1,7 @@
 <div class="row">
-    <template x-for="album in $store.app.Queue" x-if="$store.app.Queue">
+
+    <template x-if="$store.app.Queue.length > 0" >
+        <template x-for="album in $store.app.Queue">
         <div class="col-12">
             <div class="queue_card">
                 <div class="card mb-3 p-0">
@@ -15,18 +17,19 @@
                                     </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;">
+                                <img :src="album.image" class="img-fluid rounded-start"
+                                     :alt="album.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">
+                                <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>
+                                    style="font-weight: bold; font-family: serif;"><span x-text="album.artist_id.name"/>
+                                </h5>
 
                                 <template x-if="album.state === 'progress'">
                                     <p>Downloading...</p>
@@ -44,7 +47,9 @@
             </div>
         </div>
     </template>
-    <template x-if="!$store.app.Queue">
+    </template>
+
+    <template x-if="$store.app.Queue.length === 0">
         <p>Queue is empty</p>
     </template>
 

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

@@ -20,7 +20,7 @@
 
 </head>
 
-<body>
+<body x-data="{}">
 
 <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%;">