mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-19 04:57:52 +00:00
Websocket with storage
This commit is contained in:
Eudes Inácio
@@ -38,7 +38,7 @@
|
||||
</ion-refresher-content>
|
||||
</ion-refresher>
|
||||
<div class="messages" #scrollMe>
|
||||
<div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of messages; let last = last">
|
||||
<div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of wsChatMethodsService.getDmRoom(roomId).massages; let last = last">
|
||||
<div class='message-item incoming-{{msg.u.username!=loggedUser.me.username}} max-width-45' *ngIf="msg.msg !=''">
|
||||
<div class="message-item-options d-flex justify-content-end">
|
||||
<fa-icon [matMenuTriggerFor]="beforeMenu" icon="chevron-down" class="message-options-icon cursor-pointer">
|
||||
@@ -113,30 +113,32 @@
|
||||
</div>
|
||||
|
||||
<div class='message-item incoming-{{msg.u.username!=loggedUser.me.username}} max-width-45' *ngIf="msg.msg ==''">
|
||||
<div *ngIf="msg.file.type == 'application/img'">
|
||||
<div class="message-item-options d-flex justify-content-end">
|
||||
<fa-icon [matMenuTriggerFor]="beforeMenu" icon="chevron-down" class="message-options-icon cursor-pointer">
|
||||
</fa-icon>
|
||||
<mat-menu #beforeMenu="matMenu" xPosition="before">
|
||||
<button (click)="deleteMessage(msg._id)" class="menuButton">Apagar mensagem</button>
|
||||
</mat-menu>
|
||||
</div>
|
||||
<div class="title">
|
||||
<ion-label>{{msg.u.name}}</ion-label>
|
||||
<span class="time">{{showDateDuration(msg._updatedAt)}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<ion-label>{{msg.msg}}</ion-label>
|
||||
<div *ngIf="msg.file" class="message-attachments">
|
||||
<div>
|
||||
<div (click)="openPreview(msg)">
|
||||
<!-- <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image" (click)="imageSize(file.image_url)"> -->
|
||||
TTTT
|
||||
<img *ngIf="msg.file.image_url" src="{{msg.file.image_url}}" alt="image">
|
||||
<div *ngIf="msg.file">
|
||||
<div *ngIf="msg.file.type == 'application/img'">
|
||||
<div class="message-item-options d-flex justify-content-end">
|
||||
<fa-icon [matMenuTriggerFor]="beforeMenu" icon="chevron-down" class="message-options-icon cursor-pointer">
|
||||
</fa-icon>
|
||||
<mat-menu #beforeMenu="matMenu" xPosition="before">
|
||||
<button (click)="deleteMessage(msg._id)" class="menuButton">Apagar mensagem</button>
|
||||
</mat-menu>
|
||||
</div>
|
||||
<div class="title">
|
||||
<ion-label>{{msg.u.name}}</ion-label>
|
||||
<span class="time">{{showDateDuration(msg._updatedAt)}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<ion-label>{{msg.msg}}</ion-label>
|
||||
<div *ngIf="msg.file" class="message-attachments">
|
||||
<div>
|
||||
<div (click)="openPreview(msg)">
|
||||
<!-- <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image" (click)="imageSize(file.image_url)"> -->
|
||||
TTTT
|
||||
<img *ngIf="msg.file.image_url" src="{{msg.file.image_url}}" alt="image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{last ? scrollToBottom() : ''}}
|
||||
</div>
|
||||
{{last ? scrollToBottom() : ''}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -23,8 +23,10 @@ import { StorageService } from 'src/app/services/storage.service';
|
||||
import { Directory, Filesystem } from '@capacitor/filesystem';
|
||||
import { ViewEventPage } from 'src/app/modals/view-event/view-event.page';
|
||||
import { Storage } from '@ionic/storage';
|
||||
import { WsChatMethodsService} from 'src/app/services/chat/ws-chat-methods.service'
|
||||
import { WsChatMethodsService } from 'src/app/services/chat/ws-chat-methods.service'
|
||||
import { WsChatService } from 'src/app/services/chat/ws-chat.service'
|
||||
import { MessageService } from 'src/app/services/chat/message.service';
|
||||
import { element } from 'protractor';
|
||||
|
||||
const IMAGE_DIR = 'stored-images';
|
||||
@Component({
|
||||
@@ -68,6 +70,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
|
||||
longPressActive = false;
|
||||
frameUrl: any;
|
||||
downloadFile: any;
|
||||
massages: MessageService[] = []
|
||||
|
||||
constructor(
|
||||
public popoverController: PopoverController,
|
||||
@@ -100,21 +103,30 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
|
||||
this.wsChatMethodsService.getDmRoom(this.roomId).loadHistory()
|
||||
|
||||
this.wsChatMethodsService.getDmRoom(this.roomId).scrollDown = this.scrollToBottomClicked
|
||||
this.getMessageDB();
|
||||
/* console.log('DATATATA', this.wsChatMethodsService.getDmRoom(this.roomId).massages)
|
||||
this.wsChatMethodsService.getDmRoom(this.roomId).massages.forEach((element) => {
|
||||
console.log('DATATATA 11', element)
|
||||
}) */
|
||||
|
||||
|
||||
//this.transformData(this.wsChatMethodsService.getDmRoom(this.roomId).massages)
|
||||
//this.getMessageDB()
|
||||
|
||||
setTimeout(()=>{
|
||||
|
||||
setTimeout(() => {
|
||||
this.scrollToBottomClicked()
|
||||
}, 50)
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.scrollToBottom();
|
||||
this.setStatus('online');
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
onPressingMessage() {
|
||||
const gesture = this.gestureController.create({
|
||||
el: this.messageContainer.nativeElement,
|
||||
@@ -242,7 +254,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
|
||||
this.message = "";
|
||||
}
|
||||
|
||||
deleteMessage(msgId:string) {
|
||||
deleteMessage(msgId: string) {
|
||||
let body = {
|
||||
"roomId": this.roomId,
|
||||
"msgId": msgId,
|
||||
@@ -254,23 +266,128 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
|
||||
}); */
|
||||
}
|
||||
|
||||
getMessageDB() {
|
||||
this.storage.get('chatmsg').then((msg) => {
|
||||
async getMessageDB() {
|
||||
await this.storage.get('chatmsg').then((message) => {
|
||||
this.transformData(message)
|
||||
/* message.forEach(message => {
|
||||
console.log('FROM DB WEB', message)
|
||||
message = this.fix_updatedAt(message)
|
||||
const wewMessage = new MessageService()
|
||||
wewMessage.setData(message)
|
||||
this.massages.push(wewMessage)
|
||||
console.log('loadHistory 222', this.massages)
|
||||
}); */
|
||||
})
|
||||
/* await this.storage.get('chatmsg').then((msg) => {
|
||||
console.log('FROM DB WEB', msg)
|
||||
let msgArray = [];
|
||||
msgArray = msg;
|
||||
msgArray.filter(data => data._id != this.roomId);
|
||||
this.messages = msgArray;
|
||||
console.log("MSG CHAT WEB", this.messages)
|
||||
})
|
||||
if (msg) {
|
||||
msgArray = msg;
|
||||
msgArray.filter(data => data._id != this.roomId);
|
||||
this.messages = msgArray;
|
||||
console.log("MSG CHAT WEB", this.messages)
|
||||
} else {
|
||||
this.getMessageDB()
|
||||
}
|
||||
|
||||
}) */
|
||||
|
||||
}
|
||||
|
||||
private fix_updatedAt(message) {
|
||||
if (message.result) {
|
||||
console.log('FIX UPDATE ', message.result)
|
||||
message.result._updatedAt = message.result._updatedAt['$date']
|
||||
} else {
|
||||
console.log('FIX UPDATE 11', message)
|
||||
message._updatedAt = message._updatedAt['$date']
|
||||
}
|
||||
return message
|
||||
}
|
||||
|
||||
async transformData(res) {
|
||||
|
||||
|
||||
let mgsArray = [];
|
||||
res.forEach(async element => {
|
||||
console.log('TRANSFORM DATA ELEMENT' ,element)
|
||||
|
||||
if (element.file) {
|
||||
if (element.file.guid) {
|
||||
await this.storage.get(element.file.guid).then((image) => {
|
||||
let chatmsg = {
|
||||
_id: element._id,
|
||||
attachments: element.attachments,
|
||||
channels: element.channels,
|
||||
file: {
|
||||
guid: element.file.guid,
|
||||
image_url: image,
|
||||
type: element.file.type
|
||||
},
|
||||
mentions: element.mentions,
|
||||
msg: element.msg,
|
||||
rid: element.rid,
|
||||
ts: element.ts,
|
||||
u: element.u,
|
||||
_updatedAt: element._updatedAt ,
|
||||
|
||||
}
|
||||
|
||||
mgsArray.push(chatmsg);
|
||||
|
||||
})
|
||||
} else {
|
||||
let chatmsg = {
|
||||
_id: element._id,
|
||||
attachments: element.attachments,
|
||||
channels: element.channels,
|
||||
file: element.file,
|
||||
mentions: element.mentions,
|
||||
msg: element.msg,
|
||||
rid: element.rid,
|
||||
ts: element.ts,
|
||||
u: element.u,
|
||||
_updatedAt: element._updatedAt,
|
||||
}
|
||||
|
||||
mgsArray.push(chatmsg)
|
||||
}
|
||||
} else {
|
||||
let chatmsg = {
|
||||
_id: element._id,
|
||||
attachments: element.attachments,
|
||||
channels: element.channels,
|
||||
mentions: element.mentions,
|
||||
msg: element.msg,
|
||||
rid: element.rid,
|
||||
ts: element.ts,
|
||||
u: element.u,
|
||||
_updatedAt: element._updatedAt,
|
||||
}
|
||||
|
||||
mgsArray.push(chatmsg)
|
||||
}
|
||||
|
||||
});
|
||||
await this.storage.remove('chatmsg').then(() => {
|
||||
console.log('MSG REMOVE FROM STORAGE')
|
||||
});
|
||||
await this.storage.set('chatmsg', mgsArray).then((message) => {
|
||||
message.forEach(message => {
|
||||
console.log('FROM DB WEB', message)
|
||||
message = this.fix_updatedAt(message)
|
||||
const wewMessage = new MessageService()
|
||||
wewMessage.setData(message)
|
||||
this.massages.push(wewMessage)
|
||||
console.log('loadHistory 222', this.massages)
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
/* async transformData(res) {
|
||||
console.log('TRANSFORM DATA', res)
|
||||
let mgsArray = [];
|
||||
res.map(async element => {
|
||||
console.log('TRANSFORM DATA ELEMENT', element)
|
||||
|
||||
if (element.file) {
|
||||
if (element.file.guid) {
|
||||
@@ -309,7 +426,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
|
||||
u: element.u,
|
||||
_updatedAt: element._updatedAt,
|
||||
}
|
||||
|
||||
|
||||
mgsArray.push(chatmsg)
|
||||
}
|
||||
} else {
|
||||
@@ -336,11 +453,11 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
|
||||
console.log('MSG SAVED ON STORAGE', value)
|
||||
});
|
||||
|
||||
}
|
||||
} */
|
||||
|
||||
async viewDocument(msg:any, url?:string){
|
||||
if(msg.file.type == "application/img"){
|
||||
let response:any = await this.fileService.getFile(msg.file.guid).toPromise();
|
||||
async viewDocument(msg: any, url?: string) {
|
||||
if (msg.file.type == "application/img") {
|
||||
let response: any = await this.fileService.getFile(msg.file.guid).toPromise();
|
||||
console.log(response);
|
||||
alert(response);
|
||||
|
||||
@@ -625,34 +742,35 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
|
||||
console.log('serverLongPull', res['success']);
|
||||
|
||||
|
||||
if (res['success'] == true) {
|
||||
// Show Error
|
||||
//showMessage(response.statusText);
|
||||
/* this.messages = res['messages'].reverse();
|
||||
this.chatMessageStore.add(roomId, this.messages) */
|
||||
console.log('MSG FROM ROCKET ', res['messages'].reverse())
|
||||
/* this.transformData(res['messages'].reverse());
|
||||
this.getMessageDB(); */
|
||||
if (res['success'] == true) {
|
||||
// Show Error
|
||||
//showMessage(response.statusText);
|
||||
/* this.messages = res['messages'].reverse();
|
||||
this.chatMessageStore.add(roomId, this.messages) */
|
||||
console.log('MSG FROM ROCKET ', res['messages'].reverse())
|
||||
/* this.transformData(res['messages'].reverse());
|
||||
this.getMessageDB(); */
|
||||
|
||||
//console.log(this.messages);
|
||||
// Reconnect in one second
|
||||
if(this.route.url != "/home/chat"){
|
||||
console.log("Timer message stop")
|
||||
}
|
||||
else{
|
||||
if(document.querySelector('app-messages')){
|
||||
await new Promise(resolve => setTimeout(resolve, 5000));
|
||||
// await this.serverLongPull();
|
||||
this.getDirectMessages.emit();
|
||||
console.log('Timer message running')
|
||||
//console.log(this.messages);
|
||||
// Reconnect in one second
|
||||
if (this.route.url != "/home/chat") {
|
||||
console.log("Timer message stop")
|
||||
}
|
||||
}
|
||||
}
|
||||
}, (error) => {
|
||||
console.log(error);
|
||||
});
|
||||
|
||||
else {
|
||||
if (document.querySelector('app-messages')) {
|
||||
await new Promise(resolve => setTimeout(resolve, 5000));
|
||||
// await this.serverLongPull();
|
||||
this.getDirectMessages.emit();
|
||||
console.log('Timer message running')
|
||||
}
|
||||
}
|
||||
}
|
||||
}, (error) => {
|
||||
console.log(error);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
sliderOpts = {
|
||||
zoom: false,
|
||||
slidesPerView: 1.5,
|
||||
@@ -709,7 +827,9 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
|
||||
} else if (event.type === HttpEventType.Response) {
|
||||
this.downloadFile = 'data:image/jpeg;base64,' + btoa(new Uint8Array(event.body).reduce((data, byte) => data + String.fromCharCode(byte), ''));
|
||||
|
||||
this.storage.set(msg.file.guid, this.downloadFile);
|
||||
await this.storage.set(msg.file.guid, this.downloadFile).then(() => {
|
||||
console.log('IMAGE SAVED')
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
@@ -721,12 +841,13 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
|
||||
async openPreview(msg) {
|
||||
if (msg.file.image_url === null) {
|
||||
this.downloadFileMsg(msg)
|
||||
|
||||
} else {
|
||||
const modal = await this.modalController.create({
|
||||
component: ViewMediaPage,
|
||||
cssClass: 'modal modal-desktop',
|
||||
componentProps: {
|
||||
image: msg.attachments[0].image_url,
|
||||
image: msg.file.image_url,
|
||||
username: msg.u.name,
|
||||
_updatedAt: msg._updatedAt
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user