#84 run button start websocket connection and recieve and display logs

client/src/components/common/BaseButton.vue

@@ -49,6 +49,8 @@ const variantClass = computed(() => {
       return 'bg-accent-400 text-bg-700 '
     case 'light':
       return 'bg-accent-500 text-bg-900 hover:bg-accent-600'
+    case 'red':
+      return 'bg-error text-white-100'
     default:
       return 'bg-accent-600 text-white-100'
   }

client/src/components/flow/FlowHeader.vue

@@ -5,9 +5,10 @@ import ExitIcon from '@/icons/ExitIcon.vue'
 import NodesList from '@/components/flow/NodesList.vue'
 import ExportIcon from '@/icons/ExportIcon.vue'
 
-defineEmits(['update:displayLog'])
+defineEmits(['toggle-log', 'toggle-web-socket'])
 defineProps({
   displayLog: Boolean,
+  isRunning: Boolean,
   nodes: Array
 })
 </script>
@@ -24,10 +25,16 @@ defineProps({
     </h1>
 
     <div class="ml-auto flex gap-2">
-      <base-button variant="default" class="h-9 rounded-lg leading-tight"> Run </base-button>
+      <base-button
+        @click="$emit('toggle-web-socket')"
+        :variant="isRunning ? 'red' : 'default'"
+        class="h-9 rounded-lg leading-tight"
+      >
+        {{ isRunning ? 'Stop' : 'Run' }}
+      </base-button>
       <base-button
         :aria-expanded="displayLog"
-        @click="$emit('update:displayLog')"
+        @click="$emit('toggle-log')"
         class="h-9 rounded-lg leading-tight aria-expanded:bg-accent-500"
       >
         Logs

client/src/components/flow/FlowLogList.vue

@@ -71,7 +71,11 @@ watch(
       {{ logItems.find((item) => item.id === deviceId)?.name || 'All Devices' }}
     </h2>
     <ul v-if="deviceId !== 0">
-      <li v-for="log in state.logs.filter((item) => item.id === deviceId)" :key="log.id">
+      <li
+        v-for="log in state.logs.filter((item) => item.id === deviceId)"
+        :key="log.id"
+        class="m-2"
+      >
         {{ log.log }}
       </li>
     </ul>

client/src/interfaces/IWebSocketService.ts

@@ -2,6 +2,7 @@ import type { Log } from '@/types/WebSocketServiceTypes'
 
 export interface IWebSocketService {
   connect(port: number): void
+  disconnect(): void
   subscribe(listener: (log: Log) => void): void
   unsubscribe(listener: (log: Log) => void): void
   notifyListeners(log: Log): void

client/src/services/WebSocketService.ts

@@ -43,6 +43,16 @@ class WebSocketService implements IWebSocketService {
   public notifyListeners(log: Log) {
     this.eventListeners.forEach((listener) => listener(log))
   }
+
+  public disconnect() {
+    if (this.socket) {
+      console.log('this.socket:', this.socket)
+      this.socket.close()
+      console.log('WebSocket disconnected')
+    } else {
+      console.log('WebSocket already disconnected')
+    }
+  }
 }
 
 export const webSocketService = new WebSocketService()

client/src/views/FlowDetailedView.vue

@@ -15,6 +15,8 @@ import FlowEdge from '@/components/flow/FlowEdge.vue'
 import { ref, type Ref } from 'vue'
 import { inject, computed } from 'vue'
 import { useRoute } from 'vue-router'
+import { webSocketService } from '@/services/WebSocketService'
+import type { Log } from '@/types/WebSocketServiceTypes'
 
 const flows = inject<Ref<Flows>>('flows', ref([]))
 
@@ -41,14 +43,39 @@ function onEdgeChange({ edge, connection }: { edge: GraphEdge; connection: Conne
 }
 
 const displayLog = ref(false)
+const isRunning = ref(false)
+
+const handleNewLog = (log: Log) => {
+  console.log('new log', log)
+}
+
+// toggle log display
 const toggleLog = () => {
   displayLog.value = !displayLog.value
 }
+
+// toggle websocket connection
+const toggleWebSocket = () => {
+  isRunning.value = !isRunning.value
+
+  if (isRunning.value) {
+    webSocketService.connect(8765)
+    webSocketService.subscribe(handleNewLog)
+  } else {
+    webSocketService.unsubscribe(handleNewLog)
+    webSocketService.disconnect()
+  }
+}
 </script>
 
 <template>
   <main class="flex flex-col">
-    <flow-header :display-log="displayLog" @update:display-log="toggleLog" />
+    <flow-header
+      :is-running="isRunning"
+      :display-log="displayLog"
+      @toggle-log="toggleLog"
+      @toggle-web-socket="toggleWebSocket"
+    />
     <flow-log :show="displayLog" />
     <div v-if="!displayLog" class="mt-2 h-[calc(100vh-6rem)] w-[calc(100vw-18rem)]" @drop="onDrop">
       <vue-flow