lasthourcloud/resources/views/livewire/project/database/heading.blade.php

<nav wire:poll.5000ms="check_status">
    <x-resources.breadcrumbs :resource="$database" :parameters="$parameters" />
    <x-slide-over @startdatabase.window="slideOverOpen = true" closeWithX fullScreen>
        <x-slot:title>Database Startup Logs</x-slot:title>
        <x-slot:content>
            <livewire:activity-monitor header="Logs" showWaiting />
        </x-slot:content>
    </x-slide-over>
    <div class="navbar-main">
        <a class="{{ request()->routeIs('project.database.configuration') ? 'dark:text-white' : '' }}"
            href="{{ route('project.database.configuration', $parameters) }}">
            <button>Configuration</button>
        </a>
        <a class="{{ request()->routeIs('project.database.command') ? 'dark:text-white' : '' }}"
            href="{{ route('project.database.command', $parameters) }}">
            <button>Execute Command</button>
        </a>
        <a class="{{ request()->routeIs('project.database.logs') ? 'dark:text-white' : '' }}"
            href="{{ route('project.database.logs', $parameters) }}">
            <button>Logs</button>
        </a>
        @if (
            $database->getMorphClass() === 'App\Models\StandalonePostgresql' ||
                $database->getMorphClass() === 'App\Models\StandaloneMongodb' ||
                $database->getMorphClass() === 'App\Models\StandaloneMysql' ||
                $database->getMorphClass() === 'App\Models\StandaloneMariadb')
            <a class="{{ request()->routeIs('project.database.backup.index') ? 'dark:text-white' : '' }}"
                href="{{ route('project.database.backup.index', $parameters) }}">
                <button>Backups</button>
            </a>
        @endif
        <div class="flex-1"></div>
        @if (!str($database->status)->startsWith('exited'))
            <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
                </x-slot:button-title>
                This database will be stopped. <br>Please think again.
            </x-modal-confirmation>
        @else
            <button @click="$wire.dispatch('startEvent')" class="gap-2 button">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 dark:text-warning" 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="M7 4v16l13 -8z" />
                </svg>
                Start
            </button>
        @endif
        @script
            <script>
                $wire.$on('startEvent', () => {
                    window.dispatchEvent(new CustomEvent('startdatabase'));
                    $wire.$call('start');
                });
                $wire.$on('stopEvent', () => {
                    $wire.$dispatch('info', 'Stopping database.');
                    $wire.$call('stop');
                });
            </script>
        @endscript
    </div>
</nav>