PiPiece UI

Appearance

System View ​

Overview ​

The System View is a container view that organizes system administration features. It uses nested routing to display different system management interfaces.

Features ​

  • Container for system administration
  • Nested routing architecture
  • Clean layout without navigation bar
  • Three child views for different functions

System View Screenshot =400x240

The System View is accessible at /system with child routes:

  • /system - System Controls (default)
  • /system/config - Configuration Editor
  • /system/update - System Update

Architecture ​

Uses Vue Router's nested routing:

  • Parent view contains <RouterView />
  • Child views rendered in main content area
  • Navigation handled by child views
  • No persistent navigation bar

Layout ​

  • Simple flex container
  • Full height and width
  • Minimal styling
  • Children control their own layout

Child Views ​

System Controls (/system) ​

Main system operations dashboard with action buttons.

System Config (/system/config) ​

Configuration file editor for environment variables.

System Update (/system/update) ​

System update interface with streaming output.

Technical Details ​

  • Uses Vue 3 Composition API
  • RouterView for child rendering
  • Responsive design
  • Dark mode support