songtianlun
df456d1031
- Implement MapController for displaying city maps - Add map rendering in the city show view - Include weather arts in the city show controller - Update asset pipeline to include Leaflet CSS and JS This commit introduces a map feature that allows users to view geographical information related to cities. The map is integrated with weather arts data, enhancing the overall functionality of the city show page.
97 lines
3.8 KiB
Plaintext
97 lines
3.8 KiB
Plaintext
<div class="min-h-screen bg-base-100">
|
|
<!-- 页面标题和背景 -->
|
|
<div class="relative">
|
|
<!-- 背景图像和渐变 -->
|
|
<% if @city.latest_weather_art&.image&.attached? %>
|
|
<div class="absolute inset-0 h-[60vh] overflow-hidden">
|
|
<%= image_tag @city.latest_weather_art.webp_image.processed,
|
|
class: "w-full h-full object-cover object-center" %>
|
|
<div class="absolute inset-0 bg-gradient-to-b from-base-100/40 via-base-100/80 to-base-100"></div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<div class="relative max-w-3xl mx-auto px-4 pt-4 ">
|
|
<%= link_to cities_path,
|
|
class: "inline-flex items-center btn btn-ghost gap-2 pt-6 mb-8" do %>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
Back to Cities
|
|
<% end %>
|
|
</div>
|
|
|
|
<div class="relative pt-8 pb-32">
|
|
<div class="container mx-auto px-4">
|
|
|
|
<div class="max-w-3xl mx-auto text-center space-y-6">
|
|
<h1 class="text-5xl md:text-6xl font-display font-bold leading-tight">
|
|
<%= @city.localized_name %>
|
|
</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>
|
|
</div>
|
|
|
|
<!-- 主要统计信息 -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mt-8">
|
|
<%= render partial: 'cities/stat_card', collection: [
|
|
{
|
|
icon: 'temperature',
|
|
title: 'Latest Weather',
|
|
value: "#{@city.latest_weather_art&.temperature}°C",
|
|
desc: @city.latest_weather_art&.description
|
|
},
|
|
{
|
|
icon: 'location',
|
|
title: 'Coordinates',
|
|
value: "#{@city.latitude}°N, #{@city.longitude}°E",
|
|
desc: 'Geographical Location'
|
|
},
|
|
{
|
|
icon: 'history',
|
|
title: 'Records',
|
|
value: @city.weather_arts.count,
|
|
desc: 'Total Weather Arts'
|
|
}
|
|
], as: :stat %>
|
|
</div>
|
|
|
|
<%= render 'cities/map', city: @city %>
|
|
|
|
<%= render 'cities/admin_panel' %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 天气艺术历史记录 -->
|
|
<div class="bg-base-100">
|
|
<div class="container mx-auto px-4 py-16">
|
|
<div class="max-w-7xl mx-auto space-y-8">
|
|
<!-- 标题和更新时间 -->
|
|
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
|
<h2 class="text-3xl font-display font-bold">Weather Art History</h2>
|
|
<div class="card bg-base-100 p-4">
|
|
<div class="flex items-center gap-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<span>Last Updated: <%= time_ago_in_words(@city.last_weather_fetch) if @city.last_weather_fetch %></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 天气艺术卡片网格 -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<%= render partial: 'weather_arts/card', collection: @arts, as: :weather_art %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|