een-api-toolkit 0.3.13 → 0.3.15

package/examples/vue-alerts-metrics/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "een-api-toolkit-alerts-metrics-example",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "stop": "lsof -ti :3333 2>/dev/null | xargs -r kill -9 || echo 'Port 3333 is free'",
+    "dev": "npm run stop && vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui"
+  },
+  "dependencies": {
+    "een-api-toolkit": "file:../..",
+    "pinia": "^3.0.4",
+    "vue": "^3.4.0",
+    "vue-router": "^4.2.0",
+    "chart.js": "^4.4.0",
+    "vue-chartjs": "^5.3.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.57.0",
+    "@vitejs/plugin-vue": "^6.0.0",
+    "dotenv": "^17.2.3",
+    "typescript": "~5.8.0",
+    "vite": "^7.3.0",
+    "vue-tsc": "^3.2.1"
+  }
+}

package/examples/vue-alerts-metrics/playwright.config.ts

@@ -0,0 +1,46 @@
+import { defineConfig, devices } from '@playwright/test'
+import dotenv from 'dotenv'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+// Load .env files: parent first, then local with override to replace any conflicts
+dotenv.config({ path: path.resolve(__dirname, '../../.env') })
+dotenv.config({ path: path.resolve(__dirname, '.env'), override: true })
+
+const redirectUri = process.env.VITE_REDIRECT_URI || 'http://127.0.0.1:3333'
+if (!redirectUri.startsWith('http://127.0.0.1:') && !redirectUri.startsWith('http://localhost:')) {
+  throw new Error('VITE_REDIRECT_URI must use localhost or 127.0.0.1 for security')
+}
+const baseURL = redirectUri
+
+export default defineConfig({
+  testDir: './e2e',
+  testMatch: '**/*.spec.ts',
+  fullyParallel: false,
+  forbidOnly: !!process.env.CI,
+  retries: 0,
+  maxFailures: 1,
+  workers: 1,
+  reporter: [['html', { open: 'never' }]],
+  timeout: 30000,
+  use: {
+    baseURL,
+    trace: 'on-first-retry',
+    video: 'retain-on-failure'
+  },
+  outputDir: './e2e-results/',
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] }
+    }
+  ],
+  webServer: {
+    command: 'npm run dev',
+    url: baseURL,
+    reuseExistingServer: !process.env.CI,
+    timeout: 30000
+  }
+})

package/examples/vue-alerts-metrics/src/App.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { useAuthStore } from 'een-api-toolkit'
+import { computed } from 'vue'
+
+const authStore = useAuthStore()
+const isAuthenticated = computed(() => authStore.isAuthenticated)
+</script>
+
+<template>
+  <div class="app">
+    <header>
+      <h1>EEN Alerts & Metrics Example</h1>
+      <nav>
+        <router-link to="/" data-testid="nav-home">Home</router-link>
+        <router-link v-if="isAuthenticated" to="/dashboard" data-testid="nav-dashboard">Dashboard</router-link>
+        <router-link v-if="!isAuthenticated" to="/login" data-testid="nav-login">Login</router-link>
+        <router-link v-if="isAuthenticated" to="/logout" data-testid="nav-logout">Logout</router-link>
+      </nav>
+    </header>
+    <main>
+      <router-view />
+    </main>
+  </div>
+</template>
+
+<style>
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  line-height: 1.6;
+  color: #333;
+}
+
+.app {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 30px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #eee;
+}
+
+header h1 {
+  font-size: 1.5rem;
+}
+
+nav {
+  display: flex;
+  gap: 20px;
+}
+
+nav a {
+  color: #42b883;
+  text-decoration: none;
+}
+
+nav a:hover {
+  text-decoration: underline;
+}
+
+nav a.router-link-active {
+  font-weight: bold;
+}
+
+button {
+  background: #42b883;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 1rem;
+}
+
+button:hover {
+  background: #3aa876;
+}
+
+button:disabled {
+  background: #ccc;
+  cursor: not-allowed;
+}
+
+.error {
+  color: #e74c3c;
+  padding: 10px;
+  background: #fdf2f2;
+  border-radius: 4px;
+  margin: 10px 0;
+}
+
+.loading {
+  color: #666;
+  font-style: italic;
+}
+</style>

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

@@ -0,0 +1,330 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { listAlerts, listAlertTypes, type Camera, type Alert, type AlertType, type EenError } from 'een-api-toolkit'
+
+const props = defineProps<{
+  camera: Camera
+  timeRange: string
+}>()
+
+const alerts = ref<Alert[]>([])
+const alertTypes = ref<AlertType[]>([])
+const selectedAlertType = ref<string>('')
+const loadingAlertTypes = ref(false)
+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
+  }
+}
+
+function formatAlertType(type: string): string {
+  // Convert "een.motionDetectionAlert.v1" to "Motion Detection Alert"
+  const parts = type.split('.')
+  if (parts.length >= 2) {
+    const name = parts[1]
+      .replace(/([A-Z])/g, ' $1')
+      .trim()
+    return name.charAt(0).toUpperCase() + name.slice(1)
+  }
+  return type
+}
+
+async function fetchAlertTypes() {
+  loadingAlertTypes.value = true
+  error.value = null
+  alertTypes.value = []
+  selectedAlertType.value = ''
+
+  const result = await listAlertTypes({ pageSize: 100 })
+
+  if (result.error) {
+    error.value = result.error
+    loadingAlertTypes.value = false
+    return
+  }
+
+  alertTypes.value = result.data?.results ?? []
+  loadingAlertTypes.value = false
+}
+
+async function fetchAlerts(append = false) {
+  if (!props.camera?.id) return
+
+  if (append) {
+    loadingMore.value = true
+  } else {
+    loading.value = true
+    alerts.value = []
+    nextPageToken.value = undefined
+  }
+  error.value = null
+
+  const now = new Date()
+  const rangeMs = getTimeRangeMs(props.timeRange)
+  const startTime = new Date(now.getTime() - rangeMs)
+
+  const params: Parameters<typeof listAlerts>[0] = {
+    actorId__in: [props.camera.id],
+    timestamp__gte: startTime.toISOString(),
+    timestamp__lte: now.toISOString(),
+    pageSize: 20,
+    pageToken: append ? nextPageToken.value : undefined,
+    include: ['description'],
+    sort: ['-timestamp']
+  }
+
+  // Add alert type filter if selected
+  if (selectedAlertType.value) {
+    params.alertType__in = [selectedAlertType.value]
+  }
+
+  const result = await listAlerts(params)
+
+  if (result.error) {
+    error.value = result.error
+  } else {
+    const newAlerts = result.data?.results ?? []
+    if (append) {
+      alerts.value = [...alerts.value, ...newAlerts]
+    } else {
+      alerts.value = newAlerts
+    }
+    nextPageToken.value = result.data?.nextPageToken
+  }
+
+  loading.value = false
+  loadingMore.value = false
+}
+
+function handleAlertTypeChange() {
+  fetchAlerts()
+}
+
+function loadMore() {
+  if (nextPageToken.value) {
+    fetchAlerts(true)
+  }
+}
+
+function formatTime(timestamp: string): string {
+  return new Date(timestamp).toLocaleString()
+}
+
+function getPriorityClass(priority?: number): string {
+  if (priority === undefined) return ''
+  if (priority >= 15) return 'priority-high'
+  if (priority >= 10) return 'priority-medium'
+  return 'priority-low'
+}
+
+// Fetch alert types once on mount
+fetchAlertTypes()
+
+// Fetch alerts when camera or time range changes
+watch(
+  () => [props.camera?.id, props.timeRange],
+  () => {
+    fetchAlerts()
+  },
+  { immediate: true }
+)
+</script>
+
+<template>
+  <div class="alerts-list" data-testid="alerts-list">
+    <div class="alert-type-selector" data-testid="alert-type-selector">
+      <label for="alert-type-select">Alert Type:</label>
+      <select
+        id="alert-type-select"
+        v-model="selectedAlertType"
+        @change="handleAlertTypeChange"
+        :disabled="loadingAlertTypes"
+        data-testid="alert-type-select"
+      >
+        <option value="">
+          {{ loadingAlertTypes ? 'Loading...' : 'All Alert Types' }}
+        </option>
+        <option
+          v-for="at in alertTypes"
+          :key="at.type"
+          :value="at.type"
+          data-testid="alert-type-option"
+        >
+          {{ formatAlertType(at.type) }}
+        </option>
+      </select>
+    </div>
+
+    <div v-if="loading" class="loading" data-testid="alerts-loading">
+      Loading alerts...
+    </div>
+    <div v-else-if="error" class="error" data-testid="alerts-error">
+      {{ error.message }}
+    </div>
+    <div v-else-if="alerts.length === 0" class="no-data" data-testid="alerts-no-data">
+      No alerts found for this time range.
+    </div>
+    <div v-else>
+      <div
+        v-for="alert in alerts"
+        :key="alert.id"
+        class="alert-item"
+        data-testid="alert-item"
+      >
+        <div class="alert-header">
+          <span class="alert-type">{{ alert.alertType?.split('.')[1] || alert.alertType }}</span>
+          <span
+            v-if="alert.priority !== undefined"
+            class="priority-badge"
+            :class="getPriorityClass(alert.priority)"
+          >
+            P{{ alert.priority }}
+          </span>
+        </div>
+        <div class="alert-time">{{ formatTime(alert.timestamp) }}</div>
+        <div v-if="alert.description" class="alert-description">
+          {{ alert.description }}
+        </div>
+      </div>
+
+      <button
+        v-if="nextPageToken"
+        @click="loadMore"
+        :disabled="loadingMore"
+        class="load-more-button"
+        data-testid="alerts-load-more"
+      >
+        {{ loadingMore ? 'Loading...' : 'Load More' }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.alerts-list {
+  min-height: 200px;
+}
+
+.alert-type-selector {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 15px;
+}
+
+.alert-type-selector label {
+  font-weight: 500;
+  font-size: 0.9rem;
+}
+
+.alert-type-selector select {
+  padding: 6px 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 0.85rem;
+  min-width: 200px;
+}
+
+.alert-type-selector select:disabled {
+  background: #f5f5f5;
+  cursor: not-allowed;
+}
+
+.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;
+}
+
+.alert-item {
+  padding: 12px;
+  border: 1px solid #eee;
+  border-radius: 6px;
+  margin-bottom: 10px;
+  background: #fafafa;
+}
+
+.alert-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 5px;
+}
+
+.alert-type {
+  font-weight: 600;
+  color: #333;
+  font-size: 0.9rem;
+}
+
+.priority-badge {
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.priority-high {
+  background: #fde8e8;
+  color: #c53030;
+}
+
+.priority-medium {
+  background: #fef3c7;
+  color: #92400e;
+}
+
+.priority-low {
+  background: #def7ec;
+  color: #03543f;
+}
+
+.alert-time {
+  font-size: 0.8rem;
+  color: #666;
+  margin-bottom: 5px;
+}
+
+.alert-description {
+  font-size: 0.85rem;
+  color: #555;
+}
+
+.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/CameraSelector.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { getCameras, type Camera, type EenError } from 'een-api-toolkit'
+
+const emit = defineEmits<{
+  select: [camera: Camera]
+}>()
+
+const cameras = ref<Camera[]>([])
+const loading = ref(false)
+const error = ref<EenError | null>(null)
+const selectedCameraId = ref<string>('')
+
+async function fetchCameras() {
+  loading.value = true
+  error.value = null
+
+  const result = await getCameras({ pageSize: 100 })
+
+  if (result.error) {
+    error.value = result.error
+    cameras.value = []
+  } else {
+    cameras.value = result.data?.results ?? []
+  }
+
+  loading.value = false
+}
+
+function handleChange() {
+  const camera = cameras.value.find(c => c.id === selectedCameraId.value)
+  if (camera) {
+    emit('select', camera)
+  }
+}
+
+onMounted(() => {
+  fetchCameras()
+})
+</script>
+
+<template>
+  <div class="camera-selector">
+    <label for="camera-select">Camera:</label>
+    <select
+      id="camera-select"
+      v-model="selectedCameraId"
+      @change="handleChange"
+      :disabled="loading"
+      data-testid="camera-select"
+    >
+      <option value="" disabled>{{ loading ? 'Loading cameras...' : 'Select a camera' }}</option>
+      <option
+        v-for="camera in cameras"
+        :key="camera.id"
+        :value="camera.id"
+        data-testid="camera-option"
+      >
+        {{ camera.name ? `${camera.name} (${camera.id})` : camera.id }}
+      </option>
+    </select>
+    <div v-if="error" class="error" data-testid="camera-selector-error">
+      {{ error.message }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.camera-selector {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+label {
+  font-weight: 500;
+}
+
+select {
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 1rem;
+  min-width: 350px;
+}
+
+select:disabled {
+  background: #f5f5f5;
+  cursor: not-allowed;
+}
+
+.error {
+  color: #e74c3c;
+  font-size: 0.9rem;
+}
+</style>