Present food additives with danger range and info popup

app/pages/details/details.html

@@ -25,7 +25,18 @@ <h2>Score nutritionnel</h2>
         <h2>Traces</h2>
         <p>{{product.traces}}</p>
       </ion-item>
-      <!--<ion-icon name="flask"></ion-icon>-->
+      <ion-item>
+        <ion-icon name="flask" item-left></ion-icon>
+        <h2>Additifs</h2>
+        <ion-icon name="help" item-right (click)="showAdditiveInfo()"></ion-icon>
+      </ion-item>
+      <ion-item *ngFor="let additive of product.additives_tags">
+        <ion-icon name="illegal" item-left></ion-icon>
+        <b>{{additives[additive]?.code}}</b>
+        <p>{{additives[additive]?.name}}</p>
+        <ion-badge class="additive-danger-{{additives[additive]?.danger || 0}}" item-right>&#160;{{additives[additive]?.danger}}&#160;</ion-badge>
+      </ion-item>
+
     </ion-card-content>
   </ion-card>
   <ion-card>

app/pages/details/details.scss

@@ -18,14 +18,22 @@ ion-badge.e {
   background: #ff0000;
 }
 
-ion-badge.low {
+ion-badge.low, ion-badge.additive-danger-0, ion-badge.additive-danger-1{
   background: #60f000;
 }
 
-ion-badge.moderate {
+ion-badge.moderate, ion-badge.additive-danger-2{
   background: #ffcc01;
 }
 
-ion-badge.high {
+ion-badge.additive-danger-3{
+  background: #ff7d00;
+}
+
+ion-badge.high, ion-badge.additive-danger-4{
   background: #f00000;
 }
+
+ion-badge.additive-danger-5{
+  background: #990000;
+}

app/pages/details/details.ts

@@ -1,14 +1,15 @@
 import {Component} from '@angular/core';
-import {NavController, NavParams} from 'ionic-angular';
-import {OFFService} from '../../services/OFF';
+import {NavController, NavParams, AlertController} from 'ionic-angular';
+import {additivesService} from '../../services/additives'
 
 @Component({
   templateUrl: 'build/pages/details/details.html',
-  providers: [OFFService]
+  providers: [additivesService]
 })
 
 export class DetailsPage {
   public product;
+  public additives = {};
 
   public nutrients = {
     'salt': "Sel",
@@ -17,14 +18,47 @@ export class DetailsPage {
     'sugars': "Sucres"
   }
 
-  constructor(private openFoodFacts: OFFService,
-              private nav: NavController,
-              private navParams: NavParams) {
+  constructor(private nav: NavController,
+              private navParams: NavParams,
+              private alertController: AlertController,
+              private additivesService: additivesService) {
 
     this.product = navParams.get('product');
+
+    this.product.additives_tags.forEach((tag) => {
+      let ecode = tag.split(':')[1].toUpperCase();
+      this.populateAdditives(tag, ecode);
+    })
   }
 
   getNutrients() {
     return Object.keys(this.product.nutrient_levels);
   }
+
+  populateAdditives(tag, ecode) {
+    let additive = {};
+    this.additivesService.getAdditive(ecode).subscribe(
+      data => {
+        additive = data.json()[0];
+
+        this.additives[tag] = additive;
+      },
+      err => {
+        console.log(err);
+      }
+    )
+  }
+
+  showAdditiveInfo() {
+    this.alertController.create({
+      title: "Additifs aliementaires",
+      subTitle: "Cette liste indique les additifs alimentaires utilisés dans ce produit. Ces additifs sont ajoutés pour améliorer le produit. Il peut s'agir de colorants, de conservateurs ou d'arômes.<br>" +
+      "<b>Certains présentent un risque pour la santé.</b><br>Une échelle de toxicité est donnée de <ion-badge class='additive-danger-1'>1</ion-badge> (pas ou peu toxique) à <ion-badge class='additive-danger-5'>5</ion-badge> (très toxique)<br><small>La valeur 0 corrrespond à une donnée non renseignée.</small>",
+      buttons: [
+        {
+          text: "OK"
+        }
+      ]
+    }).present()
+  }
 }

app/pages/home/home.ts

@@ -13,7 +13,7 @@ import {CategoryPage} from '../category/category';
 })
 export class HomePage {
   public foundProduct;
-  public productCode;
+  public productCode = "3116740031499";
   public categoryName = "pizza";
   public foundCategories;
 
@@ -44,7 +44,7 @@ export class HomePage {
       err => {
         this.alertController.create({
           title: "Erreur de recherche",
-          subTitle: "Une erreur est survenue lors de la recherche du produit. Vérifiez votre connexion Internet et rézssayez",
+          subTitle: "Une erreur est survenue lors de la recherche du produit. Vérifiez votre connexion Internet et rézssayez. Infos techniques : " + err,
           buttons: [
             {
               text: "Réessayer",
@@ -54,7 +54,7 @@ export class HomePage {
               text: "OK"
             }
           ]
-        })
+        }).present()
       }
     );
   }

app/services/additives.ts

@@ -0,0 +1,20 @@
+import {Injectable} from "@angular/core";
+import {Http} from "@angular/http";
+import 'rxjs/add/operator/filter';
+import 'rxjs/add/operator/first';
+
+@Injectable()
+
+export class additivesService {
+  constructor(private http: Http) {
+  }
+
+  getAdditive(ecode) {
+    let additive =  this.http.get(`http://api.npsi-informatique.fr/api/additives?filter=%7B%22where%22%3A%20%7B%22code%22%3A%20%22${ecode}%22%7D%7D`)
+      .first()
+      // .filter((a) => {
+      //   return a.json().code == ecode;
+      // });
+    return additive;
+  }
+}