Fork: 0
root / smart-home-server
Transfer to URL with SHA Find file
Newer
Older
smart-home-server / webclient-vue / docs / current-client-map.md
@Eugene Sukhodolskiy Eugene Sukhodolskiy 8 hours ago 2 KB Document Vue client migration plan
Raw Blame History

Current Client Map

Reference implementation: webclient/.

Entry Points

  • webclient/index.php - page shell.
  • webclient/ui.php - UI component preview/demo shell.
  • webclient/src/js/index.js - initializes globals, API client, HUD, routing.
  • webclient/src/js/routes.js - hash routes.
  • webclient/src/js/sh/SmartHomeApi.js - callback-style API client.
  • webclient/proxy.php - local proxy to backend API.

Build

  • npm start runs Gulp.
  • SCSS entry: webclient/src/scss/main.scss.
  • JS entry: webclient/src/js/index.js.
  • JS output: webclient/dist/js/main.js.
  • CSS output: webclient/dist/css/main.css.

Global Runtime Objects

The current client relies on global mutable objects:

  • DataProvider
  • FavoritesStore
  • Toasts
  • Helper
  • Modals
  • confirmPopup
  • advancedSelect
  • editableString
  • Screens

The new Vue client should replace these with explicit imports, stores, composables, and component-local state.

Routes

Route Current Module Purpose
/ routes.js Redirects to /areas/favorites.
/devices devices-list-screen.js Registered devices list with live state.
/devices/scanning devices-scanning-screen.js Network scan and setup entry point.
/scripts/scopes scripts-scopes-screen.js Control script scopes list and enable/disable.
/scripts/regular scripts-regular-screen.js Regular scripts list and enable/disable.
/scripts/actions scripts-actions-screen.js Action scripts grid and run buttons.
/areas/tree areas-tree-screen.js Areas tree with details/devices/actions/favorites.
/areas/favorites areas-favorites-screen.js Favorite areas dashboard.
fallback routes.js 404 screen.

Devices:

  • Devices
  • Scanning

Scripts:

  • Scopes
  • Actions
  • Regular

Areas:

  • Favorites
  • Tree

Important Existing Behavior

  • Device state is loaded per row through GET /api/v1/devices/id/{id}/status.
  • Offline/lost devices should not block the whole list.
  • Action script cards run scripts on click and show toast result.
  • Area tree supports local favorite toggling through FavoritesStore.
  • Area device modal can reboot individual devices and reboot all devices in an area.
  • Screen reload is often done through Screens.reinit() after mutations.

Known Current-Client Limitations

  • Callback-based API layer.
  • Manual DOM rendering and event binding.
  • Many global dependencies.
  • Weak type guarantees for backend responses.
  • Some modals duplicate table/device-state behavior.
  • API errors are mostly surfaced as generic UI errors.