mirror of
https://github.com/ershisan99/coolify.git
synced 2025-12-25 20:49:28 +00:00
v1.0.13 (#46)
This commit is contained in:
Andras Bacsai
@@ -5,16 +5,19 @@
|
||||
import Postgresql from './SVGs/Postgresql.svelte';
|
||||
import Mysql from './SVGs/Mysql.svelte';
|
||||
import CouchDb from './SVGs/CouchDb.svelte';
|
||||
import Redis from './SVGs/Redis.svelte';
|
||||
import { page, session } from '$app/stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { request } from '$lib/api/request';
|
||||
import { request } from '$lib/request';
|
||||
import { browser } from '$app/env';
|
||||
import Loading from '$components/Loading.svelte';
|
||||
|
||||
let type;
|
||||
let defaultDatabaseName;
|
||||
|
||||
let loading = false;
|
||||
async function deploy() {
|
||||
try {
|
||||
loading = true;
|
||||
await request(`/api/v1/databases/deploy`, $session, {
|
||||
body: {
|
||||
type,
|
||||
@@ -28,82 +31,106 @@
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<div class="text-center space-y-2 max-w-4xl mx-auto px-6" in:fade={{ duration: 100 }}>
|
||||
{#if $page.path === '/database/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-green-600 p-2 rounded bg-warmGray-800 w-32"
|
||||
class:border-green-600={type === 'mongodb'}
|
||||
on:click={() => (type = 'mongodb')}
|
||||
>
|
||||
<div class="flex items-center justify-center my-2">
|
||||
<MongoDb customClass="w-6" />
|
||||
{#if loading}
|
||||
<Loading />
|
||||
{:else}
|
||||
<div class="text-center space-y-2 max-w-4xl mx-auto px-6" in:fade={{ duration: 100 }}>
|
||||
{#if $page.path === '/database/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-green-600 p-2 rounded bg-warmGray-800 w-32"
|
||||
class:border-green-600={type === 'mongodb'}
|
||||
on:click={() => (type = 'mongodb')}
|
||||
>
|
||||
<div class="flex items-center justify-center my-2">
|
||||
<MongoDb customClass="w-6" />
|
||||
</div>
|
||||
<div class="text-white">MongoDB</div>
|
||||
</div>
|
||||
<div class="text-white">MongoDB</div>
|
||||
</div>
|
||||
<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-red-600 p-2 rounded bg-warmGray-800 w-32"
|
||||
class:border-red-600={type === 'couchdb'}
|
||||
on:click={() => (type = 'couchdb')}
|
||||
>
|
||||
<div class="flex items-center justify-center my-2">
|
||||
<CouchDb customClass="w-12 text-red-600 fill-current" />
|
||||
<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-red-600 p-2 rounded bg-warmGray-800 w-32"
|
||||
class:border-red-600={type === 'couchdb'}
|
||||
on:click={() => (type = 'couchdb')}
|
||||
>
|
||||
<div class="flex items-center justify-center my-2">
|
||||
<CouchDb customClass="w-12 text-red-600 fill-current" />
|
||||
</div>
|
||||
<div class="text-white">Couchdb</div>
|
||||
</div>
|
||||
<div class="text-white">Couchdb</div>
|
||||
</div>
|
||||
<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-600 p-2 rounded bg-warmGray-800 w-32"
|
||||
class:border-blue-600={type === 'postgresql'}
|
||||
on:click={() => (type = 'postgresql')}
|
||||
>
|
||||
<div class="flex items-center justify-center my-2">
|
||||
<Postgresql customClass="w-12" />
|
||||
<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-600 p-2 rounded bg-warmGray-800 w-32"
|
||||
class:border-blue-600={type === 'postgresql'}
|
||||
on:click={() => (type = 'postgresql')}
|
||||
>
|
||||
<div class="flex items-center justify-center my-2">
|
||||
<Postgresql customClass="w-12" />
|
||||
</div>
|
||||
<div class="text-white">PostgreSQL</div>
|
||||
</div>
|
||||
<div class="text-white">PostgreSQL</div>
|
||||
</div>
|
||||
<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-orange-600 p-2 rounded bg-warmGray-800 w-32"
|
||||
class:border-orange-600={type === 'mysql'}
|
||||
on:click={() => (type = 'mysql')}
|
||||
>
|
||||
<div class="flex items-center justify-center">
|
||||
<Mysql customClass="w-10" />
|
||||
<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-orange-600 p-2 rounded bg-warmGray-800 w-32"
|
||||
class:border-orange-600={type === 'mysql'}
|
||||
on:click={() => (type = 'mysql')}
|
||||
>
|
||||
<div class="flex items-center justify-center">
|
||||
<Mysql customClass="w-10" />
|
||||
</div>
|
||||
<div class="text-white">MySQL</div>
|
||||
</div>
|
||||
<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-red-600 p-2 rounded bg-warmGray-800 w-32"
|
||||
class:border-red-600={type === 'redis'}
|
||||
on:click={() => (type = 'redis')}
|
||||
>
|
||||
<div class="flex items-center justify-center">
|
||||
<Redis customClass="w-12" />
|
||||
</div>
|
||||
<div class="text-white">Redis</div>
|
||||
</div>
|
||||
<div class="text-white">MySQL</div>
|
||||
</div>
|
||||
|
||||
<!-- <button
|
||||
<!-- <button
|
||||
class="button bg-gray-500 p-2 text-white hover:bg-yellow-500 cursor-pointer w-32"
|
||||
on:click="{() => (type = 'clickhouse')}"
|
||||
class:bg-yellow-500="{type === 'clickhouse'}"
|
||||
>
|
||||
Clickhouse
|
||||
</button> -->
|
||||
</div>
|
||||
{#if type}
|
||||
<div class="flex justify-center space-x-4 items-center">
|
||||
<label for="defaultDB">Default database</label>
|
||||
<input id="defaultDB" class="w-64" placeholder="random" bind:value={defaultDatabaseName} />
|
||||
|
||||
<button
|
||||
class:bg-green-600={type === 'mongodb'}
|
||||
class:hover:bg-green-500={type === 'mongodb'}
|
||||
class:bg-blue-600={type === 'postgresql'}
|
||||
class:hover:bg-blue-500={type === 'postgresql'}
|
||||
class:bg-orange-600={type === 'mysql'}
|
||||
class:hover:bg-orange-500={type === 'mysql'}
|
||||
class:bg-red-600={type === 'couchdb'}
|
||||
class:hover:bg-red-500={type === 'couchdb'}
|
||||
class:bg-yellow-500={type === 'clickhouse'}
|
||||
class:hover:bg-yellow-400={type === 'clickhouse'}
|
||||
class="button p-2 w-32 text-white"
|
||||
on:click={deploy}>Deploy</button
|
||||
>
|
||||
</div>
|
||||
{#if type}
|
||||
<div class="flex justify-center space-x-4 items-center">
|
||||
{#if type !== 'redis'}
|
||||
<label for="defaultDB">Default database</label>
|
||||
<input
|
||||
id="defaultDB"
|
||||
class="w-64"
|
||||
placeholder="random"
|
||||
bind:value={defaultDatabaseName}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<button
|
||||
class:bg-green-600={type === 'mongodb'}
|
||||
class:hover:bg-green-500={type === 'mongodb'}
|
||||
class:bg-blue-600={type === 'postgresql'}
|
||||
class:hover:bg-blue-500={type === 'postgresql'}
|
||||
class:bg-orange-600={type === 'mysql'}
|
||||
class:hover:bg-orange-500={type === 'mysql'}
|
||||
class:bg-red-600={type === 'couchdb' || type === 'redis'}
|
||||
class:hover:bg-red-500={type === 'couchdb' || type === 'redis'}
|
||||
class:bg-yellow-500={type === 'clickhouse'}
|
||||
class:hover:bg-yellow-400={type === 'clickhouse'}
|
||||
class="button p-2 w-32 text-white"
|
||||
on:click={deploy}>Deploy</button
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
37
src/components/Database/SVGs/Redis.svelte
Normal file
37
src/components/Database/SVGs/Redis.svelte
Normal file
@@ -0,0 +1,37 @@
|
||||
<script>
|
||||
export let customClass;
|
||||
|
||||
</script>
|
||||
|
||||
<svg
|
||||
class={customClass}
|
||||
height="64"
|
||||
viewBox="0 0 32 32"
|
||||
width="64"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
><defs
|
||||
><path
|
||||
id="a"
|
||||
d="m45.536 38.764c-2.013 1.05-12.44 5.337-14.66 6.494s-3.453 1.146-5.207.308-12.85-5.32-14.85-6.276c-1-.478-1.524-.88-1.524-1.26v-3.813s14.447-3.145 16.78-3.982 3.14-.867 5.126-.14 13.853 2.868 15.814 3.587v3.76c0 .377-.452.8-1.477 1.324z"
|
||||
/><path
|
||||
id="b"
|
||||
d="m45.536 28.733c-2.013 1.05-12.44 5.337-14.66 6.494s-3.453 1.146-5.207.308-12.85-5.32-14.85-6.276-2.04-1.613-.077-2.382l15.332-5.935c2.332-.837 3.14-.867 5.126-.14s12.35 4.853 14.312 5.57 2.037 1.31.024 2.36z"
|
||||
/></defs
|
||||
><g transform="matrix(.848327 0 0 .848327 -7.883573 -9.449691)"
|
||||
><use fill="#a41e11" xlink:href="#a" /><path
|
||||
d="m45.536 34.95c-2.013 1.05-12.44 5.337-14.66 6.494s-3.453 1.146-5.207.308-12.85-5.32-14.85-6.276-2.04-1.613-.077-2.382l15.332-5.936c2.332-.836 3.14-.867 5.126-.14s12.35 4.852 14.31 5.582 2.037 1.31.024 2.36z"
|
||||
fill="#d82c20"
|
||||
/><use fill="#a41e11" xlink:href="#a" y="-6.218" /><use fill="#d82c20" xlink:href="#b" /><path
|
||||
d="m45.536 26.098c-2.013 1.05-12.44 5.337-14.66 6.495s-3.453 1.146-5.207.308-12.85-5.32-14.85-6.276c-1-.478-1.524-.88-1.524-1.26v-3.815s14.447-3.145 16.78-3.982 3.14-.867 5.126-.14 13.853 2.868 15.814 3.587v3.76c0 .377-.452.8-1.477 1.324z"
|
||||
fill="#a41e11"
|
||||
/><use fill="#d82c20" xlink:href="#b" y="-6.449" /><g fill="#fff"
|
||||
><path
|
||||
d="m29.096 20.712-1.182-1.965-3.774-.34 2.816-1.016-.845-1.56 2.636 1.03 2.486-.814-.672 1.612 2.534.95-3.268.34zm-6.296 3.912 8.74-1.342-2.64 3.872z"
|
||||
/><ellipse cx="20.444" cy="21.402" rx="4.672" ry="1.811" /></g
|
||||
><path d="m42.132 21.138-5.17 2.042-.004-4.087z" fill="#7a0c00" /><path
|
||||
d="m36.963 23.18-.56.22-5.166-2.042 5.723-2.264z"
|
||||
fill="#ad2115"
|
||||
/></g
|
||||
></svg
|
||||
>
|
||||
Reference in New Issue
Block a user