Added search. Converted to bootstrap
This commit is contained in:
@@ -13,11 +13,14 @@ 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 beer_search_component_1 = require('./beer-search.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 }
|
||||
{ path: 'beers', component: beer_list_component_1.BeerListComponent },
|
||||
{ path: 'search', component: beer_search_component_1.BeerSearchComponent },
|
||||
{ path: 'search/:id', component: beer_search_component_1.BeerSearchComponent }
|
||||
];
|
||||
var AppRoutingModule = (function () {
|
||||
function AppRoutingModule() {
|
||||
|
||||
@@ -1 +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"}
|
||||
{"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,sCAAoC,yBAAyB,CAAC,CAAA;AAE9D,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;IACnD,EAAE,IAAI,EAAE,QAAQ,EAAM,SAAS,EAAE,2CAAmB,EAAE;IACtD,EAAE,IAAI,EAAE,YAAY,EAAM,SAAS,EAAE,2CAAmB,EAAE;CAC3D,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"}
|
||||
@@ -3,11 +3,15 @@ import { RouterModule, Routes } from '@angular/router';
|
||||
import { DashboardComponent } from './dashboard.component';
|
||||
import { BeerListComponent } from './beer-list.component';
|
||||
import { BeerDetailComponent } from './beer-detail.component';
|
||||
import { BeerSearchComponent } from './beer-search.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
|
||||
{ path: 'dashboard', component: DashboardComponent },
|
||||
{ path: 'detail/:id', component: BeerDetailComponent },
|
||||
{ path: 'beers', component: BeerListComponent }
|
||||
{ path: 'beers', component: BeerListComponent },
|
||||
{ path: 'search', component: BeerSearchComponent },
|
||||
{ path: 'search/:id', component: BeerSearchComponent }
|
||||
];
|
||||
@NgModule({
|
||||
imports: [ RouterModule.forRoot(routes) ],
|
||||
|
||||
@@ -1,28 +0,0 @@
|
||||
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,35 @@
|
||||
<div class="container">
|
||||
|
||||
<nav class="navbar navbar-default">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand">Beertracker</a>
|
||||
</div>
|
||||
<div id="navbar" class="navbar-collapse collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
<li routerLink="/dashboard" routerLinkActive="active"><a routerLink="/dashboard" routerLinkActive="active">Dashboard</a></li>
|
||||
<li routerLink="/beers" routerLinkActive="active"><a routerLink="/beers" routerLinkActive="active">Beers</a></li>
|
||||
<li routerLink="/search" routerLinkActive="active"><a routerLink="/search" routerLinkActive="active">Search</a></li>
|
||||
</ul>
|
||||
</div><!--/.nav-collapse -->
|
||||
</div><!--/.container-fluid -->
|
||||
</nav>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-12">
|
||||
<div class="page-header">
|
||||
<h1>{{title}} <small>Avans</small></h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<router-outlet></router-outlet>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
+2
-3
@@ -11,14 +11,13 @@ var __metadata = (this && this.__metadata) || function (k, v) {
|
||||
var core_1 = require('@angular/core');
|
||||
var AppComponent = (function () {
|
||||
function AppComponent() {
|
||||
this.title = 'Avans Beertracker';
|
||||
this.title = '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']
|
||||
templateUrl: './app.component.html'
|
||||
}),
|
||||
__metadata('design:paramtypes', [])
|
||||
], AppComponent);
|
||||
|
||||
@@ -1 +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"}
|
||||
{"version":3,"file":"app.component.js","sourceRoot":"","sources":["app.component.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAA0B,eAAe,CAAC,CAAA;AAM1C;IAAA;QACE,UAAK,GAAG,aAAa,CAAC;IACxB,CAAC;IAPD;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,MAAM,CAAC,EAAE;YACnB,QAAQ,EAAE,QAAQ;YAClB,WAAW,EAAE,sBAAsB;SACpC,CAAC;;oBAAA;IAGF,mBAAC;AAAD,CAAC,AAFD,IAEC;AAFY,oBAAY,eAExB,CAAA"}
|
||||
+2
-10
@@ -2,16 +2,8 @@ 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' ]
|
||||
templateUrl: './app.component.html'
|
||||
})
|
||||
export class AppComponent {
|
||||
title = 'Avans Beertracker';
|
||||
title = 'Beertracker';
|
||||
}
|
||||
|
||||
@@ -16,6 +16,7 @@ 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_search_component_1 = require('./beer-search.component');
|
||||
var beer_detail_component_1 = require('./beer-detail.component');
|
||||
var beer_service_1 = require('./beer.service');
|
||||
var AppModule = (function () {
|
||||
@@ -34,6 +35,7 @@ var AppModule = (function () {
|
||||
dashboard_component_1.DashboardComponent,
|
||||
beer_detail_component_1.BeerDetailComponent,
|
||||
beer_list_component_1.BeerListComponent,
|
||||
beer_search_component_1.BeerSearchComponent
|
||||
],
|
||||
providers: [beer_service_1.BeerService],
|
||||
bootstrap: [app_component_1.AppComponent]
|
||||
|
||||
+1
-1
@@ -1 +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"}
|
||||
{"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,sCAAyC,yBAAyB,CAAC,CAAA;AACnE,sCAAqC,yBAAyB,CAAC,CAAA;AAC/D,6BAAqC,gBAAgB,CAAC,CAAA;AAkBtD;IAAA;IAAyB,CAAC;IAjB1B;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;gBACjB,2CAAmB;aACpB;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"}
|
||||
@@ -8,6 +8,7 @@ import { AppRoutingModule } from './app-routing.module';
|
||||
import { AppComponent } from './app.component';
|
||||
import { DashboardComponent } from './dashboard.component';
|
||||
import { BeerListComponent } from './beer-list.component';
|
||||
import { BeerSearchComponent } from './beer-search.component';
|
||||
import { BeerDetailComponent } from './beer-detail.component';
|
||||
import { BeerService } from './beer.service';
|
||||
@NgModule({
|
||||
@@ -22,6 +23,7 @@ import { BeerService } from './beer.service';
|
||||
DashboardComponent,
|
||||
BeerDetailComponent,
|
||||
BeerListComponent,
|
||||
BeerSearchComponent
|
||||
],
|
||||
providers: [ BeerService ],
|
||||
bootstrap: [ AppComponent ]
|
||||
|
||||
@@ -1,29 +0,0 @@
|
||||
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;
|
||||
}
|
||||
@@ -1,14 +1,18 @@
|
||||
<div *ngIf="beer">
|
||||
<div *ngIf="beer" class="col-md-12">
|
||||
<h2>{{beer.name}} details!</h2>
|
||||
<div>
|
||||
<label>ID: </label>{{beer.id}}</div>
|
||||
<label>ID: </label>{{beer.id}}
|
||||
</div>
|
||||
<br>
|
||||
<div>
|
||||
<label>Name: </label>
|
||||
<input [(ngModel)]="beer.name" placeholder="name" />
|
||||
<input class="form-control" [(ngModel)]="beer.name" placeholder="name" />
|
||||
</div>
|
||||
<br>
|
||||
<div>
|
||||
<label>Description:</label>
|
||||
<p>{{beer.description}}</p>
|
||||
</div>
|
||||
<button (click)="goBack()">Back</button>
|
||||
<br>
|
||||
<button class="btn btn-primary" (click)="goBack()">Back</button>
|
||||
</div>
|
||||
|
||||
@@ -33,8 +33,7 @@ var BeerDetailComponent = (function () {
|
||||
core_1.Component({
|
||||
moduleId: module.id,
|
||||
selector: 'my-beer-detail',
|
||||
templateUrl: './beer-detail.component.html',
|
||||
styleUrls: ['./beer-detail.component.css']
|
||||
templateUrl: './beer-detail.component.html'
|
||||
}),
|
||||
__metadata('design:paramtypes', [beer_service_1.BeerService, router_1.ActivatedRoute, common_1.Location])
|
||||
], BeerDetailComponent);
|
||||
|
||||
@@ -1 +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"}
|
||||
{"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;AAQrC;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;IAxBH;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,MAAM,CAAC,EAAE;YACnB,QAAQ,EAAE,gBAAgB;YAC1B,WAAW,EAAE,8BAA8B;SAC5C,CAAC;;2BAAA;IAqBF,0BAAC;AAAD,CAAC,AAnBD,IAmBC;AAnBY,2BAAmB,sBAmB/B,CAAA"}
|
||||
@@ -11,8 +11,7 @@ import 'rxjs/add/operator/switchMap';
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'my-beer-detail',
|
||||
templateUrl: './beer-detail.component.html',
|
||||
styleUrls: [ './beer-detail.component.css' ]
|
||||
templateUrl: './beer-detail.component.html'
|
||||
})
|
||||
|
||||
export class BeerDetailComponent implements OnInit {
|
||||
|
||||
@@ -1,47 +0,0 @@
|
||||
.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: 0 0 .5em 0;
|
||||
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;
|
||||
}
|
||||
@@ -1,19 +1,19 @@
|
||||
<div class="container">
|
||||
<div class="col-md-12">
|
||||
<div class="row">
|
||||
<div class="col-md-offset-3 col-md-6">
|
||||
<div class="col-md-6">
|
||||
|
||||
<h2>My Beers</h2>
|
||||
<h2>Beers</h2>
|
||||
<ul class="heroes">
|
||||
<li *ngFor="let beer of beers" (click)="onSelect(beer)" [class.selected]="beer === selectedBeer">
|
||||
<span class="badge"> {{beer.id}} </span> {{beer.name}}
|
||||
</li>
|
||||
</ul>
|
||||
<div *ngIf="selectedBeer">
|
||||
</div>
|
||||
<div *ngIf="selectedBeer" class="col-md-4">
|
||||
<h2>
|
||||
{{selectedBeer.name | uppercase}} is my favorite beer!
|
||||
</h2>
|
||||
<button (click)="gotoDetail()">View Details</button>
|
||||
<button class="btn btn-primary" (click)="gotoDetail()">View Details</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -35,8 +35,7 @@ var BeerListComponent = (function () {
|
||||
core_1.Component({
|
||||
moduleId: module.id,
|
||||
selector: 'my-beer-list',
|
||||
templateUrl: './beer-list.component.html',
|
||||
styleUrls: ['./beer-list.component.css']
|
||||
templateUrl: './beer-list.component.html'
|
||||
}),
|
||||
__metadata('design:paramtypes', [router_1.Router, beer_service_1.BeerService])
|
||||
], BeerListComponent);
|
||||
|
||||
@@ -1 +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"}
|
||||
{"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;AAQxC;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;IA9BH;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,MAAM,CAAC,EAAE;YACnB,QAAQ,EAAE,cAAc;YACxB,WAAW,EAAE,4BAA4B;SAC1C,CAAC;;yBAAA;IA2BF,wBAAC;AAAD,CAAC,AAzBD,IAyBC;AAzBY,yBAAiB,oBAyB7B,CAAA"}
|
||||
@@ -8,8 +8,7 @@ import { Router } from '@angular/router'
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'my-beer-list',
|
||||
templateUrl: './beer-list.component.html',
|
||||
styleUrls: [ './beer-list.component.css' ]
|
||||
templateUrl: './beer-list.component.html'
|
||||
})
|
||||
|
||||
export class BeerListComponent implements OnInit {
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
<div class="col-md-12">
|
||||
|
||||
<div class="input-group">
|
||||
<input class="form-control" [(ngModel)]="search">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-primary" (click)="searchBeer()">Search</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
|
||||
<h2>Search</h2>
|
||||
<ul class="heroes">
|
||||
<li *ngFor="let beer of beers" (click)="onSelect(beer)" [class.selected]="beer === selectedBeer">
|
||||
<span class="badge"> {{beer.id}} </span> {{beer.name}}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div *ngIf="selectedBeer" class="col-md-4">
|
||||
<h2>
|
||||
{{selectedBeer.name | uppercase}} is my favorite beer!
|
||||
</h2>
|
||||
<button class="btn btn-primary" (click)="gotoDetail()">View Details</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,51 @@
|
||||
"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 router_2 = require('@angular/router');
|
||||
require('rxjs/add/operator/switchMap');
|
||||
var BeerSearchComponent = (function () {
|
||||
function BeerSearchComponent(router, beerService, route) {
|
||||
this.router = router;
|
||||
this.beerService = beerService;
|
||||
this.route = route;
|
||||
}
|
||||
BeerSearchComponent.prototype.getBeers = function () {
|
||||
var _this = this;
|
||||
this.route.params
|
||||
.switchMap(function (params) { return _this.beerService.search(params['id']); })
|
||||
.subscribe(function (b) { return _this.beers = b; });
|
||||
};
|
||||
BeerSearchComponent.prototype.ngOnInit = function () {
|
||||
this.getBeers();
|
||||
};
|
||||
BeerSearchComponent.prototype.onSelect = function (beer) {
|
||||
this.selectedBeer = beer;
|
||||
};
|
||||
BeerSearchComponent.prototype.gotoDetail = function () {
|
||||
this.router.navigate(['/detail', this.selectedBeer.id]);
|
||||
};
|
||||
BeerSearchComponent.prototype.searchBeer = function () {
|
||||
this.router.navigate(['/search', this.search]);
|
||||
};
|
||||
BeerSearchComponent = __decorate([
|
||||
core_1.Component({
|
||||
moduleId: module.id,
|
||||
selector: 'my-beer-search',
|
||||
templateUrl: './beer-search.component.html'
|
||||
}),
|
||||
__metadata('design:paramtypes', [router_2.Router, beer_service_1.BeerService, router_1.ActivatedRoute])
|
||||
], BeerSearchComponent);
|
||||
return BeerSearchComponent;
|
||||
}());
|
||||
exports.BeerSearchComponent = BeerSearchComponent;
|
||||
//# sourceMappingURL=beer-search.component.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"beer-search.component.js","sourceRoot":"","sources":["beer-search.component.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAA0B,eAAe,CAAC,CAAA;AAE1C,6BAA4B,gBAAgB,CAAC,CAAA;AAG7C,uBAAyC,iBAAiB,CAAC,CAAA;AAE3D,uBAAuB,iBAEvB,CAAC,CAFuC;AAExC,QAAO,6BAA6B,CAAC,CAAA;AAQrC;IAKE,6BACU,MAAc,EACd,WAAwB,EACxB,KAAqB;QAFrB,WAAM,GAAN,MAAM,CAAQ;QACd,gBAAW,GAAX,WAAW,CAAa;QACxB,UAAK,GAAL,KAAK,CAAgB;IAAI,CAAC;IAEpC,sCAAQ,GAAR;QAAA,iBAIC;QAHC,IAAI,CAAC,KAAK,CAAC,MAAM;aACd,SAAS,CAAC,UAAC,MAAc,IAAK,OAAA,KAAI,CAAC,WAAW,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAArC,CAAqC,CAAC;aACpE,SAAS,CAAC,UAAA,CAAC,IAAI,OAAA,KAAI,CAAC,KAAK,GAAG,CAAC,EAAd,CAAc,CAAC,CAAC;IACpC,CAAC;IAED,sCAAQ,GAAR;QACE,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAED,sCAAQ,GAAR,UAAS,IAAU;QACjB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;IAC3B,CAAC;IAED,wCAAU,GAAV;QACE,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,CAAC;IAC1D,CAAC;IAED,wCAAU,GAAV;QACE,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;IACjD,CAAC;IApCH;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,MAAM,CAAC,EAAE;YACnB,QAAQ,EAAE,gBAAgB;YAC1B,WAAW,EAAE,8BAA8B;SAC5C,CAAC;;2BAAA;IAiCF,0BAAC;AAAD,CAAC,AA/BD,IA+BC;AA/BY,2BAAmB,sBA+B/B,CAAA"}
|
||||
@@ -0,0 +1,49 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { Beer } from './beer';
|
||||
import { BeerService } from './beer.service';
|
||||
import { OnInit } from '@angular/core';
|
||||
|
||||
import { ActivatedRoute, Params } from '@angular/router';
|
||||
|
||||
import { Router } from '@angular/router'
|
||||
|
||||
import 'rxjs/add/operator/switchMap';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'my-beer-search',
|
||||
templateUrl: './beer-search.component.html'
|
||||
})
|
||||
|
||||
export class BeerSearchComponent implements OnInit {
|
||||
beers: Beer[];
|
||||
selectedBeer: Beer;
|
||||
search: string;
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
private beerService: BeerService,
|
||||
private route: ActivatedRoute) { }
|
||||
|
||||
getBeers(): void {
|
||||
this.route.params
|
||||
.switchMap((params: Params) => this.beerService.search(params['id']))
|
||||
.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]);
|
||||
}
|
||||
|
||||
searchBeer(): void {
|
||||
this.router.navigate(['/search', this.search]);
|
||||
}
|
||||
}
|
||||
@@ -29,6 +29,12 @@ var BeerService = (function () {
|
||||
.map(mapBeers);
|
||||
return beers$;
|
||||
};
|
||||
BeerService.prototype.search = function (name) {
|
||||
var beers$ = this.http
|
||||
.get(dbUrl(this.baseUrl + "/search" + this.keyUrl + "&type=beer&q=" + name), { headers: this.getHeaders() })
|
||||
.map(mapBeers);
|
||||
return beers$;
|
||||
};
|
||||
BeerService.prototype.getHeaders = function () {
|
||||
var headers = new http_1.Headers();
|
||||
headers.append('Accept', 'application/json');
|
||||
|
||||
+1
-1
@@ -1 +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"}
|
||||
{"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;IAED,4BAAM,GAAN,UAAO,IAAY;QACjB,IAAI,MAAM,GAAG,IAAI,CAAC,IAAI;aACnB,GAAG,CACF,KAAK,CAAI,IAAI,CAAC,OAAO,eAAU,IAAI,CAAC,MAAM,qBAAgB,IAAM,CAAC,EAC/D,EAAC,OAAO,EAAE,IAAI,CAAC,UAAU,EAAE,EAAC,CAAC;aAChC,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;IAtCH;QAAC,iBAAU,EAAE;;mBAAA;IAuCb,kBAAC;AAAD,CAAC,AAtCD,IAsCC;AAtCY,mBAAW,cAsCvB,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"}
|
||||
@@ -32,6 +32,15 @@ export class BeerService {
|
||||
return beers$;
|
||||
}
|
||||
|
||||
search(name: string): Observable<Beer[]> {
|
||||
let beers$ = this.http
|
||||
.get(
|
||||
dbUrl(`${this.baseUrl}/search${this.keyUrl}&type=beer&q=${name}`)
|
||||
, {headers: this.getHeaders()})
|
||||
.map(mapBeers);
|
||||
return beers$;
|
||||
}
|
||||
|
||||
private getHeaders(){
|
||||
let headers = new Headers();
|
||||
headers.append('Accept', 'application/json');
|
||||
|
||||
@@ -1,61 +0,0 @@
|
||||
[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;
|
||||
}
|
||||
}
|
||||
@@ -1,8 +1,14 @@
|
||||
<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 class="col-md-12">
|
||||
De onderstaande biertjes behoren tot {{beerType}}
|
||||
</div>
|
||||
|
||||
<div class="col-md-12">
|
||||
|
||||
<a *ngFor="let beer of beers" [routerLink]="['/detail', beer.id]">
|
||||
<div class="col-md-3">
|
||||
<div class="well">
|
||||
<h4>{{beer.name}}</h4>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -14,19 +14,21 @@ var DashboardComponent = (function () {
|
||||
function DashboardComponent(beerService) {
|
||||
this.beerService = beerService;
|
||||
this.beers = [];
|
||||
this.beerTypes = ["Heineken", "Jupiler", "Westmalle", "Bavaria", "inBev"];
|
||||
this.beerType = "Heineken";
|
||||
}
|
||||
DashboardComponent.prototype.ngOnInit = function () {
|
||||
var _this = this;
|
||||
this.beerType = this.beerTypes[Math.floor(Math.random() * 5)];
|
||||
this.beerService
|
||||
.getAll()
|
||||
.subscribe(function (beers) { return _this.beers = beers.slice(4, 8); });
|
||||
.search(this.beerType)
|
||||
.subscribe(function (beers) { return _this.beers = beers; });
|
||||
};
|
||||
DashboardComponent = __decorate([
|
||||
core_1.Component({
|
||||
moduleId: module.id,
|
||||
selector: 'my-dashboard',
|
||||
templateUrl: './dashboard.component.html',
|
||||
styleUrls: ['./dashboard.component.css']
|
||||
templateUrl: './dashboard.component.html'
|
||||
}),
|
||||
__metadata('design:paramtypes', [beer_service_1.BeerService])
|
||||
], DashboardComponent);
|
||||
|
||||
@@ -1 +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"}
|
||||
{"version":3,"file":"dashboard.component.js","sourceRoot":"","sources":["dashboard.component.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAAkC,eAAe,CAAC,CAAA;AAGlD,6BAA4B,gBAAgB,CAAC,CAAA;AAQ7C;IAME,4BAAoB,WAAwB;QAAxB,gBAAW,GAAX,WAAW,CAAa;QAJ5C,UAAK,GAAW,EAAE,CAAC;QACnB,cAAS,GAAa,CAAC,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC;QAC/E,aAAQ,GAAW,UAAU,CAAC;IAEkB,CAAC;IAEjD,qCAAQ,GAAR;QAAA,iBAOC;QALC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;QAE/D,IAAI,CAAC,WAAW;aACb,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC;aACrB,SAAS,CAAC,UAAA,KAAK,IAAI,OAAA,KAAI,CAAC,KAAK,GAAG,KAAK,EAAlB,CAAkB,CAAC,CAAC;IAC5C,CAAC;IArBH;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,MAAM,CAAC,EAAE;YACnB,QAAQ,EAAE,cAAc;YACxB,WAAW,EAAE,4BAA4B;SAC1C,CAAC;;0BAAA;IAkBF,yBAAC;AAAD,CAAC,AAhBD,IAgBC;AAhBY,0BAAkB,qBAgB9B,CAAA"}
|
||||
@@ -6,19 +6,23 @@ import { BeerService } from './beer.service';
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'my-dashboard',
|
||||
templateUrl: './dashboard.component.html',
|
||||
styleUrls: [ './dashboard.component.css' ]
|
||||
templateUrl: './dashboard.component.html'
|
||||
})
|
||||
|
||||
export class DashboardComponent implements OnInit {
|
||||
|
||||
beers: Beer[] = [];
|
||||
beerTypes: string[] = ["Heineken", "Jupiler", "Westmalle", "Bavaria", "inBev"];
|
||||
beerType: string = "Heineken";
|
||||
|
||||
constructor(private beerService: BeerService) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
|
||||
this.beerType = this.beerTypes[ Math.floor(Math.random() * 5)];
|
||||
|
||||
this.beerService
|
||||
.getAll()
|
||||
.subscribe(beers => this.beers = beers.slice(4, 8));
|
||||
.search(this.beerType)
|
||||
.subscribe(beers => this.beers = beers);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user