Merged PR 1488: #3354 #3814 Ipad styling bugfixes, check environment and native container update

#3354 #3814 Ipad styling bugfixes, check environment and native container update

apps/core/environment/src/lib/environment.service.ts

@@ -1,21 +1,26 @@
 import { Injectable } from '@angular/core';
 import { Platform } from '@angular/cdk/platform';
+import { NativeContainerService } from 'native-container';
 
 @Injectable({
   providedIn: 'root',
 })
 export class EnvironmentService {
-  constructor(private _platform: Platform) {}
+  constructor(private _platform: Platform, private _nativeContainer: NativeContainerService) {}
 
   isDesktop(): boolean {
     return !this.isTablet();
   }
 
   isTablet(): boolean {
-    return this._platform.ANDROID || this._platform.IOS;
+    return this.isNative() || this.isSafari();
+  }
+
+  isNative(): boolean {
+    return this._nativeContainer.isUiWebview().isNative;
   }
 
   isSafari(): boolean {
-    return this._platform.SAFARI;
+    return (this._platform.ANDROID || this._platform.IOS) && this._platform.SAFARI;
   }
 }

apps/isa-app/src/app/app.component.ts

@@ -6,12 +6,10 @@ import { ApplicationService } from '@core/application';
 import { Config } from '@core/config';
 import { NotificationsHub } from '@hub/notifications';
 import packageInfo from 'package';
-import { interval, Observable, Subscription } from 'rxjs';
-import { tap } from 'rxjs/operators';
-import { Platform } from '@angular/cdk/platform';
-import { Router } from '@angular/router';
+import { asapScheduler, interval, Observable, Subscription } from 'rxjs';
 import { UserStateService } from '@swagger/isa';
 import { IsaLogProvider } from './providers';
+import { EnvironmentService } from '@core/environment';
 
 @Component({
   selector: 'app-root',
@@ -41,9 +39,8 @@ export class AppComponent implements OnInit {
     private readonly _renderer: Renderer2,
     private readonly _swUpdate: SwUpdate,
     private readonly _notifications: NotificationsHub,
-    private readonly _platform: Platform,
-    private router: Router,
-    private infoService: UserStateService
+    private infoService: UserStateService,
+    private readonly _environment: EnvironmentService
   ) {
     this.updateClient();
     IsaLogProvider.InfoService = infoService;
@@ -52,7 +49,7 @@ export class AppComponent implements OnInit {
   ngOnInit() {
     this.setTitle();
     this.logVersion();
-    this.determinePlatform();
+    asapScheduler.schedule(() => this.determinePlatform(), 250);
     this._appService.getSection$().subscribe(this.sectionChangeHandler.bind(this));
   }
 
@@ -65,13 +62,15 @@ export class AppComponent implements OnInit {
   }
 
   determinePlatform() {
-    if (this._platform.IOS && !this._platform.SAFARI) {
-      this._renderer.addClass(this._document.body, 'tablet');
+    if (this._environment.isNative()) {
       this._renderer.addClass(this._document.body, 'tablet-native');
-    } else if (this._platform.IOS && this._platform.SAFARI) {
-      this._renderer.addClass(this._document.body, 'tablet');
+    } else if (this._environment.isTablet()) {
       this._renderer.addClass(this._document.body, 'tablet-browser');
-    } else if (this._platform.isBrowser) {
+    }
+    if (this._environment.isTablet()) {
+      this._renderer.addClass(this._document.body, 'tablet');
+    }
+    if (this._environment.isDesktop()) {
       this._renderer.addClass(this._document.body, 'desktop');
     }
   }

apps/isa-app/src/app/preview/preview.component.html

@@ -1 +1,10 @@
-<shared-branch-selector [value]="selectedBranch$ | async" (valueChange)="setNewBranch($event)"></shared-branch-selector>
+<h1>Platform: {{ platform | json }}</h1>
+<br />
+<h1>{{ appVersion }}</h1>
+<br />
+<h1>{{ userAgent }}</h1>
+<br />
+<h1>Navigator: {{ navigator | json }}</h1>
+<br />
+<br />
+<h1>Device: {{ device }}</h1>

apps/isa-app/src/app/preview/preview.component.ts

@@ -1,3 +1,4 @@
+import { Platform, PlatformModule } from '@angular/cdk/platform';
 import { CommonModule } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
 import { BranchSelectorComponent } from '@shared/components/branch-selector';
@@ -8,13 +9,48 @@ import { BehaviorSubject } from 'rxjs';
   selector: 'app-preview',
   templateUrl: 'preview.component.html',
   styleUrls: ['preview.component.css'],
-  imports: [CommonModule, BranchSelectorComponent],
+  imports: [CommonModule, BranchSelectorComponent, PlatformModule],
   standalone: true,
 })
 export class PreviewComponent implements OnInit {
   selectedBranch$ = new BehaviorSubject<BranchDTO>({});
 
-  constructor() {}
+  get appVersion() {
+    return 'App Version: ' + (window.navigator as any).appVersion;
+  }
+
+  get userAgent() {
+    return 'User Agent: ' + (window.navigator as any).userAgent;
+  }
+
+  get navigator() {
+    const nav = {};
+    for (let i in window.navigator) nav[i] = navigator[i];
+    return nav;
+  }
+
+  get platform() {
+    return this._platform;
+  }
+
+  get device() {
+    const isIpadNative = this._platform.IOS && !this._platform.SAFARI;
+    const isIpadMini6Native = window?.navigator?.userAgent?.includes('Macintosh') && !this._platform.SAFARI;
+    const isNative = isIpadNative || isIpadMini6Native;
+    const isPWA = this._platform.IOS && this._platform.SAFARI;
+    const isDesktop = !isNative && !isPWA;
+    if (isNative) {
+      if (isIpadMini6Native) {
+        return 'IPAD mini 6 Native App';
+      } else if (isIpadNative) {
+        return 'IPAD mini 2 Native App or IPAD mini 5 Native App';
+      }
+    } else if (isPWA) {
+      return 'IPAD Safari PWA';
+    } else if (isDesktop) return 'Desktop or Macintosh';
+  }
+
+  constructor(private readonly _platform: Platform) {}
 
   ngOnInit() {}
 

apps/native-container/src/lib/native-container.service.ts

@@ -4,6 +4,7 @@ import { map } from 'rxjs/operators';
 import { WindowRef } from './window-ref.service';
 import { ScanRequestType } from './scan-request.type';
 import { EnvironmentService } from '@core/environment';
+import { Platform } from '@angular/cdk/platform';
 @Injectable({
   providedIn: 'root',
 })
@@ -15,7 +16,7 @@ export class NativeContainerService {
   private webViewEventRecieved = false;
   private browserDetected = false;
 
-  constructor(private windowRef: WindowRef, private _environmentService: EnvironmentService) {
+  constructor(private windowRef: WindowRef, private _platform: Platform) {
     this.defineWindowCallback();
 
     this.wm = fromEvent(this.windowRef.nativeWindow, 'message').pipe(
@@ -68,7 +69,7 @@ export class NativeContainerService {
     // this.browserDetected = !standalone && (safari || chrome) && !crios;
 
     return {
-      isSafari: this._environmentService.isSafari(),
+      isSafari: this._platform.SAFARI,
       isNative: this.webViewEventRecieved,
     };
   }

apps/shared/components/branch-selector/src/lib/branch-selector.component.html

@@ -1,5 +1,5 @@
 <div class="shared-branch-selector-input-container" (click)="branchInput.focus(); openComplete()">
-  <button (click)="closeAndClearAutocomplete()" class="shared-branch-selector-input-icon">
+  <button (click)="onClose($event)" type="button" class="shared-branch-selector-input-icon">
     <ui-svg-icon class="text-[#AEB7C1]" icon="magnify" [size]="32"></ui-svg-icon>
   </button>
   <input

apps/shared/components/branch-selector/src/lib/branch-selector.component.ts

@@ -182,11 +182,19 @@ export class BranchSelectorComponent implements OnInit, AfterViewInit, ControlVa
       this.store.setQuery(this.store.formatBranch(this.value));
       this.closeAndClearAutocomplete();
 
-      // fix um focus auf ipad zu entfernen
+      // Fix um nach der Auswahl einer Filiale den Focus auf dem ipad zu verlieren
       this._elementRef?.nativeElement?.blur();
     }
   }
 
+  onClose(event?: MouseEvent) {
+    event?.preventDefault();
+    event?.stopImmediatePropagation();
+    this.store.setQuery(this.store.formatBranch(this.value));
+    this.closeAndClearAutocomplete();
+    this._elementRef?.nativeElement?.blur();
+  }
+
   onKeyup(event: KeyboardEvent) {
     if (event.key === 'Enter') {
       this.handleEnterEvent();

apps/shell/header/src/lib/header.component.html

@@ -1,6 +1,6 @@
 <header>
   <div class="brand">
-    <img src="/assets/images/hugendubel-logo.png" alt="Hugendubel" />
+    <img (dblclick)="navigateToPreview()" src="/assets/images/hugendubel-logo.png" alt="Hugendubel" />
   </div>
 
   <div class="navigation">

apps/shell/header/src/lib/header.component.ts

@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output, QueryList, ViewChildren } from '@angular/core';
+import { Router } from '@angular/router';
 import { ShellSectionToggleComponent } from './section-toggle/section-toggle.component';
 
 @Component({
@@ -19,7 +20,7 @@ export class ShellHeaderComponent implements OnInit {
 
   moreMenuOpen = false;
 
-  constructor() {}
+  constructor(private _router: Router) {}
 
   ngOnInit(): void {}
 
@@ -32,4 +33,8 @@ export class ShellHeaderComponent implements OnInit {
       }, 0);
     }
   }
+
+  navigateToPreview() {
+    this._router.navigate(['/preview']);
+  }
 }