grid

lathonez · Dec 11, 2015 · 9d04f8d · 9d04f8d
1 parent 3ad9205
commit 9d04f8d
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 19 deletions.
diff --git a/www/app/components/clickerButton/clickerButton.html b/www/app/components/clickerButton/clickerButton.html
@@ -1 +1 @@
-<button outline (click)="clickerService.doClick(clicker.id)">{{clicker.name}} ({{clicker.getCount()}})</button>
+<button block outline (click)="clickerService.doClick(clicker.id)">{{clicker.name}} ({{clicker.getCount()}})</button>
diff --git a/www/app/pages/clickerList/clickerList.html b/www/app/pages/clickerList/clickerList.html
@@ -8,14 +8,17 @@
 
 <ion-content padding>
   <ion-row>
-    <ion-column>
-      <ion-input><input #newclicker type="text" placeholder="New Clicker"></ion-input>
-    </ion-column>
-    <ion-column>
-      <button secondary outline (click)="newClicker(newclicker.value)"><icon add-circle></icon></button>
-    </ion-column>
+    <ion-col width-80>
+      <ion-input block><input #newclicker type="text" placeholder="New Clicker"></ion-input>
+    </ion-col>
+    <ion-col>
+      <button block secondary outline (click)="newClicker(newclicker.value)"><icon add-circle></icon></button>
+    </ion-col>
+  </ion-row>
+  <ion-row *ng-for="#clicker of clickerService.clickers">
+    <ion-col width-80><clicker-button [clicker]="clicker"></clicker-button></ion-col>
+    <ion-col>
+      <button block danger outline (click)="clickerService.removeClicker(clicker.id)"><icon trash></icon></button>
+    </ion-col>
   </ion-row>
-  <ion-list no-lines>
-    <ion-item *ng-for="#clicker of clickers"><clicker-button [clicker]="clicker"></clicker-button></ion-item>
-  </ion-list>
 </ion-content>
diff --git a/www/app/pages/clickerList/clickerList.js b/www/app/pages/clickerList/clickerList.js
@@ -1,5 +1,4 @@
 import { Page, NavController } from 'ionic/ionic';
-import { Clicker } from '../../models/clicker';
 import { Clickers } from '../../services/clickers';
 import { ClickerButton } from '../../components/clickerButton/clickerButton';
 
@@ -11,15 +10,13 @@ import { ClickerButton } from '../../components/clickerButton/clickerButton';
 
 export class ClickerList {
 
-  clickers: Array<Clicker>;
   clickerService: Clickers;
   nav: NavController;
 
   constructor(nav: NavController, clickerService: Clickers) {
     this.nav = nav;
     this.clickerService = clickerService;
     this.title = 'Clickers';
-    this.clickers = this.clickerService.getClickers();
   }
 
   newClicker(id) {
@@ -29,5 +26,7 @@ export class ClickerList {
     }
 
     this.clickerService.newClicker(id);
+
+    // TODO - clear text on input field
   }
 }
diff --git a/www/app/services/clickers.js b/www/app/services/clickers.js
@@ -36,7 +36,7 @@ export class Clickers {
       });
   }
 
-  // initialise a clicker from the DB
+  // initialise a clicker from a raw JSON string out of the DB
   initClicker(clicker) {
     const parsedClicker = JSON.parse(clicker);
     const newClicker = new Clicker(parsedClicker.id, parsedClicker.name);
@@ -58,10 +58,6 @@ export class Clickers {
     });
   }
 
-  getClickers() {
-    return this.clickers;
-  }
-
   newClicker(name) {
     const id = this.uid();
     const clicker = new Clicker(id, name);
@@ -72,7 +68,20 @@ export class Clickers {
     this.ids.push(id);
     // save the clicker by id
     this.storage.set(id, JSON.stringify(clicker));
-    // save the service's ids arrays
+    // save the service's ids array
+    this.storage.set('ids', JSON.stringify(this.ids));
+  }
+
+  removeClicker(id) {
+    // remove clicker from the service
+    this.clickers = _.reject(this.clickers, (clicker) => {
+      return clicker.id === id;
+    });
+    // remove from ids array
+    this.ids = _.without(this.ids, id);
+    // null id in db
+    this.storage.set(id, null);
+    // update service's ids array
     this.storage.set('ids', JSON.stringify(this.ids));
   }