new image

Levin · Oct 19, 2024 · d09fd48 · d09fd48
1 parent 991bfe9
commit d09fd48
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 33 deletions.
diff --git a/lib/algground_web/live/components/region.ex b/lib/algground_web/live/components/region.ex
@@ -17,9 +17,10 @@ defmodule AlggroundWeb.Components.Region do
       phx-target={@myself}
       600
       phx-click={JS.toggle(to: "#information_#{@region.region}")}
-      class="py-4 cursor-pointer text-center text-base font-semibold text-indigo-800 mb-2 bg-gray-50 rounded-lg "
+      class="py-4 cursor-pointer text-center text-base font-semibold text-indigo-800 mb-2 bg-gray-50 rounded-lg"
     >
       <%= display_region(assigns) %>
+      <img src={@region.image} class="absolute h-14 left-8 top-9 " />
 
       <div id={"information_" <> @region.region} class="hidden">
         <div class=" mb-8">
@@ -103,21 +104,21 @@ defmodule AlggroundWeb.Components.Region do
       assigns.region.rainfall >= 80 ->
         ~H"""
         <p class="mt-2 max-w-lg text-lg/6 text-green-600 max-lg:text-center">
-          <%= @region.rainfall %>mm
+          <%= @region.rainfall %>ml
         </p>
         """
 
       assigns.region.rainfall < 80 and assigns.region.rainfall >= 30 ->
         ~H"""
         <p class="mt-2 max-w-lg text-lg/6 text-amber-500 max-lg:text-center">
-          <%= @region.rainfall %>mm
+          <%= @region.rainfall %>ml
         </p>
         """
 
       assigns.region.rainfall < 30 ->
         ~H"""
         <p class="mt-2 max-w-lg text-lg/6 text-red-600 max-lg:text-center">
-          <%= @region.rainfall %>mm
+          <%= @region.rainfall %>ml
         </p>
         """
     end
@@ -128,21 +129,21 @@ defmodule AlggroundWeb.Components.Region do
       assigns.region.reservoir >= 6_000_000 ->
         ~H"""
         <p class="mt-2 max-w-lg text-lg/6 text-green-600 max-lg:text-center">
-          <%= @region.reservoir %>l
+          <%= @region.reservoir %> 10⁶m³
         </p>
         """
 
       assigns.region.reservoir < 6_000_000 and assigns.region.reservoir >= 1_200_000 ->
         ~H"""
         <p class="mt-2 max-w-lg text-lg/6 text-amber-500 max-lg:text-center">
-          <%= @region.reservoir %>l
+          <%= @region.reservoir %> 10⁶m³
         </p>
         """
 
       assigns.region.reservoir < 1_200_000 ->
         ~H"""
         <p class="mt-2 max-w-lg text-lg/6 text-red-600 max-lg:text-center">
-          <%= @region.reservoir %>l
+          <%= @region.reservoir %> 10⁶m³
         </p>
         """
     end

diff --git a/lib/algground_web/live/pages/live_home_page.ex b/lib/algground_web/live/pages/live_home_page.ex
@@ -2,32 +2,32 @@ defmodule AlggroundWeb.LiveHomePage do
   use AlggroundWeb, :live_view
 
   @region_names [
-    "Albufeira",
-    "Alcoutim",
-    "Aljezur",
-    "Castro Marim",
-    "Faro",
-    "Lagoa",
-    "Lagos",
-    "Loulé",
-    "Monchique",
-    "Olhão",
-    "Portimão",
-    "São Brás de Alportel",
-    "Silves",
-    "Tavira",
-    "Vila do Bispo",
-    "Vila Real de Santo António"
+    %{region: "Albufeira", image: "/images/albufeira.svg"},
+    %{region: "Alcoutim", image: ""},
+    %{region: "Aljezur", image: ""},
+    %{region: "Castro Marim", image: ""},
+    %{region: "Faro", image: ""},
+    %{region: "Lagoa", image: ""},
+    %{region: "Lagos", image: ""},
+    %{region: "Monchique", image: ""},
+    %{region: "Olhão", image: ""},
+    %{region: "Portimão", image: ""},
+    %{region: "São Brás de Alportel", image: ""},
+    %{region: "Silves", image: ""},
+    %{region: "Tavira", image: ""},
+    %{region: "Vila do Bispo", image: ""},
+    %{region: "Vila Real de Santo António", image: ""}
   ]
 
   def mount(_params, _session, socket) do
     regions =
       Enum.map(@region_names, fn region ->
         %{
-          region: region,
+          region: region.region,
           groundwater: trunc(:rand.uniform() * 100),
           rainfall: trunc(:rand.uniform() * 100),
-          reservoir: trunc(:rand.uniform() * 10_000_000)
+          reservoir: trunc(:rand.uniform() * 10_000_000),
+          image: region.image
         }
       end)
 
@@ -48,10 +48,11 @@ defmodule AlggroundWeb.LiveHomePage do
     regions =
       Enum.map(@region_names, fn region ->
         %{
-          region: region,
+          region: region.region,
           groundwater: trunc(:rand.uniform() * 100),
           rainfall: trunc(:rand.uniform() * 100),
-          reservoir: trunc(:rand.uniform() * 10_000_000)
+          reservoir: trunc(:rand.uniform() * 10_000_000),
+          image: region.image
         }
       end)
 
@@ -160,21 +161,21 @@ defmodule AlggroundWeb.LiveHomePage do
       assigns.rainfall >= 80 ->
         ~H"""
         <p class="mt-2 max-w-lg text-lg/6 text-green-600 max-lg:text-center">
-          <%= @rainfall %>mm
+          <%= @rainfall %>ml
         </p>
         """
 
       assigns.rainfall < 80 and assigns.rainfall >= 30 ->
         ~H"""
         <p class="mt-2 max-w-lg text-lg/6 text-amber-500 max-lg:text-center">
-          <%= @rainfall %>mm
+          <%= @rainfall %>ml
         </p>
         """
 
       assigns.rainfall < 30 ->
         ~H"""
         <p class="mt-2 max-w-lg text-lg/6 text-red-600 max-lg:text-center">
-          <%= @rainfall %>mm
+          <%= @rainfall %>ml
         </p>
         """
     end
@@ -185,21 +186,21 @@ defmodule AlggroundWeb.LiveHomePage do
       assigns.reservoirs >= 6_000_000 ->
         ~H"""
         <p class="mt-2 max-w-lg text-lg/6 text-green-600 max-lg:text-center">
-          <%= @reservoirs %>l
+          <%= @reservoirs %>10⁶m³
         </p>
         """
 
       assigns.reservoirs < 6_000_000 and assigns.reservoirs >= 1_200_000 ->
         ~H"""
         <p class="mt-2 max-w-lg text-lg/6 text-amber-500 max-lg:text-center">
-          <%= @reservoirs %>l
+          <%= @reservoirs %> 10⁶m³
         </p>
         """
 
       assigns.reservoirs < 1_200_000 ->
         ~H"""
         <p class="mt-2 max-w-lg text-lg/6 text-red-600 max-lg:text-center">
-          <%= @reservoirs %>l
+          <%= @reservoirs %>10⁶m³
         </p>
         """
     end