Sweden Loading... India Loading... Architecture diagram PhoenixEMS UI - Architecture & Code StructureMain Application«Rectangle»Feature Modules«Rectangle»Index ModuleEdge ModuleLive DataLive WidgetsControllersHistory DataHistory ChartsSettingsApp ManagementUser ModuleChangelog ModuleShared Layer«Rectangle»Core ServicesData ModelsJSON-RPC LayerRequestsResponsesNotificationsShared UI ComponentsUtilitiesState ManagementInfrastructure«Rectangle»FrameworkMobile PlatformsBackend ServicesRouting Structure«Rectangle»AppComponentAppModulePlatformServiceCheckForUpdateServiceNavigationServiceServiceWebsocketUserServiceTranslateServiceLoginComponentOverViewComponentRegistrationComponentFilterComponentLoadingScreenComponentEdgeComponentLiveComponentLiveDataServiceEnergymonitorComponentDataServiceStorageComponentCommonConsumptionGeneralComponentProductionFlatComponentGridFlatComponentAutarchyFlatComponentSelfConsumptionFlatComponentWeatherComponentController_EvcsController_EvseController_PeakShavingController_EssController_HeatController_IoHistoryComponentHistoryDataServiceHistoryParentComponentProductionChartOverviewConsumptionChartOverviewGridChartOverviewStorageChartOverviewPeakShavingChartsSettingsComponentProfileComponentNetworkComponentSystemComponentSystemExecuteComponentSystemLogComponentAlertingComponentChannelsComponentInstallAppComponentSingleAppComponentComponentInstallComponentComponentUpdateComponentUserComponentThemeSelectionPopoverChangelogViewComponentChangelogComponentRouteServiceLoggerRouterEdgeWebSocket connection management- JSON-RPC communication- Authentication handling- Real-time data streamingAbstract Data Service- currentValue- getValues()- unsubscribeFromChannels()- refresh()EdgeConfigCurrentDataUser- currentData: BehaviorSubject- systemLog: Subject- config: EdgeConfig- role: Role- sendRequest()- subscribe()- getConfig()- components- factories- channelsJsonrpcRequestJsonrpcResponse- method- params- id- result- errorAuthenticateWithPasswordRequestAuthenticateWithTokenRequestGetEdgeRequestGetEdgesRequestSubscribeChannelsRequestEdgeRpcRequestComponentJsonApiRequestQueryHistoricTimeseriesEnergyRequestAuthenticateResponseGetEdgeResponseGetEdgesResponseGetEdgeConfigResponseQueryHistoricTimeseriesEnergyResponseCurrentDataNotificationEdgeConfigNotificationSystemLogNotificationEdgeRpcNotificationPickDateComponentPercentagebarComponentStatusSingleComponentFooterComponentHeaderComponentModalComponentFlatWidgetChartComponentAbstractFlatWidgetAbstractHistoryChartAbstractFormlyComponentAbstractModalUtilsDateUtilsArrayUtilsPromiseUtilsChannelAddressAppStateTrackerStatesNGRX-like state management- Tracks application state- WebSocket connection state- User authentication stateEnum:- WEBSOCKET_NOT_YET_CONNECTED- AUTHENTICATED- ONLINE- OFFLINEAngular20IonicFrameworkCapacitorNgxTranslateNgxFormlyChartJSAndroidiOSEdge DevicesUser DataTime Series DataOpenEMS Backend- WebSocket Server- REST API- Data PersistenceAppRoutingModuleRoutes:- / → /index- /login- /overview- /user- /changelog- /device/:edgeId → /device/:edgeId/live- /device/:edgeId/live- /device/:edgeId/history- /device/:edgeId/settingsService Layer Pattern- Centralized business logic- Edge management- WebSocket lifecycle- Translation servicesWebSocket Communication- JSON-RPC protocol- Real-time data streaming- Request/Response pattern- Notification handlingAbstract Data Service- Template Method Pattern- Live vs History data- Channel subscription- Data refresh logicWidget Architecture- Component-based UI- Reusable widgets- Modal interactions- Chart visualizationsState Management- Centralized state- Observable pattern- WebSocket state- User session statebootstrapsauthenticateget edgesusesmanageshasroutes tocontainscontainscontainsWebSocket connectionsubscribes to channelsqueries historysendsreceivesreceivesreceivesusesArchitecture PatternsFeature Module PatternService Layer PatternWebSocket CommunicationJSON-RPC ProtocolObservable Data StreamsComponent InheritanceDependency Injection Key TechnologiesAngular 20Ionic Framework 8Capacitor 7Chart.js 4RxJS 7TypeScriptPhoenixEMS UI - Architecture & Code StructureMain Application«Rectangle»Feature Modules«Rectangle»Index ModuleEdge ModuleLive DataLive WidgetsControllersHistory DataHistory ChartsSettingsApp ManagementUser ModuleChangelog ModuleShared Layer«Rectangle»Core ServicesData ModelsJSON-RPC LayerRequestsResponsesNotificationsShared UI ComponentsUtilitiesState ManagementInfrastructure«Rectangle»FrameworkMobile PlatformsBackend ServicesRouting Structure«Rectangle»AppComponentAppModulePlatformServiceCheckForUpdateServiceNavigationServiceServiceWebsocketUserServiceTranslateServiceLoginComponentOverViewComponentRegistrationComponentFilterComponentLoadingScreenComponentEdgeComponentLiveComponentLiveDataServiceEnergymonitorComponentDataServiceStorageComponentCommonConsumptionGeneralComponentProductionFlatComponentGridFlatComponentAutarchyFlatComponentSelfConsumptionFlatComponentWeatherComponentController_EvcsController_EvseController_PeakShavingController_EssController_HeatController_IoHistoryComponentHistoryDataServiceHistoryParentComponentProductionChartOverviewConsumptionChartOverviewGridChartOverviewStorageChartOverviewPeakShavingChartsSettingsComponentProfileComponentNetworkComponentSystemComponentSystemExecuteComponentSystemLogComponentAlertingComponentChannelsComponentInstallAppComponentSingleAppComponentComponentInstallComponentComponentUpdateComponentUserComponentThemeSelectionPopoverChangelogViewComponentChangelogComponentRouteServiceLoggerRouterEdgeWebSocket connection management- JSON-RPC communication- Authentication handling- Real-time data streamingAbstract Data Service- currentValue- getValues()- unsubscribeFromChannels()- refresh()EdgeConfigCurrentDataUser- currentData: BehaviorSubject- systemLog: Subject- config: EdgeConfig- role: Role- sendRequest()- subscribe()- getConfig()- components- factories- channelsJsonrpcRequestJsonrpcResponse- method- params- id- result- errorAuthenticateWithPasswordRequestAuthenticateWithTokenRequestGetEdgeRequestGetEdgesRequestSubscribeChannelsRequestEdgeRpcRequestComponentJsonApiRequestQueryHistoricTimeseriesEnergyRequestAuthenticateResponseGetEdgeResponseGetEdgesResponseGetEdgeConfigResponseQueryHistoricTimeseriesEnergyResponseCurrentDataNotificationEdgeConfigNotificationSystemLogNotificationEdgeRpcNotificationPickDateComponentPercentagebarComponentStatusSingleComponentFooterComponentHeaderComponentModalComponentFlatWidgetChartComponentAbstractFlatWidgetAbstractHistoryChartAbstractFormlyComponentAbstractModalUtilsDateUtilsArrayUtilsPromiseUtilsChannelAddressAppStateTrackerStatesNGRX-like state management- Tracks application state- WebSocket connection state- User authentication stateEnum:- WEBSOCKET_NOT_YET_CONNECTED- AUTHENTICATED- ONLINE- OFFLINEAngular20IonicFrameworkCapacitorNgxTranslateNgxFormlyChartJSAndroidiOSEdge DevicesUser DataTime Series DataOpenEMS Backend- WebSocket Server- REST API- Data PersistenceAppRoutingModuleRoutes:- / → /index- /login- /overview- /user- /changelog- /device/:edgeId → /device/:edgeId/live- /device/:edgeId/live- /device/:edgeId/history- /device/:edgeId/settingsService Layer Pattern- Centralized business logic- Edge management- WebSocket lifecycle- Translation servicesWebSocket Communication- JSON-RPC protocol- Real-time data streaming- Request/Response pattern- Notification handlingAbstract Data Service- Template Method Pattern- Live vs History data- Channel subscription- Data refresh logicWidget Architecture- Component-based UI- Reusable widgets- Modal interactions- Chart visualizationsState Management- Centralized state- Observable pattern- WebSocket state- User session statebootstrapsauthenticateget edgesusesmanageshasroutes tocontainscontainscontainsWebSocket connectionsubscribes to channelsqueries historysendsreceivesreceivesreceivesusesArchitecture PatternsFeature Module PatternService Layer PatternWebSocket CommunicationJSON-RPC ProtocolObservable Data StreamsComponent InheritanceDependency Injection Key TechnologiesAngular 20Ionic Framework 8Capacitor 7Chart.js 4RxJS 7TypeScript