feat(items): pick an item

SteveVanOpstal · Apr 7, 2016 · 9018b3f · 9018b3f
1 parent db70e54
commit 9018b3f
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 29 deletions.
diff --git a/src/app/build/items/item.component.ts b/src/app/build/items/item.component.ts
@@ -8,13 +8,14 @@ import {DDragonDirective} from '../../misc/ddragon.directive';
   directives: [NgIf, DDragonDirective],
   template: `
     <img [ddragon]="'item/' + item.image.full">
-    <div>
-      <p *ngIf="name" class="name">{{name}}</p>
+    <div *ngIf="name">
+      <p class="name">{{name}}</p>
       <div class="gold">
         <img [ddragon]="'ui/gold.png'">
         <p>{{item.gold.total}}</p>
       </div>
-    </div>`
+    </div>
+    <p *ngIf="!name" class="gold">{{item.gold.total}}</p>`
 })
 
 export class ItemComponent {

diff --git a/src/app/build/items/items.component.ts b/src/app/build/items/items.component.ts
@@ -1,22 +1,22 @@
-import {Component, Input, OnChanges} from 'angular2/core';
+import {Component, Input, Output, EventEmitter, OnChanges} from 'angular2/core';
 import {NgFor, NgClass} from 'angular2/common';
+import {Observable} from 'rxjs/Observable';
 
 import {ItemComponent} from './item.component.ts';
-
-import {ToIterablePipe} from '../../misc/to-iterable.pipe';
+import {Config} from '../config';
 
 @Component({
   selector: 'items',
   directives: [NgFor, NgClass, ItemComponent],
-  pipes: [ToIterablePipe],
   template: `
-    <template ngFor #item [ngForOf]="items?.data | toIterable">
-      <item [item]="item" [ngClass]="{disabled: item.disabled}" [attr.title]="item.description"></item>
+    <template ngFor #item [ngForOf]="items" #i="index">
+      <item [item]="item" [ngClass]="{disabled: item.disabled}" [attr.title]="item.description" style="left: {{i * 50}}px"></item>
     </template>`
 })
 
 export class ItemsComponent implements OnChanges {
-  @Input() items;
+  @Input() items: Array<Object>;
+  @Input() config: Config;
 
   ngOnChanges() {
     // TODO: implement

diff --git a/src/app/build/shop/shop.component.spec.ts b/src/app/build/shop/shop.component.spec.ts
@@ -50,7 +50,7 @@ describe('ShopComponent', () => {
     expect(component.items).not.toBeDefined();
     component.getData();
     return service.getItems().toPromise().then(() => {
-      expect(component.data).toBeDefined();
+      expect(component.items).toBeDefined();
     });
   }));
 

diff --git a/src/app/build/shop/shop.component.ts b/src/app/build/shop/shop.component.ts
@@ -27,7 +27,7 @@ import {LolApiService} from '../../misc/lolapi.service';
   template: `
     <div class="left">
       <button type="button" name="all-items">All Items</button>
-      <div class="category" *ngFor="#category of data?.tree | toIterable">
+      <div class="category" *ngFor="#category of items?.tree | toIterable">
         <p class="noselect">{{category.header | translate | capitalize}}</p>
         <hr>
         <label *ngFor="#tag of category.tags">
@@ -48,8 +48,8 @@ import {LolApiService} from '../../misc/lolapi.service';
         </button>
       </div>
       <div class="items">
-        <template ngFor #item [ngForOf]="data?.data | toIterable | map:11 | champion:123 | hide | tags:tags | name:name | sort">
-          <item [item]="item" [name]="item.name" [ngClass]="{disabled: item.disabled}" [attr.title]="item.description" (click)="itemPicked($event)"></item>
+        <template ngFor #item [ngForOf]="items?.data | toIterable | map:11 | champion:123 | hide | tags:tags | name:name | sort">
+          <item [item]="item" [name]="item.name" [ngClass]="{disabled: item.disabled}" [attr.title]="item.description" (click)="itemPicked(item)"></item>
         </template>
         <loading [loading]="loading"></loading>
         <error [error]="error" (retry)="getData()"></error>
@@ -58,10 +58,9 @@ import {LolApiService} from '../../misc/lolapi.service';
 })
 
 export class ShopComponent {
-  @Input() items: Object;
-  @Output() itemsChanged: EventEmitter<any> = new EventEmitter<any>();
+  @Input() pickedItems: Array<Object>;
 
-  private data: Object;
+  private items: Object;
   private loading: boolean = true;
   private error: boolean = false;
 
@@ -77,7 +76,7 @@ export class ShopComponent {
 
     this.lolApi.getItems()
       .subscribe(
-      res => { this.data = res; },
+      res => { this.items = res; },
       error => { this.error = true; this.loading = false; },
       () => this.loading = false
       );
@@ -98,11 +97,7 @@ export class ShopComponent {
     }
   }
 
-  private itemPicked(event: Event) {
-    if (!event || !event.target) {
-      return;
-    }
-    // TODO: implement
-    this.itemsChanged.next(null);
+  private itemPicked(item: Object) {
+    this.pickedItems.push(item);
   }
 }
diff --git a/src/app/routes/build.component.ts b/src/app/routes/build.component.ts
@@ -1,5 +1,4 @@
 import {Component, ViewEncapsulation} from 'angular2/core';
-import {NgIf} from 'angular2/common';
 import {RouteParams} from 'angular2/router';
 
 import {GraphComponent} from '../build/graph.component';
@@ -16,8 +15,8 @@ import {LolApiService} from '../misc/lolapi.service';
 import {Config} from '../build/config';
 
 @Component({
-  directives: [GraphComponent, ItemsComponent, MasteriesComponent, ShopComponent, DDragonDirective, LoadingComponent, ErrorComponent],
   providers: [LolApiService],
+  directives: [GraphComponent, ItemsComponent, MasteriesComponent, ShopComponent, DDragonDirective, LoadingComponent, ErrorComponent],
   styleUrls: [
     './assets/css/build.css'
   ],
@@ -32,8 +31,8 @@ import {Config} from '../build/config';
     </div>
     <graph [champion]="champion" [config]="config"></graph>
     <masteries></masteries>
-    <items [items]="items"></items>
-    <shop [(items)]= "items"></shop>
+    <items [items]="pickedItems" [config]="config"></items>
+    <shop [(pickedItems)]="pickedItems"></shop>
     <loading [loading]="loading"></loading>
     <error [error]="error" (retry)="getData()"></error>`
 })
@@ -45,7 +44,7 @@ export class BuildRoute {
   private error: boolean = false;
 
   private config: Config = new Config();
-  private items: Object;
+  private pickedItems: Array<Object> = new Array<Object>();
 
   constructor(params: RouteParams, private lolApi: LolApiService) {
     this.championKey = params.get('champion');

diff --git a/src/assets/css/build.css b/src/assets/css/build.css
@@ -304,6 +304,24 @@ shop .items {
   min-height: 1000px;
 }
 
+/* items */
+
+items {
+  display: flex;
+  position: relative;
+  /*height: 155px;*/
+  flex-direction: column;
+  flex-wrap: wrap;
+}
+
+items item {
+  position: relative;
+  width: 46px;
+}
+
+items item .gold {
+  margin: 28px -42px;
+}
 
 /* item */