owsolutions / angular5-iot-dashboard

Multipurpose dashboard admin for IoT softwares, remote control, user interface. Develop your client dashboards in Angular 5 with vast variety of components available.

Depricated! Visit https://pixelplux.com/product/torabito-iot-suite/

This project is no longer maintained. You need to use https://pixelplux.com/product/torabito-iot-suite/, for monitoring your Arduino/ESP8266 project.

Angular 5 Iot Dashboard

Angular 5 Dashboard is a management dashboard for many purposes, focused on IoT, smart home, and autonomy. This project, is a fully functional app and is hosted on https://pixelplux.com/product/torabito-iot-suite/ as an enterprise product. We are sharing many components and our workflow here inside this repository.

This project can be used for Internet of things, reporting dashboard, user management, live monitoring and other other dashboard based projects for angular.

We will continously update the workflow of the application. You can use components from this project and get inspired how an intellgence dashboard can be working. Either you can fork this project, or build your own app, and import components from this repository.

Please try to keep components as untouched as possible if you want to get the weekly updates and improvements. In case your business logic is different from the way we are implementing ours, try to consult with us to build your own version, and still get benefit of minor and major features from our developers and contributors.

keywords: Angular 6 Dashboard, Angular 5 Dashboard, Angular 4 Dashboard, Angular 2 Dashboard, Internet of things Angular 2, Realtime Angular App, Socket Angular App, Iot Dashboard using Angular, Interactive dashboard, Realtime Console,Realtime Console Angular.

Stable enterprise features

We list our stable features that are working as enterprise level inside the application.

• User signup
• User signin
• User password reset
• Recieve incoming RESTful requests from devices (Arduino, Raspberry Pi)
• Create devices and managing them
• Interactive documentation for the api
• Create places and locations based on name and level
• Display realtime value in dashboard
• Mobile version support using cordova
• Collect user contact information for technical reasons.
• Manage user profiles

Experimental features

• Add conditions for changing devices
• Read devices geographical location for Mobile version

Supported languages

We are trying to cover as many as languages as possible. At the moment we do cover:

• English (United States)
• Polish (Poland)

Please feel free to contribute to this repository in case you want to add your language.

Right to left Support

We do support RTL layout but some components are not integrated that well. Our focus was on layout, direction and etc. We do support Persian language at the moment as experimental, and it's not provided in commercial version. Marketting team would choose either if they want new languages or regions and it's out of the scope.

Currently supporting experimental

• Polish ( Poland )
• Persian ( Iran )
• English ( World Wide )

Target to support languages:

• Arabic (United Arab Emirates, Egypt)
• Turkish ( Turkey )
• German ( Germany, Austria )
• Spanish ( Spain )

Please feel free to contribute to the locales for your own country.

Angular 6 Support

We are looking forward for angular 6 release to be of first people who are providing dashboard for Angular 6. At the moment, all components are based on Angular 5.x

Technical stack

• Project is based on Angular 5 and angular CLI. For developing please use npm start which also provides HMR, and for production level we use npm run build, which calls ng * tasks directly. Please review the package.json for different building environments. This application can be run without any api or microservices, all endpoints having interactive mocks. Since each customer might need a different way of building the application, we just put building examples. In case you are distributing this app again for your own purposes, please make your own environments and add them to .angular-cli.json file, and update the package, respectively.

• We are using highcharts library for our charts. For any incoming pull requests that containing other chart libraries, please open an issue first and describe why it's not possible to do it using highcharts.

• lodash, and ngrx store are used heavily for data flow.

• Async/Await concepts are everywhere since project is a realtime dashboard

• We are not supporting unit tests. We only use integration/e2e tests using cypress, and it will be run for each pull request. In case of heavy calculation or sensitive data implementation that requires unit testing, move it to other package, publish it to npm and then install it inside this repository.

• Project demo is stored on github pages; https://owsolutions.github.io/angular5-iot-dashboard Hence we are commiting the dist directory for each build and given that, our dist folder is not necessarily the production. Nevertheless you need to build this application for yourself, since our configuration is different.

Mobile version ( Experimental )

This application also will be bundled into a cordova app for Android applications. We put the apk files into github releases, which are not signed. Please feel free to sign them by your own keystore.

Read about signing a apk file here: https://stackoverflow.com/questions/10930331/how-to-sign-an-already-compiled-apk

then, you can publish it or install it for test purposes. Please notice that we build our apk with mock data, so that app is not connected to any remote server and is only, for testing and demonstration purposes. Please fork the app, and update or CI/CD to build with your endpoint address or extra configuration.

Live preview

You can see the latest deploy here: https://owsolutions.github.io/angular5-iot-dashboard

We are hosting demo version on github. For enterprise version, please contact us.

Contribution guide

We are so much excited to receive Pull-Requests from you. There are some simple rules that we follow in our project:

• Please no comments on functions unless it's really necessary. Please refer to this article for reason: https://bradt.ca/blog/useless-code-comments/
• Open an issue for your pull request, and start your branch name with this format: issue/[number]-this-is-my-branch so we can track the issue until we close it.
• Make sure your code passes tests, linting and e2e tests. For new functionality, please add abundant tests.

Copywrite

This project is free for educational usage, code review and non-commercial usage. For enterprise/commercial usage, you need to obtain a license and please contact us at [email protected]

angular5-iot-dashboard's Issues

Discover the miltestones of the project

Currently project has no milestones. We need to specify features must be delivered within the first stable version.

Cross-Browser Issues

When we open the website as aend user in safari/firefox, app has lot's of problems.

Remove mocks from project and implement mock requests

Remove all mocks json object from project and connect them to the store. Store must be populated from http requests instead of manual json. This must make changing to real https requests very easily.

Implement roles management

Implement a role management system which works completely functional With users services.

Move Users management to requests and mocks

Currently, users data is coming from component itself. Move the logic into mocks and requests component.

Design a logo and favicon for project

Currently, There are no logo or favorite icon.
Project needs favorite icon.

Change font Icons

Change font icons support the following :
1- Font Awesome
2- Material Icons
3- Meteocons

Assure TravisCI builds the tests

Currently, testing is manual. Make sure that travis is well-configured to run angular tests on chrome.

Use google json response

Currently I've added IResponse interface which represents google standard for api results. This must be applied to entire requests.service functions.

"reminder-timeline.component.ts" file is too long.

Please separate the data, and move them into another file. This file is too long. Make a middleware for data, and inject them into the store ( or at least read from another component )

Using autoprefixer for mixins

Please review and spike how autoprefixer works to support for older browser and cross browser problem solve.

Minor styling issues

Update the minor styling issues within the page.

Fix the warning issues for interface exports

Fix warning by angular cli due to the warnings generated by webpack:

WARNING in ./src/app/shared/output-pin-view/output-pin-view.component.ts
47:50-54 "export 'IPin' was not found in '../Definitions'

WARNING in ./src/app/shared/output-pin-view/output-pin-view.component.ts
47:74-78 "export 'IPin' was not found in '../Definitions'

WARNING in ./src/app/shared/output-pin-view/output-pin-view.component.ts
51:50-57 "export 'IDevice' was not found in '../Definitions'

WARNING in ./src/app/shared/output-pin-view/output-pin-view.component.ts
51:77-84 "export 'IDevice' was not found in '../Definitions'

Implement slider for analog values

Currently, analog outputs have an input box to set the value.
Multiple component for analog values are needed, to be replace or be used in conjunction with input.

Create form element component for public use

Create form element component for public use

Fix the layout issue

Currently sidebars are fixed positions, this causes we cannot correctly use the layout system, for example login page has no sidebars but still content-box starts with margin from left, right.

Create Nginx config for project

We are using firebase for deploying the product. It's necessary to make a tutorial for people want to host the dist folder by themselves.

Add four module per location

Add four module per location

Change place image in quick view with current logged in user

Change the Quick view with mock user login in information.

Update Routing

Currently we are showing 4 main components on app.component, they must convert to router-outlet instead to be able to control them with the router configuration instead of manual checking.

Add initial authenticate

Add authenticate service, token and routing for current connected user.

Solve the routing and layouting issue

Read this question and solve the multiple layouts, and login / signup page.
https://stackoverflow.com/questions/38780436/how-to-switch-layouts-in-angular2/38783451#38783451

Add place ( location ) create form

Currently places list are mock data, we need to add another route that gives users this possibilities to create a new place. Also, IPlace interface must be reviewed, because it has no id or key, and probably specification is not correct.
Also there must be an option to upload photo for that place.

Revise the reminder-timeline.component.ts

Take a review for titleGenerator, drawChart and retPosition in reminder-timeline.component.ts file because it seems they have lack of performance, or doing replicate work.

Solve widgets page mobile view

https://smart-angular-dashboard.firebaseapp.com/widgets

Fixed design "app-location-row" in content box

Fixed design "app-location-row" in content box component

Add JQuery database

For this project, we need several versions of datatable configured for specific usages.

Add initial activity

Add initial activity ( mock ) based on current devices and widgets, by simulating a change on device or widget.

Implement User, ACL control service

Implement 2 classes to manage the users and ACL level.
These functions might expose the acl functions to checkout the project and etc.

Restructure the components to act more modular

Currently components are too much entwined together, we need to update them in a way, that we can remove them easily, or add.
Workflow is not so transparent right now.

Connect location rows to show real data

Currently location row has fake data, temperature and etc. Make sure they are binded to location widgets instead of hard coded values.

Sort the appearance of the quick status component

Sort the appearance of the quick status component

Bind index activity bar to the store data

Currently app information is hard coded. It must be connected to the activity from store;

Create users profile page, single page

We need a page to edit users information, update and manage it's capabilities.

Implement fully functional activity status

Currently, when we change a pin status, we log them correctly with sufficient information. Unfortunately, on the other hand, user interface is not fully functional, and icons are wrong.
There must be a review to make sure activity status are addressing pretty well.

Add fundamental permissions of the application

Add an initial list of the permissions that application need to operate. This list might vary for production purposes. Plus, I want user service have a list of these permissions by default and show/hide navigation, routes based on these permissions.

Implement data table for dashboard

We need to address the users need for table. This can be implemented either by jquery data table, or any other existing angular components.

Write a description about the stack of project

I want to see an elaboration about the project technical stack, services used on README. Currently it's really hard to understand what are the projects material.

Support for RTL ( Persian, Arabic )

We must support for RTL languages, and make the layout switchable to rtl. Plus, for arabic and Persian must implement different fonts, since in each language formal fonts are different.

Add Internationalization

Implement the poedit and text scanner for angular to make translations ready for other languages.

Bind app info activities

Currently app info activities are broken. They must be connected to the real activity from store.

Change org name and repo name

Organization name and this repository name, is really generic and I doubt if ever gonna be a magnificent brand name.

Remove the IOT features from dashboard

I want to be able to produce this code again for any dashboard purpose, so it's necessary to make it quite easy to remove the IOT related code from dashboard. Data layer, components must be definitely separated.

Devices configuration box separation

Since devices configuration box is now in devices component, it's better to use a separate component for that one.

Implement users login/signup page.

Currently, dashboard page is appearing right away. We need to protect the dashboard with a proper user login and signup page. Supporting facebook and github login is debating, since Iot must operate in isolation system.

Location row readonly pin

When output-pin component is read only, the display type of value is different, we must implement a new component to show ready only pins status.

Add loading spinner for project

Add the spinner for project.

npm test is not running

We have problem to run tests before merging into master branch. We currently only build the project and if it works, we decide to able to be merge.

You must find out how to run npm test on travis CI to check the results.

Fix horizontal scroll issue

In some devices, layout components are scrolling horizontally. This must be fixed by using a scroll library.

Role add/update/delete

As a user I want to be able to remove roles, add new role, edit existing role information, such as title and description.