aprs.me/lib/aprsme_web/live/weather_live/callsign_view.html.heex

<%= if @weather_packet do %>
  <div class="max-w-lg mx-auto mt-8 p-6 bg-white rounded shadow">
    <h1 class="text-2xl font-bold mb-2 flex items-center gap-2">
      Weather for {@callsign}
      <.link
        navigate={~p"/#{@callsign}"}
        class="ml-4 text-blue-600 hover:underline text-base font-normal"
      >
        view on map
      </.link>
    </h1>
    <div class="text-gray-600 mb-4">
      {PacketUtils.get_timestamp(@weather_packet)}
    </div>
    <div class="grid grid-cols-2 gap-4">
      <div>
        <strong>Temperature:</strong>
        {PacketUtils.get_weather_field(@weather_packet, :temperature)}°F
      </div>
      <div>
        <strong>Humidity:</strong>
        {PacketUtils.get_weather_field(@weather_packet, :humidity)}%
      </div>
      <div>
        <strong>Wind:</strong>
        {PacketUtils.get_weather_field(@weather_packet, :wind_direction)}° @ {PacketUtils.get_weather_field(
          @weather_packet,
          :wind_speed
        )} mph
      </div>
      <div>
        <strong>Gusts:</strong>
        {PacketUtils.get_weather_field(@weather_packet, :wind_gust)} mph
      </div>
      <div>
        <strong>Pressure:</strong>
        {PacketUtils.get_weather_field(@weather_packet, :pressure)} hPa
      </div>
      <div>
        <strong>Rain (1h):</strong>
        {PacketUtils.get_weather_field(@weather_packet, :rain_1h)} in
      </div>
      <div>
        <strong>Rain (24h):</strong>
        {PacketUtils.get_weather_field(@weather_packet, :rain_24h)} in
      </div>
      <div>
        <strong>Rain (since midnight):</strong>
        {PacketUtils.get_weather_field(@weather_packet, :rain_since_midnight)} in
      </div>
    </div>
    <div class="mt-4 text-sm text-gray-500">
      <strong>Raw comment:</strong> {@weather_packet.comment || @weather_packet["comment"]}
    </div>
  </div>
  <div class="max-w-3xl mx-auto mt-8 p-6 bg-white rounded shadow">
    <h2 class="text-xl font-bold mb-4">Weather History Graphs</h2>
    <%= if Enum.any?(@weather_history, &(not is_nil(Map.get(&1, :temperature, nil)))) do %>
      <div
        id="temp-chart"
        phx-hook="PlotlyTempChart"
        data-weather-history={@weather_history_json}
        style="height:350px;"
      >
      </div>
    <% end %>
    <%= if Enum.any?(@weather_history, &(not is_nil(Map.get(&1, :humidity, nil)))) do %>
      <div
        id="humidity-chart"
        phx-hook="PlotlyHumidityChart"
        data-weather-history={@weather_history_json}
        style="height:350px;"
      >
      </div>
    <% end %>
    <%= if Enum.any?(@weather_history, &(not is_nil(Map.get(&1, :pressure, nil)))) do %>
      <div
        id="pressure-chart"
        phx-hook="PlotlyPressureChart"
        data-weather-history={@weather_history_json}
        style="height:350px;"
      >
      </div>
    <% end %>
    <%= if Enum.any?(@weather_history, &(not is_nil(Map.get(&1, :wind_direction, nil)))) do %>
      <div
        id="wind-direction-chart"
        phx-hook="PlotlyWindDirectionChart"
        data-weather-history={@weather_history_json}
        style="height:350px;"
      >
      </div>
    <% end %>
    <%= if Enum.any?(@weather_history, &(not is_nil(Map.get(&1, :wind_speed, nil)))) do %>
      <div
        id="wind-speed-chart"
        phx-hook="PlotlyWindSpeedChart"
        data-weather-history={@weather_history_json}
        style="height:350px;"
      >
      </div>
    <% end %>
    <%= if Enum.any?(@weather_history, &(not is_nil(Map.get(&1, :rain_1h, nil)))) or Enum.any?(@weather_history, &(not is_nil(Map.get(&1, :rain_24h, nil)))) or Enum.any?(@weather_history, &(not is_nil(Map.get(&1, :rain_since_midnight, nil)))) do %>
      <div
        id="rain-chart"
        phx-hook="PlotlyRainChart"
        data-weather-history={@weather_history_json}
        style="height:350px;"
      >
      </div>
    <% end %>
    <%= if Enum.any?(@weather_history, &(not is_nil(Map.get(&1, :luminosity, nil)))) do %>
      <div
        id="luminosity-chart"
        phx-hook="PlotlyLuminosityChart"
        data-weather-history={@weather_history_json}
        style="height:350px;"
      >
      </div>
    <% end %>
    <script src="https://cdn.plot.ly/plotly-latest.min.js">
    </script>
  </div>
<% else %>
  <div class="max-w-lg mx-auto mt-8 p-6 bg-white rounded shadow text-center">
    <h1 class="text-2xl font-bold mb-2">Weather for {@callsign}</h1>
    <div class="text-gray-600">No recent weather data available for this callsign.</div>
  </div>
<% end %>