Merge branch 'feature/chat' into developer

2026-04-18 12:37:53 +00:00 · 2021-01-15 16:09:41 +01:00
parent ac5238f75e 7e18af8233
commit 8271c3ada1
142 changed files with 4062 additions and 382 deletions
@@ -0,0 +1,91 @@
+# NPM renames .gitignore to .npmignore
+# In order to prevent that, we remove the initial "."
+# And the CLI then renames it
+
+# Using Android gitignore template: https://github.com/github/gitignore/blob/master/Android.gitignore
+
+# Built application files
+*.apk
+*.ap_
+*.aab
+
+# Files for the ART/Dalvik VM
+*.dex
+
+# Java class files
+*.class
+
+# Generated files
+bin/
+gen/
+out/
+release/
+
+# Gradle files
+.gradle/
+build/
+
+# Local configuration file (sdk path, etc)
+local.properties
+
+# Proguard folder generated by Eclipse
+proguard/
+
+# Log Files
+*.log
+
+# Android Studio Navigation editor temp files
+.navigation/
+
+# Android Studio captures folder
+captures/
+
+# IntelliJ
+*.iml
+.idea/workspace.xml
+.idea/tasks.xml
+.idea/gradle.xml
+.idea/assetWizardSettings.xml
+.idea/dictionaries
+.idea/libraries
+# Android Studio 3 in .gitignore file.
+.idea/caches
+.idea/modules.xml
+# Comment next line if keeping position of elements in Navigation Editor is relevant for you
+.idea/navEditor.xml
+
+# Keystore files
+# Uncomment the following lines if you do not want to check your keystore files in.
+#*.jks
+#*.keystore
+
+# External native build folder generated in Android Studio 2.2 and later
+.externalNativeBuild
+
+# Freeline
+freeline.py
+freeline/
+freeline_project_description.json
+
+# fastlane
+fastlane/report.xml
+fastlane/Preview.html
+fastlane/screenshots
+fastlane/test_output
+fastlane/readme.md
+
+# Version control
+vcs.xml
+
+# lint
+lint/intermediates/
+lint/generated/
+lint/outputs/
+lint/tmp/
+# lint/reports/
+
+# Cordova plugins for Capacitor
+capacitor-cordova-android-plugins
+
+# Copied web assets
+app/src/main/assets/public
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="RemoteRepositoriesConfiguration">
+    <remote-repository>
+      <option name="id" value="central" />
+      <option name="name" value="Maven Central repository" />
+      <option name="url" value="https://repo1.maven.org/maven2" />
+    </remote-repository>
+    <remote-repository>
+      <option name="id" value="jboss.community" />
+      <option name="name" value="JBoss Community repository" />
+      <option name="url" value="https://repository.jboss.org/nexus/content/repositories/public/" />
+    </remote-repository>
+    <remote-repository>
+      <option name="id" value="BintrayJCenter" />
+      <option name="name" value="BintrayJCenter" />
+      <option name="url" value="https://jcenter.bintray.com/" />
+    </remote-repository>
+    <remote-repository>
+      <option name="id" value="Google" />
+      <option name="name" value="Google" />
+      <option name="url" value="https://dl.google.com/dl/android/maven2/" />
+    </remote-repository>
+    <remote-repository>
+      <option name="id" value="MavenRepo" />
+      <option name="name" value="MavenRepo" />
+      <option name="url" value="https://repo.maven.apache.org/maven2/" />
+    </remote-repository>
+  </component>
+</project>
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_1_8" project-jdk-name="1.8" project-jdk-type="JavaSDK">
+    <output url="file://$PROJECT_DIR$/build/classes" />
+  </component>
+  <component name="ProjectType">
+    <option name="id" value="Android" />
+  </component>
+</project>
@@ -0,0 +1,2 @@
+/build/*
+!/build/.npmkeep
@@ -0,0 +1,47 @@
+apply plugin: 'com.android.application'
+
+android {
+    compileSdkVersion rootProject.ext.compileSdkVersion
+    defaultConfig {
+        applicationId "com.gpr.gabinetedigital"
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0"
+        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
+    }
+    buildTypes {
+        release {
+            minifyEnabled false
+            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
+        }
+    }
+}
+
+repositories {
+    flatDir{
+        dirs '../capacitor-cordova-android-plugins/src/main/libs', 'libs'
+    }
+}
+
+dependencies {
+    implementation fileTree(include: ['*.jar'], dir: 'libs')
+    implementation "androidx.appcompat:appcompat:$androidxAppCompatVersion"
+    implementation project(':capacitor-android')
+    implementation 'com.android.support:support-v4:28.0.0'
+    testImplementation "junit:junit:$junitVersion"
+    androidTestImplementation "androidx.test.ext:junit:$androidxJunitVersion"
+    androidTestImplementation "androidx.test.espresso:espresso-core:$androidxEspressoCoreVersion"
+    implementation project(':capacitor-cordova-android-plugins')
+}
+
+apply from: 'capacitor.build.gradle'
+
+try {
+    def servicesJSON = file('google-services.json')
+    if (servicesJSON.text) {
+        apply plugin: 'com.google.gms.google-services'
+    }
+} catch(Exception e) {
+    logger.warn("google-services.json not found, google-services plugin not applied. Push Notifications won't work")
+}
@@ -0,0 +1,19 @@
+// DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
+
+android {
+  compileOptions {
+      sourceCompatibility JavaVersion.VERSION_1_8
+      targetCompatibility JavaVersion.VERSION_1_8
+  }
+}
+
+apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
+dependencies {
+
+    implementation "com.android.support:support-v4:27.+"
+}
+
+
+if (hasProperty('postBuildExtras')) {
+  postBuildExtras()
+}
@@ -0,0 +1,21 @@
+# Add project specific ProGuard rules here.
+# You can control the set of applied configuration files using the
+# proguardFiles setting in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}
+
+# Uncomment this to preserve the line number information for
+# debugging stack traces.
+#-keepattributes SourceFile,LineNumberTable
+
+# If you keep the line number information, uncomment this to
+# hide the original source file name.
+#-renamesourcefileattribute SourceFile
@@ -0,0 +1,27 @@
+package com.getcapacitor.myapp;
+
+import android.content.Context;
+
+import androidx.test.platform.app.InstrumentationRegistry;
+import androidx.test.ext.junit.runners.AndroidJUnit4;
+
+import org.junit.Test;
+import org.junit.runner.RunWith;
+
+import static org.junit.Assert.*;
+
+/**
+ * Instrumented test, which will execute on an Android device.
+ *
+ * @see <a href="http://d.android.com/tools/testing">Testing documentation</a>
+ */
+@RunWith(AndroidJUnit4.class)
+public class ExampleInstrumentedTest {
+  @Test
+  public void useAppContext() throws Exception {
+    // Context of the app under test.
+    Context appContext = InstrumentationRegistry.getInstrumentation().getTargetContext();
+
+    assertEquals("com.getcapacitor.app", appContext.getPackageName());
+  }
+}
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="com.gpr.gabinetedigital">
+
+    <application
+        android:allowBackup="true"
+        android:icon="@mipmap/ic_launcher"
+        android:label="@string/app_name"
+        android:roundIcon="@mipmap/ic_launcher_round"
+        android:supportsRtl="true"
+        android:theme="@style/AppTheme">
+
+        <activity
+            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode"
+            android:name="com.gpr.gabinetedigital.MainActivity"
+            android:label="@string/title_activity_main"
+            android:theme="@style/AppTheme.NoActionBarLaunch"
+            android:launchMode="singleTask">
+
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN" />
+                <category android:name="android.intent.category.LAUNCHER" />
+            </intent-filter>
+
+            <intent-filter>
+                <action android:name="android.intent.action.VIEW" />
+                <category android:name="android.intent.category.DEFAULT" />
+                <category android:name="android.intent.category.BROWSABLE" />
+                <data android:scheme="@string/custom_url_scheme" />
+            </intent-filter>
+
+        </activity>
+
+        <provider
+            android:name="androidx.core.content.FileProvider"
+            android:authorities="${applicationId}.fileprovider"
+            android:exported="false"
+            android:grantUriPermissions="true">
+            <meta-data
+                android:name="android.support.FILE_PROVIDER_PATHS"
+                android:resource="@xml/file_paths"></meta-data>
+        </provider>
+    </application>
+
+    <!-- Permissions -->
+
+    <uses-permission android:name="android.permission.INTERNET" />
+    <!-- Camera, Photos, input file -->
+    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
+    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
+    <!-- Geolocation API -->
+    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
+    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
+    <uses-feature android:name="android.hardware.location.gps" />
+    <!-- Network API -->
+    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
+    <!-- Navigator.getUserMedia -->
+    <!-- Video -->
+    <uses-permission android:name="android.permission.CAMERA" />
+    <!-- Audio -->
+    <uses-permission android:name="android.permission.RECORD_AUDIO" />
+    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
+</manifest>
@@ -0,0 +1,20 @@
+{
+  "appId": "com.gpr.gabinetedigital",
+  "appName": "gabinete-digital",
+  "webDir": "www",
+  "npmClient": "npm",
+  "cordova": {
+    "preferences": {
+      "ScrollEnabled": "false",
+      "BackupWebStorage": "none",
+      "SplashMaintainAspectRatio": "true",
+      "FadeSplashScreenDuration": "300",
+      "SplashShowOnlyFirstTime": "false",
+      "SplashScreen": "screen",
+      "SplashScreenDelay": "3000"
+    }
+  },
+  "android": {
+    "allowMixedContent": true
+  }
+}
@@ -0,0 +1,21 @@
+package com.gpr.gabinetedigital;
+
+import android.os.Bundle;
+
+import com.getcapacitor.BridgeActivity;
+import com.getcapacitor.Plugin;
+
+import java.util.ArrayList;
+
+public class MainActivity extends BridgeActivity {
+  @Override
+  public void onCreate(Bundle savedInstanceState) {
+    super.onCreate(savedInstanceState);
+
+    // Initializes the Bridge
+    this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
+      // Additional plugins you've installed go here
+      // Ex: add(TotallyAwesomePlugin.class);
+    }});
+  }
+}
@@ -0,0 +1,34 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportHeight="108"
+    android:viewportWidth="108">
+    <path
+        android:fillType="evenOdd"
+        android:pathData="M32,64C32,64 38.39,52.99 44.13,50.95C51.37,48.37 70.14,49.57 70.14,49.57L108.26,87.69L108,109.01L75.97,107.97L32,64Z"
+        android:strokeColor="#00000000"
+        android:strokeWidth="1">
+        <aapt:attr name="android:fillColor">
+            <gradient
+                android:endX="78.5885"
+                android:endY="90.9159"
+                android:startX="48.7653"
+                android:startY="61.0927"
+                android:type="linear">
+                <item
+                    android:color="#44000000"
+                    android:offset="0.0" />
+                <item
+                    android:color="#00000000"
+                    android:offset="1.0" />
+            </gradient>
+        </aapt:attr>
+    </path>
+    <path
+        android:fillColor="#FFFFFF"
+        android:fillType="nonZero"
+        android:pathData="M66.94,46.02L66.94,46.02C72.44,50.07 76,56.61 76,64L32,64C32,56.61 35.56,50.11 40.98,46.06L36.18,41.19C35.45,40.45 35.45,39.3 36.18,38.56C36.91,37.81 38.05,37.81 38.78,38.56L44.25,44.05C47.18,42.57 50.48,41.71 54,41.71C57.48,41.71 60.78,42.57 63.68,44.05L69.11,38.56C69.84,37.81 70.98,37.81 71.71,38.56C72.44,39.3 72.44,40.45 71.71,41.19L66.94,46.02ZM62.94,56.92C64.08,56.92 65,56.01 65,54.88C65,53.76 64.08,52.85 62.94,52.85C61.8,52.85 60.88,53.76 60.88,54.88C60.88,56.01 61.8,56.92 62.94,56.92ZM45.06,56.92C46.2,56.92 47.13,56.01 47.13,54.88C47.13,53.76 46.2,52.85 45.06,52.85C43.92,52.85 43,53.76 43,54.88C43,56.01 43.92,56.92 45.06,56.92Z"
+        android:strokeColor="#00000000"
+        android:strokeWidth="1" />
+</vector>
@@ -0,0 +1,170 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportHeight="108"
+    android:viewportWidth="108">
+    <path
+        android:fillColor="#26A69A"
+        android:pathData="M0,0h108v108h-108z" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M9,0L9,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,0L19,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M29,0L29,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M39,0L39,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M49,0L49,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M59,0L59,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M69,0L69,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M79,0L79,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M89,0L89,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M99,0L99,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,9L108,9"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,19L108,19"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,29L108,29"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,39L108,39"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,49L108,49"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,59L108,59"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,69L108,69"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,79L108,79"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,89L108,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,99L108,99"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,29L89,29"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,39L89,39"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,49L89,49"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,59L89,59"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,69L89,69"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,79L89,79"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M29,19L29,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M39,19L39,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M49,19L49,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M59,19L59,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M69,19L69,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M79,19L79,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+</vector>
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    tools:context=".MainActivity">
+
+    <WebView
+        android:layout_width="match_parent"
+        android:layout_height="match_parent" />
+</androidx.coordinatorlayout.widget.CoordinatorLayout>
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="ic_launcher_background">#FFFFFF</color>
+</resources>
@@ -0,0 +1,7 @@
+<?xml version='1.0' encoding='utf-8'?>
+<resources>
+    <string name="app_name">gabinete-digital</string>
+    <string name="title_activity_main">gabinete-digital</string>
+    <string name="package_name">com.gpr.gabinetedigital</string>
+    <string name="custom_url_scheme">com.gpr.gabinetedigital</string>
+</resources>
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <!-- Base application theme. -->
+    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
+        <!-- Customize your theme here. -->
+        <item name="colorPrimary">@color/colorPrimary</item>
+        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
+        <item name="colorAccent">@color/colorAccent</item>
+    </style>
+
+    <style name="AppTheme.NoActionBar" parent="Theme.AppCompat.NoActionBar">
+        <item name="windowActionBar">false</item>
+        <item name="windowNoTitle">true</item>
+        <item name="android:background">@null</item>
+    </style>
+
+
+    <style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
+        <item name="android:background">@drawable/splash</item>
+    </style>
+</resources>
@@ -0,0 +1,49 @@
+<?xml version='1.0' encoding='utf-8'?>
+<widget version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+  <access origin="*" />
+  
+  <feature name="Camera">
+    <param name="android-package" value="org.apache.cordova.camera.CameraLauncher"/>
+  </feature>
+
+  <feature name="File">
+    <param name="android-package" value="org.apache.cordova.file.FileUtils"/>
+    <param name="onload" value="true"/>
+  </feature>
+
+  <feature name="FilePath">
+    <param name="android-package" value="com.hiddentao.cordova.filepath.FilePath"/>
+    <param name="onload" value="true"/>
+  </feature>
+
+  <feature name="SQLitePlugin">
+    <param name="android-package" value="io.sqlc.SQLitePlugin"/>
+  </feature>
+
+  <feature name="Device">
+    <param name="android-package" value="org.apache.cordova.device.Device"/>
+  </feature>
+
+  <feature name="InAppBrowser">
+    <param name="android-package" value="org.apache.cordova.inappbrowser.InAppBrowser"/>
+  </feature>
+
+  <feature name="StatusBar">
+    <param name="android-package" value="org.apache.cordova.statusbar.StatusBar"/>
+    <param name="onload" value="true"/>
+  </feature>
+
+  <feature name="Whitelist">
+    <param name="android-package" value="org.apache.cordova.whitelist.WhitelistPlugin"/>
+    <param name="onload" value="true"/>
+  </feature>
+
+  
+  <preference name="ScrollEnabled" value="false" />
+  <preference name="BackupWebStorage" value="none" />
+  <preference name="SplashMaintainAspectRatio" value="true" />
+  <preference name="FadeSplashScreenDuration" value="300" />
+  <preference name="SplashShowOnlyFirstTime" value="false" />
+  <preference name="SplashScreen" value="screen" />
+  <preference name="SplashScreenDelay" value="3000" />
+</widget>
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<paths xmlns:android="http://schemas.android.com/apk/res/android">
+    <external-path name="my_images" path="." />
+    <cache-path name="my_cache_images" path="." />
+</paths>
@@ -0,0 +1,17 @@
+package com.getcapacitor.myapp;
+
+import org.junit.Test;
+
+import static org.junit.Assert.*;
+
+/**
+ * Example local unit test, which will execute on the development machine (host).
+ *
+ * @see <a href="http://d.android.com/tools/testing">Testing documentation</a>
+ */
+public class ExampleUnitTest {
+  @Test
+  public void addition_isCorrect() throws Exception {
+    assertEquals(4, 2 + 2);
+  }
+}
@@ -0,0 +1,29 @@
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+
+buildscript {
+    
+    repositories {
+        google()
+        jcenter()
+    }
+    dependencies {
+        classpath 'com.android.tools.build:gradle:4.0.1'
+        classpath 'com.google.gms:google-services:4.3.3'
+
+        // NOTE: Do not place your application dependencies here; they belong
+        // in the individual module build.gradle files
+    }
+}
+
+apply from: "variables.gradle"
+
+allprojects {
+    repositories {
+        google()
+        jcenter()
+    }
+}
+
+task clean(type: Delete) {
+    delete rootProject.buildDir
+}
@@ -0,0 +1,3 @@
+// DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
+include ':capacitor-android'
+project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor')
@@ -0,0 +1,24 @@
+# Project-wide Gradle settings.
+
+# IDE (e.g. Android Studio) users:
+# Gradle settings configured through the IDE *will override*
+# any settings specified in this file.
+
+# For more details on how to configure your build environment visit
+# http://www.gradle.org/docs/current/userguide/build_environment.html
+
+# Specifies the JVM arguments used for the daemon process.
+# The setting is particularly useful for tweaking memory settings.
+org.gradle.jvmargs=-Xmx1536m
+
+# When configured, Gradle will run in incubating parallel mode.
+# This option should only be used with decoupled projects. More details, visit
+# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
+# org.gradle.parallel=true
+
+# AndroidX package structure to make it clearer which packages are bundled with the
+# Android operating system, and which are packaged with your app's APK
+# https://developer.android.com/topic/libraries/support-library/androidx-rn
+android.useAndroidX=true
+# Automatically convert third-party libraries to use AndroidX
+android.enableJetifier=true
@@ -0,0 +1,6 @@
+#Fri Jan 15 09:55:16 WAT 2021
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-6.1.1-all.zip
@@ -0,0 +1,188 @@
+#!/usr/bin/env sh
+
+#
+# Copyright 2015 the original author or authors.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+
+##############################################################################
+##
+##  Gradle start up script for UN*X
+##
+##############################################################################
+
+# Attempt to set APP_HOME
+# Resolve links: $0 may be a link
+PRG="$0"
+# Need this for relative symlinks.
+while [ -h "$PRG" ] ; do
+    ls=`ls -ld "$PRG"`
+    link=`expr "$ls" : '.*-> \(.*\)$'`
+    if expr "$link" : '/.*' > /dev/null; then
+        PRG="$link"
+    else
+        PRG=`dirname "$PRG"`"/$link"
+    fi
+done
+SAVED="`pwd`"
+cd "`dirname \"$PRG\"`/" >/dev/null
+APP_HOME="`pwd -P`"
+cd "$SAVED" >/dev/null
+
+APP_NAME="Gradle"
+APP_BASE_NAME=`basename "$0"`
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD="maximum"
+
+warn () {
+    echo "$*"
+}
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+}
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "`uname`" in
+  CYGWIN* )
+    cygwin=true
+    ;;
+  Darwin* )
+    darwin=true
+    ;;
+  MINGW* )
+    msys=true
+    ;;
+  NONSTOP* )
+    nonstop=true
+    ;;
+esac
+
+CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD="$JAVA_HOME/jre/sh/java"
+    else
+        JAVACMD="$JAVA_HOME/bin/java"
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD="java"
+    which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+fi
+
+# Increase the maximum file descriptors if we can.
+if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
+    MAX_FD_LIMIT=`ulimit -H -n`
+    if [ $? -eq 0 ] ; then
+        if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
+            MAX_FD="$MAX_FD_LIMIT"
+        fi
+        ulimit -n $MAX_FD
+        if [ $? -ne 0 ] ; then
+            warn "Could not set maximum file descriptor limit: $MAX_FD"
+        fi
+    else
+        warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
+    fi
+fi
+
+# For Darwin, add options to specify how the application appears in the dock
+if $darwin; then
+    GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
+fi
+
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
+    APP_HOME=`cygpath --path --mixed "$APP_HOME"`
+    CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
+    JAVACMD=`cygpath --unix "$JAVACMD"`
+
+    # We build the pattern for arguments to be converted via cygpath
+    ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
+    SEP=""
+    for dir in $ROOTDIRSRAW ; do
+        ROOTDIRS="$ROOTDIRS$SEP$dir"
+        SEP="|"
+    done
+    OURCYGPATTERN="(^($ROOTDIRS))"
+    # Add a user-defined pattern to the cygpath arguments
+    if [ "$GRADLE_CYGPATTERN" != "" ] ; then
+        OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
+    fi
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    i=0
+    for arg in "$@" ; do
+        CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
+        CHECK2=`echo "$arg"|egrep -c "^-"`                                 ### Determine if an option
+
+        if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then                    ### Added a condition
+            eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
+        else
+            eval `echo args$i`="\"$arg\""
+        fi
+        i=$((i+1))
+    done
+    case $i in
+        (0) set -- ;;
+        (1) set -- "$args0" ;;
+        (2) set -- "$args0" "$args1" ;;
+        (3) set -- "$args0" "$args1" "$args2" ;;
+        (4) set -- "$args0" "$args1" "$args2" "$args3" ;;
+        (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
+        (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
+        (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
+        (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
+        (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
+    esac
+fi
+
+# Escape application args
+save () {
+    for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
+    echo " "
+}
+APP_ARGS=$(save "$@")
+
+# Collect all arguments for the java command, following the shell quoting and substitution rules
+eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
+
+# by default we should be in the correct project dir, but when run from Finder on Mac, the cwd is wrong
+if [ "$(uname)" = "Darwin" ] && [ "$HOME" = "$PWD" ]; then
+  cd "$(dirname "$0")"
+fi
+
+exec "$JAVACMD" "$@"
@@ -0,0 +1,100 @@
+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+
+@if "%DEBUG%" == "" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%" == "" set DIRNAME=.
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if "%ERRORLEVEL%" == "0" goto init
+
+echo.
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto init
+
+echo.
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:init
+@rem Get command-line arguments, handling Windows variants
+
+if not "%OS%" == "Windows_NT" goto win9xME_args
+
+:win9xME_args
+@rem Slurp the command line arguments.
+set CMD_LINE_ARGS=
+set _SKIP=2
+
+:win9xME_args_slurp
+if "x%~1" == "x" goto execute
+
+set CMD_LINE_ARGS=%*
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
+
+:end
+@rem End local scope for the variables with windows NT shell
+if "%ERRORLEVEL%"=="0" goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
+exit /b 1
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega
@@ -0,0 +1,5 @@
+include ':app'
+include ':capacitor-cordova-android-plugins'
+project(':capacitor-cordova-android-plugins').projectDir = new File('./capacitor-cordova-android-plugins/')
+
+apply from: 'capacitor.settings.gradle'
@@ -0,0 +1,17 @@
+ext {
+    minSdkVersion = 21
+    compileSdkVersion = 29
+    targetSdkVersion = 29
+    androidxAppCompatVersion = '1.1.0'
+    androidxCoreVersion =  '1.2.0'
+    androidxMaterialVersion =  '1.1.0-rc02'
+    androidxBrowserVersion =  '1.2.0'
+    androidxLocalbroadcastmanagerVersion =  '1.0.0'
+    androidxExifInterfaceVersion = '1.2.0'
+    firebaseMessagingVersion =  '20.1.2'
+    playServicesLocationVersion =  '17.0.0'
+    junitVersion =  '4.12'
+    androidxJunitVersion =  '1.1.1'
+    androidxEspressoCoreVersion =  '3.2.0'
+    cordovaAndroidVersion =  '7.0.0'
+}
@@ -1 +1,20 @@
-{}
+{
+  "appId": "com.gpr.gabinetedigital",
+  "appName": "gabinete-digital",
+  "webDir": "www",
+  "npmClient": "npm",
+  "cordova": {
+    "preferences": {
+      "ScrollEnabled": "false",
+      "BackupWebStorage": "none",
+      "SplashMaintainAspectRatio": "true",
+      "FadeSplashScreenDuration": "300",
+      "SplashShowOnlyFirstTime": "false",
+      "SplashScreen": "screen",
+      "SplashScreenDelay": "3000"
+    }
+  },
+  "android": {
+    "allowMixedContent": true
+  }
+}
@@ -1,9 +1,7 @@
 {
  "name": "gabinete-digital",
  "integrations": {
-    "capacitor": {
-      "enabled": false
-    },
+    "capacitor": {},
    "cordova": {}
  },
  "type": "angular"
@@ -1920,6 +1920,88 @@
      "resolved": "https://registry.npmjs.org/@capacitor/android/-/android-2.4.0.tgz",
      "integrity": "sha512-5sJicZjtuBRgtmBuV1kvWnIjlu7bnw2TGGp62UXf0ZrjvMUCYSFHBqIHZ8neffW7a3xM5cdGMUlxJ+HfA9ntAg=="
    },
+    "@capacitor/cli": {
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/@capacitor/cli/-/cli-2.4.5.tgz",
+      "integrity": "sha512-nv0IRd3xnif8kIvAFk+ssEkwqZ8n0DvLuB7s0CmtRvMf6Rns02TTYndtV/YkSVja4JbrKb9FrcMd2aLu9KJEIg==",
+      "requires": {
+        "chalk": "^2.3.0",
+        "commander": "^4.1.1",
+        "compare-versions": "^3.1.0",
+        "fs-extra": "^4.0.3",
+        "inquirer": "6.3.1",
+        "open": "^6.1.0",
+        "ora": "^1.3.0",
+        "plist": "^3.0.1",
+        "semver": "^5.4.1",
+        "which": "^1.3.0",
+        "xml2js": "^0.4.19"
+      },
+      "dependencies": {
+        "cli-cursor": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz",
+          "integrity": "sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=",
+          "requires": {
+            "restore-cursor": "^2.0.0"
+          }
+        },
+        "cli-spinners": {
+          "version": "1.3.1",
+          "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-1.3.1.tgz",
+          "integrity": "sha512-1QL4544moEsDVH9T/l6Cemov/37iv1RtoKf7NJ04A60+4MREXNfx/QvavbH6QoGdsD4N4Mwy49cmaINR/o2mdg=="
+        },
+        "log-symbols": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz",
+          "integrity": "sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==",
+          "requires": {
+            "chalk": "^2.0.1"
+          }
+        },
+        "mimic-fn": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz",
+          "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ=="
+        },
+        "onetime": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/onetime/-/onetime-2.0.1.tgz",
+          "integrity": "sha1-BnQoIw/WdEOyeUsiu6UotoZ5YtQ=",
+          "requires": {
+            "mimic-fn": "^1.0.0"
+          }
+        },
+        "ora": {
+          "version": "1.4.0",
+          "resolved": "https://registry.npmjs.org/ora/-/ora-1.4.0.tgz",
+          "integrity": "sha512-iMK1DOQxzzh2MBlVsU42G80mnrvUhqsMh74phHtDlrcTZPK0pH6o7l7DRshK+0YsxDyEuaOkziVdvM3T0QTzpw==",
+          "requires": {
+            "chalk": "^2.1.0",
+            "cli-cursor": "^2.1.0",
+            "cli-spinners": "^1.0.1",
+            "log-symbols": "^2.1.0"
+          }
+        },
+        "restore-cursor": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-2.0.0.tgz",
+          "integrity": "sha1-n37ih/gv0ybU/RYpI9YhKe7g368=",
+          "requires": {
+            "onetime": "^2.0.0",
+            "signal-exit": "^3.0.2"
+          }
+        }
+      }
+    },
+    "@capacitor/core": {
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-2.4.5.tgz",
+      "integrity": "sha512-3GfDAN3s8ajglbn0X6wS+1mtmLwtaBNyvrje3qZ7mzRGVOMWLlOL+n2EeA9IlhMyp8KbQFwXr7gKUk6DjMAKUQ==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
    "@capacitor/ios": {
      "version": "2.4.0",
      "resolved": "https://registry.npmjs.org/@capacitor/ios/-/ios-2.4.0.tgz",
@@ -3362,6 +3444,11 @@
      "integrity": "sha512-hHUXGagefjN2iRrID63xckIvotOXOojhQKWIPUZ4mNUZ9nLZW+7FMNoE1lOkEhNWYsx/7ysGIuJYCiMAA9FnrA==",
      "dev": true
    },
+    "ansi-escapes": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.2.0.tgz",
+      "integrity": "sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ=="
+    },
    "ansi-html": {
      "version": "0.0.7",
      "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz",
@@ -3377,7 +3464,6 @@
      "version": "3.2.1",
      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dev": true,
      "requires": {
        "color-convert": "^1.9.0"
      }
@@ -3655,37 +3741,6 @@
      "integrity": "sha512-3YDiu347mtVtjpyV3u5kVqQLP242c06zwDOgpeRnybmXlYYsLbtTrUBUm8i8srONt+FWobl5aibnU1030PeeuA==",
      "dev": true
    },
-    "axios": {
-      "version": "0.19.2",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
-      "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
-      "requires": {
-        "follow-redirects": "1.5.10"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
-          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "follow-redirects": {
-          "version": "1.5.10",
-          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
-          "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
-          "requires": {
-            "debug": "=3.1.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-        }
-      }
-    },
    "axobject-query": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.0.2.tgz",
@@ -4344,7 +4399,6 @@
      "version": "2.4.2",
      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
      "requires": {
        "ansi-styles": "^3.2.1",
        "escape-string-regexp": "^1.0.5",
@@ -4354,8 +4408,7 @@
    "chardet": {
      "version": "0.7.0",
      "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
-      "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
-      "dev": true
+      "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA=="
    },
    "cheerio": {
      "version": "1.0.0-rc.3",
@@ -4519,8 +4572,7 @@
    "cli-width": {
      "version": "2.2.1",
      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.1.tgz",
-      "integrity": "sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==",
-      "dev": true
+      "integrity": "sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw=="
    },
    "cliui": {
      "version": "5.0.0",
@@ -4672,6 +4724,11 @@
        "delayed-stream": "~1.0.0"
      }
    },
+    "commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA=="
+    },
    "commondir": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
@@ -4681,8 +4738,7 @@
    "compare-versions": {
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/compare-versions/-/compare-versions-3.6.0.tgz",
-      "integrity": "sha512-W6Af2Iw1z4CB7q4uU4hv646dW9GQuBM+YpC0UvUCWSD8w90SJjp+ujJuXaEMtAXBtSqGfMPuFOVn4/+FlaqfBA==",
-      "dev": true
+      "integrity": "sha512-W6Af2Iw1z4CB7q4uU4hv646dW9GQuBM+YpC0UvUCWSD8w90SJjp+ujJuXaEMtAXBtSqGfMPuFOVn4/+FlaqfBA=="
    },
    "component-bind": {
      "version": "1.0.0",
@@ -6533,8 +6589,7 @@
    "escape-string-regexp": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-      "dev": true
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
    },
    "eslint-scope": {
      "version": "4.0.3",
@@ -6784,7 +6839,6 @@
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz",
      "integrity": "sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==",
-      "dev": true,
      "requires": {
        "chardet": "^0.7.0",
        "iconv-lite": "^0.4.24",
@@ -6920,6 +6974,14 @@
      "integrity": "sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==",
      "dev": true
    },
+    "figures": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz",
+      "integrity": "sha1-OrGi0qYsi/tDGgyUy3l6L84nyWI=",
+      "requires": {
+        "escape-string-regexp": "^1.0.5"
+      }
+    },
    "file-loader": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.0.0.tgz",
@@ -7148,6 +7210,16 @@
      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow=="
    },
+    "fs-extra": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-4.0.3.tgz",
+      "integrity": "sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==",
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "jsonfile": "^4.0.0",
+        "universalify": "^0.1.0"
+      }
+    },
    "fs-minipass": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
@@ -7403,8 +7475,7 @@
    "has-flag": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-      "dev": true
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
    },
    "has-symbols": {
      "version": "1.0.1",
@@ -7866,7 +7937,6 @@
      "version": "0.4.24",
      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-      "dev": true,
      "requires": {
        "safer-buffer": ">= 2.1.2 < 3"
      }
@@ -8004,6 +8074,63 @@
      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.7.tgz",
      "integrity": "sha512-iKpRpXP+CrP2jyrxvg1kMUpXDyRUFDWurxbnVT1vQPx+Wz9uCYsMIqYuSBLV+PAaZG/d7kRLKRFc9oDMsH+mFQ=="
    },
+    "inquirer": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-6.3.1.tgz",
+      "integrity": "sha512-MmL624rfkFt4TG9y/Jvmt8vdmOo836U7Y0Hxr2aFk3RelZEGX4Igk0KabWrcaaZaTv9uzglOqWh1Vly+FAWAXA==",
+      "requires": {
+        "ansi-escapes": "^3.2.0",
+        "chalk": "^2.4.2",
+        "cli-cursor": "^2.1.0",
+        "cli-width": "^2.0.0",
+        "external-editor": "^3.0.3",
+        "figures": "^2.0.0",
+        "lodash": "^4.17.11",
+        "mute-stream": "0.0.7",
+        "run-async": "^2.2.0",
+        "rxjs": "^6.4.0",
+        "string-width": "^2.1.0",
+        "strip-ansi": "^5.1.0",
+        "through": "^2.3.6"
+      },
+      "dependencies": {
+        "cli-cursor": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz",
+          "integrity": "sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=",
+          "requires": {
+            "restore-cursor": "^2.0.0"
+          }
+        },
+        "mimic-fn": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz",
+          "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ=="
+        },
+        "mute-stream": {
+          "version": "0.0.7",
+          "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz",
+          "integrity": "sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s="
+        },
+        "onetime": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/onetime/-/onetime-2.0.1.tgz",
+          "integrity": "sha1-BnQoIw/WdEOyeUsiu6UotoZ5YtQ=",
+          "requires": {
+            "mimic-fn": "^1.0.0"
+          }
+        },
+        "restore-cursor": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-2.0.0.tgz",
+          "integrity": "sha1-n37ih/gv0ybU/RYpI9YhKe7g368=",
+          "requires": {
+            "onetime": "^2.0.0",
+            "signal-exit": "^3.0.2"
+          }
+        }
+      }
+    },
    "internal-ip": {
      "version": "4.3.0",
      "resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-4.3.0.tgz",
@@ -8357,8 +8484,7 @@
    "is-wsl": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
-      "integrity": "sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=",
-      "dev": true
+      "integrity": "sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0="
    },
    "isarray": {
      "version": "1.0.0",
@@ -8613,6 +8739,11 @@
        }
      }
    },
+    "jetifier": {
+      "version": "1.6.6",
+      "resolved": "https://registry.npmjs.org/jetifier/-/jetifier-1.6.6.tgz",
+      "integrity": "sha512-JNAkmPeB/GS2tCRqUzRPsTOHpGDah7xP18vGJfIjZC+W2sxEHbxgJxetIjIqhjQ3yYbYNEELkM/spKLtwoOSUQ=="
+    },
    "js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -8696,7 +8827,6 @@
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
      "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
-      "dev": true,
      "requires": {
        "graceful-fs": "^4.1.6"
      }
@@ -10388,6 +10518,14 @@
        "mimic-fn": "^2.1.0"
      }
    },
+    "open": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/open/-/open-6.4.0.tgz",
+      "integrity": "sha512-IFenVPgF70fSm1keSd2iDBIDIBZkroLeuffXq+wKTzTJlBpesFWojV9lb8mzOfaAzM1sr7HQHuO0vtV0zYekGg==",
+      "requires": {
+        "is-wsl": "^1.1.0"
+      }
+    },
    "opn": {
      "version": "5.5.0",
      "resolved": "https://registry.npmjs.org/opn/-/opn-5.5.0.tgz",
@@ -12630,8 +12768,7 @@
    "run-async": {
      "version": "2.4.1",
      "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
-      "integrity": "sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==",
-      "dev": true
+      "integrity": "sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ=="
    },
    "run-parallel": {
      "version": "1.1.9",
@@ -12672,8 +12809,7 @@
    "safer-buffer": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
    },
    "sass": {
      "version": "1.26.3",
@@ -12737,8 +12873,7 @@
    "sax": {
      "version": "1.2.4",
      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
-      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
-      "dev": true
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
    },
    "schema-utils": {
      "version": "2.7.0",
@@ -13867,7 +14002,6 @@
      "version": "5.2.0",
      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
      "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
-      "dev": true,
      "requires": {
        "ansi-regex": "^4.1.0"
      },
@@ -13875,8 +14009,7 @@
        "ansi-regex": {
          "version": "4.1.0",
          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
-          "dev": true
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
        }
      }
    },
@@ -14035,7 +14168,6 @@
      "version": "5.5.0",
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
      "requires": {
        "has-flag": "^3.0.0"
      }
@@ -14298,8 +14430,7 @@
    "through": {
      "version": "2.3.8",
      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
-      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
-      "dev": true
+      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU="
    },
    "through2": {
      "version": "2.0.5",
@@ -14336,7 +14467,6 @@
      "version": "0.0.33",
      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
      "integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==",
-      "dev": true,
      "requires": {
        "os-tmpdir": "~1.0.2"
      }
@@ -14639,8 +14769,7 @@
    "universalify": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
-      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
-      "dev": true
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
    },
    "unorm": {
      "version": "1.6.0",
@@ -15794,7 +15923,6 @@
      "version": "1.3.1",
      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
-      "dev": true,
      "requires": {
        "isexe": "^2.0.0"
      }
@@ -15943,7 +16071,6 @@
      "version": "0.4.23",
      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.23.tgz",
      "integrity": "sha512-ySPiMjM0+pLDftHgXY4By0uswI3SPKLDw/i3UXbnO8M/p28zqexCUoPmQFrYD+/1BzhGJSs2i1ERWKJAtiLrug==",
-      "dev": true,
      "requires": {
        "sax": ">=0.6.0",
        "xmlbuilder": "~11.0.0"
@@ -15952,8 +16079,7 @@
        "xmlbuilder": {
          "version": "11.0.1",
          "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
-          "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==",
-          "dev": true
+          "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA=="
        }
      }
    },
@@ -20,6 +20,8 @@
    "@angular/platform-browser-dynamic": "~9.1.6",
    "@angular/router": "~9.1.6",
    "@capacitor/android": "^2.4.0",
+    "@capacitor/cli": "^2.4.5",
+    "@capacitor/core": "^2.4.5",
    "@capacitor/ios": "^2.4.0",
    "@fullcalendar/angular": "^5.3.0",
    "@fullcalendar/daygrid": "^5.3.0",
@@ -36,7 +38,6 @@
    "@ionic/pwa-elements": "^3.0.1",
    "@ionic/storage": "^2.3.1",
    "@logisticinfotech/ionic4-datepicker": "^1.4.4",
-    "axios": "^0.19.2",
    "cordova-ios": "6.1.0",
    "cordova-plugin-camera": "^5.0.1",
    "cordova-plugin-file": "^6.0.2",
@@ -47,6 +48,7 @@
    "ionic-selectable": "^4.5.0",
    "ionic2-alpha-scroll": "^2.0.1",
    "ionic2-calendar": "^0.6.6",
+    "jetifier": "^1.6.6",
    "moment": "^2.27.0",
    "ngx-socket-io": "^3.2.0",
    "rxjs": "~6.5.1",
@@ -9,40 +9,57 @@ const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
+  },
+  {
+    path: 'events',
+    loadChildren: () => import('./pages/events/events.module').then( m => m.EventsPageModule)
+  },
+  {
+    path: 'chat',
+    loadChildren: () => import('./pages/chat/chat.module').then( m => m.ChatPageModule)
+  },
+  {
+    path: 'publications',
+    loadChildren: () => import('./pages/publications/publications.module').then( m => m.PublicationsPageModule)
+  },
+  {
+    path: 'header',
+    loadChildren: () => import('./shared/header/header.module').then( m => m.HeaderPageModule)
+  },
+  {
+    path: 'header',
+    loadChildren: () => import('./shared/header/header.module').then( m => m.HeaderPageModule)
+  },
+  {
+    path: 'header-pr',
+    loadChildren: () => import('./shared/header-pr/header-pr.module').then( m => m.HeaderPrPageModule)
+  },
+  {
+    path: 'btn-seguinte',
+    loadChildren: () => import('./shared/btn-seguinte/btn-seguinte.module').then( m => m.BtnSeguintePageModule)
+  },
+  {
+    path: 'btn-modal-dismiss',
+    loadChildren: () => import('./shared/btn-modal-dismiss/btn-modal-dismiss.module').then( m => m.BtnModalDismissPageModule)
+  },
+  {
+    path: 'chat-popover',
+    loadChildren: () => import('./shared/popover/chat-popover/chat-popover.module').then( m => m.ChatPopoverPageModule)
+  },
+  {
+    path: 'chat-options-popover',
+    loadChildren: () => import('./shared/popover/chat-options-popover/chat-options-popover.module').then( m => m.ChatOptionsPopoverPageModule)
  },
-  {
-    path: 'chat',
+  {
+    path: 'messages-options',
    loadChildren: () => import('./shared/popover/messages-options/messages-options.module').then( m => m.MessagesOptionsPageModule)
  },
-  {
-    path: 'publications',
-    loadChildren: () => import('./pages/publications/publications.module').then( m => m.PublicationsPageModule)
-  },
-  {
-    path: 'header',
-    loadChildren: () => import('./shared/header/header.module').then( m => m.HeaderPageModule)
-  },
-  {
-    path: 'header',
-    loadChildren: () => import('./shared/header/header.module').then( m => m.HeaderPageModule)
-  },
-  {
-    path: 'header-pr',
-    loadChildren: () => import('./shared/header-pr/header-pr.module').then( m => m.HeaderPrPageModule)
-  },
-  {
-    path: 'btn-seguinte',
-    loadChildren: () => import('./shared/btn-seguinte/btn-seguinte.module').then( m => m.BtnSeguintePageModule)
-  },
-  {
-    path: 'btn-modal-dismiss',
-    loadChildren: () => import('./shared/btn-modal-dismiss/btn-modal-dismiss.module').then( m => m.BtnModalDismissPageModule)
-  },
-  {
-    path: 'chat-popover',
+  {
+    path: 'group-duration',
    loadChildren: () => import('./shared/popover/group-duration/group-duration.module').then( m => m.GroupDurationPageModule)
  },

+

 /*  {
    path: 'cal-modal',
@@ -18,6 +18,7 @@ import { WebView } from '@ionic-native/ionic-webview/ngx';
 import { FilePath } from '@ionic-native/file-path/ngx';
 import { Camera } from '@ionic-native/camera/ngx';
 import { IonicStorageModule } from '@ionic/storage';
+import { PipesModule } from './pipes/pipes.module';

@NgModule({
  declarations: [AppComponent],
@@ -26,6 +27,7 @@ import { IonicStorageModule } from '@ionic/storage';
    IonicModule.forRoot(),
    IonicStorageModule.forRoot(),
    AppRoutingModule, 
+    PipesModule,
    HttpClientModule, 
    ],
  providers: [
@@ -1,6 +1,6 @@
 /* This file stores all the keys */
 export class AuthConnstants{
    /* My reference key */
-    public static readonly AUTH = 'user';
+    public static readonly AUTH = 'userDataKey';
    public static readonly PROFILE = 'profile';
 }
@@ -153,7 +153,7 @@ const routes: Routes = [
  },
  {
    path: '',
-    redirectTo: 'home/events',
+    redirectTo: '/home/events',
    pathMatch: 'full'
  }
 ];
@@ -27,7 +27,7 @@
         <ion-tab-button tab="search">
          <ion-icon name="search"></ion-icon>
          <ion-label>Pesquisa</ion-label>
-        </ion-tab-button>
+        </ion-tab-button> -->
        <ion-tab-button tab="chat">
          <ion-icon class="nav-icon" src="assets/images/icons-nav-chat-inactive.svg"></ion-icon>
          <ion-label>Chat</ion-label>
@@ -0,0 +1,5 @@
+export class Status {
+    _id: string;
+    status: string;
+    success: boolean;
+}
@@ -0,0 +1,5 @@
+interface Contact {
+    first: string;
+    last: string;
+    url: string;
+  }
@@ -196,7 +196,7 @@ export class AgendaPage implements OnInit {
        this.eventSource=[];
        if(this.profile == "mdgpr"){
          this.eventService.getAllMdEvents(formatDate(startTime, 'yyyy-MM-dd HH:mm:ss', 'pt'), formatDate(endTime, 'yyyy-MM-dd HH:mm:ss', 'pt')).subscribe(response => {
-              this.eventsListPessoal = response.filter(data => data.CalendarName == "Pessoal");;
+              this.eventsListPessoal = response.filter(data => data.CalendarName == "Pessoal");
              this.eventsListPessoal.forEach(element => {
                this.eventSource.push({
                  title: element.Subject,
@@ -22,6 +22,10 @@ const routes: Routes = [
  {
    path: 'group-messages',
    loadChildren: () => import('./group-messages/group-messages.module').then( m => m.GroupMessagesPageModule)
+  },
+  {
+    path: 'messages',
+    loadChildren: () => import('./messages/messages.module').then( m => m.MessagesPageModule)
  }

 ];
@@ -10,7 +10,6 @@
        </div>
        <div class="div-icon">
          <ion-icon slot="end" (click)="newGroup()" src="assets/images/icons-chat-new-group.svg" ></ion-icon>
-          <!-- [routerLink]="['/home/chat/newchat']" -->
          <ion-icon slot="end" (click)="selectContact()" src="assets/images/icons-chat-new-conversation.svg"></ion-icon>
        </div>
      </div>
@@ -37,21 +36,41 @@
    <ion-list *ngSwitchCase="'Contactos'">
      <ion-item-group>
        <ion-item-sliding>
-            <ion-item *ngFor="let user of userConnectedList" (click)="startConversation(user)"> 
+            <!-- <ion-item *ngFor="let user of userConnectedList" (click)="openMessages()"> 
              <ion-icon slot="start" src="assets/images/icons-chat-chat-40.svg" class="iconschatchat-40"></ion-icon>
              <div>
                <h3>{{user.name}}</h3>
                <p>Podemos marcar reunião para amanha</p>
              </div>
-            </ion-item>
-            <div class="item">
+            </ion-item> -->
+            <div *ngFor="let dm of userDirectMessages" class="item">
              <div class="item-icon">
                <ion-icon class="icon" slot="start" src="assets/images/icons-chat-chat-40.svg"></ion-icon>
              </div>
-              <div class="item-content">
+              <div (click)="openMessages(dm)" class="item-content">
                <div class="item-title-time">
                  <div class="item-title">
-                    <ion-label>Secretário Assuntos Sociais</ion-label>
+                    <ion-label *ngFor="let user of dm.usernames">
+                      <span *ngIf="user !=loggedUser.me.username">
+                      {{user}}
+                    </span>
+                    </ion-label>
+                  </div>
+                  <div class="item-date">{{dm.lastMessage._updatedAt | date: 'HH:mm'}}</div>
+                </div>
+                <div class="item-description">
+                  <ion-label>{{dm.lastMessage.msg}}</ion-label>
+                </div>
+              </div>
+            </div>
+            <!-- <div class="item">
+              <div class="item-icon">
+                <ion-icon class="icon" slot="start" src="assets/images/icons-chat-chat-40.svg"></ion-icon>
+              </div>
+              <div (click)="openMessages()" class="item-content">
+                <div class="item-title-time">
+                  <div class="item-title">
+                    <ion-label>Secretário para o sector Agricola</ion-label>
                  </div>
                  <div class="item-date">15:00</div>
                </div>
@@ -59,21 +78,53 @@
                  <p>Podemos marcar reunião para amanha</p>
                </div>
              </div>
-            </div>  
+            </div>
+            <div class="item">
+              <div class="item-icon">
+                <ion-icon class="icon" slot="start" src="assets/images/icons-chat-chat-40.svg"></ion-icon>
+              </div>
+              <div (click)="openMessages()" class="item-content">
+                <div class="item-title-time">
+                  <div class="item-title">
+                    <ion-label>Secretário para o sector Adminstrativo</ion-label>
+                  </div>
+                  <div class="item-date">15:00</div>
+                </div>
+                <div class="item-description">
+                  <p>Podemos marcar reunião para amanha</p>
+                </div>
+              </div>
+            </div> -->
        </ion-item-sliding>
      </ion-item-group>
    </ion-list>
    <ion-list *ngSwitchCase="'Grupos'" >
      <ion-item-group>
        <ion-item-sliding>
-            <ion-item *ngFor="let group of groupList">
+            <!-- <ion-item *ngFor="let group of allGroups">
              <ion-icon slot="start" src="assets/images/icons-chat-group-chat-40.svg" class="iconschatgroup-chat-40"></ion-icon>
              <div>
                <h3>{{group.name}}</h3>
                <p>Grande momento.</p>
              </div>
-            </ion-item>
-            <div class="item">
+            </ion-item> -->
+            <div *ngFor="let group of allGroups" class="item">
+              <div class="item-icon">
+                <ion-icon class="icon" slot="start" src="assets/images/icons-chat-group-chat-40.svg"></ion-icon>
+              </div>
+              <div (click)="openGroupMessages()" class="item-content">
+                <div class="item-title-time">
+                  <div class="item-title">
+                    <ion-label>{{group.name}}</ion-label>
+                  </div>
+                  <div class="item-date">{{group.lastMessage._updatedAt | date: 'HH:mm'}}</div>
+                </div>
+                <div class="item-description">
+                  <ion-label>{{group.lastMessage.u.name}}: {{group.lastMessage.msg}}</ion-label>
+                </div>
+              </div>
+            </div>
+            <!-- <div class="item">
              <div class="item-icon">
                <ion-icon class="icon" slot="start" src="assets/images/icons-chat-group-chat-40.svg"></ion-icon>
              </div>
@@ -88,7 +139,7 @@
                  <p>Podemos marcar reunião para amanha</p>
                </div>
              </div>
-            </div>    
+            </div> -->    
        </ion-item-sliding>
      </ion-item-group>
      
@@ -63,6 +63,7 @@
 .item{
  width: 100%;
  border-bottom: 1px solid #ebebeb;
+  overflow: auto;

  .item-icon{
    width: 40px;
@@ -1,9 +1,12 @@
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
 import { ModalController } from '@ionic/angular';
 import { AuthService } from 'src/app/services/auth.service';
 import { ChatService } from 'src/app/services/chat.service';
 import { ConversationPage } from './conversation/conversation.page';
 import { GroupMessagesPage } from './group-messages/group-messages.page';
+import { ContactsPage } from './messages/contacts/contacts.page';
+import { MessagesPage } from './messages/messages.page';
 import { NewGroupPage } from './new-group/new-group.page';
 import { NewchatPage } from './newchat/newchat.page';

@@ -13,48 +16,121 @@ import { NewchatPage } from './newchat/newchat.page';
  styleUrls: ['./chat.page.scss'],
 })
 export class ChatPage implements OnInit {
+
+  headers: HttpHeaders;
+  options:any;
+  X_User_Id:any;
+  X_Auth_Token:any;
+  
  showLoader: boolean;
  loggedUser: any;
  /* Set segment variable */
  segment:string;
-  groupList: any[];
+  allGroups: any[];
+  privateGroups: any[];
+  publicGroups: any[];
  userConnectedList: any[];
+  userRooms: any[];
+  userChannels: any[];
+  userDirectMessages: any[];
  result:any;
+  dmUsers:any;

  constructor(
+    private http:HttpClient,
    private chatService: ChatService,
    private modalController: ModalController,
-    private authService: AuthService) { }
+    private authService: AuthService,
+
+    ) { 
+      this.headers = new HttpHeaders();
+      this.headers = this.headers.set('X-User-Id', 'GqjNWiLrGEHRna7Zn');
+      this.headers = this.headers.set('X-Auth-Token', 'SJwIgtlqfloPK696fpc2VBvyDluipuIHKB_0Q6-9ycJ');
+    }

  ngOnInit() {
    this.segment = "Contactos";
+    this.authService.userData$.subscribe((res:any)=>{
+      this.loggedUser=res;
+      console.log(this.loggedUser);
+      
+    });
    this.doRefresh();
-    this.authService.getUserData();
-    
+    this.loadJoinedRooms();
+  }
+  loadJoinedRooms(){
+    this.chatService.loadJoinedRooms().subscribe(res => {
+      console.log(res);
+    });
  }
  onSegmentChange(){
    this.doRefresh();
  }
  doRefresh(){
-    this.getGroups();
-    this.getConnectedUsers();
+    setInterval(()=>{
+      this.getDirectMessages();
+      this.getGroups();
+    }, 2000);
  }
  getGroups(){
    this.showLoader = true;
    this.result = this.chatService.getAllPrivateGroups().subscribe((res:any)=>{
-      this.groupList = res.groups;
+      this.privateGroups = res.groups;
+      this.result = this.chatService.getAllUserChannels().subscribe((res:any)=>{
+      this.publicGroups = res.channels;
+      this.allGroups = this.privateGroups.concat(this.publicGroups);
      this.showLoader = false;
+    });
    }); 
  }
-
-  getConnectedUsers(){
+  getDirectMessages(){
    this.showLoader = true;
+    
+    this.result = this.chatService.getAllDirectMessages().subscribe((res:any)=>{
+      this.userDirectMessages = res.ims;
+      console.log(res);
+      
+      this.showLoader = false;
+    });
+  }
+  getChatMembers(){
+    this.chatService.getMembers(this.userDirectMessages[0]._id).subscribe(res=> {
+      this.dmUsers = res['members'].filter(data => data.username != this.loggedUser.me.username)
+      /* console.log(res);
+      console.log(this.dmUsers); */
+    });
+  }
+  /* getConnectedChannels(){
+    this.showLoader = true;
+    
+    this.result = this.chatService.getAllUserChannels().subscribe((res:any)=>{
+      this.userChannels = res.channels;
+      console.log(res);
+
+      this.showLoader = false;
+    });
+  } */
+
+  /* getConnectedRooms(){
+    this.showLoader = true;
+    
+    this.result = this.chatService.getAllRooms().subscribe((res:any)=>{
+      this.userRooms = res.update;
+      console.log(res.update);
+
+      this.showLoader = false;
+    });
+  } */
+
+  /* getConnectedUsers(){
+    this.showLoader = true;
+
    this.result = this.chatService.getAllConnectedUsers().subscribe((res:any)=>{
      this.userConnectedList = res.users;
-      console.log(this.userConnectedList);
+
      this.showLoader = false;
-    }); 
-  }
+    });
+  } */

  async startConversation(selectedUser) {
    const modal = await this.modalController.create({
@@ -70,8 +146,8 @@ export class ChatPage implements OnInit {
  }
  async selectContact(){
    const modal = await this.modalController.create({
-      component: NewchatPage,
-      cssClass: 'newchat',
+      component: ContactsPage,
+      cssClass: 'contacts',
      backdropDismiss: false,
    });
    await modal.present();
@@ -86,11 +162,28 @@ export class ChatPage implements OnInit {
    await modal.present();
    modal.onDidDismiss();
  }
-  async openGroupMessages(){
+  async openMessages(dm:any){
+    console.log(dm);
+    
+    const modal = await this.modalController.create({
+      component: MessagesPage,
+      cssClass: 'group-messages',
+      backdropDismiss: false,
+      componentProps: {
+        dm: dm,
+      },
+    });
+    await modal.present();
+    modal.onDidDismiss();
+  }
+  async openGroupMessages(user:any){
    const modal = await this.modalController.create({
      component: GroupMessagesPage,
      cssClass: 'group-messages',
      backdropDismiss: false,
+      componentProps: {
+        user: user,
+      },
    });
    await modal.present();
    modal.onDidDismiss();
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { GroupContactsPage } from './group-contacts.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: GroupContactsPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class GroupContactsPageRoutingModule {}
@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { GroupContactsPageRoutingModule } from './group-contacts-routing.module';
+
+import { GroupContactsPage } from './group-contacts.page';
+import { SharedModule } from 'src/app/shared/shared.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    SharedModule,
+    GroupContactsPageRoutingModule
+  ],
+  declarations: [GroupContactsPage]
+})
+export class GroupContactsPageModule {}
@@ -0,0 +1,51 @@
+<ion-header  class="ion-no-border">
+  <ion-toolbar class="header-toolbar">
+    <div class="main-header">
+      <div class="title-content">
+        <div class="back-icon">
+          <ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
+        </div>
+        <div class="div-title">
+          <ion-label class="title">Contactos</ion-label>
+        </div>
+        <app-btn-seguinte (click)="groupMessages()"></app-btn-seguinte>
+      </div>
+    </div>
+  </ion-toolbar>
+  <ion-toolbar class="toolbar-search">
+    <div class="search">
+      <ion-searchbar (ionChange)="onChange($event)" placeholder="Pesquisar por cantacto" ></ion-searchbar>
+    </div>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
+      <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
+      <ion-refresher-content>
+      </ion-refresher-content>
+    </ion-refresher>
+  <div class="main-content">
+    
+    <!-- <ion-list>
+      <ion-item *ngFor="let user of searchedItem">
+        {{user.name}}
+      </ion-item>
+    </ion-list> -->
+
+    <ion-virtual-scroll [items]="users" approxItemHeight="70px" [headerFn]="separateLetter">
+  
+      <div class="item-divider" *virtualHeader="let header">
+        <ion-label>{{header}}</ion-label>
+      </div>
+
+      <div *virtualItem="let user" class="item-checkbox">
+        <ion-checkbox color="primary"></ion-checkbox>
+         <p>{{user.first}} {{user.last}}</p>
+        <ion-icon name="ellipse"></ion-icon>
+      </div>
+      
+    </ion-virtual-scroll>
+    
+  </div>    
+</ion-content>
@@ -0,0 +1,127 @@
+.header-toolbar{
+    --background:transparent;
+    --opacity: 1;
+ 
+   .main-header{
+     width: 100%; /* 400px */
+     height: 100%;
+     font-family: Roboto;
+     border-top-left-radius: 25px;
+     border-top-right-radius: 25px;
+     background-color: #fff;
+     overflow:hidden;
+     padding: 30px 20px 0px 20px;
+     color:#000;
+     transform: translate3d(0, 1px, 0);
+ 
+     .div-icon{
+       width: 40px;
+       float: right;
+       font-size: 35px;
+       overflow: auto;
+       padding: 1px;
+     }
+     .div-icon ion-icon{
+       float: right;
+       padding-left: 20px;
+     }
+       .title-content{
+         width: 360px;
+         margin: 0px auto;
+         overflow: auto;
+         padding: 0 !important;
+       }
+     
+     .back-icon{
+       width: 37px;
+       float: left;
+       font-size: 35px;
+       overflow: auto;
+         
+       }
+     .div-title{
+         width: 221px;
+         padding: 0!important;
+         float: left;
+         margin: 2.5px 0 0 5px;
+     }
+     .title{
+         font-size: 25px;
+     }
+   }
+ }
+ .toolbar-search{
+   --padding-top:0 !important;
+   --padding-bottom:0 !important;
+   --padding-start:0 !important;
+   --padding-end:0 !important;
+   
+   .search{
+     border: 1px solid #ebebeb;
+     margin: 5px 20px 5px 20px;
+     border-radius: 5px;
+   }
+   .search ion-searchbar{
+     /* border: 1px solid green; */
+     width: 100%;
+     margin: 0 !important;
+     padding: 0 !important;
+     --border-radius: 5px;
+     --box-shadow: none;
+     overflow: auto;
+     --icon-color:#0d89d1;
+   }
+ 
+ }
+ ion-content{
+   --background:transparent;
+ }
+ .main-content{
+   width: 100%;
+   height: 100%;
+   font-family: Roboto;
+   margin: 0 auto;
+   background-color: #fff;
+   overflow:auto;
+   padding: 0 0 0 0;
+ 
+     .item-divider{
+       background: #ebebeb;
+       font-size: 15px;
+       margin: 10px 0 10px 0;
+       padding:5px 0 5px 20px;
+  
+     }
+ 
+     .item-checkbox{
+       display: flex;
+       margin: 10px 20px 10px 20px !important;
+       overflow: auto;
+       align-items: center;
+ 
+     }
+ 
+     .item-checkbox ion-checkbox{
+         --border-color: #0d89d1;
+         --background-checked:#0d89d1;
+         float: left;
+     }
+ 
+     .item-checkbox p{
+         display: block;
+         margin: 0 !important;
+         width: 330px;
+         padding-left: 10px;
+         font-size: 15px;
+         color: #0d89d1;
+         float: left;
+     }
+     .item-checkbox ion-icon{
+       font-size: 10px;
+       float: left;
+       color:#99e47b;
+       margin-left: 10px;
+     }
+   }
+ 
+ 
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { GroupContactsPage } from './group-contacts.page';
+
+describe('GroupContactsPage', () => {
+  let component: GroupContactsPage;
+  let fixture: ComponentFixture<GroupContactsPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GroupContactsPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(GroupContactsPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,152 @@
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+import { GroupMessagesPage } from '../group-messages.page';
+
+@Component({
+  selector: 'app-group-contacts',
+  templateUrl: './group-contacts.page.html',
+  styleUrls: ['./group-contacts.page.scss'],
+})
+export class GroupContactsPage implements OnInit {
+  showLoader: boolean;
+  users = [];
+
+  contact: string[] = [" Ana M.", "Andre F.", "Bruno G.", "Catarina T", "Tiago"];
+
+  headers: HttpHeaders;
+  options:any;
+
+  contacts: Contact[] = [
+    {
+      first: 'Ana',
+      last: 'Manuel',
+      url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
+    },
+    {
+      first: 'Abdullah',
+      last: 'Hill',
+      url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
+    },
+    {
+      first: 'Batur',
+      last: 'Oymen',
+      url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
+    },
+    {
+      first: 'Bianca',
+      last: 'Costa',
+      url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
+    },
+    {
+      first: 'Zaya',
+      last: 'Mary',
+      url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
+    },
+    {
+      first: 'Tiago',
+      last: 'Kayaya',
+      url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
+    }
+];
+
+  constructor(
+    private modalController: ModalController,
+    private http: HttpClient,
+  ) 
+  { 
+    this.headers = new HttpHeaders();
+    this.headers = this.headers.set('Access-Control-Allow-Origin' , '*');
+    this.headers = this.headers.set('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
+    this.headers = this.headers.set('Accept','application/json');
+    this.headers = this.headers.set('content-type','application/json');
+        
+    
+  }
+
+  ngOnInit() {
+    this.loadUsers();
+
+  }
+
+  loadUsers(){
+    this.options = { 
+      headers: this.headers,
+    };
+    /* this.http.get('https://randomuser.me/api/?results=100', this.options)
+    .subscribe(res => {
+      this.users = res['results'].sort((a,b) => {
+        if(a.name.first < b.name.first){
+          return -1;
+        }
+        if(a.name.first > b.name.first){
+          return 1;
+        }
+        return 0;
+      });
+      console.log(res);
+      console.log(this.users);
+    }); */
+    this.users = this.contacts.sort((a,b) => {
+      if(a.first < b.first){
+        return -1;
+      }
+      if(a.first > b.first){
+        return 1;
+      }
+      return 0;
+    });
+  }
+
+  separateLetter(record, recordIndex, records){
+    /* if(recordIndex == 0){
+      return record.name.first[0];
+    }
+
+    let first_prev = records[recordIndex - 1].name.first[0];
+    let first_current = record.name.first[0];
+
+    if(first_prev != first_current){
+      return first_current;
+    }
+    return null; */
+    if(recordIndex == 0){
+      return record.first[0];
+    }
+
+    let first_prev = records[recordIndex - 1].first[0];
+    let first_current = record.first[0];
+
+    if(first_prev != first_current){
+      return first_current;
+    }
+    return null;
+  }
+
+  doRefresh(event){
+
+  }
+  close(){
+    this.modalController.dismiss();
+  }
+  onChange(event){
+
+  }
+  clicked(){
+    console.log('clicked');
+    
+  }
+  async groupMessages(){
+    const modal = await this.modalController.create({
+      component: GroupMessagesPage,
+      componentProps: {}, 
+      cssClass: 'contacts',
+      backdropDismiss: false
+    });
+
+    await modal.present();
+
+    modal.onDidDismiss();
+  }
+
+}
@@ -1,17 +1,21 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-import { GroupMessagesPage } from './group-messages.page';
-
-const routes: Routes = [
-  {
-    path: '',
-    component: GroupMessagesPage
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { GroupMessagesPage } from './group-messages.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: GroupMessagesPage
+  },
  {
+    path: 'group-contacts',
+    loadChildren: () => import('./group-contacts/group-contacts.module').then( m => m.GroupContactsPageModule)
  }
-];

-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class GroupMessagesPageRoutingModule {}
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class GroupMessagesPageRoutingModule {}
@@ -1,7 +1,7 @@
 <ion-header  class="ion-no-border">
  <ion-toolbar class="header-toolbar">
    <div class="main-header">
-      <div class="title-content">
+      <div class="header-top">
        <app-btn-modal-dismiss></app-btn-modal-dismiss>
        <div class="middle">
          <ion-label class="title">Grupo de Trabalho A</ion-label>
@@ -10,36 +10,104 @@
          <ion-icon  (click)="openOptions()" src="assets/images/icons-menu.svg"></ion-icon>
        </div>  
      </div>
+      <div class="header-bottom">
+        <div class="header-bottom-icon">
+          <ion-icon (click)="addContacts()" src="assets/icon/icons-user.svg"></ion-icon>
+        </div>
+        <div class="header-bottom-contacts">
+          <ion-label *ngFor="let contact of contacts" >
+            {{contact}}
+          </ion-label>
+        </div>
+      </div>
    </div>
  </ion-toolbar>
 </ion-header>


 <ion-content>
-  <p>HHHHH</p>
-  
-  
-  
+  <div class="welcome-text">
+    <ion-label>Esta conversa passou a grupo</ion-label><br />
+    <ion-label>A conversa original mantêm-se como chat individual</ion-label>
+  </div>
+  <div class="messages">
+    <div class="incoming">
+      <div class="title">
+        <ion-label>Secretário Assuntos sociais</ion-label>
+        <span class="time">14:23</span>
+      </div>
+      <div>
+        <img src='assets/images/1.jpg' tappable>
+        <ion-label hidden >Investidura Filipe Nyusi</ion-label>
+      </div>
+    </div>
+    <div class="incoming">
+      <div class="title">
+        <ion-label>Secretário Assuntos sociais</ion-label>
+        <span class="time">14:23</span>
+      </div>
+      <div>
+        <ion-label>Caros colegas, partilho o momento de confraternização do presidente Filipe Nyusi e de dua excelência, o presidente da república</ion-label>
+      </div>
+    </div>
+    <div class="incoming">
+      <div class="title">
+        <ion-label>Presidente da República</ion-label>
+        <span class="time">14:23</span>
+      </div>
+      <div>
+        <ion-label>Pois é, momentos históricos</ion-label>
+      </div>
+    </div>
+    <div class="outgoing">
+      <div class="title">
+        <ion-label>Ministro do interior</ion-label>
+        <span class="time">16:23</span>
+      </div>
+      <div>
+        <ion-label>Grande momento</ion-label>
+      </div>
+    </div>
+    <div class="incoming">
+      <div class="title">
+        <ion-label>Secretário Assuntos sociais</ion-label>
+        <span class="time">14:23</span>
+      </div>
+      <div>
+        <ion-label>Caros colegas, partilho o momento de confraternização do presidente Filipe Nyusi e de dua excelência, o presidente da república</ion-label>
+      </div>
+    </div>
+    <div class="outgoing">
+      <div class="title">
+        <ion-label>Secretário Assuntos sociais</ion-label>
+        <span class="time">14:23</span>
+      </div>
+      <div>
+        <ion-label>Caros colegas, partilho o momento de confraternização do presidente Filipe Nyusi e de dua excelência, o presidente da república</ion-label>
+      </div>
+    </div>
+  </div>

 </ion-content>
-<ion-footer class="ion-no-border">
+<ion-footer>
  <ion-toolbar>
-    <ion-row align-items-center>
-      <ion-col>
-        <ion-item button lines="none">
-          <img src="assets/images/icons-arrow-arrow-down-25.svg">
-        </ion-item>
+    <ion-row align-items-center class="row">
+      <ion-col size="1">
+        <ion-label class="ion-no-padding" lines="none">
+          <ion-icon (click)="openChatOptions()" class="chat-icon-options" src="assets/icon/icons-chat-options.svg"></ion-icon>
+        </ion-label>
      </ion-col>
-      <ion-col>
-        <ion-item lines="none" class="div-message">
+      <ion-col size="9">
+        <ion-item class="ion-no-padding type-message" lines="none">
          <ion-textarea placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
-          <ion-icon slot="end" name="mic-outline"></ion-icon>
+          <ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></ion-icon>
        </ion-item>
      </ion-col>
-      <ion-col>
-        <ion-item button lines="none" [disabled]="message === ''">
-            <img src="assets/images/icons-chat-send.svg">
-        </ion-item>
+      <ion-col size="2">
+        <!-- [disabled]="message === ''" -->
+        <ion-label>
+          <ion-icon class="chat-icon-send" src="assets/icon/icons-chat-send.svg"></ion-icon>
+        </ion-label>
      </ion-col>
    </ion-row>
  </ion-toolbar>
@@ -1,3 +1,4 @@
+@import '~src/function.scss';
 .header-toolbar{
    --background:transparent;
    --opacity: 1;
@@ -14,7 +15,7 @@
        color:#000;
        transform: translate3d(0, 1px, 0);
        
-        .title-content{
+        .header-top{
          width: 360px;
          margin: 0px auto;
          overflow: auto;
@@ -34,6 +35,30 @@
            margin: 5px 0 0 0;
          }
        }
+        .header-bottom{
+          width: 310px;
+          overflow: auto;
+          margin: 0 auto;
+
+          .header-bottom-icon{
+            width: 30px;
+            font-size: 25px;
+            float: left;
+            padding: 2px;
+
+          }
+          .header-bottom-contacts{
+            width: 275px;
+            font-size: 15px;
+            color: #797979;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            float: left;
+            padding: 5px;
+            margin: 1px;
+          }
+        }
    
        .title{
          font-size: 25px;
@@ -50,4 +75,88 @@
          padding-left: 20px;
        } 
    }
+ }
+ ion-content{
+   .welcome-text{
+    /* width: 322px; */
+     width: em(422px);
+     background: #ebebeb;
+     text-align: center;
+     font-size: 13px;
+     color: #797979;
+     padding: 10px;
+     margin: 0 auto;
+     line-height: 1.2rem;
+     margin: 20px 39px 25px;
+     border-radius: 8px;
+   }
+   .messages{
+    font-size: 13px;
+    font-family: Roboto;
+    overflow: auto;
+
+    .incoming, .outgoing{
+      width: 305px;
+       padding: 15px 20px;
+       border-radius: 10px;
+    }
+
+     .incoming{
+      margin: 10px 75px 10px 20px;
+       background: #ebebeb;
+       float: left;
+       
+       }
+     }
+     .outgoing{
+      margin: 10px 20px 10px 75px;
+       background: #e4f4fe;
+       float: right;
+     }
+     .title{
+      color: #0782c9;
+      
+      font-weight: bold;
+      margin-bottom: 5px;
+
+      .time{
+        color: #797979;
+        text-align: right;
+        float: right;
+      }
+   }
+ }
+
+ ion-footer{
+   .row{
+     width: 380px;
+    margin: 0 auto;
+   }
+
+  .chat-icon-options{
+    display:block !important;
+    font-size: 25px;
+    float: right !important;
+    margin-top: 10px;
+  }
+
+  .chat-icon-send{
+    font-size: 45px;
+    margin: 0 auto;
+    margin-top: 4px;
+  }
+
+  .type-message{
+    display: flex;
+    border: 1px solid #ebebeb;
+    border-radius: 25px;
+    padding-left: 15px;
+    align-items: center;
+    overflow: auto;
+
+    ion-textarea{
+      margin: 0 !important;
+      align-self: center;
+    }
+  }
 }
@@ -1,6 +1,9 @@
 import { Component, OnInit } from '@angular/core';
-import { ActionSheetController, MenuController, PopoverController } from '@ionic/angular';
+import { ActionSheetController, MenuController, ModalController, PopoverController } from '@ionic/angular';
+import { ChatOptionsPopoverPage } from 'src/app/shared/popover/chat-options-popover/chat-options-popover.page';
 import { ChatPopoverPage } from 'src/app/shared/popover/chat-popover/chat-popover.page';
+import { ContactsPage } from '../new-group/contacts/contacts.page';
+import { NewGroupPage } from '../new-group/new-group.page';

@Component({
  selector: 'app-group-messages',
@@ -10,9 +13,11 @@ import { ChatPopoverPage } from 'src/app/shared/popover/chat-popover/chat-popove
 export class GroupMessagesPage implements OnInit {

  message:any;
+  contacts: string[] = [" Ana M.", "Andre F.", "Bruno G.", "Catarina T", "Tiago"];

  constructor(
    private menu: MenuController,
+    private modalController: ModalController,
    private actionSheetController: ActionSheetController,
    public popoverController: PopoverController,
  ) { }
@@ -53,6 +58,27 @@ export class GroupMessagesPage implements OnInit {
    });
    return await popover.present();
  }
+  async openChatOptions(ev: any) {
+    const popover = await this.popoverController.create({
+      component: ChatOptionsPopoverPage,
+      cssClass: 'chat-options-popover',
+      event: ev,
+      translucent: true
+    });
+    return await popover.present();
+  }
+  async addContacts(){
+    const modal = await this.modalController.create({
+      component: ContactsPage,
+      componentProps: {}, 
+      cssClass: 'contacts',
+      backdropDismiss: false
+    });
+
+    await modal.present();
+
+    modal.onDidDismiss();
+  }


 }
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { ContactsPage } from './contacts.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ContactsPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ContactsPageRoutingModule {}
@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ContactsPageRoutingModule } from './contacts-routing.module';
+
+import { ContactsPage } from './contacts.page';
+import { SharedModule } from 'src/app/shared/shared.module';
+import { PipesModule } from 'src/app/pipes/pipes.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    SharedModule,
+    PipesModule,
+    ContactsPageRoutingModule
+  ],
+  declarations: [ContactsPage]
+})
+export class ContactsPageModule {}
@@ -0,0 +1,46 @@
+<ion-header  class="ion-no-border">
+  <ion-toolbar class="header-toolbar">
+    <div class="main-header">
+      <div class="title-content">
+        <div class="back-icon">
+          <ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
+        </div>
+        <div class="div-title">
+          <ion-label class="title">Nova Conversa</ion-label>
+        </div>
+      </div>
+    </div>
+  </ion-toolbar>
+  <ion-toolbar class="toolbar-search">
+    <div class="search">
+      <ion-searchbar debounce="500" (ionChange)="onChange($event)" placeholder="Pesquisar por cantacto" ></ion-searchbar>
+    </div>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
+      <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
+      <ion-refresher-content>
+      </ion-refresher-content>
+    </ion-refresher>
+  <div class="main-content">
+    
+    <ion-virtual-scroll [items]="users | filter:textSearch: 'name'" approxItemHeight="70px" [headerFn]="separateLetter">
+  
+      <div class="item-divider" *virtualHeader="let header">
+        <ion-label>{{header}}</ion-label>
+      </div>
+
+      <div (click)="createRoom(user.username)" *virtualItem="let user" class="item-user">
+         <p>{{user.name}}</p>
+         <span class="icon">
+          <ion-icon class="{{user.status}}" slot="end" name="ellipse"></ion-icon>
+         </span>
+        
+      </div>
+      
+    </ion-virtual-scroll>
+    
+  </div>    
+</ion-content>
@@ -0,0 +1,136 @@
+
+.header-toolbar{
+    --background:transparent;
+    --opacity: 1;
+ 
+   .main-header{
+     width: 100%; /* 400px */
+     height: 100%;
+     font-family: Roboto;
+     border-top-left-radius: 25px;
+     border-top-right-radius: 25px;
+     background-color: #fff;
+     overflow:hidden;
+     padding: 30px 20px 0px 20px;
+     color:#000;
+     transform: translate3d(0, 1px, 0);
+ 
+     .div-icon{
+       width: 40px;
+       float: right;
+       font-size: 35px;
+       overflow: auto;
+       padding: 1px;
+     }
+     .div-icon ion-icon{
+       float: right;
+       padding-left: 20px;
+     }
+       .title-content{
+         width: 360px;
+         margin: 0px auto;
+         overflow: auto;
+         padding: 0 !important;
+       }
+     
+     .back-icon{
+       width: 37px;
+       float: left;
+       font-size: 35px;
+       overflow: auto;
+         
+       }
+     .div-title{
+         width: 221px;
+         padding: 0!important;
+         float: left;
+         margin: 2.5px 0 0 5px;
+     }
+     .title{
+         font-size: 25px;
+     }
+   }
+ }
+ .toolbar-search{
+   --padding-top:0 !important;
+   --padding-bottom:0 !important;
+   --padding-start:0 !important;
+   --padding-end:0 !important;
+   
+   .search{
+     border: 1px solid #ebebeb;
+     margin: 5px 20px 5px 20px;
+     border-radius: 5px;
+     height: auto;
+     padding: 0 !important;
+   }
+   .search ion-searchbar{
+     /* border: 1px solid green; */
+     width: 100%;
+     margin: 0 !important;
+     padding: 0 !important;
+     --border-radius: 5px;
+     --box-shadow: none;
+     overflow: hidden;
+     --icon-color:#0d89d1;
+   }
+ 
+ }
+ ion-content{
+   --background:transparent;
+ }
+ .main-content{
+   width: 100%;
+   height: 100%;
+   font-family: Roboto;
+   margin: 0 auto;
+   background-color: #fff;
+   overflow:auto;
+   padding: 0 0 0 0;
+ 
+     .item-divider{
+       background: #ebebeb;
+       font-size: 15px;
+       margin: 10px 0 10px 0;
+       padding:5px 0 5px 20px;
+  
+     }
+ 
+     .item-user{
+       display: flex;
+       margin: 10px 20px 10px 20px !important;
+       overflow: auto;
+       align-items: center;
+     }
+ 
+     .item-user p{
+        display: block;
+        margin: 0 !important;
+        width: 90%;
+        font-size: 15px;
+        color: #0d89d1;
+        float: left;
+     }
+     .item-user .icon{
+        width: 10%;
+        font-size: 10px;
+        display: block;
+        text-align: right;
+        overflow: auto;
+      }
+      .online{
+        color:#99e47b;
+      }
+     .offline{
+       color:#cbced1;
+      }
+     .away{
+      color:#ffd21f;
+      }
+      .invisible{
+        color:#cbced1;
+      }
+      .busy{
+        color:#f5455c;
+      }
+   }
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { ContactsPage } from './contacts.page';
+
+describe('ContactsPage', () => {
+  let component: ContactsPage;
+  let fixture: ComponentFixture<ContactsPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ContactsPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ContactsPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,153 @@
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+import { AuthService } from 'src/app/services/auth.service';
+import { ChatService } from 'src/app/services/chat.service';
+import { GroupMessagesPage } from '../../group-messages/group-messages.page';
+import { MessagesPage } from '../messages.page';
+
+@Component({
+  selector: 'app-contacts',
+  templateUrl: './contacts.page.html',
+  styleUrls: ['./contacts.page.scss'],
+})
+export class ContactsPage implements OnInit {
+  showLoader: boolean;
+  loggedUser: any;
+  users = [];
+
+  headers: HttpHeaders;
+  options:any;
+  contacts:any;
+  textSearch:string;
+  room:any;
+  dm:any;
+
+  constructor(
+    private modalController: ModalController,
+    private http: HttpClient,
+    private chatService: ChatService,
+    private authService: AuthService,
+  ) 
+  {  
+    this.authService.userData$.subscribe((res:any)=>{
+      this.loggedUser=res;
+    });
+    this.textSearch="";
+    this.dm=null;
+    this.room=null;
+  }
+
+  ngOnInit() {
+    this.loadUsers();
+
+  }
+  onChange(event){
+    this.textSearch = event.detail.value;
+  }
+
+  loadUsers(){
+    this.options = { 
+      headers: this.headers,
+    };
+    this.chatService.getAllUsers().subscribe((res:any)=>{
+      console.log(res.users);
+      this.contacts = res.users.filter(data => data.username != this.loggedUser.me.username);
+      this.users = this.contacts.sort((a,b) => {
+        if(a.name < b.name){
+          return -1;
+        }
+        if(a.name > b.name){
+          return 1;
+        }
+        return 0;
+      });
+      this.showLoader = false;
+    });
+  }
+
+  separateLetter(record, recordIndex, records){
+    if(recordIndex == 0){
+      return record.name[0];
+    }
+
+    let first_prev = records[recordIndex - 1].name[0];
+    let first_current = record.name[0];
+
+    if(first_prev != first_current){
+      return first_current;
+    }
+    return null;
+  }
+
+  doRefresh(event){
+  }
+
+  close(){
+    this.modalController.dismiss();
+  }
+  
+  clicked(){
+    console.log('clicked');
+  }
+
+  createRoom(username:string){
+    let body = {
+      username: username,
+    }
+    this.chatService.createRoom(body).subscribe(res => {
+      console.log(res);
+      this.room = res['room'];
+      this.getDirectMessage(this.room._id);
+    });
+  }
+  getDirectMessage(roomId:any){
+    console.log(roomId);
+    
+    this.chatService.getAllDirectMessages().subscribe(res=>{
+      let result = res['ims'].filter(data => data._id == roomId);
+      this.dm = result[0];
+      console.log(this.dm);
+      this.openModal(this.dm);
+    });
+  }
+  async openModal(dm:any){
+    this.close();
+    console.log(dm);
+    
+    const modal = await this.modalController.create({
+      component: MessagesPage,
+      cssClass: 'group-messages',
+      backdropDismiss: false,
+      componentProps: {
+        dm: dm,
+      },
+    });
+    await modal.present();
+    modal.onDidDismiss();
+  }
+
+  async openMessages(username:string){
+    /* this.close(); */
+
+    let dm:any;
+    //Create new room
+     this.createRoom(username);
+    //Get direct messages (dm)
+    /* this.getDirectMessage(this.room._id); */
+    console.log(this.dm);
+    
+      
+    /* const modal = await this.modalController.create({
+      component: MessagesPage,
+      cssClass: 'group-messages',
+      backdropDismiss: false,
+      componentProps: {
+        dm: dm,
+      },
+    });
+    await modal.present();
+    modal.onDidDismiss(); */
+  }
+
+}
@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { MessagesPage } from './messages.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: MessagesPage
+  },
  {
+    path: 'contacts',
+    loadChildren: () => import('./contacts/contacts.module').then( m => m.ContactsPageModule)
+  }
+
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class MessagesPageRoutingModule {}
@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { MessagesPageRoutingModule } from './messages-routing.module';
+
+import { MessagesPage } from './messages.page';
+import { SharedModule } from 'src/app/shared/shared.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    SharedModule,
+    MessagesPageRoutingModule
+  ],
+  declarations: [MessagesPage]
+})
+export class MessagesPageModule {}
@@ -0,0 +1,113 @@
+<ion-header  class="ion-no-border">
+  <ion-toolbar class="header-toolbar">
+    <div class="main-header">
+      <div class="header-top">
+        <app-btn-modal-dismiss></app-btn-modal-dismiss>
+        <div class="middle">
+          <ion-label class="title" *ngFor="let users of dmUsers">{{users.name}}</ion-label>
+          <span *ngIf="userPresence =='online'"><ion-icon class="user-status-online" name="ellipse"></ion-icon></span>
+        </div>
+        <div class="right">
+          <ion-icon  (click)="openMessagesOptions()" src="assets/images/icons-menu.svg"></ion-icon>
+        </div>  
+      </div>
+      <div class="header-bottom" (click)="addContacts()">
+        <div class="header-bottom-icon">
+          <ion-icon src="assets/icon/icons-user.svg"></ion-icon>
+        </div>
+        <div class="header-bottom-contacts">
+          <ion-label class="text-color-blue">Adicionar contacto</ion-label>
+        </div>
+      </div>
+    </div>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <div class="messages" #scrollMe>
+    <!-- <ion-infinite-scroll position="top" threshold="25%" (ionInfinite)="loadMoreMessages($event)">
+      <ion-infinite-scroll-content loadindSpiniter="crescent" loadingText="Carregando...">
+
+      </ion-infinite-scroll-content>
+    </ion-infinite-scroll> -->
+    <!-- <div class="incoming">
+      <div class="title">
+        <ion-label>Secretário Assuntos sociais</ion-label>
+        <span class="time">14:23</span>
+      </div>
+      <div>
+        <img src='assets/images/1.jpg' tappable>
+        <ion-label hidden >Investidura Filipe Nyusi</ion-label>
+      </div>
+    </div> -->
+    <div *ngFor="let msg of messages" class='incoming-{{msg.u.username!=loggedUser.me.username}}'>
+      <div class="title">
+        <ion-label>{{msg.u.name}}</ion-label>
+        <span class="time">{{msg._updatedAt | date: 'HH:mm' }}</span>
+      </div>
+      <div>
+        <ion-label>{{msg.msg}}</ion-label>
+      </div>
+    </div>
+    <!-- <div class="incoming">
+      <div class="title">
+        <ion-label>Presidente da República</ion-label>
+        <span class="time">14:23</span>
+      </div>
+      <div>
+        <ion-label>Pois é, momentos históricos</ion-label>
+      </div>
+    </div>
+    <div class="outgoing">
+      <div class="title">
+        <ion-label>Ministro do interior</ion-label>
+        <span class="time">16:23</span>
+      </div>
+      <div>
+        <ion-label>Grande momento</ion-label>
+      </div>
+    </div>
+    <div class="incoming">
+      <div class="title">
+        <ion-label>Secretário Assuntos sociais</ion-label>
+        <span class="time">14:23</span>
+      </div>
+      <div>
+        <ion-label>Caros colegas, partilho o momento de confraternização do presidente Filipe Nyusi e de dua excelência, o presidente da república</ion-label>
+      </div>
+    </div>
+    <div class="outgoing">
+      <div class="title">
+        <ion-label>Secretário Assuntos sociais</ion-label>
+        <span class="time">14:23</span>
+      </div>
+      <div>
+        <ion-label>Caros colegas, partilho o momento de confraternização do presidente Filipe Nyusi e de dua excelência, o presidente da república</ion-label>
+      </div>
+    </div> -->
+  </div>
+
+</ion-content>
+<ion-footer>
+  <ion-toolbar>
+    <ion-row align-items-center class="row">
+      <ion-col size="1">
+        <ion-label class="ion-no-padding" lines="none">
+          <ion-icon (click)="openChatOptions()" class="chat-icon-options" src="assets/icon/icons-chat-options.svg"></ion-icon>
+        </ion-label>
+      </ion-col>
+      <ion-col size="9">
+        <ion-item class="ion-no-padding type-message" lines="none">
+          <ion-textarea clearOnEdit="true" placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
+          <ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></ion-icon>
+        </ion-item>
+      </ion-col>
+      <ion-col size="2">
+        <!-- [disabled]="message === ''" -->
+        <ion-label>
+          <ion-icon (click)="sendMessage()" class="chat-icon-send" src="assets/icon/icons-chat-send.svg"></ion-icon>
+        </ion-label>
+      </ion-col>
+    </ion-row>
+  </ion-toolbar>
+</ion-footer>
@@ -0,0 +1,194 @@
+@import '~src/function.scss';
+.header-toolbar{
+    --background:transparent;
+    --opacity: 1;
+
+    .main-header{
+        width: 100%; /* 400px */
+        height: 100%;
+        font-family: Roboto;
+        border-top-left-radius: 25px;
+        border-top-right-radius: 25px;
+        background-color: #fff;
+        overflow:hidden;
+        padding: 30px 20px 0px 20px;
+        color:#000;
+        transform: translate3d(0, 1px, 0);
+        
+        .header-top{
+          width: 360px;
+          margin: 0px auto;
+          overflow: auto;
+          padding: 0 !important;
+          background: #fff;
+           .middle{
+            padding: 0!important;
+            float: left;
+            width: 280px;
+            margin: 2.5px 0 0 5px;
+            display: flex;
+            align-items: center;
+            
+          }
+          .right{
+            padding: 0!important;
+            float: right;
+            font-size: 25px;
+            color: #0782c9;
+            margin: 5px 0 0 0;
+          }
+        }
+        .header-bottom{
+          width: 310px;
+          overflow: auto;
+          margin: 0 auto;
+
+          .header-bottom-icon{
+            width: 30px;
+            font-size: 25px;
+            float: left;
+            padding: 2px;
+
+          }
+          .header-bottom-contacts{
+            width: 275px;
+            font-size: 15px;
+            color: #797979;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            float: left;
+            padding: 5px;
+            margin: 1px;
+          }
+        }
+    
+        .title{
+          font-size: 25px;
+          overflow: auto;
+          float: left;
+        }
+        .div-icon{
+          width: 40px;
+          float: right;
+          font-size: 35px;
+          overflow: auto;
+          padding: 1px;
+        }
+        .div-icon ion-icon{
+          float: right;
+          padding-left: 20px;
+        } 
+    }
+ }
+ ion-content{
+   .welcome-text{
+    /* width: 322px; */
+     width: em(422px);
+     background: #ebebeb;
+     text-align: center;
+     font-size: 13px;
+     color: #797979;
+     padding: 10px;
+     margin: 0 auto;
+     line-height: 1.2rem;
+     margin: 20px 39px 25px;
+     border-radius: 8px;
+   }
+   .messages{
+    font-size: 13px;
+    font-family: Roboto;
+    overflow: auto;
+
+    //set scroll do bottom
+    position: absolute;
+    top: 0;
+    left: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    width: 100%;
+    height: 100%;
+    word-wrap: break-word;
+    -webkit-overflow-scrolling: touch;
+    
+
+    .incoming-true, .incoming-false{
+      width: 305px;
+       padding: 15px 20px;
+       border-radius: 10px;
+
+    }
+
+     .incoming-true{
+      margin: 10px 75px 10px 20px;
+       background: #ebebeb;
+       float: left;
+       
+       }
+     }
+     .incoming-false{
+      margin: 10px 20px 10px 75px;
+       background: #e4f4fe;
+       float: right;
+     }
+     .title{
+         display: inline;
+      color: #0782c9;
+      font-weight: bold;
+      margin-bottom: 5px;
+
+      .time{
+        color: #797979;
+        text-align: right;
+        float: right;
+      }
+   }
+ }
+
+ ion-footer{
+   .row{
+     width: 380px;
+    margin: 0 auto;
+   }
+
+  .chat-icon-options{
+    display:block !important;
+    font-size: 25px;
+    float: right !important;
+    margin-top: 10px;
+  }
+
+  .chat-icon-send{
+    font-size: 45px;
+    margin: 0 auto;
+    margin-top: 4px;
+  }
+
+   .type-message{
+    display: flex;
+    border: 1px solid #ebebeb;
+    border-radius: 25px;
+    padding-left: 15px;
+    align-items: center;
+    overflow: auto;
+
+    ion-textarea{
+      margin: 0 !important;
+      align-self: center;
+    }
+  }
+ }
+
+ .text-color-blue{
+    font-size: 15px;
+    color: #0782c9;
+    font-weight: 500;
+    letter-spacing: normal;
+ }
+ .user-status-online{
+    display: block;
+    float: left;
+    color:#99e47b;
+    padding-left: 10px;
+ }
+ 
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { MessagesPage } from './messages.page';
+
+describe('MessagesPage', () => {
+  let component: MessagesPage;
+  let fixture: ComponentFixture<MessagesPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MessagesPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MessagesPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,144 @@
+import { AfterViewChecked, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { ModalController, NavParams, PopoverController } from '@ionic/angular';
+import { Status } from 'src/app/models/chat/status.model';
+import { AuthService } from 'src/app/services/auth.service';
+import { ChatService } from 'src/app/services/chat.service';
+import { ChatOptionsPopoverPage } from 'src/app/shared/popover/chat-options-popover/chat-options-popover.page';
+import { MessagesOptionsPage } from 'src/app/shared/popover/messages-options/messages-options.page';
+import { ContactsPage } from '../new-group/contacts/contacts.page';
+
+@Component({
+  selector: 'app-messages',
+  templateUrl: './messages.page.html',
+  styleUrls: ['./messages.page.scss'],
+})
+export class MessagesPage implements OnInit, AfterViewChecked {
+
+  @ViewChild('scrollMe') private myScrollContainer: ElementRef;
+
+  loggedUser: any;
+
+  message = '';
+  messages:any;
+  dm:any;
+  userPresence='';
+  dmUsers:any;
+
+  
+  constructor(
+    public popoverController: PopoverController,
+    private modalController: ModalController,
+    private navParams: NavParams,
+    private chatService: ChatService,
+    private authService: AuthService,
+  ) { 
+    this.dm = this.navParams.get('dm');
+  }
+
+  ngOnInit() {
+
+    this.scrollToBottom();
+
+    this.authService.userData$.subscribe((res:any)=>{
+      this.loggedUser=res;
+      console.log(this.loggedUser); 
+    });
+
+    /* console.log(this.dm); */
+    
+    setInterval(()=>{
+      this.checkUserPresence();
+      this.loadMessages();
+    }, 2000);
+
+    this.getChatMembers();
+    
+    
+  }
+  loadUser(){
+    console.log('working');
+    
+  }
+  ngAfterViewChecked() {        
+    this.scrollToBottom();
+  } 
+  scrollToBottom(): void {
+    try {
+        this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
+    } catch(err) { }                 
+  }
+  loadMoreMessages(ev:any){
+
+  }
+
+  checkUserPresence(){
+    this.chatService.getUserPresence(this.dm.lastMessage.u._id).subscribe(res=>{
+      this.userPresence = res['presence'];
+    });
+  }
+  sendMessage(){
+
+    let body = {
+      "message": 
+      { 
+        "rid": this.dm._id, "msg": this.message 
+      }
+    }
+    
+    this.chatService.sendMessage(body).subscribe(res=> {
+      this.loadMessages(); 
+    });
+    this.message = "";
+  }
+  
+  loadMessages(){
+    this.chatService.getRoomMessages(this.dm._id).subscribe(res => {
+      /* console.log(res); */
+      this.messages = res['messages'].reverse();
+    })
+  }
+  getChatMembers(){
+    this.chatService.getMembers(this.dm._id).subscribe(res=> {
+      this.dmUsers = res['members'].filter(data => data.username != this.loggedUser.me.username)
+      console.log(res);
+      console.log(this.dmUsers);
+    });
+  }
+
+  async openMessagesOptions(ev: any) {
+    const popover = await this.popoverController.create({
+      component: MessagesOptionsPage,
+      componentProps: {
+        roomId: this.dm._id,
+      },
+      cssClass: 'messages-options',
+      event: ev,
+      translucent: true,
+    });
+    return await popover.present();
+  }
+
+  async addContacts(){
+    const modal = await this.modalController.create({
+      component: ContactsPage,
+      componentProps: {}, 
+      cssClass: 'contacts',
+      backdropDismiss: false
+    });
+
+    await modal.present();
+
+    modal.onDidDismiss();
+  }
+
+  async openChatOptions(ev: any) {
+    const popover = await this.popoverController.create({
+      component: ChatOptionsPopoverPage,
+      cssClass: 'chat-options-popover',
+      event: ev,
+      translucent: true
+    });
+    return await popover.present();
+  }
+
+}
@@ -12,8 +12,10 @@
      </div>
    </div>
  </ion-toolbar>
-  <ion-toolbar class="header-search">
-    <ion-searchbar (ionChange)="onChange($event)" placeholder="Pesquisar por cantacto" ></ion-searchbar>
+  <ion-toolbar class="toolbar-search">
+    <div class="search">
+      <ion-searchbar (ionChange)="onChange($event)" placeholder="Pesquisar por cantacto" ></ion-searchbar>
+    </div>
  </ion-toolbar>
 </ion-header>

@@ -25,32 +27,26 @@
    </ion-refresher>
  <div class="main-content">
    
-    <ion-list>
-      <!-- <ion-item *ngFor="let user of searchedItem">
+    <!-- <ion-list>
+      <ion-item *ngFor="let user of searchedItem">
        {{user.name}}
-      </ion-item> -->
-      <div class="ion-no-padding item-checkbox no-inner-padding" lines="none">
-        <ion-checkbox color="primary"></ion-checkbox>
-        <p>Tiago Kayaya</p>
+      </ion-item>
+    </ion-list> -->
+
+    <ion-virtual-scroll [items]="users" approxItemHeight="70px" [headerFn]="separateLetter">
+  
+      <div class="item-divider" *virtualHeader="let header">
+        <ion-label>{{header}}</ion-label>
      </div>
-      <div class="ion-no-padding item-checkbox no-inner-padding" lines="none">
+
+      <div *virtualItem="let user" class="item-checkbox">
        <ion-checkbox color="primary"></ion-checkbox>
-        <p>Gilson Manuel</p>
+         <p>{{user.first}} {{user.last}}</p>
        <ion-icon name="ellipse"></ion-icon>
      </div>
-    </ion-list>
-    <!-- <ion-alpha-scroll
-        [listData]="contacts"
-        key="name"
-        [itemTemplate]="alphaScrollItemTemplateRef"
-        [currentPageClass]="currentPageClass"
-        [triggerChange]="triggerAlphaScrollChange">
-
-          <ng-template #alphaScrollItemTemplateRef let-item>
-            <ion-item (click)="currentPageClass.onItemClick(item)">{{item.$t}}</ion-item>
-          </ng-template>
-
-      </ion-alpha-scroll> -->
+      
+    </ion-virtual-scroll>
+    
  </div>    
 </ion-content>

@@ -1,6 +1,4 @@
-ion-content{
-    --background:transparent;
-}
+
 .header-toolbar{
   --background:transparent;
   --opacity: 1;
@@ -53,19 +51,55 @@ ion-content{
    }
  }
 }
-  .main-content{
-    width: 360px;
-    height: 100%;
-    font-family: Roboto;
-    margin: 0 auto;
-    background-color: #fff;
-    overflow:auto;
-    padding: 0 20px 0 20px;
+.toolbar-search{
+  --padding-top:0 !important;
+  --padding-bottom:0 !important;
+  --padding-start:0 !important;
+  --padding-end:0 !important;
+  
+  .search{
+    border: 1px solid #ebebeb;
+    margin: 5px 20px 5px 20px;
+    border-radius: 5px;
+  }
+  .search ion-searchbar{
+    /* border: 1px solid green; */
+    width: 100%;
+    margin: 0 !important;
+    padding: 0 !important;
+    --border-radius: 5px;
+    --box-shadow: none;
+    overflow: auto;
+    --icon-color:#0d89d1;
+  }
+
+}
+ion-content{
+  --background:transparent;
+}
+.main-content{
+  width: 100%;
+  height: 100%;
+  font-family: Roboto;
+  margin: 0 auto;
+  background-color: #fff;
+  overflow:auto;
+  padding: 0 0 0 0;
+
+    .item-divider{
+      background: #ebebeb;
+      font-size: 15px;
+      margin: 10px 0 10px 0;
+      padding:5px 0 5px 20px;
+ 
+    }

    .item-checkbox{
-        width: 100%;
-        margin: 15px 0 15px 0;
-        overflow: auto;
+      display: flex;
+      margin: 10px 20px 10px 20px !important;
+      overflow: auto;
+      align-items: center;
+
    }

    .item-checkbox ion-checkbox{
@@ -77,26 +111,17 @@ ion-content{
    .item-checkbox p{
        display: block;
        margin: 0 !important;
-        width: 270px;
+        width: 330px;
        padding-left: 10px;
        font-size: 15px;
        color: #0d89d1;
        float: left;
    }
    .item-checkbox ion-icon{
-        float: left;
-        color:#99e47b;
+      font-size: 10px;
+      float: left;
+      color:#99e47b;
+      margin-left: 10px;
    }
  }
-  .header-search{
-      margin-top: 15px;

-    ion-searchbar{
-        width: 380px;
-        margin: 0px auto;
-        --border-radius: 5px;
-        --box-shadow: /* inset */ .5px .5px 5px #ebebeb;
-        overflow: auto;
-        --icon-color:#0d89d1;
-    }
-  }
@@ -1,3 +1,4 @@
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
 import { ModalController } from '@ionic/angular';
 import { GroupMessagesPage } from '../../group-messages/group-messages.page';
@@ -9,16 +10,119 @@ import { GroupMessagesPage } from '../../group-messages/group-messages.page';
 })
 export class ContactsPage implements OnInit {
  showLoader: boolean;
+  users = [];
+
+  contact: string[] = [" Ana M.", "Andre F.", "Bruno G.", "Catarina T", "Tiago"];
+
+  headers: HttpHeaders;
+  options:any;
+
+  contacts: Contact[] = [
+    {
+      first: 'Ana',
+      last: 'Manuel',
+      url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
+    },
+    {
+      first: 'Abdullah',
+      last: 'Hill',
+      url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
+    },
+    {
+      first: 'Batur',
+      last: 'Oymen',
+      url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
+    },
+    {
+      first: 'Bianca',
+      last: 'Costa',
+      url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
+    },
+    {
+      first: 'Zaya',
+      last: 'Mary',
+      url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
+    },
+    {
+      first: 'Tiago',
+      last: 'Kayaya',
+      url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
+    }
+];

  constructor(
-    private modalController: ModalController, 
-  ) { 
+    private modalController: ModalController,
+    private http: HttpClient,
+  ) 
+  { 
+    this.headers = new HttpHeaders();
+    this.headers = this.headers.set('Access-Control-Allow-Origin' , '*');
+    this.headers = this.headers.set('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
+    this.headers = this.headers.set('Accept','application/json');
+    this.headers = this.headers.set('content-type','application/json');
+        
    
  }

  ngOnInit() {
+    this.loadUsers();

  }
+
+  loadUsers(){
+    this.options = { 
+      headers: this.headers,
+    };
+    /* this.http.get('https://randomuser.me/api/?results=100', this.options)
+    .subscribe(res => {
+      this.users = res['results'].sort((a,b) => {
+        if(a.name.first < b.name.first){
+          return -1;
+        }
+        if(a.name.first > b.name.first){
+          return 1;
+        }
+        return 0;
+      });
+      console.log(res);
+      console.log(this.users);
+    }); */
+    this.users = this.contacts.sort((a,b) => {
+      if(a.first < b.first){
+        return -1;
+      }
+      if(a.first > b.first){
+        return 1;
+      }
+      return 0;
+    });
+  }
+
+  separateLetter(record, recordIndex, records){
+    /* if(recordIndex == 0){
+      return record.name.first[0];
+    }
+
+    let first_prev = records[recordIndex - 1].name.first[0];
+    let first_current = record.name.first[0];
+
+    if(first_prev != first_current){
+      return first_current;
+    }
+    return null; */
+    if(recordIndex == 0){
+      return record.first[0];
+    }
+
+    let first_prev = records[recordIndex - 1].first[0];
+    let first_current = record.first[0];
+
+    if(first_prev != first_current){
+      return first_current;
+    }
+    return null;
+  }
+
  doRefresh(event){

  }
@@ -19,26 +19,18 @@
    <div class="item-container">
      <ion-input placeholder="Título"></ion-input>
    </div>
-    <ion-item class="ion-no-padding item-container-no-border" lines="none">
-      <ion-checkbox color="primary"></ion-checkbox>
+    <div class="item-container-no-border">
+      <ion-checkbox (ionChange)="_ionChange($event)" color="primary"></ion-checkbox>
      <ion-label>Grupo Ultra-secreto</ion-label>
-    </ion-item>
+    </div>

-    <div class="container-div">
+    <div *ngIf="showDuration" 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>
        </div>
        <div class="ion-input-class">
-          <ion-datetime 
-          placeholder="Duração"
-          displayFormat="D MMM YYYY H:mm"
-          minuteValues="0,15,30,45"
-          monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
-          min="2018" 
-          max="2022"
-          >
-        </ion-datetime>
+          <ion-input (click)="showPicker()" [(ngModel)]="displayDuration" placeholder="Duração"></ion-input>
        </div>
      </div>
    </div>
@@ -107,21 +107,19 @@ ion-content{
        border-radius: 5px;
        padding-left: 10px;
      }
+
      .item-container-no-border{
+        display: flex;
        width: 360px;
-        margin: 15px auto;
+        margin: 25px auto;
        border-radius: 5px;
-        padding-left: 10px;
-      }
-      .item-container-no-border ion-checkbox{
-          margin-top: 10px;
+        align-items: center;
      }

      .item-container-no-border ion-label{
          padding-left: 10px;
          font-size: 12px;
          color: #000;
-          margin-top: 0 !important;
      }
  }

--- a/Show More
+++ b/Show More