Added API and first UI
This commit is contained in:
@@ -0,0 +1,35 @@
|
||||
"use strict";
|
||||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
var __metadata = (this && this.__metadata) || function (k, v) {
|
||||
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
||||
};
|
||||
var core_1 = require('@angular/core');
|
||||
var router_1 = require('@angular/router');
|
||||
var dashboard_component_1 = require('./dashboard.component');
|
||||
var beer_list_component_1 = require('./beer-list.component');
|
||||
var beer_detail_component_1 = require('./beer-detail.component');
|
||||
var routes = [
|
||||
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
|
||||
{ path: 'dashboard', component: dashboard_component_1.DashboardComponent },
|
||||
{ path: 'detail/:id', component: beer_detail_component_1.BeerDetailComponent },
|
||||
{ path: 'beers', component: beer_list_component_1.BeerListComponent }
|
||||
];
|
||||
var AppRoutingModule = (function () {
|
||||
function AppRoutingModule() {
|
||||
}
|
||||
AppRoutingModule = __decorate([
|
||||
core_1.NgModule({
|
||||
imports: [router_1.RouterModule.forRoot(routes)],
|
||||
exports: [router_1.RouterModule]
|
||||
}),
|
||||
__metadata('design:paramtypes', [])
|
||||
], AppRoutingModule);
|
||||
return AppRoutingModule;
|
||||
}());
|
||||
exports.AppRoutingModule = AppRoutingModule;
|
||||
//# sourceMappingURL=app-routing.module.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"app-routing.module.js","sourceRoot":"","sources":["app-routing.module.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAAqC,eAAe,CAAC,CAAA;AACrD,uBAAqC,iBAAiB,CAAC,CAAA;AACvD,oCAAqC,uBAAuB,CAAC,CAAA;AAC7D,oCAAuC,uBAAuB,CAAC,CAAA;AAC/D,sCAAqC,yBAAyB,CAAC,CAAA;AAC/D,IAAM,MAAM,GAAW;IACrB,EAAE,IAAI,EAAE,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,EAAE;IACzD,EAAE,IAAI,EAAE,WAAW,EAAG,SAAS,EAAE,wCAAkB,EAAE;IACrD,EAAE,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,2CAAmB,EAAE;IACtD,EAAE,IAAI,EAAE,OAAO,EAAM,SAAS,EAAE,uCAAiB,EAAE;CACpD,CAAC;AAKF;IAAA;IAA+B,CAAC;IAJhC;QAAC,eAAQ,CAAC;YACR,OAAO,EAAE,CAAE,qBAAY,CAAC,OAAO,CAAC,MAAM,CAAC,CAAE;YACzC,OAAO,EAAE,CAAE,qBAAY,CAAE;SAC1B,CAAC;;wBAAA;IAC6B,uBAAC;AAAD,CAAC,AAAhC,IAAgC;AAAnB,wBAAgB,mBAAG,CAAA"}
|
||||
@@ -0,0 +1,16 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
import { DashboardComponent } from './dashboard.component';
|
||||
import { BeerListComponent } from './beer-list.component';
|
||||
import { BeerDetailComponent } from './beer-detail.component';
|
||||
const routes: Routes = [
|
||||
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
|
||||
{ path: 'dashboard', component: DashboardComponent },
|
||||
{ path: 'detail/:id', component: BeerDetailComponent },
|
||||
{ path: 'beers', component: BeerListComponent }
|
||||
];
|
||||
@NgModule({
|
||||
imports: [ RouterModule.forRoot(routes) ],
|
||||
exports: [ RouterModule ]
|
||||
})
|
||||
export class AppRoutingModule {}
|
||||
@@ -0,0 +1,28 @@
|
||||
h1 {
|
||||
font-size: 1.2em;
|
||||
color: #999;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2em;
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
nav a {
|
||||
padding: 5px 10px;
|
||||
text-decoration: none;
|
||||
margin-top: 10px;
|
||||
display: inline-block;
|
||||
background-color: #eee;
|
||||
border-radius: 4px;
|
||||
}
|
||||
nav a:visited, a:link {
|
||||
color: #607D8B;
|
||||
}
|
||||
nav a:hover {
|
||||
color: #039be5;
|
||||
background-color: #CFD8DC;
|
||||
}
|
||||
nav a.active {
|
||||
color: #039be5;
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
"use strict";
|
||||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
var __metadata = (this && this.__metadata) || function (k, v) {
|
||||
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
||||
};
|
||||
var core_1 = require('@angular/core');
|
||||
var AppComponent = (function () {
|
||||
function AppComponent() {
|
||||
this.title = 'Avans Beertracker';
|
||||
}
|
||||
AppComponent = __decorate([
|
||||
core_1.Component({
|
||||
moduleId: module.id,
|
||||
selector: 'my-app',
|
||||
template: "\n <h1>{{title}}</h1>\n <nav>\n <a routerLink=\"/dashboard\" routerLinkActive=\"active\">Dashboard</a>\n <a routerLink=\"/beers\" routerLinkActive=\"active\">Beers</a>\n </nav>\n <router-outlet></router-outlet>\n",
|
||||
styleUrls: ['./app.component.css']
|
||||
}),
|
||||
__metadata('design:paramtypes', [])
|
||||
], AppComponent);
|
||||
return AppComponent;
|
||||
}());
|
||||
exports.AppComponent = AppComponent;
|
||||
//# sourceMappingURL=app.component.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"app.component.js","sourceRoot":"","sources":["app.component.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAA0B,eAAe,CAAC,CAAA;AAc1C;IAAA;QACE,UAAK,GAAG,mBAAmB,CAAC;IAC9B,CAAC;IAfD;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,MAAM,CAAC,EAAE;YACnB,QAAQ,EAAE,QAAQ;YAClB,QAAQ,EAAE,gOAOX;YACC,SAAS,EAAE,CAAE,qBAAqB,CAAE;SACrC,CAAC;;oBAAA;IAGF,mBAAC;AAAD,CAAC,AAFD,IAEC;AAFY,oBAAY,eAExB,CAAA"}
|
||||
@@ -0,0 +1,27 @@
|
||||
"use strict";
|
||||
var app_component_1 = require('./app.component');
|
||||
var testing_1 = require('@angular/core/testing');
|
||||
var platform_browser_1 = require('@angular/platform-browser');
|
||||
describe('AppComponent', function () {
|
||||
var de;
|
||||
var comp;
|
||||
var fixture;
|
||||
beforeEach(testing_1.async(function () {
|
||||
testing_1.TestBed.configureTestingModule({
|
||||
declarations: [app_component_1.AppComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
beforeEach(function () {
|
||||
fixture = testing_1.TestBed.createComponent(app_component_1.AppComponent);
|
||||
comp = fixture.componentInstance;
|
||||
de = fixture.debugElement.query(platform_browser_1.By.css('h1'));
|
||||
});
|
||||
it('should create component', function () { return expect(comp).toBeDefined(); });
|
||||
it('should have expected <h1> text', function () {
|
||||
fixture.detectChanges();
|
||||
var h1 = de.nativeElement;
|
||||
expect(h1.innerText).toMatch(/angular/i, '<h1> should say something about "Angular"');
|
||||
});
|
||||
});
|
||||
//# sourceMappingURL=app.component.spec.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"app.component.spec.js","sourceRoot":"","sources":["app.component.spec.ts"],"names":[],"mappings":";AAAA,8BAA6B,iBAAiB,CAAC,CAAA;AAE/C,wBAAiD,uBAAuB,CAAC,CAAA;AACzE,iCAA6B,2BAA2B,CAAC,CAAA;AAGzD,QAAQ,CAAC,cAAc,EAAE;IACvB,IAAI,EAAgB,CAAC;IACrB,IAAI,IAAkB,CAAC;IACvB,IAAI,OAAuC,CAAC;IAE5C,UAAU,CAAC,eAAK,CAAC;QACf,iBAAO,CAAC,sBAAsB,CAAC;YAC7B,YAAY,EAAE,CAAE,4BAAY,CAAE;SAC/B,CAAC;aACD,iBAAiB,EAAE,CAAC;IACvB,CAAC,CAAC,CAAC,CAAC;IAEJ,UAAU,CAAC;QACT,OAAO,GAAG,iBAAO,CAAC,eAAe,CAAC,4BAAY,CAAC,CAAC;QAChD,IAAI,GAAG,OAAO,CAAC,iBAAiB,CAAC;QACjC,EAAE,GAAG,OAAO,CAAC,YAAY,CAAC,KAAK,CAAC,qBAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;IAChD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yBAAyB,EAAE,cAAM,OAAA,MAAM,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE,EAA1B,CAA0B,CAAE,CAAC;IAEjE,EAAE,CAAC,gCAAgC,EAAE;QACnC,OAAO,CAAC,aAAa,EAAE,CAAC;QACxB,IAAM,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC;QAC5B,MAAM,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,UAAU,EACrC,2CAA2C,CAAC,CAAC;IACjD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
||||
@@ -0,0 +1,17 @@
|
||||
import { Component } from '@angular/core';
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'my-app',
|
||||
template: `
|
||||
<h1>{{title}}</h1>
|
||||
<nav>
|
||||
<a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
|
||||
<a routerLink="/beers" routerLinkActive="active">Beers</a>
|
||||
</nav>
|
||||
<router-outlet></router-outlet>
|
||||
`,
|
||||
styleUrls: [ './app.component.css' ]
|
||||
})
|
||||
export class AppComponent {
|
||||
title = 'Avans Beertracker';
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
"use strict";
|
||||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
var __metadata = (this && this.__metadata) || function (k, v) {
|
||||
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
||||
};
|
||||
var core_1 = require('@angular/core');
|
||||
var platform_browser_1 = require('@angular/platform-browser');
|
||||
var forms_1 = require('@angular/forms');
|
||||
var http_1 = require('@angular/http');
|
||||
var app_routing_module_1 = require('./app-routing.module');
|
||||
var app_component_1 = require('./app.component');
|
||||
var dashboard_component_1 = require('./dashboard.component');
|
||||
var beer_list_component_1 = require('./beer-list.component');
|
||||
var beer_detail_component_1 = require('./beer-detail.component');
|
||||
var beer_service_1 = require('./beer.service');
|
||||
var AppModule = (function () {
|
||||
function AppModule() {
|
||||
}
|
||||
AppModule = __decorate([
|
||||
core_1.NgModule({
|
||||
imports: [
|
||||
platform_browser_1.BrowserModule,
|
||||
forms_1.FormsModule,
|
||||
http_1.HttpModule,
|
||||
app_routing_module_1.AppRoutingModule
|
||||
],
|
||||
declarations: [
|
||||
app_component_1.AppComponent,
|
||||
dashboard_component_1.DashboardComponent,
|
||||
beer_detail_component_1.BeerDetailComponent,
|
||||
beer_list_component_1.BeerListComponent,
|
||||
],
|
||||
providers: [beer_service_1.BeerService],
|
||||
bootstrap: [app_component_1.AppComponent]
|
||||
}),
|
||||
__metadata('design:paramtypes', [])
|
||||
], AppModule);
|
||||
return AppModule;
|
||||
}());
|
||||
exports.AppModule = AppModule;
|
||||
//# sourceMappingURL=app.module.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"app.module.js","sourceRoot":"","sources":["app.module.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAA8B,eAAe,CAAC,CAAA;AAC9C,iCAA8B,2BAA2B,CAAC,CAAA;AAC1D,sBAA8B,gBAAgB,CAAC,CAAA;AAC/C,qBAA8B,eAAe,CAAC,CAAA;AAE9C,mCAAiC,sBAAsB,CAAC,CAAA;AAExD,8BAAqC,iBAAiB,CAAC,CAAA;AACvD,oCAAqC,uBAAuB,CAAC,CAAA;AAC7D,oCAAuC,uBAAuB,CAAC,CAAA;AAC/D,sCAAqC,yBAAyB,CAAC,CAAA;AAC/D,6BAAqC,gBAAgB,CAAC,CAAA;AAiBtD;IAAA;IAAyB,CAAC;IAhB1B;QAAC,eAAQ,CAAC;YACR,OAAO,EAAE;gBACP,gCAAa;gBACb,mBAAW;gBACX,iBAAU;gBACV,qCAAgB;aACjB;YACD,YAAY,EAAE;gBACZ,4BAAY;gBACZ,wCAAkB;gBAClB,2CAAmB;gBACnB,uCAAiB;aAClB;YACD,SAAS,EAAE,CAAE,0BAAW,CAAE;YAC1B,SAAS,EAAE,CAAE,4BAAY,CAAE;SAC5B,CAAC;;iBAAA;IACuB,gBAAC;AAAD,CAAC,AAA1B,IAA0B;AAAb,iBAAS,YAAI,CAAA"}
|
||||
@@ -0,0 +1,29 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { HttpModule } from '@angular/http';
|
||||
|
||||
import { AppRoutingModule } from './app-routing.module';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
import { DashboardComponent } from './dashboard.component';
|
||||
import { BeerListComponent } from './beer-list.component';
|
||||
import { BeerDetailComponent } from './beer-detail.component';
|
||||
import { BeerService } from './beer.service';
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
FormsModule,
|
||||
HttpModule,
|
||||
AppRoutingModule
|
||||
],
|
||||
declarations: [
|
||||
AppComponent,
|
||||
DashboardComponent,
|
||||
BeerDetailComponent,
|
||||
BeerListComponent,
|
||||
],
|
||||
providers: [ BeerService ],
|
||||
bootstrap: [ AppComponent ]
|
||||
})
|
||||
export class AppModule { }
|
||||
@@ -0,0 +1,29 @@
|
||||
label {
|
||||
display: inline-block;
|
||||
width: 3em;
|
||||
margin: .5em 0;
|
||||
color: #607D8B;
|
||||
font-weight: bold;
|
||||
}
|
||||
input {
|
||||
height: 2em;
|
||||
font-size: 1em;
|
||||
padding-left: .4em;
|
||||
}
|
||||
button {
|
||||
margin-top: 20px;
|
||||
font-family: Arial;
|
||||
background-color: #eee;
|
||||
border: none;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer; cursor: hand;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #cfd8dc;
|
||||
}
|
||||
button:disabled {
|
||||
background-color: #eee;
|
||||
color: #ccc;
|
||||
cursor: auto;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
<div *ngIf="beer">
|
||||
<h2>{{beer.name}} details!</h2>
|
||||
<div>
|
||||
<label>ID: </label>{{beer.id}}</div>
|
||||
<div>
|
||||
<label>Name: </label>
|
||||
<input [(ngModel)]="beer.name" placeholder="name" />
|
||||
</div>
|
||||
<div>
|
||||
<label>Description:</label>
|
||||
<p>{{beer.description}}</p>
|
||||
</div>
|
||||
<button (click)="goBack()">Back</button>
|
||||
</div>
|
||||
@@ -0,0 +1,44 @@
|
||||
"use strict";
|
||||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
var __metadata = (this && this.__metadata) || function (k, v) {
|
||||
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
||||
};
|
||||
// Keep the Input import for now, we'll remove it later:
|
||||
var core_1 = require('@angular/core');
|
||||
var router_1 = require('@angular/router');
|
||||
var common_1 = require('@angular/common');
|
||||
var beer_service_1 = require('./beer.service');
|
||||
require('rxjs/add/operator/switchMap');
|
||||
var BeerDetailComponent = (function () {
|
||||
function BeerDetailComponent(beerService, route, location) {
|
||||
this.beerService = beerService;
|
||||
this.route = route;
|
||||
this.location = location;
|
||||
}
|
||||
BeerDetailComponent.prototype.ngOnInit = function () {
|
||||
var _this = this;
|
||||
this.route.params
|
||||
.switchMap(function (params) { return _this.beerService.get(params['id']); })
|
||||
.subscribe(function (beer) { return _this.beer = beer; });
|
||||
};
|
||||
BeerDetailComponent.prototype.goBack = function () {
|
||||
this.location.back();
|
||||
};
|
||||
BeerDetailComponent = __decorate([
|
||||
core_1.Component({
|
||||
moduleId: module.id,
|
||||
selector: 'my-beer-detail',
|
||||
templateUrl: './beer-detail.component.html',
|
||||
styleUrls: ['./beer-detail.component.css']
|
||||
}),
|
||||
__metadata('design:paramtypes', [beer_service_1.BeerService, router_1.ActivatedRoute, common_1.Location])
|
||||
], BeerDetailComponent);
|
||||
return BeerDetailComponent;
|
||||
}());
|
||||
exports.BeerDetailComponent = BeerDetailComponent;
|
||||
//# sourceMappingURL=beer-detail.component.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"beer-detail.component.js","sourceRoot":"","sources":["beer-detail.component.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,wDAAwD;AACxD,qBAAkC,eAAe,CAAC,CAAA;AAClD,uBAAyC,iBAAiB,CAAC,CAAA;AAC3D,uBAAyC,iBAAiB,CAAC,CAAA;AAE3D,6BAA4B,gBAAgB,CAAC,CAAA;AAG7C,QAAO,6BAA6B,CAAC,CAAA;AASrC;IAEE,6BACU,WAAwB,EACxB,KAAqB,EACrB,QAAkB;QAFlB,gBAAW,GAAX,WAAW,CAAa;QACxB,UAAK,GAAL,KAAK,CAAgB;QACrB,aAAQ,GAAR,QAAQ,CAAU;IACzB,CAAC;IAIJ,sCAAQ,GAAR;QAAA,iBAIC;QAHC,IAAI,CAAC,KAAK,CAAC,MAAM;aACd,SAAS,CAAC,UAAC,MAAc,IAAK,OAAA,KAAI,CAAC,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAlC,CAAkC,CAAC;aACjE,SAAS,CAAC,UAAA,IAAI,IAAI,OAAA,KAAI,CAAC,IAAI,GAAG,IAAI,EAAhB,CAAgB,CAAC,CAAC;IACzC,CAAC;IAED,oCAAM,GAAN;QACE,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;IACvB,CAAC;IAzBH;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,MAAM,CAAC,EAAE;YACnB,QAAQ,EAAE,gBAAgB;YAC1B,WAAW,EAAE,8BAA8B;YAC3C,SAAS,EAAE,CAAE,6BAA6B,CAAE;SAC7C,CAAC;;2BAAA;IAqBF,0BAAC;AAAD,CAAC,AAnBD,IAmBC;AAnBY,2BAAmB,sBAmB/B,CAAA"}
|
||||
@@ -0,0 +1,37 @@
|
||||
// Keep the Input import for now, we'll remove it later:
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute, Params } from '@angular/router';
|
||||
import { Location } from '@angular/common';
|
||||
|
||||
import { BeerService } from './beer.service';
|
||||
import { Beer } from './beer';
|
||||
|
||||
import 'rxjs/add/operator/switchMap';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'my-beer-detail',
|
||||
templateUrl: './beer-detail.component.html',
|
||||
styleUrls: [ './beer-detail.component.css' ]
|
||||
})
|
||||
|
||||
export class BeerDetailComponent implements OnInit {
|
||||
|
||||
constructor(
|
||||
private beerService: BeerService,
|
||||
private route: ActivatedRoute,
|
||||
private location: Location
|
||||
) {}
|
||||
|
||||
beer: Beer;
|
||||
|
||||
ngOnInit(): void {
|
||||
this.route.params
|
||||
.switchMap((params: Params) => this.beerService.get(params['id']))
|
||||
.subscribe(beer => this.beer = beer);
|
||||
}
|
||||
|
||||
goBack(): void {
|
||||
this.location.back();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
.selected {
|
||||
background-color: #CFD8DC !important;
|
||||
color: white;
|
||||
}
|
||||
.heroes {
|
||||
margin: 0 0 2em 0;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
width: 15em;
|
||||
}
|
||||
.heroes li {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
left: 0;
|
||||
background-color: #EEE;
|
||||
margin: .5em;
|
||||
padding: .3em 0;
|
||||
height: 1.6em;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.heroes li.selected:hover {
|
||||
background-color: #BBD8DC !important;
|
||||
color: white;
|
||||
}
|
||||
.heroes li:hover {
|
||||
color: #607D8B;
|
||||
background-color: #DDD;
|
||||
left: .1em;
|
||||
}
|
||||
.heroes .text {
|
||||
position: relative;
|
||||
top: -3px;
|
||||
}
|
||||
.heroes .badge {
|
||||
display: inline-block;
|
||||
font-size: small;
|
||||
color: white;
|
||||
padding: 0.8em 0.7em 0 0.7em;
|
||||
background-color: #607D8B;
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
left: -1px;
|
||||
top: -4px;
|
||||
height: 1.8em;
|
||||
margin-right: .8em;
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-offset-3 col-md-6">
|
||||
|
||||
<h2>My Beers</h2>
|
||||
<ul class="heroes">
|
||||
<li *ngFor="let beer of beers" (click)="onSelect(beer)" [class.selected]="beer === selectedBeer">
|
||||
<span class="badge"> </span> {{beer.name}}
|
||||
</li>
|
||||
</ul>
|
||||
<div *ngIf="selectedBeer">
|
||||
<h2>
|
||||
{{selectedBeer.name | uppercase}} is my favorite beer!
|
||||
</h2>
|
||||
<button (click)="gotoDetail()">View Details</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,46 @@
|
||||
"use strict";
|
||||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
var __metadata = (this && this.__metadata) || function (k, v) {
|
||||
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
||||
};
|
||||
var core_1 = require('@angular/core');
|
||||
var beer_service_1 = require('./beer.service');
|
||||
var router_1 = require('@angular/router');
|
||||
var BeerListComponent = (function () {
|
||||
function BeerListComponent(router, beerService) {
|
||||
this.router = router;
|
||||
this.beerService = beerService;
|
||||
}
|
||||
BeerListComponent.prototype.getBeers = function () {
|
||||
var _this = this;
|
||||
this.beerService
|
||||
.getAll()
|
||||
.subscribe(function (b) { return _this.beers = b; });
|
||||
};
|
||||
BeerListComponent.prototype.ngOnInit = function () {
|
||||
this.getBeers();
|
||||
};
|
||||
BeerListComponent.prototype.onSelect = function (beer) {
|
||||
this.selectedBeer = beer;
|
||||
};
|
||||
BeerListComponent.prototype.gotoDetail = function () {
|
||||
this.router.navigate(['/detail', this.selectedBeer.id]);
|
||||
};
|
||||
BeerListComponent = __decorate([
|
||||
core_1.Component({
|
||||
moduleId: module.id,
|
||||
selector: 'my-beer-list',
|
||||
templateUrl: './beer-list.component.html',
|
||||
styleUrls: ['./beer-list.component.css']
|
||||
}),
|
||||
__metadata('design:paramtypes', [router_1.Router, beer_service_1.BeerService])
|
||||
], BeerListComponent);
|
||||
return BeerListComponent;
|
||||
}());
|
||||
exports.BeerListComponent = BeerListComponent;
|
||||
//# sourceMappingURL=beer-list.component.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"beer-list.component.js","sourceRoot":"","sources":["beer-list.component.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAA0B,eAAe,CAAC,CAAA;AAE1C,6BAA4B,gBAAgB,CAAC,CAAA;AAG7C,uBAAuB,iBAEvB,CAAC,CAFuC;AASxC;IAIE,2BACU,MAAc,EACd,WAAwB;QADxB,WAAM,GAAN,MAAM,CAAQ;QACd,gBAAW,GAAX,WAAW,CAAa;IAAI,CAAC;IAEvC,oCAAQ,GAAR;QAAA,iBAIC;QAHC,IAAI,CAAC,WAAW;aACb,MAAM,EAAE;aACR,SAAS,CAAC,UAAA,CAAC,IAAI,OAAA,KAAI,CAAC,KAAK,GAAG,CAAC,EAAd,CAAc,CAAC,CAAC;IACpC,CAAC;IAED,oCAAQ,GAAR;QACE,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAED,oCAAQ,GAAR,UAAS,IAAU;QACjB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;IAC3B,CAAC;IAED,sCAAU,GAAV;QACE,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,CAAC;IAC1D,CAAC;IA/BH;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,MAAM,CAAC,EAAE;YACnB,QAAQ,EAAE,cAAc;YACxB,WAAW,EAAE,4BAA4B;YACzC,SAAS,EAAE,CAAE,2BAA2B,CAAE;SAC3C,CAAC;;yBAAA;IA2BF,wBAAC;AAAD,CAAC,AAzBD,IAyBC;AAzBY,yBAAiB,oBAyB7B,CAAA"}
|
||||
@@ -0,0 +1,40 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { Beer } from './beer';
|
||||
import { BeerService } from './beer.service';
|
||||
import { OnInit } from '@angular/core';
|
||||
|
||||
import { Router } from '@angular/router'
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'my-beer-list',
|
||||
templateUrl: './beer-list.component.html',
|
||||
styleUrls: [ './beer-list.component.css' ]
|
||||
})
|
||||
|
||||
export class BeerListComponent implements OnInit {
|
||||
beers: Beer[];
|
||||
selectedBeer: Beer;
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
private beerService: BeerService) { }
|
||||
|
||||
getBeers(): void {
|
||||
this.beerService
|
||||
.getAll()
|
||||
.subscribe(b => this.beers = b);
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.getBeers();
|
||||
}
|
||||
|
||||
onSelect(beer: Beer): void {
|
||||
this.selectedBeer = beer;
|
||||
}
|
||||
|
||||
gotoDetail(): void {
|
||||
this.router.navigate(['/detail', this.selectedBeer.id]);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
"use strict";
|
||||
var Beer = (function () {
|
||||
function Beer() {
|
||||
}
|
||||
return Beer;
|
||||
}());
|
||||
exports.Beer = Beer;
|
||||
//# sourceMappingURL=beer.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"beer.js","sourceRoot":"","sources":["beer.ts"],"names":[],"mappings":";AAAA;IAAA;IAIA,CAAC;IAAD,WAAC;AAAD,CAAC,AAJD,IAIC;AAJY,YAAI,OAIhB,CAAA"}
|
||||
@@ -0,0 +1,65 @@
|
||||
"use strict";
|
||||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
var __metadata = (this && this.__metadata) || function (k, v) {
|
||||
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
||||
};
|
||||
var core_1 = require('@angular/core');
|
||||
var http_1 = require('@angular/http');
|
||||
require('rxjs/add/operator/map');
|
||||
var BeerService = (function () {
|
||||
function BeerService(http) {
|
||||
this.http = http;
|
||||
this.baseUrl = 'http://api.brewerydb.com/v2';
|
||||
this.keyUrl = '?key=5d7547f6f876fced03cb9166dff0e578';
|
||||
}
|
||||
BeerService.prototype.get = function (id) {
|
||||
var beer$ = this.http
|
||||
.get(dbUrl(this.baseUrl + "/beer/" + id + this.keyUrl), { headers: this.getHeaders() })
|
||||
.map(mapBeer);
|
||||
return beer$;
|
||||
};
|
||||
BeerService.prototype.getAll = function () {
|
||||
var beers$ = this.http
|
||||
.get(dbUrl(this.baseUrl + "/beers" + this.keyUrl + "&styleId=1"), { headers: this.getHeaders() })
|
||||
.map(mapBeers);
|
||||
return beers$;
|
||||
};
|
||||
BeerService.prototype.getHeaders = function () {
|
||||
var headers = new http_1.Headers();
|
||||
headers.append('Accept', 'application/json');
|
||||
return headers;
|
||||
};
|
||||
BeerService = __decorate([
|
||||
core_1.Injectable(),
|
||||
__metadata('design:paramtypes', [http_1.Http])
|
||||
], BeerService);
|
||||
return BeerService;
|
||||
}());
|
||||
exports.BeerService = BeerService;
|
||||
function mapBeers(response) {
|
||||
// The response of the API has a results
|
||||
// property with the actual results
|
||||
return response.json().data.map(toBeer);
|
||||
}
|
||||
function mapBeer(response) {
|
||||
// toPerson looks just like in the previous example
|
||||
return toBeer(response.json().data);
|
||||
}
|
||||
function toBeer(r) {
|
||||
var beer = ({
|
||||
id: r.id,
|
||||
name: r.name,
|
||||
description: (r.description || "No description")
|
||||
});
|
||||
console.log('Parsed beer:', beer);
|
||||
return beer;
|
||||
}
|
||||
function dbUrl(url) {
|
||||
return 'http://kvewijk.nl/dbprox/?path=' + encodeURIComponent(url);
|
||||
}
|
||||
//# sourceMappingURL=beer.service.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"beer.service.js","sourceRoot":"","sources":["beer.service.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAA2B,eAAe,CAAC,CAAA;AAE3C,qBAAwC,eAAe,CAAC,CAAA;AAExD,QAAO,uBAEP,CAAC,CAF6B;AAM9B;IAIE,qBAAoB,IAAW;QAAX,SAAI,GAAJ,IAAI,CAAO;QAHvB,YAAO,GAAW,6BAA6B,CAAC;QAChD,WAAM,GAAW,uCAAuC,CAAC;IAEhC,CAAC;IAElC,yBAAG,GAAH,UAAI,EAAU;QACZ,IAAI,KAAK,GAAG,IAAI,CAAC,IAAI;aAClB,GAAG,CACA,KAAK,CAAI,IAAI,CAAC,OAAO,cAAS,EAAE,GAAG,IAAI,CAAC,MAAQ,CAAC,EAC7C,EAAC,OAAO,EAAE,IAAI,CAAC,UAAU,EAAE,EAAC,CAAC;aACpC,GAAG,CAAC,OAAO,CAAC,CAAC;QAChB,MAAM,CAAC,KAAK,CAAC;IACf,CAAC;IAED,4BAAM,GAAN;QACE,IAAI,MAAM,GAAG,IAAI,CAAC,IAAI;aACnB,GAAG,CACA,KAAK,CAAI,IAAI,CAAC,OAAO,cAAS,IAAI,CAAC,MAAM,eAAY,CAAC,EAClD,EAAC,OAAO,EAAE,IAAI,CAAC,UAAU,EAAE,EAAC,CAAC;aACpC,GAAG,CAAC,QAAQ,CAAC,CAAC;QACjB,MAAM,CAAC,MAAM,CAAC;IAChB,CAAC;IAEO,gCAAU,GAAlB;QACE,IAAI,OAAO,GAAG,IAAI,cAAO,EAAE,CAAC;QAC5B,OAAO,CAAC,MAAM,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC;QAC7C,MAAM,CAAC,OAAO,CAAC;IACjB,CAAC;IA7BH;QAAC,iBAAU,EAAE;;mBAAA;IA8Bb,kBAAC;AAAD,CAAC,AA7BD,IA6BC;AA7BY,mBAAW,cA6BvB,CAAA;AAED,kBAAkB,QAAiB;IACjC,wCAAwC;IACxC,mCAAmC;IACnC,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;AACzC,CAAC;AAED,iBAAiB,QAAiB;IAChC,mDAAmD;IACnD,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,CAAC;AACtC,CAAC;AAED,gBAAgB,CAAK;IACnB,IAAI,IAAI,GAAS,CAAC;QAChB,EAAE,EAAE,CAAC,CAAC,EAAE;QACR,IAAI,EAAE,CAAC,CAAC,IAAI;QACZ,WAAW,EAAE,CAAC,CAAC,CAAC,WAAW,IAAI,gBAAgB,CAAC;KACjD,CAAC,CAAC;IACH,OAAO,CAAC,GAAG,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;IAClC,MAAM,CAAC,IAAI,CAAC;AACd,CAAC;AAED,eAAe,GAAU;IAEvB,MAAM,CAAC,iCAAiC,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;AACrE,CAAC"}
|
||||
@@ -0,0 +1,66 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
import { Http, Response, Headers } from '@angular/http';
|
||||
import { Observable } from 'rxjs/Rx';
|
||||
import 'rxjs/add/operator/map'
|
||||
|
||||
import { Beer } from './beer';
|
||||
|
||||
|
||||
@Injectable()
|
||||
export class BeerService {
|
||||
private baseUrl: string = 'http://api.brewerydb.com/v2';
|
||||
private keyUrl: string = '?key=5d7547f6f876fced03cb9166dff0e578';
|
||||
|
||||
constructor(private http : Http){}
|
||||
|
||||
get(id: string): Observable<Beer> {
|
||||
let beer$ = this.http
|
||||
.get(
|
||||
dbUrl(`${this.baseUrl}/beer/${id}${this.keyUrl}`)
|
||||
, {headers: this.getHeaders()})
|
||||
.map(mapBeer);
|
||||
return beer$;
|
||||
}
|
||||
|
||||
getAll(): Observable<Beer[]>{
|
||||
let beers$ = this.http
|
||||
.get(
|
||||
dbUrl(`${this.baseUrl}/beers${this.keyUrl}&styleId=1`)
|
||||
, {headers: this.getHeaders()})
|
||||
.map(mapBeers);
|
||||
return beers$;
|
||||
}
|
||||
|
||||
private getHeaders(){
|
||||
let headers = new Headers();
|
||||
headers.append('Accept', 'application/json');
|
||||
return headers;
|
||||
}
|
||||
}
|
||||
|
||||
function mapBeers(response:Response): Beer[]{
|
||||
// The response of the API has a results
|
||||
// property with the actual results
|
||||
return response.json().data.map(toBeer)
|
||||
}
|
||||
|
||||
function mapBeer(response:Response): Beer{
|
||||
// toPerson looks just like in the previous example
|
||||
return toBeer(response.json().data);
|
||||
}
|
||||
|
||||
function toBeer(r:any): Beer{
|
||||
let beer = <Beer>({
|
||||
id: r.id,
|
||||
name: r.name,
|
||||
description: (r.description || "No description")
|
||||
});
|
||||
console.log('Parsed beer:', beer);
|
||||
return beer;
|
||||
}
|
||||
|
||||
function dbUrl(url:string) : string
|
||||
{
|
||||
return 'http://kvewijk.nl/dbprox/?path=' + encodeURIComponent(url);
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
export class Beer {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
[class*='col-'] {
|
||||
float: left;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
[class*='col-']:last-of-type {
|
||||
padding-right: 0;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
*, *:after, *:before {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
h3 {
|
||||
text-align: center; margin-bottom: 0;
|
||||
}
|
||||
h4 {
|
||||
position: relative;
|
||||
}
|
||||
.grid {
|
||||
margin: 0;
|
||||
}
|
||||
.col-1-4 {
|
||||
width: 25%;
|
||||
}
|
||||
.module {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
color: #eee;
|
||||
max-height: 120px;
|
||||
min-width: 120px;
|
||||
background-color: #607D8B;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.module:hover {
|
||||
background-color: #EEE;
|
||||
cursor: pointer;
|
||||
color: #607d8b;
|
||||
}
|
||||
.grid-pad {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.grid-pad > [class*='col-']:last-of-type {
|
||||
padding-right: 20px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.module {
|
||||
font-size: 10px;
|
||||
max-height: 75px; }
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.grid {
|
||||
margin: 0;
|
||||
}
|
||||
.module {
|
||||
min-width: 60px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
<h3>Our favorite beers!</h3>
|
||||
<div class="grid grid-pad">
|
||||
<a *ngFor="let beer of beers" [routerLink]="['/detail', beer.id]" class="col-1-4">
|
||||
<div class="module hero">
|
||||
<h4>{{beer.name}}</h4>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
@@ -0,0 +1,36 @@
|
||||
"use strict";
|
||||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
var __metadata = (this && this.__metadata) || function (k, v) {
|
||||
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
||||
};
|
||||
var core_1 = require('@angular/core');
|
||||
var beer_service_1 = require('./beer.service');
|
||||
var DashboardComponent = (function () {
|
||||
function DashboardComponent(beerService) {
|
||||
this.beerService = beerService;
|
||||
this.beers = [];
|
||||
}
|
||||
DashboardComponent.prototype.ngOnInit = function () {
|
||||
var _this = this;
|
||||
this.beerService
|
||||
.getAll()
|
||||
.subscribe(function (beers) { return _this.beers = beers.slice(4, 8); });
|
||||
};
|
||||
DashboardComponent = __decorate([
|
||||
core_1.Component({
|
||||
moduleId: module.id,
|
||||
selector: 'my-dashboard',
|
||||
templateUrl: './dashboard.component.html',
|
||||
styleUrls: ['./dashboard.component.css']
|
||||
}),
|
||||
__metadata('design:paramtypes', [beer_service_1.BeerService])
|
||||
], DashboardComponent);
|
||||
return DashboardComponent;
|
||||
}());
|
||||
exports.DashboardComponent = DashboardComponent;
|
||||
//# sourceMappingURL=dashboard.component.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"dashboard.component.js","sourceRoot":"","sources":["dashboard.component.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAAkC,eAAe,CAAC,CAAA;AAGlD,6BAA4B,gBAAgB,CAAC,CAAA;AAS7C;IAIE,4BAAoB,WAAwB;QAAxB,gBAAW,GAAX,WAAW,CAAa;QAF5C,UAAK,GAAW,EAAE,CAAC;IAE6B,CAAC;IAEjD,qCAAQ,GAAR;QAAA,iBAIC;QAHC,IAAI,CAAC,WAAW;aACb,MAAM,EAAE;aACR,SAAS,CAAC,UAAA,KAAK,IAAI,OAAA,KAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAA9B,CAA8B,CAAC,CAAC;IACxD,CAAC;IAjBH;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,MAAM,CAAC,EAAE;YACnB,QAAQ,EAAE,cAAc;YACxB,WAAW,EAAE,4BAA4B;YACzC,SAAS,EAAE,CAAE,2BAA2B,CAAE;SAC3C,CAAC;;0BAAA;IAaF,yBAAC;AAAD,CAAC,AAXD,IAWC;AAXY,0BAAkB,qBAW9B,CAAA"}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
import { Beer } from './beer';
|
||||
import { BeerService } from './beer.service';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'my-dashboard',
|
||||
templateUrl: './dashboard.component.html',
|
||||
styleUrls: [ './dashboard.component.css' ]
|
||||
})
|
||||
|
||||
export class DashboardComponent implements OnInit {
|
||||
|
||||
beers: Beer[] = [];
|
||||
|
||||
constructor(private beerService: BeerService) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.beerService
|
||||
.getAll()
|
||||
.subscribe(beers => this.beers = beers.slice(4, 8));
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user