lelylan / devices-dashboard-ng Goto Github PK

The actual visualization works pretty well when we have several devices. When there is one or few devices we don't have a really nice view. Think about this. Would be nice also to work for different views (list, compact and extended).

Make the default height 50px less on all dashboards.

When not logged in the access is not permitted. Fix it.

Update the library to use

• karma
• Yeoman 1.0

See NProgress JQuery plugin.

User the new angular 1.2 animation system. To find the complete explenation of how it works you should read here.

Update the form to make much more clear the step related to the connection of the physical device.

• Update URI to URL
• Add a link to the article related to the creation of a physical device

When I pass from the type list to the type detail I can see for a moment the new view. It's wierd as we do not call it.

Add list scrolling for list of devices. We need to have them all in one page.

• scrollability
• iscroll
• overthrow

The serach should happen only on the device name.

Make it easy to use Lelylan

When there are more than 10 devices the page becomes longer and the device detail is not visible anymore. To solve this problem check out one of the following solutions.

• Content scrolling.
• Fixed device component (in this way it is always visible in the same position).

Add learn more to the demo. It can be the same one used for the device dashboard.

The actual system is not logically correct. We open and close too many connections. Even more, we send the notifications to clients that are not connected. For this reason we need to collect the connected token ids and remove the ones that are disconnected. In this way we can send the notification only to the online dashboard.

Think about. This part is pretty important. We also can add a more complete test suite where we have to simulate the socket io client.

Review description for lelylan dashboard.

• study possible menu solutions

Better button style.

The automatic generation of the dashboard could be pretty useful in the moment you want to let other people personalize their own dashboard. Yeoman offers something about.

Place a ribbon saying that you are on a demo. Here an online generator. Search for more.

The alert system does not work when a device is deleted on production. We should also add some notifications when something goes wrong, together with a mail where whoever has a problem can communicate it.

Once you have the real time system the device loading should happen only once after the login. The same list will be loaded to see all devices or to navigate between categories. In this way the server loading will decrease a lot.

Improve the code quality for the client side following this article

Think about using Rails (mainly for it capability and gems to push everything on S3) or to build a rack app from cratch.

Before try for a couple of hours the definition of an express version. Here you can see an example.

When creating a type you need to select a type. Improve graphics and integration.

Check this out and see if it makes sense to easily let people have a predefined Lelylan Dashboard

• app structure
• progress bar
• bootstrap 3

When we create a new device, in the dashboard the updated at field says something like 1 minute from now. It looks like it's anticipating the timing. It should be saying right now.

Review the content of Lelylan Dashboards and how it works. It must be ready to be used from a large user base.

The list of devices in the dashboard is flickering at any change. This should happen because the JSON of the device change, and when an element of the ng-repeat changes, it is reloaded. Find a way to get rid of this.

Right now when we search a device, the device component showed as the selected one is not the first one in the searched list, but it is the previously selected. This is a bug. The right flow should show the first searched device.

Improve visual testing using huxley.

Remove the {{}} you see initially and replace them with ng-bing to solve the problem. Here an article explaining the problem and the solution

Add keyboard based commands to move between all elements and add an help section like this one.

The refresh is not working. The header disappear and no errors are raised.

Improve the device creation form on device dashboard. This part is really important and we should think if we need a wizard solution. We also need to think at the connect functionality. Probably the create functionality, in the future, will be placed in the makers app and on lelylan dashboard you will only be able to connect a device you have bought.

Right now when the user is not logged in, the dashboard shows you a connecting... message. It should be hidden and come out whenever you login.

On device creation we can have different options

• Connect a bought device
• Create a device
• Simulate device

We need to make this phase pretty easy with a wizard. See Cosm quickstart

On the function or edit form think about giving a better style to the form. Here a goodlooking one

On the /learn page resize the image dimensions like you did on Lelylan Types.

Cache all requests to types. Try to cache all of them and check if doing so, the cache is removed when a non GET operation is done to a specific URI. The most important thing to do is to cache the types requests.

Add realtime for creates/updated/deleted devices.

Add a link that lets you create a new type on lelylan dashboard. This will simply link to the type dashboard

Set the popular types as service of type.lelylan.com

Right now we have a notification message on the left that shows the user the things that are happening. The notification last 5 seconds and then disappears. We should improve.

• See if the notification can somehow live inside the component or somewhere else. The left part does not convince me totally.
• The list must scroll and it should not enlarge the page.
• The subsequent changes related to the same device should be somehow grouped.
• We need to show which one has been the update.
• There should be an icon that when clicked show you the updated device representation. An eye icon or a detail one. A modal could be opened.

Use this multilevel menu to add all connected projects and to easily move between

• Lelylan Dashboard
• Lelylan Types
• Lelylan Dev Center
• ...

When the types will be defined on Lelylan Types, get a full review of the demo.

Right nw the type list is showed as a list. Think about a better visualization as boxes (similar to category selection) where you have different blocks and where you see the type ID and Name, and where on hover a link to the detail pops out

After a device is deleted you should go to the first one and reset the device component view

Add feedback and comment services. As comment you could do as github does. Use the twitter account to let people talk to you and eventually leave the email address.