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
Date fin<ion-card-content> {{DateD}} </ion-card-content>
Notification<ion-card-content> {{DateF}} </ion-card-content>
<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;
}
}