Switch to websocketStore and sensorStore in SensorManagementView

src/views/SensorManagementView.vue

@@ -10,9 +10,9 @@
         <div class="flex items-center gap-2 text-sm text-gray-600">
           <div
             class="w-3 h-3 rounded-full"
-            :class="energyStore.isConnected ? 'bg-green-500' : 'bg-red-500'"
+            :class="websocketStore.isConnected ? 'bg-green-500' : 'bg-red-500'"
           ></div>
-          <span>{{ energyStore.isConnected ? 'Connected' : 'Disconnected' }}</span>
+          <span>{{ websocketStore.isConnected ? 'Connected' : 'Disconnected' }}</span>
           <span class="mx-2">•</span>
           <span>{{ sensorList.length }} sensors</span>
         </div>
@@ -118,7 +118,6 @@
       </div>
     </div>
 
-
     <!-- Sensors Grid -->
     <div
       class="grid gap-4"
@@ -132,7 +131,7 @@
       <template v-if="viewMode === 'simple'">
         <SimpleSensorCard
           v-for="sensor in filteredSensors"
-          :key="sensor.id"
+          :key="sensor.sensor_id"
           :sensor="sensor"
           :is-executing-action="isExecutingAction"
           @execute-action="executeAction"
@@ -144,7 +143,7 @@
       <template v-else>
         <DetailedSensorCard
           v-for="sensor in filteredSensors"
-          :key="sensor.id"
+          :key="sensor.sensor_id"
           :sensor="sensor"
           :available-rooms="energyStore.availableRooms"
           :is-executing-action="isExecutingAction"
@@ -156,7 +155,9 @@
 
     <!-- Loading State -->
     <div v-if="energyStore.apiLoading" class="text-center py-12">
-      <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
+      <div
+        class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"
+      ></div>
       <h3 class="text-lg font-medium text-gray-900 mb-2">Loading sensors...</h3>
       <p class="text-gray-600">Fetching sensor data from the backend</p>
     </div>
@@ -197,34 +198,33 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useSensorStore } from '@/stores/sensor'
 import { useEnergyStore } from '@/stores/energy'
+import { useWebSocketStore } from '@/stores/websocket'
 import ActionModal from '@/components/modals/ActionModal.vue'
 import RoomManagementModal from '@/components/modals/RoomManagementModal.vue'
 import SimpleSensorCard from '@/components/cards/SimpleSensorCard.vue'
 import DetailedSensorCard from '@/components/cards/DetailedSensorCard.vue'
 
+const sensorStore = useSensorStore()
 const energyStore = useEnergyStore()
+const websocketStore = useWebSocketStore()
 
-// View mode
 const viewMode = ref<'simple' | 'detailed'>('simple')
 
-// Filters
 const selectedRoom = ref('')
 const selectedType = ref('')
 const selectedStatus = ref('')
 
-// Action modal
 const showActionModal = ref(false)
 const selectedSensor = ref<any>(null)
 const selectedAction = ref<any>(null)
 const isExecutingAction = ref(false)
 
-// Room management modal
 const showRoomManagementModal = ref(false)
 
 const sensorList = computed(() => {
-  console.log('Sensors from store:', energyStore.sensorDevices)
+  return Array.from(sensorStore.sensorDevices.values()).sort((a, b) => a.name.localeCompare(b.name))
-  return Array.from(energyStore.sensorDevices.values()).sort((a, b) => a.name.localeCompare(b.name))
 })
 
 const filteredSensors = computed(() => {
@@ -237,19 +237,16 @@ const filteredSensors = computed(() => {
   })
 })
 
-
 const updateRoom = (sensorId: string, newRoom: string) => {
   energyStore.updateSensorRoom(sensorId, newRoom)
 }
 
 const executeAction = (sensor: any, action: any) => {
   if (action.parameters) {
-    // Show modal for actions with parameters
     selectedSensor.value = sensor
     selectedAction.value = action
     showActionModal.value = true
   } else {
-    // Execute simple actions directly
     handleActionExecute(sensor.id, action.id, {})
   }
 }
@@ -273,29 +270,22 @@ const closeActionModal = () => {
 }
 
 const showSensorDetails = () => {
-  // Switch to detailed view when user wants to see more actions
   viewMode.value = 'detailed'
 }
 
-
-// Reload sensors function
 const reloadSensors = async () => {
   await energyStore.fetchApiSensors()
 }
 
-// Load sensors from API and connect WebSocket for real-time updates
 onMounted(async () => {
-  // First load sensors from database
+  await sensorStore.fetchApiSensors()
-  await energyStore.fetchApiSensors()
 
-  // Then connect WebSocket for real-time updates
+  if (!websocketStore.isConnected) {
-  if (!energyStore.isConnected) {
+    websocketStore.connect('ws://localhost:8007/ws')
-    energyStore.connect('ws://localhost:8000/ws')
   }
 })
 
 onUnmounted(() => {
-  // Keep the connection alive for other components
   // energyStore.disconnect()
 })
 </script>