een-api-toolkit 0.3.47 → 0.3.49

package/examples/vue-jobs/src/views/JobDetail.vue

@@ -0,0 +1,392 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { getJob, downloadFile, type Job, type EenError } from 'een-api-toolkit'
+
+const route = useRoute()
+const router = useRouter()
+
+const job = ref<Job | null>(null)
+const loading = ref(false)
+const error = ref<EenError | null>(null)
+const downloading = ref(false)
+const videoUrl = ref<string | null>(null)
+const loadingVideo = ref(false)
+
+// Polling state
+const isPolling = ref(false)
+let pollInterval: ReturnType<typeof setInterval> | null = null
+
+const jobId = computed(() => route.params.id as string)
+
+// Extract name from nested structure
+const jobName = computed(() => {
+  return job.value?.arguments?.originalRequest?.name || '-'
+})
+
+// Extract file URL from result (for download)
+const fileUrl = computed(() => {
+  return job.value?.result?.intervals?.[0]?.files?.[0]?.url
+})
+
+// Extract request timestamps from arguments
+const requestStartTimestamp = computed(() => {
+  return job.value?.arguments?.originalRequest?.startTimestamp
+})
+
+const requestEndTimestamp = computed(() => {
+  return job.value?.arguments?.originalRequest?.endTimestamp
+})
+
+const canDownload = computed(() => {
+  return job.value?.state === 'success' && fileUrl.value
+})
+
+const canPlay = computed(() => {
+  // Can play video exports
+  return canDownload.value && (job.value?.type === 'video' || job.value?.type === 'export')
+})
+
+async function fetchJob() {
+  loading.value = true
+  error.value = null
+
+  const result = await getJob(jobId.value)
+
+  if (result.error) {
+    error.value = result.error
+    job.value = null
+    stopPolling()
+  } else {
+    job.value = result.data
+
+    // Auto-start polling if job is pending or started
+    if (['pending', 'started'].includes(result.data.state) && !isPolling.value) {
+      startPolling()
+    }
+
+    // Stop polling if job is complete
+    if (['success', 'failure', 'revoked'].includes(result.data.state)) {
+      stopPolling()
+    }
+  }
+
+  loading.value = false
+}
+
+function startPolling() {
+  if (isPolling.value) return
+  isPolling.value = true
+  pollInterval = setInterval(fetchJob, 3000) // Poll every 3 seconds
+}
+
+function stopPolling() {
+  if (pollInterval) {
+    clearInterval(pollInterval)
+    pollInterval = null
+  }
+  isPolling.value = false
+}
+
+async function handleDownload() {
+  const url = fileUrl.value
+  if (!url) return
+
+  // Extract file ID from URL (last path segment)
+  const urlParts = url.split('/')
+  const fileId = urlParts[urlParts.length - 1]
+
+  downloading.value = true
+  const result = await downloadFile(fileId)
+
+  if (result.error) {
+    error.value = result.error
+  } else {
+    // Create download link
+    const blobUrl = URL.createObjectURL(result.data.blob)
+    const a = document.createElement('a')
+    a.href = blobUrl
+    a.download = result.data.filename
+    a.click()
+    URL.revokeObjectURL(blobUrl)
+  }
+
+  downloading.value = false
+}
+
+async function handlePlay() {
+  const url = fileUrl.value
+  if (!url) return
+
+  // Extract file ID from URL (last path segment)
+  const urlParts = url.split('/')
+  const fileId = urlParts[urlParts.length - 1]
+
+  loadingVideo.value = true
+  error.value = null
+
+  const result = await downloadFile(fileId)
+
+  if (result.error) {
+    error.value = result.error
+  } else {
+    // Revoke previous URL if exists
+    if (videoUrl.value) {
+      URL.revokeObjectURL(videoUrl.value)
+    }
+    // Create blob URL for video playback
+    videoUrl.value = URL.createObjectURL(result.data.blob)
+  }
+
+  loadingVideo.value = false
+}
+
+function closePlayer() {
+  if (videoUrl.value) {
+    URL.revokeObjectURL(videoUrl.value)
+    videoUrl.value = null
+  }
+}
+
+function goBack() {
+  router.push('/jobs')
+}
+
+function formatDate(timestamp: string | undefined) {
+  if (!timestamp) return '-'
+  return new Date(timestamp).toLocaleString()
+}
+
+function getStateBadgeClass(state: string) {
+  return `badge badge-${state}`
+}
+
+onMounted(() => {
+  fetchJob()
+})
+
+onUnmounted(() => {
+  stopPolling()
+  if (videoUrl.value) {
+    URL.revokeObjectURL(videoUrl.value)
+  }
+})
+</script>
+
+<template>
+  <div class="job-detail">
+    <div class="header">
+      <h2>Job Details</h2>
+      <button @click="goBack">Back to Jobs</button>
+    </div>
+
+    <div v-if="loading && !job" class="loading">
+      Loading job...
+    </div>
+
+    <div v-else-if="error" class="error">
+      Error: {{ error.message }}
+    </div>
+
+    <div v-else-if="job" class="job-info">
+      <div class="info-card">
+        <div class="info-row">
+          <span class="label">ID:</span>
+          <span class="value">{{ job.id }}</span>
+        </div>
+        <div class="info-row">
+          <span class="label">Name:</span>
+          <span class="value">{{ jobName }}</span>
+        </div>
+        <div class="info-row">
+          <span class="label">Type:</span>
+          <span class="value">{{ job.type }}</span>
+        </div>
+        <div class="info-row">
+          <span class="label">State:</span>
+          <span :class="getStateBadgeClass(job.state)">{{ job.state }}</span>
+        </div>
+        <div v-if="job.state === 'started'" class="info-row">
+          <span class="label">Progress:</span>
+          <span class="value">
+            <div class="progress-bar">
+              <div class="progress-fill" :style="{ width: `${(job.progress || 0) * 100}%` }"></div>
+            </div>
+            <span class="progress-text">{{ Math.round((job.progress || 0) * 100) }}%</span>
+          </span>
+        </div>
+        <div v-if="job.state === 'failure' && job.error" class="info-row">
+          <span class="label">Error:</span>
+          <span class="value error-text">{{ job.error }}</span>
+        </div>
+        <div v-if="fileUrl" class="info-row">
+          <span class="label">File:</span>
+          <span class="value file-url">{{ job.result?.intervals?.[0]?.files?.[0]?.name || 'Available' }}</span>
+        </div>
+        <div class="info-row">
+          <span class="label">Created:</span>
+          <span class="value">{{ formatDate(job.createTimestamp) }}</span>
+        </div>
+        <div v-if="requestStartTimestamp" class="info-row">
+          <span class="label">Period Start:</span>
+          <span class="value">{{ formatDate(requestStartTimestamp) }}</span>
+        </div>
+        <div v-if="requestEndTimestamp" class="info-row">
+          <span class="label">Period End:</span>
+          <span class="value">{{ formatDate(requestEndTimestamp) }}</span>
+        </div>
+        <div v-if="job.updateTimestamp" class="info-row">
+          <span class="label">Last Updated:</span>
+          <span class="value">{{ formatDate(job.updateTimestamp) }}</span>
+        </div>
+      </div>
+
+      <div class="actions">
+        <button v-if="canPlay" @click="handlePlay" :disabled="loadingVideo || downloading">
+          {{ loadingVideo ? 'Loading...' : 'Play Video' }}
+        </button>
+        <button v-if="canDownload" @click="handleDownload" :disabled="downloading || loadingVideo">
+          {{ downloading ? 'Downloading...' : 'Download File' }}
+        </button>
+        <button @click="fetchJob" :disabled="loading">
+          {{ loading ? 'Refreshing...' : 'Refresh' }}
+        </button>
+      </div>
+
+      <!-- Video Player -->
+      <div v-if="videoUrl" class="video-player">
+        <div class="video-header">
+          <h3>Video Player</h3>
+          <button class="close-player" @click="closePlayer">&times;</button>
+        </div>
+        <video controls autoplay :src="videoUrl" class="video-element">
+          Your browser does not support the video tag.
+        </video>
+      </div>
+
+      <div v-if="isPolling" class="polling-notice">
+        Auto-refreshing every 3 seconds...
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.job-detail {
+  width: 80vw;
+  min-width: 600px;
+  margin: 0 auto;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.info-card {
+  background: #f5f5f5;
+  border-radius: 8px;
+  padding: 20px;
+}
+
+.info-row {
+  display: flex;
+  margin-bottom: 12px;
+}
+
+.info-row:last-child {
+  margin-bottom: 0;
+}
+
+.label {
+  font-weight: 600;
+  width: 30%;
+  flex-shrink: 0;
+}
+
+.value {
+  color: #666;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.progress-bar {
+  width: 150px;
+  height: 10px;
+  background: #e0e0e0;
+  border-radius: 5px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  background: #42b883;
+  transition: width 0.3s ease;
+}
+
+.progress-text {
+  font-weight: 500;
+}
+
+.error-text {
+  color: #e74c3c;
+}
+
+.actions {
+  margin-top: 20px;
+  display: flex;
+  gap: 10px;
+}
+
+.polling-notice {
+  margin-top: 15px;
+  padding: 10px;
+  background: #e3f2fd;
+  border-radius: 4px;
+  color: #1976d2;
+  font-size: 0.9rem;
+}
+
+.video-player {
+  margin-top: 20px;
+  background: #000;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.video-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 15px;
+  background: #222;
+}
+
+.video-header h3 {
+  margin: 0;
+  color: white;
+  font-size: 1rem;
+}
+
+.close-player {
+  background: none;
+  border: none;
+  color: white;
+  font-size: 24px;
+  cursor: pointer;
+  padding: 0;
+  line-height: 1;
+}
+
+.close-player:hover {
+  color: #e74c3c;
+}
+
+.video-element {
+  width: 100%;
+  display: block;
+}
+</style>

package/examples/vue-jobs/src/views/Jobs.vue

@@ -0,0 +1,297 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { listJobs, getCurrentUser, deleteJob, type Job, type EenError, type ListJobsParams, type JobState } from 'een-api-toolkit'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+// Reactive state
+const jobs = ref<Job[]>([])
+const loading = ref(false)
+const error = ref<EenError | null>(null)
+const nextPageToken = ref<string | undefined>(undefined)
+const currentUserId = ref<string | null>(null)
+const deletingId = ref<string | null>(null)
+
+const hasNextPage = computed(() => !!nextPageToken.value)
+
+// Filter state
+const selectedStates = ref<JobState[]>([])
+const stateOptions: { value: JobState; label: string }[] = [
+  { value: 'pending', label: 'Pending' },
+  { value: 'started', label: 'Started' },
+  { value: 'success', label: 'Success' },
+  { value: 'failure', label: 'Failure' },
+  { value: 'revoked', label: 'Revoked' }
+]
+
+const params = ref<ListJobsParams>({ pageSize: 20 })
+
+async function fetchJobs(fetchParams?: ListJobsParams, append = false) {
+  loading.value = true
+  error.value = null
+
+  // Get current user ID if not already fetched
+  if (!currentUserId.value) {
+    const userResult = await getCurrentUser()
+    if (userResult.error) {
+      error.value = userResult.error
+      loading.value = false
+      return { error: userResult.error, data: null }
+    }
+    currentUserId.value = userResult.data.id
+  }
+
+  const mergedParams: ListJobsParams = { ...params.value, ...fetchParams, userId: currentUserId.value }
+
+  // Add state filter if selected
+  if (selectedStates.value.length > 0) {
+    mergedParams.state__in = selectedStates.value
+  }
+
+  const result = await listJobs(mergedParams)
+
+  if (result.error) {
+    error.value = result.error
+    if (!append) {
+      jobs.value = []
+    }
+    nextPageToken.value = undefined
+  } else {
+    if (append) {
+      jobs.value = [...jobs.value, ...result.data.results]
+    } else {
+      jobs.value = result.data.results
+    }
+    nextPageToken.value = result.data.nextPageToken
+  }
+
+  loading.value = false
+  return result
+}
+
+function refresh() {
+  return fetchJobs()
+}
+
+async function fetchNextPage() {
+  if (!nextPageToken.value) return
+  return fetchJobs({ ...params.value, pageToken: nextPageToken.value }, true)
+}
+
+function viewJob(jobId: string) {
+  router.push(`/jobs/${jobId}`)
+}
+
+async function handleDelete(job: Job) {
+  const jobName = getJobName(job)
+  if (!confirm(`Are you sure you want to delete job "${jobName}"?`)) {
+    return
+  }
+
+  deletingId.value = job.id
+  const result = await deleteJob(job.id)
+
+  if (result.error) {
+    error.value = result.error
+  } else {
+    // Remove the job from the list
+    jobs.value = jobs.value.filter(j => j.id !== job.id)
+  }
+
+  deletingId.value = null
+}
+
+function formatDate(timestamp: string) {
+  return new Date(timestamp).toLocaleString()
+}
+
+function getStateBadgeClass(state: JobState) {
+  return `badge badge-${state}`
+}
+
+function getJobName(job: Job) {
+  return job.arguments?.originalRequest?.name || job.id
+}
+
+onMounted(() => {
+  fetchJobs()
+})
+</script>
+
+<template>
+  <div class="jobs">
+    <div class="header">
+      <h2>Jobs</h2>
+      <button @click="refresh" :disabled="loading">
+        {{ loading ? 'Loading...' : 'Refresh' }}
+      </button>
+    </div>
+
+    <div class="filters">
+      <label>Filter by state:</label>
+      <div class="state-checkboxes">
+        <label v-for="option in stateOptions" :key="option.value" class="checkbox-label">
+          <input
+            type="checkbox"
+            :value="option.value"
+            v-model="selectedStates"
+            @change="refresh"
+          />
+          {{ option.label }}
+        </label>
+      </div>
+    </div>
+
+    <div v-if="loading && jobs.length === 0" class="loading">
+      Loading jobs...
+    </div>
+
+    <div v-else-if="error" class="error">
+      Error: {{ error.message }}
+    </div>
+
+    <div v-else>
+      <table v-if="jobs.length > 0">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Type</th>
+            <th>State</th>
+            <th>Progress</th>
+            <th>Created</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="job in jobs" :key="job.id">
+            <td>{{ getJobName(job) }}</td>
+            <td>{{ job.type }}</td>
+            <td>
+              <span :class="getStateBadgeClass(job.state)">
+                {{ job.state }}
+              </span>
+            </td>
+            <td>
+              <span v-if="job.state === 'started'">{{ Math.round((job.progress || 0) * 100) }}%</span>
+              <span v-else-if="job.state === 'success'">Complete</span>
+              <span v-else-if="job.state === 'failure'" class="error-text">Failed</span>
+              <span v-else>-</span>
+            </td>
+            <td>{{ formatDate(job.createTimestamp) }}</td>
+            <td class="actions">
+              <button class="btn-small" @click="viewJob(job.id)" :disabled="deletingId === job.id">View</button>
+              <button
+                class="btn-small btn-danger"
+                @click="handleDelete(job)"
+                :disabled="deletingId === job.id"
+              >
+                {{ deletingId === job.id ? 'Deleting...' : 'Delete' }}
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <p v-else>No jobs found.</p>
+
+      <div v-if="hasNextPage" class="pagination">
+        <button @click="fetchNextPage" :disabled="loading">
+          {{ loading ? 'Loading...' : 'Load More' }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.jobs {
+  width: 80vw;
+  min-width: 900px;
+  margin: 0 auto;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.filters {
+  margin-bottom: 20px;
+  padding: 15px;
+  background: #f5f5f5;
+  border-radius: 8px;
+}
+
+.filters label {
+  font-weight: 500;
+  margin-right: 10px;
+}
+
+.state-checkboxes {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+  margin-top: 10px;
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-weight: normal;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+th,
+td {
+  padding: 12px;
+  text-align: left;
+  border-bottom: 1px solid #eee;
+}
+
+th {
+  background: #f5f5f5;
+  font-weight: 600;
+}
+
+.actions {
+  display: flex;
+  gap: 8px;
+}
+
+.btn-small {
+  padding: 5px 10px;
+  font-size: 0.85rem;
+}
+
+.btn-danger {
+  background-color: #e74c3c;
+  color: white;
+  border: none;
+}
+
+.btn-danger:hover:not(:disabled) {
+  background-color: #c0392b;
+}
+
+.btn-danger:disabled {
+  background-color: #f5b7b1;
+  cursor: not-allowed;
+}
+
+.error-text {
+  color: #e74c3c;
+}
+
+.pagination {
+  margin-top: 20px;
+  text-align: center;
+}
+</style>

package/examples/vue-jobs/src/views/Login.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { getAuthUrl } from 'een-api-toolkit'
+
+function login() {
+  // Redirect to EEN OAuth login
+  window.location.href = getAuthUrl()
+}
+</script>
+
+<template>
+  <div class="login">
+    <h2 data-testid="login-title">Login</h2>
+    <p>Click the button below to login with your Eagle Eye Networks account.</p>
+    <button data-testid="login-button" @click="login">Login with Eagle Eye Networks</button>
+  </div>
+</template>
+
+<style scoped>
+.login {
+  text-align: center;
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+h2 {
+  margin-bottom: 20px;
+}
+
+p {
+  margin-bottom: 20px;
+  color: #666;
+}
+</style>