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

Git pull with conflits

Browse Source
This commit is contained in:
Eudes Inácio
2022-03-27 21:03:49 +01:00
parent fa062c2cf5 35d685fc1a
commit 8b31822229
80 changed files with 2615 additions and 1341 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/chat/chat.page.html
+12 -10
View File
@@ -69,16 +69,18 @@
<div *ngIf="room.lastMessage" class="item-description" [class.item-description-active]="room.id == idSelected">
<ion-label *ngIf="room.lastMessage && room.otherUserType == false">{{room.lastMessage.msg}}</ion-label>
<ion-label *ngIf="room.otherUserType == true">A escrever...</ion-label>
<ion-label *ngIf="room.otherUserType == true">está escrever...</ion-label>
<!-- <ion-label *ngIf="room.lastMessage.file">
<fa-icon *ngIf="room.lastMessage.file.type != 'application/meeting'" icon="file-alt" class="file-icon" [class.set-active-item-font-to-white]="room.id == idSelected"></fa-icon>
</ion-label> -->
<div *ngIf="room.lastMessage.file">
<fa-icon *ngIf="room.lastMessage.file.type != 'application/meeting' && room.lastMessage.file.type != 'application/img'" icon="file-alt" class="file-icon" [class.set-active-item-font-to-white]="room.id == idSelected"></fa-icon>
<fa-icon *ngIf="room.lastMessage.file.type != 'application/meeting' && room.lastMessage.file.type != 'application/img' && room.lastMessage.file.type != 'application/audio'" icon="file-alt" class="file-icon" [class.set-active-item-font-to-white]="room.id == idSelected"></fa-icon>
<fa-icon *ngIf="room.lastMessage.file.type == 'application/audio'" icon="file-audio" class="file-icon" [class.set-active-item-font-to-white]="room.id == idSelected"></fa-icon>
<span *ngIf="room.lastMessage.file.type == 'application/audio'"> audio </span>
<fa-icon *ngIf="room.lastMessage.file.type == 'application/meeting'" icon="calendar-alt" class="file-icon" [class.set-active-item-font-to-white]="room.id == idSelected"></fa-icon>
<span> {{room.lastMessage.file.name || room.lastMessage.file.subject }}</span>
<span> {{room.lastMessage.file.name || room.lastMessage.file.subject}}</span>
</div>
<ion-label *ngIf="room.lastMessage.attachments">
@@ -120,8 +122,7 @@
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' && group.id != idSelected " class="icon" slot="start" src="assets/images/theme/gov/icons-chat-group-chat-40.svg"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' && group.id == idSelected " class="icon" slot="start" src="assets/images/theme/gov/icons-chat-group-chat-40-hover.svg"></ion-icon>
</div>
<div
(click)="openGroupMessagesPage(group.id)" class="item-content flex-grow-1 cursor-pointer">
<div (click)="openGroupMessagesPage(group.id)" class="item-content flex-grow-1 cursor-pointer">
<div class="item-title-time">
<div class="item-title" [class.item-title-active]="group.id ==idSelected">
<ion-label>{{group.name.split('-').join(' ')}}</ion-label>
@@ -131,12 +132,13 @@
</div>
<div *ngIf="group.lastMessage" class="item-description d-flex align-items-center" [class.item-description-active]="group.id ==idSelected">
<div class="item-message" *ngIf="group.otherUserType == false">{{group.lastMessage.u.name}}: {{group.lastMessage.msg}} </div>
<div *ngIf="group.otherUserType == true">{{group.userThatIsTyping}} A escrever ...</div>
<div class="item-files add-ellipsis" *ngIf="group.file">
<fa-icon *ngIf="group.lastMessage.file.type != 'application/meeting'" icon="file-alt" class="file-icon" [class.set-active-item-font-to-white]="group.id == idSelected"></fa-icon>
<div *ngIf="group.otherUserType == true">{{group.userThatIsTyping}} está escrever ...</div>
<div class="item-files add-ellipsis" *ngIf="group.lastMessage.file">
<fa-icon *ngIf="group.lastMessage.file.type != 'application/meeting' && group.lastMessage.file.type != 'application/audio'" icon="file-alt" class="file-icon" [class.set-active-item-font-to-white]="group.id == idSelected"></fa-icon>
<fa-icon *ngIf="group.lastMessage.file.type == 'application/audio'" icon="file-audio" class="file-icon" [class.set-active-item-font-to-white]="group.id == idSelected"></fa-icon>
<span *ngIf="group.lastMessage.file.type == 'application/audio'" class="item-files-title"> audio </span>
<fa-icon *ngIf="group.lastMessage.file.type == 'application/meeting'" icon="calendar-alt" class="file-icon" [class.set-active-item-font-to-white]="group.id == idSelected"></fa-icon>
<span class="item-files-title"> {{group.lastMessage.file.name || group.file.subject}}</span>
<span *ngIf="group.lastMessage.file.type != 'application/audio'" class="item-files-title"> {{ group.lastMessage.attachments[0].title }}</span>
</div>
<div class="item-files" *ngIf="group.attachments">
<div *ngIf="group.value.lastMessage.attachments[0].image_url">
src/app/pages/chat/chat.page.ts
-5
View File
@@ -20,7 +20,6 @@ import { NewGroupPage } from './new-group/new-group.page';
import { Storage } from '@ionic/storage';
import { EditGroupPage } from 'src/app/shared/chat/edit-group/edit-group.page';
import * as Rx from "rxjs/Rx";
import { Message } from 'src/app/models/message.model';
import { Observable, Subject } from "rxjs/Rx";
import { NavigationStart, NavigationEnd, Router } from '@angular/router';
import { EventPerson } from 'src/app/models/eventperson.model';
@@ -143,10 +142,6 @@ export class ChatPage implements OnInit {
ngOnInit() {
console.log('Rooms INDIVIDUAIS',this.wsChatMethodsService._dm);
console.log(' ROOMS GROUP',this.wsChatMethodsService._group);
this.segment = "Contactos";
this.authService.userData$.subscribe((res: any) => {
src/app/pages/chat/group-messages/group-messages.module.ts
+3 -1
View File
@@ -16,6 +16,7 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { ImageCropperModule } from 'ngx-image-cropper';
import { AngularCropperjsModule } from 'angular-cropperjs';
import { LettersAvatarModule } from "ngx-letters-avatar";
import { PipesModule } from 'src/app/pipes/pipes.module';
@NgModule({
imports: [
@@ -26,7 +27,8 @@ import { LettersAvatarModule } from "ngx-letters-avatar";
GroupMessagesPageRoutingModule,
ChatPopoverPageModule,
BtnModalDismissPageModule,
LettersAvatarModule
LettersAvatarModule,
PipesModule,
/* ImageCropperModule,
AngularCropperjsModule */
src/app/pages/chat/group-messages/group-messages.page.html
+44 -15
View File
@@ -63,7 +63,8 @@
<span class="time">{{msg.duration}}</span>
</div>
<div class="message">
<ion-label>{{msg.msg}}</ion-label>
<ion-label *ngIf="msg.delate == false">{{msg.msg}}</ion-label>
<ion-label *ngIf="msg.delate == true">{{msg.msg}}</ion-label>
{{last ? scrollToBottom() : ''}}
</div>
</div>
@@ -92,7 +93,7 @@
</div>
</div> -->
<div *ngIf="msg.file">
<div *ngIf="msg.file && msg.delate == false">
<div class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}' class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}' *ngIf="msg.t != 'r' && msg.t != 'ul' && msg.t != 'ru' && msg.file.type != 'application/meeting'" (press)="handlePress(msg._id)">
<div class="title">
<ion-label>{{msg.u.name ?? ""}}</ion-label>
@@ -106,7 +107,7 @@
<ion-icon *ngIf="msg.attachments[0].image_url == null" name="download-outline"></ion-icon>
</div>
<div *ngIf="msg.file.type != 'application/img'">
<div class="file">
<div class="file add-attachment-bg-color" *ngIf="msg.file.type != 'application/audio'">
<div (click)="openPreview(msg)" class="file-details add-ellipsis cursor-pointer" *ngIf="msg.file">
<span *ngIf="msg.file.type">
<fa-icon *ngIf="msg.file.type == 'application/pdf'" icon="file-pdf" class="pdf-icon"></fa-icon>
@@ -117,11 +118,14 @@
<ion-label class="file-title">{{file.title}}</ion-label>
</div>
</div>
<div class="file-details-optional">
<ion-label *ngIf="msg.file">
<div *ngIf="msg.file.type == 'application/audio'">
<audio [src]="file.title_link|safehtml" preload="metadata" class="d-flex width-100" controls controlsList="nodownload noplaybackrate"></audio>
</div>
<div class="file-details-optional add-attachment-bg-color">
<ion-label *ngIf="msg.file && msg.file != ''">
<span *ngIf="file.description">{{file.description}}</span>
<span *ngIf="file.description && msg.file.type != 'application/webtrix'"> • </span>
<span *ngIf="msg.file.type != 'application/webtrix'">{{msg.displayType}}</span>
<span *ngIf="msg.file.type != 'application/webtrix' && msg.file.type != 'application/audio'">{{msg.displayType}}</span>
</ion-label>
</div>
</div>
@@ -137,7 +141,9 @@
<ion-label class="info-meeting-medium"><ion-icon></ion-icon><ion-icon name="location-outline"></ion-icon> {{msg.file.venue}}</ion-label><br />
</div>
</div>
<div *ngIf="msg.file && msg.delate == true">
Apagou a mensagem
</div>
<div *ngIf="msg.t == 'r'" class="info-text">
<ion-label>Alterou o nome do grupo para "{{msg.msg.split('-').join(' ')}}"</ion-label><br />
@@ -187,28 +193,51 @@
</ion-content>
<ion-footer>
<div class="typing" *ngIf="wsChatMethodsService.getGroupRoom(roomId).otherUserType == true" >A escrever...</div>
<div class="typing" *ngIf="wsChatMethodsService.getGroupRoom(roomId).otherUserType == true">
<ngx-letters-avatar *ngIf="showAvatar"
[avatarName]= "wsChatMethodsService.getGroupRoom(roomId).name"
[width]="30"
[circular]="true"
fontFamily="Roboto"></ngx-letters-avatar>
{{ wsChatMethodsService.getGroupRoom(roomId).userThatIsTyping }} está a escrever...
</div>
<div class="width-100 pl-20 pr-20">
<span *ngIf="!lastAudioRecorded">{{durationDisplay}}</span>
<audio [src]="audioRecorded" class="d-flex width-100 mt-10 mb-10" *ngIf="lastAudioRecorded" controls controlsList="nodownload noplaybackrate"></audio>
</div>
<div class="container width-100 d-flex">
<div>
<button class="btn-no-color" (click)="openChatOptions()">
<button *ngIf="!recording && !lastAudioRecorded && allowTyping" 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>
</button>
<button *ngIf="recording || lastAudioRecorded || !allowTyping" class="btn-no-color" (click)="deleteRecording()">
<fa-icon class="icon-size-27" icon="trash"></fa-icon>
</button>
</div>
<div class="message-box width-80">
<ion-item class="ion-no-padding type-message" lines="none">
<ion-textarea autocomplete="on" autocorrect="on" spellcheck="true" clearOnEdit="true" placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="wsChatMethodsService.getGroupRoom(roomId).message" (ionChange)="wsChatMethodsService.getGroupRoom(roomId).sendTyping()"></ion-textarea>
<button hidden class="btn-no-color">
<ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></ion-icon>
<div *ngIf="!recording && !lastAudioRecorded" class="type-message">
<ion-textarea *ngIf="allowTyping" autocomplete="on" autocorrect="on" spellcheck="true" clearOnEdit="true" placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="wsChatMethodsService.getGroupRoom(roomId).message" (ionChange)="wsChatMethodsService.getGroupRoom(roomId).sendTyping()"></ion-textarea>
</div>
<div *ngIf="recording" class="d-flex align-items-center justify-content-center">
<button (click)="stopRecording()" class="btn-no-color d-flex align-items-center justify-content-center">
<ion-icon class="icon-size-45" name="stop-circle-outline" color="danger"></ion-icon>
</button>
</ion-item>
</div>
</div>
<div>
<button #recordbtn *ngIf="!wsChatMethodsService.getGroupRoom(roomId).message && !lastAudioRecorded" (click)="startRecording()" class="btn-no-color">
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-send" src="assets/icon/theme/default/icons-chat-record-audio.svg"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-record-audio.svg"></ion-icon>
</button>
<button *ngIf="wsChatMethodsService.getGroupRoom(roomId).message" class="btn-no-color" (click)="sendMessage()">
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-send" src="assets/icon/icons-chat-send.svg"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
</button>
<button *ngIf="!wsChatMethodsService.getGroupRoom(roomId).message" class="btn-no-color">
<button *ngIf="!wsChatMethodsService.getGroupRoom(roomId).message && lastAudioRecorded" class="btn-no-color" (click)="sendAudio(lastAudioRecorded)">
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
</button>
src/app/pages/chat/group-messages/group-messages.page.scss
+3 -3
View File
@@ -177,7 +177,7 @@
-webkit-overflow-scrolling: touch;
.messages-list-item-wrapper{
overflow: auto;
overflow: hidden;
}
.messages-list-item-wrapper-active{
background: #e6f6ff75 !important;
@@ -357,5 +357,5 @@
.typing ngx-letters-avatar {
padding-left: 10px;
}
padding-right: 5px;
}
src/app/pages/chat/group-messages/group-messages.page.ts
+165 -17
View File
@@ -32,6 +32,9 @@ import { Storage } from '@ionic/storage';
import { CameraService } from 'src/app/services/camera.service';
import { SearchPage } from 'src/app/pages/search/search.page';
import { ProcessesService } from 'src/app/services/processes.service';
import { VoiceRecorder, VoiceRecorderPlugin, RecordingData, GenericResponse, CurrentRecordingStatus } from 'capacitor-voice-recorder';
import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
selector: 'app-group-messages',
@@ -74,6 +77,16 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
@ViewChild('scrollMe') private myScrollContainer: ElementRef;
recording = false;
allowTyping = true;
storedFileNames = [];
lastAudioRecorded = '';
audioRecorded:any = "";
audioDownloaded:any = "";
durationDisplay = '';
duration = 0;
showAvatar = true;
constructor(
private menu: MenuController,
private modalController: ModalController,
@@ -97,8 +110,8 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
private AttachmentsService: AttachmentsService,
private storage: Storage,
private processesService: ProcessesService,
private CameraService: CameraService,
private sanitiser: DomSanitizer,
) {
this.loggedUserChat = authService.ValidatedUserChat['data'];
this.isGroupCreated = true;
@@ -117,6 +130,14 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
this.scrollToBottomClicked()
}, 50)
this.showAvatar = false
setTimeout(() => {
this.scrollToBottomClicked()
this.showAvatar = true
}, 150)
}
ngOnInit() {
@@ -132,6 +153,8 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
this.wsChatMethodsService.getUserOfRoom(this.roomId).then((value) => {
console.log('MEMBER', value)
})
VoiceRecorder.requestAudioRecordingPermission();
//this.loadFiles();
}
setStatus(status: string) {
@@ -145,19 +168,8 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
}
deleteMessage(msgId: string) {
let body = {
"roomId": this.roomId,
"msgId": msgId,
"asUser": false,
}
if (msgId) {
//this.alertService.confirmDeleteMessage(body);
}
else {
this.toastService.badRequest('Não foi possível apagar');
}
this.showMessageOptions = false;
this.selectedMsgId = "";
const room = this.wsChatMethodsService.getGroupRoom(this.roomId)
this.alertService.confirmDeleteMessage(msgId, room);
}
ngAfterViewInit() {
@@ -197,6 +209,106 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
this.currentPosition = scroll;
}
calculateDuration() {
if (!this.recording) {
this.duration = 0;
this.durationDisplay = '';
return;
}
this.duration += 1;
const minutes = Math.floor(this.duration / 60);
const seconds = (this.duration % 60).toString().padStart(2, '0');
this.durationDisplay = `${minutes}:${seconds}`;
setTimeout(() => {
this.calculateDuration();
}, 1000)
}
async getFile(fileName?:any){
const audioFile = await Filesystem.readFile({
path: fileName,
directory: Directory.Data
})
//console.log(audioFile);
const base64sound = audioFile.data;
//Converting base64 to blob
const base64 = await fetch(base64sound);
//console.log(base64);
const base64Response = await fetch(`data:audio/ogg;base64,${base64sound}`);
//console.log(base64Response);
this.audioRecorded = base64Response.url;
console.log(this.audioRecorded);
}
async loadFiles() {
this.storage.get('fileName').then((fileName) => {
this.lastAudioRecorded = fileName;
})
this.storage.get('recordData').then((recordData) => {
console.log(recordData);
if(recordData.value.recordDataBase64.includes('data:audio')){
this.audioRecorded = this.sanitiser.bypassSecurityTrustResourceUrl(recordData.value.recordDataBase64);
}
else{
this.audioRecorded = this.sanitiser.bypassSecurityTrustResourceUrl(`data:${recordData.value.mimeType};base64,${recordData.value.recordDataBase64}`);
}
});
}
startRecording() {
console.log('Recording');
if (this.recording) {
return;
}
this.recording = true;
VoiceRecorder.startRecording();
this.calculateDuration();
}
stopRecording() {
this.deleteRecording();
this.allowTyping = false;
console.log('Stop');
if (!this.recording) {
return;
}
this.recording = false;
VoiceRecorder.stopRecording().then(async (result: RecordingData) => {
console.log(result);
this.recording = false;
if (result.value && result.value.recordDataBase64) {
const recordData = result.value.recordDataBase64;
//console.log(recordData);
const fileName = new Date().getTime() + ".mp3";
//Save file
this.storage.set('fileName',fileName);
this.storage.set('recordData',result).then(() => {
console.log('Audio recorded saved');
})
}
})
setTimeout(async () => {
this.loadFiles();
}, 1000);
}
async deleteRecording(){
this.storage.remove('fileName');
this.storage.remove('recordData');
this.allowTyping = true;
this.lastAudioRecorded = '';
this.loadFiles();
}
async goToEvent(eventId: any) {
let classs;
@@ -268,6 +380,7 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
close() {
this.modalController.dismiss();
this.deleteRecording();
}
doRefresh(ev: any) {
@@ -311,13 +424,48 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
return i;
}
sendMessage() {
this.wsChatMethodsService.getGroupRoom(this.roomId).send({})
}
async sendAudio(fileName) {
const roomId = this.roomId
this.storage.get('recordData').then((recordData) => {
console.log(recordData);
if(recordData.value.recordDataBase64.includes('data:audio')){
this.audioRecorded = recordData.value.recordDataBase64;
}
else{
this.audioRecorded = `data:${recordData.value.mimeType};base64,${recordData.value.recordDataBase64}`;
}
});
//Converting base64 to blob
const base64Response = await fetch(this.audioRecorded);
const blob = await base64Response.blob();
const formData = new FormData();
formData.append("blobFile", blob);
this.wsChatMethodsService.getGroupRoom(roomId).send({
file: {
"type": "application/audio",
/* "guid": '', */
},
attachments: [{
"title": fileName ,
"title_link": this.audioRecorded,
"title_link_download": true,
"type": "file"
}],
temporaryData: formData
})
this.deleteRecording();
}
async openOptions() {
const modal = await this.popoverController.create({
component: ChatPopoverPage,
src/app/pages/chat/messages/messages.page.html
+51 -44
View File
@@ -17,6 +17,8 @@
<!-- <span><ion-icon class="{{users.status}}" name="ellipse"></ion-icon></span> -->
</div>
</div>
<!-- <div (click)="wsChatMethodsService.getDmRoom(roomId).deleteAll()" >delete all</div> -->
<div class="middle-container-options" *ngIf="showMessageOptions">
<fa-icon (click)="deleteMessage(selectedMsgId)" icon="trash" class="middle-container-options-icons"></fa-icon>
<!-- <ion-icon name="trash"></ion-icon> -->
@@ -56,24 +58,14 @@
<span class="time">{{msg.duration}}</span>
</div>
<div>
<ion-label>{{msg.msg}}</ion-label>
{{last ? scrollToBottom() : ''}}
</div>
</div>
<div (press)="handlePress(msg._id)" class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}' (click)="openPreview(msg)" *ngIf="msg.msg !=''">
<div class="title">
<ion-label>{{msg.u.name}}</ion-label>
<span class="time">{{msg.duration}}</span>
</div>
<div>
<ion-label>{{msg.msg}}</ion-label>
<ion-label *ngIf="msg.delate == false">{{msg.msg}}</ion-label>
<ion-label *ngIf="msg.delate == true">{{msg.msg}}</ion-label>
{{last ? scrollToBottom() : ''}}
</div>
</div>
<div *ngIf="msg.file">
<div *ngIf="msg.file && msg.delate == false">
<div (press)="handlePress(msg._id)" class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}' *ngIf="msg.file.type != 'application/meeting'">
<div class="title">
<ion-label>{{msg.u.name}}</ion-label>
@@ -87,8 +79,8 @@
<ion-icon *ngIf="msg.attachments[0].image_url == null" name="download-outline"></ion-icon>
</div>
<div *ngIf="msg.file.type != 'application/img'">
<div class="file">
<div (click)="docIndex(i); openPreview(msg)" class="file-details add-ellipsis cursor-pointer" *ngIf="msg.file">
<div class="file add-attachment-bg-color" *ngIf="msg.file.type != 'application/audio'">
<div (click)="docIndex(i); viewDocument(msg, file.title_link)" class="file-details add-ellipsis cursor-pointer" *ngIf="msg.file">
<span *ngIf="msg.file.type">
<fa-icon *ngIf="msg.file.type == 'application/pdf'" icon="file-pdf" class="pdf-icon"></fa-icon>
<fa-icon *ngIf="msg.file.type == 'application/word'" icon="file-word" class="word-icon"></fa-icon>
@@ -98,11 +90,14 @@
<ion-label class="file-title">{{file.title}}</ion-label>
</div>
</div>
<div class="file-details-optional">
<div *ngIf="msg.file.type == 'application/audio'">
<audio [src]="file.title_link|safehtml" preload="metadata" class="d-flex width-100" controls controlsList="nodownload noplaybackrate"></audio>
</div>
<div class="file-details-optional add-attachment-bg-color">
<ion-label *ngIf="msg.file && msg.file != ''">
<span *ngIf="file.description">{{file.description}}</span>
<span *ngIf="file.description && msg.file.type != 'application/webtrix'"> • </span>
<span *ngIf="msg.file.type != 'application/webtrix'">{{msg.displayType}}</span>
<span *ngIf="msg.file.type != 'application/webtrix' && msg.file.type != 'application/audio'">{{msg.displayType}}</span>
</ion-label>
</div>
</div>
@@ -120,7 +115,7 @@
</div>
<div *ngIf="msg.file">
<div *ngIf="msg.file && msg.delate == false">
<div *ngIf="msg.file.type == 'application/meeting'" class="info-meeting">
<ion-label class="info-meeting-small">{{msg.u.name}} criou esta reunião</ion-label><br />
<button (click)="goToEvent(msg.file.id)" class="btn-no-color info-meeting-normal"><ion-label class="info-meeting-normal">{{msg.file.subject}}</ion-label></button><br />
@@ -129,6 +124,10 @@
</div>
{{last ? scrollToBottom() : ''}}
</div>
<div *ngIf="msg.file && msg.delate == true">
Apagou a mensagem
</div>
</div>
</div>
<ion-fab horizontal="end" vertical="bottom" slot="fixed">
@@ -162,44 +161,52 @@
</ion-toolbar>
</ion-footer> -->
<ion-footer>
<div class="typing" *ngIf="wsChatMethodsService.getDmRoom(roomId).otherUserType == true" >A escrever...</div>
<ion-list hidden>
<ion-item (click)="playFile(storedFileNames)">
{{storedFileNames}}
</ion-item>
<ion-item (click)="playFile(storedFileNames)">
{{storedFileNames}}
</ion-item>
</ion-list>
<audio hidden controls>
<!-- <source src="https://www.tabularium.pt/file-upload/5g6DkyMC4MHcuaDyp/Audio%20record.mp3" type="audio/mpeg"> -->
</audio>
<!-- <button (click)="startRecording()">Start Recording</button>
<button (click)="stopRecording()">Stop Recording</button> -->
<ion-footer >
<div class="typing" *ngIf="wsChatMethodsService.getDmRoom(roomId).otherUserType == true">
<ngx-letters-avatar
[avatarName]= "wsChatMethodsService.getGroupRoom(roomId).name"
[width]="30"
[circular]="true"
fontFamily="Roboto"></ngx-letters-avatar>
está a escrever ...
</div>
<div class="width-100 pl-20 pr-20">
<span *ngIf="!lastAudioRecorded">{{durationDisplay}}</span>
<audio [src]="audioRecorded" class="d-flex width-100 mt-10 mb-10" *ngIf="lastAudioRecorded" controls controlsList="nodownload noplaybackrate"></audio>
</div>
<div class="container width-100 d-flex">
<div>
<button class="btn-no-color" (click)="openChatOptions()">
<button *ngIf="!recording && !lastAudioRecorded && allowTyping" 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>
</button>
<button *ngIf="recording || lastAudioRecorded || !allowTyping" class="btn-no-color" (click)="deleteRecording()">
<fa-icon class="icon-size-27" icon="trash"></fa-icon>
</button>
</div>
<div class="width-70">
<ion-item class="ion-no-padding ion-no-margin type-message" lines="none">
<ion-textarea autocomplete="on" autocorrect="on" spellcheck="true" *ngIf="!recording" clearOnEdit="true" placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="wsChatMethodsService.getDmRoom(roomId).message" (ionChange)="wsChatMethodsService.getDmRoom(roomId).sendTyping()"></ion-textarea>
<ion-textarea autocomplete="on" spellcheck="true" *ngIf="recording" clearOnEdit="true" placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="durationDisplay"></ion-textarea>
<button hidden #recordbtn class="btn-no-color" (click)="notImplemented()">
<ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></ion-icon>
<div class="width-70 message-container">
<div *ngIf="!recording && !lastAudioRecorded" class="type-message">
<ion-textarea *ngIf="allowTyping" autocomplete="on" autocorrect="on" spellcheck="true" clearOnEdit="true" placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="wsChatMethodsService.getDmRoom(roomId).message" (ionChange)="wsChatMethodsService.getDmRoom(roomId).sendTyping()"></ion-textarea>
</div>
<div *ngIf="recording" class="d-flex align-items-center justify-content-center">
<button (click)="stopRecording()" class="btn-no-color d-flex align-items-center justify-content-center">
<ion-icon class="icon-size-45" name="stop-circle-outline" color="danger"></ion-icon>
</button>
</ion-item>
</div>
</div>
<div>
<button *ngIf="wsChatMethodsService.getDmRoom(roomId).message" class="btn-no-color" (click)="sendMessage()">
<button #recordbtn *ngIf="!wsChatMethodsService.getDmRoom(roomId).message && !lastAudioRecorded" (click)="startRecording()" class="btn-no-color">
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-send" src="assets/icon/theme/default/icons-chat-record-audio.svg"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-record-audio.svg"></ion-icon>
</button>
<button *ngIf="wsChatMethodsService.getDmRoom(roomId).message" class="btn-no-color" (click)="sendMessage()" class="btn-no-color">
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
</button>
<button *ngIf="!wsChatMethodsService.getDmRoom(roomId).message" class="btn-no-color">
<button *ngIf="!wsChatMethodsService.getDmRoom(roomId).message && lastAudioRecorded" (click)="sendAudio(lastAudioRecorded)" class="btn-no-color">
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
</button>
src/app/pages/chat/messages/messages.page.scss
+15 -7
View File
@@ -56,9 +56,6 @@
width: calc(100% - 25px);
text-align: right;
/* ion-icon{
font-size: 25px;
} */
.middle-container-options-icons{
color: #0782c9;
font-size: 23px;
@@ -117,6 +114,7 @@
}
}
}
ion-content{
.welcome-text{
/* width: 322px; */
@@ -148,7 +146,7 @@
-webkit-overflow-scrolling: touch;
.messages-list-item-wrapper{
overflow: auto;
overflow: hidden;
}
.messages-list-item-wrapper-active{
background: #e6f6ff75 !important;
@@ -228,7 +226,6 @@
justify-content: center;
justify-content: space-evenly;
align-items: center;
}
.chat-icon-options{
@@ -318,5 +315,16 @@ display: block;
.typing ngx-letters-avatar {
padding-left: 10px;
}
padding-right: 5px;
}
button{
padding: 0px;
border: 0px;
}
button::-moz-focus-inner {
padding: 0px;
border: 0px;
}
src/app/pages/chat/messages/messages.page.ts
+111 -49
View File
@@ -88,7 +88,11 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
LoadedDocument: any = null;
recording = false;
allowTyping = true;
storedFileNames = [];
lastAudioRecorded = '';
audioRecorded:any = "";
audioDownloaded:any = "";
durationDisplay = '';
duration = 0;
@ViewChild('recordbtn', { read: ElementRef }) recordBtn: ElementRef;
@@ -101,6 +105,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
fileSelected?: Blob;
pdfUrl?:string;
base64File: string;
downloadProgess: number;
constructor(
public popoverController: PopoverController,
@@ -129,6 +134,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
private multipleDocumentsPicker: MultipleDocumentsPicker,
private sant: DomSanitizer,
//private file: File
private sanitiser: DomSanitizer,
) {
this.loggedUser = authService.ValidatedUserChat['data'];
this.roomId = this.navParams.get('roomId');
@@ -140,6 +146,8 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
}
};
console.log(this.wsChatMethodsService.getDmRoom(this.roomId).loadHistory({}));
this.wsChatMethodsService.getDmRoom(this.roomId).loadHistory({})
this.wsChatMethodsService.getDmRoom(this.roomId).scrollDown = this.scrollToBottomClicked
this.wsChatMethodsService.openRoom(this.roomId)
@@ -154,15 +162,14 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
this.wsChatMethodsService.getUserOfRoom(this.roomId).then((value) => {
console.log('MEMBER', value)
})
//this.loadFiles();
VoiceRecorder.requestAudioRecordingPermission();
this.getChatMembers();
Filesystem.mkdir({
/* Filesystem.mkdir({
path: IMAGE_DIR,
directory: Directory.Data,
recursive: true
});
}); */
}
ngAfterViewInit() {
@@ -176,11 +183,14 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
onStart: ev => {
Haptics.impact({ style: ImpactStyle.Light })
this.startRecording();
this.calculateDuration();
//this.calculateDuration();
},
onEnd: ev => {
Haptics.impact({ style: ImpactStyle.Light })
this.stopRecording();
/* setTimeout(() => {
this.loadFiles();
}, 500); */
}
}, true);
longpress.enable();
@@ -203,61 +213,73 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
}
async loadFiles() {
Filesystem.readdir({
path: '',
directory: Directory.Data
}).then(result => {
console.log(result);
const temp: any[] = result.files.reverse();
this.storedFileNames = temp[0];
console.log(this.storedFileNames);
this.storage.get('fileName').then((fileName) => {
this.lastAudioRecorded = fileName;
})
this.storage.get('recordData').then((recordData) => {
console.log(recordData);
if(recordData.value.recordDataBase64.includes('data:audio')){
this.audioRecorded = this.sanitiser.bypassSecurityTrustResourceUrl(recordData.value.recordDataBase64);
}
else{
this.audioRecorded = this.sanitiser.bypassSecurityTrustResourceUrl(`data:${recordData.value.mimeType};base64,${recordData.value.recordDataBase64}`);
}
});
}
startRecording() {
console.log('Recording');
if (this.recording) {
return;
}
this.recording = true;
VoiceRecorder.startRecording();
VoiceRecorder.startRecording()
.then((result: GenericResponse) => console.log(result.value))
.catch(error => console.log(error));
this.calculateDuration();
}
stopRecording() {
this.deleteRecording();
this.allowTyping = false;
console.log('Stop');
if (!this.recording) {
return;
}
this.recording = false;
VoiceRecorder.stopRecording().then(async (result: RecordingData) => {
console.log(result);
this.recording = false;
if (result.value && result.value.recordDataBase64) {
const recordData = result.value.recordDataBase64;
console.log(recordData);
this.myAudio = recordData;
const fileName = new Date().getTime() + ".wav";
await Filesystem.writeFile({
path: fileName,
directory: Directory.Data,
data: recordData,
//console.log(recordData);
const fileName = new Date().getTime() + ".mp3";
//Save file
this.storage.set('fileName',fileName);
this.storage.set('recordData',result).then(() => {
console.log('Audio recorded saved');
})
}
})
setTimeout(async () => {
this.loadFiles();
}, 1000);
}
async playFile(fileName?: any) {
const audioFile = await Filesystem.readFile({
path: fileName,
directory: Directory.Data
})
console.log(audioFile);
const base64sound = audioFile.data;
const audioRef = new Audio(`data:audio/aac;base64,${base64sound}`)
audioRef.oncanplaythrough = () => audioRef.play();
audioRef.load();
async deleteRecording(){
this.storage.remove('fileName');
this.storage.remove('recordData');
this.allowTyping = true;
this.lastAudioRecorded = '';
this.loadFiles();
}
handlePress(id?: string) {
this.selectedMsgId = id;
this.showMessageOptions = true;
@@ -269,19 +291,8 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
}
deleteMessage(msgId: string) {
let body = {
"roomId": this.roomId,
"msgId": msgId,
"asUser": false,
}
if (msgId) {
//this.alertService.confirmDeleteMessage(body);
}
else {
this.toastService.badRequest('Não foi possível apagar');
}
this.showMessageOptions = false;
this.selectedMsgId = "";
const room = this.wsChatMethodsService.getDmRoom(this.roomId)
this.alertService.confirmDeleteMessage(msgId, room);
}
@@ -291,6 +302,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
close() {
this.modalController.dismiss();
this.deleteRecording();
}
load() {
@@ -367,6 +379,44 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
this.wsChatMethodsService.getDmRoom(this.roomId).send({})
}
async sendAudio(fileName) {
const roomId = this.roomId
this.storage.get('recordData').then((recordData) => {
console.log(recordData);
if(recordData.value.recordDataBase64.includes('data:audio')){
this.audioRecorded = recordData.value.recordDataBase64;
}
else{
this.audioRecorded = `data:${recordData.value.mimeType};base64,${recordData.value.recordDataBase64}`;
}
});
//Converting base64 to blob
const base64Response = await fetch(this.audioRecorded);
const blob = await base64Response.blob();
const formData = new FormData();
formData.append("blobFile", blob);
this.wsChatMethodsService.getDmRoom(roomId).send({
file: {
"type": "application/audio",
/* "guid": '', */
},
attachments: [{
"title": fileName ,
"title_link": this.audioRecorded,
"title_link_download": true,
"type": "file"
}],
temporaryData: formData
})
this.deleteRecording();
}
viewDocument(msg: any, url?: string) {
console.log(msg)
if (msg.attachments.type == "application/webtrix") {
@@ -405,6 +455,13 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
}
}
/* playSound(url?:any){
alert('here')
console.log(url);
//this.audioDownloaded = this.sanitiser.bypassSecurityTrustResourceUrl(url);
this.audioDownloaded = url;
} */
docIndex(index: number) {
this.dicIndex = index
}
@@ -464,8 +521,6 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
this.chatService.getMembers(this.roomId).subscribe(res => {
this.members = res['members'];
this.dmUsers = res['members'].filter(data => data.username != this.loggedUser.me.username)
console.log(res);
console.log(this.dmUsers);
this.showLoader = false;
});
}
@@ -956,6 +1011,11 @@ fileToBase64 = (blob,filename) => {
}
/* testeDownload(msg: MessageService) {
this.downloadFile = "";
this.AttachmentsService.downloadFileAndStore(msg.file.guid);
} */
downloadFileMsg(msg: MessageService) {
console.log('FILE TYPE', msg.file.type)
@@ -966,7 +1026,8 @@ fileToBase64 = (blob,filename) => {
var name = msg.file.guid;
if (event.type === HttpEventType.DownloadProgress) {
//this.downloadProgess = Math.round((100 * event.loaded) / event.total);
this.downloadProgess = Math.round((100 * event.loaded) / event.total);
console.log(this.downloadProgess)
console.log('FILE TYPE 33', msg.file.type)
} else if (event.type === HttpEventType.Response) {
if (msg.file.type == "application/img") {
@@ -1009,7 +1070,8 @@ fileToBase64 = (blob,filename) => {
console.log(msg);
if (!msg.attachments[0].image_url || msg.attachments[0].image_url === null || msg.attachments[0].image_url === '') {
this.downloadFileMsg(msg)
this.downloadFile(msg)
//this.testDownlod(msg)
} else {
const modal = await this.modalController.create({