een-api-toolkit 0.0.13 → 0.0.18

package/examples/vue-cameras/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "een-api-toolkit-cameras-example",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "stop": "npx kill-port 3333",
+    "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": "^2.1.7",
+    "vue": "^3.4.0",
+    "vue-router": "^4.2.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-cameras/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-cameras/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 Cameras Example</h1>
+      <nav>
+        <router-link to="/">Home</router-link>
+        <router-link v-if="isAuthenticated" to="/cameras">Cameras</router-link>
+        <router-link v-if="!isAuthenticated" to="/login">Login</router-link>
+        <router-link v-if="isAuthenticated" to="/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: 1200px;
+  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-cameras/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')

package/examples/vue-cameras/src/router/index.ts

@@ -0,0 +1,68 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import { useAuthStore } from 'een-api-toolkit'
+import Home from '../views/Home.vue'
+import Login from '../views/Login.vue'
+import Callback from '../views/Callback.vue'
+import Cameras from '../views/Cameras.vue'
+import CameraDetail from '../views/CameraDetail.vue'
+import Logout from '../views/Logout.vue'
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: Home,
+      // Handle OAuth callback on root path (EEN IDP redirects to http://127.0.0.1:3333)
+      beforeEnter: (to, _from, next) => {
+        // If URL has code and state params, it's an OAuth callback
+        if (to.query.code && to.query.state) {
+          next({ name: 'callback', query: to.query })
+        } else {
+          next()
+        }
+      }
+    },
+    {
+      path: '/login',
+      name: 'login',
+      component: Login
+    },
+    {
+      path: '/callback',
+      name: 'callback',
+      component: Callback
+    },
+    {
+      path: '/cameras',
+      name: 'cameras',
+      component: Cameras,
+      meta: { requiresAuth: true }
+    },
+    {
+      path: '/cameras/:id',
+      name: 'camera-detail',
+      component: CameraDetail,
+      meta: { requiresAuth: true }
+    },
+    {
+      path: '/logout',
+      name: 'logout',
+      component: Logout
+    }
+  ]
+})
+
+// Navigation guard for protected routes
+router.beforeEach((to, _from, next) => {
+  const authStore = useAuthStore()
+
+  if (to.meta.requiresAuth && !authStore.isAuthenticated) {
+    next({ name: 'login' })
+  } else {
+    next()
+  }
+})
+
+export default router

package/examples/vue-cameras/src/views/Callback.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { handleAuthCallback } from 'een-api-toolkit'
+
+const router = useRouter()
+const error = ref<string | null>(null)
+const processing = ref(true)
+
+onMounted(async () => {
+  const url = new URL(window.location.href)
+  const code = url.searchParams.get('code')
+  const state = url.searchParams.get('state')
+  const errorParam = url.searchParams.get('error')
+
+  if (errorParam) {
+    error.value = `OAuth error: ${errorParam}`
+    processing.value = false
+    return
+  }
+
+  if (!code || !state) {
+    error.value = 'Missing authorization code or state parameter'
+    processing.value = false
+    return
+  }
+
+  const result = await handleAuthCallback(code, state)
+
+  if (result.error) {
+    error.value = result.error.message
+    processing.value = false
+    return
+  }
+
+  // Success - redirect to cameras
+  router.push('/cameras')
+})
+</script>
+
+<template>
+  <div class="callback">
+    <div v-if="processing" class="loading">
+      <h2>Authenticating...</h2>
+      <p>Please wait while we complete the login process.</p>
+    </div>
+
+    <div v-else-if="error" class="error-state">
+      <h2>Authentication Failed</h2>
+      <p class="error">{{ error }}</p>
+      <router-link to="/login">
+        <button>Try Again</button>
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.callback {
+  text-align: center;
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+h2 {
+  margin-bottom: 20px;
+}
+
+.loading p {
+  color: #666;
+}
+
+.error-state .error {
+  margin-bottom: 20px;
+}
+</style>

package/examples/vue-cameras/src/views/CameraDetail.vue

@@ -0,0 +1,315 @@
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+import { useCamera, type CameraStatus } from 'een-api-toolkit'
+
+const route = useRoute()
+
+// Fetch camera with all details
+const { camera, loading, error, refresh } = useCamera(
+  () => route.params.id as string,
+  {
+    include: ['deviceInfo', 'status', 'shareDetails', 'devicePosition', 'networkInfo', 'tags']
+  }
+)
+
+// Get status badge class
+function getStatusClass(status?: CameraStatus): string {
+  switch (status) {
+    case 'online':
+    case 'streaming':
+      return 'status-online'
+    case 'offline':
+    case 'deviceOffline':
+    case 'bridgeOffline':
+      return 'status-offline'
+    case 'error':
+    case 'invalidCredentials':
+      return 'status-error'
+    default:
+      return 'status-unknown'
+  }
+}
+</script>
+
+<template>
+  <div class="camera-detail">
+    <div class="nav-back">
+      <router-link to="/cameras">&larr; Back to Cameras</router-link>
+    </div>
+
+    <div v-if="loading" class="loading">
+      Loading camera details...
+    </div>
+
+    <div v-else-if="error" class="error">
+      Error: {{ error.message }}
+    </div>
+
+    <div v-else-if="camera" class="camera-info">
+      <div class="header">
+        <div>
+          <h2>{{ camera.name }}</h2>
+          <p class="camera-id">ID: {{ camera.id }}</p>
+        </div>
+        <div class="header-actions">
+          <span :class="['status-badge', getStatusClass(camera.status)]">
+            {{ camera.status || 'Unknown' }}
+          </span>
+          <button @click="refresh">Refresh</button>
+        </div>
+      </div>
+
+      <div class="sections">
+        <!-- Basic Info -->
+        <section class="info-section">
+          <h3>Basic Information</h3>
+          <dl>
+            <dt>Account ID</dt>
+            <dd>{{ camera.accountId }}</dd>
+
+            <dt>Bridge ID</dt>
+            <dd>{{ camera.bridgeId || 'Direct to Cloud' }}</dd>
+
+            <dt>Location ID</dt>
+            <dd>{{ camera.locationId || 'Not assigned' }}</dd>
+
+            <dt v-if="camera.timezone">Timezone</dt>
+            <dd v-if="camera.timezone">{{ camera.timezone }}</dd>
+
+            <dt v-if="camera.tags && camera.tags.length > 0">Tags</dt>
+            <dd v-if="camera.tags && camera.tags.length > 0">
+              <span v-for="tag in camera.tags" :key="tag" class="tag">{{ tag }}</span>
+            </dd>
+          </dl>
+        </section>
+
+        <!-- Device Info -->
+        <section v-if="camera.deviceInfo" class="info-section">
+          <h3>Device Information</h3>
+          <dl>
+            <dt v-if="camera.deviceInfo.make">Manufacturer</dt>
+            <dd v-if="camera.deviceInfo.make">{{ camera.deviceInfo.make }}</dd>
+
+            <dt v-if="camera.deviceInfo.model">Model</dt>
+            <dd v-if="camera.deviceInfo.model">{{ camera.deviceInfo.model }}</dd>
+
+            <dt v-if="camera.deviceInfo.firmwareVersion">Firmware</dt>
+            <dd v-if="camera.deviceInfo.firmwareVersion">{{ camera.deviceInfo.firmwareVersion }}</dd>
+
+            <dt v-if="camera.deviceInfo.serialNumber">Serial Number</dt>
+            <dd v-if="camera.deviceInfo.serialNumber">{{ camera.deviceInfo.serialNumber }}</dd>
+
+            <dt v-if="camera.deviceInfo.resolution">Resolution</dt>
+            <dd v-if="camera.deviceInfo.resolution">{{ camera.deviceInfo.resolution }}</dd>
+
+            <dt>Direct to Cloud</dt>
+            <dd>{{ camera.deviceInfo.directToCloud ? 'Yes' : 'No' }}</dd>
+          </dl>
+        </section>
+
+        <!-- Network Info -->
+        <section v-if="camera.ipAddress || camera.macAddress" class="info-section">
+          <h3>Network Information</h3>
+          <dl>
+            <dt v-if="camera.ipAddress">IP Address</dt>
+            <dd v-if="camera.ipAddress">{{ camera.ipAddress }}</dd>
+
+            <dt v-if="camera.macAddress">MAC Address</dt>
+            <dd v-if="camera.macAddress">{{ camera.macAddress }}</dd>
+
+            <dt v-if="camera.guid">GUID</dt>
+            <dd v-if="camera.guid">{{ camera.guid }}</dd>
+          </dl>
+        </section>
+
+        <!-- Share Details -->
+        <section v-if="camera.shareDetails" class="info-section">
+          <h3>Sharing</h3>
+          <dl>
+            <dt>Shared</dt>
+            <dd>{{ camera.shareDetails.shared ? 'Yes' : 'No' }}</dd>
+
+            <dt v-if="camera.shareDetails.accountId">Shared with Account</dt>
+            <dd v-if="camera.shareDetails.accountId">{{ camera.shareDetails.accountId }}</dd>
+
+            <dt v-if="camera.shareDetails.firstResponder !== undefined">First Responder</dt>
+            <dd v-if="camera.shareDetails.firstResponder !== undefined">
+              {{ camera.shareDetails.firstResponder ? 'Yes' : 'No' }}
+            </dd>
+          </dl>
+        </section>
+
+        <!-- Position -->
+        <section v-if="camera.devicePosition" class="info-section">
+          <h3>Location</h3>
+          <dl>
+            <dt v-if="camera.devicePosition.latitude !== undefined">Coordinates</dt>
+            <dd v-if="camera.devicePosition.latitude !== undefined">
+              {{ camera.devicePosition.latitude }}, {{ camera.devicePosition.longitude }}
+            </dd>
+
+            <dt v-if="camera.devicePosition.floor !== undefined">Floor</dt>
+            <dd v-if="camera.devicePosition.floor !== undefined">{{ camera.devicePosition.floor }}</dd>
+
+            <dt v-if="camera.devicePosition.azimuth !== undefined">Azimuth</dt>
+            <dd v-if="camera.devicePosition.azimuth !== undefined">{{ camera.devicePosition.azimuth }}deg</dd>
+          </dl>
+        </section>
+
+        <!-- Analytics -->
+        <section v-if="camera.enabledAnalytics && camera.enabledAnalytics.length > 0" class="info-section">
+          <h3>Analytics</h3>
+          <div class="analytics-list">
+            <span v-for="analytic in camera.enabledAnalytics" :key="analytic" class="analytic-badge">
+              {{ analytic }}
+            </span>
+          </div>
+        </section>
+
+        <!-- Timestamps -->
+        <section class="info-section">
+          <h3>Timestamps</h3>
+          <dl>
+            <dt v-if="camera.createdAt">Created</dt>
+            <dd v-if="camera.createdAt">{{ new Date(camera.createdAt).toLocaleString() }}</dd>
+
+            <dt v-if="camera.updatedAt">Updated</dt>
+            <dd v-if="camera.updatedAt">{{ new Date(camera.updatedAt).toLocaleString() }}</dd>
+          </dl>
+        </section>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.camera-detail {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.nav-back {
+  margin-bottom: 20px;
+}
+
+.nav-back a {
+  color: #42b883;
+  text-decoration: none;
+}
+
+.nav-back a:hover {
+  text-decoration: underline;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 30px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #eee;
+}
+
+.header h2 {
+  margin: 0 0 5px 0;
+}
+
+.camera-id {
+  color: #666;
+  font-size: 0.9rem;
+  margin: 0;
+}
+
+.header-actions {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.status-badge {
+  padding: 6px 12px;
+  border-radius: 4px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.status-online {
+  background: #d4edda;
+  color: #155724;
+}
+
+.status-offline {
+  background: #f8d7da;
+  color: #721c24;
+}
+
+.status-error {
+  background: #fff3cd;
+  color: #856404;
+}
+
+.status-unknown {
+  background: #e2e3e5;
+  color: #383d41;
+}
+
+.sections {
+  display: grid;
+  gap: 25px;
+}
+
+.info-section {
+  background: #f9f9f9;
+  padding: 20px;
+  border-radius: 8px;
+}
+
+.info-section h3 {
+  margin: 0 0 15px 0;
+  font-size: 1rem;
+  color: #333;
+  border-bottom: 1px solid #ddd;
+  padding-bottom: 10px;
+}
+
+dl {
+  display: grid;
+  grid-template-columns: 150px 1fr;
+  gap: 10px 15px;
+  margin: 0;
+}
+
+dt {
+  font-weight: 600;
+  color: #555;
+}
+
+dd {
+  margin: 0;
+  color: #333;
+}
+
+.tag {
+  display: inline-block;
+  background: #e0e0e0;
+  padding: 2px 8px;
+  border-radius: 3px;
+  margin-right: 5px;
+  font-size: 0.85rem;
+}
+
+.analytics-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.analytic-badge {
+  background: #42b883;
+  color: white;
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: 0.85rem;
+}
+</style>