diff --git a/apps/lol_analytics_web/lib/lol_analytics_web/components/loader.ex b/apps/lol_analytics_web/lib/lol_analytics_web/components/loader.ex new file mode 100644 index 0000000..3e5277c --- /dev/null +++ b/apps/lol_analytics_web/lib/lol_analytics_web/components/loader.ex @@ -0,0 +1,28 @@ +defmodule LolAnalyticsWeb.Loader do + use Phoenix.Component + + def loader(assigns) do + ~H""" +
+ Loading + + Loading... +
+ """ + end +end diff --git a/apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/components/champion_filters.ex b/apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/components/champion_filters.ex index f6fddee..1bacb68 100644 --- a/apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/components/champion_filters.ex +++ b/apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/components/champion_filters.ex @@ -17,49 +17,16 @@ defmodule LolAnalyticsWeb.ChampionLive.Components.ChampionFilters do def mount(socket) do socket = assign(socket, :roles, @roles_definition) - |> assign(:form, build_roles_form()) {:ok, socket} end - defp build_roles() do - @roles_definition - |> Enum.reduce(%{}, fn role, acc -> - Map.merge(acc, %{"#{role.value}" => false}) - end) - |> Map.merge(%{"all" => true}) - end - - defp build_roles_form() do - @roles_definition - |> Enum.reduce(%{}, fn role, acc -> - Map.merge(acc, %{"#{role.value}" => false}) - end) - |> Map.merge(%{"all" => true}) - |> to_form - end - - def handle_event("filter", unsigned_params, socket) do - # updated_form = - # unsigned_params - # |> Enum.map(fn {key, val} -> {key, key == unsigned_params["_target"]} end) - - IO.inspect(unsigned_params) - # # assign() - # {:noreply, socket |> assign(:form, to_form(updated_form))} - end - attr :selectedrole, :string, required: true attr :roles, :list, default: [] def render(assigns) do - IO.puts(">>>>1") - # IO.inspect(assigns) - IO.inspect(assigns.selectedrole) - IO.inspect(">>>>>2") - selected_class = - "px-8 py-2 flex flex-row gap-2 align-middle rounded-md border-gray-200 border border-sky-500" + "px-8 py-2 flex flex-row gap-2 align-middle rounded-full border-gray-200 border border-orange-600 cursor-pointer" ~H"""
@@ -68,16 +35,14 @@ defmodule LolAnalyticsWeb.ChampionLive.Components.ChampionFilters do <%!-- <%= IO.inspect(role) %> --%> <%= if (assigns.selectedrole == role.value) do %>
- <%!-- <.input enabled={false} type="checkbox" field={@form[role.value]} /> --%>

<%= role.title %>

<% else %>
- <%!-- <.input enabled={false} type="checkbox" field={@form[role.value]} /> --%>

<%= role.title %>

<% end %> diff --git a/apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/index.ex b/apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/index.ex index a729ccd..46ece5c 100644 --- a/apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/index.ex +++ b/apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/index.ex @@ -2,51 +2,74 @@ defmodule LoLAnalyticsWeb.ChampionLive.Index do use LoLAnalyticsWeb, :live_view import LolAnalyticsWeb.ChampionComponents.ChampionCard + import LolAnalyticsWeb.Loader + import Phoenix.VerifiedRoutes alias LolAnalyticsWeb.ChampionLive.Mapper alias LolAnalyticsWeb.ChampionLive.Components.ChampionFilters @behaviour LolAnalyticsWeb.ChampionFilters.EventHandler - @roles [ - %{title: "All", value: "all"}, - %{title: "Top", value: "TOP"}, - %{title: "Jungle", value: "JUNGLE"}, - %{title: "Mid", value: "MIDDLE"}, - %{title: "Bot", value: "BOTTOM"}, - %{title: "Support", value: "UTILITY"} - ] - @impl true def mount(_params, _session, socket) do - champs = LolAnalytics.Facts.ChampionPlayedGame.Repo.get_win_rates() - - mapped = - champs - |> Mapper.map_champs() - |> Enum.sort(&(&1.win_rate >= &2.win_rate)) - socket = socket - |> stream(:champions, mapped) + |> assign(:champions, %{status: :loading}) + |> load_champs("all") |> assign(:selected_role, "all") {:ok, socket} end + def handle_params(params, _uri, socket) do + socket = + case params["role"] do + role -> {:noreply, assign(socket, selected_role: role)} + _ -> {:noreply, socket} + end + end + @impl true def handle_event("filter", %{"role" => selected_role} = params, socket) do - champs = - LolAnalytics.Facts.ChampionPlayedGame.Repo.get_win_rates() - |> filter_champs(selected_role) - - {:noreply, + {:reply, %{}, socket - |> stream(:champions, champs) + |> push_navigate(to: ~p"/champions?#{params}") + |> assign(:champions, %{status: :loading}) + |> load_champs(selected_role) |> assign(:selected_role, selected_role)} end - def handle_event("filter_champs", params, socket) do + defp load_champs(socket, selected_role) do + socket + |> start_async( + :get_champs, + fn -> + LolAnalytics.Facts.ChampionPlayedGame.Repo.get_win_rates() + |> filter_champs(selected_role) + end + ) + end + + def handle_async(:get_champs, {:ok, fetched_events} = params, socket) do + {:noreply, assign(socket, :champions, %{status: :data, data: fetched_events})} + end + + def render_champions(assigns) do + case assigns.champions do + %{status: :loading} -> + ~H""" + <.loader /> + """ + + %{status: :data, data: champions} -> + ~H""" +
+ <%= for champion <- champions do %> + <.champion_card props={champion} /> + <% end %> +
+ """ + end end defp filter_champs(champs, selected_role) do diff --git a/apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/index.html.heex b/apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/index.html.heex index c5f4e83..b358572 100644 --- a/apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/index.html.heex +++ b/apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/index.html.heex @@ -7,12 +7,8 @@ <.live_component module={ChampionFilters} id="role-filters" selectedrole={@selected_role} /> +<.render_champions champions={@champions} /> -
- <%= for {_, champion} <- @streams.champions do %> - <.champion_card props={champion} /> - <% end %> -
<.modal :if={@live_action in [:new, :edit]} id="champion-modal" show on_cancel={JS.patch(~p"/champions")}> <.live_component module={LoLAnalyticsWeb.ChampionLive.FormComponent} id={@champion.champion_id || :new} diff --git a/apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/show.html.heex b/apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/show.html.heex index 28b9a5d..13c9e7f 100644 --- a/apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/show.html.heex +++ b/apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/show.html.heex @@ -8,8 +8,4 @@
-<.summoner_spells spells={@summoner_spells} /> - -<.back navigate={~p"/champions"}> - Back to champions - \ No newline at end of file +<.summoner_spells spells={@summoner_spells} /> \ No newline at end of file