add screenOrientation configuration

config.xml

@@ -3,7 +3,7 @@
     <name>gabinete digital</name>
     <description>An awesome Ionic/Cordova app.</description>
     <author email="hi@ionicframework.com" href="http://ionicframework.com/">Ionic Framework Team</author>
-    <content src="index.html" />
+    <content original-src="index.html" src="http://localhost:8101" />
     <access origin="*" />
     <allow-navigation href="http://*/*" />
     <allow-navigation href="https://*/*" />

package-lock.json

@@ -4602,6 +4602,21 @@
       "resolved": "https://registry.npmjs.org/@ionic-native/local-notifications/-/local-notifications-4.20.0.tgz",
       "integrity": "sha512-Ht/0zau8/2+G/bH/okXXhhWB6YrkCNL2QxVJHQ2dophXFGxQPOZAN3CKWhuQSjfbr76fa2nvQXF6jsXLpIR/ng=="
     },
+    "@ionic-native/screen-orientation": {
+      "version": "5.35.0",
+      "resolved": "https://registry.npmjs.org/@ionic-native/screen-orientation/-/screen-orientation-5.35.0.tgz",
+      "integrity": "sha512-dAxPtMTcGPJ4D2yM1JuLA32SWbzYdojeNE+GVyCP596aYfInwY8w16jCFZjOnWBQwZBOeUxFkaz2n8ZakmyP0g==",
+      "requires": {
+        "@types/cordova": "^0.0.34"
+      },
+      "dependencies": {
+        "@types/cordova": {
+          "version": "0.0.34",
+          "resolved": "https://registry.npmjs.org/@types/cordova/-/cordova-0.0.34.tgz",
+          "integrity": "sha1-6nrd907Ow9dimCegw54smt3HPQQ="
+        }
+      }
+    },
     "@ionic-native/splash-screen": {
       "version": "5.31.1",
       "resolved": "https://registry.npmjs.org/@ionic-native/splash-screen/-/splash-screen-5.31.1.tgz",
@@ -12528,6 +12543,12 @@
       "resolved": "https://registry.npmjs.org/cordova-plugin-okhttp/-/cordova-plugin-okhttp-2.0.0.tgz",
       "integrity": "sha1-6GT2C//zQqHZJHeugvckmqYIXIA="
     },
+    "cordova-plugin-screen-orientation": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/cordova-plugin-screen-orientation/-/cordova-plugin-screen-orientation-3.0.2.tgz",
+      "integrity": "sha512-2w6CMC+HGvbhogJetalwGurL2Fx8DQCCPy3wlSZHN1/W7WoQ5n9ujVozcoKrY4VaagK6bxrPFih+ElkO8Uqfzg==",
+      "dev": true
+    },
     "cordova-plugin-splashscreen": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/cordova-plugin-splashscreen/-/cordova-plugin-splashscreen-5.0.4.tgz",

package.json

@@ -49,6 +49,7 @@
     "@ionic-native/in-app-browser": "^5.28.0",
     "@ionic-native/ionic-webview": "^5.35.0",
     "@ionic-native/local-notifications": "^4.20.0",
+    "@ionic-native/screen-orientation": "^5.35.0",
     "@ionic-native/splash-screen": "^5.31.1",
     "@ionic-native/sqlite": "^5.31.1",
     "@ionic-native/sqlite-porter": "^5.31.1",
@@ -135,6 +136,7 @@
     "cordova-plugin-mfp": "^8.0.2021031007",
     "cordova-plugin-mfp-jsonstore": "^8.0.2021062408",
     "cordova-plugin-mfp-push": "^8.0.2021062405",
+    "cordova-plugin-screen-orientation": "^3.0.2",
     "cordova-plugin-splashscreen": "^5.0.2",
     "cordova-plugin-statusbar": "^2.4.2",
     "cordova-plugin-whitelist": "^1.3.4",
@@ -172,7 +174,8 @@
       "cordova-plugin-fingerprint-aio": {},
       "cordova-plugin-mfp-push": {},
       "cordova-plugin-mfp-jsonstore": {},
-      "cordova-plugin-ionic-webview": {}
+      "cordova-plugin-ionic-webview": {},
+      "cordova-plugin-screen-orientation": {}
     },
     "platforms": [
       "browser",

src/app/app.module.ts

@@ -52,6 +52,7 @@ import { fas } from '@fortawesome/free-solid-svg-icons'
 import { far } from '@fortawesome/free-regular-svg-icons'
 import { fab } from '@fortawesome/free-brands-svg-icons'
 
+import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';
 @NgModule({
   declarations: [AppComponent],
   entryComponents: [],
@@ -98,6 +99,7 @@ import { fab } from '@fortawesome/free-brands-svg-icons'
     //FCM,
     WebsocketService,
     ChatService,
+    ScreenOrientation,
   ],
   bootstrap: [AppComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]

src/app/pages/events/events.page.ts

@@ -7,7 +7,7 @@ import { ActivatedRoute, NavigationEnd } from '@angular/router';
 import { AlertService } from 'src/app/services/alert.service';
 import { AuthService } from 'src/app/services/auth.service';
 import { StorageService } from 'src/app/services/storage.service';
-import { ModalController } from '@ionic/angular';
+import { ModalController, Platform } from '@ionic/angular';
 import { EventDetailPage } from './event-detail/event-detail.page';
 import { EventDetailModalPage } from './event-detail-modal/event-detail-modal.page';
 import { ProcessesService } from '../../services/processes.service';
@@ -19,7 +19,10 @@ import { EditEventPage as EventEditPage } from './edit-event/edit-event.page';
 import { GabineteDigitalPage } from '../gabinete-digital/gabinete-digital.page';
 import { User } from 'src/app/models/user.model';
 import { ToDayEventStorage  } from 'src/app/store/to-day-event-storage.service';
-import { ExpedienteStorage } from 'src/app/store/expediente-storage-service.service'
+import { ExpedienteStorage } from 'src/app/store/expediente-storage-service.service';
+
+import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';
+
 @Component({
   selector: 'app-events',
   templateUrl: './events.page.html',
@@ -72,6 +75,8 @@ export class EventsPage implements OnInit {
 
   loggeduser: User;
 
+  existingScreenOrientation: string;
+
   constructor(
     private eventService: EventsService,
     private router: Router,
@@ -82,7 +87,11 @@ export class EventsPage implements OnInit {
     private processes:ProcessesService,
     /* private gabineteService: GabineteDigitalPage, */
     private modalController:ModalController,
+    private screenOrientation: ScreenOrientation,
+    public platform: Platform,
     ) {
+      this.existingScreenOrientation = this.screenOrientation.type;
+      console.log(this.existingScreenOrientation);
 
       this.loggeduser = authService.ValidatedUser;
 
@@ -91,6 +100,19 @@ export class EventsPage implements OnInit {
       // list
       this.LoadList();
 
+      /* this.screenOrientation.onChange().subscribe(
+        () => {
+          alert("Orientation updated" + this.screenOrientation.type);
+          this.existingScreenOrientation = this.screenOrientation.type;
+        }
+      ); */
+
+      this.platform.resize.subscribe(async () => {
+        //alert('Resize event detected');
+        console.log('Resize event detected');
+
+      });
+
     }
 
   ngOnInit() {
@@ -111,6 +133,8 @@ export class EventsPage implements OnInit {
       }
     });
     this.hideSearch();
+
+    //this.checkScreenOrientation();
   }
 
   hideSearch(){
@@ -129,6 +153,33 @@ export class EventsPage implements OnInit {
     this.RefreshEvents();
   }
 
+  // Lock to portrait
+  lockToPortrait(){
+    this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT);
+    console.log('set');
+  }
+
+   // Lock to landscape
+   lockToLandscape(){
+    this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE);
+  }
+
+   // Unlock screen orientation
+   unlockScreenOrientation(){
+    this.screenOrientation.unlock();
+  }
+
+  checkScreenOrientation(){
+    if( window.innerWidth < 701) {
+      this.lockToPortrait();
+      console.log('was here');
+
+    }
+    else{
+      this.unlockScreenOrientation();
+    }
+  }
+
   async RefreshEvents() {
     this.currentEvent = "";
     this.showLoader = true;