ui ui ui ui ui ui ux ux ux ux ux ux

This commit is contained in:
Andras Bacsai
2024-03-21 12:44:32 +01:00
parent 8f66a41c09
commit b5775ff9d2
61 changed files with 597 additions and 430 deletions

View File

@@ -1,22 +1,11 @@
<div>
<x-modal yesOrNo modalId="stopProxy" modalTitle="Stop Proxy" action="stop">
<x-slot:modalBody>
<p>This proxy will be stopped. It is not reversible. <br>All resources will be unavailable.
<br>Please think
again.
</p>
</x-slot:modalBody>
</x-modal>
<x-modal yesOrNo modalId="restartProxy" modalTitle="Restart Proxy" action="restart">
<x-slot:modalBody>
<p>This proxy will be stopped and started. It is not reversible. <br>All resources will be unavailable
during the restart.
<br>Please think
again.
</p>
</x-slot:modalBody>
</x-modal>
@if ($server->isFunctional() && $server->proxyType() !== 'NONE')
<x-slide-over closeWithX fullScreen @startproxy.window="slideOverOpen = true">
<x-slot:title>Proxy Status</x-slot:title>
<x-slot:content>
<livewire:activity-monitor header="Logs" />
</x-slot:content>
</x-slide-over>
@if (data_get($server, 'proxy.status') === 'running')
<div class="flex gap-4">
@if ($currentRoute === 'server.proxy' && $traefikDashboardAvailable && $server->proxyType() === 'TRAEFIK_V2')
@@ -27,32 +16,39 @@
</a>
</button>
@endif
<x-forms.button isModal noStyle modalId="restartProxy"
class="flex items-center gap-2 cursor-pointer hover:text-white text-neutral-400">
<svg class="w-5 h-5 text-warning" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2">
<path d="M19.933 13.041a8 8 0 1 1-9.925-8.788c3.899-1 7.935 1.007 9.425 4.747" />
<path d="M20 4v5h-5" />
</g>
</svg>
Restart Proxy
</x-forms.button>
<x-forms.button isModal noStyle modalId="stopProxy"
class="flex items-center gap-2 cursor-pointer hover:text-white text-neutral-400">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-error" viewBox="0 0 24 24"
stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M6 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"></path>
<path d="M14 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"></path>
</svg>
Stop Proxy
</x-forms.button>
<x-modal-confirmation @click="$wire.dispatch('restartEvent')">
<x-slot:button-title>
<svg class="w-5 h-5 text-warning" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2">
<path d="M19.933 13.041a8 8 0 1 1-9.925-8.788c3.899-1 7.935 1.007 9.425 4.747" />
<path d="M20 4v5h-5" />
</g>
</svg>
Restart Proxy
</x-slot:button-title>
This proxy will be stopped and started. It is not reversible. <br>All resources will be unavailable
during the restart. <br>Please think again.
</x-modal-confirmation>
<x-modal-confirmation @click="$wire.dispatch('stopEvent')">
<x-slot:button-title>
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-error" viewBox="0 0 24 24"
stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M6 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
</path>
<path d="M14 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
</path>
</svg>
Stop Proxy
</x-slot:button-title>
This proxy will be stopped. It is not reversible. <br>All resources will be unavailable.
<br>Please think again.
</x-modal-confirmation>
</div>
@else
<button x-on:click="$wire.dispatch('checkProxy')"
class="flex items-center gap-2 cursor-pointer hover:text-white text-neutral-400">
<button @click="$wire.dispatch('checkProxy')" class="gap-2 button">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-warning" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
@@ -63,10 +59,21 @@
</button>
@endif
@endif
<script>
Livewire.on('proxyChecked', () => {
startProxy.showModal();
window.Livewire.dispatch('startProxy');
})
</script>
@script
<script>
$wire.$on('restartEvent', () => {
$wire.$dispatch('warning', 'Restarting proxy.');
$wire.$call('restart');
});
$wire.$on('proxyChecked', () => {
window.dispatchEvent(new CustomEvent('startproxy'))
$wire.$call('startProxy');
});
$wire.$on('stopEvent', () => {
$wire.$dispatch('warning', 'Stopping proxy.');
$wire.$call('stop');
});
</script>
@endscript
</div>