mirror of
https://github.com/vitodeploy/vito.git
synced 2025-07-03 06:56:15 +00:00
Migrate to HTMX (#114)
Dropped Livewire Added HTMX Added Blade code lint Drop Mysql and Redis Migrate to SQLite
This commit is contained in:
Saeed Vaziry
GitHub
@ -1,37 +1,59 @@
|
||||
<x-server-layout :server="$server">
|
||||
<x-slot name="pageTitle">{{ __("Settings") }}</x-slot>
|
||||
|
||||
<livewire:server-settings.server-details :server="$server" />
|
||||
@include("server-settings.partials.server-details")
|
||||
|
||||
<x-card>
|
||||
<x-slot name="title">{{ __("Public Key") }}</x-slot>
|
||||
<x-slot name="description">{{ __("Your server's public key is here") }}</x-slot>
|
||||
<x-slot name="description">
|
||||
{{ __("Your server's public key is here") }}
|
||||
</x-slot>
|
||||
<div class="mt-5">
|
||||
<div>
|
||||
<div class="flex items-center justify-between">
|
||||
<x-input-label for="pk">
|
||||
{{ __("Public Key") }}
|
||||
</x-input-label>
|
||||
<x-input-label class="cursor-pointer" x-data="{ copied: false }" x-clipboard.raw="{{ $server->public_key }}">
|
||||
<x-input-label
|
||||
class="cursor-pointer"
|
||||
x-data="{ copied: false }"
|
||||
x-clipboard.raw="{{ $server->public_key }}"
|
||||
>
|
||||
<div x-show="copied" class="flex items-center">
|
||||
{{ __("Copied") }}
|
||||
</div>
|
||||
<div x-show="!copied" x-on:click="copied = true; setTimeout(() => {copied = false}, 2000)">{{ __("Copy") }}</div>
|
||||
<div
|
||||
x-show="!copied"
|
||||
x-on:click="
|
||||
copied = true
|
||||
setTimeout(() => {
|
||||
copied = false
|
||||
}, 2000)
|
||||
"
|
||||
>
|
||||
{{ __("Copy") }}
|
||||
</div>
|
||||
</x-input-label>
|
||||
</div>
|
||||
<x-textarea id="pk" name="pk" class="mt-1 h-48" disabled>{{ $server->public_key }}</x-textarea>
|
||||
<x-textarea id="pk" name="pk" class="mt-1 h-48" disabled>
|
||||
{{ $server->public_key }}
|
||||
</x-textarea>
|
||||
</div>
|
||||
</div>
|
||||
</x-card>
|
||||
|
||||
<livewire:server-settings.edit-server :server="$server" />
|
||||
@include("server-settings.partials.edit-server")
|
||||
|
||||
<x-card>
|
||||
<x-slot name="title">{{ __("Delete Server") }}</x-slot>
|
||||
<x-slot name="description">{{ __("Permanently delete the server.") }}</x-slot>
|
||||
<p>{{ __("Once your server is deleted, all of its resources and data will be permanently deleted and can't be restored") }}</p>
|
||||
<x-slot name="description">
|
||||
{{ __("Permanently delete the server.") }}
|
||||
</x-slot>
|
||||
<p>
|
||||
{{ __("Once your server is deleted, all of its resources and data will be permanently deleted and can't be restored") }}
|
||||
</p>
|
||||
<div class="mt-5">
|
||||
<livewire:servers.delete-server :server="$server"/>
|
||||
@include("servers.partials.delete-server")
|
||||
</div>
|
||||
</x-card>
|
||||
</x-server-layout>
|
||||
|
||||
@ -0,0 +1,11 @@
|
||||
<div>
|
||||
<x-primary-button
|
||||
id="btn-check-connection"
|
||||
hx-post="{{ route('servers.settings.check-connection', ['server' => $server]) }}"
|
||||
hx-swap="none"
|
||||
hx-ext="disable-element"
|
||||
hx-disable-element="#btn-check-connection"
|
||||
>
|
||||
{{ __("Check Connection") }}
|
||||
</x-primary-button>
|
||||
</div>
|
||||
@ -0,0 +1,71 @@
|
||||
<x-card>
|
||||
<x-slot name="title">{{ __("Edit Server") }}</x-slot>
|
||||
|
||||
<x-slot name="description">
|
||||
{{ __("You can edit your server's some of fields") }}
|
||||
</x-slot>
|
||||
|
||||
<form
|
||||
id="edit-server-form"
|
||||
hx-post="{{ route("servers.settings.edit", $server) }}"
|
||||
hx-swap="outerHTML"
|
||||
hx-select="#edit-server-form"
|
||||
hx-ext="disable-element"
|
||||
hx-disable-element="#btn-edit-server"
|
||||
class="mt-6 space-y-6"
|
||||
>
|
||||
<div>
|
||||
<x-input-label for="name" :value="__('Name')" />
|
||||
<x-text-input
|
||||
value="{{ old('name', $server->name) }}"
|
||||
id="name"
|
||||
name="name"
|
||||
type="text"
|
||||
class="mt-1 block w-full"
|
||||
required
|
||||
autocomplete="name"
|
||||
/>
|
||||
@error("name")
|
||||
<x-input-error class="mt-2" :messages="$message" />
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<x-input-label for="ip" :value="__('IP Address')" />
|
||||
<x-text-input
|
||||
value="{{ old('ip', $server->ip) }}"
|
||||
id="ip"
|
||||
name="ip"
|
||||
type="text"
|
||||
class="mt-1 block w-full"
|
||||
required
|
||||
autocomplete="ip"
|
||||
/>
|
||||
@error("ip")
|
||||
<x-input-error class="mt-2" :messages="$message" />
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<x-input-label for="port" :value="__('SSH Port')" />
|
||||
<x-text-input
|
||||
value="{{ old('port', $server->port) }}"
|
||||
id="port"
|
||||
name="port"
|
||||
type="text"
|
||||
class="mt-1 block w-full"
|
||||
required
|
||||
autocomplete="port"
|
||||
/>
|
||||
@error("port")
|
||||
<x-input-error class="mt-2" :messages="$message" />
|
||||
@enderror
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<x-slot name="actions">
|
||||
<x-primary-button id="btn-edit-server" form="edit-server-form">
|
||||
{{ __("Save") }}
|
||||
</x-primary-button>
|
||||
</x-slot>
|
||||
</x-card>
|
||||
@ -0,0 +1,11 @@
|
||||
<div>
|
||||
<x-secondary-button
|
||||
id="btn-reboot"
|
||||
hx-post="{{ route('servers.settings.reboot', ['server' => $server]) }}"
|
||||
hx-swap="none"
|
||||
hx-ext="disable-element"
|
||||
hx-disable-element="#btn-reboot"
|
||||
>
|
||||
{{ __("Reboot") }}
|
||||
</x-secondary-button>
|
||||
</div>
|
||||
@ -0,0 +1,62 @@
|
||||
<x-card>
|
||||
<x-slot name="title">{{ __("Details") }}</x-slot>
|
||||
<x-slot name="description">
|
||||
{{ __("More details about your server") }}
|
||||
</x-slot>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>{{ __("Created At") }}</div>
|
||||
<div>
|
||||
<x-datetime :value="$server->created_at" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="py-5">
|
||||
<div class="border-t border-gray-200 dark:border-gray-700"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>{{ __("Provider") }}</div>
|
||||
<div class="capitalize">{{ $server->provider }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="py-5">
|
||||
<div class="border-t border-gray-200 dark:border-gray-700"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>{{ __("Server ID") }}</div>
|
||||
<div class="flex items-center">
|
||||
<span class="rounded-md bg-gray-100 p-1 dark:bg-gray-700">
|
||||
{{ $server->id }}
|
||||
</span>
|
||||
{{-- <span class="ml-2">{{ __("You will need this when you use the API") }}</span> --}}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="py-5">
|
||||
<div class="border-t border-gray-200 dark:border-gray-700"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>{{ __("Status") }}</div>
|
||||
<div class="flex items-center">
|
||||
@include("servers.partials.server-status")
|
||||
<div class="ml-2 inline-flex">
|
||||
@include("server-settings.partials.check-connection")
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="py-5">
|
||||
<div class="border-t border-gray-200 dark:border-gray-700"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>{{ __("Reboot Server") }}</div>
|
||||
<div class="flex items-center">
|
||||
<div class="inline-flex">
|
||||
@include("server-settings.partials.reboot-server")
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-card>
|
||||
Reference in New Issue
Block a user