sensor management page
This commit is contained in:
rafaeldpsilva
310
src/components/cards/DetailedSensorCard.vue
Normal file
310
src/components/cards/DetailedSensorCard.vue
Normal file
@@ -0,0 +1,310 @@
|
||||
<template>
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
|
||||
<!-- Sensor Header -->
|
||||
<div class="p-4 border-b border-gray-100">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 rounded-lg" :class="getSensorTypeStyle(sensor.type).bg">
|
||||
<span class="text-lg">{{ getSensorTypeIcon(sensor.type) }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-medium text-gray-900">{{ sensor.name }}</h3>
|
||||
<p class="text-sm text-gray-500">{{ sensor.id }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div
|
||||
class="w-2 h-2 rounded-full"
|
||||
:class="getSensorStatusColor(sensor.status)"
|
||||
></div>
|
||||
<span class="text-xs text-gray-500 capitalize">{{ sensor.status }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sensor Details -->
|
||||
<div class="p-4 space-y-4">
|
||||
<!-- Room Assignment -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Room Assignment</label>
|
||||
<select
|
||||
:value="sensor.room"
|
||||
@change="$emit('updateRoom', sensor.id, ($event.target as HTMLSelectElement).value)"
|
||||
class="w-full px-3 py-2 border border-gray-200 rounded-lg bg-white text-sm"
|
||||
>
|
||||
<option value="">Unassigned</option>
|
||||
<option v-for="room in availableRooms" :key="room" :value="room">
|
||||
{{ room }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Tags -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Tags</label>
|
||||
<div class="flex flex-wrap gap-1 mb-2">
|
||||
<span
|
||||
v-for="tag in sensor.tags || getDefaultTags(sensor)"
|
||||
:key="tag"
|
||||
class="px-2 py-1 bg-gray-100 text-gray-700 rounded-full text-xs font-medium"
|
||||
>
|
||||
{{ tag }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Monitoring Capabilities -->
|
||||
<div>
|
||||
<div class="text-sm font-medium text-gray-700 mb-2">Monitoring Capabilities</div>
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<span
|
||||
v-for="capability in sensor.capabilities.monitoring"
|
||||
:key="capability"
|
||||
class="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs font-medium"
|
||||
>
|
||||
{{ capability }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Current Values -->
|
||||
<div>
|
||||
<div class="text-sm font-medium text-gray-700 mb-2">Current Values</div>
|
||||
<div class="grid grid-cols-2 gap-2 text-xs">
|
||||
<div v-for="metric in getSensorValues(sensor)" :key="metric.type"
|
||||
class="bg-gray-50 rounded p-2">
|
||||
<div class="text-gray-600 mb-1">{{ metric.label }}</div>
|
||||
<div class="font-medium text-gray-900">
|
||||
{{ metric.value }} <span class="text-gray-500">{{ metric.unit }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Device Technical Info -->
|
||||
<div>
|
||||
<div class="text-sm font-medium text-gray-700 mb-2">Device Information</div>
|
||||
<div class="grid grid-cols-2 gap-2 text-xs text-gray-600">
|
||||
<div>
|
||||
<span class="font-medium">Model:</span>
|
||||
<div>{{ sensor.metadata.model || 'N/A' }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-medium">Firmware:</span>
|
||||
<div>{{ sensor.metadata.firmware || 'N/A' }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-medium">Location:</span>
|
||||
<div>{{ sensor.metadata.location }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-medium">Last Seen:</span>
|
||||
<div>{{ formatTime(sensor.lastSeen) }}</div>
|
||||
</div>
|
||||
<div v-if="sensor.metadata.battery">
|
||||
<span class="font-medium">Battery:</span>
|
||||
<div class="flex items-center gap-1">
|
||||
<span>{{ sensor.metadata.battery }}%</span>
|
||||
<div class="w-3 h-1 bg-gray-200 rounded-full">
|
||||
<div
|
||||
class="h-full rounded-full transition-all"
|
||||
:class="getBatteryColor(sensor.metadata.battery)"
|
||||
:style="{ width: sensor.metadata.battery + '%' }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="sensor.metadata.signalStrength">
|
||||
<span class="font-medium">Signal:</span>
|
||||
<div class="flex items-center gap-1">
|
||||
<span>{{ sensor.metadata.signalStrength }}%</span>
|
||||
<div class="flex gap-0.5">
|
||||
<div
|
||||
v-for="i in 4"
|
||||
:key="i"
|
||||
class="w-1 h-2 bg-gray-200 rounded-sm"
|
||||
:class="{ 'bg-green-500': (sensor.metadata.signalStrength / 25) >= i }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div v-if="sensor.capabilities.actions.length > 0">
|
||||
<div class="text-sm font-medium text-gray-700 mb-3">Available Actions</div>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<button
|
||||
v-for="action in sensor.capabilities.actions"
|
||||
:key="action.id"
|
||||
@click="$emit('executeAction', sensor, action)"
|
||||
:disabled="isExecutingAction"
|
||||
class="flex items-center justify-center gap-2 px-3 py-2 bg-gray-50 hover:bg-gray-100 disabled:bg-gray-100 disabled:cursor-not-allowed border border-gray-200 rounded-lg text-sm font-medium text-gray-700 transition-colors"
|
||||
:class="{ 'opacity-50': isExecutingAction }"
|
||||
>
|
||||
<span>{{ action.icon }}</span>
|
||||
<span class="truncate">{{ action.name }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- No Actions State -->
|
||||
<div v-else>
|
||||
<div class="text-sm font-medium text-gray-700 mb-2">Device Actions</div>
|
||||
<div class="text-xs text-gray-500 text-center py-3 bg-gray-50 rounded border-2 border-dashed border-gray-200">
|
||||
This device is monitor-only and has no available actions
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
sensor: any
|
||||
availableRooms: string[]
|
||||
isExecutingAction?: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
updateRoom: [sensorId: string, newRoom: string]
|
||||
executeAction: [sensor: any, action: any]
|
||||
}>()
|
||||
|
||||
const getSensorValues = (sensor: any) => {
|
||||
// Mock sensor values based on sensor type and capabilities
|
||||
const values = []
|
||||
|
||||
if (sensor.capabilities.monitoring.includes('energy')) {
|
||||
values.push({
|
||||
type: 'energy',
|
||||
label: 'Energy Consumption',
|
||||
value: (Math.random() * 5 + 0.5).toFixed(2),
|
||||
unit: 'kWh'
|
||||
})
|
||||
}
|
||||
|
||||
if (sensor.capabilities.monitoring.includes('co2')) {
|
||||
values.push({
|
||||
type: 'co2',
|
||||
label: 'CO2 Level',
|
||||
value: Math.floor(Math.random() * 800 + 350),
|
||||
unit: 'ppm'
|
||||
})
|
||||
}
|
||||
|
||||
if (sensor.capabilities.monitoring.includes('temperature')) {
|
||||
values.push({
|
||||
type: 'temperature',
|
||||
label: 'Temperature',
|
||||
value: (Math.random() * 8 + 18).toFixed(1),
|
||||
unit: '°C'
|
||||
})
|
||||
}
|
||||
|
||||
if (sensor.capabilities.monitoring.includes('humidity')) {
|
||||
values.push({
|
||||
type: 'humidity',
|
||||
label: 'Humidity',
|
||||
value: Math.floor(Math.random() * 40 + 30),
|
||||
unit: '%'
|
||||
})
|
||||
}
|
||||
|
||||
if (sensor.capabilities.monitoring.includes('motion')) {
|
||||
values.push({
|
||||
type: 'motion',
|
||||
label: 'Motion Status',
|
||||
value: Math.random() > 0.7 ? 'Detected' : 'Clear',
|
||||
unit: ''
|
||||
})
|
||||
}
|
||||
|
||||
// Add device uptime
|
||||
values.push({
|
||||
type: 'uptime',
|
||||
label: 'Uptime',
|
||||
value: Math.floor(Math.random() * 30 + 1),
|
||||
unit: 'days'
|
||||
})
|
||||
|
||||
return values
|
||||
}
|
||||
|
||||
const getDefaultTags = (sensor: any) => {
|
||||
const tags = [sensor.type]
|
||||
|
||||
if (sensor.metadata.battery) {
|
||||
tags.push('wireless')
|
||||
} else {
|
||||
tags.push('wired')
|
||||
}
|
||||
|
||||
if (sensor.capabilities.actions.length > 0) {
|
||||
tags.push('controllable')
|
||||
} else {
|
||||
tags.push('monitor-only')
|
||||
}
|
||||
|
||||
return tags
|
||||
}
|
||||
|
||||
const getSensorTypeIcon = (type: string) => {
|
||||
const icons = {
|
||||
energy: '⚡',
|
||||
co2: '💨',
|
||||
temperature: '🌡️',
|
||||
humidity: '💧',
|
||||
hvac: '❄️',
|
||||
lighting: '💡',
|
||||
security: '🔒'
|
||||
}
|
||||
return icons[type as keyof typeof icons] || '📱'
|
||||
}
|
||||
|
||||
const getSensorTypeStyle = (type: string) => {
|
||||
const styles = {
|
||||
energy: { bg: 'bg-yellow-100', text: 'text-yellow-700' },
|
||||
co2: { bg: 'bg-green-100', text: 'text-green-700' },
|
||||
temperature: { bg: 'bg-red-100', text: 'text-red-700' },
|
||||
humidity: { bg: 'bg-blue-100', text: 'text-blue-700' },
|
||||
hvac: { bg: 'bg-cyan-100', text: 'text-cyan-700' },
|
||||
lighting: { bg: 'bg-amber-100', text: 'text-amber-700' },
|
||||
security: { bg: 'bg-purple-100', text: 'text-purple-700' }
|
||||
}
|
||||
return styles[type as keyof typeof styles] || { bg: 'bg-gray-100', text: 'text-gray-700' }
|
||||
}
|
||||
|
||||
const getSensorStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'online': return 'bg-green-500'
|
||||
case 'offline': return 'bg-gray-400'
|
||||
case 'error': return 'bg-red-500'
|
||||
default: return 'bg-gray-400'
|
||||
}
|
||||
}
|
||||
|
||||
const getBatteryColor = (battery: number) => {
|
||||
if (battery > 50) return 'bg-green-400'
|
||||
if (battery > 20) return 'bg-yellow-400'
|
||||
return 'bg-red-400'
|
||||
}
|
||||
|
||||
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()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -35,7 +35,6 @@ const trendData = computed(() => props.trendData || defaultTrendData)
|
||||
|
||||
const trendDir = computed(() => {
|
||||
const dir = trendData.value[trendData.value.length - 1] - trendData.value[0]
|
||||
console.log(dir)
|
||||
if (dir > 0) return 'up'
|
||||
if (dir < 0) return 'down'
|
||||
return 'neutral'
|
||||
|
||||
181
src/components/cards/SimpleSensorCard.vue
Normal file
181
src/components/cards/SimpleSensorCard.vue
Normal file
@@ -0,0 +1,181 @@
|
||||
<template>
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="p-1.5 rounded-lg" :class="getSensorTypeStyle(sensor.type).bg">
|
||||
<span class="text-sm">{{ getSensorTypeIcon(sensor.type) }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-medium text-gray-900 text-sm">{{ sensor.name }}</h3>
|
||||
<p class="text-xs text-gray-500">{{ sensor.room || 'Unassigned' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status Indicator -->
|
||||
<div class="flex items-center gap-1">
|
||||
<div
|
||||
class="w-2 h-2 rounded-full"
|
||||
:class="getSensorStatusColor(sensor.status)"
|
||||
></div>
|
||||
<span class="text-xs text-gray-500 capitalize">{{ sensor.status }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sensor Values -->
|
||||
<div class="mb-3">
|
||||
<div class="grid grid-cols-2 gap-2 text-xs">
|
||||
<div v-for="metric in getSensorValues(sensor)" :key="metric.type"
|
||||
class="bg-gray-50 rounded p-2">
|
||||
<div class="text-gray-600 mb-1">{{ metric.label }}</div>
|
||||
<div class="font-medium text-gray-900">
|
||||
{{ metric.value }} <span class="text-gray-500">{{ metric.unit }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<div v-if="sensor.capabilities.actions.length > 0" class="space-y-2">
|
||||
<div class="text-xs font-medium text-gray-600 mb-2">Quick Actions</div>
|
||||
<div class="flex gap-1 flex-wrap">
|
||||
<button
|
||||
v-for="action in sensor.capabilities.actions.slice(0, 3)"
|
||||
:key="action.id"
|
||||
@click="$emit('executeAction', sensor, action)"
|
||||
:disabled="isExecutingAction"
|
||||
class="flex items-center gap-1 px-2 py-1 bg-gray-100 hover:bg-gray-200 disabled:bg-gray-100 disabled:cursor-not-allowed text-gray-700 rounded text-xs font-medium transition-colors"
|
||||
:class="{ 'opacity-50': isExecutingAction }"
|
||||
>
|
||||
<span class="text-xs">{{ action.icon }}</span>
|
||||
<span class="truncate">{{ action.name }}</span>
|
||||
</button>
|
||||
|
||||
<!-- Show more actions if there are more than 3 -->
|
||||
<button
|
||||
v-if="sensor.capabilities.actions.length > 3"
|
||||
@click="$emit('showMore', sensor)"
|
||||
class="px-2 py-1 bg-blue-100 hover:bg-blue-200 text-blue-700 rounded text-xs font-medium transition-colors"
|
||||
>
|
||||
+{{ sensor.capabilities.actions.length - 3 }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- No Actions State -->
|
||||
<div v-else class="text-xs text-gray-500 text-center py-2 bg-gray-50 rounded">
|
||||
Monitor Only
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
sensor: any
|
||||
isExecutingAction?: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
executeAction: [sensor: any, action: any]
|
||||
showMore: [sensor: any]
|
||||
}>()
|
||||
|
||||
const getSensorValues = (sensor: any) => {
|
||||
// Mock sensor values based on sensor type and capabilities
|
||||
const values = []
|
||||
|
||||
if (sensor.capabilities.monitoring.includes('energy')) {
|
||||
values.push({
|
||||
type: 'energy',
|
||||
label: 'Energy',
|
||||
value: (Math.random() * 5 + 0.5).toFixed(2),
|
||||
unit: 'kWh'
|
||||
})
|
||||
}
|
||||
|
||||
if (sensor.capabilities.monitoring.includes('co2')) {
|
||||
values.push({
|
||||
type: 'co2',
|
||||
label: 'CO2',
|
||||
value: Math.floor(Math.random() * 800 + 350),
|
||||
unit: 'ppm'
|
||||
})
|
||||
}
|
||||
|
||||
if (sensor.capabilities.monitoring.includes('temperature')) {
|
||||
values.push({
|
||||
type: 'temperature',
|
||||
label: 'Temperature',
|
||||
value: (Math.random() * 8 + 18).toFixed(1),
|
||||
unit: '°C'
|
||||
})
|
||||
}
|
||||
|
||||
if (sensor.capabilities.monitoring.includes('humidity')) {
|
||||
values.push({
|
||||
type: 'humidity',
|
||||
label: 'Humidity',
|
||||
value: Math.floor(Math.random() * 40 + 30),
|
||||
unit: '%'
|
||||
})
|
||||
}
|
||||
|
||||
if (sensor.capabilities.monitoring.includes('motion')) {
|
||||
values.push({
|
||||
type: 'motion',
|
||||
label: 'Motion',
|
||||
value: Math.random() > 0.7 ? 'Detected' : 'Clear',
|
||||
unit: ''
|
||||
})
|
||||
}
|
||||
|
||||
// If no monitoring capabilities, show generic status
|
||||
if (values.length === 0) {
|
||||
values.push({
|
||||
type: 'status',
|
||||
label: 'Status',
|
||||
value: sensor.status === 'online' ? 'Active' : 'Inactive',
|
||||
unit: ''
|
||||
})
|
||||
}
|
||||
|
||||
return values
|
||||
}
|
||||
|
||||
const getSensorTypeIcon = (type: string) => {
|
||||
const icons = {
|
||||
energy: '⚡',
|
||||
co2: '💨',
|
||||
temperature: '🌡️',
|
||||
humidity: '💧',
|
||||
hvac: '❄️',
|
||||
lighting: '💡',
|
||||
security: '🔒'
|
||||
}
|
||||
return icons[type as keyof typeof icons] || '📱'
|
||||
}
|
||||
|
||||
const getSensorTypeStyle = (type: string) => {
|
||||
const styles = {
|
||||
energy: { bg: 'bg-yellow-100', text: 'text-yellow-700' },
|
||||
co2: { bg: 'bg-green-100', text: 'text-green-700' },
|
||||
temperature: { bg: 'bg-red-100', text: 'text-red-700' },
|
||||
humidity: { bg: 'bg-blue-100', text: 'text-blue-700' },
|
||||
hvac: { bg: 'bg-cyan-100', text: 'text-cyan-700' },
|
||||
lighting: { bg: 'bg-amber-100', text: 'text-amber-700' },
|
||||
security: { bg: 'bg-purple-100', text: 'text-purple-700' }
|
||||
}
|
||||
return styles[type as keyof typeof styles] || { bg: 'bg-gray-100', text: 'text-gray-700' }
|
||||
}
|
||||
|
||||
const getSensorStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'online': return 'bg-green-500'
|
||||
case 'offline': return 'bg-gray-400'
|
||||
case 'error': return 'bg-red-500'
|
||||
default: return 'bg-gray-400'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user