Link multiple photos with one item


#1

Hi everyone,

I’m working on my first ionic project, it is an application about documents, i have three pages, Home, Add-item and items details, the home page lists the documents stored in my local storage, i can edit,delete items from the list and also add more items.
the propreties of my items are a title, two dates, one select list and a photo taken with the device’s camera or from the library.
Now i can list the item’s details with every item’s property even the picture, but now i want to have more pictures in my items, like a document can have one or more pictures as a property.
I will show you my code bellow, thank you for your help !

Add-item.html :

Ajouter un document
<ion-item>
  <ion-label floating>Titre</ion-label>
  <ion-input type="text" [(ngModel)]="title"></ion-input>
</ion-item>

<ion-item>
  <ion-label floating>Date début</ion-label>
  <ion-datetime displayFormat="DD MM YYYY" [(ngModel)]="DateD" pickerFormat="DD MM YYYY" ></ion-datetime>
</ion-item>

<ion-item>
  <ion-label floating>Date fin</ion-label>
  <ion-datetime displayFormat="DD MM YYYY" min="2017" max="2050" [(ngModel)]="DateF" pickerFormat="DD MM YYYY" ></ion-datetime>
</ion-item>

<ion-list>
  <ion-item>
    <ion-label>Notification</ion-label>
        <ion-select [(ngModel)]="Notif" >
          <ion-option value="1">1 jour</ion-option>
          <ion-option value="5">5 jours</ion-option>
          <ion-option value="10">10 jours</ion-option>
          <ion-option value="15">15 jours</ion-option>
          <ion-option value="20">20 jours</ion-option>
          <ion-option value="30">30 jours</ion-option>
        </ion-select>

  </ion-item>
</ion-list>
<ion-buttons end>
  <button (click)="takePhoto()">
    <ion-icon name="camera"></ion-icon>

  </button>
</ion-buttons>

<button full ion-button color=“secondary” (click)=“saveItem();schedule();”>Enregistrer

add-item.ts :

import { Component } from ‘@angular/core’;
import { NavController, ViewController,AlertController } from ‘ionic-angular’;
import { Camera, CameraOptions, CameraPopoverOptions } from ‘@ionic-native/camera’;
import {LocalNotifications} from “@ionic-native/local-notifications”;

@Component({
selector: ‘page-add-item’,
templateUrl: ‘add-item.html’,
providers: [Camera],
})
export class AddItemPage {

imageURL;
public base64Image: string;
title;
DateD;
DateF;
Notif;

constructor(public navCtrl: NavController, public view: ViewController,private camera: Camera,private LocalNotifications: LocalNotifications,private alertCtrl: AlertController) {
this.LocalNotifications.on(“click”, (notification, state) => {
let alert = this.alertCtrl.create({
title: “Rappel”,
subTitle: “Votre document est presque expiré”,
buttons: [“OK”]
});
alert.present()
});

}

public schedule() {
var d = new Date(this.DateF);
d.setDate(d.getDate()-this.Notif);
console.log(d);
this.LocalNotifications.schedule({

  title: "Rappel",
  text: "Votre document est presque expiré",
  at: d,
  sound: null
});

}

saveItem(){

let newItem = {
  title: this.title,
  DateD: this.DateD,
  DateF: this.DateF,
  Notif: this.Notif,
  imageURL: this.imageURL
};
this.view.dismiss(newItem);

}

close(){
this.view.dismiss();
}

options: CameraOptions = {
quality: 100,
saveToPhotoAlbum: true,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
allowEdit: true,
correctOrientation: false
}

popover: CameraPopoverOptions = {
x: 20,
y: 60,
width: 200,
height: 100,
arrowDir: 1
}

takePhoto(){
this.camera.getPicture(this.options).then((imageData) => {
this.imageURL.push (‘data:image/jpeg;base64,’ + imageData);
}, (err) => {
console.log(err);
});
}
}

imageURL is what you can call the name of the picture and I save it with the other properties in the item

item-details.html :

{{title}}
Date début
<ion-card-content>
  {{DateD}}
</ion-card-content>
Date fin
<ion-card-content>
  {{DateF}}
</ion-card-content>
Notification
<ion-card-content>
  {{Notif}} Jours
</ion-card-content>

item-details.ts :

import { Component } from ‘@angular/core’;
import { IonicPage, NavController, NavParams } from ‘ionic-angular’;

/**

  • Generated class for the ItemDetail page.
  • See http://ionicframework.com/docs/components/#navigation for more info
  • on Ionic pages and navigation.
    */
    @IonicPage()
    @Component({
    selector: ‘page-item-detail’,
    templateUrl: ‘item-detail.html’,
    })
    export class ItemDetailPage {

title;
DateD;
DateF;
Notif;
imageURL;

constructor(public navParams: NavParams){

}

ionViewDidLoad() {
this.title = this.navParams.get(‘item’).title;
this.DateD = this.navParams.get(‘item’).DateD;
this.DateF = this.navParams.get(‘item’).DateF;
this.Notif = this.navParams.get(‘item’).Notif;
this.imageURL=this.navParams.get(‘item’).imageURL;
}

}


#2

If you want multiple imageURLs, then make that property of the item an array. Incidentally, you probably don’t want to declare Camera on a per-component basis, so I would recommend taking the providers off of AddItemPage.


#3

Thank you, I trie to do that but it didn’t work and i don’t know how to show it in my itemdetails.html page.