Better proxy loading ui

This commit is contained in:
Andras Bacsai 2023-06-23 14:35:13 +02:00
parent 3293979381
commit 019a1fd448
2 changed files with 57 additions and 54 deletions

View File

@ -1 +1,6 @@
<span {{ $attributes->class(['bg-warning loading', 'loading-spinner' => !$attributes->has('class')]) }}></span> @props(['text' => null])
<span class="flex items-center gap-4 text-white">
{{ $text }}<span
{{ $attributes->class(['bg-warning loading', 'loading-spinner' => !$attributes->has('class')]) }}>
</span>
</span>

View File

@ -4,11 +4,6 @@
@if ($server->settings->is_reachable) @if ($server->settings->is_reachable)
@if ($server->proxy->type) @if ($server->proxy->type)
<div x-init="$wire.checkProxySettingsInSync"> <div x-init="$wire.checkProxySettingsInSync">
<div wire:loading wire:target="checkProxySettingsInSync">
<x-loading />
</div>
<div wire:loading.remove>
@if ($proxy_settings)
@if ($selectedProxy->value === 'TRAEFIK_V2') @if ($selectedProxy->value === 'TRAEFIK_V2')
<form wire:submit.prevent='saveConfiguration'> <form wire:submit.prevent='saveConfiguration'>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
@ -19,6 +14,7 @@
@endif @endif
<livewire:server.proxy.status :server="$server" /> <livewire:server.proxy.status :server="$server" />
</div> </div>
<div class="pt-3 pb-4 ">Traefik v2</div> <div class="pt-3 pb-4 ">Traefik v2</div>
@if ( @if (
$server->proxy->last_applied_settings && $server->proxy->last_applied_settings &&
@ -27,32 +23,34 @@
configs. configs.
</div> </div>
@endif @endif
<x-forms.input placeholder="https://coolify.io" id="redirect_url" <x-forms.input placeholder="https://coolify.io" id="redirect_url" label="Default Redirect 404"
label="Default Redirect 404"
helper="All urls that has no service available will be redirected to this domain.<span class='text-helper'>You can set to your main marketing page or your social media link.</span>" /> helper="All urls that has no service available will be redirected to this domain.<span class='text-helper'>You can set to your main marketing page or your social media link.</span>" />
<div class="container w-full mx-auto"> <div class="container w-full mx-auto">
<livewire:activity-monitor :header="true" /> <livewire:activity-monitor :header="true" />
</div> </div>
<div class="flex flex-col gap-2"> <div wire:loading wire:target="checkProxySettingsInSync" class="pt-4">
<x-loading text="Loading proxy configuration..." />
</div>
<div wire:loading.remove wire:target="checkProxySettingsInSync">
@if ($proxy_settings)
<div class="flex flex-col gap-2 pt-2">
<x-forms.textarea label="Configuration file: traefik.conf" class="text-xs" noDirty <x-forms.textarea label="Configuration file: traefik.conf" class="text-xs" noDirty
name="proxy_settings" wire:model.defer="proxy_settings" rows="30" /> name="proxy_settings" wire:model.defer="proxy_settings" rows="30" />
<x-forms.button wire:click.prevent="resetProxy"> <x-forms.button wire:click.prevent="resetProxy">
Reset configuration to default Reset configuration to default
</x-forms.button> </x-forms.button>
</div> </div>
@endif
</div>
</form> </form>
@endif @endif
@else
<div class="">Server is not validated. Validate first.</div>
@endif
</div>
</div>
@else @else
<div> <div>
<h2>Proxy</h2> <h2>Proxy</h2>
<div class="pt-2 pb-10 ">Select a proxy you would like to use on this server.</div> <div class="pt-2 pb-10 ">Select a proxy you would like to use on this server.</div>
<div class="flex gap-2"> <div class="flex gap-2">
<x-forms.button class="w-32 box" wire:click="setProxy('{{ \App\Enums\ProxyTypes::TRAEFIK_V2 }}')"> <x-forms.button class="w-32 box"
wire:click="setProxy('{{ \App\Enums\ProxyTypes::TRAEFIK_V2 }}')">
Traefik Traefik
v2 v2
</x-forms.button> </x-forms.button>