Skip to content

Commit c5a93fa

Browse files
author
vakrilov
committed
Updated async examples
1 parent 6028514 commit c5a93fa

File tree

5 files changed

+169
-42
lines changed

5 files changed

+169
-42
lines changed

‎ng-sample/app/app.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import {RendererTest} from './examples/renderer-test';
1818
import {TabViewTest} from './examples/tab-view/tab-view-test';
1919
import {Benchmark} from './performance/benchmark';
2020
import {ListTest} from './examples/list/list-test';
21-
import {ListTestAsync} from "./examples/list/list-test-async";
21+
import {ListTestAsync, ListTestFilterAsync} from "./examples/list/list-test-async";
2222
import {ImageTest} from "./examples/image/image-test";
2323
import {NavigationTest} from "./examples/navigation/navigation-test";
2424
import {ActionBarTest} from "./examples/action-bar/action-bar-test";
@@ -31,12 +31,13 @@ import {LoginTest} from "./examples/navigation/login-test";
3131
//nativeScriptBootstrap(TabViewTest);
3232
//nativeScriptBootstrap(Benchmark);
3333
//nativeScriptBootstrap(ListTest);
34-
//nativeScriptBootstrap(ListTestAsync);
34+
// nativeScriptBootstrap(ListTestAsync);
35+
nativeScriptBootstrap(ListTestFilterAsync);
3536
//nativeScriptBootstrap(ImageTest);
3637
//nativeScriptBootstrap(NavigationTest, [NS_ROUTER_PROVIDERS]);
3738
//nativeScriptBootstrap(ActionBarTest, [NS_ROUTER_PROVIDERS], { startPageActionBarHidden: false });
3839
//nativeScriptBootstrap(ActionBarTest, [NS_ROUTER_PROVIDERS]);
3940
//nativeScriptBootstrap(ModalTest);
4041
//nativeScriptBootstrap(PlatfromDirectivesTest);
4142
//nativeScriptBootstrap(RouterOutletTest, [NS_ROUTER_PROVIDERS]);
42-
nativeScriptBootstrap(LoginTest, [NS_ROUTER_PROVIDERS]);
43+
// nativeScriptBootstrap(LoginTest, [NS_ROUTER_PROVIDERS]);

‎ng-sample/app/examples/list/data.service.ts‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { Injectable } from '@angular/core';
2+
import { BehaviorSubject } from "rxjs/BehaviorSubject";
3+
4+
export class DataItem {
5+
constructor(public id: number, public name: string) { }
6+
}
7+
8+
@Injectable()
9+
export class DataService {
10+
private _intervalId;
11+
private _counter = 0;
12+
private _currentItems: Array<DataItem>;
13+
14+
public items$: BehaviorSubject<Array<DataItem>>;
15+
16+
constructor() {
17+
this._currentItems = [];
18+
for (var i = 0; i < 3; i++) {
19+
this.appendItem()
20+
}
21+
22+
this.items$ = new BehaviorSubject(this._currentItems);
23+
}
24+
25+
public startAsyncUpdates() {
26+
if (this._intervalId) {
27+
throw new Error("Updates are already started");
28+
}
29+
30+
this._intervalId = setInterval(() => {
31+
this.appendItem();
32+
this.publishUpdates();
33+
}, 200);
34+
35+
}
36+
37+
public stopAsyncUpdates() {
38+
if (!this._intervalId) {
39+
throw new Error("Updates are not started");
40+
}
41+
42+
clearInterval(this._intervalId);
43+
this._intervalId = undefined;
44+
}
45+
46+
private publishUpdates() {
47+
this.items$.next([...this._currentItems]);
48+
}
49+
50+
private appendItem() {
51+
this._currentItems.push(new DataItem(this._counter, "data item " + this._counter));
52+
this._counter++;
53+
}
54+
}

‎ng-sample/app/examples/list/list-test-async.css‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,16 @@
1-
.test {
1+
button {
2+
margin: 0 10;
3+
}
4+
5+
.odd {
26
background-color: cornflowerblue;
7+
}
8+
9+
.even {
10+
background-color: lightgreen;
11+
}
12+
13+
.list-title {
14+
font-size: 20;
15+
text-align: center;
316
}

‎ng-sample/app/examples/list/list-test-async.ts‎

Lines changed: 96 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,117 @@
11
import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
2-
import { Observable as RxObservable } from 'rxjs/Observable';
3-
4-
export class DataItem {
5-
constructor(public id: number, public name: string) { }
6-
}
2+
import * as Rx from 'rxjs/Observable';
3+
import { combineLatestStatic } from 'rxjs/operator/combineLatest';
4+
import { BehaviorSubject } from "rxjs/BehaviorSubject";
5+
import { DataItem, DataService } from "./data.service"
76

87
@Component({
98
selector: 'list-test-async',
109
styleUrls: ['examples/list/list-test-async.css'],
10+
providers: [DataService],
11+
changeDetection: ChangeDetectionStrategy.OnPush,
1112
template: `
12-
<GridLayout>
13-
<ListView [items]="myItems | async" (itemTap)="onItemTap($event)">
13+
<GridLayout rows="auto * auto" columns="* *">
14+
<Label text="ListView" class="list-title"></Label>
15+
<Label text="*ngFor" class="list-title" col="1"></Label>
16+
17+
<ListView row="1" [items]="service.items$ | async" (itemTap)="onItemTap($event)" margin="10">
1418
<template let-item="item" let-i="index" let-odd="odd" let-even="even">
1519
<StackLayout [class.odd]="odd" [class.even]="even">
16-
<Label class="test" [text]='"index: " + item.name'></Label>
20+
<Label [text]='"index: " + item.name'></Label>
1721
</StackLayout>
1822
</template>
1923
</ListView>
24+
25+
<StackLayout row="1" col="1" margin="10">
26+
<StackLayout *ngFor="let item of (service.items$ | async); let odd = odd; let even = even"
27+
[class.odd]="odd" [class.even]="even" marginBottom="1">
28+
<Label [text]='"index: " + item.name'></Label>
29+
</StackLayout>
30+
</StackLayout>
31+
32+
<button row="2" colSpan="2" (tap)="toggleAsyncUpdates()" [text]="isUpdating ? 'stop updates' : 'start updates'"></button>
2033
</GridLayout>
21-
`,
22-
changeDetection: ChangeDetectionStrategy.OnPush
34+
`
2335
})
2436
export class ListTestAsync {
25-
public myItems: RxObservable<Array<DataItem>>;
37+
public isUpdating: boolean = false;
38+
constructor(private service: DataService) {
39+
}
40+
41+
public onItemTap(args) {
42+
console.log("--> ItemTapped: " + args.index);
43+
}
2644

27-
constructor() {
28-
var items = [];
29-
for (var i = 0; i < 3; i++) {
30-
items.push(new DataItem(i, "data item " + i));
45+
public toggleAsyncUpdates() {
46+
if (this.isUpdating) {
47+
this.service.stopAsyncUpdates();
48+
} else {
49+
this.service.startAsyncUpdates();
3150
}
32-
33-
var subscr;
34-
this.myItems = RxObservable.create(subscriber => {
35-
subscr = subscriber;
36-
subscriber.next(items);
37-
return function () {
38-
console.log("Unsubscribe called!!!");
39-
}
40-
});
4151

42-
let counter = 2;
43-
let intervalId = setInterval(() => {
44-
counter++;
45-
console.log("Adding " + counter + "-th item");
46-
items.push(new DataItem(counter, "data item " + counter));
47-
subscr.next(items);
48-
}, 1000);
49-
50-
setTimeout(() => {
51-
clearInterval(intervalId);
52-
}, 15000);
52+
this.isUpdating = !this.isUpdating;
53+
}
54+
}
55+
56+
@Component({
57+
selector: 'list-test-async-filter',
58+
styleUrls: ['examples/list/list-test-async.css'],
59+
providers: [DataService],
60+
// changeDetection: ChangeDetectionStrategy.OnPush,
61+
template: `
62+
<GridLayout rows="auto * auto" columns="* *">
63+
<Label text="ListView" class="list-title"></Label>
64+
<Label text="*ngFor" class="list-title" col="1"></Label>
65+
66+
<ListView row="1" [items]="filteredItems$ | async" (itemTap)="onItemTap($event)" margin="10">
67+
<template let-item="item" let-i="index" let-odd="odd" let-even="even">
68+
<StackLayout [class.odd]="odd" [class.even]="even">
69+
<Label [text]='"index: " + item.name'></Label>
70+
</StackLayout>
71+
</template>
72+
</ListView>
73+
74+
<StackLayout row="1" col="1" margin="10">
75+
<StackLayout *ngFor="let item of (filteredItems$ | async); let odd = odd; let even = even"
76+
[class.odd]="odd" [class.even]="even" marginBottom="1">
77+
<Label [text]='"index: " + item.name'></Label>
78+
</StackLayout>
79+
</StackLayout>
80+
81+
<StackLayout row="2" colSpan="2" orientation="horizontal">
82+
<button (tap)="toggleAsyncUpdates()" [text]="isUpdating ? 'stop updates' : 'start updates'"></button>
83+
<button (tap)="toogleFilter()" [text]="(filter$ | async) ? 'show all' : 'show even'"></button>
84+
</StackLayout>
85+
</GridLayout>
86+
`
87+
})
88+
export class ListTestFilterAsync {
89+
public isUpdating: boolean = false;
90+
public filteredItems$: Rx.Observable<Array<DataItem>>;
91+
private filter$ = new BehaviorSubject(false);
92+
93+
constructor(private service: DataService) {
94+
// Create filteredItems$ by combining the service.items$ and filter$
95+
this.filteredItems$ = combineLatestStatic(this.service.items$, this.filter$, (data, filter) => {
96+
return filter ? data.filter(v => v.id % 2 === 0) : data;
97+
});
5398
}
5499

55100
public onItemTap(args) {
56-
console.log("------------------------ ItemTapped: " + args.index);
101+
console.log("--> ItemTapped: " + args.index);
57102
}
58-
}
103+
104+
public toggleAsyncUpdates() {
105+
if (this.isUpdating) {
106+
this.service.stopAsyncUpdates();
107+
} else {
108+
this.service.startAsyncUpdates();
109+
}
110+
111+
this.isUpdating = !this.isUpdating;
112+
}
113+
114+
public toogleFilter() {
115+
this.filter$.next(!this.filter$.value);
116+
}
117+
}

‎ng-sample/hooks/before-livesync/nativescript-angular-sync .js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
module.exports = require("nativescript-angular/hooks/before-livesync");
1+
module.exports = require("nativescript-angular/hooks/before-livesync");

0 commit comments

Comments
 (0)