Link multiple photos with one item

@Soufiane_Dehaimani wrote:

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>

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;
}

}

Posts: 1

Participants: 1

Read full topic