Edit button in mobile app

android/app/src/main/assets/capacitor.config.json

@@ -13,6 +13,9 @@
 			"splashFullScreen": false,
 			"layoutName": "launch_screen",
 			"useDialog": false
+		},
+		"CapacitorHttp": {
+			"enabled": true
 		}
 	}
 }

capacitor.config.json

@@ -13,6 +13,9 @@
 			"splashFullScreen": false,
 			"layoutName": "launch_screen",
 			"useDialog": false
-		}
+		},
+		"CapacitorHttp": {
+			"enabled": true
+		  }
 	  }
 }

ios/App/App/capacitor.config.json

@@ -13,6 +13,9 @@
 			"splashFullScreen": false,
 			"layoutName": "launch_screen",
 			"useDialog": false
+		},
+		"CapacitorHttp": {
+			"enabled": true
 		}
 	}
 }

ngsw-config.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
+  "index": "/index.html",
+  "assetGroups": [
+    {
+      "name": "app",
+      "installMode": "prefetch",
+      "resources": {
+        "files": [
+          "/favicon.ico",
+          "/index.html",
+          "/manifest.webmanifest",
+          "/*.css",
+          "/*.js"
+        ]
+      }
+    },
+    {
+      "name": "assets",
+      "installMode": "lazy",
+      "updateMode": "prefetch",
+      "resources": {
+        "files": [
+          "/assets/**",
+          "/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
+        ]
+      }
+    }
+  ]
+}

package.json

@@ -19,6 +19,7 @@
     "@angular/platform-browser": "~13.2.2",
     "@angular/platform-browser-dynamic": "~13.2.2",
     "@angular/router": "~13.2.2",
+    "@angular/service-worker": "~13.2.2",
     "@awesome-cordova-plugins/camera": "^5.41.0",
     "@awesome-cordova-plugins/chooser": "^5.41.0",
     "@awesome-cordova-plugins/core": "^5.41.0",
@@ -32,15 +33,18 @@
     "@awesome-cordova-plugins/network": "^5.44.0",
     "@awesome-cordova-plugins/social-sharing": "^5.41.0",
     "@awesome-cordova-plugins/sqlite": "^5.41.0",
+    "@capacitor-community/http": "^1.4.1",
     "@capacitor/android": "3.6.0",
     "@capacitor/app": "1.1.1",
     "@capacitor/browser": "^1.0.7",
-    "@capacitor/cli": "^3.5.1",
-    "@capacitor/core": "^3.5.1",
+    "@capacitor/camera": "^5.0.2",
+    "@capacitor/cli": "5.0.2",
+    "@capacitor/core": "5.0.2",
     "@capacitor/filesystem": "^1.1.0",
     "@capacitor/haptics": "1.1.4",
     "@capacitor/ios": "3.5.0",
     "@capacitor/keyboard": "1.2.2",
+    "@capacitor/preferences": "^5.0.2",
     "@capacitor/share": "^1.1.2",
     "@capacitor/splash-screen": "^1.2.2",
     "@capacitor/status-bar": "1.0.8",
@@ -53,6 +57,7 @@
     "@ionic-native/sqlite": "^5.36.0",
     "@ionic/angular": "^6.0.0",
     "@ionic/core": "^6.2.0",
+    "@ionic/pwa-elements": "^3.1.1",
     "@ionic/storage": "^3.0.6",
     "@ionic/storage-angular": "^3.0.6",
     "@ngx-translate/core": "^14.0.0",

src/app/app.module.ts

@@ -27,6 +27,8 @@ import { Deeplinks } from '@awesome-cordova-plugins/deeplinks/ngx';
 import { Network } from '@awesome-cordova-plugins/network/ngx';
 import { Device } from '@awesome-cordova-plugins/device/ngx';
 import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';
+import { ServiceWorkerModule } from '@angular/service-worker';
+import { environment } from '../environments/environment';
 
 export const translateHttpLoaderFactory = (httpClient: HttpClient) =>
   new TranslateHttpLoader(httpClient, './assets/i18n/', '.json');
@@ -52,6 +54,12 @@ export const translateHttpLoaderFactory = (httpClient: HttpClient) =>
       },
     }),
     ReactiveFormsModule,
+    ServiceWorkerModule.register('ngsw-worker.js', {
+      enabled: environment.production,
+      // Register the ServiceWorker as soon as the application is stable
+      // or after 30 seconds (whichever comes first).
+      registrationStrategy: 'registerWhenStable:30000'
+    }),
   ],
 
   providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },

src/app/core/services/http/http.service.ts

@@ -1,5 +1,5 @@
 import { Injectable, Injector } from '@angular/core';
-import { HTTP } from '@ionic-native/http/ngx';
+import { Http } from '@capacitor-community/http';
 import { RequestParams } from '../../interface/request-param';
 import { environment } from 'src/environments/environment';
 import * as _ from 'lodash-es';
@@ -14,14 +14,12 @@ import { AuthService } from '../auth/auth.service';
 import { ModalController } from '@ionic/angular';
 import { FeedbackPage } from 'src/app/pages/feedback/feedback.page';
 
-
 @Injectable({
   providedIn: 'root',
 })
 export class HttpService {
   baseUrl;
   constructor(
-    private http: HTTP,
     private userService: UserService,
     private network: NetworkService,
     private toastService: ToastService,
@@ -52,9 +50,12 @@ export class HttpService {
     }
     const headers = requestParam.headers ? requestParam.headers : await this.setHeaders();
     let body = requestParam.payload ? requestParam.payload : {};
-    this.http.setDataSerializer('json');
-    this.http.setRequestTimeout(60);
-    return this.http.post(this.baseUrl + requestParam.url, body, headers)
+    const options = {
+      url: this.baseUrl + requestParam.url,
+      headers: headers,
+      params: body,
+    };
+    return Http.post(headers)
       .then((data: any) => {
         let result: any = JSON.parse(data.data);
         if (result.responseCode === "OK") {
@@ -70,9 +71,12 @@ export class HttpService {
       throw Error(null);
     }
     const headers = requestParam.headers ? requestParam.headers : await this.setHeaders();
-    this.http.setDataSerializer('json');
-    this.http.setRequestTimeout(60);
-    return this.http.get(this.baseUrl + requestParam.url, '', headers)
+    const options = {
+      url: this.baseUrl + requestParam.url,
+      headers: headers,
+      params: {},
+    };
+    return Http.post(headers)
       .then((data: any) => {
         let result: any = JSON.parse(data.data);
         if(result?.meta?.data?.length){
@@ -91,9 +95,12 @@ export class HttpService {
       throw Error(null);
     }
     const headers = requestParam.headers ? requestParam.headers : await this.setHeaders();
-    this.http.setDataSerializer('json');
-    this.http.setRequestTimeout(60);
-    return this.http.delete(this.baseUrl + requestParam.url, '', headers)
+    const options = {
+      url: this.baseUrl + requestParam.url,
+      headers: headers,
+      params: {},
+    };
+    return Http.post(headers)
       .then((data: any) => {
         let result: any = JSON.parse(data.data);
         if (result.responseCode === "OK") {
@@ -114,7 +121,7 @@ export class HttpService {
     }
   }
 
-  //token validation and logout 
+//   //token validation and logout 
 
   async getToken() {
     let token = _.get(this.userService.token, 'access_token');

src/app/pages/session-detail/session-detail.page.ts

@@ -133,7 +133,7 @@ export class SessionDetailPage implements OnInit {
       if(this.userDetails){
         this.isCreator = this.userDetails._id == response.userId ? true : false;
       }
-      this.headerConfig.edit = (this.isCreator && response.status=="published")?true:null;
+      this.headerConfig.edit = (this.isCreator && response.status=="published" && !this.isEnabled)?true:null;
       this.headerConfig.delete = (this.isCreator && response.status=="published" && !this.isEnabled)?true:null;
   }
 

src/main.ts

@@ -1,12 +1,12 @@
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
-
+import { defineCustomElements } from '@ionic/pwa-elements/loader';
+// Call the element loader after the platform has been bootstrapped
+defineCustomElements(window);
 if (environment.production) {
   enableProdMode();
 }
-
 platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.log(err));
+  .catch(err => console.log(err));

src/manifest.webmanifest

@@ -0,0 +1,59 @@
+{
+  "name": "app",
+  "short_name": "app",
+  "theme_color": "#1976d2",
+  "background_color": "#fafafa",
+  "display": "standalone",
+  "scope": "./",
+  "start_url": "./",
+  "icons": [
+    {
+      "src": "assets/icons/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "assets/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable any"
+    }
+  ]
+}

tsconfig.json

@@ -12,7 +12,8 @@
     "importHelpers": true,
     "target": "es2015",
     "module": "es2020",
-    "lib": ["es2018", "dom"]
+    "lib": ["es2018", "dom"],
+    "emitDecoratorMetadata": true,
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,