From 5c47ede54e253dbec5b742ced207cabdd063a484 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Thu, 15 Aug 2024 17:16:34 +0200
Subject: [PATCH] feat(frontend): wip

---
 .../lib/components/graph/FlowGraphV2.svelte   |  2 +-
 .../graph/renderers/nodes/InputNode.svelte    |  7 +-
 .../renderers/triggers/TriggerButton.svelte   |  5 ++
 .../renderers/triggers/TriggerCount.svelte    |  9 ++
 .../renderers/triggers/TriggersWrapper.svelte | 36 ++++++++
 .../routes/(root)/(logged)/routing/+page.js   |  5 ++
 .../(root)/(logged)/routing/+page.svelte      | 86 +++++++++++++++++++
 7 files changed, 148 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/lib/components/graph/renderers/triggers/TriggerButton.svelte
 create mode 100644 frontend/src/lib/components/graph/renderers/triggers/TriggerCount.svelte
 create mode 100644 frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte
 create mode 100644 frontend/src/routes/(root)/(logged)/routing/+page.js
 create mode 100644 frontend/src/routes/(root)/(logged)/routing/+page.svelte

diff --git a/frontend/src/lib/components/graph/FlowGraphV2.svelte b/frontend/src/lib/components/graph/FlowGraphV2.svelte
index a0211ed342..0f57d5041d 100644
--- a/frontend/src/lib/components/graph/FlowGraphV2.svelte
+++ b/frontend/src/lib/components/graph/FlowGraphV2.svelte
@@ -225,7 +225,7 @@
 
 	const viewport = writable<Viewport>({
 		x: 0,
-		y: 5,
+		y: 100,
 		zoom: 1
 	})
 
diff --git a/frontend/src/lib/components/graph/renderers/nodes/InputNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/InputNode.svelte
index 0e7aa81e3f..ba062e155b 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/InputNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/InputNode.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import VirtualItem from '$lib/components/flows/map/VirtualItem.svelte'
-	import { ExternalLink, Wand2 } from 'lucide-svelte'
+	import { Calendar, ExternalLink, Split, Wand2, Webhook } from 'lucide-svelte'
 	import NodeWrapper from './NodeWrapper.svelte'
 	import Popover from '$lib/components/Popover.svelte'
 	import type { GraphEventHandlers } from '../../graphBuilder'
@@ -12,6 +12,7 @@
 	import { copilotInfo } from '$lib/stores'
 	import { base } from '$lib/base'
 	import type { Writable } from 'svelte/store'
+	import TriggersWrapper from '../triggers/TriggersWrapper.svelte'
 
 	export let data: {
 		insertable: boolean
@@ -30,6 +31,10 @@
 </script>
 
 <NodeWrapper enableTargetHandle={false} let:darkMode>
+	<div class="absolute -top-32 left-1/2 transform -translate-x-1/2 z-10">
+		<TriggersWrapper />
+	</div>
+
 	{#if data.insertable && !data.disableAi}
 		<div class="absolute -top-10 left-1/2 transform -translate-x-1/2 z-10">
 			<Popover>
diff --git a/frontend/src/lib/components/graph/renderers/triggers/TriggerButton.svelte b/frontend/src/lib/components/graph/renderers/triggers/TriggerButton.svelte
new file mode 100644
index 0000000000..eff37f9f89
--- /dev/null
+++ b/frontend/src/lib/components/graph/renderers/triggers/TriggerButton.svelte
@@ -0,0 +1,5 @@
+<div
+	class="bg-surface hover:bg-surface-hover rounded-full border center-center text-xs relative w-8 h-8 flex flex-row gap-2"
+>
+	<slot />
+</div>
diff --git a/frontend/src/lib/components/graph/renderers/triggers/TriggerCount.svelte b/frontend/src/lib/components/graph/renderers/triggers/TriggerCount.svelte
new file mode 100644
index 0000000000..01b215fa70
--- /dev/null
+++ b/frontend/src/lib/components/graph/renderers/triggers/TriggerCount.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	export let count: number = 0
+</script>
+
+<div class="absolute -right-1 -top-1">
+	<div class="bg-blue-500 rounded-full w-4 h-4 flex center-center text-white text-xs">
+		{count}
+	</div>
+</div>
diff --git a/frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte b/frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte
new file mode 100644
index 0000000000..bf8fd61b53
--- /dev/null
+++ b/frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Calendar, Plus, Split, Webhook } from 'lucide-svelte'
+	import { getStateColor } from '../../util'
+	import TriggerButton from './TriggerButton.svelte'
+
+	export let darkMode: boolean = false
+</script>
+
+<div
+	class="text-xs border-x border-t py-1 px-2 rounded-t-sm w-min border-surface-selected"
+	style={`background-color: ${getStateColor(undefined, darkMode)};`}
+>
+	Triggers
+</div>
+
+<div
+	class="flex flex-row gap-4 border p-2 rounded-b-lg rounded-r-lg border-surface-selected relative"
+>
+	<TriggerButton>
+		<Webhook size={14} />
+	</TriggerButton>
+	<TriggerButton>
+		<Calendar size={14} />
+	</TriggerButton>
+	<TriggerButton>
+		<Split size={14} />
+	</TriggerButton>
+
+	<div class="absolute -right-10 top-1/2 -translate-y-1/2">
+		<div
+			class="bg-surface hover:bg-surface-hover rounded-full border center-center text-xs relative w-6 h-6 flex flex-row gap-2"
+		>
+			<Plus size={14} />
+		</div>
+	</div>
+</div>
diff --git a/frontend/src/routes/(root)/(logged)/routing/+page.js b/frontend/src/routes/(root)/(logged)/routing/+page.js
new file mode 100644
index 0000000000..333e342db0
--- /dev/null
+++ b/frontend/src/routes/(root)/(logged)/routing/+page.js
@@ -0,0 +1,5 @@
+export function load() {
+	return {
+		stuff: { title: 'Routing' }
+	}
+}
diff --git a/frontend/src/routes/(root)/(logged)/routing/+page.svelte b/frontend/src/routes/(root)/(logged)/routing/+page.svelte
new file mode 100644
index 0000000000..b8a521b507
--- /dev/null
+++ b/frontend/src/routes/(root)/(logged)/routing/+page.svelte
@@ -0,0 +1,86 @@
+<script lang="ts">
+	import CenteredPage from '$lib/components/CenteredPage.svelte'
+	import { Badge, Button } from '$lib/components/common'
+	import PageHeader from '$lib/components/PageHeader.svelte'
+	import DataTable from '$lib/components/table/DataTable.svelte'
+	import Head from '$lib/components/table/Head.svelte'
+	import Cell from '$lib/components/table/Cell.svelte'
+	import { Plus } from 'lucide-svelte'
+
+	const workers: {
+		method: string
+		route: string
+		path: string
+	}[] = [
+		{
+			method: 'GET',
+			route: '/api/v1/{:id}/flows',
+			path: 'flows'
+		},
+		{
+			method: 'POST',
+			route: '/api/v1/flows',
+			path: 'flows'
+		},
+		{
+			method: 'GET',
+			route: '/api/v1/flows/:id',
+			path: 'flows'
+		},
+		{
+			method: 'PUT',
+			route: '/api/v1/flows/:id',
+			path: 'flows'
+		},
+		{
+			method: 'DELETE',
+			route: '/api/v1/flows/:id',
+			path: 'flows'
+		}
+	]
+</script>
+
+<CenteredPage>
+	<PageHeader
+		title="Routing"
+		tooltip="Trigger Scripts and Flows according to a cron schedule"
+		documentationLink="https://www.windmill.dev/docs/core_concepts/routing"
+	>
+		<Button size="md" startIcon={{ icon: Plus }} on:click={() => {}}>New&nbsp;route</Button>
+	</PageHeader>
+	<div class="w-full h-full flex flex-col">
+		<DataTable>
+			<Head>
+				<tr>
+					<Cell head first class="w-24">Method</Cell>
+					<Cell head>Path</Cell>
+					<Cell head last>Flow/Script</Cell>
+				</tr>
+			</Head>
+			<tbody class="divide-y">
+				{#each workers as x}
+					<tr>
+						<Cell first class="!w-24">
+							<select value={x.method} class="!w-24">
+								<option value="GET" class="!text-green-500">GET</option>
+								<option value="POST">POST</option>
+								<option value="PUT">PUT</option>
+								<option value="DELETE">DELETE</option>
+							</select>
+						</Cell>
+						<Cell>
+							<Badge small>
+								{x.route}
+							</Badge>
+						</Cell>
+						<Cell last>
+							<Badge small>
+								{x.path}
+							</Badge>
+						</Cell>
+					</tr>
+				{/each}
+			</tbody>
+		</DataTable>
+	</div>
+</CenteredPage>