dave/coolify
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

refactoring

Browse Source
This commit is contained in:
Andras Bacsai
2023-08-29 14:36:17 +02:00
parent 2f9b7b188a
commit 291b9a84ef
23 changed files with 409 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
resources/views/layouts/app.blade.php Normal file
View File

@@ -0,0 +1,133 @@
<!DOCTYPE html>
<html data-theme="coollabs" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://api.fonts.coollabs.io" crossorigin>
<link href="https://api.fonts.coollabs.io/css2?family=Inter&display=swap" rel="stylesheet">
@env('local')
<title>Coolify - localhost</title>
<link rel="icon" href="{{ asset('favicon-dev.png') }}" type="image/x-icon" />
@else
<title>{{ $title ?? 'Coolify' }}</title>
<link rel="icon" href="{{ asset('coolify-transparent.png') }}" type="image/x-icon" />
@endenv
<meta name="csrf-token" content="{{ csrf_token() }}">
@vite(['resources/js/app.js', 'resources/css/app.css'])
<style>
[x-cloak] {
display: none !important;
}
</style>
@livewireStyles
</head>
<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 max-w-screen-2xl">
{{ $slot }}
</main>
<x-version class="fixed left-2 bottom-1" />
<script>
let checkHealthInterval = null;
let checkIfIamDeadInterval = null;
function changePasswordFieldType(event) {
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';
} else {
element.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...');
}
})
}, 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();
}
})
}, 2000);
}
function copyToClipboard(text) {
navigator.clipboard.writeText(text);
Livewire.emit('message', 'Copied to clipboard.');
}
Livewire.on('reloadWindow', (timeout) => {
if (timeout) {
setTimeout(() => {
window.location.reload();
}, timeout);
return;
} else {
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 }}
@endguest
</body>
</html>

9
resources/views/dashboard.blade.php → resources/views/livewire/dashboard.blade.php
View File

@@ -1,4 +1,4 @@
<x-layout>
<div>
<h1>Dashboard</h1>
<div class="subtitle">Something <x-highlighted text="(more)"/> useful will be here.</div>
<div class="w-full rounded stats stats-vertical lg:stats-horizontal">
@@ -19,10 +19,7 @@
</div>
<div class="stat">
<div class="stat-title">S3 Storages</div>
<div class="stat-value">{{ $s3s->count() }}</div>
<div class="stat-value">{{ $s3s }}</div>
</div>
</div>
@if (isDev())
{{-- <livewire:dev.s3-test /> --}}
@endif
</x-layout>
</div>

54
resources/views/livewire/server/all.blade.php Normal file
View File

@@ -0,0 +1,54 @@
<div>
<div class="flex items-start gap-2">
<h1>Servers</h1>
<a class="text-white hover:no-underline" href="{{ route('server.create') }}">
<x-forms.button class="btn">+ Add</x-forms.button>
</a>
</div>
<div class="subtitle ">All Servers</div>
<div class="grid gap-2 lg:grid-cols-2">
@forelse ($servers as $server)
<a href="{{ route('server.show', ['server_uuid' => data_get($server, 'uuid')]) }}"
@class([
'gap-2 border cursor-pointer box group',
'border-transparent' => $server->settings->is_reachable,
'border-red-500' => !$server->settings->is_reachable,
])>
<div class="flex flex-col mx-6">
<div class=" group-hover:text-white">
{{ $server->name }}
</div>
<div class="text-xs group-hover:text-white">
{{ $server->description }}</div>
<div class="flex gap-1 text-xs text-error">
@if (!$server->settings->is_reachable)
<span>Not reachable</span>
@endif
@if (!$server->settings->is_reachable && !$server->settings->is_usable)
&
@endif
@if (!$server->settings->is_usable)
<span>Not usable by Coolify</span>
@endif
</div>
</div>
<div class="flex-1"></div>
</a>
@empty
<div>
<div>No servers found. Without a server, you won't be able to do much.</div>
<x-use-magic-bar link="/server/new" />
</div>
@endforelse
@isset($error)
<div class="text-center text-error">
<span>{{ $error }}</span>
</div>
@endisset
<script>
function goto(uuid) {
window.location.href = '/server/' + uuid;
}
</script>
</div>
</div>

4
resources/views/livewire/server/show.blade.php Normal file
View File

@@ -0,0 +1,4 @@
<div>
<x-server.navbar :server="$server" />
<livewire:server.form :server="$server" />
</div>

52
resources/views/server/all.blade.php
View File

@@ -1,53 +1,3 @@
<x-layout>
<div class="flex items-start gap-2">
<h1>Servers</h1>
<a class="text-white hover:no-underline" href="/server/new"> <x-forms.button class="btn">+ Add
</x-forms.button></a>
</div>
<div class="subtitle ">All Servers</div>
<div class="grid gap-2 lg:grid-cols-2">
@forelse ($servers as $server)
<div x-data x-on:click="goto('{{ $server->uuid }}')" @class([
'gap-2 border cursor-pointer box group',
'border-transparent' => $server->settings->is_reachable,
'border-red-500' => !$server->settings->is_reachable,
])>
<div class="flex flex-col mx-6">
<div class=" group-hover:text-white">
{{ $server->name }}
</div>
<div class="text-xs group-hover:text-white"
href="{{ route('server.show', ['server_uuid' => data_get($server, 'uuid')]) }}">
{{ $server->description }}</div>
<div class="flex gap-1 text-xs text-error">
@if (!$server->settings->is_reachable)
<span>Not reachable</span>
@endif
@if (!$server->settings->is_reachable && !$server->settings->is_usable)
&
@endif
@if (!$server->settings->is_usable)
<span>Not usable by Coolify</span>
@endif
</div>
</div>
<div class="flex-1"></div>
</div>
@empty
<div>
<div>No servers found. Without a server, you won't be able to do much.</div>
<x-use-magic-bar link="/server/new" />
</div>
@endforelse
@isset($error)
<div class="text-center text-error">
<span>{{ $error }}</span>
</div>
@endisset
<script>
function goto(uuid) {
window.location.href = '/server/' + uuid;
}
</script>
</div>
</x-layout>