peter/doneit-web
1
0
Fork 0
mirror of https://code.equilibrium.co.ao/ITO/doneit-web.git synced 2026-04-20 13:26:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

previewImages

Browse Source
This commit is contained in:
ivan gomes
2021-11-17 15:34:15 +01:00
parent aadd39229d
commit 4262597360
17 changed files with 506 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/chat/chat.page.html
+1
View File
@@ -125,6 +125,7 @@
</div>
</div>
</ion-item-sliding>
am i here?!
</ion-list>
</div>
<!-- <button (click)="sendMsg()" style="height: 41px;">Send message</button> -->
src/app/pages/chat/group-messages/group-messages.page.html
+3 -2
View File
@@ -57,7 +57,7 @@
<ion-label>A conversa original mantêm-se como chat individual</ion-label>
</div>
<div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of messages; let last = last" [class.messages-list-item-wrapper-active]="msg._id == selectedMsgId">
<div *ngIf="msg.t != 'r' && msg.t != 'ul' && msg.t != 'ru'" (press)="handlePress(msg._id)" class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}'>
<div *ngIf="msg.t != 'r' && msg.t != 'ul' && msg.t != 'ru'" (press)="handlePress(msg._id)" class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}' (click)="openPreview(msg)">
<div class="title">
<ion-label>{{msg.u.name}}</ion-label>
<span class="time">{{showDateDuration(msg._updatedAt)}}</span>
@@ -66,7 +66,7 @@
<ion-label>{{msg.msg}}</ion-label>
<div *ngIf="msg.attachments" class="message-attachments">
<div *ngFor="let file of msg.attachments">
<img *ngIf="file.image_url" src="{{file.image_url}}" alt="image">
<img *ngIf="file.image_url" src="{{file.image_url}}" alt="image" >
<div>
<div>
<div class="file">
@@ -152,4 +152,5 @@
</button>
</div>
</div>
in group!
</ion-footer>
src/app/pages/chat/group-messages/group-messages.page.scss
+33
View File
@@ -278,3 +278,36 @@
}
}
.preview-slides {
margin-top: 20%;
background: #e6e6e6;
img {
padding-top: 20px;
padding-bottom: 20px;
}
}
.transparent-modal {
.modal-wrapper {
--background: rgba(44, 39, 45, 0.2);
}
}
.image-slide,
.image-card {
overflow: visible;
}
.image-card {
z-index: 9;
}
.backdrop {
height: 200%;
width: 100%;
background: black;
position: absolute;
z-index: 10;
}
src/app/pages/chat/group-messages/group-messages.page.ts
+62 -3
View File
@@ -1,5 +1,5 @@
import { Component, ElementRef, OnInit, ViewChild, AfterViewChecked, AfterViewInit, OnDestroy, } from '@angular/core';
import { ActionSheetController, MenuController, ModalController, NavParams, PopoverController } from '@ionic/angular';
import { Component, ElementRef, OnInit, ViewChild, AfterViewChecked, AfterViewInit, OnDestroy, ChangeDetectorRef, } from '@angular/core';
import { ActionSheetController, IonSlides, MenuController, ModalController, NavParams, PopoverController } from '@ionic/angular';
import { AlertService } from 'src/app/services/alert.service';
import { AuthService } from 'src/app/services/auth.service';
import { ChatService } from 'src/app/services/chat.service';
@@ -20,6 +20,7 @@ import { NewEventPage } from '../../agenda/new-event/new-event.page';
import { EventPerson } from 'src/app/models/eventperson.model';
import { ViewDocumentPage } from 'src/app/modals/view-document/view-document.page';
import { ThemeService } from 'src/app/services/theme.service'
import { PreviewCameraPage } from 'src/app/modals/preview-camera/preview-camera.page';
@Component({
selector: 'app-group-messages',
@@ -27,6 +28,8 @@ import { ThemeService } from 'src/app/services/theme.service'
styleUrls: ['./group-messages.page.scss'],
})
export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
showLoader: boolean;
isGroupCreated:boolean;
loggedUser: any;
@@ -75,7 +78,8 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
private fileToBase64Service: FileToBase64Service,
private fileService: FileService,
private toastService: ToastService,
public ThemeService: ThemeService
public ThemeService: ThemeService,
private changeDetectorRef: ChangeDetectorRef
) {
this.loggedUserChat = authService.ValidatedUserChat['data'];
this.isGroupCreated = true;
@@ -580,4 +584,59 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
});
}
sliderOpts = {
zoom: false,
slidesPerView: 1.5,
spaceBetween: 20,
centeredSlides: true
};
zoomActive = false;
zoomScale = 1;
sliderZoomOpts = {
allowSlidePrev: false,
allowSlideNext: false,
zoom: {
maxRatio: 5
},
on: {
zoomChange: (scale, imageEl, slideEl) => {
this.zoomActive = true;
this.zoomScale = scale/5;
this.changeDetectorRef.detectChanges();
}
}
}
async touchEnd(zoomslides: IonSlides, card) {
// Zoom back to normal
const slider = await zoomslides.getSwiper();
const zoom = slider.zoom;
zoom.out();
// Card back to normal
card.el.style['z-index'] = 9;
this.zoomActive = false;
this.changeDetectorRef.detectChanges();
}
touchStart(card) {
// Make card appear above backdrop
card.el.style['z-index'] = 11;
}
async openPreview(img) {
const modal = await this.modalController.create({
component: PreviewCameraPage,
cssClass: 'transparent-modal',
componentProps: {
image: img.attachments[0].image_url,
username: img.u.username,
_updatedAt: img._updatedAt
}
});
modal.present();
}
}
src/app/pages/chat/messages/messages.page.html
+4 -2
View File
@@ -50,8 +50,8 @@
</ion-refresher> -->
<div (click)="handleClick()" class="messages" #scrollMe>
<div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of chatMessageStore.message[roomId]; let last = last"
[class.messages-list-item-wrapper-active]="msg._id == selectedMsgId">
<div (press)="handlePress(msg._id)" class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}'>
[class.messages-list-item-wrapper-active]="msg._id == selectedMsgId" >
<div (press)="handlePress(msg._id)" class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}' (click)="openPreview(msg)">
<div class="title">
<ion-label>{{msg.u.name}}</ion-label>
<span class="time">{{showDateDuration(msg._updatedAt)}}</span>
@@ -138,6 +138,7 @@
<button (click)="stopRecording()">Stop Recording</button> -->
<div class="container width-100 d-flex">
<div>
aqui
<button class="btn-no-color" (click)="openChatOptions()">
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-options" src="assets/images/icons-add.svg"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-options" src="assets/images/theme/gov/icons-add.svg"></ion-icon>
@@ -163,4 +164,5 @@
</button>
</div>
</div>
in message!
</ion-footer>
src/app/pages/chat/messages/messages.page.ts
+63 -3
View File
@@ -1,6 +1,6 @@
import { AfterViewChecked, AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { AfterViewChecked, AfterViewInit, ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router'
import { GestureController, Gesture, ModalController, NavParams, PopoverController } from '@ionic/angular';
import { GestureController, Gesture, ModalController, NavParams, PopoverController, IonSlides } from '@ionic/angular';
import { map } from 'rxjs/operators';
import { ViewDocumentPage } from 'src/app/modals/view-document/view-document.page';
import { EventPerson } from 'src/app/models/eventperson.model';
@@ -23,6 +23,7 @@ import { ThemeService } from 'src/app/services/theme.service'
import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
import { VoiceRecorder, VoiceRecorderPlugin, RecordingData, GenericResponse, CurrentRecordingStatus } from 'capacitor-voice-recorder';
import { Haptics, ImpactStyle } from '@capacitor/haptics';
import { PreviewCameraPage } from 'src/app/modals/preview-camera/preview-camera.page';
@Component({
selector: 'app-messages',
@@ -83,7 +84,8 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
private fileService: FileService,
private gestureController: GestureController,
private processes: ProcessesService,
public ThemeService: ThemeService
public ThemeService: ThemeService,
private changeDetectorRef: ChangeDetectorRef
) {
this.loggedUser = authService.ValidatedUserChat['data'];
this.roomId = this.navParams.get('roomId');
@@ -583,4 +585,62 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
});
}
sliderOpts = {
zoom: false,
slidesPerView: 1.5,
spaceBetween: 20,
centeredSlides: true
};
zoomActive = false;
zoomScale = 1;
sliderZoomOpts = {
allowSlidePrev: false,
allowSlideNext: false,
zoom: {
maxRatio: 5
},
on: {
zoomChange: (scale, imageEl, slideEl) => {
this.zoomActive = true;
this.zoomScale = scale/5;
this.changeDetectorRef.detectChanges();
}
}
}
async touchEnd(zoomslides: IonSlides, card) {
// Zoom back to normal
const slider = await zoomslides.getSwiper();
const zoom = slider.zoom;
zoom.out();
// Card back to normal
card.el.style['z-index'] = 9;
this.zoomActive = false;
this.changeDetectorRef.detectChanges();
}
touchStart(card) {
// Make card appear above backdrop
card.el.style['z-index'] = 11;
}
async openPreview(msg) {
const modal = await this.modalController.create({
component: PreviewCameraPage,
cssClass: 'transparent-modal',
componentProps: {
image: msg.attachments[0].image_url,
username: msg.u.username,
_updatedAt: msg._updatedAt
}
});
modal.present();
}
}
src/app/pages/publications/new-publication/new-publication.page.html
+3 -3
View File
@@ -29,7 +29,7 @@
<ion-item lines="none">
<ion-thumbnail slot="start">
<ion-img [(ngModel)]="capturedImage" name="image" ngDefaultControl [src]="photo" ></ion-img>
<ion-img [(ngModel)]="capturedImage" name="image" ngDefaultControl [src]="photo" (click)="openPreview(photo)" ></ion-img>
</ion-thumbnail>
<ion-label>
@@ -58,7 +58,7 @@
</div>
<div class="ion-item-container-no-border">
<ion-label (click)="takePicture()">
<ion-label (click)="takePictures()">
<div class="attach-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>
@@ -79,7 +79,7 @@
<div class="attach-document cursor-pointer">
<ion-label>Anexar Fotografia</ion-label>
</div>
<!-- </ion-label> -->
</ion-label>
</div>
</div>
src/app/pages/publications/new-publication/new-publication.page.ts
+139 -16
View File
@@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { ModalController, NavParams, Platform, LoadingController } from '@ionic/angular';
import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { ModalController, NavParams, Platform, LoadingController, IonSlides } from '@ionic/angular';
/* import {Plugins, CameraResultType, CameraSource} from '@capacitor/core'; */
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
@@ -19,6 +19,7 @@ import { ThemeService } from 'src/app/services/theme.service';
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
import { Filesystem, Directory } from '@capacitor/filesystem';
import { PreviewCameraPage } from 'src/app/modals/preview-camera/preview-camera.page';
const IMAGE_DIR = 'stored-images';
@@ -35,6 +36,9 @@ interface LocalFile {
export class NewPublicationPage implements OnInit {
images: LocalFile[] = [];
files: Set<File>;
photos: any[] = [];
// date picker
public date: any;
public disabled = false;
@@ -70,7 +74,7 @@ export class NewPublicationPage implements OnInit {
capturedImage: any = '';
capturedImageTitle: any;
public photos: any[] = [];
// public photos: any[] = [];
constructor(
private modalController: ModalController,
@@ -83,6 +87,7 @@ export class NewPublicationPage implements OnInit {
public ThemeService: ThemeService,
private platform: Platform,
private loadingCtrl: LoadingController,
private changeDetectorRef: ChangeDetectorRef
) {
this.publicationType = this.navParams.get('publicationType');
@@ -98,6 +103,7 @@ export class NewPublicationPage implements OnInit {
directory: Directory.Data,
recursive: true
});
this.loadPicture()
// this.takePicture();
}
@@ -116,7 +122,7 @@ export class NewPublicationPage implements OnInit {
}
convertBlobToBase64 = (blob: Blob) => new Promise((resolve, reject) => {
convertBlobToBase64s = (blob: Blob) => new Promise((resolve, reject) => {
const reader = new FileReader;
reader.onerror = reject;
reader.onload = () => {
@@ -143,7 +149,7 @@ export class NewPublicationPage implements OnInit {
webviewPath: capturedImage.webPath
});
this.capturedImage = await this.convertBlobToBase64(blob);
this.capturedImage = await this.convertBlobToBase64s(blob);
this.capturedImageTitle = new Date().getTime() + '.jpeg';
}
@@ -388,18 +394,18 @@ private async savePicture(photo: Photo) {
console.log(this.pub, 'pub')
}
}
// async openGallery() {
// const modal = await this.modalController.create({
// component: GalleryPage,
// componentProps:{
// },
// cssClass: 'new-publication',
// backdropDismiss: false
// });
// await modal.present();
// modal.onDidDismiss();
// }
/* async openGallery() {
const modal = await this.modalController.create({
component: GalleryPage,
componentProps:{
},
cssClass: 'new-publication',
backdropDismiss: false
});
await modal.present();
modal.onDidDismiss();
} */
/* async takePicture(){
const image = await Plugins.Camera.getPhoto({
@@ -511,4 +517,121 @@ private async savePicture(photo: Photo) {
this.capturedImage = this.images[0].data
//}
}
sliderOpts = {
zoom: false,
slidesPerView: 1.5,
spaceBetween: 20,
centeredSlides: true
};
zoomActive = false;
zoomScale = 1;
sliderZoomOpts = {
allowSlidePrev: false,
allowSlideNext: false,
zoom: {
maxRatio: 5
},
on: {
zoomChange: (scale, imageEl, slideEl) => {
this.zoomActive = true;
this.zoomScale = scale/5;
this.changeDetectorRef.detectChanges();
}
}
}
async touchEnd(zoomslides: IonSlides, card) {
// Zoom back to normal
const slider = await zoomslides.getSwiper();
const zoom = slider.zoom;
zoom.out();
// Card back to normal
card.el.style['z-index'] = 9;
this.zoomActive = false;
this.changeDetectorRef.detectChanges();
}
touchStart(card) {
// Make card appear above backdrop
card.el.style['z-index'] = 11;
}
async openPreview(photo) {
const modal = await this.modalController.create({
component: PreviewCameraPage,
cssClass: 'transparent-modal',
componentProps: {
image: photo.attachments[0].image_url,
username: photo.u.username,
_updatedAt: photo._updatedAt
}
});
modal.present();
}
async takePictures() {
const capturedImage = await Camera.getPhoto({
quality: 90,
// allowEditing: true,
resultType: CameraResultType.Uri,
source: CameraSource.Camera
});
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);
this.capturedImageTitle = new Date().getTime() + '.jpeg';
let data = {
image:this.capturedImage,
name: this.capturedImageTitle
}
return data;
alert(data)
}
convertBlobToBase64 = (blob: Blob) => new Promise((resolve, reject) => {
const reader = new FileReader;
reader.onerror = reject;
reader.onload = () => {
resolve(reader.result);
};
reader.readAsDataURL(blob);
});
loadPicture() {
const input = this.fileLoaderService.createInput({
accept: ['image/apng', 'image/jpeg', 'image/png']
})
input.onchange = async () => {
const file = this.fileLoaderService.getFirstFile(input)
console.log(file);
const imageData = await this.fileToBase64Service.convert(file)
this.capturedImage = imageData;
this.capturedImageTitle = file.name;
let data = {
image:this.capturedImage,
name: this.capturedImageTitle
}
return data;
console.log(data)
};
}
}