add attach to publication

This commit is contained in:
Peter Maquiran
2021-08-24 11:15:13 +01:00
parent b78d206df6
commit d50d986227
14 changed files with 142 additions and 112 deletions
+1 -1
View File
@@ -3,7 +3,7 @@
<name>gabinete digital</name> <name>gabinete digital</name>
<description>An awesome Ionic/Cordova app.</description> <description>An awesome Ionic/Cordova app.</description>
<author email="hi@ionicframework.com" href="http://ionicframework.com/">Ionic Framework Team</author> <author email="hi@ionicframework.com" href="http://ionicframework.com/">Ionic Framework Team</author>
<content original-src="index.html" src="http://localhost:8100" /> <content src="index.html" />
<access origin="*" /> <access origin="*" />
<allow-navigation href="http://*/*" /> <allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" /> <allow-navigation href="https://*/*" />
+13
View File
@@ -81,6 +81,19 @@ export class HomePage implements OnInit {
document.querySelectorAll('ion-modal').forEach((e: any) => e.remove()) document.querySelectorAll('ion-modal').forEach((e: any) => e.remove())
}); });
// if (typeof Worker !== 'undefined') {
// // Create a new
// const worker = new Worker(new URL('./nice.worker.ts', import.meta.url));
// worker.onmessage = ({ data }) => {
// console.log(`page got message: ${data}`);
// };
// worker.postMessage('hello');
// } else {
// // Web workers are not supported in this environment.
// // You should add a fallback so that your program still executes correctly.
// }
{ {
//this.folderId = this.navParams.get('folderId'); //this.folderId = this.navParams.get('folderId');
} }
+6
View File
@@ -0,0 +1,6 @@
// / <reference lib="webworker" />
addEventListener('message', ({ data }) => {
const response = `worker response to ${data}`;
//postMessage(response);
});
@@ -1,14 +1,21 @@
<ion-content fullscreen> <ion-content fullscreen class="d-flex flex-column">
<ion-item class="close" lines="none" text-center> <div class="main-content">
<ion-button (click)="close()" fill="clear" >
<ion-icon name="close" slot="start">Fechar</ion-icon> <div class="d-flex justify-end">
</ion-button> <ion-button (click)="close()" fill="clear" >
</ion-item> <ion-icon name="close" slot="start">Fechar</ion-icon>
<ion-slides> </ion-button>
<ion-slide> </div>
<div class="swipper-zoom-container"> <div>
<img src="{{imageUrl}}"> <ion-slides>
</div> <ion-slide>
</ion-slide> <div class="swipper-zoom-container">
</ion-slides> <img src="{{imageUrl}}">
</div>
</ion-slide>
</ion-slides>
</div>
</div>
</ion-content> </ion-content>
@@ -1,82 +1,82 @@
<ion-content> <ion-content>
<div class="content-container"> <div class="content-container d-flex flex-column">
<div class="title-content width-100"> <div class="title-content width-100">
<div class="div-title"> <div class="div-title">
<ion-label class="title">{{publicationTitle}}</ion-label> <ion-label class="title">{{publicationTitle}}</ion-label>
</div> </div>
</div> </div>
<div *ngIf="publicationType!='1'" class="ion-item-container" [class.input-error]="Form?.get('Subject')?.invalid && validateFrom ">
<ion-input [(ngModel)]="pub.Title" name="title" ngDefaultControl placeholder="Título" ></ion-input>
</div>
<div *ngIf="publicationType!='1'" class="container-div"> <div class="overflow-y-auto">
<div class="ion-item-class-2"> <div *ngIf="publicationType!='1'" class="ion-item-container" [class.input-error]="Form?.get('Subject')?.invalid && validateFrom ">
<div class="ion-icon-class"> <ion-input [(ngModel)]="pub.Title" name="title" ngDefaultControl placeholder="Título" ></ion-input>
<ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
</div> </div>
<div class="ion-textarea-class" [class.input-error]="Form?.get('Message')?.invalid && validateFrom ">
<ion-textarea [(ngModel)]="pub.Message" name="description" ngDefaultControl rows="12" cols="20" placeholder="Corpo de texto..."></ion-textarea>
</div>
</div>
</div>
<div *ngIf="capturedImage != ''" class="ion-item-container-no-border">
<ion-label class="attached-title">Fotografia Anexada</ion-label>
<ion-item lines="none">
<ion-thumbnail slot="start">
<ion-img [(ngModel)]="capturedImage" name="image" ngDefaultControl [src]="'data:image/png;base64,'+capturedImage"></ion-img>
</ion-thumbnail>
<!-- <ion-thumbnail *ngIf="!publication" slot="start">
<ion-img [(ngModel)]="publication.imageUrl" [src]="guestPicture"></ion-img>
</ion-thumbnail> -->
<ion-label>
<p>{{capturedImageTitle}}</p>
<p hidden>size</p>
</ion-label>
<ion-icon (click)="clear()" name="close"></ion-icon>
</ion-item>
<!-- <ion-thumbnail>
<ion-img src="{{imgUrl}}"></ion-img>
</ion-thumbnail> -->
</div>
<div class="picture d-flex pb-5 hide-desktop" *ngIf="publication.FileBase64 && capturedImage ==''">
<div class="post-img">
<img src="{{publication.FileBase64}}" alt="image" >
</div>
<div class="d-flex flex-column pl-10">
<div class="picture-file-name">{{publication.OriginalFileName}}.{{publication.FileExtension}}</div>
<div class="size">75 Kb</div>
</div>
<div class="flex-grow-1 d-flex align-center justify-end">
<div style="color: red;">X</div>
</div>
</div>
<div class="ion-item-container-no-border"> <div *ngIf="publicationType!='1'" class="container-div">
<ion-label (click)="takePicture()"> <div class="ion-item-class-2">
<div class="attach-icon"> <div class="ion-icon-class">
<ion-icon src="assets/images/icons-add-photo.svg"></ion-icon> <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
</div>
<div class="ion-textarea-class" [class.input-error]="Form?.get('Message')?.invalid && validateFrom ">
<ion-textarea [(ngModel)]="pub.Message" name="description" ngDefaultControl rows="12" cols="20" placeholder="Corpo de texto..."></ion-textarea>
</div>
</div>
</div> </div>
<div class="attach-document"> <div *ngIf="capturedImage != '' " class="ion-item-container-no-border">
<ion-label>Tirar Fotografia</ion-label> <ion-label class="attached-title">Fotografia Anexada </ion-label>
</div>
</ion-label> <ion-item lines="none">
</div> <ion-thumbnail slot="start">
<ion-img [(ngModel)]="capturedImage" name="image" ngDefaultControl [src]="capturedImage"></ion-img>
</ion-thumbnail>
<ion-label>
<p>{{capturedImageTitle}}</p>
<p hidden>size</p>
</ion-label>
<ion-icon (click)="clear()" name="close"></ion-icon>
</ion-item>
<!-- <div class="ion-item-container-no-border">
<ion-label (click)="laodPicture()">
<div class="attach-icon">
<ion-icon src="assets/images/icons-add-photos.svg"></ion-icon>
</div> </div>
<div class="attach-document">
<ion-label>Anexar Fotografia</ion-label> <div class="picture d-flex pb-5 hide-desktop" *ngIf="publication && capturedImage ==''">
</div> <div class="post-img" *ngIf="publication.FileBase64">
</ion-label> <img src="{{publication.FileBase64}}" alt="image" >
</div> --> </div>
<div class="d-flex flex-column pl-10" *ngIf="publication.FileBase64">
<div class="picture-file-name">{{publication.OriginalFileName}}.{{publication.FileExtension}}</div>
<div class="size">75 Kb</div>
</div>
<div class="flex-grow-1 d-flex align-center justify-end" *ngIf="publication.FileBase64">
<div style="color: red;">X</div>
</div>
</div>
<div class="ion-item-container-no-border">
<ion-label (click)="takePicture()">
<div class="attach-icon">
<ion-icon src="assets/images/icons-add-photo.svg"></ion-icon>
</div>
<div class="attach-document">
<ion-label>Tirar Fotografia</ion-label>
</div>
</ion-label>
</div>
<div class="ion-item-container-no-border">
<ion-label (click)="laodPicture()">
<div class="attach-icon">
<ion-icon src="assets/images/icons-add-photos.svg"></ion-icon>
</div>
<div class="attach-document">
<ion-label>Anexar Fotografia</ion-label>
</div>
</ion-label>
</div>
</div>
</div> </div>
</ion-content> </ion-content>
@@ -58,7 +58,6 @@ ion-toolbar{
} }
.title-content{ .title-content{
margin: 0px auto; margin: 0px auto;
overflow: auto;
padding: 0 !important; padding: 0 !important;
} }
.div-title{ .div-title{
@@ -95,9 +95,10 @@ export class NewPublicationPage implements OnInit {
this.camera.getPicture(options).then((imageData) => { this.camera.getPicture(options).then((imageData) => {
// imageData is either a base64 encoded string or a file URI // imageData is either a base64 encoded string or a file URI
// If it's base64 (DATA_URL): // If it's base64 (DATA_URL): m
let base64Image = 'data:image/jpeg;base64,' + imageData; //let base64Image = 'data:image/jpeg;base64,' + imageData;
this.capturedImage = imageData;
this.capturedImage = 'data:image/png;base64,'+imageData;
this.capturedImageTitle = new Date().getTime() + '.jpeg'; this.capturedImageTitle = new Date().getTime() + '.jpeg';
}, (err) => { }, (err) => {
/* console.log(err); */ /* console.log(err); */
@@ -116,6 +117,8 @@ export class NewPublicationPage implements OnInit {
const imageData = await this.fileToBase64Service.convert(file) const imageData = await this.fileToBase64Service.convert(file)
this.capturedImage = imageData; this.capturedImage = imageData;
this.capturedImageTitle = file.name this.capturedImageTitle = file.name
console.log(this.capturedImage)
}; };
} }
@@ -3,8 +3,6 @@ import { AnimationController, ModalController, NavParams } from '@ionic/angular'
import { Publication } from 'src/app/models/publication'; import { Publication } from 'src/app/models/publication';
import { PublicationsService } from 'src/app/services/publications.service'; import { PublicationsService } from 'src/app/services/publications.service';
import { ToastService } from 'src/app/services/toast.service'; import { ToastService } from 'src/app/services/toast.service';
import { BadRequestPage } from 'src/app/shared/popover/bad-request/bad-request.page';
import { SuccessMessagePage } from 'src/app/shared/popover/success-message/success-message.page';
import { ImageModalPage } from '../gallery/image-modal/image-modal.page'; import { ImageModalPage } from '../gallery/image-modal/image-modal.page';
import { NewPublicationPage } from '../new-publication/new-publication.page'; import { NewPublicationPage } from '../new-publication/new-publication.page';
@@ -27,6 +25,9 @@ export class PublicationDetailPage implements OnInit {
private animationController: AnimationController, private animationController: AnimationController,
private toastService: ToastService private toastService: ToastService
) { ) {
alert('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!')
this.publicationId = this.navParams.get('publicationId'); this.publicationId = this.navParams.get('publicationId');
/* this.folderId = this.navParams.get('folderIdId'); */ /* this.folderId = this.navParams.get('folderIdId'); */
this.publication = { this.publication = {
@@ -1,4 +1,4 @@
<ion-header class="ion-no-border d-md-none"> <ion-header class="ion-no-border">
<app-header></app-header> <app-header></app-header>
</ion-header> </ion-header>
@@ -10,7 +10,7 @@
</ion-refresher> </ion-refresher>
<div class="content-container"> <div class="content-container">
<div *ngIf="publication.Title != ''" class="d-flex flex-column"> <div *ngIf="publication.Title != ''" class="d-flex flex-column height-100">
<div class="title-content px-20 width-100 "> <div class="title-content px-20 width-100 ">
<div class="back-icon cursor-pointer" (click)="goBack()"> <div class="back-icon cursor-pointer" (click)="goBack()">
<ion-icon slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon> <ion-icon slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
@@ -33,6 +33,7 @@
</div> </div>
</div> </div>
</div> </div>
<div *ngIf="publication.Title == ''" class="d-flex flex-column"> <div *ngIf="publication.Title == ''" class="d-flex flex-column">
<div class="title-content width-100"> <div class="title-content width-100">
<div class="back-icon cursor-pointer"> <div class="back-icon cursor-pointer">
@@ -57,9 +57,8 @@
padding: 25px 0px 0 0px; padding: 25px 0px 0 0px;
overflow: auto; overflow: auto;
} }
.title-content{ .title-content {
margin: 0px auto; margin: 0px auto;
overflow: auto;
} }
.back-icon{ .back-icon{
width: auto; width: auto;
@@ -27,6 +27,7 @@ export class PublicationDetailPage implements OnInit {
private activatedRoute: ActivatedRoute, private activatedRoute: ActivatedRoute,
private router: Router, private router: Router,
) { ) {
this.activatedRoute.paramMap.subscribe(params => { this.activatedRoute.paramMap.subscribe(params => {
console.log(params); console.log(params);
if(params["params"]) { if(params["params"]) {
@@ -29,7 +29,7 @@
<ion-refresher-content> <ion-refresher-content>
</ion-refresher-content> </ion-refresher-content>
</ion-refresher> </ion-refresher>
<div class="main-container background-white"> <div class="main-container background-white height-100 overflow-y-auto">
<ion-list> <ion-list>
<!-- [routerLink]="['/home/publications/view-publications/publication-detail', publication.publicationId]" --> <!-- [routerLink]="['/home/publications/view-publications/publication-detail', publication.publicationId]" -->
<div class="post-item" <div class="post-item"
+3 -4
View File
@@ -16,13 +16,12 @@ export class FileLoaderService {
constructor() { } constructor() { }
createInput(param:createInput): HTMLInputElement { createInput({accept, type = 'file'}:createInput): HTMLInputElement {
let input = document.createElement('input'); let input = document.createElement('input');
input.type = param.type || 'file'; input.type = type || 'file';
input.accept = param.accept.join(', ') input.accept = accept.join(', ')
// input.onchange = () => { // input.onchange = () => {
// // you can use this method to get file and perform respective operations // // you can use this method to get file and perform respective operations
// let files = Array.from(input.files); // let files = Array.from(input.files);
@@ -147,25 +147,26 @@ export class ViewPublicationsPage implements OnInit {
async viewPublicationDetail(publicationId:string) { async viewPublicationDetail(publicationId:string) {
console.log(publicationId);
if( window.innerWidth <= 1024) { // if( window.innerWidth <= 1024) {
const modal = await this.modalController.create({ // const modal = await this.modalController.create({
component: PublicationDetailPage, // component: PublicationDetailPage,
componentProps:{ // componentProps:{
publicationId: publicationId, // publicationId: publicationId,
}, // },
cssClass: 'publication-detail modal modal-desktop', // cssClass: 'publication-detail modal modal-desktop',
//backdropDismiss: false // //backdropDismiss: false
}); // });
await modal.present(); // await modal.present();
modal.onDidDismiss().then(()=>{ // modal.onDidDismiss().then(()=>{
this.doRefresh(event); // this.doRefresh(event);
}); // });
} else { // } else {
// open publication details // // open publication details
this.openPublicationDetails.emit(publicationId); // this.openPublicationDetails.emit(publicationId);
} // }
this.openPublicationDetails.emit(publicationId);
} }