een-api-toolkit 0.0.18 → 0.1.4

package/examples/vue-bridges/src/views/Bridges.vue

@@ -0,0 +1,297 @@
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from 'vue'
+import { getBridges, type Bridge, type BridgeStatus, type EenError, type ListBridgesParams } from 'een-api-toolkit'
+
+// Status filter
+const statusFilter = ref<BridgeStatus | ''>('')
+
+// Reactive state
+const bridges = ref<Bridge[]>([])
+const loading = ref(false)
+const error = ref<EenError | null>(null)
+const nextPageToken = ref<string | undefined>(undefined)
+const totalSize = ref<number | undefined>(undefined)
+
+const hasNextPage = computed(() => !!nextPageToken.value)
+
+const params = ref<ListBridgesParams>({
+  pageSize: 20,
+  include: ['deviceInfo', 'status', 'networkInfo']
+})
+
+async function fetchBridges(fetchParams?: ListBridgesParams, append = false) {
+  loading.value = true
+  error.value = null
+
+  const mergedParams = { ...params.value, ...fetchParams }
+  const result = await getBridges(mergedParams)
+
+  if (result.error) {
+    error.value = result.error
+    if (!append) {
+      bridges.value = []
+      totalSize.value = undefined
+    }
+    nextPageToken.value = undefined
+  } else {
+    if (append) {
+      bridges.value = [...bridges.value, ...result.data.results]
+    } else {
+      bridges.value = result.data.results
+    }
+    nextPageToken.value = result.data.nextPageToken
+    totalSize.value = result.data.totalSize
+  }
+
+  loading.value = false
+  return result
+}
+
+function refresh() {
+  return fetchBridges()
+}
+
+async function fetchNextPage() {
+  if (!nextPageToken.value) return
+  return fetchBridges({ ...params.value, pageToken: nextPageToken.value }, true)
+}
+
+function setParams(newParams: ListBridgesParams) {
+  params.value = newParams
+}
+
+// Watch for status filter changes
+watch(statusFilter, async (newStatus) => {
+  if (newStatus) {
+    setParams({
+      pageSize: 20,
+      include: ['deviceInfo', 'status', 'networkInfo'],
+      status__in: [newStatus]
+    })
+  } else {
+    setParams({
+      pageSize: 20,
+      include: ['deviceInfo', 'status', 'networkInfo']
+    })
+  }
+  await fetchBridges()
+})
+
+// Helper to extract status string from the union type
+function getStatusString(status?: BridgeStatus | { connectionStatus?: BridgeStatus }): BridgeStatus | undefined {
+  if (!status) return undefined
+  if (typeof status === 'string') return status
+  return status.connectionStatus
+}
+
+// Get status badge class
+function getStatusClass(status?: BridgeStatus | { connectionStatus?: BridgeStatus }): string {
+  const statusStr = getStatusString(status)
+  switch (statusStr) {
+    case 'online':
+      return 'status-online'
+    case 'offline':
+      return 'status-offline'
+    case 'error':
+      return 'status-error'
+    default:
+      return 'status-unknown'
+  }
+}
+
+onMounted(() => {
+  fetchBridges()
+})
+</script>
+
+<template>
+  <div class="bridges">
+    <div class="header">
+      <h2>Bridges</h2>
+      <div class="controls">
+        <select v-model="statusFilter" class="status-filter">
+          <option value="">All Statuses</option>
+          <option value="online">Online</option>
+          <option value="offline">Offline</option>
+          <option value="error">Error</option>
+          <option value="idle">Idle</option>
+        </select>
+        <button @click="refresh" :disabled="loading">
+          {{ loading ? 'Loading...' : 'Refresh' }}
+        </button>
+      </div>
+    </div>
+
+    <div v-if="totalSize !== undefined" class="total-count">
+      Total: {{ totalSize }} bridge{{ totalSize !== 1 ? 's' : '' }}
+    </div>
+
+    <div v-if="loading && bridges.length === 0" class="loading">
+      Loading bridges...
+    </div>
+
+    <div v-else-if="error" class="error">
+      Error: {{ error.message }}
+    </div>
+
+    <div v-else>
+      <div v-if="bridges.length > 0" class="bridge-grid">
+        <router-link
+          v-for="bridge in bridges"
+          :key="bridge.id"
+          :to="`/bridges/${bridge.id}`"
+          class="bridge-card"
+        >
+          <div class="bridge-header">
+            <h3>{{ bridge.name }}</h3>
+            <span :class="['status-badge', getStatusClass(bridge.status)]">
+              {{ getStatusString(bridge.status) || 'Unknown' }}
+            </span>
+          </div>
+          <div class="bridge-details">
+            <p v-if="bridge.deviceInfo?.make || bridge.deviceInfo?.model">
+              <strong>Device:</strong>
+              {{ bridge.deviceInfo?.make || '' }} {{ bridge.deviceInfo?.model || '' }}
+            </p>
+            <p v-if="bridge.networkInfo?.localIpAddress">
+              <strong>IP:</strong> {{ bridge.networkInfo.localIpAddress }}
+            </p>
+            <p v-if="bridge.locationId">
+              <strong>Location:</strong> {{ bridge.locationId }}
+            </p>
+            <p v-if="bridge.tags && bridge.tags.length > 0">
+              <strong>Tags:</strong> {{ bridge.tags.join(', ') }}
+            </p>
+          </div>
+        </router-link>
+      </div>
+
+      <p v-else class="no-bridges">
+        No bridges found{{ statusFilter ? ' with selected filter' : '' }}.
+      </p>
+
+      <div v-if="hasNextPage" class="pagination">
+        <button @click="fetchNextPage" :disabled="loading">
+          {{ loading ? 'Loading...' : 'Load More' }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.bridges {
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.controls {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.status-filter {
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 1rem;
+}
+
+.total-count {
+  color: #666;
+  margin-bottom: 20px;
+}
+
+.bridge-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 20px;
+}
+
+.bridge-card {
+  background: #fff;
+  border: 1px solid #eee;
+  border-radius: 8px;
+  padding: 20px;
+  text-decoration: none;
+  color: inherit;
+  transition: box-shadow 0.2s, border-color 0.2s;
+}
+
+.bridge-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  border-color: #42b883;
+}
+
+.bridge-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 15px;
+}
+
+.bridge-header h3 {
+  margin: 0;
+  font-size: 1.1rem;
+  flex: 1;
+  margin-right: 10px;
+}
+
+.status-badge {
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.status-online {
+  background: #d4edda;
+  color: #155724;
+}
+
+.status-offline {
+  background: #f8d7da;
+  color: #721c24;
+}
+
+.status-error {
+  background: #fff3cd;
+  color: #856404;
+}
+
+.status-unknown {
+  background: #e2e3e5;
+  color: #383d41;
+}
+
+.bridge-details p {
+  margin: 5px 0;
+  font-size: 0.9rem;
+  color: #666;
+}
+
+.bridge-details strong {
+  color: #333;
+}
+
+.no-bridges {
+  text-align: center;
+  color: #666;
+  padding: 40px;
+}
+
+.pagination {
+  margin-top: 30px;
+  text-align: center;
+}
+</style>

package/examples/vue-bridges/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 bridges
+  router.push('/bridges')
+})
+</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-bridges/src/views/Home.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { useAuthStore, getCurrentUser, type UserProfile, type EenError } from 'een-api-toolkit'
+import { computed, ref, onMounted } from 'vue'
+
+const authStore = useAuthStore()
+const isAuthenticated = computed(() => authStore.isAuthenticated)
+
+// Reactive state for current user
+const user = ref<UserProfile | null>(null)
+const loading = ref(false)
+const error = ref<EenError | null>(null)
+
+async function fetchUser() {
+  if (!isAuthenticated.value) return
+
+  loading.value = true
+  error.value = null
+
+  const result = await getCurrentUser()
+  if (result.error) {
+    error.value = result.error
+    user.value = null
+  } else {
+    user.value = result.data
+  }
+
+  loading.value = false
+}
+
+onMounted(() => {
+  if (isAuthenticated.value) {
+    fetchUser()
+  }
+})
+</script>
+
+<template>
+  <div class="home">
+    <h2>Welcome to the EEN Bridges Example</h2>
+
+    <div v-if="isAuthenticated" data-testid="authenticated">
+      <div v-if="loading" class="loading">Loading user info...</div>
+      <div v-else-if="error" class="error">{{ error.message }}</div>
+      <div v-else-if="user" class="user-info" data-testid="user-info">
+        <p>Logged in as: <strong>{{ user.firstName }} {{ user.lastName }}</strong></p>
+        <p>Email: {{ user.email }}</p>
+      </div>
+
+      <div class="actions">
+        <router-link to="/bridges">
+          <button data-testid="view-bridges-button">View Bridges</button>
+        </router-link>
+      </div>
+    </div>
+
+    <div v-else class="login-prompt" data-testid="not-authenticated">
+      <p>Please log in to view your bridges.</p>
+      <router-link to="/login">
+        <button data-testid="login-button">Login</button>
+      </router-link>
+    </div>
+
+    <div class="description">
+      <h3>About This Example</h3>
+      <p>
+        This example demonstrates how to use the <code>getBridges</code> and
+        <code>getBridge</code> functions from the EEN API Toolkit to display
+        and manage bridges from the Eagle Eye Networks platform.
+      </p>
+      <h4>Features</h4>
+      <ul>
+        <li>List bridges with pagination</li>
+        <li>Filter bridges by status</li>
+        <li>View bridge details</li>
+        <li>Display device and network information</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.home {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+h2 {
+  margin-bottom: 20px;
+}
+
+.user-info {
+  background: #f5f5f5;
+  padding: 15px;
+  border-radius: 4px;
+  margin-bottom: 20px;
+}
+
+.user-info p {
+  margin: 5px 0;
+}
+
+.actions {
+  margin: 20px 0;
+}
+
+.login-prompt {
+  text-align: center;
+  padding: 20px;
+  background: #f5f5f5;
+  border-radius: 4px;
+  margin-bottom: 20px;
+}
+
+.login-prompt p {
+  margin-bottom: 15px;
+}
+
+.description {
+  margin-top: 40px;
+  padding-top: 20px;
+  border-top: 1px solid #eee;
+}
+
+.description h3 {
+  margin-bottom: 10px;
+}
+
+.description h4 {
+  margin-top: 15px;
+  margin-bottom: 10px;
+}
+
+.description p {
+  color: #666;
+  margin-bottom: 15px;
+}
+
+.description ul {
+  list-style: disc;
+  padding-left: 20px;
+  color: #666;
+}
+
+.description code {
+  background: #f0f0f0;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 0.9em;
+}
+</style>

package/examples/vue-bridges/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>Login</h2>
+    <p>Click the button below to login with your Eagle Eye Networks account.</p>
+    <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>

package/examples/vue-bridges/src/views/Logout.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { revokeToken, useAuthStore } from 'een-api-toolkit'
+
+const router = useRouter()
+const authStore = useAuthStore()
+const error = ref<string | null>(null)
+const processing = ref(true)
+
+onMounted(async () => {
+  if (!authStore.isAuthenticated) {
+    // Already logged out
+    router.push('/')
+    return
+  }
+
+  const result = await revokeToken()
+
+  if (result.error) {
+    error.value = result.error.message
+    processing.value = false
+    return
+  }
+
+  // Success - redirect to home
+  router.push('/')
+})
+</script>
+
+<template>
+  <div class="logout">
+    <div v-if="processing" class="loading">
+      <h2>Logging out...</h2>
+      <p>Please wait while we complete the logout process.</p>
+    </div>
+
+    <div v-else-if="error" class="error-state">
+      <h2>Logout Failed</h2>
+      <p class="error">{{ error }}</p>
+      <router-link to="/">
+        <button>Return Home</button>
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.logout {
+  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-bridges/src/vite-env.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_PROXY_URL: string
+  readonly VITE_EEN_CLIENT_ID: string
+  readonly VITE_REDIRECT_URI?: string
+  readonly VITE_DEBUG?: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

package/examples/vue-cameras/e2e/app.spec.ts

@@ -53,8 +53,8 @@ test.describe('Cameras Example App', () => {
 
     // Check the about section
     await expect(page.locator('.description h3')).toContainText('About This Example')
-    await expect(page.locator('.description')).toContainText('useCameras')
-    await expect(page.locator('.description')).toContainText('useCamera')
+    await expect(page.locator('.description')).toContainText('getCameras')
+    await expect(page.locator('.description')).toContainText('getCamera')
   })
 
   test('should have correct navigation structure', async ({ page }) => {