Fluxui Devices Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require christhompsontldr/fluxui-devices
   npm install @fluxui/devices
   

   Publish assets and config:

   php artisan vendor:publish --provider="FluxUI\Devices\DevicesServiceProvider" --tag="fluxui-devices-config"
   php artisan vendor:publish --provider="FluxUI\Devices\DevicesServiceProvider" --tag="fluxui-devices-assets"
   

2. First Use Case Register the package in resources/js/app.js:

   import FluxUIDevices from '@fluxui/devices';
   FluxUIDevices.init();
   

   Add the Blade directive in a view (e.g., resources/views/layouts/app.blade.php):

   @fluxui_devices
   

3. Key Configuration Update .env with your Diego-Ninja Devices API endpoint:

   DEVICES_API_URL=http://your-app.test/api/devices
   

Implementation Patterns

Core Workflows

1. Device Management

   • CRUD Operations: Use the @fluxui_devices directive in Blade to auto-generate a dashboard for devices, sessions, and connections.
   • Custom Actions: Extend via Laravel events (e.g., DeviceCreated, SessionTerminated) to trigger UI updates:

     use FluxUI\Devices\Events\DeviceCreated;
     event(new DeviceCreated($device));
     

2. Session Handling

   • Real-Time Updates: Leverage Laravel Echo/Pusher to sync session states:

     import Echo from 'laravel-echo';
     const echo = new Echo({ broadcaster: 'pusher' });
     echo.channel('devices.sessions')
         .listen('DeviceSessionUpdated', (data) => {
             FluxUIDevices.updateSession(data);
         });
     

3. Integration with Existing UI

   • Modular Components: Use @fluxui_devices::device-card or @fluxui_devices::session-list to embed specific widgets:

     @fluxui_devices::device-card({{ $device }})
     

4. API-Driven Customization

   • Override default API endpoints in config/fluxui-devices.php:

     'api' => [
         'devices' => 'api/custom/devices',
         'sessions' => 'api/custom/sessions',
     ],
     

Gotchas and Tips

Pitfalls

1. Asset Conflicts

   • Ensure @fluxui/devices is imported after Vue/Laravel Mix in app.js to avoid duplicate IDs or hooks.
   • Fix: Wrap initialization in a ready callback:

     document.addEventListener('DOMContentLoaded', () => {
         FluxUIDevices.init();
     });
     

2. CSRF Token Mismatch

   • If using SPA routes, ensure the X-CSRF-TOKEN header is included in API requests. FluxUI auto-injects it for Blade views but not for direct AJAX calls.
   • Fix: Manually set the token in your frontend requests:

     axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').content;
     

3. Real-Time Lag

   • Pusher/Echo delays may occur if the DEVICES_API_URL points to a slow endpoint.
   • Tip: Use Laravel’s broadcastOn to filter events:

     broadcast(new DeviceSessionUpdated($session))->toOthers();
     

Debugging

• Disable UI Cache: Add ?fluxui=debug to your URL to bypass Vue’s runtime caching.
• Log API Calls: Enable Laravel’s API logging in config/fluxui-devices.php:

  'debug' => [
      'log_api_calls' => true,
  ],
  

Extension Points

1. Custom Fields Add extra device attributes via a trait:

   use FluxUI\Devices\Concerns\HasFluxUIFields;
   class CustomDevice extends Device {
       use HasFluxUIFields;
       public function fluxUIFields(): array {
           return [
               'custom_field' => 'Custom Attribute',
           ];
       }
   }
   

2. Theming Override SCSS variables in resources/sass/fluxui/_devices.scss:

   $fluxui-devices-primary: #2d3748;
   

3. Localization Extend translations in resources/lang/en/fluxui-devices.php:

   return [
       'device' => [
           'attributes' => [
               'name' => 'Device Name (Custom)',
           ],
       ],
   ];