een-api-toolkit 0.0.18 → 0.1.4

package/examples/vue-bridges/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "een-api-toolkit-bridges-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-bridges/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-bridges/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 Bridges Example</h1>
+      <nav>
+        <router-link to="/" data-testid="nav-home">Home</router-link>
+        <router-link v-if="isAuthenticated" to="/bridges" data-testid="nav-bridges">Bridges</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: 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-bridges/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 Bridges from '../views/Bridges.vue'
+import BridgeDetail from '../views/BridgeDetail.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: '/bridges',
+      name: 'bridges',
+      component: Bridges,
+      meta: { requiresAuth: true }
+    },
+    {
+      path: '/bridges/:id',
+      name: 'bridge-detail',
+      component: BridgeDetail,
+      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-bridges/src/views/BridgeDetail.vue

@@ -0,0 +1,279 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { getBridge, type Bridge, type BridgeStatus, type EenError } from 'een-api-toolkit'
+
+const route = useRoute()
+const router = useRouter()
+
+const bridge = ref<Bridge | null>(null)
+const loading = ref(false)
+const error = ref<EenError | null>(null)
+
+async function fetchBridge() {
+  const bridgeId = route.params.id as string
+  if (!bridgeId) {
+    error.value = { code: 'VALIDATION_ERROR', message: 'Bridge ID is required' }
+    return
+  }
+
+  loading.value = true
+  error.value = null
+
+  const result = await getBridge(bridgeId, {
+    include: ['deviceInfo', 'networkInfo', 'status', 'devicePosition']
+  })
+
+  if (result.error) {
+    error.value = result.error
+    bridge.value = null
+  } else {
+    bridge.value = result.data
+  }
+
+  loading.value = false
+}
+
+// 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'
+  }
+}
+
+function goBack() {
+  router.push('/bridges')
+}
+
+onMounted(() => {
+  fetchBridge()
+})
+</script>
+
+<template>
+  <div class="bridge-detail">
+    <button @click="goBack" class="back-button">&larr; Back to Bridges</button>
+
+    <div v-if="loading" class="loading">
+      Loading bridge details...
+    </div>
+
+    <div v-else-if="error" class="error">
+      <h2>Error</h2>
+      <p>{{ error.message }}</p>
+      <button @click="goBack">Back to Bridges</button>
+    </div>
+
+    <div v-else-if="bridge" class="bridge-info">
+      <div class="bridge-header">
+        <h2>{{ bridge.name }}</h2>
+        <span :class="['status-badge', getStatusClass(bridge.status)]">
+          {{ getStatusString(bridge.status) || 'Unknown' }}
+        </span>
+      </div>
+
+      <div class="info-section">
+        <h3>Basic Information</h3>
+        <dl>
+          <dt>ID</dt>
+          <dd>{{ bridge.id }}</dd>
+
+          <dt>Account ID</dt>
+          <dd>{{ bridge.accountId }}</dd>
+
+          <dt v-if="bridge.locationId">Location ID</dt>
+          <dd v-if="bridge.locationId">{{ bridge.locationId }}</dd>
+
+          <dt v-if="bridge.timezone">Timezone</dt>
+          <dd v-if="bridge.timezone">{{ bridge.timezone }}</dd>
+
+          <dt v-if="bridge.tags?.length">Tags</dt>
+          <dd v-if="bridge.tags?.length">{{ bridge.tags.join(', ') }}</dd>
+        </dl>
+      </div>
+
+      <div v-if="bridge.deviceInfo" class="info-section">
+        <h3>Device Information</h3>
+        <dl>
+          <dt v-if="bridge.deviceInfo.make">Make</dt>
+          <dd v-if="bridge.deviceInfo.make">{{ bridge.deviceInfo.make }}</dd>
+
+          <dt v-if="bridge.deviceInfo.model">Model</dt>
+          <dd v-if="bridge.deviceInfo.model">{{ bridge.deviceInfo.model }}</dd>
+
+          <dt v-if="bridge.deviceInfo.serialNumber">Serial Number</dt>
+          <dd v-if="bridge.deviceInfo.serialNumber">{{ bridge.deviceInfo.serialNumber }}</dd>
+
+          <dt v-if="bridge.deviceInfo.firmwareVersion">Firmware Version</dt>
+          <dd v-if="bridge.deviceInfo.firmwareVersion">{{ bridge.deviceInfo.firmwareVersion }}</dd>
+
+          <dt v-if="bridge.deviceInfo.hardwareVersion">Hardware Version</dt>
+          <dd v-if="bridge.deviceInfo.hardwareVersion">{{ bridge.deviceInfo.hardwareVersion }}</dd>
+        </dl>
+      </div>
+
+      <div v-if="bridge.networkInfo" class="info-section">
+        <h3>Network Information</h3>
+        <dl>
+          <dt v-if="bridge.networkInfo.localIpAddress">Local IP</dt>
+          <dd v-if="bridge.networkInfo.localIpAddress">{{ bridge.networkInfo.localIpAddress }}</dd>
+
+          <dt v-if="bridge.networkInfo.publicIpAddress">Public IP</dt>
+          <dd v-if="bridge.networkInfo.publicIpAddress">{{ bridge.networkInfo.publicIpAddress }}</dd>
+
+          <dt v-if="bridge.networkInfo.macAddress">MAC Address</dt>
+          <dd v-if="bridge.networkInfo.macAddress">{{ bridge.networkInfo.macAddress }}</dd>
+
+          <dt v-if="bridge.networkInfo.gateway">Gateway</dt>
+          <dd v-if="bridge.networkInfo.gateway">{{ bridge.networkInfo.gateway }}</dd>
+
+          <dt v-if="bridge.networkInfo.subnetMask">Subnet Mask</dt>
+          <dd v-if="bridge.networkInfo.subnetMask">{{ bridge.networkInfo.subnetMask }}</dd>
+        </dl>
+      </div>
+
+      <div v-if="bridge.devicePosition" class="info-section">
+        <h3>Location</h3>
+        <dl>
+          <dt v-if="bridge.devicePosition.latitude !== undefined">Latitude</dt>
+          <dd v-if="bridge.devicePosition.latitude !== undefined">{{ bridge.devicePosition.latitude }}</dd>
+
+          <dt v-if="bridge.devicePosition.longitude !== undefined">Longitude</dt>
+          <dd v-if="bridge.devicePosition.longitude !== undefined">{{ bridge.devicePosition.longitude }}</dd>
+
+          <dt v-if="bridge.devicePosition.floor !== undefined">Floor</dt>
+          <dd v-if="bridge.devicePosition.floor !== undefined">{{ bridge.devicePosition.floor }}</dd>
+        </dl>
+      </div>
+
+      <div class="info-section">
+        <h3>Timestamps</h3>
+        <dl>
+          <dt v-if="bridge.createdAt">Created</dt>
+          <dd v-if="bridge.createdAt">{{ new Date(bridge.createdAt).toLocaleString() }}</dd>
+
+          <dt v-if="bridge.updatedAt">Updated</dt>
+          <dd v-if="bridge.updatedAt">{{ new Date(bridge.updatedAt).toLocaleString() }}</dd>
+        </dl>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.bridge-detail {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.back-button {
+  margin-bottom: 20px;
+  background: #666;
+}
+
+.back-button:hover {
+  background: #555;
+}
+
+.bridge-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 30px;
+}
+
+.bridge-header h2 {
+  margin: 0;
+}
+
+.status-badge {
+  padding: 6px 12px;
+  border-radius: 4px;
+  font-size: 0.85rem;
+  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;
+}
+
+.info-section {
+  background: #f9f9f9;
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+.info-section h3 {
+  margin-top: 0;
+  margin-bottom: 15px;
+  font-size: 1.1rem;
+  color: #333;
+  border-bottom: 1px solid #ddd;
+  padding-bottom: 10px;
+}
+
+dl {
+  display: grid;
+  grid-template-columns: 150px 1fr;
+  gap: 10px;
+  margin: 0;
+}
+
+dt {
+  font-weight: 600;
+  color: #555;
+}
+
+dd {
+  margin: 0;
+  color: #333;
+  word-break: break-all;
+}
+
+.error {
+  text-align: center;
+  padding: 40px;
+}
+
+.error h2 {
+  color: #e74c3c;
+  margin-bottom: 10px;
+}
+
+.error p {
+  margin-bottom: 20px;
+}
+</style>