315 lines
10 KiB
Vue
315 lines
10 KiB
Vue
<template>
|
|
<div class="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
|
|
<div class="bg-white rounded-xl max-w-2xl w-full max-h-[90vh] overflow-hidden">
|
|
<!-- Header -->
|
|
<div class="p-6 border-b border-gray-200">
|
|
<div class="flex items-center justify-between">
|
|
<h2 class="text-xl font-semibold text-gray-900">Room Management</h2>
|
|
<button
|
|
@click="$emit('close')"
|
|
class="text-gray-400 hover:text-gray-600 transition-colors"
|
|
>
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M6 18L18 6M6 6l12 12"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<p class="text-gray-600 mt-2">Create new rooms and manage existing ones</p>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="p-6 max-h-[calc(90vh-140px)] overflow-y-auto">
|
|
<!-- Add New Room Section -->
|
|
<div class="bg-blue-50 rounded-lg p-4 mb-6">
|
|
<h3 class="font-medium text-gray-900 mb-3">Add New Room</h3>
|
|
<div class="flex gap-3">
|
|
<div class="flex-1">
|
|
<input
|
|
v-model="newRoomName"
|
|
type="text"
|
|
placeholder="Enter room name (e.g., Meeting Room 3, Lab A, etc.)"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|
@keyup.enter="addNewRoom"
|
|
:class="{ 'border-red-300 focus:ring-red-500 focus:border-red-500': errorMessage }"
|
|
/>
|
|
<p v-if="errorMessage" class="text-red-600 text-sm mt-1">{{ errorMessage }}</p>
|
|
</div>
|
|
<button
|
|
@click="addNewRoom"
|
|
:disabled="!newRoomName.trim() || isAdding"
|
|
class="px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-300 text-white rounded-lg font-medium transition-colors"
|
|
>
|
|
<span v-if="isAdding">Adding...</span>
|
|
<span v-else>Add Room</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Existing Rooms Section -->
|
|
<div>
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="font-medium text-gray-900">Existing Rooms</h3>
|
|
<span class="text-sm text-gray-500">{{ roomsWithStats.length }} rooms total</span>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 gap-3">
|
|
<div v-for="room in roomsWithStats" :key="room.name" class="bg-gray-50 rounded-lg p-4">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex-1">
|
|
<div class="flex items-center gap-3 mb-2">
|
|
<h4 class="font-medium text-gray-900">{{ room.name }}</h4>
|
|
<span
|
|
class="text-xs px-2 py-1 bg-blue-100 text-blue-700 rounded-full font-medium"
|
|
>
|
|
{{ room.sensorCount }} sensors
|
|
</span>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 text-sm">
|
|
<div>
|
|
<span class="text-gray-600">Types:</span>
|
|
<div class="flex flex-wrap gap-1 mt-1">
|
|
<span
|
|
v-for="type in room.sensorTypes"
|
|
:key="type"
|
|
class="text-xs px-2 py-0.5 bg-gray-200 text-gray-700 rounded"
|
|
>
|
|
{{ type }}
|
|
</span>
|
|
<span v-if="room.sensorTypes.length === 0" class="text-xs text-gray-500"
|
|
>None</span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<span class="text-gray-600">Energy:</span>
|
|
<div
|
|
class="font-medium"
|
|
:class="room.hasMetrics ? 'text-gray-900' : 'text-gray-400'"
|
|
>
|
|
{{
|
|
room.hasMetrics ? room.energyConsumption.toFixed(2) + ' kWh' : 'No data'
|
|
}}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<span class="text-gray-600">CO2:</span>
|
|
<div class="font-medium" :class="getCO2Color(room.co2Level)">
|
|
{{ room.hasMetrics ? Math.round(room.co2Level) + ' ppm' : 'No data' }}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<span class="text-gray-600">Last Update:</span>
|
|
<div class="text-xs text-gray-500">
|
|
{{ room.lastUpdated ? formatTime(room.lastUpdated) : 'Never' }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ml-4">
|
|
<button
|
|
@click="confirmDeleteRoom(room.name)"
|
|
:disabled="isDeleting === room.name"
|
|
class="px-3 py-1.5 text-red-600 hover:bg-red-50 rounded-lg text-sm font-medium transition-colors"
|
|
:class="{ 'opacity-50 cursor-not-allowed': isDeleting === room.name }"
|
|
>
|
|
<span v-if="isDeleting === room.name">Deleting...</span>
|
|
<span v-else>Delete</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Empty state -->
|
|
<div v-if="roomsWithStats.length === 0" class="text-center py-8">
|
|
<div class="text-gray-400 text-4xl mb-2">🏢</div>
|
|
<p class="text-gray-600">No rooms created yet</p>
|
|
<p class="text-gray-500 text-sm">Add your first room above to get started</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="p-6 border-t border-gray-200 bg-gray-50">
|
|
<div class="flex justify-end gap-3">
|
|
<button
|
|
@click="$emit('close')"
|
|
class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors"
|
|
>
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Delete Confirmation Modal -->
|
|
<div
|
|
v-if="roomToDelete"
|
|
class="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-60"
|
|
>
|
|
<div class="bg-white rounded-xl max-w-md w-full p-6">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2">Delete Room</h3>
|
|
<p class="text-gray-600 mb-4">
|
|
Are you sure you want to delete <strong>"{{ roomToDelete }}"</strong>?
|
|
{{
|
|
getRoomStats(roomToDelete).sensorCount > 0
|
|
? `This will unassign ${getRoomStats(roomToDelete).sensorCount} sensor(s).`
|
|
: 'This action cannot be undone.'
|
|
}}
|
|
</p>
|
|
<div class="flex gap-3">
|
|
<button
|
|
@click="roomToDelete = null"
|
|
class="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
@click="deleteRoom"
|
|
class="flex-1 px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg text-sm font-medium transition-colors"
|
|
>
|
|
Delete Room
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed, onMounted } from 'vue'
|
|
import { useRoomStore } from '@/stores/room'
|
|
|
|
const roomStore = useRoomStore()
|
|
|
|
// Emit events
|
|
const emit = defineEmits<{
|
|
close: []
|
|
}>()
|
|
|
|
// Component state
|
|
const newRoomName = ref('')
|
|
const errorMessage = ref('')
|
|
const isAdding = ref(false)
|
|
const isDeleting = ref<string | null>(null)
|
|
const roomToDelete = ref<string | null>(null)
|
|
|
|
// Computed properties
|
|
const roomsWithStats = computed(() => {
|
|
return roomStore.getAllRoomsWithStats()
|
|
})
|
|
|
|
// Methods
|
|
const addNewRoom = async () => {
|
|
if (!newRoomName.value.trim()) {
|
|
errorMessage.value = 'Room name is required'
|
|
return
|
|
}
|
|
|
|
if (newRoomName.value.trim().length < 2) {
|
|
errorMessage.value = 'Room name must be at least 2 characters'
|
|
return
|
|
}
|
|
|
|
if (newRoomName.value.trim().length > 50) {
|
|
errorMessage.value = 'Room name must be less than 50 characters'
|
|
return
|
|
}
|
|
|
|
isAdding.value = true
|
|
errorMessage.value = ''
|
|
|
|
try {
|
|
const success = roomStore.addRoom(newRoomName.value.trim())
|
|
|
|
if (success) {
|
|
newRoomName.value = ''
|
|
// Show success feedback
|
|
console.log('Room added successfully')
|
|
} else {
|
|
errorMessage.value = 'Room name already exists'
|
|
}
|
|
} catch (error) {
|
|
errorMessage.value = 'Failed to add room'
|
|
console.error('Error adding room:', error)
|
|
} finally {
|
|
isAdding.value = false
|
|
}
|
|
}
|
|
|
|
const confirmDeleteRoom = (roomName: string) => {
|
|
roomToDelete.value = roomName
|
|
}
|
|
|
|
const deleteRoom = async () => {
|
|
if (!roomToDelete.value) return
|
|
|
|
isDeleting.value = roomToDelete.value
|
|
|
|
try {
|
|
const success = roomStore.removeRoom(roomToDelete.value)
|
|
|
|
if (success) {
|
|
console.log(`Room "${roomToDelete.value}" deleted successfully`)
|
|
} else {
|
|
console.error('Failed to delete room')
|
|
}
|
|
} catch (error) {
|
|
console.error('Error deleting room:', error)
|
|
} finally {
|
|
isDeleting.value = null
|
|
roomToDelete.value = null
|
|
}
|
|
}
|
|
|
|
const getRoomStats = (roomName: string) => {
|
|
return roomStore.getRoomStats(roomName)
|
|
}
|
|
|
|
const getCO2Color = (co2Level: number) => {
|
|
if (co2Level === 0) return 'text-gray-400'
|
|
if (co2Level < 400) return 'text-green-600'
|
|
if (co2Level < 1000) return 'text-yellow-600'
|
|
if (co2Level < 5000) return 'text-orange-600'
|
|
return 'text-red-600'
|
|
}
|
|
|
|
const formatTime = (timestamp: number) => {
|
|
const date = new Date(timestamp * 1000)
|
|
const now = new Date()
|
|
const diffMs = now.getTime() - date.getTime()
|
|
const diffSecs = Math.floor(diffMs / 1000)
|
|
|
|
if (diffSecs < 60) {
|
|
return `${diffSecs}s ago`
|
|
} else if (diffSecs < 3600) {
|
|
return `${Math.floor(diffSecs / 60)}m ago`
|
|
} else if (diffSecs < 86400) {
|
|
return `${Math.floor(diffSecs / 3600)}h ago`
|
|
} else {
|
|
return date.toLocaleDateString()
|
|
}
|
|
}
|
|
|
|
// Clear error when user starts typing
|
|
const clearError = () => {
|
|
if (errorMessage.value) {
|
|
errorMessage.value = ''
|
|
}
|
|
}
|
|
|
|
// Watch for changes in newRoomName to clear errors
|
|
import { watch } from 'vue'
|
|
watch(newRoomName, clearError)
|
|
</script>
|