Commit all changes

.angulardoc.json

@@ -0,0 +1,4 @@
+{
+  "repoId": "713b5f2f-be81-4fb1-b5d1-edbba161d3ef",
+  "lastSync": 0
+}

angular.json

@@ -25,12 +25,24 @@
             "aot": false,
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              {
+                "glob": "**/*",
+                "input": "./node_modules/leaflet/dist/images",
+                "output": "leaflet/"
+              }
             ],
             "styles": [
+              "node_modules/bootstrap-css-only/css/bootstrap.min.css",
+              "node_modules/font-awesome/css/font-awesome.css",
+              "node_modules/ionicons/dist/css/ionicons.css",
+              "node_modules/admin-lte-css/dist/css/AdminLTE.css",
+              "node_modules/admin-lte-css/dist/css/skins/_all-skins.css",
+              "node_modules/leaflet/dist/leaflet.css",
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [
+            ]
           },
           "configurations": {
             "production": {
@@ -121,4 +133,4 @@
       }
     }},
   "defaultProject": "frontend"
-}
+}

package.json

@@ -14,11 +14,24 @@
     "@angular/animations": "~8.0.1",
     "@angular/common": "~8.0.1",
     "@angular/compiler": "~8.0.1",
-    "@angular/core": "~8.0.1",
+    "@angular/core": "^8.0.1",
     "@angular/forms": "~8.0.1",
     "@angular/platform-browser": "~8.0.1",
     "@angular/platform-browser-dynamic": "~8.0.1",
     "@angular/router": "~8.0.1",
+    "@asymmetrik/ngx-leaflet": "^5.0.2",
+    "admin-lte-css": "^2.4.3",
+    "angular-admin-lte": "^2.0.1",
+    "angular-loading-page": "^0.6.0",
+    "angular2-chartjs": "^0.5.1",
+    "bootstrap-css-only": "^3.3.7",
+    "chart.js": "^2.8.0",
+    "font-awesome": "^4.7.0",
+    "ionicons": "^4.6.1",
+    "leaflet": "^1.5.1",
+    "moment": "^2.24.0",
+    "ng2-charts": "^2.3.0",
+    "ngx-mqtt": "^6.11.0",
     "rxjs": "~6.4.0",
     "tslib": "^1.9.0",
     "zone.js": "~0.9.1"
@@ -28,9 +41,11 @@
     "@angular/cli": "~8.0.4",
     "@angular/compiler-cli": "~8.0.1",
     "@angular/language-service": "~8.0.1",
-    "@types/node": "~8.9.4",
+    "@types/chart.js": "^2.7.54",
     "@types/jasmine": "~3.3.8",
     "@types/jasminewd2": "~2.0.3",
+    "@types/leaflet": "^1.4.4",
+    "@types/node": "~8.9.4",
     "codelyzer": "^5.0.0",
     "jasmine-core": "~3.4.0",
     "jasmine-spec-reporter": "~4.2.1",

src/app/admin-lte.conf.ts

@@ -0,0 +1,19 @@
+export let adminLteConf = {
+    skin: 'blue-light',
+    layout: 'normal',
+    sidebarLeftMenu: [
+        {label: 'MAIN NAVIGATION', separator: true},
+        {label: 'Home', route: '/', iconClasses: 'fa fa-home'},
+        {label: 'Plants', iconClasses: 'fa fa-bolt', children: [
+            {label: 'Dashboard', route: 'plants/dashboard'},
+            {label: 'Management', route: 'plants/management'},
+        ]},
+        {label: 'Events', iconClasses: 'fa fa-bookmark', children: [
+            {label: 'Log', route: 'events/log', iconClasses: 'fa fa-file-text-o'},
+            {label: 'Configuration', route: 'events/configuration', iconClasses: 'fa fa-sliders'},
+        ]},
+        {label: 'SETTINGS', separator: true},
+        {label: 'App Settings', route: '/', iconClasses: 'fa fa-sliders'},
+        {label: 'Profile', route: '/', iconClasses: 'fa fa-user'}
+    ]
+};

src/app/app-routing.module.ts

@@ -1,10 +1,74 @@
+import { ConfigurationComponent } from './events/configuration/configuration.component';
+import { LogComponent } from './events/log/log.component';
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { HomeComponent } from './home/home.component';
+import { PagenotfoundComponent } from './pagenotfound/pagenotfound.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  {
+    path: '',
+    data: {
+      title: 'Home'
+    },
+    children: [
+      {
+        path: '',
+        component: HomeComponent,
+      },
+      {
+        path: 'plants',
+        data: {
+          title: 'Plants'
+        },
+        children: [
+          {
+            path: 'dashboard',
+            loadChildren: './plants/dashboard/dashboard.module#DashboardModule',
+            data: {
+              title: 'Dashboard'
+            }
+          },
+          {
+            path: 'management',
+            loadChildren: './plants/management/management.module#ManagementModule',
+            data: {
+              title: 'Management'
+            }
+          },
+        ]
+      },
+      {
+        path: 'events/log',
+        component: LogComponent,
+        data: {
+          title: 'Events Logs'
+        }
+      },
+      {
+        path: 'events/configuration',
+        component: ConfigurationComponent,
+        data: {
+          title: 'Logs Configuration'
+        }
+      }
+    ]
+  },
+  {
+    path: 'login',
+    loadChildren: './login/login.module#LoginModule',
+    data: {
+      customLayout: true
+    }
+  },
+  {
+    path: '**',
+    component: PagenotfoundComponent
+  }
+];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [RouterModule.forRoot(routes, {useHash: true, scrollPositionRestoration: 'enabled' })],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }

src/app/app.component.html

@@ -1,21 +1,34 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-</div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
-
-<router-outlet></router-outlet>
+<ng-container *ngIf="customLayout; else noCustomLayout">
+  <router-outlet></router-outlet>
+</ng-container>
+<ng-template #noCustomLayout>
+  <mk-layout-wrapper>
+    <mk-layout-header logoLink="/">
+      <mk-layout-header-logo><b>Energy </b>MS</mk-layout-header-logo>
+      <mk-layout-header-logo-mini><b>E</b>MS</mk-layout-header-logo-mini>
+      <app-header-inner></app-header-inner>
+    </mk-layout-header>
+    <mk-layout-sidebar-left>
+      <app-sidebar-left-inner></app-sidebar-left-inner>
+    </mk-layout-sidebar-left>
+    <mk-layout-sidebar-right>
+      <app-sidebar-right-inner></app-sidebar-right-inner>
+    </mk-layout-sidebar-right>
+    <mk-layout-content>
+      <div mk-layout-content-before-header>
+        <div *mkLoadingPage="{checkPendingHttp: true, checkPendingRoute: true}">
+          <mk-material-bar></mk-material-bar>
+        </div>
+      </div>
+      <router-outlet></router-outlet>
+    </mk-layout-content>
+    <mk-layout-footer>
+      <mk-layout-footer-left>
+        <strong>Created by Market Intelligence Dev Team @ <a href="http://mercadoselectricos.com.sv">Mercados Eléctricos</a>.</strong>
+      </mk-layout-footer-left>
+      <mk-layout-footer-right>
+        <b>Version</b> 0.0.1-beta
+      </mk-layout-footer-right>
+    </mk-layout-footer>
+  </mk-layout-wrapper>
+</ng-template>

src/app/app.component.ts

@@ -1,10 +1,22 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { LayoutService } from 'angular-admin-lte';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
-  title = 'frontend';
+export class AppComponent implements OnInit {
+  public customLayout: boolean;
+
+  constructor(
+    private layoutService: LayoutService
+  ) {}
+
+  ngOnInit() {
+    this.layoutService.isCustomLayout.subscribe((value: boolean) => {
+      this.customLayout = value;
+    });
+  }
+
 }

src/app/app.module.ts

@@ -1,16 +1,42 @@
+import { LoginModule } from './login/login.module';
+import { PlantsModule } from './plants/plants.module';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
+import { LeafletModule } from '@asymmetrik/ngx-leaflet';
+
 import { AppRoutingModule } from './app-routing.module';
+import { CoreModule } from './core/core.module';
 import { AppComponent } from './app.component';
+import { HomeComponent } from './home/home.component';
+import { adminLteConf } from './admin-lte.conf';
+
+import { LayoutModule } from 'angular-admin-lte';
+
+import { LoadingPageModule, MaterialBarModule } from 'angular-loading-page';
+import { UtilsModule } from './utils/utils.module';
+import { EventsModule } from './events/events.module';
+import { FormsModule } from '@angular/forms';
+import { PagenotfoundComponent } from './pagenotfound/pagenotfound.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    HomeComponent,
+    PagenotfoundComponent
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    CoreModule,
+    FormsModule,
+    LayoutModule.forRoot(adminLteConf),
+    LoadingPageModule, MaterialBarModule,
+    UtilsModule,
+    PlantsModule,
+    EventsModule,
+    LeafletModule.forRoot(),
+    LoginModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/core/core.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HeaderInnerComponent } from './header-inner/header-inner.component';
+import { SidebarLeftInnerComponent } from './sidebar-left-inner/sidebar-left-inner.component';
+import { SidebarRightInnerComponent } from './sidebar-right-inner/sidebar-right-inner.component';
+import { FormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http'
+import { DropdownModule, TabsModule, BoxModule, BoxSmallModule } from 'angular-admin-lte';
+
+@NgModule({
+  declarations: [
+    HeaderInnerComponent, 
+    SidebarLeftInnerComponent, 
+    SidebarRightInnerComponent],
+  imports: [
+    CommonModule,
+    FormsModule,
+    HttpClientModule,
+    DropdownModule,
+    TabsModule,
+    BoxModule,
+    BoxSmallModule
+  ],
+  exports: [BoxModule, TabsModule, BoxSmallModule, HeaderInnerComponent, SidebarLeftInnerComponent, SidebarRightInnerComponent]
+})
+export class CoreModule { }

src/app/core/header-inner/header-inner.component.html

@@ -0,0 +1,235 @@
+<div class="navbar-custom-menu">
+    <ul class="nav navbar-nav">
+      <!-- Messages: style can be found in dropdown.less -->
+      <li mk-dropdown type="list" [isWrapper]="false" class="messages-menu">
+        <mk-dropdown-toggle>
+          <a #toggleElement>
+            <i class="fa fa-envelope-o"></i>
+            <span class="label label-success">4</span>
+          </a>
+        </mk-dropdown-toggle>
+        <mk-dropdown-menu>
+          <li class="header">You have 4 messages</li>
+          <li>
+            <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 200px;"><ul class="menu" style="overflow: hidden; width: 100%; height: 200px;">
+              <li>
+                <a href="#">
+                  <div class="pull-left">
+                    <img src="assets/img/user2-160x160.jpg" class="img-circle" alt="User Image">
+                  </div>
+                  <h4>
+                    Support Team
+                    <small><i class="fa fa-clock-o"></i> 5 mins</small>
+                  </h4>
+                  <p>Why not buy a new awesome theme?</p>
+                </a>
+              </li>
+              <li>
+                <a href="#">
+                  <div class="pull-left">
+                    <img src="assets/img/user3-128x128.jpg" class="img-circle" alt="User Image">
+                  </div>
+                  <h4>
+                    AdminLTE Design Team
+                    <small><i class="fa fa-clock-o"></i> 2 hours</small>
+                  </h4>
+                  <p>Why not buy a new awesome theme?</p>
+                </a>
+              </li>
+              <li>
+                <a href="#">
+                  <div class="pull-left">
+                    <img src="assets/img/user4-128x128.jpg" class="img-circle" alt="User Image">
+                  </div>
+                  <h4>
+                    Developers
+                    <small><i class="fa fa-clock-o"></i> Today</small>
+                  </h4>
+                  <p>Why not buy a new awesome theme?</p>
+                </a>
+              </li>
+              <li>
+                <a href="#">
+                  <div class="pull-left">
+                    <img src="assets/img/user3-128x128.jpg" class="img-circle" alt="User Image">
+                  </div>
+                  <h4>
+                    Sales Department
+                    <small><i class="fa fa-clock-o"></i> Yesterday</small>
+                  </h4>
+                  <p>Why not buy a new awesome theme?</p>
+                </a>
+              </li>
+              <li>
+                <a href="#">
+                  <div class="pull-left">
+                    <img src="assets/img/user4-128x128.jpg" class="img-circle" alt="User Image">
+                  </div>
+                  <h4>
+                    Reviewers
+                    <small><i class="fa fa-clock-o"></i> 2 days</small>
+                  </h4>
+                  <p>Why not buy a new awesome theme?</p>
+                </a>
+              </li>
+            </ul><div class="slimScrollBar" style="width: 3px; position: absolute; top: 0; opacity: 0.4; display: block; border-radius: 7px; z-index: 99; right: 1px; background: rgb(0, 0, 0);"></div><div class="slimScrollRail" style="width: 3px; height: 100%; position: absolute; top: 0; display: none; border-radius: 7px; opacity: 0.2; z-index: 90; right: 1px; background: rgb(51, 51, 51);"></div></div>
+          </li>
+          <li class="footer"><a href="#">See All Messages</a></li>
+        </mk-dropdown-menu>
+      </li>
+  
+      <li mk-dropdown type="list" [isWrapper]="false" class="notifications-menu">
+        <mk-dropdown-toggle>
+          <a #toggleElement>
+            <i class="fa fa-bell-o"></i>
+            <span class="label label-warning">10</span>
+          </a>
+        </mk-dropdown-toggle>
+        <mk-dropdown-menu>
+          <li class="header">You have 10 notifications</li>
+          <li>
+            <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 200px;"><ul class="menu" style="overflow: hidden; width: 100%; height: 200px;">
+              <li>
+                <a href="#">
+                  <i class="fa fa-users text-aqua"></i> 5 new members joined today
+                </a>
+              </li>
+              <li>
+                <a href="#">
+                  <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the
+                  page and may cause design problems
+                </a>
+              </li>
+              <li>
+                <a href="#">
+                  <i class="fa fa-users text-red"></i> 5 new members joined
+                </a>
+              </li>
+              <li>
+                <a href="#">
+                  <i class="fa fa-shopping-cart text-green"></i> 25 sales made
+                </a>
+              </li>
+              <li>
+                <a href="#">
+                  <i class="fa fa-user text-light-blue"></i> You changed your username
+                </a>
+              </li>
+            </ul><div class="slimScrollBar" style="width: 3px; position: absolute; top: 0; opacity: 0.4; display: block; border-radius: 7px; z-index: 99; right: 1px; background: rgb(0, 0, 0);"></div><div class="slimScrollRail" style="width: 3px; height: 100%; position: absolute; top: 0; display: none; border-radius: 7px; opacity: 0.2; z-index: 90; right: 1px; background: rgb(51, 51, 51);"></div></div>
+          </li>
+          <li class="footer"><a href="#">View all</a></li>
+        </mk-dropdown-menu>
+      </li>
+  
+      <li mk-dropdown type="list" [isWrapper]="false" class="tasks-menu">
+        <mk-dropdown-toggle>
+          <a #toggleElement>
+            <i class="fa fa-flag-o"></i>
+            <span class="label label-danger">9</span>
+          </a>
+        </mk-dropdown-toggle>
+        <mk-dropdown-menu>
+          <li class="header">You have 9 tasks</li>
+          <li>
+            <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 200px;"><ul class="menu" style="overflow: hidden; width: 100%; height: 200px;">
+              <li>
+                <a href="#">
+                  <h3>
+                    Design some buttons
+                    <small class="pull-right">20%</small>
+                  </h3>
+                  <div class="progress xs">
+                    <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
+                      <span class="sr-only">20% Complete</span>
+                    </div>
+                  </div>
+                </a>
+              </li>
+  
+              <li>
+                <a href="#">
+                  <h3>
+                    Create a nice theme
+                    <small class="pull-right">40%</small>
+                  </h3>
+                  <div class="progress xs">
+                    <div class="progress-bar progress-bar-green" style="width: 40%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
+                      <span class="sr-only">40% Complete</span>
+                    </div>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href="#">
+                  <h3>
+                    Some task I need to do
+                    <small class="pull-right">60%</small>
+                  </h3>
+                  <div class="progress xs">
+                    <div class="progress-bar progress-bar-red" style="width: 60%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
+                      <span class="sr-only">60% Complete</span>
+                    </div>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href="#">
+                  <h3>
+                    Make beautiful transitions
+                    <small class="pull-right">80%</small>
+                  </h3>
+                  <div class="progress xs">
+                    <div class="progress-bar progress-bar-yellow" style="width: 80%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
+                      <span class="sr-only">80% Complete</span>
+                    </div>
+                  </div>
+                </a>
+              </li>
+            </ul><div class="slimScrollBar" style="width: 3px; position: absolute; top: 0; opacity: 0.4; display: block; border-radius: 7px; z-index: 99; right: 1px; background: rgb(0, 0, 0);"></div><div class="slimScrollRail" style="width: 3px; height: 100%; position: absolute; top: 0; display: none; border-radius: 7px; opacity: 0.2; z-index: 90; right: 1px; background: rgb(51, 51, 51);"></div></div>
+          </li>
+          <li class="footer">
+            <a href="#">View all tasks</a>
+          </li>
+        </mk-dropdown-menu>
+      </li>
+      <li mk-dropdown type="list" [isWrapper]="false" class="user user-menu">
+        <mk-dropdown-toggle>
+          <a #toggleElement>
+            <img src="assets/img/user2-160x160.jpg" class="user-image" alt="User Image">
+            <span class="hidden-xs">Alexander Pierce</span>
+          </a>
+        </mk-dropdown-toggle>
+        <mk-dropdown-menu>
+          <li class="user-header">
+            <img src="assets/img/user2-160x160.jpg" class="img-circle" alt="User Image">
+  
+            <p>
+              Alexander Pierce - Web Developer
+              <small>Member since Nov. 2012</small>
+            </p>
+          </li>
+          <li class="user-body">
+            <div class="row">
+              <div class="col-xs-4 text-center">
+                <a href="#">Followers</a>
+              </div>
+              <div class="col-xs-4 text-center">
+                <a href="#">Sales</a>
+              </div>
+              <div class="col-xs-4 text-center">
+                <a href="#">Friends</a>
+              </div>
+            </div>
+          </li>
+          <li class="user-footer">
+            <div class="pull-left">
+              <a href="#" class="btn btn-default btn-flat">Profile</a>
+            </div>
+            <div class="pull-right">
+              <a href="#" class="btn btn-default btn-flat">Sign out</a>
+            </div>
+          </li>
+        </mk-dropdown-menu>
+      </li>
+    </ul>
+  </div>

src/app/core/header-inner/header-inner.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeaderInnerComponent } from './header-inner.component';
+
+describe('HeaderInnerComponent', () => {
+  let component: HeaderInnerComponent;
+  let fixture: ComponentFixture<HeaderInnerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeaderInnerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeaderInnerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/core/header-inner/header-inner.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-header-inner',
+  templateUrl: './header-inner.component.html',
+  styleUrls: ['./header-inner.component.scss']
+})
+export class HeaderInnerComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/core/sidebar-left-inner/sidebar-left-inner.component.html

@@ -0,0 +1,18 @@
+<div class="user-panel">
+    <div class="pull-left image">
+      <img src="assets/img/user2-160x160.jpg" class="img-circle" alt="User Image">
+    </div>
+    <div class="pull-left info">
+      <p>Alexander Pierce</p>
+      <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
+    </div>
+  </div>
+  <form action="#" method="get" class="sidebar-form">
+    <div class="input-group">
+      <input type="text" name="q" class="form-control" placeholder="Search...">
+      <span class="input-group-btn">
+        <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
+        </button>
+      </span>
+    </div>
+  </form>

src/app/core/sidebar-left-inner/sidebar-left-inner.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SidebarLeftInnerComponent } from './sidebar-left-inner.component';
+
+describe('SidebarLeftInnerComponent', () => {
+  let component: SidebarLeftInnerComponent;
+  let fixture: ComponentFixture<SidebarLeftInnerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SidebarLeftInnerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SidebarLeftInnerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/core/sidebar-left-inner/sidebar-left-inner.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-sidebar-left-inner',
+  templateUrl: './sidebar-left-inner.component.html',
+  styleUrls: ['./sidebar-left-inner.component.scss']
+})
+export class SidebarLeftInnerComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/core/sidebar-right-inner/sidebar-right-inner.component.html

@@ -0,0 +1,306 @@
+<mk-tabs styleClass="sidebar-right-tabs-wrapper" navStyleClass="nav nav-tabs nav-justified control-sidebar-tabs">
+    <mk-tab>
+      <mk-tab-header>
+        <i class="fa fa-wrench"></i>
+      </mk-tab-header>
+      <mk-tab-content>
+        <div>
+          <h4 class="control-sidebar-heading">Layout Options</h4>
+          <div class="form-group">
+            <label class="control-sidebar-subheading"><input type="checkbox" (change)="onLayoutChange($event)" value="fixed" [checked]="layout === 'fixed'" class="pull-right"> Fixed layout</label>
+            <p>Activate the fixed layout. You can't use fixed and boxed layouts together</p>
+          </div>
+          <div class="form-group">
+            <label class="control-sidebar-subheading"><input type="checkbox" (change)="onLayoutChange($event)" value="boxed" [checked]="layout === 'boxed'" class="pull-right"> Boxed Layout</label>
+            <p>Activate the boxed layout</p>
+          </div>
+          <div class="form-group">
+            <label class="control-sidebar-subheading"><input type="checkbox" [checked]="isSidebarLeftCollapsed" #sidebarLeftCollapsedCheckbox (click)="layoutStore.sidebarLeftCollapsed(sidebarLeftCollapsedCheckbox.checked)" class="pull-right"> Toggle Sidebar</label>
+            <p>Toggle the left sidebar's state (open or collapse)</p>
+          </div>
+          <div class="form-group">
+            <label class="control-sidebar-subheading"><input type="checkbox" [disabled]="isSidebarLeftExpandOnOver" [checked]="isSidebarLeftMini" #sidebarLeftMini (click)="layoutStore.sidebarLeftMini(sidebarLeftMini.checked)" class="pull-right"> Sidebar Left Mini</label>
+            <p>Let the sidebar left collapsed visible</p>
+          </div>
+          <div class="form-group">
+            <label class="control-sidebar-subheading"><input type="checkbox" [disabled]="!isSidebarLeftMini" [checked]="isSidebarLeftExpandOnOver && isSidebarLeftMini" #sidebarLeftExpandOnOverCheckbox (click)="layoutStore.sidebarLeftExpandOnOver(sidebarLeftExpandOnOverCheckbox.checked)" class="pull-right"> Sidebar Expand on Hover</label>
+            <p>Let the sidebar mini expand on hover</p>
+          </div>
+          <div class="form-group">
+            <label class="control-sidebar-subheading"><input type="checkbox" #sidebarRightOverContentCheckbox (click)="layoutStore.sidebarRightOverContent(!sidebarRightOverContentCheckbox.checked)" class="pull-right"> Toggle Right Sidebar Slide</label>
+            <p>Toggle between slide over content and push content effects</p>
+          </div>
+          <div class="form-group">
+            <label class="control-sidebar-subheading"><input type="checkbox" #sidebarRightSkinCheckbox (click)="changeSidebarRightSkin(sidebarRightSkinCheckbox.checked)" class="pull-right"> Toggle Right Sidebar Skin</label>
+            <p>Toggle between dark and light skins for the right sidebar</p>
+          </div>
+          <h4 class="control-sidebar-heading">Skins</h4>
+          <ul class="list-unstyled clearfix">
+            <li style="float:left; width: 33.33333%; padding: 5px;">
+              <a href="#" (click)="changeSkin($event, 'blue')" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
+                <div><span style="display:block; width: 20%; float: left; height: 7px; background: #367fa9;"></span><span class="bg-light-blue" style="display:block; width: 80%; float: left; height: 7px;"></span></div>
+                <div><span style="display:block; width: 20%; float: left; height: 20px; background: #222d32;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>
+              </a>
+              <p class="text-center no-margin">Blue</p>
+            </li>
+            <li style="float:left; width: 33.33333%; padding: 5px;">
+              <a href="#" (click)="changeSkin($event, 'black')" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
+                <div style="box-shadow: 0 0 2px rgba(0,0,0,0.1)" class="clearfix"><span style="display:block; width: 20%; float: left; height: 7px; background: #fefefe;"></span><span style="display:block; width: 80%; float: left; height: 7px; background: #fefefe;"></span></div>
+                <div><span style="display:block; width: 20%; float: left; height: 20px; background: #222;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>
+              </a>
+              <p class="text-center no-margin">Black</p>
+            </li>
+            <li style="float:left; width: 33.33333%; padding: 5px;">
+              <a href="#" (click)="changeSkin($event, 'purple')" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
+                <div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-purple-active"></span><span class="bg-purple" style="display:block; width: 80%; float: left; height: 7px;"></span></div>
+                <div><span style="display:block; width: 20%; float: left; height: 20px; background: #222d32;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>
+              </a>
+              <p class="text-center no-margin">Purple</p>
+            </li>
+            <li style="float:left; width: 33.33333%; padding: 5px;">
+              <a href="#" (click)="changeSkin($event, 'green')" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
+                <div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-green-active"></span><span class="bg-green" style="display:block; width: 80%; float: left; height: 7px;"></span></div>
+                <div><span style="display:block; width: 20%; float: left; height: 20px; background: #222d32;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>
+              </a>
+              <p class="text-center no-margin">Green</p>
+            </li>
+            <li style="float:left; width: 33.33333%; padding: 5px;">
+              <a href="#" (click)="changeSkin($event, 'red')"  style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
+                <div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-red-active"></span><span class="bg-red" style="display:block; width: 80%; float: left; height: 7px;"></span></div>
+                <div><span style="display:block; width: 20%; float: left; height: 20px; background: #222d32;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>
+              </a>
+              <p class="text-center no-margin">Red</p>
+            </li>
+            <li style="float:left; width: 33.33333%; padding: 5px;">
+              <a href="#" (click)="changeSkin($event, 'yellow')" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
+                <div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-yellow-active"></span><span class="bg-yellow" style="display:block; width: 80%; float: left; height: 7px;"></span></div>
+                <div><span style="display:block; width: 20%; float: left; height: 20px; background: #222d32;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>
+              </a>
+              <p class="text-center no-margin">Yellow</p>
+            </li>
+            <li style="float:left; width: 33.33333%; padding: 5px;">
+              <a href="#" (click)="changeSkin($event, 'blue-light')" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
+                <div><span style="display:block; width: 20%; float: left; height: 7px; background: #367fa9;"></span><span class="bg-light-blue" style="display:block; width: 80%; float: left; height: 7px;"></span></div>
+                <div><span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>
+              </a>
+              <p class="text-center no-margin" style="font-size: 12px">Blue Light</p>
+            </li>
+            <li style="float:left; width: 33.33333%; padding: 5px;">
+              <a href="#" (click)="changeSkin($event, 'black-light')" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
+                <div style="box-shadow: 0 0 2px rgba(0,0,0,0.1)" class="clearfix"><span style="display:block; width: 20%; float: left; height: 7px; background: #fefefe;"></span><span style="display:block; width: 80%; float: left; height: 7px; background: #fefefe;"></span></div>
+                <div><span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>
+              </a>
+              <p class="text-center no-margin" style="font-size: 12px">Black Light</p>
+            </li>
+            <li style="float:left; width: 33.33333%; padding: 5px;">
+              <a href="#" (click)="changeSkin($event, 'purple-light')" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
+                <div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-purple-active"></span><span class="bg-purple" style="display:block; width: 80%; float: left; height: 7px;"></span></div>
+                <div><span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>
+              </a>
+              <p class="text-center no-margin" style="font-size: 12px">Purple Light</p>
+            </li>
+            <li style="float:left; width: 33.33333%; padding: 5px;">
+              <a href="#" (click)="changeSkin($event, 'green-light')" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
+                <div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-green-active"></span><span class="bg-green" style="display:block; width: 80%; float: left; height: 7px;"></span></div>
+                <div><span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>
+              </a>
+              <p class="text-center no-margin" style="font-size: 12px">Green Light</p>
+            </li>
+            <li style="float:left; width: 33.33333%; padding: 5px;">
+              <a href="#" (click)="changeSkin($event, 'red-light')" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
+                <div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-red-active"></span><span class="bg-red" style="display:block; width: 80%; float: left; height: 7px;"></span></div>
+                <div><span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>
+              </a>
+              <p class="text-center no-margin" style="font-size: 12px">Red Light</p>
+            </li>
+            <li style="float:left; width: 33.33333%; padding: 5px;">
+              <a href="#" (click)="changeSkin($event, 'yellow-light')" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
+                <div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-yellow-active"></span><span class="bg-yellow" style="display:block; width: 80%; float: left; height: 7px;"></span></div>
+                <div><span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>
+              </a>
+              <p class="text-center no-margin" style="font-size: 12px;">Yellow Light</p>
+            </li>
+          </ul>
+        </div>
+      </mk-tab-content>
+    </mk-tab>
+    <mk-tab>
+      <mk-tab-header><i class="fa fa-home"></i></mk-tab-header>
+      <mk-tab-content>
+        <h3 class="control-sidebar-heading">Recent Activity</h3>
+        <ul class="control-sidebar-menu">
+          <li>
+            <a href="javascript:void(0)">
+              <i class="menu-icon fa fa-birthday-cake bg-red"></i>
+  
+              <div class="menu-info">
+                <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
+  
+                <p>Will be 23 on April 24th</p>
+              </div>
+            </a>
+          </li>
+          <li>
+            <a href="javascript:void(0)">
+              <i class="menu-icon fa fa-user bg-yellow"></i>
+  
+              <div class="menu-info">
+                <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>
+  
+                <p>New phone +1(800)555-1234</p>
+              </div>
+            </a>
+          </li>
+          <li>
+            <a href="javascript:void(0)">
+              <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
+  
+              <div class="menu-info">
+                <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>
+  
+                <p>nora@example.com</p>
+              </div>
+            </a>
+          </li>
+          <li>
+            <a href="javascript:void(0)">
+              <i class="menu-icon fa fa-file-code-o bg-green"></i>
+  
+              <div class="menu-info">
+                <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>
+  
+                <p>Execution time 5 seconds</p>
+              </div>
+            </a>
+          </li>
+        </ul>
+        <!-- /.control-sidebar-menu -->
+  
+        <h3 class="control-sidebar-heading">Tasks Progress</h3>
+        <ul class="control-sidebar-menu">
+          <li>
+            <a href="javascript:void(0)">
+              <h4 class="control-sidebar-subheading">
+                Custom Template Design
+                <span class="label label-danger pull-right">70%</span>
+              </h4>
+  
+              <div class="progress progress-xxs">
+                <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
+              </div>
+            </a>
+          </li>
+          <li>
+            <a href="javascript:void(0)">
+              <h4 class="control-sidebar-subheading">
+                Update Resume
+                <span class="label label-success pull-right">95%</span>
+              </h4>
+  
+              <div class="progress progress-xxs">
+                <div class="progress-bar progress-bar-success" style="width: 95%"></div>
+              </div>
+            </a>
+          </li>
+          <li>
+            <a href="javascript:void(0)">
+              <h4 class="control-sidebar-subheading">
+                Laravel Integration
+                <span class="label label-warning pull-right">50%</span>
+              </h4>
+  
+              <div class="progress progress-xxs">
+                <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
+              </div>
+            </a>
+          </li>
+          <li>
+            <a href="javascript:void(0)">
+              <h4 class="control-sidebar-subheading">
+                Back End Framework
+                <span class="label label-primary pull-right">68%</span>
+              </h4>
+  
+              <div class="progress progress-xxs">
+                <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
+              </div>
+            </a>
+          </li>
+        </ul>
+        <!-- /.control-sidebar-menu -->
+      </mk-tab-content>
+    </mk-tab>
+    <mk-tab>
+      <mk-tab-header><i class="fa fa-gears"></i></mk-tab-header>
+      <mk-tab-content>
+        <!-- Settings tab content -->
+        <div class="tab-pane" id="control-sidebar-settings-tab">
+          <form method="post">
+            <h3 class="control-sidebar-heading">General Settings</h3>
+  
+            <div class="form-group">
+              <label class="control-sidebar-subheading">
+                Report panel usage
+                <input type="checkbox" class="pull-right" checked>
+              </label>
+  
+              <p>
+                Some information about this general settings option
+              </p>
+            </div>
+            <!-- /.form-group -->
+  
+            <div class="form-group">
+              <label class="control-sidebar-subheading">
+                Allow mail redirect
+                <input type="checkbox" class="pull-right" checked>
+              </label>
+  
+              <p>
+                Other sets of options are available
+              </p>
+            </div>
+            <!-- /.form-group -->
+  
+            <div class="form-group">
+              <label class="control-sidebar-subheading">
+                Expose author name in posts
+                <input type="checkbox" class="pull-right" checked>
+              </label>
+  
+              <p>
+                Allow the user to show his name in blog posts
+              </p>
+            </div>
+            <!-- /.form-group -->
+  
+            <h3 class="control-sidebar-heading">Chat Settings</h3>
+  
+            <div class="form-group">
+              <label class="control-sidebar-subheading">
+                Show me as online
+                <input type="checkbox" class="pull-right" checked>
+              </label>
+            </div>
+            <!-- /.form-group -->
+  
+            <div class="form-group">
+              <label class="control-sidebar-subheading">
+                Turn off notifications
+                <input type="checkbox" class="pull-right">
+              </label>
+            </div>
+            <!-- /.form-group -->
+  
+            <div class="form-group">
+              <label class="control-sidebar-subheading">
+                Delete chat history
+                <a href="javascript:void(0)" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
+              </label>
+            </div>
+            <!-- /.form-group -->
+          </form>
+        </div>
+      </mk-tab-content>
+    </mk-tab>
+  </mk-tabs>

src/app/core/sidebar-right-inner/sidebar-right-inner.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SidebarRightInnerComponent } from './sidebar-right-inner.component';
+
+describe('SidebarRightInnerComponent', () => {
+  let component: SidebarRightInnerComponent;
+  let fixture: ComponentFixture<SidebarRightInnerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SidebarRightInnerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SidebarRightInnerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/core/sidebar-right-inner/sidebar-right-inner.component.ts

@@ -0,0 +1,75 @@
+import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
+
+import { Subscriber } from 'rxjs';
+
+import { LayoutStore } from 'angular-admin-lte';
+
+@Component({
+  selector: 'app-sidebar-right-inner',
+  templateUrl: './sidebar-right-inner.component.html',
+  styleUrls: ['./sidebar-right-inner.component.scss']
+})
+export class SidebarRightInnerComponent implements OnInit, OnDestroy {
+
+  public layout: string;
+  public isSidebarLeftCollapsed: boolean;
+  public isSidebarLeftExpandOnOver: boolean;
+  public isSidebarLeftMini: boolean;
+
+  private subscriptions = [];
+
+
+
+  constructor(
+    public layoutStore: LayoutStore,
+    public changeDetectorRef: ChangeDetectorRef
+    ) {}
+
+  ngOnInit() {
+    this.subscriptions.push(this.layoutStore.isSidebarLeftCollapsed.subscribe((value: boolean) => {
+      this.isSidebarLeftCollapsed = value;
+      this.changeDetectorRef.detectChanges();
+    }));
+    this.subscriptions.push(this.layoutStore.isSidebarLeftExpandOnOver.subscribe((value: boolean) => {
+      this.isSidebarLeftExpandOnOver = value;
+      this.changeDetectorRef.detectChanges();
+    }));
+    this.subscriptions.push(this.layoutStore.isSidebarLeftMini.subscribe((value: boolean) => {
+      this.isSidebarLeftMini = value;
+      this.changeDetectorRef.detectChanges();
+    }));
+
+  }
+
+  ngOnDestroy() {
+    this.removeSubscriptions();
+  }
+
+  private removeSubscriptions(): void {
+    if (this.subscriptions) {
+      this.subscriptions.forEach((subscription: Subscriber<any>) => {
+        subscription.unsubscribe();
+      });
+    }
+    this.subscriptions = [];
+  }
+
+  public onLayoutChange(event): void {
+    this.layout = event.target.checked ? event.target.getAttribute('value') : '';
+    this.layoutStore.setLayout(this.layout);
+  }
+
+  public changeSkin(event, color: string): void {
+    event.preventDefault();
+    this.layoutStore.setSkin(color);
+  }
+
+  public changeSidebarRightSkin(value: boolean): void {
+    if (value) {
+      this.layoutStore.setSidebarRightSkin('light');
+    } else {
+      this.layoutStore.setSidebarRightSkin('dark');
+    }
+  }
+
+}

src/app/data/measures.data.ts

@@ -0,0 +1,1156 @@
+
+export const measures =
+[
+  {
+    timeStamp: '01/07/2019 08:00',
+    voltA: 119.7390807,
+    voltB: 120.2765039,
+    voltC: 119.960822,
+    ampA: 8.298610002,
+    ampB: 7.945849673,
+    ampC: 8.514370702,
+    potA: 0.993667933,
+    potB: 0.955699019,
+    potC: 1.021390908
+  },
+  {
+    timeStamp: '01/07/2019 08:15',
+    voltA: 119.9870123,
+    voltB: 119.7309436,
+    voltC: 119.6583242,
+    ampA: 8.369239625,
+    ampB: 8.444681313,
+    ampC: 8.067437668,
+    potA: 1.004200058,
+    potB: 1.011089662,
+    potC: 0.965336072
+  },
+  {
+    timeStamp: '01/07/2019 08:30',
+    voltA: 120.1684774,
+    voltB: 119.5073759,
+    voltC: 119.5590522,
+    ampA: 8.041248594,
+    ampB: 7.692842473,
+    ampC: 8.093224654,
+    potA: 0.9663046,
+    potB: 0.919351417,
+    potC: 0.967618269
+  },
+  {
+    timeStamp: '01/07/2019 08:45',
+    voltA: 119.8309905,
+    voltB: 120.1889803,
+    voltC: 119.7625979,
+    ampA: 7.981196995,
+    ampB: 8.376915,
+    ampC: 8.024123368,
+    potA: 0.956394741,
+    potB: 1.006812872,
+    potC: 0.960989861
+  },
+  {
+    timeStamp: '01/07/2019 09:00',
+    voltA: 120.1087781,
+    voltB: 120.1676465,
+    voltC: 120.3920205,
+    ampA: 8.433257739,
+    ampB: 8.290556786,
+    ampC: 8.191510693,
+    potA: 1.012908282,
+    potB: 0.996256697,
+    potC: 0.986192524
+  },
+  {
+    timeStamp: '01/07/2019 09:15',
+    voltA: 120.2371546,
+    voltB: 120.1609551,
+    voltC: 120.4252212,
+    ampA: 8.135410692,
+    ampB: 7.723540203,
+    ampC: 7.846855577,
+    potA: 0.978178633,
+    potB: 0.928067967,
+    potC: 0.944959319
+  },
+  {
+    timeStamp: '01/07/2019 09:30',
+    voltA: 119.8499476,
+    voltB: 120.2740738,
+    voltC: 119.797522,
+    ampA: 7.713774221,
+    ampB: 7.654371921,
+    ampC: 8.111018412,
+    potA: 0.924495436,
+    potB: 0.920622493,
+    potC: 0.971679906
+  },
+  {
+    timeStamp: '01/07/2019 09:45',
+    voltA: 119.5168781,
+    voltB: 119.8598256,
+    voltC: 119.9314394,
+    ampA: 7.675037889,
+    ampB: 8.485398627,
+    ampC: 8.225002463,
+    potA: 0.917296568,
+    potB: 1.0170584,
+    potC: 0.986436385
+  },
+  {
+    timeStamp: '01/07/2019 10:00',
+    voltA: 119.6556857,
+    voltB: 120.2986436,
+    voltC: 119.6104392,
+    ampA: 8.557403428,
+    ampB: 8.39883774,
+    ampC: 8.000328557,
+    potA: 1.023941975,
+    potB: 1.010368788,
+    potC: 0.956922813
+  },
+  {
+    timeStamp: '01/07/2019 10:15',
+    voltA: 119.7905877,
+    voltB: 119.7643394,
+    voltC: 119.7122252,
+    ampA: 7.858166508,
+    ampB: 8.369670833,
+    ampC: 8.364538688,
+    potA: 0.941334384,
+    potB: 1.002388099,
+    potC: 1.001337539
+  },
+  {
+    timeStamp: '01/07/2019 10:30',
+    voltA: 119.7423439,
+    voltB: 119.5924109,
+    voltC: 119.7263251,
+    ampA: 8.002674058,
+    ampB: 8.1536277,
+    ampC: 8.04358054,
+    potA: 0.958258949,
+    potB: 0.975111994,
+    potC: 0.963028339
+  },
+  {
+    timeStamp: '01/07/2019 10:45',
+    voltA: 120.1211981,
+    voltB: 120.2143863,
+    voltC: 119.7599291,
+    ampA: 7.829443029,
+    ampB: 8.469659215,
+    ampC: 8.517541186,
+    potA: 0.940482077,
+    potB: 1.018174885,
+    potC: 1.020060128
+  },
+  {
+    timeStamp: '01/07/2019 11:00',
+    voltA: 119.6293836,
+    voltB: 120.4784154,
+    voltC: 119.5578997,
+    ampA: 8.280388294,
+    ampB: 7.686330711,
+    ampC: 8.345001204,
+    potA: 0.990577747,
+    potB: 0.926036945,
+    potC: 0.997710817
+  },
+  {
+    timeStamp: '01/07/2019 11:15',
+    voltA: 120.1414517,
+    voltB: 119.8457783,
+    voltC: 119.6722689,
+    ampA: 8.203384532,
+    ampB: 8.037544484,
+    ampC: 8.426445173,
+    potA: 0.985566527,
+    potB: 0.963265774,
+    potC: 1.008411813
+  },
+  {
+    timeStamp: '01/07/2019 11:30',
+    voltA: 120.3417341,
+    voltB: 120.2905463,
+    voltC: 120.0251942,
+    ampA: 8.371859475,
+    ampB: 8.297537277,
+    ampC: 7.785112314,
+    potA: 1.007484087,
+    potB: 0.998115292,
+    potC: 0.934409617
+  },
+  {
+    timeStamp: '01/07/2019 11:45',
+    voltA: 119.6305675,
+    voltB: 120.1426996,
+    voltC: 119.6496737,
+    ampA: 8.270770793,
+    ampB: 8.414931024,
+    ampC: 7.788571005,
+    potA: 0.989437004,
+    potB: 1.01099253,
+    potC: 0.93189998
+  },
+  {
+    timeStamp: '01/07/2019 12:00',
+    voltA: 120.0877362,
+    voltB: 120.3293686,
+    voltC: 119.7721854,
+    ampA: 8.580149179,
+    ampB: 8.032269914,
+    ampC: 8.138617673,
+    potA: 1.030370692,
+    potB: 0.966517967,
+    potC: 0.974780025
+  },
+  {
+    timeStamp: '01/07/2019 12:15',
+    voltA: 120.1402415,
+    voltB: 120.2035906,
+    voltC: 119.6292385,
+    ampA: 8.113992716,
+    ampB: 8.098853831,
+    ampC: 8.191165431,
+    potA: 0.974817045,
+    potB: 0.97351131,
+    potC: 0.979902883
+  },
+  {
+    timeStamp: '01/07/2019 12:30',
+    voltA: 119.6964384,
+    voltB: 119.6170746,
+    voltC: 119.7926902,
+    ampA: 7.735932076,
+    ampB: 8.322381222,
+    ampC: 7.857772813,
+    potA: 0.925963518,
+    potB: 0.995498895,
+    potC: 0.941303744
+  },
+  {
+    timeStamp: '01/07/2019 12:45',
+    voltA: 120.4978232,
+    voltB: 120.2358185,
+    voltC: 119.8522057,
+    ampA: 8.003097774,
+    ampB: 8.177814035,
+    ampC: 8.369515341,
+    potA: 0.964355861,
+    potB: 0.983266164,
+    potC: 1.003104874
+  },
+  {
+    timeStamp: '01/07/2019 13:00',
+    voltA: 119.6558108,
+    voltB: 120.096985,
+    voltC: 120.494494,
+    ampA: 7.680847096,
+    ampB: 8.310328339,
+    ampC: 8.565364332,
+    potA: 0.919057987,
+    potB: 0.998045378,
+    potC: 1.032079241
+  },
+  {
+    timeStamp: '01/07/2019 13:15',
+    voltA: 119.7079672,
+    voltB: 119.5716794,
+    voltC: 120.2204705,
+    ampA: 7.78396386,
+    ampB: 7.857896232,
+    ampC: 8.03359088,
+    potA: 0.931802491,
+    potB: 0.939581849,
+    potC: 0.965802076
+  },
+  {
+    timeStamp: '01/07/2019 13:30',
+    voltA: 119.9845481,
+    voltB: 120.2431784,
+    voltC: 119.7680622,
+    ampA: 8.304702507,
+    ampB: 7.755741718,
+    ampC: 7.730635515,
+    potA: 0.996435978,
+    potB: 0.932575035,
+    potC: 0.925883235
+  },
+  {
+    timeStamp: '01/07/2019 13:45',
+    voltA: 120.2669305,
+    voltB: 120.057963,
+    voltC: 119.9687296,
+    ampA: 8.324985122,
+    ampB: 7.606838425,
+    ampC: 7.973678993,
+    potA: 1.001220407,
+    potB: 0.913261526,
+    potC: 0.956592139
+  },
+  {
+    timeStamp: '01/07/2019 14:00',
+    voltA: 119.74827,
+    voltB: 119.5780725,
+    voltC: 120.1737561,
+    ampA: 8.172607618,
+    ampB: 7.737252352,
+    ampC: 8.360145185,
+    potA: 0.978655623,
+    potB: 0.925205723,
+    potC: 1.004670049
+  },
+  {
+    timeStamp: '01/07/2019 14:15',
+    voltA: 119.5168391,
+    voltB: 119.5903676,
+    voltC: 119.7756315,
+    ampA: 8.304771558,
+    ampB: 8.157928242,
+    ampC: 7.70578271,
+    potA: 0.992560046,
+    potB: 0.975609638,
+    potC: 0.92296499
+  },
+  {
+    timeStamp: '01/07/2019 14:30',
+    voltA: 120.3800435,
+    voltB: 120.3412344,
+    voltC: 119.7808908,
+    ampA: 8.25552905,
+    ampB: 8.586068937,
+    ampC: 7.652397213,
+    potA: 0.993800947,
+    potB: 1.033258135,
+    potC: 0.916610955
+  },
+  {
+    timeStamp: '01/07/2019 14:45',
+    voltA: 119.8277738,
+    voltB: 119.6087349,
+    voltC: 119.8098312,
+    ampA: 8.181705373,
+    ampB: 7.746852766,
+    ampC: 7.957378645,
+    potA: 0.980395541,
+    potB: 0.926591259,
+    potC: 0.953372192
+  },
+  {
+    timeStamp: '01/07/2019 15:00',
+    voltA: 120.1085436,
+    voltB: 119.5570275,
+    voltC: 120.2540712,
+    ampA: 8.149618043,
+    ampB: 7.679350509,
+    ampC: 7.796298791,
+    potA: 0.978838754,
+    potB: 0.91812032,
+    potC: 0.93753667
+  },
+  {
+    timeStamp: '01/07/2019 15:15',
+    voltA: 119.5412424,
+    voltB: 119.6394596,
+    voltC: 120.4123223,
+    ampA: 8.497046208,
+    ampB: 7.747009824,
+    ampC: 7.823219791,
+    potA: 1.015747461,
+    potB: 0.926848069,
+    potC: 0.942012063
+  },
+  {
+    timeStamp: '01/07/2019 15:30',
+    voltA: 120.3314413,
+    voltB: 120.1931628,
+    voltC: 120.4664532,
+    ampA: 8.31850107,
+    ampB: 7.787912612,
+    ampC: 7.876764621,
+    potA: 1.000977223,
+    potB: 0.936053848,
+    potC: 0.948885896
+  },
+  {
+    timeStamp: '01/07/2019 15:45',
+    voltA: 119.793045,
+    voltB: 119.6661138,
+    voltC: 119.9124023,
+    ampA: 7.84004361,
+    ampB: 7.763854055,
+    ampC: 7.970842013,
+    potA: 0.939182697,
+    potB: 0.929070243,
+    potC: 0.955802814
+  },
+  {
+    timeStamp: '01/07/2019 16:00',
+    voltA: 119.7323653,
+    voltB: 120.4193121,
+    voltC: 119.5280832,
+    ampA: 7.906334399,
+    ampB: 8.450726561,
+    ampC: 8.038403734,
+    potA: 0.946644118,
+    potB: 1.017630679,
+    potC: 0.96081499
+  },
+  {
+    timeStamp: '01/07/2019 16:15',
+    voltA: 120.2798582,
+    voltB: 119.918841,
+    voltC: 120.2472121,
+    ampA: 8.064620583,
+    ampB: 8.174804458,
+    ampC: 8.050648786,
+    potA: 0.97001142,
+    potB: 0.980313076,
+    potC: 0.968068072
+  },
+  {
+    timeStamp: '01/07/2019 16:30',
+    voltA: 119.5601301,
+    voltB: 119.9967716,
+    voltC: 120.3808259,
+    ampA: 8.561746312,
+    ampB: 7.87218038,
+    ampC: 7.690536773,
+    potA: 1.023643503,
+    potB: 0.944636231,
+    potC: 0.925793168
+  },
+  {
+    timeStamp: '01/07/2019 16:45',
+    voltA: 120.465634,
+    voltB: 119.8649406,
+    voltC: 120.2474182,
+    ampA: 8.2111473,
+    ampB: 7.69115041,
+    ampC: 8.437320922,
+    potA: 0.989161065,
+    potB: 0.921899287,
+    potC: 1.014566057
+  },
+  {
+    timeStamp: '01/07/2019 17:00',
+    voltA: 120.0743654,
+    voltB: 119.7873669,
+    voltC: 119.7470981,
+    ampA: 7.739799479,
+    ampB: 7.935529215,
+    ampC: 8.487115976,
+    potA: 0.929351511,
+    potB: 0.95057615,
+    potC: 1.016307509
+  },
+  {
+    timeStamp: '01/07/2019 17:15',
+    voltA: 120.4065283,
+    voltB: 120.2442517,
+    voltC: 119.6994581,
+    ampA: 7.615118974,
+    ampB: 7.801620989,
+    ampC: 8.140134559,
+    potA: 0.916910038,
+    potB: 0.938100078,
+    potC: 0.974369695
+  },
+  {
+    timeStamp: '01/07/2019 17:30',
+    voltA: 119.5377785,
+    voltB: 120.2138092,
+    voltC: 119.6129066,
+    ampA: 8.280217707,
+    ampB: 7.787435098,
+    ampC: 8.350187185,
+    potA: 0.98979883,
+    potB: 0.936157237,
+    potC: 0.99879016
+  },
+  {
+    timeStamp: '01/07/2019 17:45',
+    voltA: 120.1424669,
+    voltB: 119.5803089,
+    voltC: 119.7494841,
+    ampA: 7.99929817,
+    ampB: 8.563020538,
+    ampC: 8.103274852,
+    potA: 0.961055415,
+    potB: 1.023968641,
+    potC: 0.970362983
+  },
+  {
+    timeStamp: '01/07/2019 18:00',
+    voltA: 120.0084693,
+    voltB: 119.9645292,
+    voltC: 120.464352,
+    ampA: 8.558594079,
+    ampB: 7.719110333,
+    ampC: 8.213837334,
+    potA: 1.027103775,
+    potB: 0.926019437,
+    potC: 0.989474592
+  },
+  {
+    timeStamp: '01/07/2019 18:15',
+    voltA: 119.6157037,
+    voltB: 119.5548642,
+    voltC: 119.619822,
+    ampA: 8.047110082,
+    ampB: 8.383712732,
+    ampC: 8.015683245,
+    potA: 0.962560735,
+    potB: 1.002313637,
+    potC: 0.958834603
+  },
+  {
+    timeStamp: '01/07/2019 18:30',
+    voltA: 119.8592425,
+    voltB: 120.0794147,
+    voltC: 119.654828,
+    ampA: 8.29583171,
+    ampB: 8.232853951,
+    ampC: 7.6640015,
+    potA: 0.994332104,
+    potB: 0.988596284,
+    potC: 0.917034782
+  },
+  {
+    timeStamp: '01/07/2019 18:45',
+    voltA: 119.9155712,
+    voltB: 119.762406,
+    voltC: 120.3287262,
+    ampA: 8.363807146,
+    ampB: 8.043935002,
+    ampC: 8.542191207,
+    potA: 1.002950712,
+    potB: 0.963361009,
+    potC: 1.027870987
+  },
+  {
+    timeStamp: '01/07/2019 19:00',
+    voltA: 120.1321289,
+    voltB: 119.5632268,
+    voltC: 119.7514064,
+    ampA: 8.214858448,
+    ampB: 7.990141864,
+    ampC: 8.544631476,
+    potA: 0.986868434,
+    potB: 0.955327144,
+    potC: 1.023231637
+  },
+  {
+    timeStamp: '01/07/2019 19:15',
+    voltA: 119.9932168,
+    voltB: 120.380272,
+    voltC: 120.0635866,
+    ampA: 7.69965709,
+    ampB: 7.714840009,
+    ampC: 7.829990995,
+    potA: 0.923906622,
+    potB: 0.928714539,
+    potC: 0.940096802
+  },
+  {
+    timeStamp: '01/07/2019 19:30',
+    voltA: 119.546786,
+    voltB: 119.6778098,
+    voltC: 120.4133033,
+    ampA: 8.522908796,
+    ampB: 7.62940879,
+    ampC: 7.929995714,
+    potA: 1.018886354,
+    potB: 0.913070934,
+    potC: 0.954876979
+  },
+  {
+    timeStamp: '01/07/2019 19:45',
+    voltA: 120.4743747,
+    voltB: 120.1097096,
+    voltC: 120.1209818,
+    ampA: 8.513101445,
+    ampB: 7.68981119,
+    ampC: 7.759634562,
+    potA: 1.025610573,
+    potB: 0.923620989,
+    potC: 0.932094922
+  },
+  {
+    timeStamp: '01/07/2019 20:00',
+    voltA: 120.0741533,
+    voltB: 120.3153217,
+    voltC: 119.8730588,
+    ampA: 7.942247038,
+    ampB: 7.736034,
+    ampC: 7.759456731,
+    potA: 0.953658589,
+    potB: 0.930763419,
+    potC: 0.930149813
+  },
+  {
+    timeStamp: '01/07/2019 20:15',
+    voltA: 120.2239739,
+    voltB: 120.3235503,
+    voltC: 120.3734834,
+    ampA: 8.244394025,
+    ampB: 8.441339818,
+    ampC: 8.415803384,
+    potA: 0.991173812,
+    potB: 1.015691976,
+    potC: 1.013039569
+  },
+  {
+    timeStamp: '01/07/2019 20:30',
+    voltA: 119.8046092,
+    voltB: 119.8652766,
+    voltC: 119.8544465,
+    ampA: 7.679419234,
+    ampB: 8.38384035,
+    ampC: 8.372880134,
+    potA: 0.92002982,
+    potB: 1.004931342,
+    potC: 1.003526914
+  },
+  {
+    timeStamp: '01/07/2019 20:45',
+    voltA: 120.2170294,
+    voltB: 120.1605695,
+    voltC: 120.4301739,
+    ampA: 8.256348165,
+    ampB: 7.617517054,
+    ampC: 8.414940111,
+    potA: 0.99255365,
+    potB: 0.915325188,
+    potC: 1.013412701
+  },
+  {
+    timeStamp: '01/07/2019 21:00',
+    voltA: 119.5622114,
+    voltB: 120.4035675,
+    voltC: 120.4107742,
+    ampA: 8.028183553,
+    ampB: 8.175181191,
+    ampC: 8.467189294,
+    potA: 0.959867379,
+    potB: 0.98432098,
+    potC: 1.019540818
+  },
+  {
+    timeStamp: '01/07/2019 21:15',
+    voltA: 120.1419284,
+    voltB: 119.7953607,
+    voltC: 120.0110183,
+    ampA: 7.63716167,
+    ampB: 8.008278579,
+    ampC: 7.8798718,
+    potA: 0.91754333,
+    potB: 0.959354621,
+    potC: 0.945671439
+  },
+  {
+    timeStamp: '01/07/2019 21:30',
+    voltA: 120.1664074,
+    voltB: 120.3783845,
+    voltC: 120.4645713,
+    ampA: 8.563912836,
+    ampB: 7.942652571,
+    ampC: 7.950675349,
+    potA: 1.029094639,
+    potB: 0.956123685,
+    potC: 0.957774698
+  },
+  {
+    timeStamp: '01/07/2019 21:45',
+    voltA: 120.0695568,
+    voltB: 119.5949386,
+    voltC: 119.6322366,
+    ampA: 7.668242582,
+    ampB: 8.036504037,
+    ampC: 7.607549069,
+    potA: 0.920722489,
+    potB: 0.961125207,
+    potC: 0.91010811
+  },
+  {
+    timeStamp: '01/07/2019 22:00',
+    voltA: 120.2190663,
+    voltB: 120.2175821,
+    voltC: 120.2133955,
+    ampA: 7.940432487,
+    ampB: 8.001693419,
+    ampC: 7.869310602,
+    potA: 0.95459138,
+    potB: 0.961944236,
+    potC: 0.945996548
+  },
+  {
+    timeStamp: '01/07/2019 22:15',
+    voltA: 120.2119085,
+    voltB: 120.2023055,
+    voltC: 120.4605715,
+    ampA: 8.261095237,
+    ampB: 8.057871181,
+    ampC: 7.779037787,
+    potA: 0.993082025,
+    potB: 0.968574694,
+    potC: 0.937067337
+  },
+  {
+    timeStamp: '01/07/2019 22:30',
+    voltA: 119.9383541,
+    voltB: 119.7352387,
+    voltC: 120.0657684,
+    ampA: 8.239228244,
+    ampB: 8.185380492,
+    ampC: 8.070631069,
+    potA: 0.988199475,
+    potB: 0.980078487,
+    potC: 0.969006521
+  },
+  {
+    timeStamp: '01/07/2019 22:45',
+    voltA: 120.1855991,
+    voltB: 120.1655025,
+    voltC: 119.8572007,
+    ampA: 7.787723902,
+    ampB: 8.558258213,
+    ampC: 8.17080926,
+    potA: 0.935972263,
+    potB: 1.028407399,
+    potC: 0.979330325
+  },
+  {
+    timeStamp: '01/07/2019 23:00',
+    voltA: 119.7116243,
+    voltB: 120.1499067,
+    voltC: 120.3592458,
+    ampA: 8.372104676,
+    ampB: 8.450115482,
+    ampC: 8.326996848,
+    potA: 1.00223825,
+    potB: 1.015280587,
+    potC: 1.00223106
+  },
+  {
+    timeStamp: '01/07/2019 23:15',
+    voltA: 120.2248038,
+    voltB: 119.9488418,
+    voltC: 120.1121545,
+    ampA: 7.737300451,
+    ampB: 7.834887726,
+    ampC: 7.675338368,
+    potA: 0.930215428,
+    potB: 0.939785708,
+    potC: 0.921901428
+  },
+  {
+    timeStamp: '01/07/2019 23:30',
+    voltA: 120.4210381,
+    voltB: 119.5459634,
+    voltC: 120.3472818,
+    ampA: 8.09559559,
+    ampB: 7.895474264,
+    ampC: 7.707666542,
+    potA: 0.974880025,
+    potB: 0.943872077,
+    potC: 0.927596717
+  },
+  {
+    timeStamp: '01/07/2019 23:45',
+    voltA: 119.9086012,
+    voltB: 120.0287604,
+    voltC: 120.4677751,
+    ampA: 8.300230186,
+    ampB: 8.530651577,
+    ampC: 7.764114409,
+    potA: 0.995268991,
+    potB: 1.023923534,
+    potC: 0.935325589
+  },
+  {
+    timeStamp: '02/07/2019 00:00',
+    voltA: 119.6758343,
+    voltB: 119.9839163,
+    voltC: 120.4083294,
+    ampA: 8.573380938,
+    ampB: 7.933739968,
+    ampC: 7.99173348,
+    potA: 1.026026516,
+    potB: 0.951921192,
+    potC: 0.962271277
+  },
+  {
+    timeStamp: '02/07/2019 00:15',
+    voltA: 119.7449095,
+    voltB: 120.1842537,
+    voltC: 120.2569011,
+    ampA: 8.513941365,
+    ampB: 8.400479457,
+    ampC: 8.061198514,
+    potA: 1.019501138,
+    potB: 1.009605354,
+    potC: 0.969414752
+  },
+  {
+    timeStamp: '02/07/2019 00:30',
+    voltA: 119.5051228,
+    voltB: 120.4200298,
+    voltC: 119.5875464,
+    ampA: 7.764791736,
+    ampB: 8.452846555,
+    ampC: 8.306463229,
+    potA: 0.92793239,
+    potB: 1.017892034,
+    potC: 0.993349557
+  },
+  {
+    timeStamp: '02/07/2019 00:45',
+    voltA: 119.6434441,
+    voltB: 120.289076,
+    voltC: 119.6089338,
+    ampA: 8.153641305,
+    ampB: 8.044816795,
+    ampC: 8.506909817,
+    potA: 0.975529728,
+    potB: 0.967703579,
+    potC: 1.017502413
+  },
+  {
+    timeStamp: '02/07/2019 01:00',
+    voltA: 119.6638822,
+    voltB: 120.110746,
+    voltC: 120.0281535,
+    ampA: 8.039641803,
+    ampB: 7.706499016,
+    ampC: 7.919660232,
+    potA: 0.96205475,
+    potB: 0.925633346,
+    potC: 0.950582194
+  },
+  {
+    timeStamp: '02/07/2019 01:15',
+    voltA: 119.8429521,
+    voltB: 120.1533916,
+    voltC: 119.5648204,
+    ampA: 7.745299173,
+    ampB: 7.937762076,
+    ampC: 7.843898644,
+    potA: 0.928219518,
+    potB: 0.953749036,
+    potC: 0.937854333
+  },
+  {
+    timeStamp: '02/07/2019 01:30',
+    voltA: 119.5951497,
+    voltB: 119.7396335,
+    voltC: 120.2410349,
+    ampA: 7.601370931,
+    ampB: 7.800460459,
+    ampC: 7.963549521,
+    potA: 0.909087094,
+    potB: 0.934024276,
+    potC: 0.957545435
+  },
+  {
+    timeStamp: '02/07/2019 01:45',
+    voltA: 120.2401594,
+    voltB: 119.5503519,
+    voltC: 120.4010556,
+    ampA: 8.183164676,
+    ampB: 8.073688439,
+    ampC: 8.033608607,
+    potA: 0.983945025,
+    potB: 0.965212294,
+    potC: 0.967254956
+  },
+  {
+    timeStamp: '02/07/2019 02:00',
+    voltA: 119.8789107,
+    voltB: 120.2530453,
+    voltC: 119.9720496,
+    ampA: 7.880575408,
+    ampB: 8.354172888,
+    ampC: 7.793969664,
+    potA: 0.944714795,
+    potB: 1.004614731,
+    potC: 0.935058515
+  },
+  {
+    timeStamp: '02/07/2019 02:15',
+    voltA: 119.5586519,
+    voltB: 119.7683466,
+    voltC: 120.0008385,
+    ampA: 8.309846521,
+    ampB: 7.738186359,
+    ampC: 8.345211091,
+    potA: 0.993514047,
+    potB: 0.926789786,
+    potC: 1.001432328
+  },
+  {
+    timeStamp: '02/07/2019 02:30',
+    voltA: 120.4412887,
+    voltB: 119.906235,
+    voltC: 120.3912186,
+    ampA: 7.93325543,
+    ampB: 8.379327194,
+    ampC: 7.601621946,
+    potA: 0.955491508,
+    potB: 1.004733576,
+    potC: 0.915168529
+  },
+  {
+    timeStamp: '02/07/2019 02:45',
+    voltA: 119.7571574,
+    voltB: 119.7804651,
+    voltC: 119.6224323,
+    ampA: 7.694975102,
+    ampB: 7.966682409,
+    ampC: 8.435552012,
+    potA: 0.921528345,
+    potB: 0.954252924,
+    potC: 1.009081249
+  },
+  {
+    timeStamp: '02/07/2019 03:00',
+    voltA: 119.9961163,
+    voltB: 119.7916406,
+    voltC: 119.9872402,
+    ampA: 7.879171501,
+    ampB: 7.676266882,
+    ampC: 7.714848256,
+    potA: 0.94546998,
+    potB: 0.919552603,
+    potC: 0.925683351
+  },
+  {
+    timeStamp: '02/07/2019 03:15',
+    voltA: 120.151551,
+    voltB: 119.6276784,
+    voltC: 119.9071604,
+    ampA: 7.644491918,
+    ampB: 8.344710406,
+    ampC: 8.589926186,
+    potA: 0.91849756,
+    potB: 0.998258333,
+    potC: 1.029993657
+  },
+  {
+    timeStamp: '02/07/2019 03:30',
+    voltA: 120.0232041,
+    voltB: 119.6672949,
+    voltC: 119.5549,
+    ampA: 8.542615829,
+    ampB: 7.686881329,
+    ampC: 8.249087975,
+    potA: 1.025312123,
+    potB: 0.919868295,
+    potC: 0.986218888
+  },
+  {
+    timeStamp: '02/07/2019 03:45',
+    voltA: 120.1373904,
+    voltB: 119.9299102,
+    voltC: 120.3509784,
+    ampA: 7.765469826,
+    ampB: 8.355058778,
+    ampC: 8.45540511,
+    potA: 0.93292328,
+    potB: 1.002021449,
+    potC: 1.017616278
+  },
+  {
+    timeStamp: '02/07/2019 04:00',
+    voltA: 120.2129395,
+    voltB: 119.7667682,
+    voltC: 119.5022041,
+    ampA: 8.524914602,
+    ampB: 8.479344976,
+    ampC: 8.396855305,
+    potA: 1.024805043,
+    potB: 1.015543744,
+    potC: 1.003442716
+  },
+  {
+    timeStamp: '02/07/2019 04:15',
+    voltA: 119.6584152,
+    voltB: 119.7092319,
+    voltC: 120.2214419,
+    ampA: 8.280739598,
+    ampB: 8.513057001,
+    ampC: 8.193140578,
+    potA: 0.990860177,
+    potB: 1.019091515,
+    potC: 0.984991174
+  },
+  {
+    timeStamp: '02/07/2019 04:30',
+    voltA: 120.3256618,
+    voltB: 120.0883054,
+    voltC: 120.4980127,
+    ampA: 8.109035111,
+    ampB: 8.232462075,
+    ampC: 8.204938038,
+    potA: 0.975725016,
+    potB: 0.98862242,
+    potC: 0.988678728
+  },
+  {
+    timeStamp: '02/07/2019 04:45',
+    voltA: 120.3067336,
+    voltB: 120.3909391,
+    voltC: 120.356172,
+    ampA: 8.461708613,
+    ampB: 8.475638895,
+    ampC: 7.812800745,
+    potA: 1.018000524,
+    potB: 1.020390126,
+    potC: 0.94031879
+  },
+  {
+    timeStamp: '02/07/2019 05:00',
+    voltA: 120.3196001,
+    voltB: 120.2967644,
+    voltC: 119.8183658,
+    ampA: 7.819017311,
+    ampB: 8.173920405,
+    ampC: 8.069328008,
+    potA: 0.940781036,
+    potB: 0.983296177,
+    potC: 0.966853695
+  },
+  {
+    timeStamp: '02/07/2019 05:15',
+    voltA: 119.9844861,
+    voltB: 120.0431692,
+    voltC: 119.6379268,
+    ampA: 7.715763066,
+    ampB: 7.767284867,
+    ampC: 8.282056011,
+    potA: 0.925771866,
+    potB: 0.932409492,
+    potC: 0.990848011
+  },
+  {
+    timeStamp: '02/07/2019 05:30',
+    voltA: 119.5105623,
+    voltB: 119.7881525,
+    voltC: 120.4030919,
+    ampA: 7.754281902,
+    ampB: 7.852347053,
+    ampC: 7.831325082,
+    potA: 0.92671859,
+    potB: 0.940618147,
+    potC: 0.942915754
+  },
+  {
+    timeStamp: '02/07/2019 05:45',
+    voltA: 119.7613177,
+    voltB: 119.6791026,
+    voltC: 120.0354846,
+    ampA: 8.433906156,
+    ampB: 7.728545582,
+    ampC: 7.779055461,
+    potA: 1.010055715,
+    potB: 0.9249454,
+    potC: 0.933762692
+  },
+  {
+    timeStamp: '02/07/2019 06:00',
+    voltA: 119.6791608,
+    voltB: 119.5906486,
+    voltC: 119.8744636,
+    ampA: 7.86035021,
+    ampB: 8.270915426,
+    ampC: 8.045577386,
+    potA: 0.940720117,
+    potB: 0.98912414,
+    potC: 0.964459273
+  },
+  {
+    timeStamp: '02/07/2019 06:15',
+    voltA: 119.8033928,
+    voltB: 119.7537999,
+    voltC: 120.4641419,
+    ampA: 8.293526208,
+    ampB: 7.784105873,
+    ampC: 7.661766165,
+    potA: 0.993592578,
+    potB: 0.932176257,
+    potC: 0.922968087
+  },
+  {
+    timeStamp: '02/07/2019 06:30',
+    voltA: 120.4167142,
+    voltB: 119.5334602,
+    voltC: 119.6298029,
+    ampA: 8.007350561,
+    ampB: 8.218779801,
+    ampC: 8.283234293,
+    potA: 0.964218844,
+    potB: 0.982419188,
+    potC: 0.990921686
+  },
+  {
+    timeStamp: '02/07/2019 06:45',
+    voltA: 119.6263509,
+    voltB: 119.5398697,
+    voltC: 119.5134235,
+    ampA: 7.819281731,
+    ampB: 7.706564762,
+    ampC: 8.536939607,
+    potA: 0.93539214,
+    potB: 0.921241748,
+    potC: 1.020278879
+  },
+  {
+    timeStamp: '02/07/2019 07:00',
+    voltA: 119.502882,
+    voltB: 119.549509,
+    voltC: 120.3265325,
+    ampA: 7.832379946,
+    ampB: 8.302481128,
+    ampC: 8.511183399,
+    potA: 0.935991977,
+    potB: 0.992557543,
+    potC: 1.024121186
+  },
+  {
+    timeStamp: '02/07/2019 07:15',
+    voltA: 120.4348818,
+    voltB: 120.274579,
+    voltC: 120.0106768,
+    ampA: 7.96762779,
+    ampB: 8.481516371,
+    ampC: 8.325235963,
+    potA: 0.959580311,
+    potB: 1.020110811,
+    potC: 0.999117203
+  },
+  {
+    timeStamp: '02/07/2019 07:30',
+    voltA: 120.3938575,
+    voltB: 119.6237839,
+    voltC: 119.6513059,
+    ampA: 8.45993605,
+    ampB: 7.822786688,
+    ampC: 7.968046502,
+    potA: 1.018524335,
+    potB: 0.935791344,
+    potC: 0.95338717
+  },
+  {
+    timeStamp: '02/07/2019 07:45',
+    voltA: 120.3998004,
+    voltB: 119.7877279,
+    voltC: 119.7792491,
+    ampA: 8.314715293,
+    ampB: 7.868113425,
+    ampC: 8.215350092,
+    potA: 1.001090062,
+    potB: 0.94250343,
+    potC: 0.984028465
+  }
+]

src/app/data/measures.ts

@@ -0,0 +1,18 @@
+import { Observable } from 'rxjs';
+
+export interface Measure {
+  timeStamp: string;
+  voltA: number;
+  voltB: number;
+  voltC: number;
+  ampA: number;
+  ampB: number;
+  ampC: number;
+  potA: number;
+  potB: number;
+  potC: number;
+}
+
+export abstract class MeasureData {
+  abstract getMeasures(): Observable<Measure[]>;
+}

src/app/data/plants.data.ts

@@ -0,0 +1,191 @@
+import { Plant } from './plants';
+
+export const plantsData: Plant[] = [
+  {
+    id: 0,
+    name: 'Exozent',
+    state: true,
+    installDate: '2018-06-06',
+    country: 'El Salvador',
+    city: 'Zacatecoluca',
+    latitude: 13.49,
+    longitude: -88.95,
+    installedCapacity: 60
+  },
+  {
+    id: 1,
+    name: 'Norsup',
+    state: true,
+    installDate: '2019-01-13',
+    country: 'El Salvador',
+    city: 'San Miguel',
+    latitude: 13.5,
+    longitude: -88.93,
+    installedCapacity: 239
+  },
+  {
+    id: 2,
+    name: 'Digique',
+    state: true,
+    installDate: '2018-08-20',
+    country: 'El Salvador',
+    city: 'San Salvador',
+    latitude: 13.66,
+    longitude: -88.93,
+    installedCapacity: 269
+  },
+  {
+    id: 3,
+    name: 'Zeam',
+    state: false,
+    installDate: '2018-05-14',
+    country: 'El Salvador',
+    city: 'La Union',
+    latitude: 13.44,
+    longitude: -88.99,
+    installedCapacity: 21
+  },
+  {
+    id: 4,
+    name: 'Bitrex',
+    state: true,
+    installDate: '2019-05-31',
+    country: 'El Salvador',
+    city: 'Zacatecoluca',
+    latitude: 13.47,
+    longitude: -88.85,
+    installedCapacity: 77
+  },
+  {
+    id: 5,
+    name: 'Polaria',
+    state: false,
+    installDate: '2018-11-27',
+    country: 'El Salvador',
+    city: 'San Miguel',
+    latitude: 13.54,
+    longitude: -88.95,
+    installedCapacity: 56
+  },
+  {
+    id: 6,
+    name: 'Velity',
+    state: false,
+    installDate: '2018-09-11',
+    country: 'El Salvador',
+    city: 'La Union',
+    latitude: 13.63,
+    longitude: -89.03,
+    installedCapacity: 111
+  },
+  {
+    id: 7,
+    name: 'Farmex',
+    state: true,
+    installDate: '2018-11-05',
+    country: 'El Salvador',
+    city: 'San Vicente',
+    latitude: 13.62,
+    longitude: -89.01,
+    installedCapacity: 140
+  },
+  {
+    id: 8,
+    name: 'Wazzu',
+    state: false,
+    installDate: '2019-05-04',
+    country: 'El Salvador',
+    city: 'San Vicente',
+    latitude: 13.64,
+    longitude: -88.86,
+    installedCapacity: 4
+  },
+  {
+    id: 9,
+    name: 'Olympix',
+    state: true,
+    installDate: '2018-06-10',
+    country: 'El Salvador',
+    city: 'San Miguel',
+    latitude: 13.6,
+    longitude: -88.82,
+    installedCapacity: 131
+  },
+  {
+    id: 10,
+    name: 'Fossiel',
+    state: false,
+    installDate: '2018-02-19',
+    country: 'El Salvador',
+    city: 'Zacatecoluca',
+    latitude: 13.62,
+    longitude: -88.92,
+    installedCapacity: 69
+  },
+  {
+    id: 11,
+    name: 'Immunics',
+    state: true,
+    installDate: '2018-10-17',
+    country: 'El Salvador',
+    city: 'Zacatecoluca',
+    latitude: 13.62,
+    longitude: -88.88,
+    installedCapacity: 136
+  },
+  {
+    id: 12,
+    name: 'Uberlux',
+    state: false,
+    installDate: '2019-02-28',
+    country: 'El Salvador',
+    city: 'San Vicente',
+    latitude: 13.52,
+    longitude: -88.94,
+    installedCapacity: 228
+  },
+  {
+    id: 13,
+    name: 'Vitricomp',
+    state: false,
+    installDate: '2018-05-11',
+    country: 'El Salvador',
+    city: 'La Union',
+    latitude: 13.48,
+    longitude: -88.76,
+    installedCapacity: 118
+  },
+  {
+    id: 14,
+    name: 'Cormoran',
+    state: false,
+    installDate: '2018-07-10',
+    country: 'El Salvador',
+    city: 'San Salvador',
+    latitude: 13.45,
+    longitude: -88.89,
+    installedCapacity: 14
+  },
+  {
+    id: 15,
+    name: 'Quarmony',
+    state: false,
+    installDate: '2019-03-27',
+    country: 'El Salvador',
+    city: 'San Miguel',
+    latitude: 13.64,
+    longitude: -88.74,
+    installedCapacity: 263
+  },
+  {
+    id: 16,
+    name: 'Bostonic',
+    state: false,
+    installDate: '2019-02-17',
+    country: 'El Salvador',
+    city: 'Zacatecoluca',
+    latitude: 13.47,
+    longitude: -88.82,
+    installedCapacity: 204
+  }
+];

src/app/data/plants.ts

@@ -0,0 +1,18 @@
+import { Observable } from 'rxjs';
+
+export interface Plant {
+    id: number;
+    name: string;
+    state: boolean;
+    installDate: string;
+    country: string;
+    city: string;
+    latitude: number;
+    longitude: number;
+    installedCapacity: number;
+}
+
+export abstract class PlantData {
+    abstract getPlants(): Observable<Plant[]>;
+    abstract getPlant(id: number): Observable<Plant>;
+}

src/app/events/configuration/configuration.component.html

@@ -0,0 +1 @@
+<p>configuration works!</p>

src/app/events/configuration/configuration.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConfigurationComponent } from './configuration.component';
+
+describe('ConfigurationComponent', () => {
+  let component: ConfigurationComponent;
+  let fixture: ComponentFixture<ConfigurationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ConfigurationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ConfigurationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/events/configuration/configuration.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-configuration',
+  templateUrl: './configuration.component.html',
+  styleUrls: ['./configuration.component.scss']
+})
+export class ConfigurationComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/events/events.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { LogComponent } from './log/log.component';
+import { ConfigurationComponent } from './configuration/configuration.component';
+
+@NgModule({
+  declarations: [LogComponent, ConfigurationComponent],
+  imports: [
+    CommonModule
+  ],
+  exports: [LogComponent, ConfigurationComponent]
+})
+export class EventsModule { }

src/app/events/log/log.component.html

@@ -0,0 +1 @@
+<p>log works!</p>

src/app/events/log/log.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LogComponent } from './log.component';
+
+describe('LogComponent', () => {
+  let component: LogComponent;
+  let fixture: ComponentFixture<LogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/events/log/log.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-log',
+  templateUrl: './log.component.html',
+  styleUrls: ['./log.component.scss']
+})
+export class LogComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/home/home-routing.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class HomeRoutingModule { }

src/app/home/home.component.html

@@ -0,0 +1,38 @@
+<mk-box header="Welcome to Energy Management System" [isCollapsable]="false" [isRemovable]="false">
+    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo voluptatum, beatae, modi libero tenetur nemo totam unde eum aut optio quibusdam cum. Nobis placeat repudiandae, recusandae minima nisi dolor quis!</p>
+  </mk-box>
+  <div class="row">
+      <div class="col-md-3 col-xs-12">
+        <mk-box-small header="5" backgroundColor="aqua" iconStyleClass="fa fa-check-circle">
+          <mk-box-small-content>Plants</mk-box-small-content>
+          <mk-box-small-footer>
+            <a routerLink="/plants/management">More info <i class="fa fa-arrow-circle-right"></i></a>
+          </mk-box-small-footer>
+        </mk-box-small>
+      </div>
+      <div class="col-md-3 col-xs-12">
+        <mk-box-small header="369.6 kW" backgroundColor="green" iconStyleClass="fa fa-bar-chart">
+          <mk-box-small-content>Installed Capacity</mk-box-small-content>
+          <mk-box-small-footer>
+            <a routerLink="/plants/dashboard">More info <i class="fa fa-arrow-circle-right"></i></a>
+          </mk-box-small-footer>
+        </mk-box-small>
+      </div>
+      <div class="col-md-3 col-xs-12">
+        <mk-box-small header="52.03" backgroundColor="yellow" iconStyleClass="fa fa-line-chart">
+          <mk-box-small-content>Last 30 Days</mk-box-small-content>
+          <mk-box-small-footer>
+            <a routerLink="/plants/dashboard">More info <i class="fa fa-arrow-circle-right"></i></a>
+          </mk-box-small-footer>
+        </mk-box-small>
+      </div>
+      <div class="col-md-3 col-xs-12">
+        <mk-box-small header="65" backgroundColor="green" iconStyleClass="fa fa-certificate">
+          <mk-box-small-content>Energy Certificates</mk-box-small-content>
+          <mk-box-small-footer>
+            <a routerLink="/plants/dashboard">More info <i class="fa fa-arrow-circle-right"></i></a>
+          </mk-box-small-footer>
+        </mk-box-small>
+      </div>
+    </div>
+    <app-map></app-map>

src/app/home/home.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HomeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/home/home.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss']
+})
+export class HomeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/home/home.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { HomeRoutingModule } from './home-routing.module';
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    HomeRoutingModule
+  ]
+})
+export class HomeModule { }

src/app/login/login-routing.module.ts

@@ -0,0 +1,14 @@
+import { LoginComponent } from './login/login.component';
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+const routes: Routes = [{
+  path: '',
+  component: LoginComponent
+}];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class LoginRoutingModule { }

src/app/login/login.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { LoginRoutingModule } from './login-routing.module';
+import { LoginComponent } from './login/login.component';
+
+@NgModule({
+  declarations: [LoginComponent],
+  imports: [
+    CommonModule,
+    LoginRoutingModule
+  ],
+  exports: [LoginComponent]
+})
+export class LoginModule { }

src/app/login/login/login.component.html

@@ -0,0 +1,41 @@
+<div class="hold-transition login-page d-flex">
+    <div class="login-box">
+      <div class="login-logo">
+        <a routerLink="/"><b>Energy</b> Management System</a>
+      </div>
+      <!-- /.login-logo -->
+      <div class="login-box-body">
+        <p class="login-box-msg">Inicia Sesión</p>
+
+        <form action="/" method="post">
+          <div class="form-group has-feedback">
+            <input type="email" class="form-control" placeholder="Email">
+            <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
+          </div>
+          <div class="form-group has-feedback">
+            <input type="password" class="form-control" placeholder="Password">
+            <span class="glyphicon glyphicon-lock form-control-feedback"></span>
+          </div>
+          <div class="row">
+            <div class="col-xs-8">
+              <div class="checkbox">
+                <label>
+                  <div aria-checked="false" aria-disabled="false" style="position: relative;"><input type="checkbox"></div> Recordarme
+                </label>
+              </div>
+            </div>
+            <!-- /.col -->
+            <div class="col-xs-4">
+              <button class="btn btn-primary btn-block btn-flat" (click)="login()">Iniciar Sesión</button>
+            </div>
+            <!-- /.col -->
+          </div>
+        </form>
+
+        <a href="#">Olvide mi contraseña</a><br>
+        <a routerLink="/register" class="text-center">Registrarme</a>
+
+      </div>
+      <!-- /.login-box-body -->
+    </div>
+  </div>

src/app/login/login/login.component.scss

@@ -0,0 +1,4 @@
+
+.login-box {
+  width: 480px !important;
+}

src/app/login/login/login.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LoginComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/login/login/login.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.scss']
+})
+export class LoginComponent implements OnInit {
+
+  constructor(private router: Router) { }
+
+  ngOnInit() {
+    document.body.classList.add('login-page');
+  }
+
+
+  login() {
+    this.router.navigateByUrl('');
+  }
+}

src/app/mock/mock.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PlantsService } from './plants.service';
+import { RealTimeMeasuresService } from './real-time-measures.service';
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule
+  ],
+  providers: [
+    PlantsService,
+    RealTimeMeasuresService
+  ]
+})
+export class MockModule { }

src/app/mock/plants.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { PlantsService } from './plants.service';
+
+describe('PlantsService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: PlantsService = TestBed.get(PlantsService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/mock/plants.service.ts

@@ -0,0 +1,82 @@
+import { Injectable } from '@angular/core';
+import { PlantData, Plant } from '../data/plants';
+import { of as observableOf, Observable } from 'rxjs';
+import { plantsData } from '../data/plants.data';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PlantsService extends PlantData {
+
+  // private listData: Plant[] = [
+  //   {
+  //     id: 1,
+  //     name: 'COCESNA ICCA',
+  //     state: true,
+  //     installDate: '2019-04-09',
+  //     country: 'El Salvador',
+  //     city: 'San Salvador',
+  //     latitude: 13.692057,
+  //     longitude: -89.115623,
+  //     installedCapacity: 20
+  //   },
+  //   {
+  //     id: 2,
+  //     name: 'COCESNA EL SALVADOR',
+  //     state: true,
+  //     installDate: '2018-08-22',
+  //     country: 'El Salvador',
+  //     city: 'San Salvador',
+  //     latitude: 13.661714,
+  //     longitude: -89.251530,
+  //     installedCapacity: 20
+  //   },
+  //   {
+  //     id: 3,
+  //     name: 'CONDUSAL',
+  //     state: true,
+  //     installDate: '2019-03-14',
+  //     country: 'El Salvador',
+  //     city: 'San Salvador',
+  //     latitude: 13.651990,
+  //     longitude: -89.148050,
+  //     installedCapacity: 320
+  //   },
+  //   {
+  //     id: 4,
+  //     name: 'NZEB',
+  //     state: true,
+  //     installDate: '2019-02-26',
+  //     country: 'El Salvador',
+  //     city: 'San Salvador',
+  //     latitude: 13.681104,
+  //     longitude: -89.236526,
+  //     installedCapacity: 6.6
+  //   },
+  //   {
+  //     id: 5,
+  //     name: 'SIGET',
+  //     state: true,
+  //     installDate: '2018-09-03',
+  //     country: 'El Salvador',
+  //     city: 'San Salvador',
+  //     latitude: 13.697030,
+  //     longitude: -89.211120,
+  //     installedCapacity: 5
+  //   }
+  // ];
+
+  private listData: Plant[] = plantsData;
+
+  constructor() {
+    super();
+   }
+
+  getPlants(): Observable<Plant[]> {
+    return observableOf(this.listData);
+  }
+
+  getPlant(id: number): Observable<Plant> {
+    return observableOf(this.listData.find(e => e.id === id));
+  }
+}

src/app/mock/real-time-measures.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { RealTimeMeasuresService } from './real-time-measures.service';
+
+describe('RealTimeMeasuresService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: RealTimeMeasuresService = TestBed.get(RealTimeMeasuresService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/mock/real-time-measures.service.ts

@@ -0,0 +1,21 @@
+import { measures } from './../data/measures.data';
+import { Injectable } from '@angular/core';
+import { Measure, MeasureData } from '../data/measures';
+import { of as observableOf, Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class RealTimeMeasuresService extends MeasureData{
+
+
+  measData: Measure[] = measures;
+
+  constructor() {
+    super();
+  }
+
+  getMeasures(): Observable<Measure[]> {
+    return observableOf(this.measData);
+  }
+}

src/app/pagenotfound/pagenotfound.component.html

@@ -0,0 +1 @@
+<p>pagenotfound works!</p>

src/app/pagenotfound/pagenotfound.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PagenotfoundComponent } from './pagenotfound.component';
+
+describe('PagenotfoundComponent', () => {
+  let component: PagenotfoundComponent;
+  let fixture: ComponentFixture<PagenotfoundComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PagenotfoundComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PagenotfoundComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pagenotfound/pagenotfound.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-pagenotfound',
+  templateUrl: './pagenotfound.component.html',
+  styleUrls: ['./pagenotfound.component.scss']
+})
+export class PagenotfoundComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/plants/dashboard/dashboard-content/dashboard-content.component.html

@@ -0,0 +1,39 @@
+<div *ngIf=plantNotFound>No se encuentra el detalle de la planta</div>
+<div *ngIf=plant>
+    <h2>{{plant.name}} <small><span class="label label-default">Última actualización: {{lastUpdate}}</span></small></h2>
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col chart">
+            <p>Seleccione el tipo de parámetro</p>
+            <ul class="nav nav-pills" (click)="onMeasureClick($event)">
+                <li><button class="btn btn-sm" [class.bg-green-active]='isActive[0]'>Voltaje</button></li>
+                <li><button class="btn btn-sm" [class.bg-green-active]='isActive[1]'>Corriente</button></li>
+                <li><button class="btn btn-sm" [class.bg-green-active]='isActive[2]'>Potencia</button></li>
+              </ul>
+            <app-line-chart
+            [lineChartData]="chartData"
+            [lineChartOptions]="chartOptions"
+            [lineChartLabels]="chartLabels">
+          </app-line-chart>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col chart">
+            <p>Seleccione una opción de agregación</p>
+            <ul class="nav nav-pills" (click)="onAgregationClick($event)">
+                <li><button class="btn btn-sm" [class.bg-green-active]='isActive[0]'>24h</button></li>
+                <li><button class="btn btn-sm" [class.bg-green-active]='isActive[1]'>Semana</button></li>
+                <li><button class="btn btn-sm" [class.bg-green-active]='isActive[2]'>Mes</button></li>
+                <li><button class="btn btn-sm" [class.bg-green-active]='isActive[3]'>Año</button></li>
+              </ul>
+            <app-bar-chart
+            [barChartData]="chartData"
+            [barChartOptions]="chartOptions"
+            [barChartLabels]="chartLabels">
+          </app-bar-chart>
+      </div>
+      </div>
+    </div>
+
+</div>
+

src/app/plants/dashboard/dashboard-content/dashboard-content.component.scss

@@ -0,0 +1,3 @@
+canvas {
+  height: 400px !important;
+}

src/app/plants/dashboard/dashboard-content/dashboard-content.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardContentComponent } from './dashboard-content.component';
+
+describe('DashboardContentComponent', () => {
+  let component: DashboardContentComponent;
+  let fixture: ComponentFixture<DashboardContentComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DashboardContentComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardContentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/plants/dashboard/dashboard-content/dashboard-content.component.ts

@@ -0,0 +1,117 @@
+import { ActivatedRoute } from '@angular/router';
+import { Component, OnInit, Input, OnChanges, Output, EventEmitter, OnDestroy } from '@angular/core';
+import { Plant } from 'src/app/data/plants';
+import { PlantsService } from 'src/app/mock/plants.service';
+import { RealTimeMeasuresService } from 'src/app/mock/real-time-measures.service';
+import { ChartDataSets, ChartOptions} from 'chart.js';
+import { Label, Color } from 'ng2-charts';
+import * as moment from 'moment';
+@Component({
+  selector: 'app-dashboard-content',
+  templateUrl: './dashboard-content.component.html',
+  styleUrls: ['./dashboard-content.component.scss']
+})
+export class DashboardContentComponent implements OnInit, OnChanges {
+
+  plantId: number;
+  plant: Plant;
+  sub: any;
+  plantNotFound: boolean;
+  monthNames = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
+  'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
+  tsLabels: any[];
+  serieA: any[];
+  serieB: any[];
+  serieC: any[];
+  chartData: ChartDataSets[];
+  chartLabels: Label[];
+  chartColors: Color[];
+  lastUpdate = new Date().toLocaleString();
+
+  chartOptions: ChartOptions = {
+    responsive: true,
+    maintainAspectRatio: false,
+    scales: {
+      xAxes: [{
+        type: 'time',
+        time: {
+          unit: 'hour',
+          displayFormats: {
+            hour: 'D-MMM-YY hA'
+          }
+        },
+      }]
+    }
+  };
+
+  isActive = [true, false, false]; // Tipo de parámetro activado?
+  selectedMeasureType = 'Voltaje';
+
+  constructor(private plantsService: PlantsService, private measService: RealTimeMeasuresService, private route: ActivatedRoute) {
+
+  }
+
+
+  ngOnInit() {
+    this.sub = this.route.params.subscribe(params => {
+       this.plantId = +params.id; // (+) converts string 'id' to a number
+       this.plantsService.getPlant(this.plantId).subscribe(res => {
+       this.plant = res;
+       if (!this.plant) {
+         this.plantNotFound = true;
+       }
+      });
+    });
+
+    this.setMeasuresSeries(this.selectedMeasureType);
+
+  }
+
+  ngOnChanges() {
+  }
+
+  onMeasureClick(event) {
+    this.selectedMeasureType = event.target.innerText;
+    this.setMeasuresSeries(this.selectedMeasureType);
+  }
+
+  onAgregationClick(event) {
+    console.log(event.target.innerText);
+  }
+
+  setMeasuresSeries(type: string) {
+    this.measService.getMeasures().subscribe(res => {
+      this.tsLabels = res.map(obj => moment(obj.timeStamp, 'DD-MM-YYYY HH:mm'));
+      switch (type) {
+        case 'Voltaje':
+          this.isActive = [true, false, false];
+          this.serieA = res.map(obj => obj.voltA);
+          this.serieB = res.map(obj => obj.voltB);
+          this.serieC = res.map(obj => obj.voltC);
+          break;
+        case 'Corriente':
+          this.isActive = [false, true, false];
+          this.serieA = res.map(obj => obj.ampA);
+          this.serieB = res.map(obj => obj.ampB);
+          this.serieC = res.map(obj => obj.ampC);
+          break;
+        case 'Potencia':
+          this.isActive = [false, false, true];
+          this.serieA = res.map(obj => obj.potA);
+          this.serieB = res.map(obj => obj.potB);
+          this.serieC = res.map(obj => obj.potC);
+          break;
+        default:
+          break;
+      }
+    });
+
+    this.chartData = [
+      { data: this.serieA, label: this.selectedMeasureType + ' A', fill: false, lineTension: 0},
+      { data: this.serieB, label: this.selectedMeasureType + ' B', fill: false, lineTension: 0},
+      { data: this.serieC, label: this.selectedMeasureType + ' C', fill: false, lineTension: 0}
+    ];
+
+    this.chartLabels = this.tsLabels;
+  }
+}

src/app/plants/dashboard/dashboard-routing.module.ts

@@ -0,0 +1,24 @@
+import { DashboardComponent } from './dashboard.component';
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { DashboardContentComponent } from './dashboard-content/dashboard-content.component';
+import { PagenotfoundComponent } from 'src/app/pagenotfound/pagenotfound.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: DashboardComponent,
+    children: [
+      {
+        path: ':id',
+        component: DashboardContentComponent
+      }
+    ]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class DashboardRoutingModule { }

src/app/plants/dashboard/dashboard.component.html

@@ -0,0 +1,13 @@
+<mk-box header = "Dashboard" [isCollapsable]="false" [isRemovable]="false">
+  <mk-box-tools>
+  <div class="form-group">
+    <select class="form-control input-sm" id="sel-plant" (change)="selectChangeHandler($event)">
+      <option *ngFor="let plant of plants" [value]=plant.id>{{plant.name}}</option>
+    </select>
+  </div>
+</mk-box-tools>
+  <mk-box-content>
+      <router-outlet></router-outlet>
+  </mk-box-content>
+</mk-box>
+

src/app/plants/dashboard/dashboard.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardComponent } from './dashboard.component';
+
+describe('DashboardComponent', () => {
+  let component: DashboardComponent;
+  let fixture: ComponentFixture<DashboardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DashboardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/plants/dashboard/dashboard.component.ts

@@ -0,0 +1,31 @@
+import { CommonModule } from '@angular/common';
+import { PlantsService } from './../../mock/plants.service';
+import { Component, OnInit, OnChanges, NgZone } from '@angular/core';
+import { Plant } from 'src/app/data/plants';
+import { Router, ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: ['./dashboard.component.scss']
+})
+export class DashboardComponent implements OnInit {
+
+  plants: Plant[] = [];
+  selectedPlantID: number;
+
+  constructor(private plantsService: PlantsService, private router: Router, private route: ActivatedRoute) { }
+
+  ngOnInit() {
+    this.plantsService.getPlants().subscribe(res => {
+      this.plants = res;
+      this.selectedPlantID = this.plants[0].id;
+      this.router.navigate(['plants/dashboard', this.selectedPlantID]);
+    });
+  }
+
+  selectChangeHandler(event) {
+    this.router.navigate(['plants/dashboard', event.target.value]);
+  }
+
+}

src/app/plants/dashboard/dashboard.module.ts

@@ -0,0 +1,22 @@
+import { FormsModule } from '@angular/forms';
+import { DropdownModule, BoxModule } from 'angular-admin-lte';
+import { UtilsModule } from './../../utils/utils.module';
+import { DashboardComponent } from './dashboard.component';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { DashboardRoutingModule } from './dashboard-routing.module';
+import { DashboardContentComponent } from './dashboard-content/dashboard-content.component';
+
+@NgModule({
+  declarations: [DashboardComponent, DashboardContentComponent],
+  imports: [
+    CommonModule,
+    DashboardRoutingModule,
+    FormsModule,
+    UtilsModule,
+    BoxModule,
+    DropdownModule
+  ]
+})
+export class DashboardModule { }

src/app/plants/management/management-routing.module.ts

@@ -0,0 +1,16 @@
+import { ManagementComponent } from './management.component';
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ManagementComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ManagementRoutingModule { }

src/app/plants/management/management.component.html

@@ -0,0 +1 @@
+<p>management works!</p>

src/app/plants/management/management.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ManagementComponent } from './management.component';
+
+describe('ManagementComponent', () => {
+  let component: ManagementComponent;
+  let fixture: ComponentFixture<ManagementComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ManagementComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ManagementComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/plants/management/management.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-management',
+  templateUrl: './management.component.html',
+  styleUrls: ['./management.component.scss']
+})
+export class ManagementComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/plants/management/management.module.ts

@@ -0,0 +1,14 @@
+import { ManagementComponent } from './management.component';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ManagementRoutingModule } from './management-routing.module';
+
+@NgModule({
+  declarations: [ManagementComponent],
+  imports: [
+    CommonModule,
+    ManagementRoutingModule
+  ]
+})
+export class ManagementModule { }

src/app/plants/plants.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+
+import { ManagementModule } from './management/management.module';
+import { DashboardModule } from './dashboard/dashboard.module';
+import { UtilsModule } from '../utils/utils.module';
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    DashboardModule,
+    ManagementModule
+  ]
+})
+export class PlantsModule { }

src/app/utils/bar-chart/bar-chart.component.html

@@ -0,0 +1,14 @@
+<div style="height: 400px">
+    <canvas baseChart
+      [datasets]="barChartData"
+      [labels]="barChartLabels"
+      [options]="barChartOptions"
+      [colors]="barChartColors"
+      [legend]="barChartLegend"
+      [chartType]="barChartType"
+      [plugins]="barChartPlugins">
+    </canvas>
+  </div>
+
+
+

src/app/utils/bar-chart/bar-chart.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BarChartComponent } from './bar-chart.component';
+
+describe('BarChartComponent', () => {
+  let component: BarChartComponent;
+  let fixture: ComponentFixture<BarChartComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BarChartComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BarChartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/utils/bar-chart/bar-chart.component.ts

@@ -0,0 +1,53 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Label, Color } from 'ng2-charts';
+import { ChartDataSets, ChartOptions } from 'chart.js';
+
+@Component({
+  selector: 'app-bar-chart',
+  templateUrl: './bar-chart.component.html',
+  styleUrls: ['./bar-chart.component.scss']
+})
+export class BarChartComponent implements OnInit {
+
+  @Input() public barChartData: ChartDataSets;
+  @Input() public barChartOptions: ChartOptions;
+  @Input() public barChartTitle: string;
+  @Input() public barChartLabels: Label[];
+  @Input() public barChartColors: Color[] = [
+    { // light-blue
+      backgroundColor: '#3c8dbc',
+      borderColor: '#3c8dbc',
+      pointBackgroundColor: '#3c8dbc',
+      pointBorderColor: '#fff',
+      pointHoverBackgroundColor: '#fff',
+      pointHoverBorderColor: '#3c8dbc'
+    },
+    { // orange
+      backgroundColor: '#00a65a',
+      borderColor: '#00a65a',
+      pointBackgroundColor: '#00a65a',
+      pointBorderColor: '#fff',
+      pointHoverBackgroundColor: '#fff',
+      pointHoverBorderColor: '#00a65a'
+    },
+    { // red
+      backgroundColor: '#f56954',
+      borderColor: '#f56954',
+      pointBackgroundColor: '#f56954',
+      pointBorderColor: '#fff',
+      pointHoverBackgroundColor: '#fff',
+      pointHoverBorderColor: '#f56954'
+    }
+  ];
+  @Input() public barChartLegend = true;
+  @Input() public barChartType = 'bar';
+  @Input() public barChartPlugins = [];
+
+
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/utils/line-chart/line-chart.component.html

@@ -0,0 +1,12 @@
+<div style="height: 400px">
+  <canvas baseChart
+    [datasets]="lineChartData"
+    [labels]="lineChartLabels"
+    [options]="lineChartOptions"
+    [colors]="lineChartColors"
+    [legend]="lineChartLegend"
+    [chartType]="lineChartType"
+    [plugins]="lineChartPlugins">
+  </canvas>
+</div>
+

src/app/utils/line-chart/line-chart.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LineChartComponent } from './line-chart.component';
+
+describe('LineChartComponent', () => {
+  let component: LineChartComponent;
+  let fixture: ComponentFixture<LineChartComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LineChartComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LineChartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/utils/line-chart/line-chart.component.ts

@@ -0,0 +1,53 @@
+import { ChartDataSets, ChartOptions } from 'chart.js';
+import { Component, OnInit, Input } from '@angular/core';
+import { Label, Color } from 'ng2-charts';
+
+@Component({
+  selector: 'app-line-chart',
+  templateUrl: './line-chart.component.html',
+  styleUrls: ['./line-chart.component.scss']
+})
+export class LineChartComponent implements OnInit {
+
+  @Input() public lineChartData: ChartDataSets;
+  @Input() public lineChartOptions: ChartOptions;
+  @Input() public lineChartTitle: string;
+  @Input() public lineChartLabels: Label[];
+  @Input() public lineChartColors: Color[] = [
+    { // light-blue
+      backgroundColor: '#3c8dbc',
+      borderColor: '#3c8dbc',
+      pointBackgroundColor: '#3c8dbc',
+      pointBorderColor: '#fff',
+      pointHoverBackgroundColor: '#fff',
+      pointHoverBorderColor: '#3c8dbc'
+    },
+    { // orange
+      backgroundColor: '#00a65a',
+      borderColor: '#00a65a',
+      pointBackgroundColor: '#00a65a',
+      pointBorderColor: '#fff',
+      pointHoverBackgroundColor: '#fff',
+      pointHoverBorderColor: '#00a65a'
+    },
+    { // red
+      backgroundColor: '#f56954',
+      borderColor: '#f56954',
+      pointBackgroundColor: '#f56954',
+      pointBorderColor: '#fff',
+      pointHoverBackgroundColor: '#fff',
+      pointHoverBorderColor: '#f56954'
+    }
+  ];
+  @Input() public lineChartLegend = true;
+  @Input() public lineChartType = 'line';
+  @Input() public lineChartPlugins = [];
+
+
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/utils/map/map.component.html

@@ -0,0 +1,17 @@
+<mk-box [isCollapsable]='true' [isRemovable]='false' boxColor="green">
+  <mk-box-header>Power Plant Location</mk-box-header>
+  <mk-box-content>
+    <div class="container-fluid">
+      <div class="row d-flex flex-column">
+        <div class="col-md-8 h-100">
+          <div style="height: 350px;" leaflet [leafletOptions]="options" [leafletLayers]="markers"
+            (leafletMapReady)='onMapReady($event)'>
+          </div>
+        </div>
+        <div class="col-md-4 h-100">
+          <app-plant-detail [plantId]="plantId"></app-plant-detail>
+        </div>
+      </div>
+    </div>
+  </mk-box-content>
+</mk-box>

src/app/utils/map/map.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MapComponent } from './map.component';
+
+describe('MapComponent', () => {
+  let component: MapComponent;
+  let fixture: ComponentFixture<MapComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MapComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MapComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/utils/map/map.component.ts

@@ -0,0 +1,87 @@
+import { Component, OnInit, NgZone } from '@angular/core';
+import { latLng, tileLayer, marker, Layer, icon, Map, latLngBounds, LatLng, LatLngBounds, point } from 'leaflet';
+import { Plant } from 'src/app/data/plants';
+import { PlantsService } from 'src/app/mock/plants.service';
+
+@Component({
+  selector: 'app-map',
+  templateUrl: './map.component.html',
+  styleUrls: ['./map.component.scss']
+})
+export class MapComponent implements OnInit {
+
+  listData: Plant[];
+  markers: Layer[] = [];
+  points: LatLng[] = [];
+  plantId: number;
+
+  icon = icon({
+    iconSize: [25, 41],
+    iconAnchor: [13, 41],
+    iconUrl: 'leaflet/marker-icon.png',
+    shadowUrl: 'leaflet/marker-shadow.png'
+  });
+
+
+  constructor(private plantsService: PlantsService, private zone: NgZone) {
+  }
+
+  // Open Street Map definitions
+  LAYER_OSM = tileLayer(
+    'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+    { maxZoom: 18,
+      attribution: '© OpenStreetMap contributors'
+    });
+
+  // Values to bind to Leaflet Directive
+  options = {
+    layers: [ this.LAYER_OSM ],
+    zoom: 8,
+    center: latLng([13.661714, -89.251530])
+  };
+
+  ngOnInit() {
+    this.plantsService.getPlants().subscribe(res => {
+      this.listData = res;
+    });
+    this.addMarkers();
+  }
+
+  addMarkers() {
+    for (const plant of this.listData) {
+      const name = plant.name;
+      const lat = plant.latitude;
+      const long = plant.longitude;
+      const newMarker = marker(
+        [lat, long],
+        {icon: this.icon})
+        .bindPopup('<b>' + plant.name + '</b><br>Fecha de Instalación: ' + plant.installDate)
+        .on('click', () => {
+          this.zone.run(() => {
+            this.sendPlantId(plant.id);
+          });
+        });
+      this.points.push(latLng([lat, long]));
+      this.markers.push(newMarker);
+    }
+  }
+
+  sendPlantId(id: number) {
+    this.plantId = id;
+  }
+
+  onMapReady(map: Map) {
+    setTimeout(() => {
+      map.invalidateSize();
+    }, 0);
+
+    const bounds = latLngBounds(this.points);
+    map.fitBounds(bounds, {
+      padding: point(24, 24),
+      maxZoom: 10.5,
+      animate: true
+    });
+  }
+
+
+}

src/app/utils/plant-detail/plant-detail.component.html

@@ -0,0 +1,17 @@
+<div class='plant-detail' *ngIf=plant>
+  <mk-box boxColor="rgb(237, 237, 237)"  footerStyleClass="box-footer no-border" styleClass="detail-box"
+    contentStyleClass="box-dody" [isRemovable]="false" [isCollapsable]="false" [headerBorder]="false">
+    <mk-box-header>
+      <h3><i class="fa fa-bolt"></i> {{plant.name}} </h3>
+    </mk-box-header>
+    <mk-box-content>
+      <p class='h4'>País: {{plant.country}}</p>
+      <p class='h4'>Ciudad: {{plant.city}}</p>
+      <p class='h4'>Fecha de Instalación: {{plant.installDate}}</p>
+      <p class='h4'>Potencia Instalada: {{plant.installedCapacity}} kW</p>
+      <p class='h4'>Generación Total: kWh</p>
+      <p class='h4'>Generación 24-h: kWh</p>
+    </mk-box-content>
+    <mk-box-footer><button class="btn bg-yellow btn-flat">Ir a Planta</button></mk-box-footer>
+  </mk-box>
+</div>

src/app/utils/plant-detail/plant-detail.component.scss

@@ -0,0 +1,10 @@
+.detail-box {
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+button {
+  position: absolute;
+  bottom: 0;
+}

src/app/utils/plant-detail/plant-detail.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PlantDetailComponent } from './plant-detail.component';
+
+describe('PlantDetailComponent', () => {
+  let component: PlantDetailComponent;
+  let fixture: ComponentFixture<PlantDetailComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PlantDetailComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PlantDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/utils/plant-detail/plant-detail.component.ts

@@ -0,0 +1,29 @@
+import { Component, OnInit, Input, OnChanges } from '@angular/core';
+import { PlantsService } from 'src/app/mock/plants.service';
+import { Plant } from 'src/app/data/plants';
+
+@Component({
+  selector: 'app-plant-detail',
+  templateUrl: './plant-detail.component.html',
+  styleUrls: ['./plant-detail.component.scss']
+})
+export class PlantDetailComponent implements OnInit, OnChanges {
+
+  @Input() plantId: number;
+  plant: Plant;
+
+  id: number;
+
+  constructor(private plantsService: PlantsService) { }
+
+  ngOnInit() {
+
+  }
+
+  ngOnChanges() {
+    this.plantsService.getPlant(this.plantId).subscribe(res => {
+      this.plant = res;
+    });
+  }
+
+}

src/app/utils/real-time/real-time.component.html

@@ -0,0 +1 @@
+<p>real-time works!</p>

src/app/utils/real-time/real-time.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RealTimeComponent } from './real-time.component';
+
+describe('RealTimeComponent', () => {
+  let component: RealTimeComponent;
+  let fixture: ComponentFixture<RealTimeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RealTimeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RealTimeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/utils/real-time/real-time.component.ts

@@ -0,0 +1,25 @@
+import { IMqttMessage } from "ngx-mqtt";
+import { Component, OnInit, OnDestroy } from "@angular/core";
+import { Subscription } from "rxjs";
+import { MqttService } from "ngx-mqtt";
+
+@Component({
+  selector: "app-real-time",
+  templateUrl: "./real-time.component.html",
+  styleUrls: ["./real-time.component.scss"]
+})
+export class RealTimeComponent implements OnInit{
+  private subscription: Subscription;
+  public message: string;
+
+  constructor(private _mqttService: MqttService) {
+    this.subscription = this._mqttService
+      .observe("Shark270/020806993")
+      .subscribe((message: IMqttMessage) => {
+        this.message = message.payload.toString();
+      });
+  }
+
+  ngOnInit() {}
+
+}

src/app/utils/utils.module.ts

@@ -0,0 +1,43 @@
+import { BarChartComponent } from "./bar-chart/bar-chart.component";
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { MapComponent } from "./map/map.component";
+import { LeafletModule } from "@asymmetrik/ngx-leaflet";
+import { BoxModule } from "angular-admin-lte";
+import { PlantDetailComponent } from "./plant-detail/plant-detail.component";
+import { LineChartComponent } from "./line-chart/line-chart.component";
+import { ChartsModule } from "ng2-charts";
+import { RealTimeComponent } from "./real-time/real-time.component";
+
+import { IMqttMessage, MqttModule, IMqttServiceOptions } from "ngx-mqtt";
+
+export const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = {
+  hostname: "192.168.100.5",
+  port: 9001,
+  path: "/mqtt"
+};
+
+@NgModule({
+  declarations: [
+    MapComponent,
+    PlantDetailComponent,
+    LineChartComponent,
+    BarChartComponent,
+    RealTimeComponent
+  ],
+  imports: [
+    CommonModule,
+    LeafletModule,
+    BoxModule,
+    ChartsModule,
+    MqttModule.forRoot(MQTT_SERVICE_OPTIONS)
+  ],
+  exports: [
+    MapComponent,
+    PlantDetailComponent,
+    LineChartComponent,
+    BarChartComponent,
+    RealTimeComponent
+  ]
+})
+export class UtilsModule {}