From 2f039e195cef06ebff6d33ecefaf0c4c75ecfcfc Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Thu, 17 Feb 2022 00:30:12 +0100
Subject: [PATCH] fix: add platform and modal

---
 src/lib/components/modal.svelte               |  9 +++-
 .../console/[project]/_createPlatform.svelte  | 45 +++++++++++++++++++
 src/routes/console/[project]/index.svelte     | 34 ++++++++++++--
 svelte.config.js                              |  2 +-
 4 files changed, 85 insertions(+), 5 deletions(-)
 create mode 100644 src/routes/console/[project]/_createPlatform.svelte

diff --git a/src/lib/components/modal.svelte b/src/lib/components/modal.svelte
index a3a239f0e..9836dfbce 100644
--- a/src/lib/components/modal.svelte
+++ b/src/lib/components/modal.svelte
@@ -7,12 +7,19 @@
 			show = false;
 		}
 	};
+
+	const handleBLur = (event: MouseEvent) => {
+		const target: Partial<HTMLElement> = event.target;
+		if (target.tagName === 'DIALOG') {
+			show = false;
+		}
+	};
 </script>
 
 <svelte:window on:keydown={handleKeydown} />
 
 {#if show}
-	<dialog open>
+	<dialog open on:click={handleBLur}>
 		<article>
 			<header>
 				<span on:click={() => (show = false)} aria-label="Close" title="Close" class="close" />
diff --git a/src/routes/console/[project]/_createPlatform.svelte b/src/routes/console/[project]/_createPlatform.svelte
new file mode 100644
index 000000000..4bab6e9e7
--- /dev/null
+++ b/src/routes/console/[project]/_createPlatform.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { Modal } from '$lib/components';
+	import { InputText, Button } from '$lib/elements/forms';
+	import { addNotification } from '$lib/stores/notifications';
+	import { sdkForConsole } from '$lib/stores/sdk';
+	import { project } from './store';
+
+	export let show = false;
+
+	let name: string;
+	let hostname: string;
+
+	const create = async () => {
+		try {
+			await sdkForConsole.projects.createPlatform(
+				$project.$id,
+				'web',
+				name,
+				undefined,
+				undefined,
+				hostname
+			);
+			name = hostname = null;
+			project.load($project.$id);
+			show = false;
+		} catch (error) {
+			addNotification({
+				type: 'error',
+				message: error.message
+			});
+		}
+	};
+</script>
+
+<form on:submit|preventDefault={create}>
+	<Modal bind:show>
+		<span slot="header">Add Platform</span>
+		<InputText label="Name" bind:value={name} required />
+		<InputText label="Hostname" bind:value={hostname} required />
+		<footer>
+			<Button secondary on:click={() => (show = false)}>Cancel</Button>
+			<Button submit>Register</Button>
+		</footer>
+	</Modal>
+</form>
diff --git a/src/routes/console/[project]/index.svelte b/src/routes/console/[project]/index.svelte
index f500407fb..c3179d66c 100644
--- a/src/routes/console/[project]/index.svelte
+++ b/src/routes/console/[project]/index.svelte
@@ -2,14 +2,33 @@
 	import { page } from '$app/stores';
 	import { Button } from '$lib/elements/forms';
 	import { sdkForConsole } from '$lib/stores/sdk';
-	import type { Models } from 'src/sdk';
 	import { project } from './store';
+	import type { Models } from 'src/sdk';
+	import CreatePlatform from './_createPlatform.svelte';
+	import { addNotification } from '$lib/stores/notifications';
 
 	let range: '24h' | '30d' | '90d' = '30d';
 	let requestUsage = sdkForConsole.projects.getUsage($page.params.project, range);
+	let addPlatform = false;
 
 	const getLast = (list: Models.MetricList[]) => list[list.length - 1];
-	// const getTotal = (list: Models.MetricList[]) => list.reduce((prev, curr) => curr.value + prev, 0);
+	const deletePlatform = async (id: string) => {
+		if (confirm('You sure you wanna delete this?')) {
+			try {
+				await sdkForConsole.projects.deletePlatform($project.$id, id);
+				await project.load($project.$id);
+				addNotification({
+					message: 'Platform was deleted.',
+					type: 'success'
+				});
+			} catch (error) {
+				addNotification({
+					message: error.message,
+					type: 'error'
+				});
+			}
+		}
+	};
 </script>
 
 <article>
@@ -57,11 +76,20 @@
 					<Button secondary>Update</Button>
 				</div>
 				<div>
-					<Button>Delete</Button>
+					<Button on:click={() => deletePlatform(platform.$id)}>Delete</Button>
+				</div>
+			</div>
+		{:else}
+			<div class="grid">
+				<div>
+					<h4>No Platforms Added to Your Project</h4>
+					<p>Add your first platform and build your new application.</p>
 				</div>
 			</div>
 		{/each}
 	</article>
+	<Button on:click={() => (addPlatform = true)}>Add Platform</Button>
+	<CreatePlatform bind:show={addPlatform} />
 {/if}
 
 <style>
diff --git a/svelte.config.js b/svelte.config.js
index ad7173b66..c5cda981d 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -8,7 +8,7 @@ const config = {
 	preprocess: preprocess(),
 
 	kit: {
-		adapter: adapter(),
+		adapter: adapter()
 	}
 };