Add API integration for sensors and rooms management

Integrate sensorsApi and roomsApi services into energy store. Add API
state, loading/error handling, and async functions for fetching sensor
and room data. Update room loading logic to fetch from API. Expose new
API functions for analytics and health endpoints. Update
SensorManagementView to use localhost WebSocket for real-time updates.
This commit is contained in:
rafaeldpsilva
2025-09-18 14:29:44 +01:00
parent faed09d3b6
commit a3d266d735
4 changed files with 468 additions and 29 deletions

View File

@@ -24,7 +24,10 @@
<!-- Filters -->
<div class="flex flex-col sm:flex-row gap-4 flex-1">
<div class="flex gap-2">
<select v-model="selectedRoom" class="px-4 py-2 border border-gray-200 rounded-lg bg-white flex-1">
<select
v-model="selectedRoom"
class="px-4 py-2 border border-gray-200 rounded-lg bg-white flex-1"
>
<option value="">All Rooms</option>
<option v-for="room in energyStore.availableRooms" :key="room" :value="room">
{{ room }}
@@ -36,7 +39,12 @@
title="Manage Rooms"
>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6"
/>
</svg>
<span class="hidden sm:inline">Rooms</span>
</button>
@@ -201,10 +209,7 @@
/>
<!-- Room Management Modal -->
<RoomManagementModal
v-if="showRoomManagementModal"
@close="showRoomManagementModal = false"
/>
<RoomManagementModal v-if="showRoomManagementModal" @close="showRoomManagementModal = false" />
</div>
</template>
@@ -360,7 +365,7 @@ const getOccupancyColor = (occupancy: string) => {
// WebSocket connection for real-time updates
onMounted(() => {
if (!energyStore.isConnected) {
energyStore.connect('ws://192.168.1.73:8000/ws')
energyStore.connect('ws://localhost:8000/ws')
}
})