Show a dynamically updated list of NTS servers #1
|
|
@ -1,28 +1,25 @@
|
|||
<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 gap-4">
|
||||
<a href="/">
|
||||
<img src={~p"/images/logo.svg"} width="36" />
|
||||
<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 font-semibold leading-6 text-zinc-900 dark:text-zinc-300 pe-4">
|
||||
<a href="/" class="hover:text-zinc-700 dark:hover:text-zinc-400">
|
||||
Chronoscope
|
||||
</a>
|
||||
<p class="bg-brand/5 text-brand rounded-full px-2 font-medium leading-6">
|
||||
v<%= Application.spec(:phoenix, :vsn) %>
|
||||
<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(:chronoscope, :vsn) %>
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900">
|
||||
<a href="https://twitter.com/elixirphoenix" class="hover:text-zinc-700">
|
||||
@elixirphoenix
|
||||
<div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900 dark:text-zinc-300">
|
||||
<a href="https://codeberg.org/mike-cifelli" class="hover:text-zinc-700 dark:hover:text-zinc-400">
|
||||
Codeberg
|
||||
</a>
|
||||
<a href="https://github.com/phoenixframework/phoenix" class="hover:text-zinc-700">
|
||||
GitHub
|
||||
</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 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">
|
||||
Add a Server <span aria-hidden="true">→</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<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} />
|
||||
<%= @inner_content %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
|
||||
</script>
|
||||
</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 %>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,16 @@
|
|||
defmodule ChronoscopeWeb.IndexLive do
|
||||
use ChronoscopeWeb, :live_view
|
||||
|
||||
@topic "test"
|
||||
alias Chronoscope.NTS
|
||||
|
||||
@topic "nts-servers"
|
||||
|
||||
def mount(_params, _session, socket) do
|
||||
ChronoscopeWeb.Endpoint.subscribe(@topic)
|
||||
ChronoscopeWeb.Endpoint.broadcast_from(self(), @topic, "", %{temperature: 100})
|
||||
{:ok, assign(socket, :temperature, 100)}
|
||||
{:ok, assign(socket, %{servers: NTS.list()})}
|
||||
end
|
||||
|
||||
def handle_event("inc_temperature", _params, socket) do
|
||||
updated = socket.assigns.temperature + 1
|
||||
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)}
|
||||
def handle_info(%{topic: @topic, payload: servers}, socket) do
|
||||
{:noreply, assign(socket, %{servers: servers})}
|
||||
end
|
||||
end
|
||||
|
|
|
|||
|
|
@ -1,6 +1,60 @@
|
|||
<div>
|
||||
Live!
|
||||
<br />
|
||||
Current temperature: <%= @temperature %>°F
|
||||
<button phx-click="inc_temperature">+</button>
|
||||
</div>
|
||||
<table class="mx-auto border-collapse table-auto min-w-full divide-y divide-zinc-200 dark:divide-zinc-700 text-left">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" class="py-3 px-6">
|
||||
Host
|
||||
</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"]
|
||||
end
|
||||
|
||||
scope "/test", ChronoscopeWeb do
|
||||
pipe_through :browser
|
||||
|
||||
live "/", IndexLive
|
||||
end
|
||||
|
||||
scope "/", ChronoscopeWeb do
|
||||
pipe_through :browser
|
||||
|
||||
get "/", PageController, :home
|
||||
live "/", IndexLive
|
||||
end
|
||||
|
||||
scope "/api/v1", ChronoscopeWeb.API.V1 do
|
||||
|
|
|
|||
Loading…
Reference in New Issue