![]() It needs to be passed the room id (integer). GetRoomDevicesApi(roomId): GET Request: Returns the devices of the room. Hash table of standard rooms objects each key is the room id and the value is the room object. GetRoomsApi(): GET Request: Returns the rooms of the house. The following are the available API calls and their payload and response data: Rooms API axios.js: Initializing the axios instance to be used throughout the application.It uses axios library for performing the calls.Īvailable API functions are in src/utils/api folder. The application uses REST for performing HTTP API calls. This control represents a slider visualization like a light bulb intensity. If not provided, it renders the name field instead. The following is a description of the objects of any key on the options field: Field Name Each key of the options represents the values available for this control. ![]() This is acts as a hash table for the options available for this control. Represents the key from the options object field. This control acts like a radio selector and chooses a specific device mode or operation like cold or hot for an Air Conditioner. It can increase or decrease the current temperature using two buttons. This control represents the temperature of a device like an Air Conditioner or a Header. Represents the current value of the control. The type name of the control and they are stored in src/utils/. The following describes the standard fields for all controls that are needed Field Name Each key in this field represents the id of the control. (optional) Represents a hash table for the various controls of this device, and each matches certain control component in src/components/Devices/Controls folder. State of the device main switch ( true: ON, false: OFF) Number of devices available in this room. That allows them to be available as SVG exports and alternatives to a CDN option. Note: All FontAwesome icons need to be exported in src/utils/. Controls: Each device has a number of controls that represent the current state of the device.Each device has a main switch to turn it ON/OFF. Devices: Each room has a number of devices like a light bulb, air conditioner.The application is organized in the following hierarchy: src/utils: API functions, helper functions, application contents and FontAwesomeIcons exports.src/styles: General styles and font includes that are not bounded for a certain component.They are divided per store part/feature to allow for easier scalability. src/store: Redux store reducers, actions creators, and action types.src/hoc: Higher-Order-Components that work as decorators rather than components.src/containers: components that react with the Redux store and they represent controllers in an MVC model.src/components: Main UI components and also controls for extending the app.Folders Descriptionĭescription of the core folders under src directory It has Higher-Order-Components (HOC) that adds extra functionalities for containers like Lazy-Loading, Layout Design and Error Handling. It have components for data presentation and containers for doing Redux API calls. UI Architecture uses the "Component Design Pattern" for organizing the code. HTTP-based API interactions are simulated using dummy data in the public/data folder for GET requests and for changing values they are simulated using fake promises that should be replaced with axois PATCH requests. Icons use FontAwesome, and they are provided as an NPM package rather than a CDN to allow for Offline-mode or Mobile Application easier. HTTP-based API interactions uses Axios and UI Data Management uses Redux. It was built using ReactJS and unit tested with Jest and Enzyme. Single Page JavaScript Application that is simulating house automation controls that allows remote clients (iPad browser web app, for example) to monitor and control home appliances. Home Automation UI App Live Demo Description
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |