Show a dynamically updated list of NTS servers #1
|
|
@ -1,28 +1,25 @@
|
||||||
<header class="px-4 sm:px-6 lg:px-8">
|
<header class="px-4 sm:px-6 lg:px-8">
|
||||||
<div class="flex items-center justify-between border-b border-zinc-100 py-3 text-sm">
|
<div class="flex items-center justify-between border-b border-zinc-100 dark:border-zinc-700 py-3 text-sm">
|
||||||
<div class="flex items-center gap-4">
|
<div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900 dark:text-zinc-300 pe-4">
|
||||||
<a href="/">
|
<a href="/" class="hover:text-zinc-700 dark:hover:text-zinc-400">
|
||||||
<img src={~p"/images/logo.svg"} width="36" />
|
Chronoscope
|
||||||
</a>
|
</a>
|
||||||
<p class="bg-brand/5 text-brand rounded-full px-2 font-medium leading-6">
|
<p class="bg-brand/5 dark:bg-brand/70 text-brand dark:text-zinc-900 rounded-full px-2 font-medium leading-6">
|
||||||
v<%= Application.spec(:phoenix, :vsn) %>
|
v<%= Application.spec(:chronoscope, :vsn) %>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900">
|
<div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900 dark:text-zinc-300">
|
||||||
<a href="https://twitter.com/elixirphoenix" class="hover:text-zinc-700">
|
<a href="https://codeberg.org/mike-cifelli" class="hover:text-zinc-700 dark:hover:text-zinc-400">
|
||||||
@elixirphoenix
|
Codeberg
|
||||||
</a>
|
</a>
|
||||||
<a href="https://github.com/phoenixframework/phoenix" class="hover:text-zinc-700">
|
<a href="/add" class="rounded-lg bg-zinc-200 dark:bg-zinc-600 px-2 py-1 hover:bg-zinc-300/80 dark:hover:bg-zinc-500/80 whitespace-nowrap">
|
||||||
GitHub
|
Add a Server <span aria-hidden="true">→</span>
|
||||||
</a>
|
|
||||||
<a href="https://hexdocs.pm/phoenix/overview.html" class="rounded-lg bg-zinc-100 px-2 py-1 hover:bg-zinc-200/80">
|
|
||||||
Get Started <span aria-hidden="true">→</span>
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<main class="px-4 py-20 sm:px-6 lg:px-8">
|
<main class="px-4 py-20 sm:px-6 lg:px-8">
|
||||||
<div class="mx-auto max-w-2xl">
|
<div class="mx-auto max-w-7xl">
|
||||||
<.flash_group flash={@flash} />
|
<.flash_group flash={@flash} />
|
||||||
<%= @inner_content %>
|
<%= @inner_content %>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
<script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
|
<script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-white antialiased">
|
<body class="bg-white dark:bg-zinc-800 dark:text-zinc-300 antialiased font-sans tracking-wide">
|
||||||
<%= @inner_content %>
|
<%= @inner_content %>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,16 @@
|
||||||
defmodule ChronoscopeWeb.IndexLive do
|
defmodule ChronoscopeWeb.IndexLive do
|
||||||
use ChronoscopeWeb, :live_view
|
use ChronoscopeWeb, :live_view
|
||||||
|
|
||||||
@topic "test"
|
alias Chronoscope.NTS
|
||||||
|
|
||||||
|
@topic "nts-servers"
|
||||||
|
|
||||||
def mount(_params, _session, socket) do
|
def mount(_params, _session, socket) do
|
||||||
ChronoscopeWeb.Endpoint.subscribe(@topic)
|
ChronoscopeWeb.Endpoint.subscribe(@topic)
|
||||||
ChronoscopeWeb.Endpoint.broadcast_from(self(), @topic, "", %{temperature: 100})
|
{:ok, assign(socket, %{servers: NTS.list()})}
|
||||||
{:ok, assign(socket, :temperature, 100)}
|
|
||||||
end
|
end
|
||||||
|
|
||||||
def handle_event("inc_temperature", _params, socket) do
|
def handle_info(%{topic: @topic, payload: servers}, socket) do
|
||||||
updated = socket.assigns.temperature + 1
|
{:noreply, assign(socket, %{servers: servers})}
|
||||||
ChronoscopeWeb.Endpoint.broadcast_from(self(), @topic, "", %{temperature: updated})
|
|
||||||
{:noreply, assign(socket, :temperature, updated)}
|
|
||||||
end
|
|
||||||
|
|
||||||
def handle_info(%{topic: @topic, payload: state}, socket) do
|
|
||||||
{:noreply, assign(socket, state)}
|
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,60 @@
|
||||||
<div>
|
<table class="mx-auto border-collapse table-auto min-w-full divide-y divide-zinc-200 dark:divide-zinc-700 text-left">
|
||||||
Live!
|
<thead>
|
||||||
<br />
|
<tr>
|
||||||
Current temperature: <%= @temperature %>°F
|
<th scope="col" class="py-3 px-6">
|
||||||
<button phx-click="inc_temperature">+</button>
|
Host
|
||||||
</div>
|
</th>
|
||||||
|
<th scope="col" class="py-3 px-6">
|
||||||
|
Status
|
||||||
|
</th>
|
||||||
|
<th scope="col" class="py-3 px-6">
|
||||||
|
Algorithm
|
||||||
|
</th>
|
||||||
|
<th scope="col" class="py-3 px-6">
|
||||||
|
Cookies
|
||||||
|
</th>
|
||||||
|
<th scope="col" class="py-3 px-6">
|
||||||
|
Cookie Length
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr :for={server <- @servers} class="hover:bg-zinc-100 dark:hover:bg-zinc-700">
|
||||||
|
<% {status, response} = server.key_establishment_response %>
|
||||||
|
|
||||||
|
<%= if (status == :ok) do %>
|
||||||
|
<td class="py-4 px-6 whitespace-nowrap">
|
||||||
|
<%= server.server.host %>:<%= server.server.port %>
|
||||||
|
</td>
|
||||||
|
<td class="py-4 px-6 whitespace-nowrap">
|
||||||
|
<%= status %>
|
||||||
|
</td>
|
||||||
|
<td class="py-4 px-6 whitespace-nowrap">
|
||||||
|
<%= Enum.at(response.aead_algorithms, 0) %>
|
||||||
|
</td>
|
||||||
|
<td class="py-4 px-6 whitespace-nowrap">
|
||||||
|
<%= length(response.cookies) %>
|
||||||
|
</td>
|
||||||
|
<td class="py-4 px-6 whitespace-nowrap">
|
||||||
|
<%= response.cookie_length %>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<% else %>
|
||||||
|
<td class="py-4 px-6 whitespace-nowrap">
|
||||||
|
<%= server.server.host %>:<%= server.server.port %>
|
||||||
|
</td>
|
||||||
|
<td class="py-4 px-6 whitespace-nowrap">
|
||||||
|
<span class="group relative">
|
||||||
|
<%= status %>
|
||||||
|
<span class="pointer-events-none absolute -top-9 left-0 w-max p-1 rounded-lg bg-zinc-300 dark:bg-zinc-600 opacity-0 transition-opacity group-hover:opacity-100">
|
||||||
|
<%= response %>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="py-4 px-6 whitespace-nowrap"> - </td>
|
||||||
|
<td class="py-4 px-6 whitespace-nowrap"> - </td>
|
||||||
|
<td class="py-4 px-6 whitespace-nowrap"> - </td>
|
||||||
|
<% end %>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
|
||||||
|
|
@ -14,16 +14,10 @@ defmodule ChronoscopeWeb.Router do
|
||||||
plug :accepts, ["json"]
|
plug :accepts, ["json"]
|
||||||
end
|
end
|
||||||
|
|
||||||
scope "/test", ChronoscopeWeb do
|
|
||||||
pipe_through :browser
|
|
||||||
|
|
||||||
live "/", IndexLive
|
|
||||||
end
|
|
||||||
|
|
||||||
scope "/", ChronoscopeWeb do
|
scope "/", ChronoscopeWeb do
|
||||||
pipe_through :browser
|
pipe_through :browser
|
||||||
|
|
||||||
get "/", PageController, :home
|
live "/", IndexLive
|
||||||
end
|
end
|
||||||
|
|
||||||
scope "/api/v1", ChronoscopeWeb.API.V1 do
|
scope "/api/v1", ChronoscopeWeb.API.V1 do
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue