Difference between revisions of "FRM PR"

From mn/ifi/inf5750
Jump to: navigation, search
(Created page with "== #1 == ===Status=== MERGET ===PQ=== The following changes since commit 1e6ce2f50c69ca191a07aaad996f4deb464880f8: Fixed map (pair programming) (2015-11-12 14:11:13 +01...")
 
Line 5: Line 5:
 
  The following changes since commit 1e6ce2f50c69ca191a07aaad996f4deb464880f8:
 
  The following changes since commit 1e6ce2f50c69ca191a07aaad996f4deb464880f8:
 
   
 
   
  Fixed map  (pair programming) (2015-11-12 14:11:13 +0100)  
+
  Fixed map  (pair programming) (2015-11-12 14:11:13 +0100)
 
+
are available in the git repository at:
+
are available in the git repository at:
 
   
 
   
  gitolite@git.uio.no:u/erikhf/frm.git apiService
+
  gitolite@git.uio.no:u/erikhf/frm.git search
 
   
 
   
for you to fetch changes up to aca80f6a97807505358ebe0d62d58e3de67252c3:
+
for you to fetch changes up to 2cae79a5fb719d73b248913fa7bf502dc47d8bfa:
 
   
 
   
  [apiService] created a service for getting the API URL (2015-11-14 13:43:58 +0100)
+
  [search] Code cleanup (2015-11-14 15:33:39 +0100)
 
   
 
   
 
  ----------------------------------------------------------------
 
  ----------------------------------------------------------------
  Erik Haider Forsén (1):
+
  Erik Haider Forsén (10):
      [apiService] created a service for getting the API URL
+
      [search] experimenting with pipes
   
+
      semi working live search
  src/components/app.ts                   | 11 +++++++++--
+
      No longer needed as we're using the query functionality in the API.
src/components/dhisapi/dhisapiService.ts | 18 ++++++++++++++++++
+
      Modified to query the api with the search string
src/components/filter/filter.ts          | 16 +++++++++++++++-
+
      [search] fixed api query, live/dynamic search is now working (verified on dhis-live platform)
src/index.html                           8 +-------
+
      [apiService] created a service for getting the API URL
4 files changed, 43 insertions(+), 10 deletions(-)
+
      Merge branch 'master' into search
create mode 100644 src/components/dhisapi/dhisapiService.ts
+
      Revert "[apiService] created a service for getting the API URL"
 +
      Merge branch 'master' into search
 +
      [search] Code cleanup
 +
 
 +
  package.json                          | 1 +
 +
  src/components/app.ts                  | 4 +--
 +
  src/components/search/SearchService.ts | 21 +++++++++++++++
 +
  src/components/search/livesearch.ts   | 47 ++++++++++++++++++++++++++++++++++
 +
  src/components/search/search.html      | 20 ++++++++++++++-
 +
  src/components/search/search.ts        | 13 +++++++---
 +
  src/index.html                         5 +++-
 +
  7 files changed, 103 insertions(+), 8 deletions(-)
 +
  create mode 100644 src/components/search/SearchService.ts
 +
  create mode 100644 src/components/search/livesearch.ts
 
   
 
   
 +
diff --git a/package.json b/package.json
 +
index 077cd86..aaef61f 100644
 +
--- a/package.json
 +
+++ b/package.json
 +
@@ -15,6 +15,7 @@
 +
  "author": "",
 +
  "license": "ISC",
 +
  "dependencies": {
 +
+    "@reactivex/rxjs": "^5.0.0-alpha.10",
 +
    "angular2": "2.0.0-alpha.44",
 +
    "systemjs": "0.19.2"
 +
  },
 
  diff --git a/src/components/app.ts b/src/components/app.ts
 
  diff --git a/src/components/app.ts b/src/components/app.ts
  index cb9479e..a3d4fd3 100644  
+
  index cb9479e..7feefc3 100644
 
  --- a/src/components/app.ts
 
  --- a/src/components/app.ts
 
  +++ b/src/components/app.ts
 
  +++ b/src/components/app.ts
  @@ -3,6 +3,7 @@ import {Component, View, bootstrap, provide} from 'angular2/angular2';
+
  @@ -1,5 +1,5 @@
 +
import {HTTP_PROVIDERS} from 'angular2/http';
 +
-import {Component, View, bootstrap, provide} from 'angular2/angular2';
 +
+import {Component, View, bootstrap, provide, ELEMENT_PROBE_PROVIDERS} from 'angular2/angular2';
 
  import {Map} from './map/map';
 
  import {Map} from './map/map';
 
  import {Search} from "./search/search";
 
  import {Search} from "./search/search";
 
  import {Filter} from "./filter/filter";
 
  import {Filter} from "./filter/filter";
+import {DhisapiService} from "./dhisapi/dhisapiService";
+
  @@ -18,4 +18,4 @@ class App {
+
 
declare var System:any;
 
 
  @@ -10,12 +11,18 @@ declare var System:any;
 
    {
 
        selector: 'mou-app',
 
        templateUrl: './components/app.html',
 
-        directives:[Filter, Map, Search]
 
+        directives:[Filter, Map, Search],
 
+        providers: [DhisapiService]
 
      })
 
 
 
class App {
 
+    construector(dhis: DhisapiService){
 
+        dhis.getApiURL(function(uri){
 
+            console.log(uri);
 
+        })
 
+    }
 
 
 
  }
 
  }
 
   
 
   
 
  -bootstrap(App,[HTTP_PROVIDERS]);
 
  -bootstrap(App,[HTTP_PROVIDERS]);
 
  \ No newline at end of file
 
  \ No newline at end of file
  +bootstrap(App,[HTTP_PROVIDERS,DhisapiService]);
+
  +bootstrap(App,[HTTP_PROVIDERS, ELEMENT_PROBE_PROVIDERS]);
  diff --git a/src/components/dhisapi/dhisapiService.ts b/src/components/dhisapi/dhisapiService.ts
+
  diff --git a/src/components/search/SearchService.ts b/src/components/search/SearchService.ts
 
  new file mode 100644
 
  new file mode 100644
  index 0000000..38f9c4b
+
  index 0000000..c17203d
 
  --- /dev/null
 
  --- /dev/null
  +++ b/src/components/dhisapi/dhisapiService.ts
+
  +++ b/src/components/search/SearchService.ts
  @@ -0,0 +1,18 @@
+
  @@ -0,0 +1,21 @@
  +import {Injectable} from 'angular2/angular2';
+
  +import {provide, Injectable} from 'angular2/angular2';
 
  +import {Http} from 'angular2/http';
 
  +import {Http} from 'angular2/http';
 +
+import * as Rx from '@reactivex/rxjs/dist/cjs/Rx';
 
  +
 
  +
 
  +@Injectable()
 
  +@Injectable()
  +export class DhisapiService {
+
  +export class SearchService {
  +    private http: Http;
+
+
 +
  +    constructor(public http: Http){
 +
+
 +
+    }
 +
+    search(query: string): Rx.Observable<any[]>{
 +
+        return this.http.get(dhisAPI + "/api/organisationUnits?paging=false&filter=name:like:" + query)
 +
+            .map(res=>res.json())
 +
+            .map(res => res.organisationUnits)
 +
+            .filter(orgunits => orgunits);
 +
+    }
 +
+}
 +
+
 +
+export var SEARCH_PROVIDERS: Array<any> = [
 +
+    provide(SearchService, {useClass: SearchService})
 +
+];
 +
diff --git a/src/components/search/livesearch.ts b/src/components/search/livesearch.ts
 +
new file mode 100644
 +
index 0000000..0158b24
 +
--- /dev/null
 +
+++ b/src/components/search/livesearch.ts
 +
@@ -0,0 +1,47 @@
 +
+import {Directive, View, EventEmitter, ElementRef} from 'angular2/angular2';
 +
+
 +
+// RxJs
 +
+import * as Rx from '@reactivex/rxjs/dist/cjs/Rx';
 +
+
 +
+import {SearchService} from "./SearchService";
 +
+
 +
+declare var zone: Zone;
 +
+
 +
+@Directive({
 +
+    selector: 'input[type=text][mou-live-search]',
 +
+    outputs: ['results', 'loading'],
 +
+    providers: [SearchService]
 +
+})
 +
+export class LiveSearch {
 +
+    results: EventEmitter = new EventEmitter();
 +
+    loading: EventEmitter = new EventEmitter();
 +
+
 +
+    constructor( private el: ElementRef, public search: SearchService){
 
  +
 
  +
+    constructor(http: Http){
 
+        this.http = http;
 
 
  +    }
 
  +    }
 
  +
 
  +
  +    getApiURL = function(callback){
+
  +    onInit(){
  +        this.http.get('../manifest.webapp')
+
  +        console.log("starting");
  +            .map(res => res.json())
+
+        (<any>Rx).Observable.fromEvent(this.el.nativeElement, 'keyup')
  +            .map(res => res.activities.dhis.href)
+
+            .map(e => e.target.value)
  +            .subscribe( res => callback(res));
+
+            .filter(text => text.length > 2)
 +
+            .debounceTime(250)
 +
+            .distinctUntilChanged()
 +
  +            .do(zone.bind(() => this.loading.next(true)))
 +
  +            .flatMap(query => this.search.search(query))
 +
+            .do(zone.bind(() => this.loading.next(false)))
 +
  +            .subscribe(
 +
+                zone.bind( orgunits => {
 +
+                    this.results.next(orgunits);
 +
+                }),
 +
+                zone.bind(err => {
 +
+                    console.log(err);
 +
+                    this.results.next(['ERROR, see console']);
 +
+                }),
 +
+                () => {
 +
+                    console.log("complete");
 +
+                }
 +
+            )
 
  +    }
 
  +    }
 
  +}
 
  +}
  diff --git a/src/components/filter/filter.ts b/src/components/filter/filter.ts
+
+
  index a3a63b7..9181b79 100644
+
diff --git a/src/components/search/search.html b/src/components/search/search.html
  --- a/src/components/filter/filter.ts
+
index 373e5cc..2d6495f 100644
  +++ b/src/components/filter/filter.ts
+
--- a/src/components/search/search.html
  @@ -1,15 +1,18 @@
+
+++ b/src/components/search/search.html
  import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2';
+
@@ -1 +1,19 @@
  import {Headers, Http} from 'angular2/http';
+
-<div style="width: 500px; height: 50px; background: #ff647c; ">Søkefelt! </div>
  +import {DhisapiService} from "../dhisapi/dhisapiService";
+
\ No newline at end of file
+
+
 +
+    <section class="form-group">
 +
+        <label class="sr-only" for="livesearch">Search</label>
 +
+        <input
 +
+                mou-live-search
 +
+                (results)="orgunits = $event"
 +
+                (loading)="loading = $event"
 +
+                type="text"
 +
+                autofocus
 +
+                id="livesearch">
 +
+        <img style="width: 20px; position: absolute;"
 +
+            [hidden]="!loading"
 +
+            src="https://www.brown.edu/sites/default/themes/pawtuxet/img/loader-larger.gif">
 +
+    </section>
 +
+    <section>
 +
+        <div *ng-for="#orgunit of orgunits" style="padding: 0.5em 0.5em 0.5em 0;">
 +
+            <p>{{orgunit.name}}</p>
 +
+        </div>
 +
+    </section>
 +
  diff --git a/src/components/search/search.ts b/src/components/search/search.ts
 +
  index f5a52cb..951c866 100644
 +
  --- a/src/components/search/search.ts
 +
  +++ b/src/components/search/search.ts
 +
  @@ -1,12 +1,17 @@
 +
  -import {Component, CORE_DIRECTIVES} from 'angular2/angular2';
 +
  +import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2';
 +
  +import {LiveSearch} from "./livesearch";
 +
 
 
  @Component({
 
  @Component({
     selector: 'mou-filter',
+
     selector: 'mou-search',
    directives: [CORE_DIRECTIVES],
+
-    directives: [CORE_DIRECTIVES],
  -   templateUrl: './components/filter/filter.html'
+
  +   directives: [CORE_DIRECTIVES, LiveSearch],
+    templateUrl: './components/filter/filter.html',
+
    templateUrl: './components/search/search.html'
+    providers: [DhisapiService]
 
 
  })
 
  })
   
+
  -
  export class Filter {
+
-
    result: Object;
+
  export class Search {
+
+    orgunits: Array<any> = [];
  +    dhis: DhisapiService;
+
  +    loading: boolean = false;
    // Example HTTP request
+
 
+
  +    constructor(){
    /*
 
@@ -31,4 +34,15 @@ export class Filter {
 
    }
 
 
    */
 
+
 
  +    constructor(dhis: DhisapiService){
 
+        this.dhis = dhis;
 
 
  +    }
 
  +    }
 +
}
 
  +
 
  +
+    onInit(){
 
+        this.dhis.getApiURL(function(uri){
 
+            console.log("Dette er uri: " + uri);
 
+        })
 
+    }
 
 
  +
 
  +
  }
 
 
  diff --git a/src/index.html b/src/index.html
 
  diff --git a/src/index.html b/src/index.html
  index c712323..3b1e667 100644
+
  index c712323..d86b77e 100644
 
  --- a/src/index.html
 
  --- a/src/index.html
 
  +++ b/src/index.html
 
  +++ b/src/index.html
  @@ -3,13 +3,7 @@
+
  @@ -3,6 +3,9 @@
 
  <head>
 
  <head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <title>Sample App</title>
 
     <title>Sample App</title>
  -   <script>
+
  +
  -        var xhReq = new XMLHttpRequest();
+
+   <script src="../node_modules/@reactivex/rxjs/dist/global/Rx.js"></script>
-        xhReq.open("GET", "../manifest.webapp", false);
+
  +
  -       xhReq.send(null);
+
    <script>
-        var serverResponse = JSON.parse(xhReq.responseText);
+
        var xhReq = new XMLHttpRequest();
-        var dhisAPI = serverResponse.activities.dhis.href;
+
        xhReq.open("GET", "../manifest.webapp", false);
-    </script>
+
  @@ -14,7 +17,7 @@
  +
 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDlgw6kZAQvD8ex_md-6wb_NcnVlZWkbE4"></script>
 
 
     <script src="../node_modules/systemjs/dist/system.src.js"></script>
 
     <script src="../node_modules/systemjs/dist/system.src.js"></script>
 
     <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
 
     <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
 +
    <script src="../node_modules/angular2/bundles/http.dev.js"></script>
 +
-    <script src="../node_modules/angular2/bundles/router.dev.js"></script>
 +
+    <!--<script src="../node_modules/angular2/bundles/router.dev.js"></script>-->
 +
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
 +
    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 +
    <link rel="stylesheet" type="text/css" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">

Revision as of 15:38, 14 November 2015

#1

Status

MERGET

PQ

The following changes since commit 1e6ce2f50c69ca191a07aaad996f4deb464880f8:

 Fixed map  (pair programming) (2015-11-12 14:11:13 +0100)

are available in the git repository at:

 gitolite@git.uio.no:u/erikhf/frm.git search

for you to fetch changes up to 2cae79a5fb719d73b248913fa7bf502dc47d8bfa:

 [search] Code cleanup (2015-11-14 15:33:39 +0100)

----------------------------------------------------------------
Erik Haider Forsén (10):
     [search] experimenting with pipes
     semi working live search
     No longer needed as we're using the query functionality in the API.
     Modified to query the api with the search string
     [search] fixed api query, live/dynamic search is now working (verified on dhis-live platform)
     [apiService] created a service for getting the API URL
     Merge branch 'master' into search
     Revert "[apiService] created a service for getting the API URL"
     Merge branch 'master' into search
     [search] Code cleanup
 package.json                           |  1 +
 src/components/app.ts                  |  4 +--
 src/components/search/SearchService.ts | 21 +++++++++++++++
 src/components/search/livesearch.ts    | 47 ++++++++++++++++++++++++++++++++++
 src/components/search/search.html      | 20 ++++++++++++++-
 src/components/search/search.ts        | 13 +++++++---
 src/index.html                         |  5 +++-
 7 files changed, 103 insertions(+), 8 deletions(-)
 create mode 100644 src/components/search/SearchService.ts
 create mode 100644 src/components/search/livesearch.ts

diff --git a/package.json b/package.json
index 077cd86..aaef61f 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
  "author": "",
  "license": "ISC",
  "dependencies": {
+    "@reactivex/rxjs": "^5.0.0-alpha.10",
    "angular2": "2.0.0-alpha.44",
    "systemjs": "0.19.2"
  },
diff --git a/src/components/app.ts b/src/components/app.ts
index cb9479e..7feefc3 100644
--- a/src/components/app.ts
+++ b/src/components/app.ts
@@ -1,5 +1,5 @@
import {HTTP_PROVIDERS} from 'angular2/http';
-import {Component, View, bootstrap, provide} from 'angular2/angular2';
+import {Component, View, bootstrap, provide, ELEMENT_PROBE_PROVIDERS} from 'angular2/angular2';
import {Map} from './map/map';
import {Search} from "./search/search";
import {Filter} from "./filter/filter";
@@ -18,4 +18,4 @@ class App {
 
}

-bootstrap(App,[HTTP_PROVIDERS]);
\ No newline at end of file
+bootstrap(App,[HTTP_PROVIDERS, ELEMENT_PROBE_PROVIDERS]);
diff --git a/src/components/search/SearchService.ts b/src/components/search/SearchService.ts
new file mode 100644
index 0000000..c17203d
--- /dev/null
+++ b/src/components/search/SearchService.ts
@@ -0,0 +1,21 @@
+import {provide, Injectable} from 'angular2/angular2';
+import {Http} from 'angular2/http';
+import * as Rx from '@reactivex/rxjs/dist/cjs/Rx';
+
+@Injectable()
+export class SearchService {
+
+    constructor(public http: Http){
+
+    }
+    search(query: string): Rx.Observable<any[]>{
+        return this.http.get(dhisAPI + "/api/organisationUnits?paging=false&filter=name:like:" + query)
+            .map(res=>res.json())
+            .map(res => res.organisationUnits)
+            .filter(orgunits => orgunits);
+    }
+}
+
+export var SEARCH_PROVIDERS: Array<any> = [
+    provide(SearchService, {useClass: SearchService})
+];
diff --git a/src/components/search/livesearch.ts b/src/components/search/livesearch.ts
new file mode 100644
index 0000000..0158b24
--- /dev/null
+++ b/src/components/search/livesearch.ts
@@ -0,0 +1,47 @@
+import {Directive, View, EventEmitter, ElementRef} from 'angular2/angular2';
+
+// RxJs
+import * as Rx from '@reactivex/rxjs/dist/cjs/Rx';
+
+import {SearchService} from "./SearchService";
+
+declare var zone: Zone;
+
+@Directive({
+    selector: 'input[type=text][mou-live-search]',
+    outputs: ['results', 'loading'],
+    providers: [SearchService]
+})
+export class LiveSearch {
+    results: EventEmitter = new EventEmitter();
+    loading: EventEmitter = new EventEmitter();
+
+    constructor( private el: ElementRef, public search: SearchService){
+
+    }
+
+    onInit(){
+        console.log("starting");
+        (<any>Rx).Observable.fromEvent(this.el.nativeElement, 'keyup')
+            .map(e => e.target.value)
+            .filter(text => text.length > 2)
+            .debounceTime(250)
+            .distinctUntilChanged()
+            .do(zone.bind(() => this.loading.next(true)))
+            .flatMap(query => this.search.search(query))
+            .do(zone.bind(() => this.loading.next(false)))
+            .subscribe(
+                zone.bind( orgunits => {
+                    this.results.next(orgunits);
+                }),
+                zone.bind(err => {
+                    console.log(err);
+                    this.results.next(['ERROR, see console']);
+                }),
+                () => {
+                    console.log("complete");
+                }
+            )
+    }
+}
+
diff --git a/src/components/search/search.html b/src/components/search/search.html
index 373e5cc..2d6495f 100644
--- a/src/components/search/search.html
+++ b/src/components/search/search.html
@@ -1 +1,19 @@
-
Søkefelt!
\ No newline at end of file
+
+    <section class="form-group">
+        <label class="sr-only" for="livesearch">Search</label>
+        <input
+                mou-live-search
+                (results)="orgunits = $event"
+                (loading)="loading = $event"
+                type="text"
+                autofocus
+                id="livesearch">
+        <img style="width: 20px; position: absolute;"
+             [hidden]="!loading"
+             src="loader-larger.gif">
+    </section>
+    <section>
+
+

Template:Orgunit.name

+
+    </section>
diff --git a/src/components/search/search.ts b/src/components/search/search.ts
index f5a52cb..951c866 100644
--- a/src/components/search/search.ts
+++ b/src/components/search/search.ts
@@ -1,12 +1,17 @@
-import {Component, CORE_DIRECTIVES} from 'angular2/angular2';
+import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2';
+import {LiveSearch} from "./livesearch";
 
@Component({
    selector: 'mou-search',
-    directives: [CORE_DIRECTIVES],
+    directives: [CORE_DIRECTIVES, LiveSearch],
    templateUrl: './components/search/search.html'
})
-
-
export class Search {
+    orgunits: Array<any> = [];
+    loading: boolean = false;
 
+    constructor(){
+    }
}
+
+
diff --git a/src/index.html b/src/index.html
index c712323..d86b77e 100644
--- a/src/index.html
+++ b/src/index.html
@@ -3,6 +3,9 @@
<head>
    <meta charset="UTF-8">
    <title>Sample App</title>
+
+    <script src="../node_modules/@reactivex/rxjs/dist/global/Rx.js"></script>
+
    <script>
        var xhReq = new XMLHttpRequest();
        xhReq.open("GET", "../manifest.webapp", false);
@@ -14,7 +17,7 @@
    <script src="../node_modules/systemjs/dist/system.src.js"></script>
    <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="../node_modules/angular2/bundles/http.dev.js"></script>
-    <script src="../node_modules/angular2/bundles/router.dev.js"></script>
+    
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">