add blocks and placeholders for where stuff will go later
This commit is contained in:
Nikos Papadakis
parent
085e000009
commit
53572d4993
9 changed files with 254 additions and 205 deletions
|
|
@ -473,11 +473,7 @@ defmodule PrymnWeb.CoreComponents do
|
|||
<th :for={col <- @col} class="p-0 pr-6 pb-4 font-normal"><%= col[:label] %></th>
|
||||
<th class="relative p-0 pb-4">
|
||||
<span class="sr-only">
|
||||
<%= if @gettext do %>
|
||||
<%= gettext("Actions") %>
|
||||
<% else %>
|
||||
Actions
|
||||
<% end %>
|
||||
</span>
|
||||
</th>
|
||||
</tr>
|
||||
|
|
|
|||
|
|
@ -1,43 +1,39 @@
|
|||
<header class="px-4 sm:px-6 lg:px-8">
|
||||
<header>
|
||||
<a
|
||||
href="#main"
|
||||
class="absolute left-0 -translate-y-full bg-black p-2 text-white transition-transform focus:transform-none"
|
||||
>
|
||||
<%= gettext("Skip to content") %>
|
||||
</a>
|
||||
<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-stretch justify-between border-b border-zinc-300 bg-gray-100 px-4 text-sm sm:px-6 lg:px-8">
|
||||
<div class="my-auto leading-tight">
|
||||
<p class="text-[9px]">codename</p>
|
||||
<a href="/" class="text-lg font-medium">
|
||||
Prymn
|
||||
</a>
|
||||
<p class="bg-brand/5 text-brand rounded-full px-2 font-medium leading-6">
|
||||
v<%= Application.spec(:phoenix, :vsn) %>
|
||||
<p class="inline text-xs">
|
||||
v<%= Application.spec(:prymn, :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
|
||||
</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>
|
||||
<.link href={~p"/users/settings"} class="hover:text-zinc-700">
|
||||
<%= @current_user.email %>
|
||||
</.link>
|
||||
<.link href={~p"/auth/log_out"} method="delete" class="hover:text-zinc-700">
|
||||
Log out
|
||||
<div class="flex items-center border-r border-l border-zinc-300 text-zinc-900 hover:bg-white">
|
||||
<.link class="px-3 py-4" href={~p"/users/settings"}>
|
||||
<.icon name="hero-user" />
|
||||
<.icon name="hero-chevron-down" />
|
||||
</.link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main id="main" class="px-4 py-20 sm:px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-2xl">
|
||||
<main id="main" class="px-4 sm:px-6 lg:px-10">
|
||||
<div class="mb-8 border-b border-zinc-900 pt-10 pb-2 font-medium">
|
||||
<ul class="flex gap-4">
|
||||
<li>Projects</li>
|
||||
<li>Usage</li>
|
||||
<li>Activities</li>
|
||||
<li>Limits</li>
|
||||
<li>Support</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pb-20">
|
||||
<.flash_group flash={@flash} />
|
||||
<%= @inner_content %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="csrf-token" content={get_csrf_token()} />
|
||||
<.live_title suffix=" · Phoenix Framework">
|
||||
<.live_title suffix="｜Prymn">
|
||||
<%= assigns[:page_title] || "Prymn" %>
|
||||
</.live_title>
|
||||
<link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
|
||||
|
|
|
|||
|
|
@ -1,27 +0,0 @@
|
|||
<div class="px-4 py-10 sm:px-6 sm:py-28 lg:px-8 xl:px-28 xl:py-32">
|
||||
<div class="mx-auto max-w-xl lg:mx-0">
|
||||
<svg viewBox="0 0 71 48" class="h-12" aria-hidden="true">
|
||||
<path
|
||||
d="m26.371 33.477-.552-.1c-3.92-.729-6.397-3.1-7.57-6.829-.733-2.324.597-4.035 3.035-4.148 1.995-.092 3.362 1.055 4.57 2.39 1.557 1.72 2.984 3.558 4.514 5.305 2.202 2.515 4.797 4.134 8.347 3.634 3.183-.448 5.958-1.725 8.371-3.828.363-.316.761-.592 1.144-.886l-.241-.284c-2.027.63-4.093.841-6.205.735-3.195-.16-6.24-.828-8.964-2.582-2.486-1.601-4.319-3.746-5.19-6.611-.704-2.315.736-3.934 3.135-3.6.948.133 1.746.56 2.463 1.165.583.493 1.143 1.015 1.738 1.493 2.8 2.25 6.712 2.375 10.265-.068-5.842-.026-9.817-3.24-13.308-7.313-1.366-1.594-2.7-3.216-4.095-4.785-2.698-3.036-5.692-5.71-9.79-6.623C12.8-.623 7.745.14 2.893 2.361 1.926 2.804.997 3.319 0 4.149c.494 0 .763.006 1.032 0 2.446-.064 4.28 1.023 5.602 3.024.962 1.457 1.415 3.104 1.761 4.798.513 2.515.247 5.078.544 7.605.761 6.494 4.08 11.026 10.26 13.346 2.267.852 4.591 1.135 7.172.555ZM10.751 3.852c-.976.246-1.756-.148-2.56-.962 1.377-.343 2.592-.476 3.897-.528-.107.848-.607 1.306-1.336 1.49Zm32.002 37.924c-.085-.626-.62-.901-1.04-1.228-1.857-1.446-4.03-1.958-6.333-2-1.375-.026-2.735-.128-4.031-.61-.595-.22-1.26-.505-1.244-1.272.015-.78.693-1 1.31-1.184.505-.15 1.026-.247 1.6-.382-1.46-.936-2.886-1.065-4.787-.3-2.993 1.202-5.943 1.06-8.926-.017-1.684-.608-3.179-1.563-4.735-2.408l-.043.03a2.96 2.96 0 0 0 .04-.029c-.038-.117-.107-.12-.197-.054l.122.107c1.29 2.115 3.034 3.817 5.004 5.271 3.793 2.8 7.936 4.471 12.784 3.73A66.714 66.714 0 0 1 37 40.877c1.98-.16 3.866.398 5.753.899Zm-9.14-30.345c-.105-.076-.206-.266-.42-.069 1.745 2.36 3.985 4.098 6.683 5.193 4.354 1.767 8.773 2.07 13.293.51 3.51-1.21 6.033-.028 7.343 3.38.19-3.955-2.137-6.837-5.843-7.401-2.084-.318-4.01.373-5.962.94-5.434 1.575-10.485.798-15.094-2.553Zm27.085 15.425c.708.059 1.416.123 2.124.185-1.6-1.405-3.55-1.517-5.523-1.404-3.003.17-5.167 1.903-7.14 3.972-1.739 1.824-3.31 3.87-5.903 4.604.043.078.054.117.066.117.35.005.699.021 1.047.005 3.768-.17 7.317-.965 10.14-3.7.89-.86 1.685-1.817 2.544-2.71.716-.746 1.584-1.159 2.645-1.07Zm-8.753-4.67c-2.812.246-5.254 1.409-7.548 2.943-1.766 1.18-3.654 1.738-5.776 1.37-.374-.066-.75-.114-1.124-.17l-.013.156c.135.07.265.151.405.207.354.14.702.308 1.07.395 4.083.971 7.992.474 11.516-1.803 2.221-1.435 4.521-1.707 7.013-1.336.252.038.503.083.756.107.234.022.479.255.795.003-2.179-1.574-4.526-2.096-7.094-1.872Zm-10.049-9.544c1.475.051 2.943-.142 4.486-1.059-.452.04-.643.04-.827.076-2.126.424-4.033-.04-5.733-1.383-.623-.493-1.257-.974-1.889-1.457-2.503-1.914-5.374-2.555-8.514-2.5.05.154.054.26.108.315 3.417 3.455 7.371 5.836 12.369 6.008Zm24.727 17.731c-2.114-2.097-4.952-2.367-7.578-.537 1.738.078 3.043.632 4.101 1.728.374.388.763.768 1.182 1.106 1.6 1.29 4.311 1.352 5.896.155-1.861-.726-1.861-.726-3.601-2.452Zm-21.058 16.06c-1.858-3.46-4.981-4.24-8.59-4.008a9.667 9.667 0 0 1 2.977 1.39c.84.586 1.547 1.311 2.243 2.055 1.38 1.473 3.534 2.376 4.962 2.07-.656-.412-1.238-.848-1.592-1.507Zm17.29-19.32c0-.023.001-.045.003-.068l-.006.006.006-.006-.036-.004.021.018.012.053Zm-20 14.744a7.61 7.61 0 0 0-.072-.041.127.127 0 0 0 .015.043c.005.008.038 0 .058-.002Zm-.072-.041-.008-.034-.008.01.008-.01-.022-.006.005.026.024.014Z"
|
||||
fill="#FD4F00"
|
||||
/>
|
||||
</svg>
|
||||
<h1 class="text-brand mt-10 flex items-center text-sm font-semibold leading-6">
|
||||
Phoenix Framework
|
||||
<small class="bg-brand/5 text-[0.8125rem] ml-3 rounded-full px-2 font-medium leading-6">
|
||||
v<%= Application.spec(:phoenix, :vsn) %>
|
||||
</small>
|
||||
</h1>
|
||||
<p class="text-[2rem] mt-4 font-semibold leading-10 tracking-tighter text-zinc-900">
|
||||
Welcome
|
||||
</p>
|
||||
<p class="mt-4 text-base leading-7 text-zinc-600">
|
||||
Create your server or your site
|
||||
</p>
|
||||
<div class="my-9 flex flex-col gap-5 text-center">
|
||||
<.link navigate={~p"/servers"} class="block rounded bg-black px-4 py-2 text-white">
|
||||
Servers
|
||||
</.link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
47
app/lib/prymn_web/live/dashboard_live.ex
Normal file
47
app/lib/prymn_web/live/dashboard_live.ex
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
defmodule PrymnWeb.DashboardLive do
|
||||
use PrymnWeb, :live_view
|
||||
|
||||
@impl true
|
||||
def render(assigns) do
|
||||
~H"""
|
||||
<div class="mx-auto max-w-4xl">
|
||||
<div class="mb-5">
|
||||
<h1 class="text-3xl font-bold leading-snug">Good morning, <%= @current_user.email %>!</h1>
|
||||
<h2 class="text-lg font-medium">Your overview</h2>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<div class="basis-6/12 rounded-lg p-3 shadow-md">
|
||||
<span class="text-7xl font-medium">0</span>
|
||||
<h2 class="mt-5 font-medium leading-snug text-gray-600">Total Servers</h2>
|
||||
<.link class="text-sm text-blue-600" navigate={~p"/servers"}>
|
||||
<.icon class="h-3 w-4" name="hero-arrow-right" /> View your servers
|
||||
</.link>
|
||||
</div>
|
||||
<div class="basis-6/12 rounded-lg p-3 shadow-md">
|
||||
<span class="text-7xl font-medium">0</span>
|
||||
<h2 class="mt-5 font-medium leading-snug text-gray-600">Apps</h2>
|
||||
<.link class="text-sm text-blue-600">
|
||||
<.icon class="h-3 w-4" name="hero-arrow-right" /> View your apps
|
||||
</.link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mx-auto mt-7 max-w-6xl">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="space-x-6 text-sm text-blue-600">
|
||||
<button>24 Hours</button>
|
||||
<button>7 Days</button>
|
||||
<button>30 Days</button>
|
||||
</div>
|
||||
<p>15 November — 16 November</p>
|
||||
</div>
|
||||
<div class="h-[150px] mt-3 w-full shrink-0 bg-slate-200"></div>
|
||||
<div class="h-[150px] mt-3 w-full shrink-0 bg-slate-200"></div>
|
||||
<div class="h-[150px] mt-3 w-full shrink-0 bg-slate-200"></div>
|
||||
<div class="h-[150px] mt-3 w-full shrink-0 bg-slate-200"></div>
|
||||
</div>
|
||||
"""
|
||||
end
|
||||
end
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
<.header>
|
||||
<div class="mx-auto max-w-2xl">
|
||||
<.header>
|
||||
Your servers
|
||||
<small class="block">
|
||||
<%= "#{Enum.count(@servers)} servers" %>
|
||||
|
|
@ -6,9 +7,9 @@
|
|||
<:actions>
|
||||
<.button type="link" patch={~p"/servers/new"}>Connect a Server</.button>
|
||||
</:actions>
|
||||
</.header>
|
||||
</.header>
|
||||
|
||||
<div class="space-y-5" phx-update="replace" id="servers">
|
||||
<div class="space-y-5" phx-update="replace" id="servers">
|
||||
<.link
|
||||
:for={server <- @servers}
|
||||
navigate={~p"/servers/#{server}"}
|
||||
|
|
@ -31,8 +32,9 @@
|
|||
</span>
|
||||
</div>
|
||||
</.link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<.modal :if={@live_action == :new} id="server-modal" show on_cancel={JS.patch(~p"/servers")}>
|
||||
<.modal :if={@live_action == :new} id="server-modal" show on_cancel={JS.patch(~p"/servers")}>
|
||||
<.live_component module={PrymnWeb.ServerLive.NewServer} id={:new} patch={~p"/servers"} />
|
||||
</.modal>
|
||||
</.modal>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ defmodule PrymnWeb.ServerLive.Show do
|
|||
|
||||
{:noreply,
|
||||
socket
|
||||
|> assign(:health, health || %{message: "Connecting..."})
|
||||
|> assign(:health, health || %{message: "Connecting...", tasks: []})
|
||||
|> assign(:page_title, server.name)
|
||||
|> assign(:server, server)
|
||||
|> assign(:dry_run, false)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,13 @@
|
|||
<.header>
|
||||
<div class="mx-auto max-w-2xl">
|
||||
<.header>
|
||||
<span class="relative flex items-center">
|
||||
<button>
|
||||
Server <%= @server.name %>
|
||||
<.icon name="hero-chevron-down" />
|
||||
</button>
|
||||
<button class="ml-4">
|
||||
<.icon class="h-3 w-3" name="hero-pencil" />
|
||||
</button>
|
||||
<span
|
||||
role="tooltip"
|
||||
class={[
|
||||
|
|
@ -26,16 +33,20 @@
|
|||
<:subtitle>
|
||||
<%= @server.public_ip %>
|
||||
</:subtitle>
|
||||
</.header>
|
||||
|
||||
<div class="my-3 text-sm text-slate-700">
|
||||
<:actions>
|
||||
<.button>+ New App</.button>
|
||||
<.button class="border border-black bg-transparent text-black hover:text-white">
|
||||
Quick actions <.icon name="hero-chevron-down" />
|
||||
</.button>
|
||||
</:actions>
|
||||
</.header>
|
||||
<div class="my-3 text-sm text-slate-700">
|
||||
<%= for {name, task} <- @health.tasks do %>
|
||||
Background task in progress: <%= name %>
|
||||
<p><%= task.progress %> complete</p>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div :if={@server.status == :unregistered} class="my-10">
|
||||
</div>
|
||||
<div :if={@server.status == :unregistered} class="my-10">
|
||||
<p class="mb-9">
|
||||
Connect to your server using root credentials and execute the following command:
|
||||
</p>
|
||||
|
|
@ -53,9 +64,8 @@
|
|||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div :if={@server.status == :registered && @sys_info} class="my-10">
|
||||
</div>
|
||||
<div :if={@server.status == :registered && @sys_info} class="my-10">
|
||||
<section class="flex justify-between rounded bg-gray-800 p-5 text-white">
|
||||
<div>
|
||||
<p class="text-xl"><%= @sys_info.uptime || "" %>s</p>
|
||||
|
|
@ -86,13 +96,11 @@
|
|||
<p class="text-sm">Used Disk</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mt-4">
|
||||
<form phx-change="change_dry_run">
|
||||
<.input type="checkbox" name="dry_run" value={@dry_run} label="Enable dry-run operations" />
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section class="mt-4">
|
||||
<h2 class="border-b border-solid border-gray-500 pb-1 text-2xl font-medium">System</h2>
|
||||
<p class="mt-4">
|
||||
|
|
@ -105,6 +113,33 @@
|
|||
</p>
|
||||
</p>
|
||||
</section>
|
||||
<section class="mt-4">
|
||||
<h2 class="border-b border-solid border-gray-500 pb-1 text-2xl font-medium">
|
||||
Backups
|
||||
</h2>
|
||||
<.table id="backups" rows={[%{date: "2023-10-11"}, %{date: "2023-10-10"}]}>
|
||||
<:col :let={backup} label="Date"><%= backup.date %></:col>
|
||||
<:action>
|
||||
<.button>Restore</.button>
|
||||
</:action>
|
||||
</.table>
|
||||
</section>
|
||||
<section class="mt-4">
|
||||
<h2 class="border-b border-solid border-gray-500 pb-1 text-2xl font-medium">
|
||||
Manage Services
|
||||
</h2>
|
||||
<.table
|
||||
id="services"
|
||||
rows={[%{name: "mariadb", status: "Active"}, %{name: "php8.0", status: "Disabled"}]}
|
||||
>
|
||||
<:col :let={service} label="Service"><%= service.name %></:col>
|
||||
<:col :let={service} label="Status"><%= service.status %></:col>
|
||||
<:action>
|
||||
<.button>Activate</.button>
|
||||
<.button>Deactivate</.button>
|
||||
</:action>
|
||||
</.table>
|
||||
</section>
|
||||
</div>
|
||||
<.back navigate={~p"/servers"}>Back to servers</.back>
|
||||
</div>
|
||||
|
||||
<.back navigate={~p"/servers"}>Back to servers</.back>
|
||||
|
|
|
|||
|
|
@ -27,10 +27,10 @@ defmodule PrymnWeb.Router do
|
|||
scope "/", PrymnWeb do
|
||||
pipe_through [:browser, :require_authenticated_user]
|
||||
|
||||
get "/", PageController, :home
|
||||
|
||||
live_session :require_authenticated_user,
|
||||
on_mount: [{PrymnWeb.UserAuth, :ensure_authenticated}] do
|
||||
live "/", DashboardLive
|
||||
|
||||
live "/users/settings", UserSettingsLive
|
||||
live "/users/settings/confirm_email/:token", UserSettingsLive
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue