freedomotic / fd-vue-webapp

A Vue.js web application for Freedomotic Open IoT framework

fd-vue-webapp

A Vue.js client for Freedomotic framework.

---

Scope of the project

This repository contains the implementation of a front end client for Freedomotic. The aim of this project is to reproduce all features already integrated in our Java frontend, that's available here.

To have a broad idea about its features you can have a look at our YouTube channel.

Screenshoot

Dashboard Page

Things Panel

Plugins Panel

Automations Panel

Mobile

Pre-requirements

In order to execute this fd-vue-webapp client locally, first you need to download and launch an instance of Freedomotic on your machine. Freedomotic is a framework built in Java, so the only pre-requirement to make it running is to have a Jre8 installation on your machine.

Download and launch the latest build of the framework

You can download the latest available daily build available here

The zipped version of this daily build contains a jar file, named freedomotic.jar that you can run by executing the following command:

java -jar freedomotic.jar

Freedomotic RESTful endpoints

Once launched, a local setup of Freedomotic RESTful APIs will be available at localhost:9111.

Freedomotic Polymer client, an inspiration

Some time ago we developed a first client prototype using Polymer (here it is a brief video showing its features). Polymer client source code is hosted here on GitHub: maybe you can look at it to have some inspiration.

WARNING: At the moment that project is deprecated.

Technical notes

This project uses Vue.js and Quasar framework.

How to launch it

Clone or fork this repository, then follows the following set of commands:

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run serve

# create a production build
npm run build

Contributing

If you like to contribute to this project, please follow our guidelines, available here.

Partners

This project is supported by:

fd-vue-webapp's Issues

Reorganize Vuex with modules

Now we have a single file for actions, a single file for mutations etc. We could create different modules to collect all actions related to triggers or commands or plugins etc.
The same for mutations and application state.

Command component

Introduce a static background for the client

At the moment, the background of each screen of the client is randomly selected from a set of Flickr URL.

We'd like to get rid of this behavior by introducing a single static asset, namely a background.png. Since the color of Freedomotic logo is a green one, we'd like to have an image containing either #8bae2d or #75c200.

Manage toast messages

We need a way to show info, warning, error messages.
I found out some interesting components based on Vuex:

• vuex-toast
• vue-toasted

Some problems with i18n inside attributes

When you try to add an i18n string inside an attribute an exception is raised.
For example in Dashboard component
tooltip="{{$t('user_account')}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">

Create 'Plugin' Vue.js component

We want to convert this Polymer component to Vue.js.
It's the basic component to create the plugins' list.

Different mobile and desktop layouts

The following layout is good for PCs and tablets but not for smartphones.

So we should adapt the layout to different devices.

Update README.md with more info about the app

Populate Environment component with things

Every Environment component should be populated with a list of related things.
For developing purpose it's possible to retrieve the list of things from

fd-vue-webapp/src/store/index.js

Line 45 in ce3a25b

environmentThings,

.
Every element in the list has x,y coordinates for position and a reference to the right icon to show (based on the current representation).
We need to add an 'edit mode' to enable drag and drop.
Right click on each of them calls Things Editor component to manage them.
Mouse over an icon shows its details.
#41

Create a landing page (login form)

The landing page should be a login form to access to the dashboard.
Something like this

The code of the old Polymer client is https://github.com/freedomotic/fd-polymer-webapp/blob/master/app/index.html

Create a 'list' component

We need a 'list' component for our Vue.js client.
Possibly convert this Polymer component.

Add country flags to Language component

It'd be nice to change the current buttons with the flags of the countries to represent the supported languages.

Adjust layout of EnvironmentsPanel

This component manages the list of available environments and uses Environment component to manage them.

It should be centered in the dashboard and scaled as needed.
In the Polymer client a slider with left and right chevrons is used to choose an environment.

Introducing Trello board for organizing project implementation

What do you think to organize a Trello board to define priorities for all the issues opened so far?
Indeed, at the moment, the opened issues are definitely ok, but maybe we need to prioritize them a little in order to have a cleaner approach to development itself.

Trigger component

Environment component

This component is intended to show a map with all the things in the environment.
Some features:

• drag and drop things
• show things' properties
• add new environments
• delete existent environments
• change environments' properties (name, rooms)

Add Login component for mobile GUI

It should be called MobileLogin and loaded instead of Login when a mobile platform is detected.

Add AddButton component

This type of component could be useful for each panels requiring an 'add' function.
E.g. add a new automation, add a new thing, add a new plugin...

It could be similar to CloseButton but located at right bottom corner and having a property "function to call". This way you can reuse it in different component.

Transform 'props' in other properties of the Vuex global state

Affected components:

• InfoBox
• Plugin
• CornerButton

InfoBox component requires a "title" attribute for i18n

Under the icon it shows action property as a title so if you translate it by i18n openWindow() doesn't work anymore.

Add multilanguage support for web client

We want to have a multilanguage web client.
For Freedomotic java client we are using i18N and the same for the old client in Polymer.
Here the code https://github.com/freedomotic/fd-polymer-i18next-translate
Please consider how to reuse the available translations https://github.com/freedomotic/fd-polymer-i18next-translate/tree/master/translation

Of course you can suggest other possible solutions.

Add PanelToolbar component

Now every "Panel" component has a duplicated code for the toolbar as

<md-toolbar class="md-accent">
          <md-content class="small-icon" @click="openSettings">
            <md-icon>undo</md-icon>
          </md-content>
          <md-content class="small-icon" @click="closeWindow">
            <md-icon>clear</md-icon>
          </md-content> 
          <h3 class="md-title">{{$t('automations').toUpperCase()}}</h3>
</md-toolbar>

We'd consider to extract this code and create a reusable component "PanelToolbar" with a property "title" and maybe another "background-color" for customization.

Adding BrowserStack logo

This issue is intended only to upload BrowserStack logo.

Introducing components documentation

Components should be properly documented.
propdoc is a possible solution.

Add Travis CI configuration for web client

Slider component

We need a slider component to manage some behaviors as lights' dimming but it's missing in Vue Material.
It's on the way as reported here but there isn't a deadline.
Maybe we should adopt a temporarly (or not) alternative solution. Any idea?

Add authentication for web client

In the first prototype we are using a fake authentication system to make some tests.
We should create a "real" system to interact with our domotic framework APIs.
Axios is already installed.
This is an interesting article.

ThingsPanel component

Things Panel component shows a list of things based on the current selected environment.

Create a connector for RESTful API

Our framework exposes a RESTful API (see code https://github.com/freedomotic/freedomotic/tree/master/plugins/devices/restapi-v3).
To try it start Freedomotic and point your browser to http://localhost:9111 (API documented by Swagger).

We want to connect this Vue.js client to the RESTful service.

In the case consider a possible reuse of code written for another client in Polymer:
https://github.com/freedomotic/fd-polymer-api-settings
https://github.com/freedomotic/fd-polymer-webapp
https://github.com/freedomotic/fd-polymer-rest-service

Zone component

It is used to represent a zone inside an environment (#41).
We can start from related Polymer component.

Bad color rendering in production

I tried to update our webserver plugin with the new Vue client but the rendering of colors is wrong.
In attachment a sample image. The same for Chrome and Firefox.

User component

This component is used to manage users.

Introduce responsive design

In order to make the client responsive we need to adopt a good solution for this.
I found out

• vue-mq
• vue-responsive

Create a dashboard for Vuejs client

This dashboard can be used for desktop and tablet visualization.
Here the version developed in Polymer

The components should be converted or adapted to the new Vue.js client.
Demo available at try http://104.236.92.231:8090/ (credentials admin/admin)

Advanced Mode option

This option could be useful to enable/disable advanced features.
It should be added to the System component.

Find a way to load components only when required

System component

Currently Polymer client shows only a button to shutdown the system.
We should define which controls to add to this component.

AutomationPanel component

This component is intended to manage Freedomotic automations (aka reactions).
We'd think about the best UX.

Note: no component is currently implemented in Polymer client.

Add vue-axios plugin

In order to interact with our Restful API we need to add vue-axios plugin.

Vuex introduction

I see that in order to deal with client I18N, it has been introduced a dependency to Vuex.

Is it worth to use Vuex to manage all the model of this application? Opinions anyone?

@mcicolella @williamparry

Markerplace component

It is used to represent the plugins' marketplace.
It shows a list of categories and for each of them a list of available plugin.

We can start from related Polymer component.

Here a screenshot from Jfrontend

Thing component

IMHO current Polymer implementation requires some improvements

• sensors don't show values directly but only their icon as shown in the attached image
• things' behaviors are not shown
• it's possible to create a new thing only by duplicating an existing one (after pressing '+' button that enables 'copy' feature) so you can't select a template not already present on the map

Looking for web developers to create a Vue.js application

We'd like to create a webapp for our domotic framework.

The aim is to reproduce all features integrated int our Java frontend https://github.com/freedomotic/freedomotic/tree/master/plugins/devices/frontend-java
To have an idea you can look at our YouTube channel https://www.youtube.com/freedomotic

Time ago we developed a first prototype in Polymer.You can try it by downloading Freedomotic and pointing your browser to http://localhost:8090. A brief video is available on https://www.youtube.com/watch?v=0pN-8mbNuQk
And the source code is hosted on https://github.com/freedomotic/fd-polymer-webapp

Maybe some components can be reused in Vue.js.

The interaction with our framework is based on a RESTful API https://github.com/freedomotic/freedomotic/tree/master/plugins/devices/restapi-v3/src/main/java/com/freedomotic/plugins/devices/restapiv3

Demo available at try http://104.236.92.231:8090/ (credentials admin/admin)
We are defining the webapp structure and the tasks to execute.
If you want to contribute please comment.

Role component

This component is used to manage system roles.

Tooltips for buttons not showed in Firefox

It seems a known problem as reported here.
Chrome is OK.

Manage websockets

We need to manage some websockets to receive updates about plugins or things state or messages from the framework.

We could create a component for this based on vue-websocket or other solutions.

Here the Polymer component developed for that.

Convert Polymer corner-button component to Vue.js component

We want to convert this Polymer component to Vue.js.
It is used at the four corners in the dashboard as in the attached image.

Demo available at try http://104.236.92.231:8090/ (credentials admin/admin)

AutomationPanel component

This component is used to manage all Freedomotic's automations.

Prepare webpack scaffolding

In order to setup a proper environment for this project it could be useful to define a clean scaffolding containing the structure of the source code to start to work on.

It is adviced to use Webpack 2.x.

The Javascript framework of use is Vue.js.

Manage Rooms in Environment component

#41