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

137 lines
5.1 KiB
Text

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 my-8">
<%= if @error do %>
<div class="alert alert-error">
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
clip-rule="evenodd"
/>
</svg>
<div>
<h3 class="font-medium">Error</h3>
<div class="text-sm">
{@error}
</div>
</div>
</div>
<% else %>
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<div class="overflow-x-auto">
<table class="table table-zebra">
<thead>
<tr>
<th>Time</th>
<th>Sender</th>
<th>Data Type</th>
<th>Information</th>
<th>Path</th>
<th>Device</th>
</tr>
</thead>
<tbody>
<%= for packet <- @all_packets do %>
<tr>
<td>
<span class="text-sm font-mono opacity-70">
<%= case packet.received_at do %>
<% %DateTime{} = dt -> %>
{Calendar.strftime(dt, "%Y-%m-%d %H:%M:%S")}
<% dt when is_binary(dt) -> %>
<%= case DateTime.from_iso8601(dt) do %>
<% {:ok, parsed_dt, _} -> %>
{Calendar.strftime(parsed_dt, "%Y-%m-%d %H:%M:%S")}
<% _ -> %>
{dt}
<% end %>
<% _ -> %>
N/A
<% end %>
</span>
</td>
<td>
<span class="text-sm font-medium">{packet.sender}</span>
</td>
<td>
<span class="badge badge-primary">
{packet.data_type}
</span>
</td>
<td>
<span class="text-sm font-mono">
<%= if String.length(packet.information_field || "") > 50 do %>
<span title={packet.information_field}>
{String.slice(packet.information_field, 0, 50)}...
</span>
<% else %>
{packet.information_field}
<% end %>
</span>
</td>
<td>
<span class="text-xs font-mono opacity-70">
{packet.path}
</span>
</td>
<td>
<span class="text-xs font-mono opacity-70">
<%= if packet.device_model || packet.device_vendor do %>
{[packet.device_model, packet.device_vendor]
|> Enum.reject(&is_nil/1)
|> Enum.join(" ")}
<% else %>
{Map.get(
packet,
:device_identifier,
Map.get(packet, "device_identifier", "")
)}
<% end %>
</span>
</td>
</tr>
<% end %>
</tbody>
</table>
</div>
</div>
</div>
<%= if length(@all_packets) == 0 do %>
<div class="text-center py-12">
<div class="flex justify-center mb-4">
<svg class="w-16 h-16 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
/>
</svg>
</div>
<h3 class="text-lg font-medium mb-2">No packets found for {@callsign}</h3>
<p class="opacity-70">
Packets will appear here as they are received live or if there are stored packets for this callsign.
</p>
</div>
<% end %>
<div class="card bg-base-100 shadow-xl mt-4">
<div class="card-body">
<div class="flex items-center justify-between text-sm">
<div class="flex items-center space-x-4">
<span>
Live packets: <span class="font-medium">{length(@live_packets)}</span>
</span>
<span>
Stored packets: <span class="font-medium">{length(@packets)}</span>
</span>
<span>
Total: <span class="font-medium">{length(@all_packets)}/100</span>
</span>
</div>
</div>
</div>
</div>
<% end %>
</div>