smaller screen optimization on prop path calculation
Some checks failed
Build and Push / Build and Push Docker Image (push) Failing after 4m54s
Some checks failed
Build and Push / Build and Push Docker Image (push) Failing after 4m54s
This commit is contained in:
parent
fe06f5f77c
commit
ffbaa6230f
1 changed files with 99 additions and 91 deletions
|
|
@ -523,7 +523,8 @@ defmodule MicrowavepropWeb.PathLive do
|
|||
class="btn btn-sm btn-outline gap-1"
|
||||
title="Use device GPS"
|
||||
>
|
||||
<.icon name="hero-map-pin" class="size-3.5" /> My Location
|
||||
<.icon name="hero-map-pin" class="size-3.5" />
|
||||
<span class="hidden sm:inline">My Location</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -678,11 +679,11 @@ defmodule MicrowavepropWeb.PathLive do
|
|||
<div class="grid grid-cols-2 md:grid-cols-5 gap-3 text-sm">
|
||||
<div>
|
||||
<span class="opacity-60">Distance</span>
|
||||
<div class="font-mono text-lg">{format_km_mi(@result.dist_km)}</div>
|
||||
<div class="font-mono text-base sm:text-lg">{format_km_mi(@result.dist_km)}</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="opacity-60">Bearing</span>
|
||||
<div class="font-mono text-lg">{format_number(@result.bearing)}°</div>
|
||||
<div class="font-mono text-base sm:text-lg">{format_number(@result.bearing)}°</div>
|
||||
</div>
|
||||
<%= if @result.terrain do %>
|
||||
<div>
|
||||
|
|
@ -697,7 +698,10 @@ defmodule MicrowavepropWeb.PathLive do
|
|||
<%= if @result.scoring do %>
|
||||
<div>
|
||||
<span class="opacity-60">Propagation</span>
|
||||
<div class="font-mono text-lg" style={"color: #{tier_color(@result.scoring.score)}"}>
|
||||
<div
|
||||
class="font-mono text-base sm:text-lg"
|
||||
style={"color: #{tier_color(@result.scoring.score)}"}
|
||||
>
|
||||
{@result.scoring.score}/100
|
||||
</div>
|
||||
<div class="text-xs" style={"color: #{tier_color(@result.scoring.score)}"}>
|
||||
|
|
@ -820,14 +824,16 @@ defmodule MicrowavepropWeb.PathLive do
|
|||
<div class="grid grid-cols-2 gap-x-6 gap-y-3">
|
||||
<div>
|
||||
<span class="text-xs opacity-60">Temperature</span>
|
||||
<div class="font-mono text-xl">{format_number(@result.conditions.temp_f)}°F</div>
|
||||
<div class="font-mono text-lg sm:text-xl">
|
||||
{format_number(@result.conditions.temp_f)}°F
|
||||
</div>
|
||||
<div class="font-mono text-xs opacity-50">
|
||||
{format_number(@result.conditions.temp_c)}°C
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-xs opacity-60">Dewpoint</span>
|
||||
<div class="font-mono text-xl">
|
||||
<div class="font-mono text-lg sm:text-xl">
|
||||
{format_number(@result.conditions.dewpoint_f)}°F
|
||||
</div>
|
||||
<div class="font-mono text-xs opacity-50">
|
||||
|
|
@ -836,37 +842,37 @@ defmodule MicrowavepropWeb.PathLive do
|
|||
</div>
|
||||
<div>
|
||||
<span class="text-xs opacity-60">T/Td Gap</span>
|
||||
<div class="font-mono text-xl">
|
||||
<div class="font-mono text-lg sm:text-xl">
|
||||
{format_number(@result.conditions.temp_f - @result.conditions.dewpoint_f)}°F
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-xs opacity-60">Abs Humidity</span>
|
||||
<div class="font-mono text-xl">
|
||||
<div class="font-mono text-lg sm:text-xl">
|
||||
{format_number(@result.conditions.abs_humidity)} g/m³
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-xs opacity-60">Pressure</span>
|
||||
<div class="font-mono text-xl">
|
||||
<div class="font-mono text-lg sm:text-xl">
|
||||
{format_number(@result.conditions.pressure_mb || 0)} mb
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-xs opacity-60">PWAT</span>
|
||||
<div class="font-mono text-xl">
|
||||
<div class="font-mono text-lg sm:text-xl">
|
||||
{format_number(@result.conditions.pwat_mm || 0)} mm
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-xs opacity-60">BL Depth</span>
|
||||
<div class="font-mono text-xl">
|
||||
<div class="font-mono text-lg sm:text-xl">
|
||||
{format_number(@result.conditions.bl_depth_m || 0)} m
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-xs opacity-60">Refrac Gradient</span>
|
||||
<div class="font-mono text-xl">
|
||||
<div class="font-mono text-lg sm:text-xl">
|
||||
{format_number(@result.conditions.min_refractivity_gradient || 0)} N/km
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1036,9 +1042,9 @@ defmodule MicrowavepropWeb.PathLive do
|
|||
defp ionosphere_readout(assigns) do
|
||||
~H"""
|
||||
<div class="bg-base-200 rounded-box p-4 mb-6">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-2">
|
||||
<div class="text-xs opacity-60">Ionosphere · Sporadic-E Potential</div>
|
||||
<div class="text-[10px] opacity-50">
|
||||
<div class="text-[10px] opacity-50 mt-1 sm:mt-0">
|
||||
{@readout.station_code} · {Calendar.strftime(@readout.valid_time, "%Y-%m-%d %H:%M UTC")}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1127,91 +1133,93 @@ defmodule MicrowavepropWeb.PathLive do
|
|||
{Phoenix.HTML.raw(@trend)}
|
||||
</div>
|
||||
</div>
|
||||
<svg viewBox="0 0 1200 240" class="w-full aspect-[5/1]">
|
||||
<%= for s <- [0, 25, 50, 75, 100] do %>
|
||||
<% y = 20 + (100 - s) / 100 * 185 %>
|
||||
<line
|
||||
x1="55"
|
||||
y1={y}
|
||||
x2="1180"
|
||||
y2={y}
|
||||
stroke="currentColor"
|
||||
class="opacity-10"
|
||||
stroke-width="1"
|
||||
<div class="overflow-x-auto">
|
||||
<svg viewBox="0 0 1200 240" class="min-w-[720px] w-full h-auto">
|
||||
<%= for s <- [0, 25, 50, 75, 100] do %>
|
||||
<% y = 20 + (100 - s) / 100 * 185 %>
|
||||
<line
|
||||
x1="55"
|
||||
y1={y}
|
||||
x2="1180"
|
||||
y2={y}
|
||||
stroke="currentColor"
|
||||
class="opacity-10"
|
||||
stroke-width="1"
|
||||
/>
|
||||
<text
|
||||
x="48"
|
||||
y={y + 5}
|
||||
font-size="14"
|
||||
text-anchor="end"
|
||||
fill="currentColor"
|
||||
class="opacity-40"
|
||||
>
|
||||
{s}
|
||||
</text>
|
||||
<% end %>
|
||||
<polyline
|
||||
points={@polyline}
|
||||
fill="none"
|
||||
stroke={tier_color(@best_pt.score)}
|
||||
stroke-width="3"
|
||||
stroke-linejoin="round"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
<text
|
||||
x="48"
|
||||
y={y + 5}
|
||||
font-size="14"
|
||||
text-anchor="end"
|
||||
fill="currentColor"
|
||||
class="opacity-40"
|
||||
>
|
||||
{s}
|
||||
</text>
|
||||
<% end %>
|
||||
<polyline
|
||||
points={@polyline}
|
||||
fill="none"
|
||||
stroke={tier_color(@best_pt.score)}
|
||||
stroke-width="3"
|
||||
stroke-linejoin="round"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
<%= for pt <- @points do %>
|
||||
<%= for pt <- @points do %>
|
||||
<circle
|
||||
cx={pt.x}
|
||||
cy={pt.y}
|
||||
r="6"
|
||||
fill={tier_color(pt.score)}
|
||||
data-iso={DateTime.to_iso8601(pt.valid_time)}
|
||||
style="cursor:pointer;"
|
||||
/>
|
||||
<% end %>
|
||||
<circle
|
||||
cx={pt.x}
|
||||
cy={pt.y}
|
||||
r="6"
|
||||
fill={tier_color(pt.score)}
|
||||
data-iso={DateTime.to_iso8601(pt.valid_time)}
|
||||
cx={@now_pt.x}
|
||||
cy={@now_pt.y}
|
||||
r="8"
|
||||
fill="white"
|
||||
stroke={tier_color(@now_pt.score)}
|
||||
stroke-width="3"
|
||||
data-iso={DateTime.to_iso8601(@now_pt.valid_time)}
|
||||
style="cursor:pointer;"
|
||||
/>
|
||||
<% end %>
|
||||
<circle
|
||||
cx={@now_pt.x}
|
||||
cy={@now_pt.y}
|
||||
r="8"
|
||||
fill="white"
|
||||
stroke={tier_color(@now_pt.score)}
|
||||
stroke-width="3"
|
||||
data-iso={DateTime.to_iso8601(@now_pt.valid_time)}
|
||||
style="cursor:pointer;"
|
||||
/>
|
||||
<circle
|
||||
cx={@best_pt.x}
|
||||
cy={@best_pt.y}
|
||||
r="8"
|
||||
fill={tier_color(@best_pt.score)}
|
||||
data-iso={DateTime.to_iso8601(@best_pt.valid_time)}
|
||||
style="cursor:pointer;"
|
||||
stroke="white"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<text
|
||||
x={@best_pt.x}
|
||||
y={@best_pt.y - 12}
|
||||
font-size="16"
|
||||
text-anchor="middle"
|
||||
font-weight="700"
|
||||
fill={tier_color(@best_pt.score)}
|
||||
>
|
||||
{@best_pt.score}
|
||||
</text>
|
||||
<%= for {x, label} <- @x_labels do %>
|
||||
<circle
|
||||
cx={@best_pt.x}
|
||||
cy={@best_pt.y}
|
||||
r="8"
|
||||
fill={tier_color(@best_pt.score)}
|
||||
data-iso={DateTime.to_iso8601(@best_pt.valid_time)}
|
||||
style="cursor:pointer;"
|
||||
stroke="white"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<text
|
||||
x={x}
|
||||
y="230"
|
||||
font-size="14"
|
||||
x={@best_pt.x}
|
||||
y={@best_pt.y - 12}
|
||||
font-size="16"
|
||||
text-anchor="middle"
|
||||
fill="currentColor"
|
||||
class="opacity-40"
|
||||
font-weight="700"
|
||||
fill={tier_color(@best_pt.score)}
|
||||
>
|
||||
{label}
|
||||
{@best_pt.score}
|
||||
</text>
|
||||
<% end %>
|
||||
</svg>
|
||||
<div class="flex justify-between text-xs mt-2">
|
||||
<%= for {x, label} <- @x_labels do %>
|
||||
<text
|
||||
x={x}
|
||||
y="230"
|
||||
font-size="14"
|
||||
text-anchor="middle"
|
||||
fill="currentColor"
|
||||
class="opacity-40"
|
||||
>
|
||||
{label}
|
||||
</text>
|
||||
<% end %>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row sm:justify-between gap-1 text-xs mt-2">
|
||||
<span>
|
||||
Best:
|
||||
<span class="font-bold" style={"color: #{tier_color(@best_pt.score)}"}>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue