From 30d336fed9563c49f90bd33302e42a36d65e19a9 Mon Sep 17 00:00:00 2001
From: Florian THIERRY <florian.thierry72@gmail.com>
Date: Sun, 1 Aug 2021 17:29:42 +0200
Subject: [PATCH] Load applications from api.

---
 cerberus/src/app/app.module.ts                   |  4 +++-
 .../applications/status/status.component.html    | 14 ++++++++++++--
 .../applications/status/status.component.scss    | 16 ++++++++++++++++
 .../app/applications/status/status.component.ts  |  3 +++
 .../add-application-button.component.ts          | 15 +++++++++++++++
 .../src/app/core/services/application.service.ts |  4 ++++
 cerberus/src/app/header/header.component.html    |  5 +----
 cerberus/src/app/header/header.component.scss    |  4 ----
 cerberus/src/styles.scss                         |  6 ++++++
 9 files changed, 60 insertions(+), 11 deletions(-)
 create mode 100644 cerberus/src/app/core/components/add-application-button/add-application-button.component.ts

diff --git a/cerberus/src/app/app.module.ts b/cerberus/src/app/app.module.ts
index 6c3ee5b..b1d6819 100644
--- a/cerberus/src/app/app.module.ts
+++ b/cerberus/src/app/app.module.ts
@@ -9,6 +9,7 @@ import { HeaderComponent } from './header/header.component';
 import { StatusComponent } from './applications/status/status.component';
 import { ApplicationCardComponent } from './core/components/application-card/application-card.component';
 import {MatTooltipModule} from '@angular/material/tooltip'; 
+import { AddApplicationButtonComponent } from './core/components/add-application-button/add-application-button.component';
 
 @NgModule({
   declarations: [
@@ -17,7 +18,8 @@ import {MatTooltipModule} from '@angular/material/tooltip';
     CreateApplicationComponent,
     UiKitComponent,
     StatusComponent,
-    ApplicationCardComponent
+    ApplicationCardComponent,
+    AddApplicationButtonComponent
   ],
   imports: [
     RouterModule,
diff --git a/cerberus/src/app/applications/status/status.component.html b/cerberus/src/app/applications/status/status.component.html
index 538602b..e236a4c 100644
--- a/cerberus/src/app/applications/status/status.component.html
+++ b/cerberus/src/app/applications/status/status.component.html
@@ -1,3 +1,13 @@
-<div class="application-list">
+<div class="application-list" *ngIf="applications?.length; else noAnyApp">
     <app-application-card *ngFor="let application of applications" [application]="application"></app-application-card>
-</div>
\ No newline at end of file
+</div>
+<ng-template #noAnyApp>
+    <div class="no-any-app">
+        <p>
+            There is no any application.
+        </p>
+        <p>
+            Add one by clicking here: <app-add-application-button></app-add-application-button>
+        </p>
+    </div>
+</ng-template>
\ No newline at end of file
diff --git a/cerberus/src/app/applications/status/status.component.scss b/cerberus/src/app/applications/status/status.component.scss
index 9528d10..6b8e9ad 100644
--- a/cerberus/src/app/applications/status/status.component.scss
+++ b/cerberus/src/app/applications/status/status.component.scss
@@ -1,6 +1,22 @@
+@import '../../../colors.scss';
+
 .application-list {
     display: flex;
     flex-direction: row;
     justify-content: center;
     flex-wrap: wrap;
+}
+
+.no-any-app {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: $gray-icon-secondary;
+
+    p {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
 }
\ No newline at end of file
diff --git a/cerberus/src/app/applications/status/status.component.ts b/cerberus/src/app/applications/status/status.component.ts
index 164a40c..aead6be 100644
--- a/cerberus/src/app/applications/status/status.component.ts
+++ b/cerberus/src/app/applications/status/status.component.ts
@@ -28,5 +28,8 @@ export class StatusComponent implements OnInit {
       image: 'https://gitea.takiguchi.ovh/avatars/6c339db7805f158c21b4eed47758dbb1',
       status: 'started'
     } as Application);
+
+    this._applicationService.getAll()
+        .then(applications => this.applications = applications);
   }
 }
diff --git a/cerberus/src/app/core/components/add-application-button/add-application-button.component.ts b/cerberus/src/app/core/components/add-application-button/add-application-button.component.ts
new file mode 100644
index 0000000..7f9fd4f
--- /dev/null
+++ b/cerberus/src/app/core/components/add-application-button/add-application-button.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+
+@Component({
+  selector: 'app-add-application-button',
+  template: `
+    <button class="secondaryy" type="button" matTooltip="Add a new application to monitor">
+        <mat-icon>add</mat-icon>
+        Add
+    </button>
+  `
+})
+export class AddApplicationButtonComponent {
+  
+}
diff --git a/cerberus/src/app/core/services/application.service.ts b/cerberus/src/app/core/services/application.service.ts
index e0466ba..7c1118d 100644
--- a/cerberus/src/app/core/services/application.service.ts
+++ b/cerberus/src/app/core/services/application.service.ts
@@ -11,6 +11,10 @@ export class ApplicationService {
     private _httpClient: HttpClient
   ) {}
 
+  getAll(): Promise<Application[]> {
+    return this._httpClient.get<Application[]>('/api/applications').toPromise();
+  }
+
   add(application: Application): Promise<Application> {
     return this._httpClient.post<Application>('/api/applications', application).toPromise();
   }
diff --git a/cerberus/src/app/header/header.component.html b/cerberus/src/app/header/header.component.html
index 09f94b4..e13f22a 100644
--- a/cerberus/src/app/header/header.component.html
+++ b/cerberus/src/app/header/header.component.html
@@ -1,10 +1,7 @@
 <header>
     <img src="assets/images/logo.png" alt="Cerberus" matTooltip="Cerberus"/>
     <div class="actions">
-        <button class="secondaryy" type="button">
-            <mat-icon>add</mat-icon>
-            Add
-        </button>
+        <app-add-application-button></app-add-application-button>
         <div class="iconed-input">
             <mat-icon>search</mat-icon>
             <input placeholder="Search"/>
diff --git a/cerberus/src/app/header/header.component.scss b/cerberus/src/app/header/header.component.scss
index fc45ec6..8d4322d 100644
--- a/cerberus/src/app/header/header.component.scss
+++ b/cerberus/src/app/header/header.component.scss
@@ -23,8 +23,4 @@ header {
         position: absolute;
         right: 1rem;
     }
-}
-
-mat-icon {
-    font-size: 18px;
 }
\ No newline at end of file
diff --git a/cerberus/src/styles.scss b/cerberus/src/styles.scss
index d0c0cf4..f9bd9b7 100644
--- a/cerberus/src/styles.scss
+++ b/cerberus/src/styles.scss
@@ -14,9 +14,11 @@ body {
 
   ::selection {
     background: $blue;
+    color: white;
   }
   ::-moz-selection {
     background: $blue;
+    color: white;
   }
 }
 
@@ -184,4 +186,8 @@ mat-icon.mat-icon {
     position: absolute;
     left: 1rem;
   }
+}
+
+mat-icon.mat-icon {
+  font-size: 18px;
 }
\ No newline at end of file