V2 (#111)

Just v2

src/routes/new/destination/_Docker.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+
+	export let payload;
+
+	import { post } from '$lib/api';
+	import Setting from '$lib/components/Setting.svelte';
+	import { enhance, errorNotification } from '$lib/form';
+
+	let loading = false;
+
+	async function handleSubmit() {
+		try {
+			await post('/new/destination/check.json', { network: payload.network });
+			const { id } = await post('/new/destination/docker.json', {
+				...payload
+			});
+			return await goto(`/destinations/${id}`);
+		} catch ({ error }) {
+			return errorNotification(error);
+		}
+	}
+</script>
+
+<div class="flex justify-center px-6 pb-8">
+	<form on:submit|preventDefault={handleSubmit} class="grid grid-flow-row gap-2 py-4">
+		<div class="flex h-8 items-center space-x-2">
+			<div class="text-xl font-bold text-white">Configuration</div>
+			<button
+				type="submit"
+				class:bg-sky-600={!loading}
+				class:hover:bg-sky-500={!loading}
+				disabled={loading}
+				>{loading
+					? payload.isCoolifyProxyUsed
+						? 'Saving and configuring proxy...'
+						: 'Saving...'
+					: 'Save'}</button
+			>
+		</div>
+		<div class="grid grid-cols-3 items-center">
+			<label for="name">Name</label>
+			<div class="col-span-2">
+				<input required name="name" placeholder="name" bind:value={payload.name} />
+			</div>
+		</div>
+
+		<div class="grid grid-cols-3 items-center">
+			<label for="engine">Engine</label>
+			<div class="col-span-2">
+				<input
+					required
+					name="engine"
+					placeholder="eg: /var/run/docker.sock"
+					bind:value={payload.engine}
+				/>
+				<!-- <Explainer text="You can use remote Docker Engine with over SSH." /> -->
+			</div>
+		</div>
+		<!-- <div class="flex items-center">
+			<label for="remoteEngine">Remote Docker Engine?</label>
+			<input name="remoteEngine" type="checkbox" bind:checked={payload.remoteEngine} />
+		</div>
+		{#if payload.remoteEngine}
+			<div class="grid grid-cols-3 items-center">
+				<label for="user">User</label>
+				<div class="col-span-2">
+					<input required name="user" placeholder="eg: root" bind:value={payload.user} />
+				</div>
+			</div>
+			<div class="grid grid-cols-3 items-center">
+				<label for="port">Port</label>
+				<div class="col-span-2">
+					<input required name="port" placeholder="eg: 22" bind:value={payload.port} />
+				</div>
+			</div>
+		{/if} -->
+		<div class="grid grid-cols-3 items-center">
+			<label for="network">Network</label>
+			<div class="col-span-2">
+				<input
+					required
+					name="network"
+					placeholder="default: coolify"
+					bind:value={payload.network}
+				/>
+			</div>
+		</div>
+		<div class="flex justify-start">
+			<ul class="mt-2 divide-y divide-stone-800">
+				<Setting
+					bind:setting={payload.isCoolifyProxyUsed}
+					on:click={() => (payload.isCoolifyProxyUsed = !payload.isCoolifyProxyUsed)}
+					isPadding={false}
+					title="Use Coolify Proxy?"
+					description="This will install a proxy on the destination to allow you to access your applications and services without any manual configuration (recommended for Docker). Databases will have their own proxy."
+				/>
+			</ul>
+		</div>
+	</form>
+</div>

src/routes/new/destination/check.json.ts

@@ -0,0 +1,23 @@
+import { getUserDetails } from '$lib/common';
+import { isDockerNetworkExists, PrismaErrorHandler } from '$lib/database';
+import type { RequestHandler } from '@sveltejs/kit';
+
+export const post: RequestHandler = async (event) => {
+	const { teamId, status, body } = await getUserDetails(event);
+	if (status === 401) return { status, body };
+
+	const { network } = await event.request.json();
+	try {
+		const found = await isDockerNetworkExists({ network });
+		if (found) {
+			throw {
+				error: `Network ${network} already configured for another team!`
+			};
+		}
+		return {
+			status: 200
+		};
+	} catch (error) {
+		return PrismaErrorHandler(error);
+	}
+};

src/routes/new/destination/docker.json.ts

@@ -0,0 +1,19 @@
+import { asyncExecShell, getUserDetails } from '$lib/common';
+import * as db from '$lib/database';
+import { PrismaErrorHandler } from '$lib/database';
+import { dockerInstance } from '$lib/docker';
+import type { RequestHandler } from '@sveltejs/kit';
+
+export const post: RequestHandler = async (event) => {
+	const { teamId, status, body } = await getUserDetails(event);
+	if (status === 401) return { status, body };
+
+	const { name, engine, network, isCoolifyProxyUsed } = await event.request.json();
+
+	try {
+		const id = await db.newDestination({ name, teamId, engine, network, isCoolifyProxyUsed });
+		return { status: 200, body: { id } };
+	} catch (error) {
+		return PrismaErrorHandler(error);
+	}
+};

src/routes/new/destination/index.svelte

@@ -0,0 +1,43 @@
+<script>
+	import Docker from './_Docker.svelte';
+
+	let payload = {};
+	let selected = 'docker';
+
+	function setPredefined(type) {
+		selected = type;
+		switch (type) {
+			case 'docker':
+				payload = {
+					name: 'Local Docker',
+					engine: '/var/run/docker.sock',
+					remoteEngine: false,
+					user: 'root',
+					port: 22,
+					privateKey: null,
+					network: 'coolify',
+					isCoolifyProxyUsed: true
+				};
+				break;
+
+			default:
+				break;
+		}
+	}
+</script>
+
+<div class="flex space-x-1 p-6 font-bold">
+	<div class="mr-4 text-2xl tracking-tight">Add New Destination</div>
+</div>
+<div class="flex-col space-y-2 pb-10 text-center">
+	<div class="text-xl font-bold text-white">Predefined destinations</div>
+	<div class="flex justify-center space-x-2">
+		<button class="w-32" on:click={() => setPredefined('docker')}>Docker</button>
+		<button class="w-32" on:click={() => setPredefined('kubernetes')}>Kubernetes</button>
+	</div>
+</div>
+{#if selected === 'docker'}
+	<Docker {payload} />
+{:else}
+	<div class="text-center font-bold text-4xl py-10">Not implemented yet</div>
+{/if}