fix: realtime connection popup could be disabled

This commit is contained in:
Andras Bacsai 2023-12-11 12:03:32 +01:00
parent 5e03979f9c
commit e022492770
4 changed files with 92 additions and 27 deletions

View File

@ -0,0 +1,25 @@
<?php
namespace App\Livewire;
use Livewire\Component;
class RealtimeConnection extends Component
{
public $checkConnection = false;
public $showNotification = false;
public function render()
{
return view('livewire.realtime-connection');
}
public function disable()
{
auth()->user()->update(['is_notification_realtime_enabled' => false]);
$this->showNotification = false;
}
public function mount() {
$isRoot = auth()->user()->id === 0;
$showNotification = data_get(auth()->user(), 'is_notification_realtime_enabled');
$this->checkConnection = $isRoot && $showNotification;
}
}

View File

@ -0,0 +1,28 @@
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::table('users', function (Blueprint $table) {
$table->boolean('is_notification_realtime_enabled')->default(true);
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::table('users', function (Blueprint $table) {
$table->dropColumn('is_notification_realtime_enabled');
});
}
};

View File

@ -8,34 +8,10 @@
</div>
@endpersist
<livewire:sponsorship />
@auth
<livewire:realtime-connection />
@endauth
<main class="pb-10 main max-w-screen-2xl">
{{ $slot }}
</main>
<script data-navigate-once>
@auth
if ("{{ auth()->user()->id }}" == 0) {
let checkPusherInterval = null;
let checkNumber = 0;
let errorMessage =
"Coolify could not connect to the new realtime service introduced in beta.154.<br>Please check the related <a href='https://coolify.io/docs/cloudflare-tunnels' target='_blank'>documentation</a> or get help on <a href='https://coollabs.io/discord' target='_blank'>Discord</a>.";
checkPusherInterval = setInterval(() => {
if (window.Echo) {
if (window.Echo.connector.pusher.connection.state !== 'connected') {
checkNumber++;
if (checkNumber > 2) {
clearInterval(checkPusherInterval);
window.Livewire.dispatch('error', errorMessage);
}
} else {
console.log('Coolify is now connected to the new realtime service introduced in beta.154.');
clearInterval(checkPusherInterval);
}
} else {
clearInterval(checkPusherInterval);
window.Livewire.dispatch('error', errorMessage);
}
}, 2000);
}
@endauth
</script>
@endsection

View File

@ -0,0 +1,36 @@
<div x-data="{ showNotification: @entangle('showNotification') }">
@if ($checkConnection)
@script
<script>
let checkPusherInterval = null;
let checkNumber = 0;
checkPusherInterval = setInterval(() => {
if (window.Echo) {
if (window.Echo.connector.pusher.connection.state !== 'connected') {
checkNumber++;
if (checkNumber > 5) {
$wire.showNotification = true;
clearInterval(checkPusherInterval);
}
} else {
console.log('Coolify is now connected to the new realtime service introduced in beta.154.');
clearInterval(checkPusherInterval);
$wire.showNotification = true;
}
} else {
$wire.showNotification = true;
clearInterval(checkPusherInterval);
}
}, 2000);
</script>
@endscript
<div class="toast z-[9999]" x-cloak x-show="showNotification">
<div class="flex flex-col text-white border border-red-500 border-dashed rounded alert bg-coolgray-200">
<span><span class="font-bold text-left text-red-500">WARNING: </span>Coolify could not connect to the new realtime service introduced in beta.154. <br>This will cause unusual problems on the UI if not fixed!<br><br>Please check the
related <a href='https://coolify.io/docs/cloudflare-tunnels' target='_blank'>documentation</a> or get
help on <a href='https://coollabs.io/discord' target='_blank'>Discord</a>.</span>
<x-forms.button class="bg-coolgray-400" wire:click='disable'>Acknowledge the problem and disable this popup</x-forms.button>
</div>
</div>
@endif
</div>