Skip to content

Commit 92d8fc7

Browse files
committed
Updated deps; simplifid Foundation integration and switched to x-y grid
1 parent 072ab81 commit 92d8fc7

18 files changed

Lines changed: 2837 additions & 1963 deletions

.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,3 +40,6 @@ testem.log
4040
# System Files
4141
.DS_Store
4242
Thumbs.db
43+
44+
# NPM 5 package lock (we use yarn)
45+
package-lock.json

e2e/app.e2e-spec.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ describe('stream-angular-example App', () => {
77
page = new StreamNgDemoPage();
88
});
99

10-
it('should display message saying app works', () => {
10+
it('should display message saying "Stream Angular Demo"', () => {
1111
page.navigateTo();
12-
expect(page.getParagraphText()).toEqual('app works!');
12+
expect(page.getParagraphText()).toEqual('Stream Angular Demo');
1313
});
1414
});

package.json

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -12,45 +12,45 @@
1212
},
1313
"private": true,
1414
"dependencies": {
15-
"@angular/common": "4.3.6",
16-
"@angular/compiler": "4.3.6",
17-
"@angular/core": "4.3.6",
18-
"@angular/forms": "4.3.6",
19-
"@angular/http": "4.3.6",
20-
"@angular/platform-browser": "4.3.6",
21-
"@angular/platform-browser-dynamic": "4.3.6",
22-
"@angular/router": "4.3.6",
15+
"@angular/common": "5.1.2",
16+
"@angular/compiler": "5.1.2",
17+
"@angular/core": "5.1.2",
18+
"@angular/forms": "5.1.2",
19+
"@angular/http": "5.1.2",
20+
"@angular/platform-browser": "5.1.2",
21+
"@angular/platform-browser-dynamic": "5.1.2",
22+
"@angular/router": "5.1.2",
2323
"clipboard": "^1.7.1",
2424
"core-js": "^2.5.1",
2525
"font-awesome": "^4.7.0",
2626
"foundation-sites": "^6.4.1",
27-
"getstream": "^3.6.0",
27+
"getstream": "^3.10.0",
2828
"rxjs": "^5.4.3",
2929
"webfontloader": "^1.6.28",
30-
"zone.js": "^0.8.4"
30+
"zone.js": "^0.8.19"
3131
},
3232
"devDependencies": {
33-
"@angular/cli": "^1.3.2",
34-
"@angular/compiler-cli": "4.3.6",
35-
"@types/jasmine": "^2.5.38",
36-
"@types/node": "^6.0.88",
37-
"codelyzer": "^3.0.1",
33+
"@angular/cli": "1.6.3",
34+
"@angular/compiler-cli": "5.1.2",
35+
"@types/jasmine": "^2.8.3",
36+
"@types/node": "^8.5.2",
37+
"codelyzer": "^4.0.2",
3838
"jasmine": "^2.8.0",
3939
"jasmine-core": "^2.8.0",
40-
"jasmine-spec-reporter": "^3.3.0",
40+
"jasmine-spec-reporter": "^4.2.1",
4141
"jsrsasign": "^8.0.3",
42-
"karma": "^1.4.1",
42+
"karma": "^2.0.0",
4343
"karma-chrome-launcher": "^2.0.0",
4444
"karma-cli": "~1.0.1",
45-
"karma-coverage-istanbul-reporter": "^0.2.0",
45+
"karma-coverage-istanbul-reporter": "^1.3.3",
4646
"karma-jasmine": "^1.1.0",
4747
"karma-jasmine-html-reporter": "^0.2.2",
4848
"node-sass": "^4.5.3",
4949
"protractor": "^5.1.2",
5050
"rxjs": "^5.4.3",
51-
"ts-node": "^3.0.6",
51+
"ts-node": "^4.1.0",
5252
"tslint": "^5.7.0",
5353
"tsutils": "^2.8.2",
54-
"typescript": "^2.5.2"
54+
"typescript": "2.5.3"
5555
}
5656
}
Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1-
<div class="medium-12 columns">
2-
<app-stream-add-activity></app-stream-add-activity>
1+
<div class="grid-container">
2+
<div class="grid-x">
3+
<div class="medium-12 cell">
4+
<div class="callout text-center">
5+
<app-stream-add-activity></app-stream-add-activity>
6+
</div>
7+
</div>
38
</div>

src/app/app.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ declare let $: any;
1010
styleUrls: ['./app.component.scss']
1111
})
1212
export class AppComponent implements OnInit {
13+
title = 'app';
1314

1415
ngOnInit() {
15-
console.log('AppComponent initializing...');
1616
$(document).foundation();
1717

1818
WebFont.load({
Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
1-
<div class="row">
2-
<div class="medium-12 columns">
3-
<app-stream-fetch-feed></app-stream-fetch-feed>
1+
<div class="grid-container">
2+
<div class="grid-x">
3+
<div class="medium-12 cell">
4+
<div class="callout text-center">
5+
<app-stream-fetch-feed></app-stream-fetch-feed>
6+
</div>
7+
</div>
48
</div>
59
</div>
Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
<div class="row">
2-
<div class="medium-12 columns">
3-
<div class="callout text-center">
4-
<h1>Stream Angular Demo</h1>
5-
<p>This application demonstrates the Stream API via an Angular.js single page application.</p>
6-
<p><a href="https://getstream.io">https://getstream.io</a>
1+
<div class="grid-container">
2+
<div class="grid-x">
3+
<div class="medium-12 cell">
4+
<div class="callout text-center">
5+
<h1>Stream Angular Demo</h1>
6+
<p>This application demonstrates the Stream API via an Angular.js single page application.</p>
7+
<p><a href="https://getstream.io">https://getstream.io</a></p>
8+
</div>
79
</div>
810
</div>
911
</div>
Lines changed: 67 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,71 @@
1-
<div class="row">
2-
<div class="medium-12 columns">
3-
<h1>JWT Generator</h1>
4-
<p>Use this JWT Generator utility to quickly generate appropriate tokens for developing and testing against Stream feeds.</p>
5-
<p>When working with JWT tokens, note that the Stream API expects the following HTTP Headers:</p>
6-
<ul>
7-
<li><strong>Stream-Auth-Type:</strong> jwt</li>
8-
<li><strong>Authorization:</strong> << JWT Token>></li>
9-
</ul>
10-
<p>See also: Stream's <a href="https://getstream.io/docs_rest/#authentication" target="_blank">REST Authentication</a> documentation.</p>
11-
<h2>Generate a token</h2>
12-
<form (ngSubmit)="onSubmit()" novalidate>
13-
<div>
14-
<label for="apiSecret">API Secret (required):</label>
15-
<input id="apiSecret" name="apiSecret" type="text" [(ngModel)]="apiSecret">
1+
<div class="grid-container">
2+
<div class="grid-x">
3+
<div class="medium-12 cell">
4+
<div class="callout">
5+
<h1>JWT Generator</h1>
6+
<p>Use this JWT Generator utility to quickly generate appropriate tokens for developing and testing against Stream feeds.</p>
7+
<p>When working with JWT tokens, note that the Stream API expects the following HTTP Headers:</p>
8+
<ul>
9+
<li><strong>Stream-Auth-Type:</strong> jwt</li>
10+
<li><strong>Authorization:</strong> << JWT Token>></li>
11+
</ul>
12+
<p>See also: Stream's <a href="https://getstream.io/docs_rest/#authentication" target="_blank">REST Authentication</a> documentation.</p>
13+
<h2>Generate a token</h2>
14+
<form (ngSubmit)="onSubmit()" novalidate>
15+
<div>
16+
<label for="apiSecret">API Secret (required):</label>
17+
<input id="apiSecret" name="apiSecret" type="text" [(ngModel)]="apiSecret">
18+
</div>
19+
<div>
20+
<label for="resource">Resource:</label>
21+
<select id="resource" name="resource" [(ngModel)]="resource">
22+
<option value="activities">activities - Activities Endpoint</option>
23+
<option value="feed">feed - Feed endpoint</option>
24+
<option value="follower">follower - Following + Followers Endpoint</option>
25+
<option value="*">* - Allow access to any resource</option>
26+
</select>
27+
</div>
28+
<div>
29+
<label for="action">Action:</label>
30+
<select id="action" name="action" [(ngModel)]="action">
31+
<option value="read">read (GET, OPTIONS, HEAD)</option>
32+
<option value="write">write (POST, PUT, PATCH)</option>
33+
<option value="delete">delete (DELETE)</option>
34+
<option value="*">* (The JWT has permission to all HTTP verbs)</option>
35+
</select>
36+
</div>
37+
<div>
38+
<label for="feedId">Feed Id:</label>
39+
<input id="feedId" name="feedId" type="text" [(ngModel)]="feedId">
40+
</div>
41+
<div>
42+
<label for="feedId">User Id:</label>
43+
<input id="userId" name="userId" type="text" [(ngModel)]="userId">
44+
</div>
45+
<div>
46+
<button type="submit" class="button success" [disabled]="!apiSecret">Generate</button>
47+
</div>
48+
</form>
49+
<div class="callout jwt-generated">
50+
<p id="jsonWebToken">{{ jsonWebToken || "Your JWT will be generated here." }}</p>
51+
<button
52+
id="jwtClipboardCopyBtn"
53+
class="clipboard-copy-button has-tip"
54+
aria-label="Copy to clipboard"
55+
type="button"
56+
data-clipboard-target="#jsonWebToken"
57+
data-tooltip
58+
aria-haspopup="true"
59+
data-disable-hover="true"
60+
data-click-open="false"
61+
tabindex="1"
62+
title="Token copied to clipboard."
63+
data-position="left"
64+
data-alignment="bottom">
65+
<span aria-hidden="true"><i class="fa fa-clipboard" aria-hidden="true"></i></span>
66+
</button>
67+
</div>
1668
</div>
17-
<div>
18-
<label for="resource">Resource:</label>
19-
<select id="resource" name="resource" [(ngModel)]="resource">
20-
<option value="activities">activities - Activities Endpoint</option>
21-
<option value="feed">feed - Feed endpoint</option>
22-
<option value="follower">follower - Following + Followers Endpoint</option>
23-
<option value="*">* - Allow access to any resource</option>
24-
</select>
25-
</div>
26-
<div>
27-
<label for="action">Action:</label>
28-
<select id="action" name="action" [(ngModel)]="action">
29-
<option value="read">read (GET, OPTIONS, HEAD)</option>
30-
<option value="write">write (POST, PUT, PATCH)</option>
31-
<option value="delete">delete (DELETE)</option>
32-
<option value="*">* (The JWT has permission to all HTTP verbs)</option>
33-
</select>
34-
</div>
35-
<div>
36-
<label for="feedId">Feed Id:</label>
37-
<input id="feedId" name="feedId" type="text" [(ngModel)]="feedId">
38-
</div>
39-
<div>
40-
<label for="feedId">User Id:</label>
41-
<input id="userId" name="userId" type="text" [(ngModel)]="userId">
42-
</div>
43-
<div>
44-
<button type="submit" class="button success" [disabled]="!apiSecret">Generate</button>
45-
</div>
46-
</form>
47-
<div class="callout jwt-generated">
48-
<p id="jsonWebToken">{{ jsonWebToken || "Your JWT will be generated here." }}</p>
49-
<button
50-
id="jwtClipboardCopyBtn"
51-
class="clipboard-copy-button has-tip"
52-
aria-label="Copy to clipboard"
53-
type="button"
54-
data-clipboard-target="#jsonWebToken"
55-
data-tooltip
56-
aria-haspopup="true"
57-
data-disable-hover="true"
58-
data-click-open="false"
59-
tabindex="1"
60-
title="Token copied to clipboard."
61-
data-position="left"
62-
data-alignment="bottom">
63-
<span aria-hidden="true"><i class="fa fa-clipboard" aria-hidden="true"></i></span>
64-
</button>
6569
</div>
6670
</div>
6771
</div>
Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,13 @@
1-
<div class="row">
2-
<div class="medium-12 columns">
3-
<h2>Add Activity</h2>
4-
<div>
5-
<input type="text" placeholder="actor" [(ngModel)]="newActivity.actor">
6-
</div>
7-
<div>
8-
<input type="text" placeholder="verb" [(ngModel)]="newActivity.verb">
9-
</div>
10-
<div>
11-
<textarea [(ngModel)]="newActivity.object"></textarea>
12-
</div>
13-
<div>
14-
<button class="mktg-btn-links mktg-btn-lift" (click)="addActivity()">Add activity</button>
15-
</div>
16-
</div>
1+
<h2>Add Activity</h2>
2+
<div>
3+
<input type="text" placeholder="actor" [(ngModel)]="newActivity.actor">
4+
</div>
5+
<div>
6+
<input type="text" placeholder="verb" [(ngModel)]="newActivity.verb">
7+
</div>
8+
<div>
9+
<textarea [(ngModel)]="newActivity.object"></textarea>
10+
</div>
11+
<div>
12+
<button class="mktg-btn-links mktg-btn-lift" (click)="addActivity()">Add activity</button>
1713
</div>

src/app/stream-fetch-feed/stream-fetch-feed.component.html

Lines changed: 29 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,35 @@
1-
<div class="row">
2-
<div class="medium-12 columns">
3-
<h2>Fetch Feed</h2>
4-
<button class="mktg-btn-links mktg-btn-lift" (click)="getFeed()">
5-
<span *ngIf="!activities || activities.length == 0">Fetch the feed</span>
6-
<span *ngIf="activities && activities.length > 0">Re-fetch the feed</span>
7-
</button>
1+
<div class="grid-container">
2+
<div class="grid-x">
3+
<div class="medium-12 cell">
4+
<div class="callout text-center">
5+
<h2>Fetch Feed</h2>
6+
<button class="mktg-btn-links mktg-btn-lift" (click)="getFeed()">
7+
<span *ngIf="!activities || activities.length == 0">Fetch the feed</span>
8+
<span *ngIf="activities && activities.length > 0">Re-fetch the feed</span>
9+
</button>
10+
</div>
11+
</div>
812
</div>
913
</div>
10-
<div class="row">
11-
<div class="medium-12 columns">
12-
<h3>Activities</h3>
13-
<div class="row" *ngFor="let activity of activities">
14-
<div class="medium-12 columns">
15-
<div class="callout">
16-
<div><strong>{{ activity.id }}</strong></div>
17-
<div><em>{{activity.actor }}: {{ activity.verb }}</em></div>
18-
<p>{{activity.object }}</p>
14+
<div class="grid-container">
15+
<div class="grid-x">
16+
<div class="medium-12 cell">
17+
<div class="callout text-center">
18+
<h3>Activities</h3>
19+
<div class="row" *ngFor="let activity of activities">
20+
<div class="medium-12 cell">
21+
<div class="callout">
22+
<div><strong>{{ activity.id }}</strong></div>
23+
<div><em>{{activity.actor }}: {{ activity.verb }}</em></div>
24+
<p>{{activity.object }}</p>
25+
</div>
26+
</div>
27+
</div>
28+
<div class="row" *ngIf="!activities || activities.length == 0">
29+
<div class="medium-12 cell">
30+
<p>No activities fetched</p>
31+
</div>
1932
</div>
20-
</div>
21-
</div>
22-
<div class="row" *ngIf="!activities || activities.length == 0">
23-
<div class="medium-12 columns">
24-
<p>No activities fetched</p>
2533
</div>
2634
</div>
2735
</div>

0 commit comments

Comments
 (0)