save display_mode to query string

apps/lol_analytics/lib/lol_analytics/application.ex

@@ -12,7 +12,7 @@ defmodule LoLAnalytics.Application do
       {DNSCluster, query: Application.get_env(:lol_analytics, :dns_cluster_query) || :ignore},
       {Phoenix.PubSub, name: LoLAnalytics.PubSub},
       {Task.Supervisor, name: LoLAnalytics.TaskSupervisor},
-      {LolAnalytics.MatchProcessor.MatchesBroadwayProcessor, []},
+      # {LolAnalytics.MatchProcessor.MatchesBroadwayProcessor, []},
       {LolAnalytics.MatchProcessor.MatchesProducer, []}
       # Start a worker by calling: LoLAnalytics.Worker.start_link(arg)
       # {LoLAnalytics.Worker, arg}

apps/lol_analytics_web/lib/lol_analytics_web/components/patch_selector.ex

@@ -50,7 +50,7 @@ defmodule LolAnalyticsWeb.PatchSelector do
             phx-change="selected_patch"
             id="patch"
             name="patch"
-            class="patch-selector block w-full rounded-md border border-gray-300 bg-white shadow-sm focus:border-zinc-400 focus:ring-0 sm:text-sm"
+            class="patch-selector cursor-pointer block w-full rounded-md border border-gray-300 bg-white shadow-sm focus:border-zinc-400 focus:ring-0 sm:text-sm"
           >
             <%= for patch <- @patch_numbers do %>
               <option key={patch} phx-click="select-patch" name={patch} value={patch}>

apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/components/champion_filters.ex

@@ -22,7 +22,6 @@ defmodule LolAnalyticsWeb.ChampionLive.Components.ChampionFilters do
   end
 
   attr :selectedrole, :string, required: true
-  attr :roles, :list, default: []
 
   def render(assigns) do
     selected_class =

apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/components/champions_list.ex

@@ -0,0 +1,79 @@
+defmodule LolAnalyticsWeb.ChampionLive.Components.ChampionsList do
+  use Phoenix.Component
+
+  attr :champion, :map
+
+  defp render_champion(assigns) do
+    detail_url =
+      "/champions/#{assigns.champion.id}?team-position=#{assigns.champion.team_position}&patch=#{assigns.champion.patch_number}"
+
+    ~H"""
+    <tr>
+      <td>
+        <.link patch={detail_url}>
+          <div class="flex cursor-pointer items-center gap-2">
+            <img
+              class="champion_image  rounded-md"
+              src={"https://ddragon.leagueoflegends.com/cdn/14.11.1/img/champion/#{assigns.champion.image}"}
+            />
+            <%= @champion.name %>
+          </div>
+        </.link>
+      </td>
+      <td><%= @champion.win_rate %>%</td>
+      <td><%= @champion.total_games %></td>
+      <td>
+        <img src={team_position_image(@champion.team_position)} class="w-5 h-5" />
+      </td>
+    </tr>
+    """
+  end
+
+  attr :champions, :list
+  attr :patch_number, :integer
+  attr :position, :string
+
+  def champions_list(assigns) do
+    ~H"""
+    <style>
+      .champion_image {
+        width: 50px;
+      }
+    </style>
+    <table class="table w-full">
+      <thead>
+        <tr>
+          <th scope="col" class="py-3 text-left text-gray-500 uppercase tracking-wider">
+            Champion
+          </th>
+          <th scope="col" class="py-3 text-left text-gray-500 uppercase tracking-wider">
+            Win rate
+          </th>
+          <th scope="col" class="py-3 text-left text-gray-500 uppercase tracking-wider">
+            Total games
+          </th>
+          <th scope="col" class="py-3 text-left text-gray-500 uppercase tracking-wider">
+            Position
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <%= for champion <- assigns.champions do %>
+          <div class="cursor-pointer">
+            <.link patch={"/champions/#{champion.id}?team-position=#{champion.team_position}&patch=#{champion.patch_number}"}>
+              <.render_champion champion={champion} ) />
+            </.link>
+          </div>
+        <% end %>
+        <!-- table rows and cells go here -->
+      </tbody>
+    </table>
+    """
+  end
+
+  defp team_position_image("BOTTOM"), do: "/images/lanes/bot.png"
+  defp team_position_image("MIDDLE"), do: "/images/lanes/mid.png"
+  defp team_position_image("TOP"), do: "/images/lanes/top.png"
+  defp team_position_image("JUNGLE"), do: "/images/lanes/jungle.png"
+  defp team_position_image("UTILITY"), do: "/images/lanes/utility.png"
+end

apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/index.ex

@@ -2,6 +2,7 @@ defmodule LoLAnalyticsWeb.ChampionLive.Index do
   use LoLAnalyticsWeb, :live_view
 
   import LolAnalyticsWeb.ChampionComponents.ChampionCard
+  import LolAnalyticsWeb.ChampionLive.Components.ChampionsList
   import LolAnalyticsWeb.Loader
   import Phoenix.VerifiedRoutes
 
@@ -15,12 +16,14 @@ defmodule LoLAnalyticsWeb.ChampionLive.Index do
   def mount(params, _session, socket) do
     role = params["role"] || "all"
     patch = params["patch"] || "14.12"
+    display_mode = params["display_mode"] || "grid"
 
     socket =
       socket
       |> assign(:selected_role, role)
       |> assign(:selected_patch, patch)
       |> assign(:champions, %{status: :loading})
+      |> assign(:display_mode, display_mode)
       |> load_champs(role, patch)
 
     {:ok, socket}
@@ -28,18 +31,22 @@ defmodule LoLAnalyticsWeb.ChampionLive.Index do
 
   def handle_params(params, _uri, socket) do
     role = params["role"] || "all"
-    patch = params["patch"] || "14.12"
+    patch = params["patch"] || "14.10"
+    display_mode = params["display_mode"] || "grid"
 
     {
       :noreply,
       assign(socket, selected_role: role)
       |> assign(selected_patch: patch)
+      |> assign(display_mode: display_mode)
     }
   end
 
   @impl true
   def handle_event("filter", %{"role" => selected_role} = params, socket) do
-    query = Map.merge(params, %{patch: socket.assigns.selected_patch || "14.12"})
+    query =
+      get_query_params(socket)
+      |> Map.merge(%{role: selected_role})
 
     {:reply, %{},
      socket
@@ -49,9 +56,22 @@ defmodule LoLAnalyticsWeb.ChampionLive.Index do
      |> assign(:selected_role, selected_role)}
   end
 
+  def handle_event("set-display-mode", %{"mode" => mode} = params, socket) do
+    query_params =
+      get_query_params(socket)
+      |> Map.merge(%{display_mode: mode})
+
+    {:noreply,
+     assign(socket, :display_mode, mode)
+     |> push_patch(to: ~p"/champions?#{query_params}")}
+  end
+
   def handle_info(%{patch: patch}, socket) do
     selected_role = socket.assigns.selected_role
-    query_params = %{role: selected_role, patch: patch}
+
+    query_params =
+      get_query_params(socket)
+      |> Map.merge(%{patch: patch})
 
     socket =
       assign(socket, :champions, %{status: :loading})
@@ -93,13 +113,54 @@ defmodule LoLAnalyticsWeb.ChampionLive.Index do
     {:noreply, assign(socket, :champions, %{status: :data, data: champs})}
   end
 
-  def render_champions(assigns) do
+  def render_display_mode_selector_selector(assigns) do
+    ~H"""
+    <div class="flex">
+      <div phx-click="set-display-mode" phx-value-mode="grid" class="cursor-pointer">
+        <.icon name={grid_icon(assigns.display_mode)} alt="table" />
+      </div>
+      <div phx-click="set-display-mode" phx-value-mode="list" class="cursor-pointer">
+        <.icon name={list_icon(assigns.display_mode)} alt="table" />
+      </div>
+    </div>
+    """
+  end
+
+  defp grid_icon(selected_display_mode) do
+    case selected_display_mode do
+      "grid" -> "hero-squares-2x2-solid"
+      "list" -> "hero-squares-2x2"
+    end
+  end
+
+  def list_icon(selected_display_mode) do
+    case selected_display_mode do
+      "grid" -> "hero-table-cells"
+      "list" -> "hero-table-cells-solid"
+    end
+  end
+
+  def render_champions_list(assigns) do
     case assigns.champions do
       %{status: :loading} ->
         ~H"""
         <.loader />
         """
 
+      %{status: :data, data: champions} ->
+        ~H"""
+        <.champions_list champions={champions} />
+        """
+    end
+  end
+
+  def render_champions_grid(%{:champions => champions_state} = assigns) do
+    case champions_state do
+      %{status: :loading} ->
+        ~H"""
+        <.loader />
+        """
+
       %{status: :data, data: champions} ->
         ~H"""
         <div id="champions" class="grid grid-cols-2 sm:grid-cols-4  gap-4">
@@ -126,4 +187,12 @@ defmodule LoLAnalyticsWeb.ChampionLive.Index do
     socket
     |> assign(:page_title, "Listing Champions")
   end
+
+  defp get_query_params(socket) do
+    %{
+      patch: socket.assigns.selected_patch,
+      role: socket.assigns.selected_role,
+      display_mode: socket.assigns.display_mode
+    }
+  end
 end

apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/index.html.heex

@@ -1,7 +1,12 @@
 <.header>
+  <p class="text-3xl">
     Champions
+  </p>
+
 </.header>
 
+<div class="h-4" />
+
 <div class="px-2">
   <h1 class="text-l font-semibold">Filters</h1>
 
@@ -10,9 +15,18 @@
     <.live_component module={ChampionFilters} id="role-filters" selectedrole={@selected_role || "all" } />
   </div>
 
-  <.live_component module={PatchSelector} id="patch-selector" />
+  <div class="flex justify-between items-center">
+    <.live_component module={PatchSelector} id="patch-selector" initial_patch={@selected_patch} />
+
+    <.render_display_mode_selector_selector display_mode={@display_mode} />
+  </div>
+
 
   <div class="h-4"></div>
 
-  <.render_champions champions={@champions} />
+  <%= if @display_mode=="grid" do %>
+    <.render_champions_grid champions={@champions} />
+    <% else %>
+      <.render_champions_list id="champions-list" champions={@champions} />
+      <% end %>
 </div>