een-api-toolkit 0.3.13 → 0.3.15

package/examples/vue-alerts-metrics/src/components/MetricsChart.vue

@@ -0,0 +1,322 @@
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue'
+import { Line } from 'vue-chartjs'
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  TimeScale
+} from 'chart.js'
+import { getEventMetrics, listEventFieldValues, type Camera, type EventMetric, type EenError } from 'een-api-toolkit'
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  TimeScale
+)
+
+const props = defineProps<{
+  camera: Camera
+  timeRange: string
+}>()
+
+interface DataPoint {
+  timestamp: number
+  count: number
+}
+
+const dataPoints = ref<DataPoint[]>([])
+const eventTypes = ref<string[]>([])
+const selectedEventType = ref<string>('')
+const loadingEventTypes = ref(false)
+const loadingMetrics = ref(false)
+const error = ref<EenError | null>(null)
+
+function getTimeRangeMs(range: string): number {
+  switch (range) {
+    case '1h': return 60 * 60 * 1000
+    case '6h': return 6 * 60 * 60 * 1000
+    case '24h': return 24 * 60 * 60 * 1000
+    case '7d': return 7 * 24 * 60 * 60 * 1000
+    default: return 24 * 60 * 60 * 1000
+  }
+}
+
+function getAggregationMinutes(range: string): number {
+  // Note: EEN API requires minimum 60 minute aggregation
+  switch (range) {
+    case '1h': return 60      // 1 hour bucket (1 data point)
+    case '6h': return 60      // 1 hour buckets (6 data points)
+    case '24h': return 60     // 1 hour buckets (24 data points)
+    case '7d': return 360     // 6 hour buckets (28 data points)
+    default: return 60
+  }
+}
+
+function formatEventType(eventType: string): string {
+  // Convert "een.motionDetectionEvent.v1" to "Motion Detection"
+  const parts = eventType.split('.')
+  if (parts.length >= 2) {
+    const name = parts[1]
+      .replace(/Event$/, '')
+      .replace(/([A-Z])/g, ' $1')
+      .trim()
+    return name.charAt(0).toUpperCase() + name.slice(1)
+  }
+  return eventType
+}
+
+async function fetchEventTypes() {
+  if (!props.camera?.id) return
+
+  loadingEventTypes.value = true
+  error.value = null
+  eventTypes.value = []
+  selectedEventType.value = ''
+  dataPoints.value = []
+
+  const result = await listEventFieldValues({
+    actor: `camera:${props.camera.id}`
+  })
+
+  if (result.error) {
+    error.value = result.error
+    loadingEventTypes.value = false
+    return
+  }
+
+  eventTypes.value = result.data?.type ?? []
+  loadingEventTypes.value = false
+}
+
+async function fetchMetrics() {
+  if (!props.camera?.id || !selectedEventType.value) return
+
+  loadingMetrics.value = true
+  error.value = null
+  dataPoints.value = []
+
+  const now = new Date()
+  const rangeMs = getTimeRangeMs(props.timeRange)
+  const startTime = new Date(now.getTime() - rangeMs)
+  const aggregateByMinutes = getAggregationMinutes(props.timeRange)
+
+  const result = await getEventMetrics({
+    actor: `camera:${props.camera.id}`,
+    eventType: selectedEventType.value,
+    timestamp__gte: startTime.toISOString(),
+    timestamp__lte: now.toISOString(),
+    aggregateByMinutes
+  })
+
+  if (result.error) {
+    error.value = result.error
+    loadingMetrics.value = false
+    return
+  }
+
+  // Transform API data to chart data points
+  const metrics = result.data ?? []
+  if (metrics.length > 0) {
+    // Use the first metric's data points (for count target)
+    const metric = metrics.find((m: EventMetric) => m.target === 'count') ?? metrics[0]
+    // Defensive check for dataPoints array
+    if (metric.dataPoints && Array.isArray(metric.dataPoints)) {
+      dataPoints.value = metric.dataPoints.map(([timestamp, count]) => ({
+        timestamp,
+        count
+      }))
+    }
+  }
+
+  loadingMetrics.value = false
+}
+
+function handleEventTypeChange() {
+  if (selectedEventType.value) {
+    fetchMetrics()
+  }
+}
+
+const chartData = computed(() => {
+  if (dataPoints.value.length === 0) {
+    return {
+      labels: [],
+      datasets: []
+    }
+  }
+
+  return {
+    labels: dataPoints.value.map(({ timestamp }) => {
+      const date = new Date(timestamp)
+      if (props.timeRange === '1h' || props.timeRange === '6h') {
+        return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+      }
+      return date.toLocaleDateString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })
+    }),
+    datasets: [
+      {
+        label: formatEventType(selectedEventType.value),
+        data: dataPoints.value.map(({ count }) => count),
+        borderColor: '#42b883',
+        backgroundColor: 'rgba(66, 184, 131, 0.1)',
+        tension: 0.3,
+        fill: true
+      }
+    ]
+  }
+})
+
+const chartOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      display: true,
+      position: 'top' as const
+    },
+    tooltip: {
+      mode: 'index' as const,
+      intersect: false
+    }
+  },
+  scales: {
+    y: {
+      beginAtZero: true,
+      title: {
+        display: true,
+        text: 'Event Count'
+      }
+    },
+    x: {
+      title: {
+        display: true,
+        text: 'Time'
+      }
+    }
+  }
+}
+
+// Fetch event types when camera changes
+watch(
+  () => props.camera?.id,
+  () => {
+    fetchEventTypes()
+  },
+  { immediate: true }
+)
+
+// Fetch metrics when time range changes (if event type is selected)
+watch(
+  () => props.timeRange,
+  () => {
+    if (selectedEventType.value) {
+      fetchMetrics()
+    }
+  }
+)
+</script>
+
+<template>
+  <div class="metrics-chart" data-testid="metrics-chart">
+    <div class="event-type-selector" data-testid="event-type-selector">
+      <label for="event-type-select">Event Type:</label>
+      <select
+        id="event-type-select"
+        v-model="selectedEventType"
+        @change="handleEventTypeChange"
+        :disabled="loadingEventTypes || eventTypes.length === 0"
+        data-testid="event-type-select"
+      >
+        <option value="" disabled>
+          {{ loadingEventTypes ? 'Loading event types...' : (eventTypes.length === 0 ? 'No event types available' : 'Select an event type') }}
+        </option>
+        <option
+          v-for="et in eventTypes"
+          :key="et"
+          :value="et"
+          data-testid="event-type-option"
+        >
+          {{ formatEventType(et) }} ({{ et }})
+        </option>
+      </select>
+    </div>
+
+    <div v-if="loadingMetrics" class="loading" data-testid="metrics-loading">
+      Loading metrics...
+    </div>
+    <div v-else-if="error" class="error" data-testid="metrics-error">
+      {{ error.message }}
+    </div>
+    <div v-else-if="!selectedEventType" class="no-data" data-testid="metrics-no-selection">
+      Please select an event type to view metrics.
+    </div>
+    <div v-else-if="chartData.datasets.length === 0" class="no-data" data-testid="metrics-no-data">
+      No event data available for this time range.
+    </div>
+    <div v-else class="chart-container">
+      <Line :data="chartData" :options="chartOptions" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.metrics-chart {
+  min-height: 300px;
+}
+
+.event-type-selector {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 15px;
+}
+
+.event-type-selector label {
+  font-weight: 500;
+}
+
+.event-type-selector select {
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 0.9rem;
+  min-width: 350px;
+}
+
+.event-type-selector select:disabled {
+  background: #f5f5f5;
+  cursor: not-allowed;
+}
+
+.chart-container {
+  height: 300px;
+}
+
+.loading,
+.no-data {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 200px;
+  color: #666;
+  font-style: italic;
+}
+
+.error {
+  color: #e74c3c;
+  padding: 10px;
+  background: #fdf2f2;
+  border-radius: 4px;
+}
+</style>

package/examples/vue-alerts-metrics/src/components/NotificationsList.vue

@@ -0,0 +1,263 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { listNotifications, type Camera, type Notification, type EenError } from 'een-api-toolkit'
+
+const props = defineProps<{
+  camera: Camera
+  timeRange: string
+}>()
+
+const notifications = ref<Notification[]>([])
+const loading = ref(false)
+const loadingMore = ref(false)
+const error = ref<EenError | null>(null)
+const nextPageToken = ref<string | undefined>(undefined)
+
+function getTimeRangeMs(range: string): number {
+  switch (range) {
+    case '1h': return 60 * 60 * 1000
+    case '6h': return 6 * 60 * 60 * 1000
+    case '24h': return 24 * 60 * 60 * 1000
+    case '7d': return 7 * 24 * 60 * 60 * 1000
+    default: return 24 * 60 * 60 * 1000
+  }
+}
+
+async function fetchNotifications(append = false) {
+  if (!props.camera?.id) return
+
+  if (append) {
+    loadingMore.value = true
+  } else {
+    loading.value = true
+    notifications.value = []
+    nextPageToken.value = undefined
+  }
+  error.value = null
+
+  const now = new Date()
+  const rangeMs = getTimeRangeMs(props.timeRange)
+  const startTime = new Date(now.getTime() - rangeMs)
+
+  const result = await listNotifications({
+    actorId: props.camera.id,
+    timestamp__gte: startTime.toISOString(),
+    timestamp__lte: now.toISOString(),
+    pageSize: 20,
+    pageToken: append ? nextPageToken.value : undefined,
+    sort: ['-timestamp']
+  })
+
+  if (result.error) {
+    error.value = result.error
+  } else {
+    const newNotifications = result.data?.results ?? []
+    if (append) {
+      notifications.value = [...notifications.value, ...newNotifications]
+    } else {
+      notifications.value = newNotifications
+    }
+    nextPageToken.value = result.data?.nextPageToken
+  }
+
+  loading.value = false
+  loadingMore.value = false
+}
+
+function loadMore() {
+  if (nextPageToken.value) {
+    fetchNotifications(true)
+  }
+}
+
+function formatTime(timestamp: string): string {
+  return new Date(timestamp).toLocaleString()
+}
+
+function getCategoryClass(category: string): string {
+  switch (category) {
+    case 'health': return 'category-health'
+    case 'video': return 'category-video'
+    case 'security': return 'category-security'
+    case 'operational': return 'category-operational'
+    default: return 'category-default'
+  }
+}
+
+watch(
+  () => [props.camera?.id, props.timeRange],
+  () => {
+    fetchNotifications()
+  },
+  { immediate: true }
+)
+</script>
+
+<template>
+  <div class="notifications-list" data-testid="notifications-list">
+    <div v-if="loading" class="loading" data-testid="notifications-loading">
+      Loading notifications...
+    </div>
+    <div v-else-if="error" class="error" data-testid="notifications-error">
+      {{ error.message }}
+    </div>
+    <div v-else-if="notifications.length === 0" class="no-data" data-testid="notifications-no-data">
+      No notifications found for this time range.
+    </div>
+    <div v-else>
+      <div
+        v-for="notification in notifications"
+        :key="notification.id"
+        class="notification-item"
+        :class="{ unread: !notification.read }"
+        data-testid="notification-item"
+      >
+        <div class="notification-header">
+          <span
+            class="category-badge"
+            :class="getCategoryClass(notification.category)"
+          >
+            {{ notification.category }}
+          </span>
+          <span v-if="!notification.read" class="unread-badge">New</span>
+        </div>
+        <div class="notification-time">{{ formatTime(notification.timestamp) }}</div>
+        <div v-if="notification.description" class="notification-description">
+          {{ notification.description }}
+        </div>
+        <div class="notification-status">
+          Status: {{ notification.status }}
+        </div>
+      </div>
+
+      <button
+        v-if="nextPageToken"
+        @click="loadMore"
+        :disabled="loadingMore"
+        class="load-more-button"
+        data-testid="notifications-load-more"
+      >
+        {{ loadingMore ? 'Loading...' : 'Load More' }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.notifications-list {
+  min-height: 200px;
+}
+
+.loading,
+.no-data {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100px;
+  color: #666;
+  font-style: italic;
+}
+
+.error {
+  color: #e74c3c;
+  padding: 10px;
+  background: #fdf2f2;
+  border-radius: 4px;
+}
+
+.notification-item {
+  padding: 12px;
+  border: 1px solid #eee;
+  border-radius: 6px;
+  margin-bottom: 10px;
+  background: #fafafa;
+}
+
+.notification-item.unread {
+  background: #f0f9ff;
+  border-color: #bae6fd;
+}
+
+.notification-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 5px;
+}
+
+.category-badge {
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.category-health {
+  background: #fef3c7;
+  color: #92400e;
+}
+
+.category-video {
+  background: #dbeafe;
+  color: #1e40af;
+}
+
+.category-security {
+  background: #fde8e8;
+  color: #c53030;
+}
+
+.category-operational {
+  background: #e0e7ff;
+  color: #3730a3;
+}
+
+.category-default {
+  background: #f3f4f6;
+  color: #374151;
+}
+
+.unread-badge {
+  background: #3b82f6;
+  color: white;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 0.7rem;
+  font-weight: 600;
+}
+
+.notification-time {
+  font-size: 0.8rem;
+  color: #666;
+  margin-bottom: 5px;
+}
+
+.notification-description {
+  font-size: 0.85rem;
+  color: #555;
+  margin-bottom: 5px;
+}
+
+.notification-status {
+  font-size: 0.75rem;
+  color: #888;
+}
+
+.load-more-button {
+  width: 100%;
+  margin-top: 10px;
+  padding: 10px;
+  background: #f5f5f5;
+  border: 1px solid #ddd;
+  color: #333;
+}
+
+.load-more-button:hover {
+  background: #eee;
+}
+
+.load-more-button:disabled {
+  background: #f5f5f5;
+  color: #999;
+}
+</style>

package/examples/vue-alerts-metrics/src/components/TimeRangeSelector.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+defineProps<{
+  selected: string
+}>()
+
+const emit = defineEmits<{
+  change: [range: string]
+}>()
+
+const ranges = [
+  { value: '1h', label: '1 Hour' },
+  { value: '6h', label: '6 Hours' },
+  { value: '24h', label: '24 Hours' },
+  { value: '7d', label: '7 Days' }
+]
+
+function handleClick(range: string) {
+  emit('change', range)
+}
+</script>
+
+<template>
+  <div class="time-range-selector">
+    <span class="label">Time Range:</span>
+    <div class="buttons">
+      <button
+        v-for="range in ranges"
+        :key="range.value"
+        :class="{ active: selected === range.value }"
+        @click="handleClick(range.value)"
+        :data-testid="`time-range-${range.value}`"
+      >
+        {{ range.label }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.time-range-selector {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.label {
+  font-weight: 500;
+}
+
+.buttons {
+  display: flex;
+  gap: 5px;
+}
+
+button {
+  padding: 8px 16px;
+  border: 1px solid #ddd;
+  background: #fff;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.9rem;
+  color: #333;
+}
+
+button:hover {
+  background: #f5f5f5;
+}
+
+button.active {
+  background: #42b883;
+  color: white;
+  border-color: #42b883;
+}
+</style>

package/examples/vue-alerts-metrics/src/main.ts

@@ -0,0 +1,23 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import { initEenToolkit } from 'een-api-toolkit'
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+
+// Install Pinia (required before initEenToolkit)
+app.use(createPinia())
+
+// Initialize EEN API Toolkit
+initEenToolkit({
+  proxyUrl: import.meta.env.VITE_PROXY_URL,
+  clientId: import.meta.env.VITE_EEN_CLIENT_ID,
+  redirectUri: import.meta.env.VITE_REDIRECT_URI,
+  debug: import.meta.env.VITE_DEBUG === 'true'
+})
+
+// Install router
+app.use(router)
+
+app.mount('#app')