een-api-toolkit 0.3.47 → 0.3.49

package/examples/vue-jobs/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "een-api-toolkit-example-jobs",
+  "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"
+  },
+  "devDependencies": {
+    "@playwright/test": "1.58.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-jobs/playwright.config.ts

@@ -0,0 +1,47 @@
+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
+// In CI, env vars are passed directly via workflow
+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')
+}
+export const baseURL = redirectUri
+
+export default defineConfig({
+  testDir: './e2e',
+  testMatch: '**/*.spec.ts',
+  fullyParallel: false, // Run tests sequentially for predictable order
+  forbidOnly: !!process.env.CI,
+  retries: 0, // No retries - fail fast
+  maxFailures: 1, // Stop on first failure
+  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-jobs/src/App.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { onMounted, computed } from 'vue'
+import { useAuthStore } from 'een-api-toolkit'
+
+const authStore = useAuthStore()
+const isAuthenticated = computed(() => authStore.isAuthenticated)
+
+// Initialize auth store from storage on app mount
+// This restores the session if a valid token exists in localStorage/sessionStorage
+onMounted(() => {
+  authStore.initialize()
+})
+</script>
+
+<template>
+  <div class="app">
+    <header>
+      <h1 data-testid="app-title">EEN Jobs Example</h1>
+      <nav>
+        <router-link data-testid="nav-home" to="/">Home</router-link>
+        <router-link data-testid="nav-jobs" v-if="isAuthenticated" to="/jobs">Jobs</router-link>
+        <router-link data-testid="nav-files" v-if="isAuthenticated" to="/files">Files</router-link>
+        <router-link data-testid="nav-create-export" v-if="isAuthenticated" to="/create-export">Create Export</router-link>
+        <router-link data-testid="nav-login" v-if="!isAuthenticated" to="/login">Login</router-link>
+        <router-link data-testid="nav-logout" 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;
+}
+
+.badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 0.85em;
+  font-weight: 500;
+}
+
+.badge-pending {
+  background: #fff3cd;
+  color: #856404;
+}
+
+.badge-started {
+  background: #cce5ff;
+  color: #004085;
+}
+
+.badge-success {
+  background: #d4edda;
+  color: #155724;
+}
+
+.badge-failure {
+  background: #f8d7da;
+  color: #721c24;
+}
+
+.badge-available {
+  background: #d4edda;
+  color: #155724;
+}
+
+.badge-expired {
+  background: #e2e3e5;
+  color: #383d41;
+}
+</style>

package/examples/vue-jobs/src/main.ts

@@ -0,0 +1,25 @@
+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 with localStorage for persistent sessions
+// Note: Using 'localStorage' storage means tokens persist across page refreshes
+initEenToolkit({
+  proxyUrl: import.meta.env.VITE_PROXY_URL,
+  clientId: import.meta.env.VITE_EEN_CLIENT_ID,
+  redirectUri: import.meta.env.VITE_REDIRECT_URI,
+  storageStrategy: 'localStorage',
+  debug: import.meta.env.VITE_DEBUG === 'true'
+})
+
+// Install router
+app.use(router)
+
+app.mount('#app')

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

@@ -0,0 +1,82 @@
+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 Jobs from '../views/Jobs.vue'
+import JobDetail from '../views/JobDetail.vue'
+import Files from '../views/Files.vue'
+import CreateExport from '../views/CreateExport.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: '/jobs',
+      name: 'jobs',
+      component: Jobs,
+      meta: { requiresAuth: true }
+    },
+    {
+      path: '/jobs/:id',
+      name: 'job-detail',
+      component: JobDetail,
+      meta: { requiresAuth: true }
+    },
+    {
+      path: '/files',
+      name: 'files',
+      component: Files,
+      meta: { requiresAuth: true }
+    },
+    {
+      path: '/create-export',
+      name: 'create-export',
+      component: CreateExport,
+      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-jobs/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 home
+  router.push('/')
+})
+</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-jobs/src/views/CreateExport.vue

@@ -0,0 +1,284 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { getCameras, createExportJob, formatTimestamp, type Camera, type EenError, type ExportType } from 'een-api-toolkit'
+
+const router = useRouter()
+
+// Form state
+const selectedCamera = ref<string>('')
+const exportType = ref<ExportType>('video')
+const exportName = ref('')
+const duration = ref(15) // minutes
+const playbackMultiplier = ref(10) // default multiplier for timeLapse/bundle
+
+// Check if playbackMultiplier is needed
+const needsPlaybackMultiplier = computed(() => {
+  return exportType.value === 'timeLapse' || exportType.value === 'bundle'
+})
+
+// Data state
+const cameras = ref<Camera[]>([])
+const loading = ref(false)
+const submitting = ref(false)
+const error = ref<EenError | null>(null)
+const success = ref<string | null>(null)
+
+const exportTypes: { value: ExportType; label: string }[] = [
+  { value: 'video', label: 'Video' },
+  { value: 'timeLapse', label: 'Time Lapse' },
+  { value: 'bundle', label: 'Bundle (Video + Images)' }
+]
+
+const durationOptions = [
+  { value: 5, label: '5 minutes' },
+  { value: 15, label: '15 minutes' },
+  { value: 30, label: '30 minutes' },
+  { value: 60, label: '1 hour' }
+]
+
+const playbackMultiplierOptions = [
+  { value: 2, label: '2x (30 min → 15 min)' },
+  { value: 5, label: '5x (30 min → 6 min)' },
+  { value: 10, label: '10x (30 min → 3 min)' },
+  { value: 20, label: '20x (30 min → 1.5 min)' },
+  { value: 48, label: '48x (30 min → 37 sec)' }
+]
+
+const canSubmit = computed(() => {
+  if (!selectedCamera.value || !exportType.value || submitting.value) {
+    return false
+  }
+  // Validate playbackMultiplier for timeLapse/bundle
+  if (needsPlaybackMultiplier.value) {
+    return playbackMultiplier.value >= 1 && playbackMultiplier.value <= 48
+  }
+  return true
+})
+
+async function fetchCameras() {
+  loading.value = true
+  error.value = null
+
+  const result = await getCameras({
+    pageSize: 100,
+    status__in: ['online', 'streaming']
+  })
+
+  if (result.error) {
+    error.value = result.error
+  } else {
+    cameras.value = result.data.results
+  }
+
+  loading.value = false
+}
+
+async function handleSubmit() {
+  if (!canSubmit.value) return
+
+  submitting.value = true
+  error.value = null
+  success.value = null
+
+  const endTime = new Date()
+  const startTime = new Date(endTime.getTime() - duration.value * 60 * 1000)
+
+  const exportParams: Parameters<typeof createExportJob>[0] = {
+    name: exportName.value || `Export - ${new Date().toLocaleString()}`,
+    type: exportType.value,
+    cameraId: selectedCamera.value,
+    startTimestamp: formatTimestamp(startTime.toISOString()),
+    endTimestamp: formatTimestamp(endTime.toISOString())
+  }
+
+  // Add playbackMultiplier for timeLapse and bundle exports
+  if (needsPlaybackMultiplier.value) {
+    exportParams.playbackMultiplier = playbackMultiplier.value
+  }
+
+  const result = await createExportJob(exportParams)
+
+  if (result.error) {
+    error.value = result.error
+  } else {
+    success.value = `Export job created successfully! Job ID: ${result.data.id}`
+    // Redirect to job detail page after a moment
+    setTimeout(() => {
+      router.push(`/jobs/${result.data.id}`)
+    }, 2000)
+  }
+
+  submitting.value = false
+}
+
+onMounted(() => {
+  fetchCameras()
+})
+</script>
+
+<template>
+  <div class="create-export">
+    <h2>Create Export</h2>
+    <p class="description">
+      Create a video export from a camera. The export will be processed in the background
+      and you can track its progress on the Jobs page.
+    </p>
+
+    <div v-if="loading" class="loading">Loading cameras...</div>
+
+    <div v-else-if="cameras.length === 0 && !error" class="no-cameras">
+      <p>No online cameras available. Exports require at least one online camera.</p>
+    </div>
+
+    <form v-else @submit.prevent="handleSubmit" class="export-form">
+      <div class="form-group">
+        <label for="camera">Camera</label>
+        <select id="camera" v-model="selectedCamera" required>
+          <option value="">Select a camera...</option>
+          <option v-for="camera in cameras" :key="camera.id" :value="camera.id">
+            {{ camera.name }}
+          </option>
+        </select>
+      </div>
+
+      <div class="form-group">
+        <label for="exportType">Export Type</label>
+        <select id="exportType" v-model="exportType">
+          <option v-for="type in exportTypes" :key="type.value" :value="type.value">
+            {{ type.label }}
+          </option>
+        </select>
+      </div>
+
+      <div class="form-group">
+        <label for="duration">Duration (from now)</label>
+        <select id="duration" v-model="duration">
+          <option v-for="opt in durationOptions" :key="opt.value" :value="opt.value">
+            {{ opt.label }}
+          </option>
+        </select>
+      </div>
+
+      <div v-if="needsPlaybackMultiplier" class="form-group">
+        <label for="playbackMultiplier">Playback Speed</label>
+        <select id="playbackMultiplier" v-model="playbackMultiplier">
+          <option v-for="opt in playbackMultiplierOptions" :key="opt.value" :value="opt.value">
+            {{ opt.label }}
+          </option>
+        </select>
+        <p class="field-hint">Higher values create shorter, faster time-lapse videos</p>
+      </div>
+
+      <div class="form-group">
+        <label for="name">Export Name (optional)</label>
+        <input
+          id="name"
+          type="text"
+          v-model="exportName"
+          placeholder="Enter a name for this export"
+        />
+      </div>
+
+      <div v-if="error" class="error">
+        Error: {{ error.message }}
+      </div>
+
+      <div v-if="success" class="success">
+        {{ success }}
+      </div>
+
+      <div class="form-actions">
+        <button type="submit" :disabled="!canSubmit">
+          {{ submitting ? 'Creating...' : 'Create Export' }}
+        </button>
+        <router-link to="/jobs">
+          <button type="button" class="btn-secondary">Cancel</button>
+        </router-link>
+      </div>
+    </form>
+  </div>
+</template>
+
+<style scoped>
+.create-export {
+  width: 80vw;
+  min-width: 500px;
+  margin: 0 auto;
+}
+
+h2 {
+  margin-bottom: 10px;
+}
+
+.description {
+  color: #666;
+  margin-bottom: 30px;
+}
+
+.no-cameras {
+  padding: 20px;
+  background: #fff3cd;
+  border-radius: 8px;
+  color: #856404;
+}
+
+.export-form {
+  background: #f5f5f5;
+  padding: 20px;
+  border-radius: 8px;
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: 500;
+}
+
+.form-group select,
+.form-group input {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 1rem;
+}
+
+.form-group select:focus,
+.form-group input:focus {
+  outline: none;
+  border-color: #42b883;
+}
+
+.field-hint {
+  margin-top: 5px;
+  font-size: 0.85rem;
+  color: #888;
+}
+
+.form-actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 20px;
+}
+
+.btn-secondary {
+  background: #6c757d;
+}
+
+.btn-secondary:hover {
+  background: #5a6268;
+}
+
+.success {
+  padding: 10px;
+  background: #d4edda;
+  border-radius: 4px;
+  color: #155724;
+  margin-bottom: 20px;
+}
+</style>