Fix modal displaying and add image to application entity.

cerberus/src/app/core/components/add-application-button/add-application-button.component.ts

@@ -1,15 +1,23 @@
 import { Component, OnInit } from '@angular/core';
+import { CreateApplicationComponent } from 'src/app/applications/create-application/create-application.component';
+import { ModalService } from '../../services/modal.service';
 
 
 @Component({
   selector: 'app-add-application-button',
   template: `
-    <button class="secondaryy" type="button" matTooltip="Add a new application to monitor">
+    <button type="button" (click)="onClick()" matTooltip="Add a new application to monitor">
         <mat-icon>add</mat-icon>
         Add
     </button>
   `
 })
 export class AddApplicationButtonComponent {
-  
+  constructor(
+    private _modalService: ModalService
+  ) {}
+
+  onClick(): void {
+    this._modalService.open(CreateApplicationComponent);
+  }
 }

cerberus/src/app/core/components/modal/modal.component.html

@@ -0,0 +1,8 @@
+<div id="modal-container" [class]="this.displayed ? 'displayed' : 'hidden'">
+    <div id="overlay"></div>
+    <div id="modal-frame" #modalFrame>
+        <div id="modal-window">
+            <div #modalContent></div>
+        </div>
+    </div>
+</div>

cerberus/src/app/core/components/modal/modal.component.scss

@@ -0,0 +1,63 @@
+#modal-container {
+    &.hidden {
+        #overlay {
+            display: none;
+        }
+
+        #modal-frame {
+            height: 0;
+
+            #modal-window {
+                top: -500px;
+            }
+        }
+    }
+
+    &.displayed {
+        display: flex;
+
+        #overlay {
+            display: flex;
+        }
+
+        #modal-frame {
+            #modal-window {
+                top: 58px;
+            }
+        }
+    }
+
+    #overlay {
+        position: fixed;
+        top: 56px;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 100;
+    }
+
+    #modal-frame {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 101;
+        display: flex;
+        justify-content: center;
+        transition: height 1s ease;
+
+        #modal-window {
+            position: absolute;
+            background-color: #f6f6f6;
+            z-index: 102;
+            padding: 1rem;
+            border: 1px solid #bfbfbf;
+            border-top: none;
+            min-width: 600px;
+            max-height: 500px;
+            box-shadow: inset 0px 5px 5px -3px rgba(0,0,0,.2), 0px 5px 10px 1px rgba(0,0,0,.2);
+            transition: top 1s ease;
+        }
+    }
+}

cerberus/src/app/core/components/modal/modal.component.ts

@@ -0,0 +1,35 @@
+import { Component, ComponentFactoryResolver, ElementRef, OnInit, Type, ViewChild, ViewContainerRef } from "@angular/core";
+import { ModalService } from "../../services/modal.service";
+
+@Component({
+    selector: 'app-modal',
+    templateUrl: './modal.component.html',
+    styleUrls: ['./modal.component.scss']
+})
+export class ModalComponent implements OnInit {
+    displayed: boolean = false;
+    modalContentClass: Type<unknown> | undefined;
+    @ViewChild('modalFrame', { static: true }) modalFrame: ElementRef<HTMLDivElement> | undefined;
+    @ViewChild('modalContent', { read: ViewContainerRef }) modalContent: ViewContainerRef | undefined;
+
+    constructor(
+        private _componentFactoryResolver: ComponentFactoryResolver,
+        private _modalService: ModalService
+    ) {}
+
+    ngOnInit(): void {
+        this._modalService.modalContent.subscribe(modalContentClass => {
+            if (!modalContentClass) {
+                this.displayed = false;
+                window.setTimeout(() => {
+                    this.modalContent?.detach();
+                }, 1000);
+            } else {
+                this.displayed = true;
+                this.modalContent?.detach();
+                const componentFactory = this._componentFactoryResolver.resolveComponentFactory(modalContentClass);
+                this.modalContent?.createComponent<unknown>(componentFactory);
+            }
+        })
+    }
+}

cerberus/src/app/core/services/modal.service.ts

@@ -0,0 +1,21 @@
+import { Injectable, Type } from "@angular/core";
+import { BehaviorSubject, Observable } from "rxjs";
+
+@Injectable({
+    providedIn: 'root'
+})
+export class ModalService {
+    _modalContent: BehaviorSubject<Type<unknown> | undefined> = new BehaviorSubject<Type<unknown> | undefined>(undefined);
+
+    open(componentClass: Type<unknown>): void {
+        this._modalContent.next(componentClass);
+    }
+
+    close(): void {
+        this._modalContent.next(undefined);
+    }
+
+    get modalContent(): Observable<Type<unknown> | undefined> {
+        return this._modalContent.asObservable();
+    }
+}