On new publication add image from gallery added

This commit is contained in:
Eudes Inácio
2021-11-16 14:06:30 +01:00
parent e7c3bbf3ae
commit e2ef250521
2 changed files with 121 additions and 130 deletions
@@ -56,7 +56,7 @@
</div> </div>
<div class="ion-item-container-no-border"> <div class="ion-item-container-no-border">
<ion-label (click)="selectImage()"> <ion-label (click)="takePicture()">
<div class="attach-icon"> <div class="attach-icon">
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-add-photo.svg"></ion-icon> <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-add-photo.svg"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " src="assets/images/theme/gov/icons-add-photo.svg"></ion-icon> <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " src="assets/images/theme/gov/icons-add-photo.svg"></ion-icon>
@@ -69,7 +69,7 @@
</div> </div>
<div class="ion-item-container-no-border"> <div class="ion-item-container-no-border">
<ion-label (click)="laodPicture()" class="cursor-pointer"> <ion-label (click)="selectImage()" class="cursor-pointer">
<div class="attach-icon"> <div class="attach-icon">
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-add-photos.svg"></ion-icon> <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-add-photos.svg"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " src="assets/images/theme/gov/icons-add-photos.svg"></ion-icon> <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " src="assets/images/theme/gov/icons-add-photos.svg"></ion-icon>
@@ -16,7 +16,7 @@ import { formatDate } from 'src/plugin/momentG.js'
import { FileLoaderService } from 'src/app/services/file/file-loader.service'; import { FileLoaderService } from 'src/app/services/file/file-loader.service';
import { FileToBase64Service } from 'src/app/services/file/file-to-base64.service'; import { FileToBase64Service } from 'src/app/services/file/file-to-base64.service';
import { ThemeService } from 'src/app/services/theme.service'; import { ThemeService } from 'src/app/services/theme.service';
import { Camera, CameraResultType, CameraSource, Photo} from '@capacitor/camera'; import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
import { Filesystem, Directory } from '@capacitor/filesystem'; import { Filesystem, Directory } from '@capacitor/filesystem';
@@ -42,7 +42,7 @@ export class NewPublicationPage implements OnInit {
public showSeconds = false; public showSeconds = false;
public touchUi = false; public touchUi = false;
public enableMeridian = false; public enableMeridian = false;
public minDate = new Date().toISOString().slice(0,10) public minDate = new Date().toISOString().slice(0, 10)
public endMinDate = new Date(new Date().getTime() + 15 * 60000); public endMinDate = new Date(new Date().getTime() + 15 * 60000);
public stepHour = 1; public stepHour = 1;
public stepMinute = 5; public stepMinute = 5;
@@ -58,18 +58,18 @@ export class NewPublicationPage implements OnInit {
folderId: string; folderId: string;
image: Image = new Image(); image: Image = new Image();
publicationType:string; publicationType: string;
publicationTitle:string; publicationTitle: string;
imgUrl:any; imgUrl: any;
Defaultimage:any = ''; Defaultimage: any = '';
photo: SafeResourceUrl; photo: SafeResourceUrl;
guestPicture:any; guestPicture: any;
capturedImage:any = ''; capturedImage: any = '';
capturedImageTitle:any; capturedImageTitle: any;
public photos: any[] = []; public photos: any[] = [];
constructor( constructor(
@@ -83,12 +83,12 @@ export class NewPublicationPage implements OnInit {
public ThemeService: ThemeService, public ThemeService: ThemeService,
private platform: Platform, private platform: Platform,
private loadingCtrl: LoadingController, private loadingCtrl: LoadingController,
) { ) {
this.publicationType = this.navParams.get('publicationType'); this.publicationType = this.navParams.get('publicationType');
this.folderId = this.navParams.get('folderId'); this.folderId = this.navParams.get('folderId');
this.publicationTitle = 'Nova Publicação'; this.publicationTitle = 'Nova Publicação';
} }
ngOnInit() { ngOnInit() {
this.setTitle(); this.setTitle();
@@ -102,26 +102,17 @@ export class NewPublicationPage implements OnInit {
// this.takePicture(); // this.takePicture();
} }
async takePicture() { async takePicture() {
const capturedImage = await Camera.getPhoto({ const image = await Camera.getPhoto({
quality: 90, quality: 90,
// allowEditing: true, allowEditing: false,
resultType: CameraResultType.Uri, resultType: CameraResultType.Uri,
source: CameraSource.Camera source: CameraSource.Camera // Camera, Photos or Prompt!
});
const response = await fetch(capturedImage.webPath!);
const blob = await response.blob();
this.photos.unshift({
filepath: "soon...",
webviewPath: capturedImage.webPath
}); });
this.capturedImage = await this.convertBlobToBase64(blob); if (image) {
this.capturedImageTitle = new Date().getTime() + '.jpeg'; this.saveImage(image)
}
//console.log(this.capturedImage);
} }
@@ -129,7 +120,7 @@ async takePicture() {
const reader = new FileReader; const reader = new FileReader;
reader.onerror = reject; reader.onerror = reject;
reader.onload = () => { reader.onload = () => {
resolve(reader.result); resolve(reader.result);
}; };
reader.readAsDataURL(blob); reader.readAsDataURL(blob);
}); });
@@ -176,7 +167,7 @@ async takePicture() {
runValidation() { runValidation() {
this.validateFrom = true this.validateFrom = true
} }
injectValidation() { injectValidation() {
@@ -202,18 +193,18 @@ async takePicture() {
this.injectValidation() this.injectValidation()
this.runValidation() this.runValidation()
if(this.Form.invalid) return false if (this.Form.invalid) return false
if(this.publicationType == '3') { if (this.publicationType == '3') {
console.log(this.navParams.get('publication')); console.log(this.navParams.get('publication'));
if(this.capturedImage != ''){ if (this.capturedImage != '') {
this.publication = { this.publication = {
DateIndex: this.publication.DateIndex, DateIndex: this.publication.DateIndex,
DocumentId:this.publication.DocumentId, DocumentId: this.publication.DocumentId,
ProcessId:this.publication.ProcessId, ProcessId: this.publication.ProcessId,
Title: this.pub.Title, Title: this.pub.Title,
Message: this.pub.Message, Message: this.pub.Message,
DatePublication: this.publication.DatePublication, DatePublication: this.publication.DatePublication,
@@ -242,8 +233,8 @@ async takePicture() {
this.publication = { this.publication = {
DateIndex: this.publication.DateIndex, DateIndex: this.publication.DateIndex,
DocumentId:this.publication.DocumentId, DocumentId: this.publication.DocumentId,
ProcessId:this.publication.ProcessId, ProcessId: this.publication.ProcessId,
Title: this.pub.Title, Title: this.pub.Title,
Message: this.pub.Message, Message: this.pub.Message,
DatePublication: this.publication.DatePublication, DatePublication: this.publication.DatePublication,
@@ -264,15 +255,15 @@ async takePicture() {
this.close(); this.close();
} catch (error) { } catch (error) {
this.toastService.badRequest("Publicação não criado") this.toastService.badRequest("Publicação não criado")
} finally { } finally {
loader.remove() loader.remove()
} }
} else { } else {
this.publication = { this.publication = {
DateIndex: this.publication.DateIndex, DateIndex: this.publication.DateIndex,
DocumentId:this.publication.DocumentId, DocumentId: this.publication.DocumentId,
ProcessId:this.publication.ProcessId, ProcessId: this.publication.ProcessId,
Title: this.pub.Title, Title: this.pub.Title,
Message: this.pub.Message, Message: this.pub.Message,
DatePublication: this.publication.DatePublication, DatePublication: this.publication.DatePublication,
@@ -292,7 +283,7 @@ async takePicture() {
this.close(); this.close();
} catch (error) { } catch (error) {
this.toastService.badRequest("Publicação não criado") this.toastService.badRequest("Publicação não criado")
} finally { } finally {
loader.remove() loader.remove()
} }
@@ -300,15 +291,15 @@ async takePicture() {
} }
else { else {
const date = formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss') const date = formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss')
console.log(date); console.log(date);
console.log(this.folderId); console.log(this.folderId);
this.publication = { this.publication = {
DateIndex: date, DateIndex: date,
DocumentId:null, DocumentId: null,
ProcessId:this.folderId, ProcessId: this.folderId,
Title: this.pub.Title, Title: this.pub.Title,
Message: this.pub.Message, Message: this.pub.Message,
DatePublication: date, DatePublication: date,
@@ -329,7 +320,7 @@ async takePicture() {
this.close(); this.close();
} catch (error) { } catch (error) {
this.toastService.badRequest("Publicação não criado") this.toastService.badRequest("Publicação não criado")
} finally { } finally {
loader.remove() loader.remove()
} }
@@ -338,8 +329,8 @@ async takePicture() {
close() { close() {
this.modalController.dismiss().then(()=>{ this.modalController.dismiss().then(() => {
this.showLoader=true; this.showLoader = true;
}); });
} }
@@ -348,13 +339,13 @@ async takePicture() {
} }
setTitle() { setTitle() {
if(this.publicationType == '1') { if (this.publicationType == '1') {
this.publicationTitle = 'Nova Publicação Rápida'; this.publicationTitle = 'Nova Publicação Rápida';
} }
else if(this.publicationType == '2') { else if (this.publicationType == '2') {
this.publicationTitle = 'Nova Publicação'; this.publicationTitle = 'Nova Publicação';
} }
else if(this.publicationType == '3') { else if (this.publicationType == '3') {
this.publicationTitle = 'Editar Publicação'; this.publicationTitle = 'Editar Publicação';
this.pub = this.navParams.get('publication'); this.pub = this.navParams.get('publication');
@@ -374,98 +365,98 @@ async takePicture() {
modal.onDidDismiss(); modal.onDidDismiss();
} */ } */
/* async takePicture(){ /* async takePicture(){
const image = await Plugins.Camera.getPhoto({ const image = await Plugins.Camera.getPhoto({
quality: 100, quality: 100,
allowEditing: false, allowEditing: false,
resultType: CameraResultType.DataUrl, resultType: CameraResultType.DataUrl,
source: CameraSource.Camera source: CameraSource.Camera
}); });
console.log(image); console.log(image);
this.photo = this.sanitizer.bypassSecurityTrustResourceUrl(image && (image.dataUrl)); this.photo = this.sanitizer.bypassSecurityTrustResourceUrl(image && (image.dataUrl));
} */ } */
async selectImage() { async selectImage() {
const image = await Camera.getPhoto({ const image = await Camera.getPhoto({
quality: 90, quality: 90,
allowEditing: false, allowEditing: false,
resultType: CameraResultType.Uri, resultType: CameraResultType.Uri,
source: CameraSource.Camera // Camera, Photos or Prompt! source: CameraSource.Photos // Camera, Photos or Prompt!
}); });
if (image) { if (image) {
this.saveImage(image) this.saveImage(image)
} }
} }
// Create a new file from a capture image // Create a new file from a capture image
async saveImage(photo: Photo) { async saveImage(photo: Photo) {
const base64Data = await this.readAsBase64(photo); const base64Data = await this.readAsBase64(photo);
const fileName = new Date().getTime() + '.jpeg'; const fileName = new Date().getTime() + '.jpeg';
const savedFile = await Filesystem.writeFile({ const savedFile = await Filesystem.writeFile({
path: `${IMAGE_DIR}/${fileName}`, path: `${IMAGE_DIR}/${fileName}`,
data: base64Data, data: base64Data,
directory: Directory.Data directory: Directory.Data
}); });
this.loadFiles(); this.loadFiles();
} }
private async readAsBase64(photo: Photo) { private async readAsBase64(photo: Photo) {
if (this.platform.is('hybrid')) { if (this.platform.is('hybrid')) {
const file = await Filesystem.readFile({ const file = await Filesystem.readFile({
path: photo.path path: photo.path
}); });
return file.data; return file.data;
} }
else { else {
// Fetch the photo, read as a blob, then convert to base64 format // Fetch the photo, read as a blob, then convert to base64 format
const response = await fetch(photo.webPath); const response = await fetch(photo.webPath);
const blob = await response.blob(); const blob = await response.blob();
return await this.convertBlobToBase64(blob) as string; return await this.convertBlobToBase64(blob) as string;
} }
} }
async loadFiles() { async loadFiles() {
this.images = []; this.images = [];
const loading = await this.loadingCtrl.create({ const loading = await this.loadingCtrl.create({
message: 'Loading data...', message: 'Loading data...',
}); });
await loading.present(); await loading.present();
Filesystem.readdir({ Filesystem.readdir({
path: IMAGE_DIR, path: IMAGE_DIR,
directory: Directory.Data, directory: Directory.Data,
}).then(result => { }).then(result => {
console.log('ALL RESULTS', result.files[0]) console.log('ALL RESULTS', result.files[0])
let lastphoto = result.files[result.files.length -1] let lastphoto = result.files[result.files.length - 1]
this.loadFileData(lastphoto); this.loadFileData(lastphoto);
}, },
async (err) => { async (err) => {
console.log('ERROR FILE DOSENT EXIST',err) console.log('ERROR FILE DOSENT EXIST', err)
// Folder does not yet exists! // Folder does not yet exists!
await Filesystem.mkdir({ await Filesystem.mkdir({
path: IMAGE_DIR, path: IMAGE_DIR,
directory: Directory.Data, directory: Directory.Data,
recursive: true recursive: true
}); });
} }
).then(_ => { ).then(_ => {
loading.dismiss(); loading.dismiss();
}); });
} }
async loadFileData(fileName: string) { async loadFileData(fileName: string) {
console.log('ALL PHOTOT FILE', fileName) console.log('ALL PHOTOT FILE', fileName)
// for (let f of fileNames) { // for (let f of fileNames) {
const filePath = `${IMAGE_DIR}/${fileName}`; const filePath = `${IMAGE_DIR}/${fileName}`;
const readFile = await Filesystem.readFile({ const readFile = await Filesystem.readFile({
@@ -479,9 +470,9 @@ async loadFileData(fileName: string) {
data: `data:image/jpeg;base64,${readFile.data}`, data: `data:image/jpeg;base64,${readFile.data}`,
}); });
console.log('ALL IMAGE',this.images) console.log('ALL IMAGE', this.images)
this.capturedImage = this.images[0].data this.capturedImage = this.images[0].data
//} //}
} }
} }