From f6270b1ad45639d64e0c901516f650cc03da134c Mon Sep 17 00:00:00 2001 From: songtianlun Date: Fri, 24 Jan 2025 10:01:43 +0800 Subject: [PATCH] feat: add weather icons and update city view - Introduce `weather_description_icon` and `weather_stat_icon` helper methods for displaying SVG icons based on weather conditions and statistics. - Enhance the city show view by using these icons to display visual weather information such as temperature, wind, humidity, visibility, pressure, and cloud cover. - Optimize the visual styling and layout of the weather stats and cards for better user experience. --- app/helpers/weather_arts_helper.rb | 49 ++++ app/views/cities/show.html.erb | 84 +++++-- app/views/weather_arts/_weather_stat.html.erb | 11 + app/views/weather_arts/show.html.erb | 214 ++++++++++++------ 4 files changed, 262 insertions(+), 96 deletions(-) create mode 100644 app/views/weather_arts/_weather_stat.html.erb diff --git a/app/helpers/weather_arts_helper.rb b/app/helpers/weather_arts_helper.rb index 6643a83..ca52218 100644 --- a/app/helpers/weather_arts_helper.rb +++ b/app/helpers/weather_arts_helper.rb @@ -1,2 +1,51 @@ module WeatherArtsHelper + def weather_description_icon(description) + case description&.downcase + when /rain/ + ' + + '.html_safe + when /cloud/ + ' + + '.html_safe + when /sun|clear/ + ' + + '.html_safe + else + ' + + '.html_safe + end + end + def weather_stat_icon(type) + case type + when "temperature" + ' + + '.html_safe + when "wind" + ' + + '.html_safe + when "humidity" + ' + + '.html_safe + when "visibility" + ' + + + '.html_safe + when "pressure" + ' + + '.html_safe + when "cloud" + ' + + '.html_safe + end + end end diff --git a/app/views/cities/show.html.erb b/app/views/cities/show.html.erb index c3b1f80..f4d5437 100644 --- a/app/views/cities/show.html.erb +++ b/app/views/cities/show.html.erb @@ -1,37 +1,53 @@ -
+
-
+
<% if @city.latest_weather_art&.image&.attached? %> <%= image_tag @city.latest_weather_art.image, class: "w-full h-full object-cover" %> -
+
<% end %>
-
+
<%= link_to cities_path, - class: "btn btn-ghost btn-circle" do %> + class: "btn btn-ghost btn-circle bg-base-100/50 backdrop-blur-sm hover:bg-base-100/70" do %> <% end %> -

<%= @city.localized_name %>

+
+

<%= @city.localized_name %>

+

+ <%= @city.country.name %>, <%= @city.region %> + • + <%= Time.current.in_time_zone(@city.timezone).strftime("%Y-%m-%d %H:%M") %> +

+
-
+
-
Latitude
-
<%= @city.latitude %>
+
Latest Weather
+
+ <%= @city.latest_weather_art&.temperature %>°C +
+
+ <%= @city.latest_weather_art&.description %> +
-
Longitude
-
<%= @city.longitude %>
+
Coordinates
+
+ <%= @city.latitude %>°N, <%= @city.longitude %>°E +
+
Geographical Location
-
Weather Arts
+
Weather Records
<%= @city.weather_arts.count %>
+
Total Entries
@@ -42,20 +58,39 @@
-

Weather Art History

+
+

Weather Art History

+
+
+
Last Updated
+
+ <%= time_ago_in_words(@city.last_weather_fetch) if @city.last_weather_fetch %> +
+
+
+
-
+
<% @city.weather_arts.order(weather_date: :desc).each do |art| %>
-
+
<% if art.image.attached? %> <%= image_tag art.image, class: "w-full h-full object-cover transform hover:scale-105 transition-transform duration-500" %> <% end %> -
+
-
<%= art.temperature %>°C
-
<%= art.weather_date.strftime("%B %d, %Y") %>
+
+
<%= art.temperature %>°C
+
+
+ <%= art.weather_date.strftime("%H:%M") %> +
+
+ <%= art.weather_date.strftime("%B %d, %Y") %> +
+
+
@@ -66,7 +101,7 @@
- + Humidity: <%= art.humidity %>%
@@ -78,10 +113,13 @@
-
- <%= link_to "View Details", city_weather_art_path(@city, art), - class: "btn btn-primary btn-outline" %> -
+ <%= link_to city_weather_art_path(@city, art), + class: "btn btn-primary btn-block" do %> + View Details + + + + <% end %>
<% end %> diff --git a/app/views/weather_arts/_weather_stat.html.erb b/app/views/weather_arts/_weather_stat.html.erb new file mode 100644 index 0000000..486975f --- /dev/null +++ b/app/views/weather_arts/_weather_stat.html.erb @@ -0,0 +1,11 @@ + +
+
+ + + +
<%= title %>
+
+
<%= value %>
+
<%= desc %>
+
\ No newline at end of file diff --git a/app/views/weather_arts/show.html.erb b/app/views/weather_arts/show.html.erb index 58d67bb..4806f3d 100644 --- a/app/views/weather_arts/show.html.erb +++ b/app/views/weather_arts/show.html.erb @@ -4,84 +4,152 @@ <% end %> -
- -
- <%= link_to city_path(@weather_art.city), - class: "btn btn-ghost gap-2" do %> - - - - Back to <%= @weather_art.city.name %> - <% end %> -
+
+ + <% if @weather_art.image.attached? %> +
+ <%= image_tag @weather_art.image, + class: "absolute w-full h-full object-cover scale-110 filter blur-2xl opacity-25" %> +
+
+ <% end %> -
-
- -
-

- <%= @weather_art.city.name %> -

-

- <%= @weather_art.weather_date.strftime("%B %d, %Y") %> -

-
+
+ +
+ <%= link_to city_path(@weather_art.city), + class: "btn btn-ghost btn-lg gap-2 bg-base-100/50 backdrop-blur-sm hover:bg-base-100/70 transition-all duration-300" do %> + + + + Back to <%= @weather_art.city.name %> + <% end %> +
- -
-
- <% if @weather_art.image.attached? %> - <%= image_tag @weather_art.image, - class: "w-full h-full object-cover" %> - <% end %> -
- -
-

- <%= @weather_art.description %> -

- - -
-
-
Temperature
-
<%= @weather_art.temperature %>°C
-
Feels like <%= @weather_art.feeling_temp %>°C
-
- -
-
Wind
-
<%= @weather_art.wind_scale %>
-
<%= @weather_art.wind_speed %> km/h
-
- -
-
Humidity
-
<%= @weather_art.humidity %>%
-
- -
-
Visibility
-
<%= @weather_art.visibility %> km
-
- -
-
Pressure
-
<%= @weather_art.pressure %> hPa
-
- -
-
Cloud Cover
-
<%= @weather_art.cloud %>%
-
+
+
+ +
+
+ + + + <%= @weather_art.city.full_name %>
- -
-

AI Prompt

-

<%= @weather_art.prompt %>

+

+ + Weather Art + +

+ +
+
+ + + + <%= @weather_art.weather_date.strftime("%B %d, %Y") %> +
+
+ + + + <%= @weather_art.weather_date.strftime("%H:%M") %> +
+
+
+ + +
+
+ <% if @weather_art.image.attached? %> + <%= image_tag @weather_art.image, + class: "w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" %> +
+ <% end %> +
+ +
+
+

+ <%= weather_description_icon(@weather_art.description) %> + <%= @weather_art.description %> +

+
+
+ + +
+
+
+ <%= weather_stat_icon("temperature") %> +
Temperature
+
+
<%= @weather_art.temperature %>°C
+
Feels like <%= @weather_art.feeling_temp %>°C
+
+ +
+
+ <%= weather_stat_icon("wind") %> +
Wind
+
+
<%= @weather_art.wind_scale %>
+
<%= @weather_art.wind_speed %> km/h
+
+ +
+
+ <%= weather_stat_icon("humidity") %> +
Humidity
+
+
<%= @weather_art.humidity %>%
+
Relative humidity
+
+ +
+
+ <%= weather_stat_icon("visibility") %> +
Visibility
+
+
<%= @weather_art.visibility %> km
+
Clear view distance
+
+ +
+
+ <%= weather_stat_icon("pressure") %> +
Pressure
+
+
<%= @weather_art.pressure %> hPa
+
Atmospheric pressure
+
+ +
+
+ <%= weather_stat_icon("cloud") %> +
Cloud Cover
+
+
<%= @weather_art.cloud %>%
+
Sky coverage
+
+
+ + +
+
+
+ + + +

AI Prompt

+
+

+ <%= @weather_art.prompt %> +

+
+