Base view

Frontend/src/app/services/device.service.ts

@@ -0,0 +1,50 @@
+import { MediaMatcher } from '@angular/cdk/layout';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DeviceService {
+
+  private TABLET_WIDTH = 1000;
+  private DESKTOP_WIDTH = 1400;
+  
+  public orientation?: "landscape" | "portraid";
+  public flipPhone: boolean = false;
+  public width?: number;
+
+  constructor(
+    private mediaMacher: MediaMatcher
+  ) { 
+    this.checkScreen();
+    window.addEventListener("resize", () => {
+      this.checkScreen();
+    });
+  }
+  checkScreen() {
+    const isPortrait = window.outerWidth < window.outerHeight;
+    if (
+      isPortrait &&
+      window.outerWidth <this.TABLET_WIDTH
+    ) { 
+      this.flipPhone = true;
+    } else {
+      this.flipPhone = false;
+    }
+    this.orientation = isPortrait ? "portraid" : "landscape";
+    this.width = window.outerWidth;
+  }
+  isMobile(): boolean {
+    return window.outerWidth < this.TABLET_WIDTH;
+  }
+  isTablet(): boolean {
+    return window.outerWidth > this.TABLET_WIDTH && window.outerWidth < this.DESKTOP_WIDTH;
+  }
+  isDesktop(): boolean {
+    return window.outerWidth > this.DESKTOP_WIDTH;
+  }
+  toString() {
+    return `Orientation: ${this.orientation}, Width: ${this.width}, Flip: ${this.flipPhone}, IsMobile: ${this.isMobile()}
+      IsTablet: ${this.isTablet()}, IsDesktop: ${this.isDesktop()}`;
+  }
+}