[IMP] php: Add datatables artist catalog for client

php/src/app/Http/Controllers/ApiController.php

@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Artist;
+use Illuminate\Http\Request;
+
+class ApiController extends Controller
+{
+    public function get_artists(Request $request)
+    {
+
+        $artists = Artist::all();
+        $data = array();
+
+        foreach ($artists as $artist) {
+            $data[] = [
+                'id' => $artist->id,
+                'name' => $artist->name,
+                'url_remote' => $artist->url_remote,
+                'state' => $artist->state,
+                'thumbnail' => $artist->thumbnail,
+            ];
+        }
+
+        \Log::info('=======================');
+        $response = json_encode( array('data' => $data));
+        \Log::info($response);
+        return $response;
+    }
+}

php/src/app/Models/ArtistQueue.php

@@ -0,0 +1,11 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class ArtistQueue extends Model
+{
+    use HasFactory;
+}

php/src/database/migrations/2024_08_10_231142_create_artist_queues_table.php

@@ -0,0 +1,33 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration {
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('artist_queues', function (Blueprint $table) {
+            $table->id();
+            $table->timestamps();
+            $table->foreignId('artist_id')->constrained('artists');
+            $table->foreignId('album_id')->nullable()->constrained('albums');
+            $table->enum('state', [
+                'pending',
+                'in_progress',
+                'done',
+            ])->default('pending');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('artist_queues');
+    }
+};

php/src/public/js/app.js

@@ -57,6 +57,7 @@ $('#download_btn').on('click', () => {
     let icon = 'error';
     let title = 'What the flip?!';
 
+    // Send request to server
     setTimeout(() => {
         if (artist) {
             console.log('Sending search request...');
@@ -85,7 +86,7 @@ $('#download_btn').on('click', () => {
             proc_notification(icon, title, 'You need to add an artist, c\'mon man!');
             loader.fadeOut(700);
         }
-    }, 100);
+    }, 10);
 
 });
 
@@ -96,7 +97,7 @@ document.addEventListener('alpine:init', () => {
             // TODO: Poll for artists and queue
             this.Artists = [];
             this.Queue = [];
-            this.ArtistResults = []
+            this.ArtistResults = [];
         },
 
         Artists: [],          // Rendered in the 'Artists' modal
@@ -108,3 +109,28 @@ document.addEventListener('alpine:init', () => {
     $("#loader-wrapper").fadeOut(900);
 
 });
+
+$(document).ready(function () {
+    let ArtistTable = $('#artistsCatalogDatatable').DataTable({
+        ajax: '/api/artists',
+        type: 'get',
+        dataType: 'json',
+        columns: [
+            {data: 'thumbnail', render: (data) => { return `<img src="${data}" height=48 width="48" style="border-radius: 6px;"/>`}},
+            {data: 'name'},
+            {title: 'Channel', data: 'url_remote', render: (data) => {return `<a href="https://music.youtube.com/${data}" class="btn btn-danger" target="_blank"><i class="lab la-youtube"></i></a>`}},
+            {data: 'state'},
+            {data: 'id', render: (data, row) => {
+                let stateDiable = row.state === 'in_progress' ? 'disabled': '';
+                let stateClass = row.state === 'in_progress' ? '': 'btn-primary';
+                return `<button class="btn ${stateClass}" hx-get="/api/artist/toggle" ${stateDiable}><i class="las la-cloud-download-alt"></i> Download</button>`}
+            }
+        ],
+    });
+
+    // const getArtistTableInterval = setInterval(function() {
+    //     table.ajax.reload();
+    // }, 5000);
+
+});
+

php/src/resources/views/modals/modal-catalog.blade.php

@@ -5,13 +5,37 @@
         class="modal-dialog  modal-dialog-centered modal-fullscreen modal-dialog-scrollable modal-fullscreen-md-down modal-fullscreen-sm-down">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title" id="exampleModalLabel">Catalog</h5>
+                <h5 class="modal-title" id="exampleModalLabel">Artist Catalog</h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal"
                         aria-label="Close"></button>
             </div>
             <div class="modal-body">
                 <div id="modal_content">
-                    <div id="catalogDatatable"></div>
+
+                    <div class="card">
+                        <table id="artistsCatalogDatatable">
+                            <thead>
+                            <tr>
+                                <th></th>
+                                <th>Name</th>
+                                <th>Channel</th>
+                                <th>State</th>
+                                <th></th>
+                            </tr>
+                            </thead>
+
+                            <tfoot>
+                            <tr>
+                                <th></th>
+                                <th>Name</th>
+                                <th>Channel</th>
+                                <th>State</th>
+                                <th></th>
+                            </tr>
+                            </tfoot>
+                        </table>
+                    </div>
+
                 </div>
             </div>
             <div class="modal-footer">

php/src/routes/web.php

@@ -1,5 +1,6 @@
 <?php
 
+use App\Http\Controllers\ApiController;
 use App\Http\Controllers\SearchController;
 use Illuminate\Support\Facades\Route;
 
@@ -7,4 +8,6 @@ Route::get('/', function () {
     return view('pages.main');
 });
 
-Route::get('/artist/{artist}', [SearchController::class, 'search_artist']);
+Route::get('/artist/{artist}', [SearchController::class, 'search_artist'])->name('api.search.artist');
+
+Route::get('api/artists/', [ApiController::class, 'get_artists'])->name('api.artist');