mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-18 20:47:54 +00:00
Websocket with storage
This commit is contained in:
@@ -12,10 +12,11 @@ import { Storage } from '@ionic/storage';
|
||||
export class RoomService {
|
||||
|
||||
massages: MessageService[] = []
|
||||
storageMessage: any[] = [];
|
||||
lastMessage: MessageService;
|
||||
|
||||
chatUser: ChatUserService[] = []
|
||||
customFields:any;
|
||||
customFields: any;
|
||||
id = ''
|
||||
t = ''
|
||||
name = ''
|
||||
@@ -24,16 +25,17 @@ export class RoomService {
|
||||
duration = ''
|
||||
|
||||
private ToastService = ToastsService
|
||||
mgsArray = [];
|
||||
|
||||
scrollDown = () => {}
|
||||
scrollDown = () => { }
|
||||
|
||||
constructor(
|
||||
public WsChatService: WsChatService,
|
||||
private MessageService: MessageService,
|
||||
private storage: Storage,
|
||||
) {}
|
||||
) { }
|
||||
|
||||
setData({customFields, id, name, t, lastMessage, _updatedAt}) {
|
||||
setData({ customFields, id, name, t, lastMessage, _updatedAt }) {
|
||||
this.customFields = customFields
|
||||
this.id = id
|
||||
this.name = name
|
||||
@@ -57,11 +59,11 @@ export class RoomService {
|
||||
const message = new MessageService()
|
||||
message.setData(ChatMessage)
|
||||
this.lastMessage.msg = message.msg
|
||||
if(message.t == 'r'){this.name = message.msg}
|
||||
if (message.t == 'r') { this.name = message.msg }
|
||||
this.calDateDuration(ChatMessage._updatedAt)
|
||||
this.massages.push(message)
|
||||
|
||||
setTimeout(()=>{
|
||||
setTimeout(() => {
|
||||
this.scrollDown()
|
||||
}, 100)
|
||||
|
||||
@@ -74,19 +76,34 @@ export class RoomService {
|
||||
}
|
||||
|
||||
// runs onces only
|
||||
loadHistory(limit= 100) {
|
||||
loadHistory(limit = 100) {
|
||||
|
||||
if(this.hasLoadHistory){ return false}
|
||||
if (this.hasLoadHistory) { return false }
|
||||
|
||||
this.WsChatService.loadHistory(this.id, limit).then(async (chatHistory:chatHistory) => {
|
||||
this.WsChatService.loadHistory(this.id, limit).then(async (chatHistory: chatHistory) => {
|
||||
|
||||
await this.transformData(chatHistory.result.messages.reverse());
|
||||
//await this.transformData(chatHistory.result.messages.reverse());
|
||||
/* console.log('loadHistory 111', chatHistory.result.messages.reverse())
|
||||
this.mgsArray = chatHistory.result.messages.reverse();
|
||||
await this.storage.set('chatmsg', this.mgsArray).then((value) => {
|
||||
console.log('MSG SAVED ON STORAGE', value)
|
||||
}); */
|
||||
|
||||
/* await this.storage.get('chatmsg').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)
|
||||
});
|
||||
}) */
|
||||
chatHistory.result.messages.reverse().forEach(message => {
|
||||
|
||||
message = this.fix_updatedAt(message)
|
||||
console.log('loadHistory', message)
|
||||
|
||||
this.storageMessage.push(message)
|
||||
const wewMessage = new MessageService()
|
||||
wewMessage.setData(message)
|
||||
this.massages.push(wewMessage)
|
||||
@@ -95,18 +112,27 @@ export class RoomService {
|
||||
|
||||
})
|
||||
|
||||
setTimeout(()=>{
|
||||
setTimeout(() => {
|
||||
this.scrollDown()
|
||||
}, 50)
|
||||
|
||||
this.hasLoadHistory = true
|
||||
}
|
||||
|
||||
|
||||
updateMeessage(messageID, imgbase64) {
|
||||
|
||||
}
|
||||
|
||||
async returnData(res) {
|
||||
|
||||
return res;
|
||||
}
|
||||
|
||||
async transformData(res) {
|
||||
|
||||
let mgsArray = [];
|
||||
this.mgsArray = [];
|
||||
res.forEach(async element => {
|
||||
console.log('TRANSFORM DATA ELEMENT' ,element)
|
||||
|
||||
if (element.file) {
|
||||
if (element.file.guid) {
|
||||
@@ -125,11 +151,11 @@ export class RoomService {
|
||||
rid: element.rid,
|
||||
ts: element.ts,
|
||||
u: element.u,
|
||||
_updatedAt: element._updatedAt,
|
||||
_updatedAt: element._updatedAt ,
|
||||
|
||||
}
|
||||
|
||||
mgsArray.push(this.fix_updatedAt(chatmsg));
|
||||
this.mgsArray.push(chatmsg);
|
||||
|
||||
})
|
||||
} else {
|
||||
@@ -146,7 +172,7 @@ export class RoomService {
|
||||
_updatedAt: element._updatedAt,
|
||||
}
|
||||
|
||||
mgsArray.push(this.fix_updatedAt(chatmsg))
|
||||
this.mgsArray.push(chatmsg)
|
||||
}
|
||||
} else {
|
||||
let chatmsg = {
|
||||
@@ -161,20 +187,20 @@ export class RoomService {
|
||||
_updatedAt: element._updatedAt,
|
||||
}
|
||||
|
||||
mgsArray.push(this.fix_updatedAt(chatmsg))
|
||||
this.mgsArray.push(chatmsg)
|
||||
}
|
||||
|
||||
});
|
||||
await this.storage.remove('chatmsg').then(() => {
|
||||
console.log('MSG REMOVE FROM STORAGE')
|
||||
});
|
||||
await this.storage.set('chatmsg', mgsArray).then((value) => {
|
||||
await this.storage.set('chatmsg', this.mgsArray).then((value) => {
|
||||
console.log('MSG SAVED ON STORAGE', value)
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
ReactToMessage() {}
|
||||
ReactToMessage() { }
|
||||
|
||||
private calDateDuration(date = null) {
|
||||
this.duration = showDateDuration(date || this._updatedAt);
|
||||
@@ -182,9 +208,11 @@ export class RoomService {
|
||||
|
||||
|
||||
private fix_updatedAt(message) {
|
||||
if(message.result) {
|
||||
if (message.result) {
|
||||
console.log('FIX UPDATE ', message.result)
|
||||
message.result._updatedAt = message.result._updatedAt['$date']
|
||||
} else{
|
||||
} else {
|
||||
console.log('FIX UPDATE 11', message)
|
||||
message._updatedAt = message._updatedAt['$date']
|
||||
}
|
||||
return message
|
||||
@@ -192,6 +220,6 @@ export class RoomService {
|
||||
|
||||
|
||||
// to add
|
||||
countDownDate(){}
|
||||
countDownDate() { }
|
||||
|
||||
}
|
||||
|
||||
@@ -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,6 +113,7 @@
|
||||
</div>
|
||||
|
||||
<div class='message-item incoming-{{msg.u.username!=loggedUser.me.username}} max-width-45' *ngIf="msg.msg ==''">
|
||||
<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">
|
||||
@@ -140,6 +141,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div *ngIf="msg.file">
|
||||
|
||||
@@ -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,9 +103,17 @@ 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)
|
||||
}) */
|
||||
|
||||
setTimeout(()=>{
|
||||
|
||||
//this.transformData(this.wsChatMethodsService.getDmRoom(this.roomId).massages)
|
||||
//this.getMessageDB()
|
||||
|
||||
|
||||
setTimeout(() => {
|
||||
this.scrollToBottomClicked()
|
||||
}, 50)
|
||||
|
||||
@@ -115,6 +126,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
|
||||
|
||||
}
|
||||
|
||||
|
||||
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 = [];
|
||||
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) {
|
||||
@@ -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);
|
||||
|
||||
@@ -636,11 +753,11 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
|
||||
|
||||
//console.log(this.messages);
|
||||
// Reconnect in one second
|
||||
if(this.route.url != "/home/chat"){
|
||||
if (this.route.url != "/home/chat") {
|
||||
console.log("Timer message stop")
|
||||
}
|
||||
else{
|
||||
if(document.querySelector('app-messages')){
|
||||
else {
|
||||
if (document.querySelector('app-messages')) {
|
||||
await new Promise(resolve => setTimeout(resolve, 5000));
|
||||
// await this.serverLongPull();
|
||||
this.getDirectMessages.emit();
|
||||
@@ -653,6 +770,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
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