augie/webapp/lib/augie_web/live/gps_sensor_live.ex

defmodule AugieWeb.GPSSensorLive do
  use Phoenix.LiveView
  alias Augie.Sensor.GPS

  @moduledoc """
  A LiveView with displaus the data from the GPS.
  """

  @sample_count 60

  def render(assigns) do
    ~L"""
    <div class="card">
      <div class="card-divider">
        <h4>GPS</h4>
      </div>
      <%= if @data_ready do %>
        <div class="card-section">
          <div class="grid-x">
            <div class="cell auto"><strong>Status</strong></div>
            <div class="cell auto text-right"><%= @status %></div>
          </div>
          <div class="grid-x">
            <div class="cell auto"><strong>Latitude</strong></div>
            <div class="cell auto text-right"><%= Float.round(CircularBuffer.newest(@latitude), 4) %>º</div>
          </div>
          <div class="grid-x">
            <div class="cell"><%= live_component(@socket, AugieWeb.SparklineComponent, data: @latitude, sample_count: 60, fill: false, min: -90, max: 90) %></div>
          </div>
          <div class="grid-x">
            <div class="cell auto"><strong>Longitude</strong></div>
            <div class="cell auto text-right"><%= Float.round(CircularBuffer.newest(@longitude), 4) %>º</div>
          </div>
          <div class="grid-x">
            <div class="cell"><%= live_component(@socket, AugieWeb.SparklineComponent, data: @longitude, sample_count: 60, fill: false, min: 0, max: 180) %></div>
          </div>
          <div class="grid-x">
            <div class="cell auto"><strong>Altitude</strong></div>
            <div class="cell auto text-right"><%= Float.round(CircularBuffer.newest(@altitude), 4) %>m</div>
          </div>
          <div class="grid-x">
            <div class="cell"><%= live_component(@socket, AugieWeb.SparklineComponent, data: @altitude, sample_count: 60, fill: false, min: 0) %></div>
          </div>
          <div class="grid-x">
            <div class="cell auto"><strong>Heading</strong></div>
            <div class="cell auto text-right"><%= Float.round(CircularBuffer.newest(@heading), 4) %>º</div>
          </div>
          <div class="grid-x">
            <div class="cell"><%= live_component(@socket, AugieWeb.SparklineComponent, data: @heading, sample_count: 60, fill: false, min: 0, max: 360) %></div>
          </div>
          <div class="grid-x">
            <div class="cell auto"><strong>Speed</strong></div>
            <div class="cell auto text-right"><%= Float.round(CircularBuffer.newest(@speed), 4) %>m/s</div>
          </div>
          <div class="grid-x">
            <div class="cell"><%= live_component(@socket, AugieWeb.SparklineComponent, data: @speed, sample_count: 60, fill: false, min: 0) %></div>
          </div>
          <div class="grid-x">
            <div class="cell auto"><strong>Satellites</strong></div>
            <div class="cell auto text-right"><%= CircularBuffer.newest(@satellites) %></div>
          </div>
          <div class="grid-x">
            <div class="cell"><%= live_component(@socket, AugieWeb.SparklineComponent, data: @satellites, sample_count: 60, fill: false, min: 0) %></div>
          </div>
        </div>
      <% else %>
        <div class="card-section">
          No data available.
        </div>
      <% end %>
    </div>
    """
  end

  def mount(_params, _context, socket) do
    if connected?(socket),
      do: CommunityTheatre.subscribe(GPS, 1)

    socket =
      socket
      |> assign(
        data_ready: false,
        latitude: CircularBuffer.new(@sample_count),
        longitude: CircularBuffer.new(@sample_count),
        altitude: CircularBuffer.new(@sample_count),
        heading: CircularBuffer.new(@sample_count),
        speed: CircularBuffer.new(@sample_count),
        satellites: CircularBuffer.new(@sample_count),
        status: :none
      )

    {:ok, socket}
  end

  def handle_info(
        {CommunityTheatre, %{topic: GPS, payload: sample}},
        %{
          assigns: %{
            latitude: latitude,
            longitude: longitude,
            altitude: altitude,
            heading: heading,
            speed: speed,
            satellites: satellites
          }
        } = socket
      ) do
    socket =
      socket
      |> assign(
        data_ready: true,
        latitude: CircularBuffer.insert(latitude, sample.latitude),
        longitude: CircularBuffer.insert(longitude, sample.longitude),
        altitude: CircularBuffer.insert(altitude, sample.altitude),
        heading: CircularBuffer.insert(heading, sample.heading),
        speed: CircularBuffer.insert(speed, sample.speed),
        satellites: CircularBuffer.insert(satellites, sample.satellites),
        status: sample.status
      )

    {:noreply, socket}
  end
end