WindowResolution

frontend/src/app/modals/window-size/window-size.component.html

@@ -7,12 +7,28 @@
     </div>
     <form (keydown.tab)="$event.stopPropagation()">
         <div class="inputFields" (click)="$event.stopPropagation()">
+            <!-- Resoultion Dropdown -->
             <mat-form-field appearance="fill">
+                <mat-label>Resolution</mat-label>
+                <mat-select [(value)]="selectedResolution">
+                    <mat-option value="custom">Custom</mat-option>
+                    <mat-option value="3840x2160">3840x2160 (4K UHD)</mat-option>
+                    <mat-option value="2560x1440">2560x1440 (QHD)</mat-option>
+                    <mat-option value="1920x1080">1920x1080 (Full HD)</mat-option>
+                    <mat-option value="1600x900">1600x900</mat-option>
+                    <mat-option value="1536x864">1536x864</mat-option>
+                    <mat-option value="1440x900">1440x900</mat-option>
+                    <mat-option value="1366x768">1366x768</mat-option>
+                    <mat-option value="1280x720">1280x720</mat-option>   
+                </mat-select>
+            </mat-form-field>
+
+            <!-- Custom Resolution Fields -->
+            <mat-form-field appearance="fill" *ngIf="selectedResolution === 'custom'">
                 <mat-label>Width</mat-label>
                 <input [(ngModel)]="this.width" name="Width" matInput tabindex="1">
             </mat-form-field>
-
-            <mat-form-field appearance="fill">
+            <mat-form-field appearance="fill" *ngIf="selectedResolution === 'custom'">
                 <mat-label>Height</mat-label>
                 <input [(ngModel)]="this.height" name="Height" matInput tabindex="2">
             </mat-form-field>

frontend/src/app/modals/window-size/window-size.component.ts

@@ -1,4 +1,4 @@
-import { Input, Component, ViewChild, Output, EventEmitter } from '@angular/core';
+import { Input, Component, ViewChild, Output, EventEmitter, SimpleChanges } from '@angular/core';
 import { MatMenuTrigger } from '@angular/material/menu';
 
 @Component({
@@ -9,20 +9,51 @@ import { MatMenuTrigger } from '@angular/material/menu';
 export class WindowSizeComponent {
 
   @ViewChild('appMenu') menuTrigger: MatMenuTrigger;
-  @Input() width: number;
-  @Input() height: number;
-  @Input() emulator: boolean;
-  @Output() sizeChange = new EventEmitter<{ width: number, height: number }>
+  @Input() width: number;  
+  @Input() height: number;  
+  @Input() emulator: boolean;  
+  @Output() sizeChange = new EventEmitter<{ width: number, height: number }>();
 
+  selectedResolution: string;
+  predefinedResolutions = ["3840x2160", "2560x1440", "1920x1080", "1600x900", "1536x864", "1440x900", "1366x768",  "1280x720"];
 
+  ngOnInit() {
+    // Initialize the selected resolution based on the current width and height
+    this.updateSelectedResolution();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.width || changes.height) {
+      if (this.width !== undefined && this.height !== undefined) {
+        this.updateSelectedResolution();
+      }
+    }
+  }
+
+  // Updates the selected resolution; sets to 'custom' if the current resolution is not in the predefined list
+  updateSelectedResolution() {
+    const currentResolution = `${this.width}x${this.height}`;
+    console.log(currentResolution)
+    if (this.predefinedResolutions.includes(currentResolution)) {
+      this.selectedResolution = currentResolution;
+    } else {
+      this.selectedResolution = 'custom';
+    }
+  }
+
+  // Sets the default window size and updates the selected resolution accordingly
   setDefaultWindowSize(): void {
-    this.width = 1920;
-    this.height = 1080;
+    this.selectedResolution = "1920x1080";
   }
-
+
+  // Saves the current window size and emits a size change event
   saveWindowSize(event: Event): void {
-    console.log(this.width, this.height)
-    this.sizeChange.emit({ width: this.width, height: this.height })
-   }
+    if (this.selectedResolution !== 'custom') {
+      const [resWidth, resHeight] = this.selectedResolution.split('x').map(Number);
+      this.width = resWidth;
+      this.height = resHeight;
+    }
+    this.sizeChange.emit({ width: this.width, height: this.height });
+  }
 
-}
+}