Update readme & prepare working live demo

Author: qjon

.angular-cli.json

@@ -6,8 +6,8 @@
   },
   "apps": [
     {
-      "root": "demo/src",
-      "outDir": "dist",
+      "root": "./demo/src",
+      "outDir": "./dist",
       "assets": [
         "assets",
         "favicon.ico"

.travis.yml

@@ -17,7 +17,7 @@ apt:
 install:
   - npm i -g @angular/cli
   - npm i
-  - ./node_modules/.bin/karma --config karma.conf.js start
+  - npm test
 
 before_install:
   - export CHROME_BIN=chromium-browser

README.md

@@ -1,50 +1,13 @@
 # angular2-tree
 
-## Installation
-
-    npm i @rign/angular2-tree
-    
-## Changes
-
-### v1.0.0
-
-* use ngrx/store
-* remove events ITreeItemEvents - use Actions and Effects
-* remove NodeModel
-* simplify using tree
-
-### v0.8.1
-
-* fix package.json
-
-### v0.8.0
-
-* allow to create own template for tree item (if not specify it use default) - look in demo
-* input option _disableContextMenu_ to disable context menu (default: false)
-* update Demo - add alternative view of tree
-
-### v0.7.0
-
-* remove API config service (see section _Usage_)
-
-### v0.6.2
-
-* change name FolderService to NodeService
-* change params names from _dirId_ to _nodeId_
-* now you can use in your API paths parameter _{nodeId}_ which will be replaced on _nodeId_
-
-### v0.6.1
-
-* expose _ConfigService_ - it allow override urls for create, edit, and delete folder
+## Demo
 
-### v0.6.0
+Working demo with _local storage_ you can find [here](https://qjon.github.io/angular2-tree/).
 
-* upgrade angular/cli to version _beta.32.3_
-* fix demo
-
-### v0.5.0
+## Installation
 
-* primary version with all features described below.
+    npm i @rign/angular2-tree
+   
 
 ## Usage
 
@@ -79,9 +42,10 @@ Create your own loader service as it is done in example
       }
     }
 
-and use it to load data.
+and use it to load data. Or you can extend and rewrite all methods of that service to store your data wherever you want. See example _localStorage.service.ts_
+
 
-In component where you create tree you should register _tree store_, create _TreeModel_ and load root tree
+In component where you create tree, you should register _tree store_, create _TreeModel_ and load root tree
 
     export class MyTreeComponent implements OnInit {
       public folders: Observable<ITreeData>;
@@ -177,16 +141,71 @@ Then when you create tree component in your application use such construction
 
 and that is all. Please see Demo where is such example.
 
-## Demo
+## Events(Actions)
+
+Using _ngrx/store_ you can listen on below actions and do whatever you want:
+
+    TreeActionsService.TREE_SAVE_NODE
+    TreeActionsService.TREE_SAVE_NODE_SUCCESS
+    TreeActionsService.TREE_SAVE_NODE_ERROR
+    TreeActionsService.TREE_DELETE_NODE
+    TreeActionsService.TREE_DELETE_NODE_SUCCESS
+    TreeActionsService.TREE_DELETE_NODE_ERROR
+    TreeActionsService.TREE_EDIT_NODE_START
+    TreeActionsService.TREE_EXPAND_NODE
+    TreeActionsService.TREE_LOAD
+    TreeActionsService.TREE_LOAD_SUCCESS
+    TreeActionsService.TREE_LOAD_ERROR
+    TreeActionsService.TREE_MOVE_NODE
+    TreeActionsService.TREE_MOVE_NODE_SUCCESS
+    TreeActionsService.TREE_MOVE_NODE_ERROR
+    TreeActionsService.TREE_REGISTER
+
+ 
+## Changes
 
-In folder _demo_ you can find application which use _TreeModule_
+### v2.0.0
+* use ngrx/store to store data
+* use actions and effects instead of events
+* add TravisCI configuration
+* remove backend example, move all functionality of demo to local storage
 
-To run this example run in console:
-    
-* frontend
-    
-        npm start
-        
-* backend (be sure that directory _demo/backend/data_ has permissions to write)
+### v1.0.0
+
+* use ngrx/store
+* remove events ITreeItemEvents - use Actions and Effects
+* remove NodeModel
+* simplify using tree
+
+### v0.8.1
+
+* fix package.json
+
+### v0.8.0
+
+* allow to create own template for tree item (if not specify it use default) - look in demo
+* input option _disableContextMenu_ to disable context menu (default: false)
+* update Demo - add alternative view of tree
 
-        npm run backend
+### v0.7.0
+
+* remove API config service (see section _Usage_)
+
+### v0.6.2
+
+* change name FolderService to NodeService
+* change params names from _dirId_ to _nodeId_
+* now you can use in your API paths parameter _{nodeId}_ which will be replaced on _nodeId_
+
+### v0.6.1
+
+* expose _ConfigService_ - it allow override urls for create, edit, and delete folder
+
+### v0.6.0
+
+* upgrade angular/cli to version _beta.32.3_
+* fix demo
+
+### v0.5.0
+
+* primary version with all features described below.

demo/proxy.config.example.json

@@ -1,7 +1,7 @@
 <div class="row">
   <div class="col-sm-6">
     <h2>Basic tree</h2>
-    <app-tree-three></app-tree-three>
+    <app-tree-one></app-tree-one>
   </div>
   <div class="col-sm-6">
     <h2>Tree with modified ItemComponent</h2>

demo/src/app/app.component.html

@@ -1,23 +1,14 @@
 import {Component, OnInit} from '@angular/core';
-import {
-  IConfiguration,
-  IContextMenu,
-  ITreeState,
-  TreeActionsService,
-  TreeModel,
-  NodeDispatcherService
-} from '../../../../main';
+import {IConfiguration, IContextMenu, ITreeState, ITreeData, TreeActionsService, TreeModel, NodeDispatcherService} from '../../../../main';
 import {Store} from '@ngrx/store';
 import {Observable} from 'rxjs/Observable';
-import {ITreeData} from '../../../../src/store/ITreeState';
-import {NodeService} from '../../../../src/service/node.service';
 import {TreeOneNodeService} from './treeOneNode.service';
 
 @Component({
-  selector: 'app-tree-three',
+  selector: 'app-tree-one',
   templateUrl: './treeOne.component.html'
 })
-export class TreeThreeComponent implements OnInit {
+export class TreeOneComponent implements OnInit {
   public folders: Observable<ITreeData>;
 
   public contextMenu: IContextMenu[] = [];

demo/src/app/app.component.spec.ts

@@ -3,14 +3,12 @@ import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {HttpModule} from '@angular/http';
 import {TreeModule} from '../../../../main';
-import {TreeThreeComponent} from "./treeOne.component";
-import {TreeOneNodeService} from "./treeOneNode.service";
+import {TreeOneNodeService} from './treeOneNode.service';
+import {TreeOneComponent} from './treeOne.component';
 
 @NgModule({
-  declarations: [
-    TreeThreeComponent
-  ],
-  exports: [TreeThreeComponent],
+  declarations: [TreeOneComponent],
+  exports: [TreeOneComponent],
   imports: [
     BrowserModule,
     FormsModule,

demo/src/app/treeOne/treeOne.component.ts

@@ -2,15 +2,15 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <title>Projects</title>
+  <title>angular2-tree</title>
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>
 <div class="container">
-  <h1>Angular2 - Tree</h1>
+  <h1>Angular2 - Tree v2.0.0</h1>
 
   <app-root>Loading...</app-root>
 </div>

demo/src/app/treeOne/treeOne.module.ts

@@ -1,11 +1,12 @@
 {
   "name": "@rign/angular2-tree",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "license": "MIT",
   "angular-cli": {},
   "scripts": {
-    "backend": "node demo/backend/index.js",
-    "start": "ng serve --proxy-config demo/proxy.config.example.json"
+    "start": "ng serve",
+    "test": "./node_modules/.bin/karma --config karma.conf.js start",
+    "gh-pages" : "ng build --env=prod --base-href \"https://qjon.github.io/angular2-tree/\" &&  ./node_modules/.bin/angular-cli-ghpages -b gh-pages  --name=\"Rafał Ignaszewski\" --email=\"[email protected]\" --no-silent"
   },
   "repository": {
     "type": "git",
@@ -40,15 +41,16 @@
     "@ngrx/store-devtools": "^3.2.4",
     "@types/jasmine": "2.5.38",
     "@types/node": "~6.0.60",
+    "angular-cli-ghpages": "^0.5.1",
     "codelyzer": "~2.0.0-beta.4",
     "jasmine-core": "~2.5.2",
     "jasmine-spec-reporter": "~3.2.0",
     "karma": "~1.4.1",
     "karma-chrome-launcher": "~2.0.0",
     "karma-cli": "~1.0.1",
+    "karma-coverage-istanbul-reporter": "^0.2.0",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "karma-coverage-istanbul-reporter": "^0.2.0",
     "protractor": "~5.1.0",
     "ts-node": "~2.0.0",
     "tslint": "~4.4.2",

demo/src/favicon.ico

@@ -45,7 +45,7 @@ export class ItemComponent implements OnInit, AfterViewInit {
   public children$: Observable<IOuterNode[]>;
 
 
-  private insert$: Observable<Action> = this.actions$
+  protected insert$: Observable<Action> = this.actions$
     .ofType(TreeActionsService.TREE_INSERT_NODE)
     .filter((action: Action) => {
       return action.payload && action.payload === this.node.id;

demo/src/index.html

@@ -13,8 +13,8 @@ import {
 } from '@angular/platform-browser-dynamic/testing';
 
 // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
-declare var __karma__: any;
-declare var require: any;
+declare const __karma__: any;
+declare const require: any;
 
 // Prevent Karma from running prematurely.
 __karma__.loaded = function () {};

package.json

@@ -12,14 +12,13 @@ import {ITreeState} from './store/ITreeState';
 @Component({
   encapsulation: ViewEncapsulation.None,
   selector: 'rign-tree',
-  templateUrl: 'tree.component.html',
-  styleUrls: ['tree.component.less']
+  templateUrl: './tree.component.html',
+  styleUrls: ['./tree.component.less']
 })
 export class TreeComponent implements OnInit, OnChanges {
   @Input() treeModel: TreeModel;
 
-  @ViewChild('contextMenu')
-  public contextMenu: ContextMenuComponent;
+  @ViewChild('contextMenu') contextMenu: ContextMenuComponent;
 
   /**
    * List of default options for context menu
@@ -46,8 +45,8 @@ export class TreeComponent implements OnInit, OnChanges {
    */
   public menuList: IContextMenu[] = [];
 
-  public constructor(private store: Store<ITreeState>,
-                     private treeActions: TreeActionsService,
+  public constructor(protected store: Store<ITreeState>,
+                     protected treeActions: TreeActionsService,
                      protected dragAndDrop: DragAndDrop) {
 
   }
@@ -93,7 +92,7 @@ export class TreeComponent implements OnInit, OnChanges {
   /**
    * Register node "move event"
    */
-  private registerMove(): void {
+  protected registerMove(): void {
     if (this.treeModel.configuration.disableMoveNodes) {
       return;
     }