Merge pull request #86 from EliHaugu/82-node-api-connections

82 node api connections
EliHaugu · Nov 2, 2024 · 24eca7b · 24eca7b
2 parents f94bf30 + b63561f
commit 24eca7b
Show file tree

Hide file tree

Showing 27 changed files with 611 additions and 389 deletions.
diff --git a/client/src/App.vue b/client/src/App.vue
@@ -25,7 +25,7 @@ provide('updateFlows', updateFlows)
 </script>
 <template>
   <Layout>
-    <RouterView class="z-10 my-5 mr-5 flex-grow rounded-3xl bg-white-200 p-6 dark:bg-accent-900" />
+    <RouterView class="z-10 my-2 mr-2 flex-grow rounded-2xl bg-white-200 p-4 dark:bg-accent-900" />
   </Layout>
 </template>
 

diff --git a/client/src/assets/mock_data.ts b/client/src/assets/mock_data.ts
@@ -89,105 +89,6 @@ export const logItems = [
   }
 ]
 
-export const devices: CustomNode[] = [
-  {
-    id: '1',
-    data: { label: 'Button Press', connection: 'BLE' },
-    position: { x: 0, y: 0 },
-    style: stripNodeStyles
-  },
-  {
-    id: '2',
-    data: { label: 'Backend Updated', connection: 'ADE' },
-    position: { x: 0, y: 0 },
-    style: stripNodeStyles
-  },
-  {
-    id: '3',
-    data: { label: 'Driver Signal', connection: 'BLE' },
-    position: { x: 0, y: 0 },
-    style: stripNodeStyles
-  },
-  {
-    id: '4',
-    data: { label: 'Light Turned On', connection: 'WiFi' },
-    position: { x: 0, y: 0 },
-    style: stripNodeStyles
-  },
-  {
-    id: '5',
-    data: { label: 'Button Signal', connection: 'BLE' },
-    position: { x: 0, y: 0 },
-    style: stripNodeStyles
-  },
-  {
-    id: '1',
-    data: { label: 'Button Press', connection: 'BLE' },
-    position: { x: 0, y: 0 },
-    style: stripNodeStyles
-  },
-  {
-    id: '2',
-    data: { label: 'Backend Updated', connection: 'ADE' },
-    position: { x: 0, y: 0 },
-    style: stripNodeStyles
-  },
-  {
-    id: '3',
-    data: { label: 'Driver Signal', connection: 'BLE' },
-    position: { x: 0, y: 0 },
-    style: stripNodeStyles
-  },
-  {
-    id: '4',
-    data: { label: 'Light Turned On', connection: 'WiFi' },
-    position: { x: 0, y: 0 },
-    style: stripNodeStyles
-  },
-  {
-    id: '5',
-    data: { label: 'Button Signal', connection: 'BLE' },
-    position: { x: 0, y: 0 },
-    style: stripNodeStyles
-  },
-  {
-    id: '1',
-    data: { label: 'Button Press', connection: 'BLE' },
-    position: { x: 0, y: 0 },
-    style: stripNodeStyles
-  },
-  {
-    id: '2',
-    data: { label: 'Backend Updated', connection: 'ADE' },
-    position: { x: 0, y: 0 },
-    style: stripNodeStyles
-  },
-  {
-    id: '3',
-    data: { label: 'Driver Signal', connection: 'BLE' },
-    position: { x: 0, y: 0 },
-    style: stripNodeStyles
-  },
-  {
-    id: '4',
-    data: { label: 'Light Turned On', connection: 'WiFi' },
-    position: { x: 0, y: 0 },
-    style: stripNodeStyles
-  },
-  {
-    id: '5',
-    data: { label: 'Button Signal', connection: 'BLE' },
-    position: { x: 0, y: 0 },
-    style: stripNodeStyles
-  },
-  {
-    id: '5',
-    data: { label: 'Button Signal', connection: 'BLE' },
-    position: { x: 0, y: 0 },
-    style: stripNodeStyles
-  }
-]
-
 export const mock_flows: Flow[] = [
   {
     id: '1',
@@ -197,48 +98,38 @@ export const mock_flows: Flow[] = [
     nodes: [
       {
         id: '1',
-        data: { label: 'Button Press', connection: 'BLE' },
         position: { x: 0, y: 0 },
-        style: stripNodeStyles
+        style: stripNodeStyles,
+        data: {
+          type: 'action',
+          label: 'Node 1',
+          device: 1,
+          function: 'Sample function'
+        }
       },
       {
         id: '2',
-        data: { label: 'Backend Updated', connection: 'ADE' },
+        label: 'Node 2',
+        nodeType: 'Action',
+        device: 2,
+        function: 'Sample function',
         position: { x: 150, y: 100 },
         style: stripNodeStyles
       },
       {
         id: '3',
-        data: { label: 'Driver Signal', connection: 'BLE' },
+        label: 'Node 3',
+        nodeType: 'Assertion',
+        device: 2,
+        function: 'Sample function',
         position: { x: 300, y: 200 },
         style: stripNodeStyles
       }
-    ] as CustomNode[],
+    ] as unknown as CustomNode[],
     edges: [
       { id: 'e1-2', source: '1', target: '2', type: 'smoothstep', updatable: true },
       { id: 'e2-3', source: '2', target: '3', type: 'smoothstep', updatable: true }
     ] as Edge[]
-  },
-  {
-    id: '2',
-    name: 'Second Flow',
-    status: 'Failed',
-    connectionTypes: ['BLE', 'WiFi'],
-    nodes: [
-      {
-        id: '1',
-        data: { label: 'Button Signal', connection: 'BLE' },
-        position: { x: 0, y: 0 },
-        style: stripNodeStyles
-      },
-      {
-        id: '2',
-        data: { label: 'Light Turned On', connection: 'WiFi' },
-        position: { x: 150, y: 150 },
-        style: stripNodeStyles
-      }
-    ] as CustomNode[],
-    edges: [{ id: 'e1-2', source: '1', target: '2', type: 'smoothstep', updatable: true }] as Edge[]
   }
 ]
 

diff --git a/client/src/components/FlowCard.vue b/client/src/components/FlowCard.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import BaseButton from '@/components/common/BaseButton.vue'
 import BaseInputField from './common/BaseInputField.vue'
-import Modal from './common/Modal.vue'
+import BaseModal from './common/BaseModal.vue'
 import type { Flow } from '@/types/FlowType'
 import EditPen from '@/icons/EditPen.vue'
 import { router } from '@/router'
@@ -26,12 +26,7 @@ const editFlowType = ref<Flow | null>(null)
 
 const editFlow = (flow: Flow) => {
   editFlowType.value = { ...flow }
-  showEditFlowForm.value = true
-}
-
-const cancelEditFlow = () => {
-  editFlowType.value = null
-  showEditFlowForm.value = false
+  ;(document.getElementById(`editFlowForm${flow.id}`) as HTMLDialogElement).showModal()
 }
 
 const updateFlow = () => {
@@ -104,14 +99,12 @@ const updateFlowCard = inject<(newFlowTypes: Flow[]) => void>('updateFlows', ()
     </base-button>
   </div>
 
-  <modal
-    v-if="showEditFlowForm && editFlowType"
-    :showModal="showEditFlowForm"
+  <base-modal
+    :id="'editFlowForm' + flow.id"
     submitButtonText="Update"
     title="Edit Flow"
     @submit="updateFlow"
-    @close="cancelEditFlow"
   >
-    <base-input-field v-model="editFlowType.name" label="Name" name="name" placeholder="" />
-  </modal>
+    <base-input-field label="Name" name="name" placeholder="" />
+  </base-modal>
 </template>
diff --git a/client/src/components/common/BaseButton.vue b/client/src/components/common/BaseButton.vue
@@ -3,7 +3,7 @@
     :type="type"
     class="rounded-md transition-colors duration-200"
     :class="[
-      'flex px-4 py-2 shadow-md',
+      'inline-flex justify-center px-4 py-2 shadow-md',
       variantClass,
       sizeClass,
       { 'hover:bg-opacity-80': hoverEffect, 'cursor-not-allowed opacity-50': disabled }
@@ -59,7 +59,7 @@ const handleClick = (event: Event) => {
 const variantClass = computed(() => {
   switch (props.variant) {
     case 'icon':
-      return 'bg-transparent hover:bg-accent-600'
+      return 'bg-transparent hover:bg-accent-600 shadow-none'
     case 'outline':
       return 'bg-primary-200 text-bg-700 transition-colours duration-200 hover:bg-accent-500 border border-accent-600'
     case 'secondary':

diff --git a/client/src/components/common/BaseInputField.vue b/client/src/components/common/BaseInputField.vue
@@ -11,13 +11,8 @@
       v-bind="$attrs"
       v-on="listeners"
     >
-      <option value="" disabled selected>Select connection type</option>
-      <option
-        v-if="inputComponent === 'select'"
-        v-for="option in options"
-        :key="option"
-        :value="option"
-      >
+      <option value="" disabled selected>Select</option>
+      <option v-for="option in options" :key="option" :value="option">
         {{ option }}
       </option>
     </component>

diff --git a/client/src/components/common/BaseModal.vue b/client/src/components/common/BaseModal.vue
@@ -0,0 +1,49 @@
+<template>
+  <teleport to="body">
+    <dialog
+      :aria-label="title"
+      :id="id"
+      class="absolute top-1/2 z-50 -translate-y-1/2 rounded-xl bg-primary-100 p-4 shadow-md dark:text-white-100"
+    >
+      <form method="dialog" @submit.prevent="submit" class="flex w-96 flex-col gap-2">
+        <h3 v-if="title" class="text-xl font-semibold">{{ title }}</h3>
+        <slot />
+        <div class="flex gap-2">
+          <base-button class="flex-grow" type="button" @click="close" :variant="'outline'"
+            >Cancel</base-button
+          >
+          <base-button class="flex-grow" type="submit">{{ submitButtonText }}</base-button>
+        </div>
+      </form>
+    </dialog>
+  </teleport>
+</template>
+
+<script setup lang="ts">
+import BaseButton from './BaseButton.vue'
+
+const props = defineProps<{
+  id: string
+  submitButtonText: string
+  title?: string
+  onSubmit: () => void
+}>()
+
+const close = () => {
+  ;(document.getElementById(props.id) as HTMLDialogElement).close()
+}
+
+const submit = () => {
+  props.onSubmit()
+  close()
+}
+</script>
+
+<style scoped>
+dialog[open]::backdrop {
+  background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(2px);
+  height: 100vh;
+  width: 100vw;
+}
+</style>
diff --git a/client/src/components/common/Modal.vue b/client/src/components/common/Modal.vue