Add storage to web chat

src/app/pages/chat/chat.page.ts

@@ -31,6 +31,7 @@ import { TimeService } from 'src/app/services/functions/time.service';
 import { ThemeService } from 'src/app/services/theme.service'
 import { DataService } from 'src/app/services/data.service';
 import { SqliteService } from 'src/app/services/sqlite.service';
+import { StorageService } from 'src/app/services/storage.service';
 
 
 
@@ -122,7 +123,8 @@ export class ChatPage implements OnInit {
     private dataService: DataService,
     private router: Router,
     private sqlservice: SqliteService,
-    private platform: Platform
+    private platform: Platform,
+    private storageservice: StorageService
 
   ) {
     this.loggedUserChat = authService.ValidatedUserChat['data'];
@@ -402,18 +404,36 @@ export class ChatPage implements OnInit {
 
   getDirectMessagesDB() {
     if (this.platform.is('desktop') || this.platform.is('mobileweb')) {
+      this.storageservice.get("rooms").then((rooms) =>{
+        
+        this.userDirectMessages = rooms.sort((a, b) => {
+          var dateA = new Date(a._updatedAt).getTime();
+          var dateB = new Date(b._updatedAt).getTime();
+          return dateB - dateA;
+        });
+        console.log('DIRECTMESSAGE FROM DB', this.userDirectMessages);
+
+        console.log('ROOMS FROM DB', rooms)
+      })
+
+      this.storageservice.get('chatusers').then((users) => {
+        this.dmUsers = users.filter(data => data.username != this.loggedUserChat.me.username);
+      })
     } else {
       this.sqlservice.getAllChatRoom().then((rooms: any) => {
+        console.log('ROOMS FROM DB', rooms)
         let roomsArray = [];
         rooms.forEach(element => {
           let roomListDB = {
             _id: element.Id,
-            uids: JSON.parse(element.Uids),
-            usernames: JSON.parse(element.Usernames),
-            lastMessage: JSON.parse(element.LastMessage),
+            uids: this.isJson(element.Uids),
+            usernames: this.isJson(element.Usernames),
+            lastMessage: this.isJson(element.LastMessage),
             _updatedAt: element.UpdatedAt
           }
-          roomsArray.push(roomListDB)
+          if(element.customFields == "undefined") {
+            roomsArray.push(roomListDB)
+          }
         });
 
         this.userDirectMessages = roomsArray.sort((a, b) => {
@@ -448,6 +468,22 @@ export class ChatPage implements OnInit {
 
   transformDataRoomList(data) {
     if (this.platform.is('desktop') || this.platform.is('mobileweb')) {
+      let roomsArray = [];
+      data.forEach(element => {
+        let roomList = {
+          _id: element._id,
+          uids: element.uids,
+          usernames: element.usernames,
+          lastMessage: element.lastMessage,
+          _updatedAt: element._updatedAt
+        }
+
+        console.log(' Web TRANSFORM ROOM LIST', roomList)
+        roomsArray.push(roomList)
+      });
+
+      this.storageservice.store('rooms', roomsArray);
+
     } else {
       data.forEach(element => {
         let roomList = {
@@ -466,6 +502,18 @@ export class ChatPage implements OnInit {
 
   transformDataUserList(users) {
     if (this.platform.is('desktop') || this.platform.is('mobileweb')) {
+      let usersArray = [];
+      users.forEach(element => {
+        console.log('TRANSFORM USER CHAT 1', element)
+        let chatusers = {
+          _id: element._id,
+          name: element.name,
+          username: element.username
+        }
+        console.log('TRANSFORM USER CHAT 2', chatusers)
+        usersArray.push(chatusers);
+      });
+      this.storageservice.store('chatusers',usersArray);
     } else {
       users.forEach(element => {
         console.log('TRANSFORM USER CHAT 1', element)
@@ -492,13 +540,13 @@ export class ChatPage implements OnInit {
       console.log('Chat list', res);
 
       if (res != 200) {
-        if (this.platform.is('desktop') || this.platform.is('mobileweb')) {
+       /*  if (this.platform.is('desktop') || this.platform.is('mobileweb')) {
           this.userDirectMessages = res.ims.sort((a, b) => {
           var dateA = new Date(a._updatedAt).getTime();
           var dateB = new Date(b._updatedAt).getTime();
           return dateB - dateA;
         });
-        } 
+        }  */
         //console.log(res.ims);
         
         //console.log(this.userDirectMessages);
@@ -540,28 +588,136 @@ export class ChatPage implements OnInit {
       console.log('chatusers', res);
       this.transformDataUserList(res['users'])
 
-      if (this.platform.is('desktop') || this.platform.is('mobileweb')) {
+      /* if (this.platform.is('desktop') || this.platform.is('mobileweb')) {
         this.dmUsers = res['users'].filter(data => data.username != this.loggedUserChat.me.username);
       console.log(this.dmUsers);
-      }
+      } */
 
     });
   }
 
+  getGroupsDB() {
+    if (this.platform.is('desktop') || this.platform.is('mobileweb')) {
+      this.storageservice.get("grouprooms").then((rooms) =>{
+
+
+        this.allGroups = rooms.sort((a, b) => {
+          var dateA = new Date(a._updatedAt).getTime();
+          var dateB = new Date(b._updatedAt).getTime();
+          return dateB - dateA;
+        });
+
+        console.log('GROUPS FROM DB',  this.allGroups)
+      })
+
+      this.storageservice.get('chatusers').then((users) => {
+        this.dmUsers = users.filter(data => data.username != this.loggedUserChat.me.username);
+      })
+    } else {
+      this.sqlservice.getAllChatRoom().then((rooms: any) => {
+        
+        let roomsArray = [];
+        rooms.forEach(element => {
+          let fddf = this.isJson(element.LastMessage);
+          let roomListDB = {
+            _id: element.Id,
+            customFields: this.isJson(element.customFields),
+            name: element.name,
+            lastMessage: this.isJson(element.LastMessage),
+            _updatedAt: element.UpdatedAt
+          }
+          if(element.customFields != "undefined") {
+            roomsArray.push(roomListDB)
+          }
+        });
+
+        this.allGroups = roomsArray.sort((a, b) => {
+          var dateA = new Date(a._updatedAt).getTime();
+          var dateB = new Date(b._updatedAt).getTime();
+          return dateB - dateA;
+        });
+        console.log('Group FROM DB', this.allGroups);
+
+      })
+
+    /*   this.sqlservice.getAllChatUsers().then((userslist: any) => {
+        console.log('USERS FOM DB 1', userslist)
+        let chatusersArray = [];
+        userslist.forEach(element => {
+          console.log('USERS FOM DB 2', element)
+          let userListDB = {
+            _id: element.Id,
+            name: element.Name,
+            username: element.Username
+          }
+
+          chatusersArray.push(userListDB);
+        });
+
+        this.dmUsers = chatusersArray.filter(data => data.username != this.loggedUserChat.me.username);
+
+      }) */
+    }
+
+  }
+
+  transformGroups(data) {
+    if (this.platform.is('desktop') || this.platform.is('mobileweb')) {
+      let groupsArray = [];
+      data.forEach(element => {
+        let roomList = {
+          _id: element._id,
+          uids: element.uids,
+          usernames: element.usernames,
+          name: element.name,
+          customFields: element.customFields,
+          lastMessage: element.lastMessage,
+          _updatedAt: element._updatedAt
+        }
+
+        console.log(' Web TRANSFORM ROOM LIST', roomList)
+        groupsArray.push(roomList)
+      });
+
+      this.storageservice.store('grouprooms', groupsArray);
+
+    } else {
+      data.forEach(element => {
+        let roomList = {
+          id: element._id,
+          uids: element.uids,
+          usernames: element.usernames,
+          customFields: element.customFields,
+          name: element.name,
+          lastMessage: element.lastMessage,
+          updatedat: element._updatedAt
+        }
+
+        console.log('TRANSFORM ROOM LIST', roomList)
+        this.sqlservice.addChatListRoom(roomList);
+      });
+    }
+
+  }
+
   async getGroups(event?) {
     this.result = this.chatService.getAllPrivateGroups().subscribe(async (res: any) => {
       //console.log(res);
       if (res.groups != 200) {
 
+        this.transformGroups(res.groups);
+        this.getGroupsDB();
+
         this.privateGroups = res.groups;
+        console.log('Chat list group' , res);
         /* this.result = this.chatService.getAllUserChannels().subscribe((res:any)=>{
           this.publicGroups = res.channels; */
         //let all = this.privateGroups.concat(this.publicGroups);
-        this.allGroups = this.privateGroups.sort((a, b) => {
+        /* this.allGroups = this.privateGroups.sort((a, b) => {
           var dateA = new Date(a._updatedAt).getTime();
           var dateB = new Date(b._updatedAt).getTime();
           return dateB - dateA;
-        });
+        }); */
         //console.log(this.allGroups);
         /* }); */
         if (this.route.url != "/home/chat") {
@@ -584,6 +740,15 @@ export class ChatPage implements OnInit {
     });
   }
 
+  isJson(str) {
+    try {
+      JSON.parse(str);
+    } catch (e) {
+      return str;
+    }
+    return JSON.parse(str);
+  }
+
   async selectContact() {
     const modal = await this.modalController.create({
       component: ContactsPage,

src/app/pages/chat/messages/messages.page.html

@@ -59,9 +59,10 @@
         <div>
           <ion-label>{{msg.msg}}</ion-label>
           <div *ngIf="msg.attachments" class="message-attachments">
+            <img *ngIf="msg.image_url" src="{{msg.image_url}}" alt="image">
             <div *ngFor="let file of msg.attachments let i = index">
               <div (click)="openPreview(msg)">
-                <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image">
+                <img *ngIf="msg.image_url" src="{{downloadfile}}" alt="image">
               </div>
               <div>
                 <div>

src/app/pages/chat/messages/messages.page.ts

@@ -27,6 +27,7 @@ import { PreviewCameraPage } from 'src/app/modals/preview-camera/preview-camera.
 import { SqliteService } from 'src/app/services/sqlite.service';
 import { elementAt } from 'rxjs-compat/operator/elementAt';
 import { ViewMediaPage } from 'src/app/modals/view-media/view-media.page';
+import { HttpEventType } from '@angular/common/http';
 
 const IMAGE_DIR = 'stored-images';
 
@@ -76,6 +77,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
   duration = 0;
   @ViewChild('recordbtn', { read: ElementRef }) recordBtn: ElementRef;
   myAudio: any;
+  downloadfile: any;
 
   constructor(
     public popoverController: PopoverController,
@@ -551,6 +553,40 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
     });
   }
 
+  /* 
+        this.fileService.downloadFile(element.file.guid).subscribe(async (event) => {
+          var name = element.file.guid;
+          if (event.type === HttpEventType.DownloadProgress) {
+            
+          } else if (event.type === HttpEventType.Response) {
+            var base64 = btoa(new Uint8Array(event.body).reduce((data, byte) => data + String.fromCharCode(byte), '')
+            );
+
+            console.log('TRY ARRAY BUFFER NAME', name);
+            console.log('TRY ARRAY BUFFER', base64);
+
+            await Filesystem.writeFile({
+              path: `${IMAGE_DIR}/${name}`,
+              data: base64,
+              directory: Directory.Data
+            }).then((foo) => {
+
+              console.log('LSKE FS FILE SAVED', foo)
+
+            }).catch((error) => {
+              console.log('error LAKE FS FILE', error)
+            });
+
+          
+
+          const readFile = await Filesystem.readFile({
+            path: `${IMAGE_DIR}/${name}`,
+            directory: Directory.Data,
+          }); 
+          
+          
+        });*/
+
   getRoomMessageDB(roomId) {
     if (this.platform.is('desktop') || this.platform.is('mobileweb')) {
     } else {
@@ -597,6 +633,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
     if (this.platform.is('desktop') || this.platform.is('mobileweb')) {
     } else {
       res.forEach(element => {
+
         let chatmsg = {
           _id: element._id,
           attachments: element.attachments,
@@ -607,10 +644,16 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
           rid: element.rid,
           ts: element.ts,
           u: element.u,
-          _updatedAt: element._updatedAt
+          _updatedAt: element._updatedAt,
+          /* image_url: {
+            name: name,
+            path: `${IMAGE_DIR}/${name}`,
+            data: `data:image/jpeg;base64,${readFile.data}`,
+          }, */
         }
 
         this.sqlservice.addChatMSG(chatmsg)
+
       });
     }