Make top albums and artists async
This commit is contained in:
@@ -133,28 +133,32 @@ defmodule MusicLibraryWeb.StatsLive.Index do
|
||||
timezone = socket.assigns.timezone
|
||||
current_time = DateTime.utc_now()
|
||||
|
||||
top_albums =
|
||||
ScrobbleActivity.get_top_albums_by_periods(
|
||||
limit: 10,
|
||||
current_time: current_time,
|
||||
timezone: timezone
|
||||
)
|
||||
assign_async(socket, :top_albums, fn ->
|
||||
top_albums =
|
||||
ScrobbleActivity.get_top_albums_by_periods(
|
||||
limit: 10,
|
||||
current_time: current_time,
|
||||
timezone: timezone
|
||||
)
|
||||
|
||||
assign(socket, top_albums: top_albums)
|
||||
{:ok, %{top_albums: top_albums}}
|
||||
end)
|
||||
end
|
||||
|
||||
defp assign_top_artists(socket) do
|
||||
timezone = socket.assigns.timezone
|
||||
current_time = DateTime.utc_now()
|
||||
|
||||
top_artists =
|
||||
ScrobbleActivity.get_top_artists_by_periods(
|
||||
limit: 10,
|
||||
current_time: current_time,
|
||||
timezone: timezone
|
||||
)
|
||||
assign_async(socket, :top_artists, fn ->
|
||||
top_artists =
|
||||
ScrobbleActivity.get_top_artists_by_periods(
|
||||
limit: 10,
|
||||
current_time: current_time,
|
||||
timezone: timezone
|
||||
)
|
||||
|
||||
assign(socket, top_artists: top_artists)
|
||||
{:ok, %{top_artists: top_artists}}
|
||||
end)
|
||||
end
|
||||
|
||||
# The Tailwind build step requires all needed classes to be explicitly referenced
|
||||
|
||||
@@ -74,67 +74,81 @@
|
||||
<h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
|
||||
{gettext("Top Artists")}
|
||||
</h1>
|
||||
<.tabs class="mt-4">
|
||||
<.tabs_list active_tab="top_artists_last_30_days" variant="segmented">
|
||||
<:tab class="flex-1" name="top_artists_last_30_days">{gettext("Last 30 days")}</:tab>
|
||||
<:tab class="flex-1" name="top_artists_last_90_days">{gettext("Last 90 days")}</:tab>
|
||||
<:tab class="flex-1" name="top_artists_last_365_days">{gettext("Last year")}</:tab>
|
||||
<:tab class="flex-1" name="top_artists_all_time">{gettext("All time")}</:tab>
|
||||
</.tabs_list>
|
||||
<.tabs_panel active name="top_artists_last_30_days">
|
||||
<.top_artists_by_period artists={@top_artists.last_30_days} />
|
||||
</.tabs_panel>
|
||||
<.tabs_panel name="top_artists_last_90_days">
|
||||
<.top_artists_by_period artists={@top_artists.last_90_days} />
|
||||
</.tabs_panel>
|
||||
<.tabs_panel name="top_artists_last_365_days">
|
||||
<.top_artists_by_period artists={@top_artists.last_365_days} />
|
||||
</.tabs_panel>
|
||||
<.tabs_panel name="top_artists_all_time">
|
||||
<.top_artists_by_period artists={@top_artists.all_time} />
|
||||
</.tabs_panel>
|
||||
</.tabs>
|
||||
<.async_result :let={top_artists} assign={@top_artists}>
|
||||
<:loading>
|
||||
<div class="h-192 flex items-center justify-center">
|
||||
<.loading />
|
||||
</div>
|
||||
</:loading>
|
||||
<.tabs class="mt-4">
|
||||
<.tabs_list active_tab="top_artists_last_30_days" variant="segmented">
|
||||
<:tab class="flex-1" name="top_artists_last_30_days">{gettext("Last 30 days")}</:tab>
|
||||
<:tab class="flex-1" name="top_artists_last_90_days">{gettext("Last 90 days")}</:tab>
|
||||
<:tab class="flex-1" name="top_artists_last_365_days">{gettext("Last year")}</:tab>
|
||||
<:tab class="flex-1" name="top_artists_all_time">{gettext("All time")}</:tab>
|
||||
</.tabs_list>
|
||||
<.tabs_panel active name="top_artists_last_30_days">
|
||||
<.top_artists_by_period artists={top_artists.last_30_days} />
|
||||
</.tabs_panel>
|
||||
<.tabs_panel name="top_artists_last_90_days">
|
||||
<.top_artists_by_period artists={top_artists.last_90_days} />
|
||||
</.tabs_panel>
|
||||
<.tabs_panel name="top_artists_last_365_days">
|
||||
<.top_artists_by_period artists={top_artists.last_365_days} />
|
||||
</.tabs_panel>
|
||||
<.tabs_panel name="top_artists_all_time">
|
||||
<.top_artists_by_period artists={top_artists.all_time} />
|
||||
</.tabs_panel>
|
||||
</.tabs>
|
||||
</.async_result>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
|
||||
{gettext("Top Albums")}
|
||||
</h1>
|
||||
<.tabs class="mt-4">
|
||||
<.tabs_list active_tab="top_albums_last_30_days" variant="segmented">
|
||||
<:tab class="flex-1" name="top_albums_last_30_days">{gettext("Last 30 days")}</:tab>
|
||||
<:tab class="flex-1" name="top_albums_last_90_days">{gettext("Last 90 days")}</:tab>
|
||||
<:tab class="flex-1" name="top_albums_last_365_days">{gettext("Last year")}</:tab>
|
||||
<:tab class="flex-1" name="top_albums_all_time">{gettext("All time")}</:tab>
|
||||
</.tabs_list>
|
||||
<.tabs_panel active name="top_albums_last_30_days">
|
||||
<.top_albums_by_period
|
||||
albums={@top_albums.last_30_days}
|
||||
collected_releases={@top_albums.collected_releases}
|
||||
wishlisted_releases={@top_albums.wishlisted_releases}
|
||||
/>
|
||||
</.tabs_panel>
|
||||
<.tabs_panel name="top_albums_last_90_days">
|
||||
<.top_albums_by_period
|
||||
albums={@top_albums.last_90_days}
|
||||
collected_releases={@top_albums.collected_releases}
|
||||
wishlisted_releases={@top_albums.wishlisted_releases}
|
||||
/>
|
||||
</.tabs_panel>
|
||||
<.tabs_panel name="top_albums_last_365_days">
|
||||
<.top_albums_by_period
|
||||
albums={@top_albums.last_365_days}
|
||||
collected_releases={@top_albums.collected_releases}
|
||||
wishlisted_releases={@top_albums.wishlisted_releases}
|
||||
/>
|
||||
</.tabs_panel>
|
||||
<.tabs_panel name="top_albums_all_time">
|
||||
<.top_albums_by_period
|
||||
albums={@top_albums.all_time}
|
||||
collected_releases={@top_albums.collected_releases}
|
||||
wishlisted_releases={@top_albums.wishlisted_releases}
|
||||
/>
|
||||
</.tabs_panel>
|
||||
</.tabs>
|
||||
<.async_result :let={top_albums} assign={@top_albums}>
|
||||
<:loading>
|
||||
<div class="h-192 flex items-center justify-center">
|
||||
<.loading />
|
||||
</div>
|
||||
</:loading>
|
||||
<.tabs class="mt-4">
|
||||
<.tabs_list active_tab="top_albums_last_30_days" variant="segmented">
|
||||
<:tab class="flex-1" name="top_albums_last_30_days">{gettext("Last 30 days")}</:tab>
|
||||
<:tab class="flex-1" name="top_albums_last_90_days">{gettext("Last 90 days")}</:tab>
|
||||
<:tab class="flex-1" name="top_albums_last_365_days">{gettext("Last year")}</:tab>
|
||||
<:tab class="flex-1" name="top_albums_all_time">{gettext("All time")}</:tab>
|
||||
</.tabs_list>
|
||||
<.tabs_panel active name="top_albums_last_30_days">
|
||||
<.top_albums_by_period
|
||||
albums={top_albums.last_30_days}
|
||||
collected_releases={top_albums.collected_releases}
|
||||
wishlisted_releases={top_albums.wishlisted_releases}
|
||||
/>
|
||||
</.tabs_panel>
|
||||
<.tabs_panel name="top_albums_last_90_days">
|
||||
<.top_albums_by_period
|
||||
albums={top_albums.last_90_days}
|
||||
collected_releases={top_albums.collected_releases}
|
||||
wishlisted_releases={top_albums.wishlisted_releases}
|
||||
/>
|
||||
</.tabs_panel>
|
||||
<.tabs_panel name="top_albums_last_365_days">
|
||||
<.top_albums_by_period
|
||||
albums={top_albums.last_365_days}
|
||||
collected_releases={top_albums.collected_releases}
|
||||
wishlisted_releases={top_albums.wishlisted_releases}
|
||||
/>
|
||||
</.tabs_panel>
|
||||
<.tabs_panel name="top_albums_all_time">
|
||||
<.top_albums_by_period
|
||||
albums={top_albums.all_time}
|
||||
collected_releases={top_albums.collected_releases}
|
||||
wishlisted_releases={top_albums.wishlisted_releases}
|
||||
/>
|
||||
</.tabs_panel>
|
||||
</.tabs>
|
||||
</.async_result>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user