Merge branch 'developer' of https://bitbucket.org/equilibriumito/gabinete-digital into developer

package-lock.json

@@ -2198,6 +2198,13 @@
       "integrity": "sha512-x7yZ4VdC8n8FNlpRmUFtohNlOZnExvoxZ/6oCvGsV+ec8TJXUsDK/BYi1g+lkPTCUY3EmQIeBOe4PLO6fRJ7qg==",
       "requires": {
         "@types/cordova": "^0.0.34"
+      },
+      "dependencies": {
+        "@types/cordova": {
+          "version": "0.0.34",
+          "resolved": "https://registry.npmjs.org/@types/cordova/-/cordova-0.0.34.tgz",
+          "integrity": "sha1-6nrd907Ow9dimCegw54smt3HPQQ="
+        }
       }
     },
     "@ionic-native/file-path": {
@@ -2221,6 +2228,21 @@
         "@types/cordova": "^0.0.34"
       }
     },
+    "@ionic-native/image-picker": {
+      "version": "5.36.0",
+      "resolved": "https://registry.npmjs.org/@ionic-native/image-picker/-/image-picker-5.36.0.tgz",
+      "integrity": "sha512-6RzK9x3/lnYvCYHeAzZuYejUKIifSnFt79iP2DvSZZ+4bu+a72yvPXx3xtHZZZT4sp4+vgZZNRfBYAJAikx6uw==",
+      "requires": {
+        "@types/cordova": "^0.0.34"
+      },
+      "dependencies": {
+        "@types/cordova": {
+          "version": "0.0.34",
+          "resolved": "https://registry.npmjs.org/@types/cordova/-/cordova-0.0.34.tgz",
+          "integrity": "sha1-6nrd907Ow9dimCegw54smt3HPQQ="
+        }
+      }
+    },
     "@ionic-native/in-app-browser": {
       "version": "5.36.0",
       "resolved": "https://registry.npmjs.org/@ionic-native/in-app-browser/-/in-app-browser-5.36.0.tgz",
@@ -2248,6 +2270,28 @@
       "integrity": "sha512-WIDCeUlX7bCbse/x2Rr7mAIQJnLo18ZWcmsVgSTTBVS7ObU2DBl4ieqRx6y9PAAV+3tNZqMV4JAWDfMiFokpJg==",
       "requires": {
         "@types/cordova": "^0.0.34"
+      },
+      "dependencies": {
+        "@types/cordova": {
+          "version": "0.0.34",
+          "resolved": "https://registry.npmjs.org/@types/cordova/-/cordova-0.0.34.tgz",
+          "integrity": "sha1-6nrd907Ow9dimCegw54smt3HPQQ="
+        }
+      }
+    },
+    "@ionic-native/media-capture": {
+      "version": "5.36.0",
+      "resolved": "https://registry.npmjs.org/@ionic-native/media-capture/-/media-capture-5.36.0.tgz",
+      "integrity": "sha512-JBXZYsiIYO95bycF6EU8JBEai6UXdEx3dLnkXzJSYgYt8ynWceSr7Z/nPeuYfScEiKI3JA5FmaUGUsTkyHXOnw==",
+      "requires": {
+        "@types/cordova": "^0.0.34"
+      },
+      "dependencies": {
+        "@types/cordova": {
+          "version": "0.0.34",
+          "resolved": "https://registry.npmjs.org/@types/cordova/-/cordova-0.0.34.tgz",
+          "integrity": "sha1-6nrd907Ow9dimCegw54smt3HPQQ="
+        }
       }
     },
     "@ionic-native/network": {
@@ -2258,6 +2302,21 @@
         "@types/cordova": "^0.0.34"
       }
     },
+    "@ionic-native/photo-viewer": {
+      "version": "5.36.0",
+      "resolved": "https://registry.npmjs.org/@ionic-native/photo-viewer/-/photo-viewer-5.36.0.tgz",
+      "integrity": "sha512-VVCeDVRHTFLNVZUdvk3P+G4DhL54TGi3My2VBw4E8Kp11Clg4jdNPtMFRcwRoLk40LVB3Qaoq0avf1d5yKIZLw==",
+      "requires": {
+        "@types/cordova": "^0.0.34"
+      },
+      "dependencies": {
+        "@types/cordova": {
+          "version": "0.0.34",
+          "resolved": "https://registry.npmjs.org/@types/cordova/-/cordova-0.0.34.tgz",
+          "integrity": "sha1-6nrd907Ow9dimCegw54smt3HPQQ="
+        }
+      }
+    },
     "@ionic-native/screen-orientation": {
       "version": "5.36.0",
       "resolved": "https://registry.npmjs.org/@ionic-native/screen-orientation/-/screen-orientation-5.36.0.tgz",
@@ -2295,6 +2354,21 @@
         "@types/cordova": "^0.0.34"
       }
     },
+    "@ionic-native/streaming-media": {
+      "version": "5.36.0",
+      "resolved": "https://registry.npmjs.org/@ionic-native/streaming-media/-/streaming-media-5.36.0.tgz",
+      "integrity": "sha512-l4+r3O2VRfEw4if3BLdawNx+tApH+czpVlkz14szAmIvsIVUqKoz6n2xq9hTX5z4uZdKVYLn8l8OnLuuNbCM2A==",
+      "requires": {
+        "@types/cordova": "^0.0.34"
+      },
+      "dependencies": {
+        "@types/cordova": {
+          "version": "0.0.34",
+          "resolved": "https://registry.npmjs.org/@types/cordova/-/cordova-0.0.34.tgz",
+          "integrity": "sha1-6nrd907Ow9dimCegw54smt3HPQQ="
+        }
+      }
+    },
     "@ionic-native/wheel-selector": {
       "version": "5.36.0",
       "resolved": "https://registry.npmjs.org/@ionic-native/wheel-selector/-/wheel-selector-5.36.0.tgz",
@@ -6170,6 +6244,12 @@
         "text-hex": "1.0.x"
       }
     },
+    "com-sarriaroman-photoviewer": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/com-sarriaroman-photoviewer/-/com-sarriaroman-photoviewer-1.2.5.tgz",
+      "integrity": "sha512-VH7Yo8O2qe1ZR7hiZqtiAwsv2FLztEXsA+ksXVIBGEDiY+o5IxOrMb+9g+nGCVMxfxmID3T8GZxpGxAAZXTv2A==",
+      "dev": true
+    },
     "combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -6544,6 +6624,24 @@
         "which": "^2.0.2"
       }
     },
+    "cordova-android-support-gradle-release": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/cordova-android-support-gradle-release/-/cordova-android-support-gradle-release-3.0.1.tgz",
+      "integrity": "sha512-RSW55DkSckmqhX/kjj+a1YeVdy7s/AtlZn6Qa5XMQmmA4Iogq+IF2jvInZqzCF19DbI5YE95AP7VDbRk+DdDRw==",
+      "dev": true,
+      "requires": {
+        "q": "^1.4.1",
+        "semver": "5.6.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "5.6.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.6.0.tgz",
+          "integrity": "sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg==",
+          "dev": true
+        }
+      }
+    },
     "cordova-app-hello-world": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/cordova-app-hello-world/-/cordova-app-hello-world-5.0.0.tgz",
@@ -6914,6 +7012,12 @@
       "integrity": "sha512-UQPFlpk1zL4BY44zGi8RVmYCvcKBCN4Dyf8ovxqGYCC8zR1yhbTRWYDdO9vJdERwbfgWV7+z7FMWiSUfqWm9bQ==",
       "dev": true
     },
+    "cordova-plugin-media-capture": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/cordova-plugin-media-capture/-/cordova-plugin-media-capture-3.0.3.tgz",
+      "integrity": "sha512-pVQOrNM7VAuVUMXibAlMGIArrftHPrRs4dUCoE+e2HEFUp3LmN3Yj539LjdUxcWmz/A/cHC65m9E3DS56YJhcg==",
+      "dev": true
+    },
     "cordova-plugin-mfp": {
       "version": "8.0.2021090603",
       "resolved": "https://registry.npmjs.org/cordova-plugin-mfp/-/cordova-plugin-mfp-8.0.2021090603.tgz",
@@ -8868,6 +8972,18 @@
       "integrity": "sha512-ThmXzl6QIKWFXf4wWw7Q/zpB+VKkz3VM958+5A0sXD4jmR++u7KnGttLksXshVwWr6lvGwUebLYtIyXwS4Ovcg==",
       "dev": true
     },
+    "cordova-plugin-streaming-media": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/cordova-plugin-streaming-media/-/cordova-plugin-streaming-media-2.3.0.tgz",
+      "integrity": "sha512-og7UmXbaWoSrOmo/mZu/c7vKDdUMu2eVrdRMvIJY6qqZ6Fv2BrJvOXm8prVt0xjWqWOMJpQs3DAajX8+N39Cqw==",
+      "dev": true
+    },
+    "cordova-plugin-telerik-imagepicker": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/cordova-plugin-telerik-imagepicker/-/cordova-plugin-telerik-imagepicker-2.3.6.tgz",
+      "integrity": "sha512-guf+BHB7O3g1ll3++d+aOvTGHXwBmqdxBFJTCKKMIGqazlf+Sq3Bsd1tRRswPRxy1MZRlJIe6Arz4pdCCmOigA==",
+      "dev": true
+    },
     "cordova-plugin-whitelist": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/cordova-plugin-whitelist/-/cordova-plugin-whitelist-1.3.5.tgz",

package.json

@@ -46,16 +46,20 @@
     "@ionic-native/file-path": "^5.30.0",
     "@ionic-native/fingerprint-aio": "^4.20.0",
     "@ionic-native/http": "^5.31.1",
+    "@ionic-native/image-picker": "^5.36.0",
     "@ionic-native/in-app-browser": "^5.28.0",
     "@ionic-native/ionic-webview": "^5.35.0",
     "@ionic-native/local-notifications": "^4.20.0",
     "@ionic-native/media": "^5.36.0",
+    "@ionic-native/media-capture": "^5.36.0",
     "@ionic-native/network": "^5.36.0",
+    "@ionic-native/photo-viewer": "^5.36.0",
     "@ionic-native/screen-orientation": "^5.35.0",
     "@ionic-native/splash-screen": "^5.31.1",
     "@ionic-native/sqlite": "^5.36.0",
     "@ionic-native/sqlite-porter": "^4.20.0",
     "@ionic-native/status-bar": "^5.0.0",
+    "@ionic-native/streaming-media": "^5.36.0",
     "@ionic-native/wheel-selector": "^5.31.1",
     "@ionic/angular": "^5.8.4",
     "@ionic/core": "^5.8.1",
@@ -129,7 +133,9 @@
     "@types/jest": "^26.0.24",
     "@types/node": "^12.11.1",
     "codelyzer": "^6.0.0",
+    "com-sarriaroman-photoviewer": "^1.2.5",
     "cordova-android": "^9.1.0",
+    "cordova-android-support-gradle-release": "^3.0.1",
     "cordova-browser": "^6.0.0",
     "cordova-plugin-androidx": "^3.0.0",
     "cordova-plugin-androidx-adapter": "^1.1.3",
@@ -144,6 +150,7 @@
     "cordova-plugin-ionic-keyboard": "^2.2.0",
     "cordova-plugin-ionic-webview": "^5.0.0",
     "cordova-plugin-media": "^5.0.3",
+    "cordova-plugin-media-capture": "^3.0.3",
     "cordova-plugin-mfp": "^8.0.2021031007",
     "cordova-plugin-mfp-jsonstore": "^8.0.2021062408",
     "cordova-plugin-mfp-push": "^8.0.2021062405",
@@ -151,6 +158,8 @@
     "cordova-plugin-screen-orientation": "^3.0.2",
     "cordova-plugin-splashscreen": "^5.0.2",
     "cordova-plugin-statusbar": "^2.4.2",
+    "cordova-plugin-streaming-media": "^2.3.0",
+    "cordova-plugin-telerik-imagepicker": "^2.3.6",
     "cordova-plugin-whitelist": "^1.3.4",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
@@ -186,7 +195,8 @@
       "cordova-plugin-mfp-jsonstore": {},
       "cordova-plugin-ionic-webview": {},
       "cordova-plugin-screen-orientation": {},
-      "cordova-plugin-network-information": {}
+      "cordova-plugin-network-information": {},
+      "cordova-plugin-file": {}
     },
     "platforms": [
       "browser",

src/app/app.module.ts

@@ -58,7 +58,12 @@ import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';
 import { PdfViewerModule } from 'ng2-pdf-viewer';
 import { SQLite } from '@ionic-native/sqlite/ngx';
 import { CookieService } from 'ngx-cookie-service';
-import { AngularSvgIconModule } from 'angular-svg-icon';
+
+import { ImagePicker } from '@ionic-native/image-picker/ngx';
+import { MediaCapture } from '@ionic-native/media-capture/ngx';
+import { Media } from '@ionic-native/media/ngx';
+import { StreamingMedia } from '@ionic-native/streaming-media/ngx';
+import { PhotoViewer } from '@ionic-native/photo-viewer/ngx';
 
 @NgModule({
   declarations: [AppComponent],
@@ -93,7 +98,6 @@ import { AngularSvgIconModule } from 'angular-svg-icon';
     //
     PdfViewerModule,
     HammerModule,
-    AngularSvgIconModule.forRoot()
     ],
   providers: [
     { provide: MAT_DATE_LOCALE, useValue: 'pt' },
@@ -115,7 +119,11 @@ import { AngularSvgIconModule } from 'angular-svg-icon';
     File,
     SQLite,
     CookieService,
-    AngularSvgIconModule
+    ImagePicker,
+    MediaCapture,
+    Media,
+    StreamingMedia,
+    PhotoViewer
   ],
   bootstrap: [AppComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]

src/app/modals/profile/edit-profile/edit-profile.page.html

@@ -72,7 +72,7 @@
               <img style="width: 40px;" src="assets/images/logo-removebg-preview.png"/>
             </div>
 
-            <div class="btn-close d-flex cursor-pointer pr-10" (click)="changeTheme('tribunal')" >
+            <div hidden class="btn-close d-flex cursor-pointer pr-10" (click)="changeTheme('tribunal')" >
               <img style="width: 40px;" src="assets/images/theme/tribunal/tribunal-constitucional-logo.png"/>
             </div>
 

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

@@ -106,7 +106,8 @@
                         <div class="item-title" [class.item-title-active]="group._id ==idSelected">
                           <ion-label>{{group.name.split('-').join(' ')}}</ion-label>
                         </div>
-                        <div class="item-date" [class.item-date-active]="group._id ==idSelected" *ngIf="group.lastMessage">{{showDateDuration(group._updatedAt)}}</div>
+                        <div class="item-date" [class.item-date-active]="group._id ==idSelected" *ngIf="group.lastMessage && !group.customFields.countDownDate">{{showDateDuration(group._updatedAt)}}</div>
+                        <div class="item-date" *ngIf="group.customFields.countDownDate">{{countDownDate(group.customFields.countDownDate, group._id)}}</div>
                       </div>
                       <div *ngIf="group.lastMessage" class="item-description d-flex align-items-center" [class.item-description-active]="group._id ==idSelected">
                         <div class="item-message">{{group.lastMessage.u.name}}: {{group.lastMessage.msg}} </div>

src/app/pages/chat/chat.page.scss

@@ -96,7 +96,7 @@ ion-content{
     margin-top: 10px;
   }
   .item-title{
-      width: calc(100% - 75px);
+      width: calc(100% - 80px);
       float: left;
       font-size: 15px;
       color: var(--title-text-color);
@@ -105,7 +105,7 @@ ion-content{
     color: #fff;
 }
   .item-date{
-    width: 75px;
+    width: 80px;
     float: right;
     font-size: 13px;
     color: #797979;

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

@@ -417,6 +417,10 @@ hideRefreshButton(){
     return this.timeService.showDateDuration(start);
   }
 
+  countDownDate(date:any, roomId:string){
+    return this.timeService.countDownDate(date, roomId);
+  }
+
   async getChatMembers(){
     //return await this.chatService.getMembers(roomId).toPromise();
     this.chatService.getAllUsers().subscribe(res=> {
@@ -429,7 +433,7 @@ hideRefreshButton(){
 
   async getGroups(event?){
     this.result = this.chatService.getAllPrivateGroups().subscribe(async (res:any)=>{
-
+      console.log(res);
     if(res.groups != 200){
 
       this.privateGroups = res.groups;
@@ -441,7 +445,7 @@ hideRefreshButton(){
           var dateB = new Date(b._updatedAt).getTime();
           return dateB - dateA;
         });
-        //console.log(this.allGroups);
+        console.log(this.allGroups);
       /* }); */
       if(this.route.url != "/home/chat"){
         console.log("Timer message stop")

src/app/services/chat.service.ts

@@ -209,8 +209,12 @@ export class ChatService {
 
     /* GROUPS */
     addGroup(body:any){
+      console.log(body);
       return this.http.post(environment.apiChatUrl+'groups.create', body, this.options);
     }
+    setGroupCustomFields(body:any){
+      return this.http.post(environment.apiChatUrl+'groups.setCustomFields', body, this.options);
+    }
 
     getGroupMembers(roomId:string){
       let params = new HttpParams();
@@ -223,6 +227,7 @@ export class ChatService {
       }
       return this.http.get(url, opts);
     }
+
     getChannelMembers(roomId:string){
       let params = new HttpParams();
       let url=environment.apiChatUrl+'channels.members';
@@ -274,9 +279,11 @@ export class ChatService {
       }
       return this.http.post(environment.apiChatUrl+'channels.kick', body, opts);
     }
+
     deleteGroup(body:any){
       return this.http.post(environment.apiChatUrl+'groups.delete', body, this.options);
     }
+
     deleteChannel(body:any){
       return this.http.post(environment.apiChatUrl+'channels.delete', body, this.options);
     }

src/app/services/functions/time.service.ts

@@ -1,11 +1,14 @@
 import { Injectable } from '@angular/core';
+import { ChatService } from '../chat.service';
 
 @Injectable({
   providedIn: 'root'
 })
 export class TimeService {
+  countDownTime: any;
+  room: any;
 
-  constructor() { }
+  constructor(private chatService: ChatService) { }
 
   showDateDuration(start:any){
     let end;
@@ -13,6 +16,7 @@ export class TimeService {
     start = new Date(start);
     let customizedDate;
 
+
     const totalSeconds     = Math.floor((end - (start))/1000);;
     const totalMinutes     = Math.floor(totalSeconds/60);
     const totalHours       = Math.floor(totalMinutes/60);
@@ -37,6 +41,40 @@ export class TimeService {
     }
   }
 
+  countDownDate(date:any, roomId:string){
+    /* let timer = setInterval(() =>{ */
+      console.log('Show TIMER');
+      let difference = new Date(date).getTime() - new Date().getTime();
+      let c_day = Math.floor(difference/(1000*60*60*24));
+      let c_hours = Math.floor((difference % (1000*60*60*24)) / (1000*60*60));
+      let c_minutes = Math.floor((difference % (1000*60*60)) / (1000*60));
+      let c_seconds = Math.floor((difference % (1000*60)) / 1000);
+
+      this.countDownTime = c_day + " : " + c_hours + " : " + c_minutes + " : " + c_seconds ;
+
+      if(difference < 0){
+        //clearInterval(timer);
+        this.countDownTime = "Expired";
+        let body = { "roomId":roomId, }
+        this.chatService.getRoomInfo(roomId).subscribe(room=>{
+          this.room = room['room'];
+
+          if(this.room.t === 'p'){
+            this.chatService.deleteGroup(body).subscribe(res=>{
+              console.log(res);
+            });
+          }
+          else{
+            this.chatService.deleteChannel(body).subscribe(res=>{
+              console.log(res);
+            });
+          }
+        });
+      }
+    //})
+    return this.countDownTime;
+  }
+
   addZero(i) {
     if (i < 10) {
       i = "0" + i;

src/app/shared/chat/group-messages/group-messages.page.html

@@ -23,6 +23,10 @@
           </ion-label>
         </div>
       </div>
+      <div *ngIf="room.customFields.countDownDate" class="d-flex align-items-center yellow-orange pl-10">
+        <i class="far fa-clock font-15" ></i>
+        <ion-label class="font-15 pl-10" color="warning">{{countDownDate(room.customFields.countDownDate, room._id)}}</ion-label>
+      </div>
     </div>
   </ion-toolbar>
 </ion-header>

src/app/shared/chat/group-messages/group-messages.page.ts

@@ -238,9 +238,15 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
     return this.timeService.showDateDuration(start);
   }
 
+  countDownDate(date:any, roomId:string){
+    return this.timeService.countDownDate(date, roomId);
+  }
+
   getRoomInfo(){
     this.showLoader = true;
     this.chatService.getRoomInfo(this.roomId).subscribe(room=>{
+      console.log(room);
+
       this.room = room['room'];
       if(this.room.name){
         this.roomName = this.room.name.split('-').join(' ');

src/app/shared/chat/new-group/new-group.page.html

@@ -20,12 +20,13 @@
     <div class="item-container">
       <ion-input [(ngModel)]="groupName" placeholder="Título"></ion-input>
     </div>
-    <div *ngIf="false" class="item-container-no-border">
+
+    <div *ngIf="true" class="item-container-no-border">
       <ion-checkbox (ionChange)="_ionChange($event)" color="primary"></ion-checkbox>
       <ion-label>Grupo Ultra-secreto</ion-label>
     </div>
-
+   <!--  *ngIf="showDuration" -->
-    <div *ngIf="showDuration" class="container-div">
+    <div  class="container-div">
       <div class="ion-item-class-2">
         <div class="ion-icon-class">
           <ion-icon slot="start" src="assets/images/icons-duration.svg"></ion-icon>
@@ -35,6 +36,11 @@
         </div>
       </div>
     </div>
-    
+    <ion-label>{{displayDuration}}</ion-label>
-  </div>    
+    <br />
+    <ion-label>{{thedate}}</ion-label>
+    <br />
+    <ion-label>{{countDownTime}}</ion-label>
+
+  </div>
 </ion-content>

src/app/shared/chat/new-group/new-group.page.ts

@@ -15,7 +15,10 @@ export class NewGroupPage implements OnInit {
   showLoader: boolean;
   displayDuration: any;
   showDuration: boolean;
+  thedate:any;
+  _day:any;
   selectedDuration = ['','',''];
+  countDownTime:any;
   //groupName:string;
 
   @Input() groupName:string;
@@ -27,8 +30,8 @@ export class NewGroupPage implements OnInit {
     private modalController: ModalController,
     private chatService: ChatService,
     //private navParams: NavParams,
-  ) 
+  )
-  { 
+  {
     this.isGroupCreated = false;
     //this.groupName = this.navParams.get('name');
   }
@@ -37,21 +40,36 @@ export class NewGroupPage implements OnInit {
 
   }
   _ionChange(event){
+    console.log(event);
+    console.log(event.detail.checked);
+
     this.showDuration = event.detail.checked;
+    //this.thedate = new Date(2021, 10, 1, 10, 33, 30, 0);
+    this.thedate = new Date();
+
   }
   close(){
     //this.modalController.dismiss();
     console.log('close');
     this.addGroupMessage.emit();
   }
-  
+
   createGroup(){
     let name = this.groupName.split(' ').join('-');
     let body = { "name":name, }
     this.chatService.addGroup(body).subscribe(res=>{
       console.log('group created');
       console.log(res['group']);
+
       this.addGroupMessage.emit(res['group']._id);
+
+      let countDownBody = {
+        "roomId": res['group']._id,
+        "customFields":{"countDownDate":this.thedate}
+      }
+      this.chatService.setGroupCustomFields(countDownBody).subscribe(res=>{
+        console.log(res);
+      });
     });
   }
 
@@ -60,14 +78,14 @@ export class NewGroupPage implements OnInit {
 
     let name = this.groupName.split(' ').join('-');
     console.log(name);
-    
+
     const modal = await this.modalController.create({
       component: GroupContactsPage,
       componentProps: {
         isCreated:this.isGroupCreated,
         name: name,
         duration:'',
-      }, 
+      },
       cssClass: 'contacts',
       backdropDismiss: false
     });
@@ -75,7 +93,7 @@ export class NewGroupPage implements OnInit {
     await modal.present();
     modal.onDidDismiss();
   }
-  
+
   async setDuration(ev: any) {
     const popover = await this.popoverController.create({
       component: GroupDurationPage,
@@ -90,14 +108,37 @@ export class NewGroupPage implements OnInit {
     const picker = await this.pickerController.create({
       cssClass: '',
       buttons: [
-          { 
+          {
             text: 'Cancelar', role: 'cancel', cssClass: 'btn-cancel'
           },
-          { 
+          {
-            text: 'Ok', 
+            text: 'Ok',
             cssClass: 'btn-cancel',
             handler:(value:any)=>{
               console.log('button done pressed');
+              console.log(value);
+
+              let now = new Date();
+              this.thedate = new Date(now.getFullYear(), now.getMonth(),  now.getDate() + value.days.value, now.getHours() + value.hours.value, now.getMinutes() + value.minutes.value, now.getSeconds(), now.getMilliseconds());
+              /* let timer = setInterval(() =>{
+                console.log('Show TIMER');
+                let difference = this.thedate.getTime() - new Date().getTime();
+                this._day = Math.floor(difference/(1000*60*60*24));
+                let c_day = Math.floor(difference/(1000*60*60*24));
+                let c_hours = Math.floor((difference % (1000*60*60*24)) / (1000*60*60));
+                let c_minutes = Math.floor((difference % (1000*60*60)) / (1000*60));
+                let c_seconds = Math.floor((difference % (1000*60)) / 1000);
+
+                this.countDownTime = c_day + ":" + c_hours + ":" + c_minutes + ":" + c_seconds ;
+
+                if(difference < 0){
+                  clearInterval(timer);
+                  this.countDownTime = "Expired";
+                }
+
+              }) */
+
+
               this.selectedDuration = [
                 value.days.value,
                 value.hours.value,
@@ -108,24 +149,24 @@ export class NewGroupPage implements OnInit {
                 if(value.days.value > 0){
                   if(value.days.value == 1){
                     if(value.hours.value == 1){
-                      this.displayDuration = value.days.value  + " day " +  
+                      this.displayDuration = value.days.value  + " day " +
                       value.hours.value + " hora " +
                       value.minutes.value + " minutos";
                     }
                     else{
-                      this.displayDuration = value.days.value  + " days " + 
+                      this.displayDuration = value.days.value  + " days " +
                       value.hours.value + " horas " +
                       value.minutes.value + " minutos";
                     }
                   }
                   else{
                     if(value.hours.value == 1){
-                      this.displayDuration = value.days.value  + " days " +  
+                      this.displayDuration = value.days.value  + " days " +
                       value.hours.value + " hora " +
                       value.minutes.value + " minutos";
                     }
                     else{
-                      this.displayDuration = value.days.value  + " days " + 
+                      this.displayDuration = value.days.value  + " days " +
                       value.hours.value + " horas " +
                       value.minutes.value + " minutos";
                     }
@@ -141,7 +182,7 @@ export class NewGroupPage implements OnInit {
                     value.minutes.value + " minutos";
                   }
                 }
-              } 
+              }
             },
         },
       ],
@@ -155,6 +196,8 @@ export class NewGroupPage implements OnInit {
             { text: '2', value: 2 },
             { text: '3', value: 3 },
             { text: '4', value: 4 },
+            { text: '5', value: 5 },
+            { text: '6', value: 6 },
           ]
         },
         {
@@ -195,7 +238,7 @@ export class NewGroupPage implements OnInit {
     await picker.present();
     picker.onDidDismiss().then(async data =>{
       let day = await picker.getColumn('days');
-      let hour = await picker.getColumn('hours'); 
+      let hour = await picker.getColumn('hours');
       let minutes = await picker.getColumn('minutes');
     });
 

src/assets/images/icons-duration-countdown.svg

@@ -0,0 +1,13 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <filter id="a">
+            <feColorMatrix in="SourceGraphic" values="0 0 0 0 1.000000 0 0 0 0 0.717647 0 0 0 0 0.011765 0 0 0 1.000000 0"/>
+        </filter>
+    </defs>
+    <g transform="translate(0 -3)" filter="url(#a)" fill="none" fill-rule="evenodd">
+        <g transform="translate(0 3)" stroke="#42B9FE" stroke-width="2">
+            <rect x="4" y="4" width="12" height="12" rx="6"/>
+            <rect x="9.8" y="10.6" width="2" height="1" rx=".5"/>
+        </g>
+    </g>
+</svg>

src/theme/variables.scss

@@ -78,6 +78,7 @@ $app-theme: mat-light-theme(
   --ion-color-warning-contrast-rgb: 0, 0, 0;
   --ion-color-warning-shade: #e0ac08;
   --ion-color-warning-tint: #ffca22;
+  --ion-color-yellow-orange:#ffb703;
 
   /** danger **/
   --ion-color-red: #d30a0a;