Updated to fireloop real time charts

Author: Jonathan Casarrubias

.gitignore

@@ -17,37 +17,3 @@
 coverage
 node_modules
 npm-debug.log
-# See http://help.github.com/ignore-files/ for more about ignoring files.
-
-# compiled output
-/dist
-/tmp
-
-# dependencies
-/node_modules
-/bower_components
-
-# IDEs and editors
-/.idea
-/.vscode
-.project
-.classpath
-*.launch
-.settings/
-
-# misc
-/.sass-cache
-/connect.lock
-/coverage/*
-/libpeerconnection.log
-npm-debug.log
-testem.log
-/typings
-
-# e2e
-/e2e/*.js
-/e2e/*.map
-
-#System Files
-.DS_Store
-Thumbs.db

.yo-rc.json

@@ -1,6 +1,6 @@
 {
   "generator-fireloop": {
-    "version": "1.0.0-alpha.26",
+    "version": "1.0.0-alpha.34",
     "clients": {
       "webapp": {
         "path": "./webapp",

README.md

@@ -33,4 +33,6 @@ $ fireloop serve
 
 Open your browser in [127.0.0.1:4200](http://127.0.0.1:4200) and you should see the following result:
 
-![](https://storage.googleapis.com/mean-expert-images/fireloop-todo-app.gif)
+[Click here if gif does't load -sigh- [Shame on you @GitHub]](https://goo.gl/YRiKnz)
+
+![FireLoop Stats](https://goo.gl/YRiKnz)

common/models/todo.json

@@ -5,7 +5,15 @@
   "options": {
     "validateUpsert": true
   },
-  "properties": {},
+  "properties": {
+    "text": {
+      "type": "string"
+    },
+    "dueAt": {
+      "type": "date",
+      "required": true
+    }
+  },
   "validations": [],
   "relations": {},
   "acls": [],
@@ -19,7 +27,7 @@
         "description": "Statistical information for Todo registers.",
         "type": "model",
         "count": {
-          "on": "createdAt",
+          "on": "dueAt",
           "by": "index"
         }
       }

common/models/todo.ts

@@ -2,36 +2,34 @@ import { Model } from '@mean-expert/model';
 /**
  * @module Todo
  * @description
- * Write a useful Todo Model description
+ * Write a useful Todo Model description.
+ * Register hooks and remote methods within the
+ * Model Decorator
  **/
 @Model({
   hooks: {
     beforeSave: { name: 'before save', type: 'operation' }
   },
   remotes: {
     myRemote: {
-      accepts : { arg: 'id', type: 'string', required: true },
-      returns : { arg: 'result', type: 'object' },
-      http    : { path: '/:id/my-remote', verb: 'get' }
+      returns : { arg: 'result', type: 'array' },
+      http    : { path: '/my-remote', verb: 'get' }
     }
   }
 })
 
-export class Todo {
-  /**
-   * @method constructor
-   * @description
-   * Register model hooks and methods.
-   */
-  constructor(app: any) {}
+class Todo {
+  // LoopBack model instance is injected in constructor
+  constructor(public model: any) {}
+
   // Example Operation Hook
-  static beforeSave(ctx: any, next: Function): void {
+  beforeSave(ctx: any, next: Function): void {
     console.log('Todo: Before Save');
     next();
   }
   // Example Remote Method
-  static myRemote(id: string, next: Function): void {
-    next(null, `My Remote Example: ${id}`);
+  myRemote(next: Function): void {
+    this.model.find(next);
   }
 }
 

package.json

@@ -11,8 +11,7 @@
   "dependencies": {
     "@mean-expert/loopback-component-realtime": "^1.0.0-beta.8",
     "@mean-expert/loopback-stats-mixin": "^1.2.0",
-    "@mean-expert/model": "^1.0.7",
-    "@mean-expert/model-register": "^1.0.4",
+    "@mean-expert/model": "^1.0.9",
     "compression": "^1.0.3",
     "cors": "^2.5.2",
     "helmet": "^1.3.0",
@@ -25,17 +24,18 @@
     "strong-error-handler": "^1.0.1"
   },
   "devDependencies": {
-    "@mean-expert/loopback-sdk-builder": "^2.1.0-beta.15",
+    "@mean-expert/loopback-sdk-builder": "^2.1.0-beta.16",
+    "@types/node": "^6.0.46",
     "eslint": "^2.13.1",
     "eslint-config-loopback": "^4.0.0",
     "nsp": "^2.1.0",
-    "ts-node": "^1.6.1",
-    "typescript": "^2.0.7"
+    "ts-node": "^1.7.0",
+    "typescript": "^2.0.8"
   },
   "repository": {
     "type": "",
     "url": ""
   },
   "license": "UNLICENSED",
-  "description": "fireloop_todo"
+  "description": "fireloop_project"
 }

server/config.json

@@ -1,6 +1,6 @@
 {
   "restApiRoot": "/api",
-  "host": "127.0.0.1",
+  "host": "0.0.0.0",
   "port": 3000,
   "remoting": {
     "context": false,

tsconfig.json

@@ -6,6 +6,12 @@
         "preserveConstEnums": true,
         "sourceMap": true,
         "experimentalDecorators": true,
-        "moduleResolution": "node"
+        "moduleResolution": "node",
+        "typeRoots": [
+            "./node_modules/types"
+        ],
+        "types": [
+            "node"
+        ]
     }
 }

webapp/.editorconfig

@@ -5,7 +5,6 @@ root = true
 charset = utf-8
 indent_style = space
 indent_size = 2
-end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true
 

webapp/README.md

@@ -1,6 +1,6 @@
 # Webapp
 
-This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.18.
+This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.19-3.
 
 ## Development server
 Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

webapp/angular-cli.json

@@ -1,6 +1,6 @@
 {
   "project": {
-    "version": "1.0.0-beta.18",
+    "version": "1.0.0-beta.19-3",
     "name": "webapp"
   },
   "apps": [

webapp/karma.conf.js

@@ -27,7 +27,9 @@ module.exports = function (config) {
       config: './angular-cli.json',
       environment: 'dev'
     },
-    reporters: ['progress', 'karma-remap-istanbul'],
+    reporters: config.angularCli && config.angularCli.codeCoverage
+              ? ['progress', 'karma-remap-istanbul']
+              : ['progress'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,

webapp/package.json

@@ -20,7 +20,10 @@
     "@angular/platform-browser": "~2.1.0",
     "@angular/platform-browser-dynamic": "~2.1.0",
     "@angular/router": "~3.1.0",
+    "chart.js": "^2.3.0",
     "core-js": "^2.4.1",
+    "moment": "^2.16.0",
+    "ng2-charts": "^1.4.1",
     "rxjs": "5.0.0-beta.12",
     "socket.io-client": "^1.5.1",
     "ts-helpers": "^1.1.1",
@@ -30,7 +33,7 @@
     "@types/jasmine": "^2.2.30",
     "@types/node": "^6.0.42",
     "@types/socket.io-client": "^1.4.28",
-    "angular-cli": "1.0.0-beta.18",
+    "angular-cli": "1.0.0-beta.19-3",
     "codelyzer": "1.0.0-beta.1",
     "jasmine-core": "2.4.1",
     "jasmine-spec-reporter": "2.5.0",
@@ -42,6 +45,7 @@
     "protractor": "4.0.9",
     "ts-node": "1.2.1",
     "tslint": "3.13.0",
-    "typescript": "~2.0.3"
+    "typescript": "~2.0.3",
+    "webdriver-manager": "10.2.5"
   }
 }

webapp/src/app/app.component.html

@@ -2,7 +2,8 @@ <h1>
   {{title}}
 </h1>
 <form (submit)="create()">
-  <input name="todo" [(ngModel)]="todo.text" placeholder="Add Todo" />
+  <input name="todo" type="text" [(ngModel)]="todo.text" placeholder="Add Todo" />
+  <input name="todo" type="date" [(ngModel)]="todo.dueAt" placeholder="Due Date" />
   <button>Add Todo</button>
 </form>
 <ul>
@@ -11,4 +12,17 @@ <h1>
     <button (click)="update(_todo)">Update</button>
     <button (click)="remove(_todo)">Remove</button>
   </li>
-</ul>
+</ul>
+<div class="row">
+  <div class="col-md-6">
+    <div style="display: block;">
+    <canvas *ngIf="lineChartData.length > 0" baseChart width="400" height="400"
+                [datasets]="lineChartData"
+                [labels]="lineChartLabels"
+                [options]="lineChartOptions"
+                [colors]="lineChartColors"
+                [legend]="lineChartLegend"
+                [chartType]="lineChartType"></canvas>
+    </div>
+  </div>
+</div>

webapp/src/app/app.component.ts

@@ -1,6 +1,9 @@
+require('chart.js');
+
 import { Component } from '@angular/core';
 import { Todo, FireLoopRef } from './shared/sdk/models';
 import { RealTime } from './shared/sdk/services';
+import * as moment from 'moment';
 
 @Component({
   selector: 'app-root',
@@ -13,9 +16,37 @@ export class AppComponent {
   private title   : string = 'Todo app works!';
   private todo    : Todo   = new Todo();
   private todoRef : FireLoopRef<Todo>;
+  private lineChartData:Array<any> = [];
+  private lineChartLabels:Array<any> = [];
+  private lineChartOptions:any = {
+    animation: false,
+    responsive: false
+  };
+  private lineChartColors:Array<any> = [
+    { 
+      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)'
+    }
+  ];
+  private lineChartLegend:boolean = true;
+  private lineChartType:string = 'line';
 
   constructor(private rt: RealTime) {
     this.todoRef = this.rt.FireLoop.ref<Todo>(Todo);
+    this.todoRef.stats().subscribe((stats: any) => {
+      this.lineChartLabels = new Array();
+      this.lineChartData   = new Array();
+      let data = new Array();
+      stats.forEach((stat: any) => {
+        data.push(stat.count);
+        this.lineChartLabels.push(moment(stat.universal).format('MM-YYYY'));
+      });
+      this.lineChartData.push({ data: data, label: 'Number of Dued Todos'});
+    });
   }
 
   create(): void {

webapp/src/app/app.module.ts

@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { SDKModule } from './shared/sdk/index';
 import { AppComponent } from './app.component';
+import { ChartsModule } from 'ng2-charts/ng2-charts';
 
 @NgModule({
   declarations: [
@@ -11,10 +12,11 @@ import { AppComponent } from './app.component';
   imports: [
     BrowserModule,
     FormsModule,
-    SDKModule.forRoot()
+    SDKModule.forRoot(),
+    ChartsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
 
-export class AppModule { }
+export class AppModule { }

webapp/src/app/shared/sdk/lb.config.ts

@@ -20,7 +20,7 @@
 * }
 **/
 export class LoopBackConfig {
-  private static path: string = '//127.0.0.1:3000';
+  private static path: string = '//0.0.0.0:3000';
   private static version: string | number = 'api';
   private static authPrefix: string = '';
   private static debug: boolean = true;

webapp/src/app/shared/sdk/models/Todo.ts

@@ -3,13 +3,15 @@
 declare var Object: any;
 export interface TodoInterface {
   text?: string;
+  dueAt: Date;
   id?: number;
   createdAt: Date;
   updatedAt: Date;
 }
 
 export class Todo implements TodoInterface {
   text: string;
+  dueAt: Date;
   id: number;
   createdAt: Date;
   updatedAt: Date;