mirror of
https://github.com/ershisan99/coolify.git
synced 2025-12-29 12:33:59 +00:00
v1.0.12 - Sveltekit migration (#44)
Changed the whole tech stack to SvelteKit which means: - Typescript - SSR - No fastify :( - Beta, but it's fine! Other changes: - Tailwind -> Tailwind JIT - A lot more
This commit is contained in:
Andras Bacsai
71
src/routes/service/[name]/__layout.svelte
Normal file
71
src/routes/service/[name]/__layout.svelte
Normal file
@@ -0,0 +1,71 @@
|
||||
<script>
|
||||
import { browser } from '$app/env';
|
||||
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
import { page, session } from '$app/stores';
|
||||
import Tooltip from '$components/Tooltip.svelte';
|
||||
import { request } from '$lib/api/request';
|
||||
|
||||
import { toast } from '@zerodevx/svelte-toast';
|
||||
|
||||
async function removeService() {
|
||||
await request(`/api/v1/services/${$page.params.name}`, $session, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
if (browser) {
|
||||
toast.push('Service removed.');
|
||||
goto(`/dashboard/services`, { replaceState: true });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<nav class="flex text-white justify-end items-center m-4 fixed right-0 top-0 space-x-4">
|
||||
<Tooltip position="bottom" label="Delete">
|
||||
<button title="Delete" class="icon hover:text-red-500" on:click={removeService}>
|
||||
<svg
|
||||
class="w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</Tooltip>
|
||||
<div class="border border-warmGray-700 h-8" />
|
||||
<Tooltip position="bottom-left" label="Configuration">
|
||||
<button
|
||||
class="icon hover:text-yellow-400"
|
||||
disabled={$page.path === '/service/new'}
|
||||
class:text-yellow-400={$page.path.startsWith('/service')}
|
||||
class:bg-warmGray-700={$page.path.startsWith('/service')}
|
||||
on:click={() => goto(`/service/${$page.params.name}/configuration`)}
|
||||
>
|
||||
<svg
|
||||
class="w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</Tooltip>
|
||||
</nav>
|
||||
|
||||
<div class="text-white">
|
||||
<slot />
|
||||
</div>
|
||||
83
src/routes/service/[name]/configuration.svelte
Normal file
83
src/routes/service/[name]/configuration.svelte
Normal file
@@ -0,0 +1,83 @@
|
||||
<script>
|
||||
import { fade } from 'svelte/transition';
|
||||
import { toast } from '@zerodevx/svelte-toast';
|
||||
|
||||
import { page, session } from '$app/stores';
|
||||
import { request } from '$lib/api/request';
|
||||
import { goto } from '$app/navigation';
|
||||
import Loading from '$components/Loading.svelte';
|
||||
import Plausible from '$components/Service/Plausible.svelte';
|
||||
import { browser } from '$app/env';
|
||||
let service = {};
|
||||
async function loadServiceConfig() {
|
||||
if ($page.params.name) {
|
||||
try {
|
||||
service = await request(`/api/v1/services/${$page.params.name}`, $session);
|
||||
} catch (error) {
|
||||
browser && toast.push(`Cannot find service ${$page.params.name}?!`);
|
||||
goto(`/dashboard/services`, { replaceState: true });
|
||||
}
|
||||
}
|
||||
}
|
||||
async function activate() {
|
||||
try {
|
||||
await request(`/api/v1/services/deploy/${$page.params.name}/activate`, $session, {
|
||||
method: 'PATCH',
|
||||
body: {}
|
||||
});
|
||||
browser && toast.push(`All users are activated for Plausible.`);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
browser && toast.push(`Ooops, there was an error activating users for Plausible?!`);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#await loadServiceConfig()}
|
||||
<Loading />
|
||||
{:then}
|
||||
<div class="min-h-full text-white">
|
||||
<div class="py-5 text-left px-6 text-3xl tracking-tight font-bold flex items-center">
|
||||
<div>{$page.params.name === 'plausible' ? 'Plausible Analytics' : $page.params.name}</div>
|
||||
<div class="px-4">
|
||||
{#if $page.params.name === 'plausible'}
|
||||
<img
|
||||
alt="plausible logo"
|
||||
class="w-6 mx-auto"
|
||||
src="https://cdn.coollabs.io/assets/coolify/services/plausible/logo_sm.png"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
<a
|
||||
target="_blank"
|
||||
class="icon mx-2"
|
||||
href={service.config.baseURL}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
|
||||
/>
|
||||
</svg></a
|
||||
>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2 max-w-4xl mx-auto px-6" in:fade={{ duration: 100 }}>
|
||||
<div class="block text-center py-4">
|
||||
{#if $page.params.name === 'plausible'}
|
||||
<Plausible {service} />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/await}
|
||||
42
src/routes/service/new/[type]/__layout.svelte
Normal file
42
src/routes/service/new/[type]/__layout.svelte
Normal file
@@ -0,0 +1,42 @@
|
||||
<script>
|
||||
import { browser } from '$app/env';
|
||||
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
import { page, session } from '$app/stores';
|
||||
import Loading from '$components/Loading.svelte';
|
||||
import { request } from '$lib/api/request';
|
||||
import { initialNewService, newService } from '$store';
|
||||
|
||||
import { toast } from '@zerodevx/svelte-toast';
|
||||
import { onDestroy } from 'svelte';
|
||||
|
||||
async function checkService() {
|
||||
try {
|
||||
const data = await request(`/api/v1/services/${$page.params.type}`, $session);
|
||||
if (!data?.success) {
|
||||
if (browser) {
|
||||
goto(`/dashboard/services`, { replaceState: true });
|
||||
toast.push(
|
||||
`${
|
||||
$page.params.type === 'plausible' ? 'Plausible Analytics' : $page.params.type
|
||||
} already deployed.`
|
||||
);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
//
|
||||
}
|
||||
}
|
||||
onDestroy(() => {
|
||||
$newService = JSON.parse(JSON.stringify(initialNewService));
|
||||
});
|
||||
</script>
|
||||
|
||||
{#await checkService()}
|
||||
<Loading />
|
||||
{:then}
|
||||
<div class="text-white">
|
||||
<slot />
|
||||
</div>
|
||||
{/await}
|
||||
130
src/routes/service/new/[type]/index.svelte
Normal file
130
src/routes/service/new/[type]/index.svelte
Normal file
@@ -0,0 +1,130 @@
|
||||
<script>
|
||||
import { fade } from 'svelte/transition';
|
||||
|
||||
import { toast } from '@zerodevx/svelte-toast';
|
||||
import { newService } from '$store';
|
||||
import { page, session } from '$app/stores';
|
||||
import { request } from '$lib/api/request';
|
||||
import { goto } from '$app/navigation';
|
||||
import Loading from '$components/Loading.svelte';
|
||||
import TooltipInfo from '$components/TooltipInfo.svelte';
|
||||
import { browser } from '$app/env';
|
||||
|
||||
$: deployable =
|
||||
$newService.baseURL === '' ||
|
||||
$newService.baseURL === null ||
|
||||
$newService.email === '' ||
|
||||
$newService.email === null ||
|
||||
$newService.userName === '' ||
|
||||
$newService.userName === null ||
|
||||
$newService.userPassword === '' ||
|
||||
$newService.userPassword === null ||
|
||||
$newService.userPassword.length <= 6 ||
|
||||
$newService.userPassword !== $newService.userPasswordAgain;
|
||||
let loading = false;
|
||||
async function deploy() {
|
||||
try {
|
||||
loading = true;
|
||||
const payload = $newService;
|
||||
delete payload.userPasswordAgain;
|
||||
await request(`/api/v1/services/deploy/${$page.params.type}`, $session, {
|
||||
body: payload
|
||||
});
|
||||
if (browser) {
|
||||
toast.push(
|
||||
'Service deployment queued.<br><br><br>It could take 2-5 minutes to be ready, be patient and grab a coffee/tea!',
|
||||
{ duration: 4000 }
|
||||
);
|
||||
goto(`/dashboard/services`, { replaceState: true });
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
browser && toast.push('Oops something went wrong. See console.log.');
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="min-h-full text-white">
|
||||
<div class="py-5 text-left px-6 text-3xl tracking-tight font-bold">
|
||||
Deploy new
|
||||
{#if $page.params.type === 'plausible'}
|
||||
<span class="text-blue-500 px-2 capitalize">Plausible Analytics</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{#if loading}
|
||||
<Loading />
|
||||
{:else}
|
||||
<div class="space-y-2 max-w-4xl mx-auto px-6 flex-col text-center" in:fade={{ duration: 100 }}>
|
||||
<div class="grid grid-flow-row">
|
||||
<label for="Domain"
|
||||
>Domain <TooltipInfo
|
||||
position="right"
|
||||
label={`You will have your Plausible instance at here.`}
|
||||
/></label
|
||||
>
|
||||
<input
|
||||
id="Domain"
|
||||
class:border-red-500={$newService.baseURL == null || $newService.baseURL == ''}
|
||||
bind:value={$newService.baseURL}
|
||||
placeholder="analytics.coollabs.io"
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-flow-row">
|
||||
<label for="Email">Email</label>
|
||||
<input
|
||||
id="Email"
|
||||
class:border-red-500={$newService.email == null || $newService.email == ''}
|
||||
bind:value={$newService.email}
|
||||
placeholder="hi@coollabs.io"
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-flow-row">
|
||||
<label for="Username">Username </label>
|
||||
<input
|
||||
id="Username"
|
||||
class:border-red-500={$newService.userName == null || $newService.userName == ''}
|
||||
bind:value={$newService.userName}
|
||||
placeholder="admin"
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-flow-row">
|
||||
<label for="Password"
|
||||
>Password <TooltipInfo position="right" label={`Must be at least 7 characters.`} /></label
|
||||
>
|
||||
<input
|
||||
id="Password"
|
||||
type="password"
|
||||
class:border-red-500={$newService.userPassword == null ||
|
||||
$newService.userPassword == '' ||
|
||||
$newService.userPassword.length <= 6}
|
||||
bind:value={$newService.userPassword}
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-flow-row pb-5">
|
||||
<label for="PasswordAgain">Password again </label>
|
||||
<input
|
||||
id="PasswordAgain"
|
||||
type="password"
|
||||
class:placeholder-red-500={$newService.userPassword !== $newService.userPasswordAgain}
|
||||
class:border-red-500={$newService.userPassword !== $newService.userPasswordAgain}
|
||||
bind:value={$newService.userPasswordAgain}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
disabled={deployable}
|
||||
class:cursor-not-allowed={deployable}
|
||||
class:bg-blue-500={!deployable}
|
||||
class:hover:bg-blue-400={!deployable}
|
||||
class:hover:bg-transparent={deployable}
|
||||
class:text-warmGray-700={deployable}
|
||||
class:text-white={!deployable}
|
||||
class="button p-2"
|
||||
on:click={deploy}
|
||||
>
|
||||
Deploy
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
29
src/routes/service/new/index.svelte
Normal file
29
src/routes/service/new/index.svelte
Normal file
@@ -0,0 +1,29 @@
|
||||
<script>
|
||||
import { goto } from '$app/navigation';
|
||||
import { page } from '$app/stores';
|
||||
|
||||
import { fade } from 'svelte/transition';
|
||||
</script>
|
||||
|
||||
<div class="min-h-full text-white">
|
||||
<div class="py-5 text-left px-6 text-3xl tracking-tight font-bold flex items-center">
|
||||
Select a service
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center space-y-2 max-w-4xl mx-auto px-6" in:fade={{ duration: 100 }}>
|
||||
{#if $page.path === '/service/new'}
|
||||
<div class="flex justify-center space-x-4 font-bold pb-6">
|
||||
<div
|
||||
class="text-center flex-col items-center cursor-pointer ease-in-out transform hover:scale-105 duration-100 border-2 border-dashed border-transparent hover:border-blue-500 p-2 rounded bg-warmGray-800"
|
||||
on:click={() => goto('/service/new/plausible')}
|
||||
>
|
||||
<img
|
||||
alt="plausible logo"
|
||||
class="w-12 mx-auto"
|
||||
src="https://cdn.coollabs.io/assets/coolify/services/plausible/logo_sm.png"
|
||||
/>
|
||||
<div class="text-white">Plausible Analytics</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
Reference in New Issue
Block a user