feat(app): Implement main features

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "smart-green-analytics"
+  }
+}

firebase.json

@@ -0,0 +1,10 @@
+{
+  "hosting": {
+    "public": "dist",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ]
+  }
+}

package.json

@@ -17,13 +17,16 @@
     "@angular/common": "^5.2.0",
     "@angular/compiler": "^5.2.0",
     "@angular/core": "^5.2.0",
+    "@angular/flex-layout": "^5.0.0-beta.13",
     "@angular/forms": "^5.2.0",
     "@angular/http": "^5.2.0",
     "@angular/material": "^5.2.4",
     "@angular/platform-browser": "^5.2.0",
     "@angular/platform-browser-dynamic": "^5.2.0",
     "@angular/router": "^5.2.0",
     "@ngrx/store": "^5.2.0",
+    "@ngx-translate/core": "^9.1.1",
+    "@ngx-translate/http-loader": "^2.0.1",
     "core-js": "^2.4.1",
     "hammerjs": "^2.0.8",
     "ng2-charts": "^1.6.0",

src/app/app-routing.module.ts

@@ -2,10 +2,16 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { SitesPageComponent } from './sites/containers/sites-page/sites-page.component';
 import { NotFoundPageComponent } from './core/containers/not-found-page/not-found-page.component';
+import { SiteDetailsPageComponent } from './sites/containers/site-details-page/site-details-page.component';
+import { SiteExistsGuard } from './sites/guards/site-exists.guard';
+import { EquipmentAnalyticsPageComponent } from './sites/containers/equipment-analytics-page/equipment-analytics-page.component';
+import { EquipmentExistsGuard } from './sites/guards/equipment-exists.guard';
 
 const routes: Routes = [
   { path: '', redirectTo: 'sites', pathMatch: 'full' },
   { path: 'sites', component: SitesPageComponent },
+  { path: 'sites/:siteId', component: SiteDetailsPageComponent, canActivate: [SiteExistsGuard] },
+  { path: 'sites/:siteId/:equipmentId', component: EquipmentAnalyticsPageComponent, canActivate: [EquipmentExistsGuard] },
   { path: '**', component: NotFoundPageComponent },
 ];
 

src/app/app.module.ts

@@ -4,7 +4,10 @@ import { NgModule } from '@angular/core';
 import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
-import { ChartsModule } from 'ng2-charts/ng2-charts';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
+import { HttpClient } from '@angular/common/http';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 
 import { AppRoutingModule } from './app-routing.module';
 import { CoreModule } from './core/core.module';
@@ -15,6 +18,10 @@ import { reducers, metaReducers } from './reducers';
 import { AppEffects } from './effects/app.effects';
 import { environment } from '../environments/environment';
 
+// AoT requires an exported function for factories
+export function HttpLoaderFactory(httpClient: HttpClient) {
+  return new TranslateHttpLoader(httpClient, 'assets/i18n/', '.json');
+}
 
 @NgModule({
   imports: [
@@ -24,7 +31,14 @@ import { environment } from '../environments/environment';
     StoreModule.forRoot(reducers, { metaReducers }),
     !environment.production ? StoreDevtoolsModule.instrument() : [],
     EffectsModule.forRoot([AppEffects]),
-    ChartsModule,
+    FlexLayoutModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: HttpLoaderFactory,
+        deps: [HttpClient]
+      }
+    }),
     CoreModule,
     SitesModule
   ],

src/app/core/components/lang/lang.component.html

@@ -0,0 +1,4 @@
+<mat-chip-list>
+  <mat-chip color="accent" [selected]="selected === 'en'" (click)="change.emit('en')">EN</mat-chip>
+  <mat-chip color="accent" [selected]="selected === 'ar'" (click)="change.emit('ar')">AR</mat-chip>
+</mat-chip-list>

src/app/core/components/lang/lang.component.scss

@@ -0,0 +1,3 @@
+.lang:hover {
+  color: rgba(0, 0, 0, 0.1);
+}

src/app/core/components/lang/lang.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit, EventEmitter, Output, Input } from '@angular/core';
+
+@Component({
+  selector: 'sga-lang',
+  templateUrl: './lang.component.html',
+  styleUrls: ['./lang.component.scss']
+})
+export class LangComponent implements OnInit {
+  @Input() selected: string;
+  @Output() change: EventEmitter<string> = new EventEmitter();
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/core/components/navbar/navbar.component.html

@@ -1,3 +1,3 @@
 <mat-toolbar color="primary">
-  <span>SmartGreen analytics</span>
+  <ng-content></ng-content>
 </mat-toolbar>

src/app/core/containers/app/app.component.html

@@ -1,2 +1,11 @@
-<sga-navbar></sga-navbar>
-<router-outlet></router-outlet>
+<sga-navbar>
+  <span>SmartGreen analytics</span>
+  <span class="space"></span>
+  <sga-lang (change)="switchLang($event)" [selected]="currentLang"></sga-lang>
+</sga-navbar>
+<div class="component-container" [dir]="'dir' | translate" [class.rtl]="('dir' | translate) === 'rtl'">
+  <a mat-mini-fab color="warn" class="back-link" routerLink="../" [hidden]="router.routerState.snapshot.url === '/sites'">
+      <mat-icon>arrow_back</mat-icon>
+  </a>
+  <router-outlet></router-outlet>
+</div>

src/app/core/containers/app/app.component.scss

@@ -0,0 +1,40 @@
+:host {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.space {
+  flex: 1;
+}
+
+.component-container {
+  position: relative;
+  padding: 15px;
+  flex: 1;
+}
+
+.back-link {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  z-index: 10;
+
+  mat-icon {
+    transition: all .5s ease;
+  }
+
+  &:hover mat-icon {
+    transform: rotate(1turn);
+  }
+}
+
+.rtl {
+  .back-link {
+    left: 15px;
+    right: auto;
+    mat-icon {
+      transform: rotate(180deg);
+    }
+  }
+}

src/app/core/containers/app/app.component.ts

@@ -1,67 +1,25 @@
 import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'sga-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  // lineChart
-  public lineChartData: Array<any> = [
-    { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
-    { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' },
-    { data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C' }
-  ];
-  public lineChartLabels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
-  public lineChartOptions: any = {
-    responsive: true
-  };
-  public lineChartColors: Array<any> = [
-    { // grey
-      backgroundColor: 'rgba(148,159,177,0.2)',
-      borderColor: 'rgba(148,159,177,1)',
-      pointBackgroundColor: 'rgba(148,159,177,1)',
-      pointBorderColor: '#fff',
-      pointHoverBackgroundColor: '#fff',
-      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
-    },
-    { // dark grey
-      backgroundColor: 'rgba(77,83,96,0.2)',
-      borderColor: 'rgba(77,83,96,1)',
-      pointBackgroundColor: 'rgba(77,83,96,1)',
-      pointBorderColor: '#fff',
-      pointHoverBackgroundColor: '#fff',
-      pointHoverBorderColor: 'rgba(77,83,96,1)'
-    },
-    { // grey
-      backgroundColor: 'rgba(148,159,177,0.2)',
-      borderColor: 'rgba(148,159,177,1)',
-      pointBackgroundColor: 'rgba(148,159,177,1)',
-      pointBorderColor: '#fff',
-      pointHoverBackgroundColor: '#fff',
-      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
-    }
-  ];
-  public lineChartLegend: boolean = true;
-  public lineChartType: string = 'line';
+  currentLang: string = 'en';
 
-  public randomize(): void {
-    const _lineChartData: Array<any> = new Array(this.lineChartData.length);
-    for (let i = 0; i < this.lineChartData.length; i++) {
-      _lineChartData[i] = { data: new Array(this.lineChartData[i].data.length), label: this.lineChartData[i].label };
-      for (let j = 0; j < this.lineChartData[i].data.length; j++) {
-        _lineChartData[i].data[j] = Math.floor((Math.random() * 100) + 1);
-      }
-    }
-    this.lineChartData = _lineChartData;
+  constructor(
+    public router: Router,
+    private translate: TranslateService
+  ) {
+    this.translate.addLangs(['en', 'fr']);
+    translate.setDefaultLang(this.currentLang);
   }
 
-  // events
-  public chartClicked(e: any): void {
-    console.log(e);
-  }
-
-  public chartHovered(e: any): void {
-    console.log(e);
+  switchLang(newLang: string) {
+    this.currentLang = newLang;
+    this.translate.use(this.currentLang);
   }
 }

src/app/core/core.module.ts

@@ -1,23 +1,27 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
 import { MaterialModule } from '../materal/material.module';
 
 import { AppComponent } from './containers/app/app.component';
 import { NotFoundPageComponent } from './containers/not-found-page/not-found-page.component';
 import { NavbarComponent } from './components/navbar/navbar.component';
+import { LangComponent } from './components/lang/lang.component';
 
 const COMPONENTS = [
   AppComponent ,
   NavbarComponent,
+  LangComponent,
   NotFoundPageComponent
 ];
 
 @NgModule({
   imports: [
     CommonModule,
     RouterModule,
-    MaterialModule
+    MaterialModule,
+    TranslateModule,
   ],
   declarations: COMPONENTS,
   exports: COMPONENTS