fix: add platform and modal

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" />

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>

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>

svelte.config.js

@@ -8,7 +8,7 @@ const config = {
 	preprocess: preprocess(),
 
 	kit: {
-		adapter: adapter(),
+		adapter: adapter()
 	}
 };