very very impornant

pipboyUI/src/app/components/LowerHeaders/Inventory/inventory-apps.component.ts

@@ -5,11 +5,13 @@ import {IframeAppComponent} from "../../apps/iframe-app.component";
 import {AbsListSelect} from "../AbsListSelect";
 import {IOService} from "../../../services/IOService";
 import {Subscription} from "rxjs";
+import {AbsApp} from "../../apps/AbsApp";
+import { ComponentType } from "@angular/cdk/portal";
 
 export interface InvApp {
   name: string;
   action: Function;
-  icon:string,
+  icon: string,
   matIcon: boolean,
   about: string
 }
@@ -17,21 +19,22 @@ export interface InvApp {
 @Component({
   selector: "app-inventory-apps-component",
   template: `
-  <div style="display: flex; flex-direction: row; justify-content: center; height: 84%">
-    <div style="width: 45%">
-      <div *ngFor="let el of elements" [class.menu-selected]="el == selected">
-        <p style="margin: 0 0">{{el.name}}</p>
+    <div style="display: flex; flex-direction: row; justify-content: center; height: 84%">
+      <div style="width: 45%">
+        <div *ngFor="let el of elements" [class.menu-selected]="el == selected">
+          <p style="margin: 0 0">{{el.name}}</p>
+        </div>
       </div>
-    </div>
-    <div style="width: 45%; display: flex; flex-direction: column">
-      <div style="text-align: center">
-        <mat-icon class="rotating-image" style="font-size: 100px; height: 100px; width: 100px" *ngIf="selected.matIcon">{{selected.icon}}</mat-icon>
-      </div>
-      <div style="">
-        <p>{{selected.about}}</p>
+      <div style="width: 45%; display: flex; flex-direction: column">
+        <div style="text-align: center">
+          <mat-icon class="rotating-image" style="font-size: 100px; height: 100px; width: 100px"
+                    *ngIf="selected.matIcon">{{selected.icon}}</mat-icon>
+        </div>
+        <div style="">
+          <p>{{selected.about}}</p>
+        </div>
       </div>
     </div>
-  </div>
   `
 })
 export class InventoryAppsComponent extends AbsListSelect {
@@ -50,17 +53,19 @@ export class InventoryAppsComponent extends AbsListSelect {
     this.createSub()
   }
 
+  openApp(app: any, data: any = {}) {
+    this.ngOnDestroy();
+    const ref = this.dialog.open(app, {width: '100%', height: '100%', disableClose: true, data: data});
+    ref.afterClosed().subscribe(() => this.createSub());
+  }
+
   override elements: InvApp[] = [
     {name: "Clock", action: () => {
-      this.ngOnDestroy();
-      const ref = this.dialog.open(ClockDialogApp, {width: '100%', height: '100%', disableClose: true});
-      ref.afterClosed().subscribe(() => this.createSub());
+      this.openApp(ClockDialogApp);
       }, matIcon: true, icon: "access_time", about: "Забытые часы самого тодда говарда. Он забыл их в своей прекрастной игре каллаут76."},
     {name: "1", action: () => {}, matIcon: true, icon:"help", about: "Кусок кала"},
     {name: "Rick Roll", action: () => {
-      this.ngOnDestroy();
-      const ref = this.dialog.open(IframeAppComponent, {width: '100%', height: '100%', disableClose: true, data: {url:"https://youtu.be/dQw4w9WgXcQ?output=embed"}})
-      ref.afterClosed().subscribe(() => this.createSub());
+      this.openApp(IframeAppComponent, {url:"https://youtu.be/dQw4w9WgXcQ?output=embed"})
       }, matIcon: true, icon: "record_voice_over", about: "Нет ничего лучше старого рикролла"}
   ]
   override selected: InvApp = this.elements[0];