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...")
 
 
(7 intermediate revisions by one other user not shown)
Line 2: Line 2:
 
===Status===
 
===Status===
 
MERGET
 
MERGET
−
===PQ===
+
===PR===
 +
<pre>
 
  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
 +
      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
 
   
 
   
−
  src/components/app.ts                   | 11 +++++++++--
+
  package.json                          | 1 +
−
src/components/dhisapi/dhisapiService.ts | 18 ++++++++++++++++++
+
  src/components/app.ts                 | 4 +--
−
src/components/filter/filter.ts          | 16 +++++++++++++++-
+
  src/components/search/SearchService.ts | 21 +++++++++++++++
−
src/index.html                           |  8 +-------
+
  src/components/search/livesearch.ts   | 47 ++++++++++++++++++++++++++++++++++
−
4 files changed, 43 insertions(+), 10 deletions(-)
+
  src/components/search/search.html      | 20 ++++++++++++++-
−
create mode 100644 src/components/dhisapi/dhisapiService.ts
+
  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">
 +
</pre>
 +
 +
==#2==
 +
===Status===
 +
MERGET
 +
===PR===
 +
<pre>
 +
  The following changes since commit 2cae79a5fb719d73b248913fa7bf502dc47d8bfa:
 +
 +
    [search] Code cleanup (2015-11-14 15:33:39 +0100)
 +
 +
  are available in the git repository at:
 +
 +
    gitolite@git.uio.no:u/erikhf/frm.git search
 +
 +
  for you to fetch changes up to 42930dd2cd2a8d6ad50eea592ebe888c8db28371:
 +
 +
    [search] Styling the search input and results (2015-11-15 16:30:21 +0100)
 +
 +
  ----------------------------------------------------------------
 +
  Erik Haider Forsén (3):
 +
        [search] Make search result clickable
 +
        [search] Moved styles to separate css file
 +
        [search] Styling the search input and results
 +
 +
    src/components/search/search.css  | 52 +++++++++++++++++++++++++++++++++++++++
 +
    src/components/search/search.html | 20 ++++++++-------
 +
    src/components/search/search.ts  |  8 ++++--
 +
    3 files changed, 69 insertions(+), 11 deletions(-)
 +
    create mode 100644 src/components/search/search.css
 +
 +
  diff --git a/src/components/search/search.css b/src/components/search/search.css
 +
  new file mode 100644
 +
  index 0000000..2344396
 +
  --- /dev/null
 +
  +++ b/src/components/search/search.css
 +
  @@ -0,0 +1,52 @@
 +
  +.search div{
 +
  +    position: relative;
 +
  +}
 +
  +
 +
  +.search img{
 +
  +    width: 20px;
 +
  +    position: absolute;
 +
  +}
 +
  +
 +
  +.search li{
 +
  +    padding: 0.5em 0.5em 0.5em 0;
 +
  +    float: none;
 +
  +}
 +
  +
 +
  +.search ul {
 +
  +    display: block;
 +
  +    position: absolute;
 +
  +    top: 100%;
 +
  +    left: 0;
 +
  +    z-index: 1000;
 +
  +    float: left;
 +
  +    min-width: 160px;
 +
  +    padding: 5px 0;
 +
  +    margin: 4px 0 0;
 +
  +    font-size: 14px;
 +
  +    text-align: left;
 +
  +    list-style: none;
 +
  +    background-color: #fff;
 +
  +    -webkit-background-clip: padding-box;
 +
  +    background-clip: padding-box;
 +
  +    border: 1px solid #ccc;
 +
  +    border: 1px solid rgba(0, 0, 0, .15);
 +
  +    border-radius: 4px;
 +
  +    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
 +
  +    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
 +
  +}
 +
  +
 +
  +.results > li > a{
 +
  +    display: block;
 +
  +    padding: 3px 20px;
 +
  +    clear: both;
 +
  +    font-weight: 400;
 +
  +    line-height: 1.42857143;
 +
  +    color: #333;
 +
  +    white-space: nowrap
 +
  +}
 +
  +
 +
  +.results > li > a:focus, .results > li > a:hover {
 +
  +    color: #262626;
 +
  +    text-decoration: none;
 +
  +    background-color: #f5f5f5
 +
  +}
 +
  diff --git a/src/components/search/search.html b/src/components/search/search.html
 +
  index 2d6495f..bae546b 100644
 +
  --- a/src/components/search/search.html
 +
  +++ b/src/components/search/search.html
 +
  @@ -1,5 +1,4 @@
 +
  -
 +
  -    <section class="form-group">
 +
  +<div class="search clearfix">
 +
            <label class="sr-only" for="livesearch">Search</label>
 +
            <input
 +
                    mou-live-search
 +
  @@ -7,13 +6,16 @@
 +
                    (loading)="loading = $event"
 +
                    type="text"
 +
                    autofocus
 +
  +                class="form-control"
 +
                    id="livesearch">
 +
  -        <img style="width: 20px; position: absolute;"
 +
  -            [hidden]="!loading"
 +
  +        <img [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 [hidden]="!orgunits.length">
 +
  +            <ul class="results" >
 +
  +                <li *ng-for="#orgunit of orgunits" (click)="getMoreInfo(orgunit)">
 +
  +                    <a href="#">{{orgunit.name}}<br/><span>{{orgunit.lastUpdated}}</span></a>
 +
  +                </li>
 +
  +            </ul>
 +
            </div>
 +
  -    </section>
 +
  +</div>
 +
  diff --git a/src/components/search/search.ts b/src/components/search/search.ts
 +
  index 951c866..d9d90ae 100644
 +
  --- a/src/components/search/search.ts
 +
  +++ b/src/components/search/search.ts
 +
  @@ -4,14 +4,18 @@ import {LiveSearch} from "./livesearch";
 +
    @Component({
 +
        selector: 'mou-search',
 +
        directives: [CORE_DIRECTIVES, LiveSearch],
 +
  -    templateUrl: './components/search/search.html'
 +
  +    templateUrl: './components/search/search.html',
 +
  +    styleUrls: ['./components/search/search.css']
 +
    })
 +
    export class Search {
 +
        orgunits: Array<any> = [];
 +
        loading: boolean = false;
 +
   
 +
  -    constructor(){
 +
  +    getMoreInfo(orgunit){
 +
  +        console.log(orgunit.id);
 +
        }
 +
  +
 +
  +
 +
    }</pre>
 +
 +
== #3 ==
 +
 +
=== Status ===
 +
Not yet viewed<pre>
 +
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 map
 +
 +
for you to fetch changes up to dd095993096b96f042dcaa1103b7eb5aeeffb3be:
 +
 +
  Added "this is you" marker (2015-11-19 09:56:26 +0100)
 +
 +
----------------------------------------------------------------
 +
Julie Hill Roa (3):
 +
      Added "this is you" marker
 +
      Added "this is you" marker
 +
      Added "this is you" marker
 +
 +
src/components/map/map.ts | 88 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----
 +
1 file changed, 83 insertions(+), 5 deletions(-)</pre><pre>
 +
</pre>

Latest revision as of 11:10, 19 November 2015

#1

Status

MERGET

PR

 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 @@
 - <div style="width: 500px; height: 50px; background: #ff647c; ">Søkefelt! </div>
 \ 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({
     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="../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">

#2

Status

MERGET

PR

   The following changes since commit 2cae79a5fb719d73b248913fa7bf502dc47d8bfa:
 
     [search] Code cleanup (2015-11-14 15:33:39 +0100)
 
   are available in the git repository at:
 
     gitolite@git.uio.no:u/erikhf/frm.git search
 
   for you to fetch changes up to 42930dd2cd2a8d6ad50eea592ebe888c8db28371:
 
     [search] Styling the search input and results (2015-11-15 16:30:21 +0100)
 
   ----------------------------------------------------------------
   Erik Haider Forsén (3):
         [search] Make search result clickable
         [search] Moved styles to separate css file
         [search] Styling the search input and results
 
    src/components/search/search.css  | 52 +++++++++++++++++++++++++++++++++++++++
    src/components/search/search.html | 20 ++++++++-------
    src/components/search/search.ts   |  8 ++++--
    3 files changed, 69 insertions(+), 11 deletions(-)
    create mode 100644 src/components/search/search.css
 
   diff --git a/src/components/search/search.css b/src/components/search/search.css
   new file mode 100644
   index 0000000..2344396
   --- /dev/null
   +++ b/src/components/search/search.css
   @@ -0,0 +1,52 @@
   +.search div{
   +    position: relative;
   +}
   +
   +.search img{
   +    width: 20px;
   +    position: absolute;
   +}
   +
   +.search li{
   +    padding: 0.5em 0.5em 0.5em 0;
   +    float: none;
   +}
   +
   +.search ul {
   +    display: block;
   +    position: absolute;
   +    top: 100%;
   +    left: 0;
   +    z-index: 1000;
   +    float: left;
   +    min-width: 160px;
   +    padding: 5px 0;
   +    margin: 4px 0 0;
   +    font-size: 14px;
   +    text-align: left;
   +    list-style: none;
   +    background-color: #fff;
   +    -webkit-background-clip: padding-box;
   +    background-clip: padding-box;
   +    border: 1px solid #ccc;
   +    border: 1px solid rgba(0, 0, 0, .15);
   +    border-radius: 4px;
   +    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
   +    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
   +}
   +
   +.results > li > a{
   +    display: block;
   +    padding: 3px 20px;
   +    clear: both;
   +    font-weight: 400;
   +    line-height: 1.42857143;
   +    color: #333;
   +    white-space: nowrap
   +}
   +
   +.results > li > a:focus, .results > li > a:hover {
   +    color: #262626;
   +    text-decoration: none;
   +    background-color: #f5f5f5
   +}
   diff --git a/src/components/search/search.html b/src/components/search/search.html
   index 2d6495f..bae546b 100644
   --- a/src/components/search/search.html
   +++ b/src/components/search/search.html
   @@ -1,5 +1,4 @@
   -
   -    <section class="form-group">
   +<div class="search clearfix">
            <label class="sr-only" for="livesearch">Search</label>
            <input
                    mou-live-search
   @@ -7,13 +6,16 @@
                    (loading)="loading = $event"
                    type="text"
                    autofocus
   +                class="form-control"
                    id="livesearch">
   -        <img style="width: 20px; position: absolute;"
   -             [hidden]="!loading"
   +        <img [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 [hidden]="!orgunits.length">
   +            <ul class="results" >
   +                <li *ng-for="#orgunit of orgunits" (click)="getMoreInfo(orgunit)">
   +                    <a href="#">{{orgunit.name}}<br/><span>{{orgunit.lastUpdated}}</span></a>
   +                </li>
   +            </ul>
            </div>
   -    </section>
   +</div>
   diff --git a/src/components/search/search.ts b/src/components/search/search.ts
   index 951c866..d9d90ae 100644
   --- a/src/components/search/search.ts
   +++ b/src/components/search/search.ts
   @@ -4,14 +4,18 @@ import {LiveSearch} from "./livesearch";
    @Component({
        selector: 'mou-search',
        directives: [CORE_DIRECTIVES, LiveSearch],
   -    templateUrl: './components/search/search.html'
   +    templateUrl: './components/search/search.html',
   +    styleUrls: ['./components/search/search.css']
    })
    export class Search {
        orgunits: Array<any> = [];
        loading: boolean = false;
    
   -    constructor(){
   +    getMoreInfo(orgunit){
   +        console.log(orgunit.id);
        }
   +
   +
    }

#3

Status

Not yet viewed
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 map

for you to fetch changes up to dd095993096b96f042dcaa1103b7eb5aeeffb3be:

  Added "this is you" marker (2015-11-19 09:56:26 +0100)

----------------------------------------------------------------
Julie Hill Roa (3):
      Added "this is you" marker
      Added "this is you" marker
      Added "this is you" marker

 src/components/map/map.ts | 88 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 83 insertions(+), 5 deletions(-)








					

						Retrieved from "https://wiki.uio.no/mn/ifi/inf5750/index.php?title=FRM_PR&oldid=2869"