Added ability to add and remove recipes and clearing local storage

client/src/pages/settings-recipe/settings-recipe.html

@@ -3,11 +3,21 @@
     <ion-title>{{pageTitle}}</ion-title>
     <ion-buttons end>
       <button ion-button (click)="save(recipe)">Save</button>
+      <button ion-button (click)="deleteCurrent(recipe)">Delete</button>
     </ion-buttons>
   </ion-navbar>
 </ion-header>
 
-<ion-content>
+<ion-content padding>
+  <ion-label color="primary"> Edit Recipe Name</ion-label>
+  <ion-input
+    type="text"
+    [value]="recipe.name"
+    (input)="recipe.name = $event.target.value"
+  >
+  </ion-input>
+  <ion-item-divider color="light">Recipe Ingredients list</ion-item-divider>
+
   <ion-list *ngFor="let ingredient of recipe.ingredients; let i=index">
     <ion-list-header>
       <ion-label>

client/src/pages/settings-recipe/settings-recipe.ts

@@ -56,4 +56,12 @@ export class SettingsRecipePage {
     this.recipe.ingredients.splice(index,1);
   }
 
+  deleteCurrent(recipe){
+    var index = this.recipesData.recipes.findIndex(item => item.id == this.recipe.id);
+    this.recipesData.recipes.splice(index,1);
+    this.recipesData.saveDataToLS();
+    this.nav.pop();
+  }
+
+
 }

client/src/pages/settings-recipes/settings-recipes.html

@@ -11,4 +11,10 @@
       <p>{{recipesData.getRecipeDescription(recipe)}}</p>
     </ion-item>
   </ion-list>
+
+  <ion-fab right bottom>
+
+    <button ion-fab (click)="createNewRecipe()"><ion-icon name="add"></ion-icon></button>
+
+  </ion-fab>
 </ion-content>

client/src/pages/settings-recipes/settings-recipes.ts

@@ -22,5 +22,18 @@ export class SettingsRecipesPage {
   presentRecipe(recipe) {
     this.nav.push(SettingsRecipePage, {recipe});
   }
+
+  createNewRecipe() {
+    console.log("Total number of existing recipes  = ", this.recipesData.recipes.length );
+    let new_id = this.recipesData.recipes
+      .map(recipe => recipe.id)
+      .sort( (a, b) => b - a )[ 0 ] || 0;
+    new_id = new_id + 1;
+    console.log("Creating New Recipe with id = ", new_id );
+    this.recipes.push({id: new_id , name: "NEW ITEM  !!!", image:"cape_codder_small.png", description: "", ingredients:[]})
+    var indexOfTheOneJustCreated = this.recipesData.recipes.findIndex(item => item.id == new_id);
+    var recipe = this.recipesData.recipes[indexOfTheOneJustCreated];
+    this.nav.push(SettingsRecipePage, {recipe});
+  }
 
 }

client/src/pages/settings/settings.html

@@ -35,4 +35,14 @@
     </button>
   </div>
 
+  <ion-item-group>
+    <ion-item-divider color="light">Reset data</ion-item-divider>
+    <div style="padding: 0 16px;">
+      <button ion-button block (click)="showPromptAlert()">
+        Reset all local data
+      </button>
+    </div>
+
+  </ion-item-group>
+
 </ion-content>

client/src/pages/settings/settings.ts

@@ -1,9 +1,11 @@
 import { Component, NgZone } from '@angular/core';
 import { Events, NavController /*, NavParams */} from 'ionic-angular';
+import { AlertController } from 'ionic-angular';
 
 import { Barbot } from '../../providers/barbot';
 import { SettingsIngredientsPage } from '../settings-ingredients/settings-ingredients';
 import { SettingsRecipesPage } from '../settings-recipes/settings-recipes';
+import { RecipesData } from '../../providers/recipes-data';
 
 @Component({
   selector: 'page-settings',
@@ -14,10 +16,14 @@ export class SettingsPage {
   status: any;
   buttonDisabled: boolean = false;
 
+
+
   constructor(public nav: NavController,
               private events: Events,
               private barbot: Barbot,
-              private ngZone: NgZone
+              public atrCtrl: AlertController,
+              private ngZone: NgZone,
+              public recipesData: RecipesData
   ) {
     this.listenToEvents();
   }
@@ -52,6 +58,42 @@ export class SettingsPage {
     });
   }
 
+
+  showPromptAlert() {
+  let alert = this.atrCtrl.create({
+    title: 'Clear local data',
+    inputs: [
+      {
+        name: 'pin',
+        placeholder: 'Enter pin',
+        type: 'password'
+      }
+    ],
+    buttons: [
+      {
+        text: 'Cancel',
+        role: 'cancel',
+        handler: data => {
+          console.log('You Clicked on Cancel');
+        }
+      },
+      {
+        text: 'Clear Data',
+        handler: data => {
+          if (data.pin == '2345') {
+            this.recipesData.clearData();
+            this.recipesData.init();
+          } else {
+            // invalid login
+            return false;
+          }
+
+        }
+      }
+    ]
+  });
+  alert.present();
+}
   presentIngredients() {
     this.nav.push(SettingsIngredientsPage);
   }

client/src/providers/recipes-data.ts

@@ -20,6 +20,7 @@ export class RecipesData {
   }
 
   init() {
+    //this.ls.clear(); // this is to clear everything on start Just for Debugging
     let shouldCopyPredefinedData;
 
     shouldCopyPredefinedData = this.lsDataKeys.some( datasetKey =>
@@ -29,6 +30,10 @@ export class RecipesData {
     return !shouldCopyPredefinedData ? this.loadFromLS() : this.loadFromJSON();
   }
 
+  clearData(){
+    this.ls.clear();
+  }
+
   loadFromLS() {
     this.lsDataKeys.forEach( lsDataKey => {
       this[ lsDataKey ] = JSON.parse( this.ls.getItem(lsDataKey) );
@@ -68,7 +73,6 @@ export class RecipesData {
   }
 
   saveIngrediant(modifiedIngredient) {
-
     let ingredientToModify = this.ingredients.find( ingredient =>
       ingredient.id == modifiedIngredient.id
     );
@@ -80,7 +84,6 @@ export class RecipesData {
     } else {
       this.ingredients.unshift(modifiedIngredient);
     }
-
     this.saveDataToLS();
   }