augie/webapp/lib/augie_web/live/gps_live.html.leex

<div class="card">
  <div class="card-divider">
    <h4>GPS</h4>
  </div>
  <img src="<%= @map_src %>">
  <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">
        <%= if @latitude do %>
          <%= @latitude %>&deg;
        <% else  %>
          -
        <% end %>
      </div>
    </div>
    <div class="grid-x">
      <div class="cell auto"><strong>Longitude</strong></div>
      <div class="cell auto text-right">
        <%= if @longitude do %>
          <%= @longitude %>&deg;
        <% else  %>
          -
        <% end %>
      </div>
    </div>
    <div class="grid-x">
      <div class="cell auto"><strong>Altitude</strong></div>
      <div class="cell auto text-right">
        <%= if @altitude do %>
          <%= @altitude %> m
        <% else  %>
          -
        <% end %>
      </div>
    </div>
    <div class="grid-x">
      <div class="cell auto"><strong>Heading</strong></div>
      <div class="cell auto text-right">
        <%= if @heading do %>
          <%= @heading %>&deg;
        <% else  %>
          -
        <% end %>
      </div>
    </div>
    <div class="grid-x">
      <div class="cell auto"><strong>Speed</strong></div>
      <div class="cell auto text-right">
        <%= if @speed do %>
          <%= @speed %> m/s
        <% else  %>
          -
        <% end %>
      </div>
    </div>
    <div class="grid-x">
      <div class="cell auto"><strong>Satellites</strong></div>
      <div class="cell auto text-right"><%= @satellites || "-" %></div>
    </div>
  </div>
</div>