Device Management Documentation

File: src/pages/private/admin/devices/index.svelte

Overview

This component provides a comprehensive interface for managing Headset devices within a tenant environment. It supports viewing, adding, editing, and deleting devices, with additional functionality for bulk operations and device status monitoring.

Module Script (API Operations)

Interfaces

export interface ITenantDevice {
  id: number;
  deviceId: string;
  name: string;
  deviceType: string;
  tenant: {
    id: number;
    name: string;
  };
  notes: string;
}

interface QueryResult {
  registeredDevices: {
    nodes: ITenantDevice[];
  };
  myDevices: {
    data: any;
  };
}

interface ApiResponse {
  success: boolean;
  message: string;
  data: ITenantDevice[];
  online?: any[];
}

Core Functions

// Fetch all tenant devices with online status
export async function getTenantDeviceIds(): Promise<ApiResponse> {
  // GraphQL query implementation
}

// Generate QR code for new device registration
export async function generateDeviceQrCode(name: string, notes: string) {
  // Mutation implementation
}

Component Script

State Management

let busy = true; // Loading state for initial data fetch
let devicesData: ITenantDevice[] = []; // List of devices
let onlineDevices = {}; // Map of online device IDs
let showAddModal = false; // Controls add device modal visibility
let qrCodeUrl = ""; // Generated QR code URL
let regRef = ""; // Registration reference code
let loading = false; // Loading state for operations
let setEdit = false; // Edit mode flag
let showDeleteModal = false; // Delete confirmation modal
let showBulkAddModal = false; // Bulk add modal
let activeDeviceData: ITenantDevice | undefined; // Currently active device

Core Methods

// Initialize edit mode for a device
function initEdit(role: ITenantDevice) { ... }

// Initialize delete confirmation
function initDelete(role: ITenantDevice) { ... }

// Handle device addition/editing
async function handleDeviceAddition(event: CustomEvent) { ... }

// Delete a device
async function doDelete() { ... }

// Refresh device list
async function refresh() { ... }

// Handle successful device registration
async function handleDeviceAdded(event: CustomEvent) { ... }

UI Structure

Main Layout

<div class="min-w-full px-4 sm:px-6 lg:px-8">
  <!-- Header with action buttons -->
  <div class="mb-2 sm:flex sm:items-center">
    <!-- Title and action buttons -->
  </div>

  <!-- Device table -->
  <div class="pt-4 flex flex-col sm:border-t sm:border-gray-200">
    {#if busy}
      <!-- Loading spinner -->
    {:else if !devicesData.length}
      <!-- Empty state -->
    {:else}
      <!-- Device table -->
      <table class="min-w-full divide-y divide-gray-300">
        <!-- Table headers and rows -->
      </table>
    {/if}
  </div>
</div>

Modal Components

1. Add/Edit Device Modal:

   <NewModal size={setEdit ? "md" : "lg"} ...>
     <Form ... />
   </NewModal>

2. Bulk Add Modal:

   <NewModal size="lg" ...>
     <BulkDevice ... />
   </NewModal>

3. Delete Confirmation Modal:

   <Alert ...>
     <p>Are you sure you want to delete this device?</p>
   </Alert>

Key Features

1. Device Management:

   • View all registered devices with online/offline status
   • Add new devices (single or bulk)
   • Edit existing device details
   • Delete devices

2. Device Registration:

   • QR code generation for new devices
   • Registration reference tracking
   • Automatic refresh after successful registration

3. User Experience:

   • Loading states for all operations
   • Empty state handling
   • Responsive table layout
   • Confirmation dialogs for destructive actions

4. Security:

   • Admin-only access (redirects non-admins)
   • Protected operations with error handling

Usage Patterns

Initialization

onMount(async () => {
  if (!$userInfo?.isAdmin) {
    $goto("/private/dashboard");
    return;
  }
  await refresh();
});

Adding a Device

1. Click "Add Single Device" or "Add Bulk Device"
2. Fill in device details
3. Submit form to generate QR code
4. Device appears in list after registration

Editing a Device

1. Click edit icon on device row
2. Modify details in modal
3. Submit to save changes

Deleting a Device

1. Click delete icon on device row
2. Confirm deletion in modal
3. Device is removed from list

Dependencies

• svelte-loading-spinners for loading animation
• @steeze-ui icons
• Custom form components (Form, BulkDevice)
• Custom modal components (NewModal, Alert)
• GraphQL query utilities
• Keycloak integration for auth

Error Handling

• Catches and displays API errors
• Shows error states for failed operations
• Provides retry mechanisms
• Validates inputs before submission

Accessibility Features

• Semantic HTML structure
• Clear visual hierarchy
• Loading states for async operations
• Keyboard-navigable interface
• ARIA-compliant modals

Related Components

• Simple Alert
• Single Device
• Bulk Device