Christian Krakau-Louis
172 lines
8.4 KiB
HTML
172 lines
8.4 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block title %}Spotify Client Test{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="max-w-7xl mx-auto px-4 py-8">
|
|
<h1 class="text-3xl font-bold mb-2 text-navy-800 font-montserrat">Spotify Client Comparison</h1>
|
|
<p class="text-gray-600 mb-6">Comparing spotipy library vs direct API implementation.</p>
|
|
|
|
<!-- Account Selection -->
|
|
<div class="bg-white shadow-md rounded-lg p-6 mb-8">
|
|
<form method="GET" action="{{ url_for('import.test_spotify_client') }}" class="space-y-4">
|
|
<div>
|
|
<label for="account" class="block text-sm font-medium text-gray-700 mb-1">Spotify Account</label>
|
|
<select name="account" id="account"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-teal-500 focus:border-teal-500">
|
|
<option value="spotify" {% if account == 'spotify' %}selected{% endif %}>spotify</option>
|
|
<option value="spotifycharts" {% if account == 'spotifycharts' %}selected{% endif %}>spotifycharts</option>
|
|
<option value="spotifymaps" {% if account == 'spotifymaps' %}selected{% endif %}>spotifymaps</option>
|
|
<option value="spotifyuk" {% if account == 'spotifyuk' %}selected{% endif %}>spotifyuk</option>
|
|
<option value="spotifyusa" {% if account == 'spotifyusa' %}selected{% endif %}>spotifyusa</option>
|
|
<option value="spotify_germany" {% if account == 'spotify_germany' %}selected{% endif %}>spotify_germany</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<button type="submit" class="bg-orange-500 hover:bg-orange-600 text-white py-2 px-4 rounded-md shadow-sm transition-colors">
|
|
Test Account
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Results Summary -->
|
|
<div class="bg-white shadow-md rounded-lg p-6 mb-8">
|
|
<h2 class="text-xl font-bold mb-4">Results Summary</h2>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<!-- Spotipy Results -->
|
|
<div class="border border-gray-200 rounded-lg p-4">
|
|
<h3 class="text-lg font-semibold mb-2">Spotipy Implementation</h3>
|
|
<div class="space-y-2">
|
|
<div class="flex justify-between border-b border-gray-100 pb-1">
|
|
<span class="text-gray-700">Playlists Retrieved:</span>
|
|
<span class="font-medium">{{ results.spotipy.count }}</span>
|
|
</div>
|
|
<div class="flex justify-between border-b border-gray-100 pb-1">
|
|
<span class="text-gray-700">Expected Total:</span>
|
|
<span class="font-medium">{{ results.spotipy.total }}</span>
|
|
</div>
|
|
<div class="flex justify-between border-b border-gray-100 pb-1">
|
|
<span class="text-gray-700">Execution Time:</span>
|
|
<span class="font-medium">{{ results.spotipy.time_ms }} ms</span>
|
|
</div>
|
|
{% if results.spotipy.error %}
|
|
<div class="mt-2 p-2 bg-red-50 text-red-700 rounded">
|
|
<strong>Error:</strong> {{ results.spotipy.error }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Direct API Results -->
|
|
<div class="border border-gray-200 rounded-lg p-4">
|
|
<h3 class="text-lg font-semibold mb-2">Direct API Implementation</h3>
|
|
<div class="space-y-2">
|
|
<div class="flex justify-between border-b border-gray-100 pb-1">
|
|
<span class="text-gray-700">Playlists Retrieved:</span>
|
|
<span class="font-medium">{{ results.direct.count }}</span>
|
|
</div>
|
|
<div class="flex justify-between border-b border-gray-100 pb-1">
|
|
<span class="text-gray-700">Expected Total:</span>
|
|
<span class="font-medium">{{ results.direct.total }}</span>
|
|
</div>
|
|
<div class="flex justify-between border-b border-gray-100 pb-1">
|
|
<span class="text-gray-700">Execution Time:</span>
|
|
<span class="font-medium">{{ results.direct.time_ms }} ms</span>
|
|
</div>
|
|
{% if results.direct.error %}
|
|
<div class="mt-2 p-2 bg-red-50 text-red-700 rounded">
|
|
<strong>Error:</strong> {{ results.direct.error }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Comparison -->
|
|
<div class="bg-white shadow-md rounded-lg p-6 mb-8">
|
|
<h2 class="text-xl font-bold mb-4">Implementation Comparison</h2>
|
|
|
|
<div class="space-y-4">
|
|
<div class="flex items-center">
|
|
<div class="w-1/3 font-medium">Playlists in both implementations:</div>
|
|
<div class="w-2/3">{{ comparison.in_both|length }}</div>
|
|
</div>
|
|
|
|
<div class="flex items-center">
|
|
<div class="w-1/3 font-medium">Only in spotipy:</div>
|
|
<div class="w-2/3">{{ comparison.only_in_spotipy|length }}</div>
|
|
</div>
|
|
|
|
<div class="flex items-center">
|
|
<div class="w-1/3 font-medium">Only in direct API:</div>
|
|
<div class="w-2/3">{{ comparison.only_in_direct|length }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Playlist Details -->
|
|
<div class="flex flex-col md:flex-row gap-6">
|
|
<!-- Spotipy Playlists -->
|
|
<div class="w-full md:w-1/2">
|
|
<div class="bg-white shadow-md rounded-lg p-6">
|
|
<h3 class="text-lg font-semibold mb-4">Spotipy Playlists ({{ results.spotipy.count }})</h3>
|
|
{% if results.spotipy.playlists %}
|
|
<div class="overflow-y-auto max-h-96">
|
|
<table class="min-w-full">
|
|
<thead>
|
|
<tr>
|
|
<th class="px-4 py-2 border-b text-left">#</th>
|
|
<th class="px-4 py-2 border-b text-left">Name</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for playlist in results.spotipy.playlists %}
|
|
<tr>
|
|
<td class="px-4 py-2 border-b">{{ loop.index }}</td>
|
|
<td class="px-4 py-2 border-b">{{ playlist.name }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<p class="text-gray-500">No playlists retrieved.</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Direct API Playlists -->
|
|
<div class="w-full md:w-1/2">
|
|
<div class="bg-white shadow-md rounded-lg p-6">
|
|
<h3 class="text-lg font-semibold mb-4">Direct API Playlists ({{ results.direct.count }})</h3>
|
|
{% if results.direct.playlists %}
|
|
<div class="overflow-y-auto max-h-96">
|
|
<table class="min-w-full">
|
|
<thead>
|
|
<tr>
|
|
<th class="px-4 py-2 border-b text-left">#</th>
|
|
<th class="px-4 py-2 border-b text-left">Name</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for playlist in results.direct.playlists %}
|
|
<tr>
|
|
<td class="px-4 py-2 border-b">{{ loop.index }}</td>
|
|
<td class="px-4 py-2 border-b">{{ playlist.name }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<p class="text-gray-500">No playlists retrieved.</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %} |