From 5b7f0bba4f4ab9c952e09b451ee7cf1b4e93225f Mon Sep 17 00:00:00 2001
From: songtianlun <tianlun.song@foxmail.com>
Date: Sat, 26 Apr 2025 00:14:34 +0800
Subject: [PATCH] feat: enhance city and weather art views with links

- Update country and state badges to be links when region is present
- Maintain fallback display for badges when region is not available
- Improve user navigation by linking to relevant city pages

These changes enhance the user experience by allowing users to
click on country and state badges to view related cities. The
previous static display has been improved to provide more
contextual navigation options, making the application more
interactive and user-friendly.
---
 app/views/cities/show.html.erb       | 32 ++++++++++++++++++++++------
 app/views/weather_arts/show.html.erb | 26 ++++++++++++++++------
 2 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/app/views/cities/show.html.erb b/app/views/cities/show.html.erb
index 2c89538..1c4f40e 100644
--- a/app/views/cities/show.html.erb
+++ b/app/views/cities/show.html.erb
@@ -30,12 +30,32 @@
           </h1>
 
           <div class="flex flex-wrap justify-center items-center gap-3">
-            <div class="badge badge-lg badge-primary gap-2">
-              <%= "#{@city&.country&.emoji + " " || ""}#{@city&.country&.name}" %>
-            </div>
-            <div class="badge badge-lg badge-secondary gap-2">
-              <%= @city&.state&.name %>
-            </div>
+            <!-- Country budge -->
+            <% if @city.country.present? && @city.country.region.present? %>
+              <%= link_to cities_path(country: @city.country, region: @city.country.region), class: "badge badge-lg badge-primary hover:badge-outline transition-all duration-200" do %>
+                <%= "#{@city.country.emoji + " " || ""}#{@city.country.localized_name}" %>
+              <% end %>
+            <% else %>
+              <div class="badge badge-lg badge-primary">
+                <%= "#{@city&.country&.emoji + " " || ""}#{@city&.country&.localized_name}" %>
+              </div>
+            <% end %>
+            <!-- State budge -->
+            <% if @city.country.present? && @city.state.present? && @city.country.region.present? %>
+              <%= link_to cities_path(country: @city.country, state: @city.state, region: @city.country.region), class: "badge badge-lg badge-secondary hover:badge-outline transition-all duration-200" do %>
+                <%= @city.state.name %>
+              <% end %>
+            <% else %>
+              <div class="badge badge-lg badge-secondary">
+                <%= @city&.state&.name %>
+              </div>
+            <% end %>
+<!--            <div class="badge badge-lg badge-primary gap-2">-->
+              <%#= "#{@city&.country&.emoji + " " || ""}#{@city&.country&.name}" %>
+<!--            </div>-->
+<!--            <div class="badge badge-lg badge-secondary gap-2">-->
+              <%#= @city&.state&.name %>
+<!--            </div>-->
             <%= render "shared/wiki_data_badge", city: @city %>
           </div>
 
diff --git a/app/views/weather_arts/show.html.erb b/app/views/weather_arts/show.html.erb
index 0e67b58..8644bd7 100644
--- a/app/views/weather_arts/show.html.erb
+++ b/app/views/weather_arts/show.html.erb
@@ -22,12 +22,26 @@
       </h1>
 
       <div class="flex flex-wrap gap-4 mb-6">
-        <div class="badge badge-lg badge-primary">
-          <%= "#{@weather_art&.city&.country&.emoji + " " || ""}#{@city&.country&.localized_name}" %>
-        </div>
-        <div class="badge badge-lg badge-secondary">
-          <%= @weather_art&.city&.state&.name %>
-        </div>
+        <!-- Country budge -->
+        <% if @weather_art.city.country.present? && @weather_art.city.country.region.present? %>
+          <%= link_to cities_path(country: @weather_art.city.country, region: @weather_art.city.country.region), class: "badge badge-lg badge-primary hover:badge-outline transition-all duration-200" do %>
+            <%= "#{@weather_art.city.country.emoji + " " || ""}#{@weather_art.city.country.localized_name}" %>
+          <% end %>
+        <% else %>
+          <div class="badge badge-lg badge-primary">
+            <%= "#{@weather_art&.city&.country&.emoji + " " || ""}#{@city&.country&.localized_name}" %>
+          </div>
+        <% end %>
+        <!-- State budge -->
+        <% if @weather_art.city.country.present? && @weather_art.city.state.present? && @weather_art.city.country.region.present? %>
+          <%= link_to cities_path(country: @weather_art.city.country, state: @weather_art.city.state, region: @weather_art.city.country.region), class: "badge badge-lg badge-secondary hover:badge-outline transition-all duration-200" do %>
+            <%= @weather_art.city.state.name %>
+          <% end %>
+        <% else %>
+          <div class="badge badge-lg badge-secondary">
+            <%= @weather_art&.city&.state&.name %>
+          </div>
+        <% end %>
         <%= render "shared/wiki_data_badge", city: @weather_art&.city %>
         <div class="badge badge-lg badge-ghost">
           <%= @weather_art.formatted_time(:date) %>