From 021dddba9967c7272184dafab9d06306a21162aa Mon Sep 17 00:00:00 2001
From: OKUNOKENTARO <okunokentaro@me.com>
Date: Sat, 30 Jul 2016 12:57:16 +0900
Subject: [PATCH] =?UTF-8?q?note=E3=82=92=E3=82=AF=E3=83=AA=E3=83=83?=
 =?UTF-8?q?=E3=82=AF=E3=81=A7=E3=81=8D=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/app.component.js | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/app/app.component.js b/app/app.component.js
index 466bf66..8d327ee 100755
--- a/app/app.component.js
+++ b/app/app.component.js
@@ -27,14 +27,22 @@ const DEFAULT_BPM = 120;
         margin-right: 8px;
         background: #550;
       }
+      .on {
+        background: #ff0;
+      }
     </style>
     <h1>{{f}}</h1>
     <ul class="grids">
-      <li class="grid" *ngFor="let i of grids"></li>
+      <li
+        *ngFor="let grid of grids; let idx = index"
+        class="grid"
+        [class.on]="grid.note"
+        (click)="onClickGrid($event, idx)"
+      ></li>
     </ul>
     <input type="range" [ngModel]="bpm" (ngModelChange)="onBpmChange($event)" name="bpm" min="40" max="200">
     <button (click)="contract()">-</button>
-  <button (click)="expand()">+</button>
+    <button (click)="expand()">+</button>
     {{bpm}}
   `
 })
@@ -42,7 +50,11 @@ export class AppComponent {
   constructor(@Inject(FrameService) frame) {
     this.frame = frame;
     this.range = 16;
-    this.grids = lodash.range(this.range);
+    this.grids = lodash.range(this.range).map((i) => {
+      return {
+        note: false
+      }
+    });
   }
 
   ngOnInit() {
@@ -78,4 +90,9 @@ export class AppComponent {
       this.f = f;
     });
   }
+
+  onClickGrid(ev, idx) {
+    console.log(`onClickGrid`, idx);
+    this.grids[idx].note = !this.grids[idx].note;
+  }
 }
\ No newline at end of file