UI stuffs
This commit is contained in:
@@ -8,7 +8,7 @@
|
||||
class="relative text-xs text-white normal-case rounded -ml-44 min-w-max menu bg-coolgray-200">
|
||||
@if ($application->status === 'running')
|
||||
<li>
|
||||
<div class="rounded-none hover:bg-coollabs" wire:click='deploy'><svg
|
||||
<div class="rounded-none hover:bg-coollabs hover:text-white" wire:click='deploy'><svg
|
||||
xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
@@ -19,10 +19,10 @@
|
||||
</svg>Restart</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="rounded-none hover:bg-coollabs" wire:click='force_deploy_without_cache'><svg
|
||||
xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<div class="rounded-none hover:bg-coollabs hover:text-white"
|
||||
wire:click='force_deploy_without_cache'><svg xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
|
||||
fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
d="M12.983 8.978c3.955 -.182 7.017 -1.446 7.017 -2.978c0 -1.657 -3.582 -3 -8 -3c-1.661 0 -3.204 .19 -4.483 .515m-2.783 1.228c-.471 .382 -.734 .808 -.734 1.257c0 1.22 1.944 2.271 4.734 2.74" />
|
||||
@@ -35,7 +35,7 @@
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="rounded-none hover:bg-red-500" wire:click='stop'><svg
|
||||
<div class="rounded-none hover:bg-red-500 hover:text-white" wire:click='stop'><svg
|
||||
xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
@@ -49,7 +49,7 @@
|
||||
</li>
|
||||
@else
|
||||
<li>
|
||||
<div class="rounded-none hover:bg-coollabs" wire:click='deploy'><svg
|
||||
<div class="rounded-none hover:bg-coollabs hover:text-white" wire:click='deploy'><svg
|
||||
xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
@@ -60,7 +60,7 @@
|
||||
<li>
|
||||
</li>
|
||||
<li>
|
||||
<div class="rounded-none hover:bg-coollabs" wire:click='deploy(true)'><svg
|
||||
<div class="rounded-none hover:bg-coollabs hover:text-white" wire:click='deploy(true)'><svg
|
||||
xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
|
||||
@@ -6,7 +6,8 @@
|
||||
<div class="absolute hidden group-hover:block">
|
||||
<ul tabindex="0" class="relative -ml-24 text-xs text-white normal-case rounded min-w-max menu bg-coolgray-200">
|
||||
<li>
|
||||
<a target="_blank" class="text-xs text-white rounded-none hover:no-underline hover:bg-coollabs"
|
||||
<a target="_blank"
|
||||
class="text-xs text-white rounded-none hover:no-underline hover:bg-coollabs hover:text-white"
|
||||
href="{{ $application->gitBranchLocation }}">
|
||||
<x-git-icon git="{{ $application->source?->getMorphClass() }}" />
|
||||
Git Repository
|
||||
@@ -15,8 +16,8 @@
|
||||
@if (data_get($application, 'fqdn'))
|
||||
@foreach (Str::of(data_get($application, 'fqdn'))->explode(',') as $fqdn)
|
||||
<li>
|
||||
<a class="text-xs text-white rounded-none hover:no-underline hover:bg-coollabs" target="_blank"
|
||||
href="{{ $fqdn }}">
|
||||
<a class="text-xs text-white rounded-none hover:no-underline hover:bg-coollabs hover:text-white"
|
||||
target="_blank" href="{{ $fqdn }}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
@@ -34,7 +35,7 @@
|
||||
@foreach (data_get($application, 'previews') as $preview)
|
||||
@if (data_get($preview, 'fqdn'))
|
||||
<li>
|
||||
<a class="text-xs text-white rounded-none hover:no-underline hover:bg-coollabs"
|
||||
<a class="text-xs text-white rounded-none hover:no-underline hover:bg-coollabs hover:text-white"
|
||||
target="_blank" href="{{ data_get($preview, 'fqdn') }}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
|
||||
@@ -55,7 +56,7 @@
|
||||
@foreach ($application->ports_mappings_array as $port)
|
||||
@if (isDev())
|
||||
<li>
|
||||
<a class="text-xs text-white rounded-none hover:no-underline hover:bg-coollabs"
|
||||
<a class="text-xs text-white rounded-none hover:no-underline hover:bg-coollabs hover:text-white"
|
||||
target="_blank" href="http://localhost:{{ explode(':', $port)[0] }}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
|
||||
@@ -70,7 +71,7 @@
|
||||
</li>
|
||||
@else
|
||||
<li>
|
||||
<a class="text-xs text-white rounded-none hover:no-underline hover:bg-coollabs"
|
||||
<a class="text-xs text-white rounded-none hover:no-underline hover:bg-coollabs hover:text-white"
|
||||
target="_blank"
|
||||
href="http://{{ $application->destination->server->ip }}:{{ explode(':', $port)[0] }}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24"
|
||||
|
||||
@@ -1,46 +1,18 @@
|
||||
@props([
|
||||
'type' => $attributes->get('type') ?? 'button',
|
||||
'disabled' => null,
|
||||
'confirm' => null,
|
||||
'confirmAction' => null,
|
||||
'tooltip' => null,
|
||||
])
|
||||
@isset($tooltip)
|
||||
<div class="tooltip tooltip-warning" data-tip="{{ $tooltip }}">
|
||||
@endisset
|
||||
@if ($type === 'submit')
|
||||
<button
|
||||
{{ $attributes->class(['btn btn-xs border-none no-animation normal-case text-white rounded', 'hover:bg-coolgray-400 bg-coolgray-200 h-7' => !$attributes->has('class')]) }}
|
||||
type="submit" @if ($disabled !== null) disabled @endif
|
||||
@isset($confirm)
|
||||
<button @disabled($disabled) {{ $attributes->merge(['class' => $defaultClass]) }}
|
||||
{{ $attributes->merge(['type' => 'button']) }}
|
||||
@isset($confirm)
|
||||
x-on:click="toggleConfirmModal('{{ $confirm }}', '{{ explode('(', $confirmAction)[0] }}')"
|
||||
@endisset
|
||||
@isset($confirmAction)
|
||||
@isset($confirmAction)
|
||||
x-on:{{ explode('(', $confirmAction)[0] }}.window="$wire.{{ explode('(', $confirmAction)[0] }}"
|
||||
@endisset>
|
||||
@if ($attributes->whereStartsWith('wire:click')->first())
|
||||
<span wire:target="submit" wire:loading.delay class="loading loading-spinner"></span>
|
||||
@endif
|
||||
{{ $slot }}
|
||||
</button>
|
||||
@elseif($type === 'button')
|
||||
<button
|
||||
{{ $attributes->class(['btn btn-xs border-none no-animation normal-case text-white rounded', 'hover:bg-coolgray-400 bg-coolgray-200 h-7' => !$attributes->has('class')]) }}
|
||||
@if ($disabled !== null) disabled @endif type="button"
|
||||
@isset($confirm)
|
||||
x-on:click="toggleConfirmModal('{{ $confirm }}', '{{ explode('(', $confirmAction)[0] }}')"
|
||||
@endisset
|
||||
@isset($confirmAction)
|
||||
x-on:{{ explode('(', $confirmAction)[0] }}.window="$wire.{{ explode('(', $confirmAction)[0] }}"
|
||||
@endisset>
|
||||
@if ($attributes->whereStartsWith('wire:click')->first())
|
||||
<span wire:target="{{ explode('(', $attributes->whereStartsWith('wire:click')->first())[0] }}"
|
||||
wire:loading.delay class="loading loading-spinner"></span>
|
||||
@endif
|
||||
{{ $slot }}
|
||||
</button>
|
||||
@endif
|
||||
@if ($isModal) onclick="{{ $modalId }}.showModal()" @endif>
|
||||
|
||||
@isset($tooltip)
|
||||
</div>
|
||||
@endisset
|
||||
@if ($attributes->get('type') === 'submit')
|
||||
<span wire:target="submit" wire:loading.delay class="loading loading-xs text-warning loading-spinner"></span>
|
||||
@else
|
||||
<span wire:target="{{ explode('(', $attributes->whereStartsWith('wire:click')->first())[0] }}" wire:loading.delay
|
||||
class="loading loading-xs loading-spinner"></span>
|
||||
@endif
|
||||
{{ $slot }}
|
||||
</button>
|
||||
|
||||
@@ -1,39 +1,29 @@
|
||||
@props([
|
||||
'id' => $attributes->has('id') || $attributes->has('label'),
|
||||
'required' => $attributes->has('required'),
|
||||
'label' => $attributes->has('label'),
|
||||
'helper' => $attributes->has('helper'),
|
||||
'instantSave' => $attributes->has('instantSave'),
|
||||
'noLabel' => $attributes->has('noLabel'),
|
||||
'noDirty' => $attributes->has('noDirty'),
|
||||
'disabled' => null,
|
||||
])
|
||||
<div {{ $attributes->merge(['class' => 'flex cursor-pointer label']) }}>
|
||||
<div class="flex gap-1 label-text">
|
||||
@if ($label)
|
||||
{{ $label }}
|
||||
@else
|
||||
{{ $id }}
|
||||
@endif
|
||||
@if ($helper)
|
||||
<div class="group w-fit">
|
||||
<div class="cursor-pointer text-warning">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
class="w-4 h-4 stroke-current">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="absolute hidden text-xs group-hover:block border-coolgray-400 bg-coolgray-500">
|
||||
<div class="p-4 card-body">
|
||||
{!! $helper !!}
|
||||
<div class="form-control min-w-fit">
|
||||
<label class="flex gap-4 cursor-pointer label">
|
||||
<span class="flex gap-2 label-text min-w-fit">
|
||||
@if ($label)
|
||||
{{ $label }}
|
||||
@else
|
||||
{{ $id }}
|
||||
@endif
|
||||
@if ($helper)
|
||||
<div class="group w-fit">
|
||||
<div class="cursor-pointer text-warning">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
class="w-4 h-4 stroke-current">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="absolute hidden text-xs group-hover:block border-coolgray-400 bg-coolgray-500">
|
||||
<div class="p-4 card-body">
|
||||
{!! $helper !!}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
<div class="flex-1"></div>
|
||||
<input type="checkbox" @if ($disabled !== null) disabled @endif name={{ $id }}
|
||||
@if (!$noDirty) wire:dirty.class="input-warning" @endif
|
||||
@if ($instantSave) wire:click='{{ $instantSave === 'instantSave' || $instantSave == '1' ? 'instantSave' : $instantSave }}' wire:model.defer={{ $id }} @else wire:model.defer={{ $value ?? $id }} @endif />
|
||||
@endif
|
||||
</span>
|
||||
<input @disabled($disabled) type="checkbox" {{ $attributes->merge(['class' => $defaultClass]) }}
|
||||
@if ($instantSave) wire:click='{{ $instantSave === 'instantSave' || $instantSave == '1' ? 'instantSave' : $instantSave }}' wire:model.defer={{ $id }} @else wire:model.defer={{ $value ?? $id }} @endif />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@@ -1,58 +1,40 @@
|
||||
<div class="w-full">
|
||||
@if ($label)
|
||||
<label class="label">
|
||||
<span class="flex gap-1 label-text">
|
||||
{{ $label }}
|
||||
@if ($required)
|
||||
<span class="text-warning">*</span>
|
||||
@endif
|
||||
@if ($helper)
|
||||
<x-helper :helper="$helper" />
|
||||
@endif
|
||||
</span>
|
||||
<label for="small-input"
|
||||
class="flex items-center gap-1 mb-2 text-sm font-medium text-neutral-400">{{ $label }}
|
||||
@if ($required)
|
||||
<span class="text-warning">*</span>
|
||||
@endif
|
||||
@if ($helper)
|
||||
<x-helper :helper="$helper" />
|
||||
@endif
|
||||
</label>
|
||||
@endif
|
||||
|
||||
<div class="w-full">
|
||||
@if ($type === 'password')
|
||||
<div class="w-full rounded join" x-data>
|
||||
<input {{ $attributes }} class="join-item" wire:model.defer={{ $id }}
|
||||
wire:dirty.class="input-warning" wire:loading.attr='disabled' @readonly($readonly)
|
||||
@disabled($disabled) type={{ $type }} id={{ $id }}
|
||||
name={{ $name }} @isset($value) value={{ $value }} @endisset
|
||||
@isset($placeholder) placeholder={{ $placeholder }} @endisset>
|
||||
@if (!$cannotPeakPassword)
|
||||
<span x-on:click="changePasswordFieldType" x-cloak @class([
|
||||
'border-l-0 border-none rounded-r no-animation h-7 btn join-item btn-xs',
|
||||
'bg-coolgray-200/50 hover:bg-coolgray-200/50 text-opacity-25' =>
|
||||
$disabled || $readonly,
|
||||
'bg-coolgray-200 hover:bg-coolgray-200' => !$disabled || !$readonly,
|
||||
])><svg
|
||||
xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 icon" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
|
||||
<path
|
||||
d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />
|
||||
</svg>
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
@else
|
||||
<input {{ $attributes }} id={{ $id }} name={{ $name }}
|
||||
wire:model.defer={{ $id }} wire:dirty.class="input-warning" wire:loading.attr='disabled'
|
||||
@readonly($readonly) @disabled($disabled)
|
||||
@isset($value) value="{{ $value }}" @endisset
|
||||
@isset($placeholder) placeholder="{{ $placeholder }}" @endisset>
|
||||
@endif
|
||||
@if (!$label && $helper)
|
||||
<x-helper :helper="$helper" />
|
||||
@endif
|
||||
@error($id)
|
||||
<label class="label">
|
||||
<span class="text-red-500 label-text-alt">{{ $message }}</span>
|
||||
</label>
|
||||
@enderror
|
||||
</div>
|
||||
@if ($type !== 'password')
|
||||
<input {{ $attributes->merge(['class' => $defaultClass]) }} @required($required)
|
||||
wire:model.defer={{ $id }} wire:dirty.class.remove='text-white'
|
||||
wire:dirty.class="text-black bg-warning" wire:loading.attr="disabled" type="{{ $type }}"
|
||||
@disabled($disabled) id="{{ $id }}" name="{{ $name }}">
|
||||
@elseif ($type === 'password')
|
||||
<div class="relative" x-data>
|
||||
@if ($allowToPeak)
|
||||
<div x-on:click="changePasswordFieldType"
|
||||
class="absolute inset-y-0 left-0 flex items-center pl-2 cursor-pointer hover:text-white">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
|
||||
<path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />
|
||||
</svg>
|
||||
</div>
|
||||
@endif
|
||||
<input {{ $attributes->merge(['class' => $defaultClass . ' pl-10']) }} @required($required)
|
||||
wire:model.defer={{ $id }} wire:dirty.class.remove='text-white'
|
||||
wire:dirty.class="text-black bg-warning" wire:loading.attr="disabled" type="{{ $type }}"
|
||||
@disabled($disabled) id="{{ $id }}" name="{{ $name }}">
|
||||
</div>
|
||||
@endif
|
||||
@if (!$label && $helper)
|
||||
<x-helper :helper="$helper" />
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@@ -1,43 +1,18 @@
|
||||
@props([
|
||||
'id' => null,
|
||||
'label' => null,
|
||||
'helper' => $attributes->has('helper'),
|
||||
'required' => false,
|
||||
])
|
||||
|
||||
<div {{ $attributes->merge(['class' => 'flex flex-col']) }}>
|
||||
<div class="w-full">
|
||||
@if ($label)
|
||||
<label class="label" for={{ $id }}>
|
||||
<span class="flex gap-1 label-text">
|
||||
{{ $label }}
|
||||
@if ($required)
|
||||
<span class="text-warning">*</span>
|
||||
@endif
|
||||
@if ($helper)
|
||||
<div class="group">
|
||||
<div class="cursor-pointer text-warning">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
class="w-4 h-4 stroke-current">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="absolute hidden text-xs group-hover:block border-coolgray-400 bg-coolgray-500">
|
||||
<div class="p-4 card-body">
|
||||
{!! $helper !!}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</span>
|
||||
<label for="small-input"
|
||||
class="flex items-center gap-1 mb-2 text-sm font-medium text-neutral-400">{{ $label }}
|
||||
@if ($required)
|
||||
<span class="text-warning">*</span>
|
||||
@endif
|
||||
@if ($helper)
|
||||
<x-helper :helper="$helper" />
|
||||
@endif
|
||||
</label>
|
||||
@endif
|
||||
<select {{ $attributes }}
|
||||
@if ($id) name={{ $id }} wire:model.defer={{ $id }} @endif>
|
||||
<select {{ $attributes->merge(['class' => $defaultClass]) }} @required($required)
|
||||
wire:dirty.class="text-black bg-warning" wire:loading.attr="disabled" name={{ $id }}
|
||||
wire:model.defer={{ $id }}>
|
||||
{{ $slot }}
|
||||
</select>
|
||||
|
||||
@error($id)
|
||||
<div class="text-red-500">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
@@ -1,13 +1,4 @@
|
||||
@props([
|
||||
'id' => $attributes->has('id'),
|
||||
'label' => $attributes->has('label'),
|
||||
'required' => null,
|
||||
'disabled' => null,
|
||||
'helper' => $attributes->has('helper'),
|
||||
'noDirty' => $attributes->has('noDirty'),
|
||||
])
|
||||
|
||||
<div class=" form-control">
|
||||
<div class="form-control">
|
||||
@if ($label)
|
||||
<label class="label">
|
||||
<span class="label-text">
|
||||
@@ -38,11 +29,9 @@
|
||||
</span>
|
||||
</label>
|
||||
@endif
|
||||
<textarea {{ $attributes }}
|
||||
@if ($id) name={{ $id }} wire:model.defer={{ $id }} @endisset
|
||||
@if ($disabled !== null) disabled @endif
|
||||
@if ($required !== null) required @endif name={{ $id }} wire:model.defer={{ $value ?? $id }}
|
||||
@if (!$noDirty) wire:dirty.class="input-warning" @endif></textarea>
|
||||
<textarea {{ $attributes->merge(['class' => $defaultClass]) }} @required($required) wire:model.defer={{ $id }}
|
||||
@disabled($disabled) id="{{ $id }}" name="{{ $name }}" name={{ $id }}
|
||||
wire:model.defer={{ $value ?? $id }} wire:dirty.class="input-warning"></textarea>
|
||||
@error($id)
|
||||
<label class="label">
|
||||
<span class="text-red-500 label-text-alt">{{ $message }}</span>
|
||||
|
||||
@@ -30,7 +30,14 @@
|
||||
<x-version class="fixed left-2 bottom-1" />
|
||||
<script>
|
||||
function changePasswordFieldType(event) {
|
||||
const element = event.target.parentElement.parentElement.children[0];
|
||||
let element = event.target
|
||||
for (let i = 0; i < 10; i++) {
|
||||
if (element.className === "relative") {
|
||||
break;
|
||||
}
|
||||
element = element.parentElement;
|
||||
}
|
||||
element = element.children[1];
|
||||
if (element.nodeName === 'INPUT') {
|
||||
if (element.type === 'password') {
|
||||
element.type = 'text';
|
||||
@@ -38,20 +45,6 @@
|
||||
element.type = 'password';
|
||||
}
|
||||
}
|
||||
if (element.nodeName === 'DIV') {
|
||||
if (element.children[0].type === 'password') {
|
||||
element.children[0].type = 'text';
|
||||
} else {
|
||||
element.children[0].type = 'password';
|
||||
}
|
||||
}
|
||||
if (element.nodeName === 'svg') {
|
||||
if (element.parentElement.parentElement.children[0].type === 'password') {
|
||||
element.parentElement.parentElement.children[0].type = 'text';
|
||||
} else {
|
||||
element.parentElement.parentElement.children[0].type = 'password';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
@@ -17,9 +17,9 @@
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
@vite(['resources/js/app.js', 'resources/css/app.css'])
|
||||
<style>
|
||||
[x-cloak] {
|
||||
display: none !important;
|
||||
}
|
||||
[x-cloak] {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
@livewireStyles
|
||||
</head>
|
||||
@@ -27,107 +27,100 @@
|
||||
<body>
|
||||
@livewireScripts
|
||||
@auth
|
||||
<x-toaster-hub />
|
||||
<x-navbar />
|
||||
<div class="fixed top-3 left-4" id="vue">
|
||||
<magic-bar></magic-bar>
|
||||
</div>
|
||||
<main class="main">
|
||||
{{ $slot }}
|
||||
</main>
|
||||
<x-version class="fixed left-2 bottom-1" />
|
||||
<script>
|
||||
let checkHealthInterval = null;
|
||||
let checkIfIamDeadInterval = null;
|
||||
<x-toaster-hub />
|
||||
<x-navbar />
|
||||
<div class="fixed top-3 left-4" id="vue">
|
||||
<magic-bar></magic-bar>
|
||||
</div>
|
||||
<main class="main">
|
||||
{{ $slot }}
|
||||
</main>
|
||||
<x-version class="fixed left-2 bottom-1" />
|
||||
<script>
|
||||
let checkHealthInterval = null;
|
||||
let checkIfIamDeadInterval = null;
|
||||
|
||||
function changePasswordFieldType(event) {
|
||||
const element = event.target.parentElement.parentElement.children[0];
|
||||
if (element.nodeName === 'INPUT') {
|
||||
if (element.type === 'password') {
|
||||
element.type = 'text';
|
||||
} else {
|
||||
element.type = 'password';
|
||||
}
|
||||
}
|
||||
if (element.nodeName === 'DIV') {
|
||||
if (element.children[0].type === 'password') {
|
||||
element.children[0].type = 'text';
|
||||
} else {
|
||||
element.children[0].type = 'password';
|
||||
}
|
||||
}
|
||||
if (element.nodeName === 'svg') {
|
||||
if (element.parentElement.parentElement.children[0].type === 'password') {
|
||||
element.parentElement.parentElement.children[0].type = 'text';
|
||||
} else {
|
||||
element.parentElement.parentElement.children[0].type = 'password';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function revive() {
|
||||
if (checkHealthInterval) return true;
|
||||
console.log('Checking server\'s health...')
|
||||
checkHealthInterval = setInterval(() => {
|
||||
fetch('/api/health')
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
Toaster.success('Coolify is back online. Reloading...')
|
||||
if (checkHealthInterval) clearInterval(checkHealthInterval);
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 5000)
|
||||
} else {
|
||||
console.log('Waiting for server to come back from dead...');
|
||||
function changePasswordFieldType(event) {
|
||||
let element = event.target
|
||||
for (let i = 0; i < 10; i++) {
|
||||
if (element.className === "relative") {
|
||||
break;
|
||||
}
|
||||
})
|
||||
return;
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
function upgrade() {
|
||||
if (checkIfIamDeadInterval) return true;
|
||||
console.log('Update initiated.')
|
||||
checkIfIamDeadInterval = setInterval(() => {
|
||||
fetch('/api/health')
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
console.log('It\'s alive. Waiting for server to be dead...');
|
||||
element = element.parentElement;
|
||||
}
|
||||
element = element.children[1];
|
||||
if (element.nodeName === 'INPUT') {
|
||||
if (element.type === 'password') {
|
||||
element.type = 'text';
|
||||
} else {
|
||||
Toaster.success('Update done, restarting Coolify!')
|
||||
console.log('It\'s dead. Reviving... Standby... Bzz... Bzz...')
|
||||
if (checkIfIamDeadInterval) clearInterval(checkIfIamDeadInterval);
|
||||
revive();
|
||||
element.type = 'password';
|
||||
}
|
||||
})
|
||||
return;
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function copyToClipboard(text) {
|
||||
navigator.clipboard.writeText(text);
|
||||
Livewire.emit('message', 'Copied to clipboard.');
|
||||
}
|
||||
Livewire.on('reloadWindow', () => {
|
||||
window.location.reload();
|
||||
})
|
||||
Livewire.on('info', (message) => {
|
||||
if (message) Toaster.info(message)
|
||||
})
|
||||
Livewire.on('error', (message) => {
|
||||
if (message) Toaster.error(message)
|
||||
})
|
||||
Livewire.on('warning', (message) => {
|
||||
if (message) Toaster.warning(message)
|
||||
})
|
||||
Livewire.on('success', (message) => {
|
||||
if (message) Toaster.success(message)
|
||||
})
|
||||
</script>
|
||||
function revive() {
|
||||
if (checkHealthInterval) return true;
|
||||
console.log('Checking server\'s health...')
|
||||
checkHealthInterval = setInterval(() => {
|
||||
fetch('/api/health')
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
Toaster.success('Coolify is back online. Reloading...')
|
||||
if (checkHealthInterval) clearInterval(checkHealthInterval);
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 5000)
|
||||
} else {
|
||||
console.log('Waiting for server to come back from dead...');
|
||||
}
|
||||
})
|
||||
return;
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
function upgrade() {
|
||||
if (checkIfIamDeadInterval) return true;
|
||||
console.log('Update initiated.')
|
||||
checkIfIamDeadInterval = setInterval(() => {
|
||||
fetch('/api/health')
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
console.log('It\'s alive. Waiting for server to be dead...');
|
||||
} else {
|
||||
Toaster.success('Update done, restarting Coolify!')
|
||||
console.log('It\'s dead. Reviving... Standby... Bzz... Bzz...')
|
||||
if (checkIfIamDeadInterval) clearInterval(checkIfIamDeadInterval);
|
||||
revive();
|
||||
}
|
||||
})
|
||||
return;
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
function copyToClipboard(text) {
|
||||
navigator.clipboard.writeText(text);
|
||||
Livewire.emit('message', 'Copied to clipboard.');
|
||||
}
|
||||
Livewire.on('reloadWindow', () => {
|
||||
window.location.reload();
|
||||
})
|
||||
Livewire.on('info', (message) => {
|
||||
if (message) Toaster.info(message)
|
||||
})
|
||||
Livewire.on('error', (message) => {
|
||||
if (message) Toaster.error(message)
|
||||
})
|
||||
Livewire.on('warning', (message) => {
|
||||
if (message) Toaster.warning(message)
|
||||
})
|
||||
Livewire.on('success', (message) => {
|
||||
if (message) Toaster.success(message)
|
||||
})
|
||||
</script>
|
||||
@endauth
|
||||
@guest
|
||||
{{ $slot }}
|
||||
{{ $slot }}
|
||||
@endguest
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
||||
53
resources/views/components/modal.blade.php
Normal file
53
resources/views/components/modal.blade.php
Normal file
@@ -0,0 +1,53 @@
|
||||
<dialog id="{{ $modalId }}" class="modal">
|
||||
@if ($yesOrNo)
|
||||
<form method="dialog" class="rounded modal-box" wire:submit.prevent='submit'>
|
||||
<div class="flex items-start">
|
||||
<div class="flex items-center justify-center flex-shrink-0 w-10 h-10 mr-4 rounded-full">
|
||||
<svg class="w-8 h-8 text-error" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex flex-col w-full gap-2">
|
||||
<h3 class="text-lg font-bold">{{ $modalTitle }}</h3>
|
||||
@isset($modalBody)
|
||||
{{ $modalBody }}
|
||||
@endisset
|
||||
@if ($modalSubmit)
|
||||
{{ $modalSubmit }}
|
||||
@else
|
||||
<div class="flex gap-4 mt-4">
|
||||
<x-forms.button class="w-24 bg-coolgray-200 hover:bg-coolgray-100" type="button"
|
||||
onclick="{{ $modalId }}.close()">Cancel
|
||||
</x-forms.button>
|
||||
<div class="flex-1"></div>
|
||||
<x-forms.button class="w-24" isError type="button"
|
||||
wire:click.prevent='{{ $action }}' onclick="{{ $modalId }}.close()">Continue
|
||||
</x-forms.button>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@else
|
||||
<form method="dialog" class="flex flex-col gap-2 rounded modal-box" wire:submit.prevent='submit'>
|
||||
<h3 class="text-lg font-bold">{{ $modalTitle }}</h3>
|
||||
@isset($modalBody)
|
||||
{{ $modalBody }}
|
||||
@endisset
|
||||
@if ($modalSubmit)
|
||||
{{ $modalSubmit }}
|
||||
@else
|
||||
<x-forms.button onclick="{{ $modalId }}.close()" type="submit">
|
||||
Save
|
||||
</x-forms.button>
|
||||
@endif
|
||||
|
||||
</form>
|
||||
@endif
|
||||
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button>close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
@@ -34,7 +34,7 @@
|
||||
</x-forms.button>
|
||||
<div class="flex-1"></div>
|
||||
<x-forms.button class="w-24" wire:click='{{ $action }}'
|
||||
x-on:click="{{ $show }} = false" isWarning type="button">Continue</x-forms.button>
|
||||
x-on:click="{{ $show }} = false" isError type="button">Continue</x-forms.button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user