Add status in model.

cerberus/src/app/applications/status/status.component.html

@@ -1,5 +1,5 @@
-<div class="application-list" *ngIf="applications?.length; else noAnyApp">
+<div class="application-list" *ngIf="applicationsStatus?.length; else noAnyApp">
-    <app-application-card *ngFor="let application of applications" [application]="application"></app-application-card>
+    <app-application-card *ngFor="let applicationStatus of applicationsStatus" [applicationStatus]="applicationStatus"></app-application-card>
 </div>
 <ng-template #noAnyApp>
     <div class="no-any-app">

cerberus/src/app/applications/status/status.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Application } from 'src/app/core/entities/Application';
+import { ApplicationStatus } from 'src/app/core/entities/ApplicationStatus';
 import { ApplicationService } from 'src/app/core/services/application.service';
 import { ModalService } from 'src/app/core/services/modal.service';
 
@@ -9,7 +10,7 @@ import { ModalService } from 'src/app/core/services/modal.service';
   styleUrls: ['./status.component.scss']
 })
 export class StatusComponent implements OnInit {
-  applications: Application[] = [];
+  applicationsStatus: ApplicationStatus[] = [];
 
   constructor(
     private _applicationService: ApplicationService,
@@ -17,21 +18,7 @@ export class StatusComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
-    this.applications.push({
+    this._applicationService.getAllStatus()
-      name: 'Codiki',
+        .then(applicationsStatus => this.applicationsStatus = applicationsStatus);
-      image: 'https://gitea.takiguchi.ovh/avatars/7639cce68867d968ec848e444d726c8b',
-      status: 'started'
-    } as Application, {
-      name: 'Minager',
-      image: 'https://gitea.takiguchi.ovh/avatars/2f5f6bc51f8e16f0467885d7bc0d1f8b',
-      status: 'stoped'
-    } as Application, {
-      name: 'Tamotsu',
-      image: 'https://gitea.takiguchi.ovh/avatars/6c339db7805f158c21b4eed47758dbb1',
-      status: 'started'
-    } as Application);
-
-    this._applicationService.getAll()
-        .then(applications => this.applications = applications);
   }
 }

cerberus/src/app/core/components/application-card/application-card.component.html

@@ -1,7 +1,7 @@
 <div class="application-card">
     <div class="logo">
-        <img [src]="application?.image" />
+        <img [src]="applicationStatus?.application?.image" />
-        <div class="status {{application?.status}}" matTooltip="This application is running"></div>
+        <div class="status {{applicationStatus?.status?.toLowerCase()}}" matTooltip="This application is running"></div>
     </div>
-    <div class="name">{{application?.name}}</div>
+    <div class="name">{{applicationStatus?.application?.name}}</div>
 </div>

cerberus/src/app/core/components/application-card/application-card.component.scss

@@ -29,7 +29,7 @@
                 background-image: linear-gradient(#5bc13e, #1fa200);
                 border: 2px solid #136900;
             }
-            &.stoped {
+            &.stopped {
                 background-image: linear-gradient(#c13e3e, #a20000);
                 border: 2px solid #770000;
             }

cerberus/src/app/core/components/application-card/application-card.component.ts

@@ -1,5 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { Application } from '../../entities/Application';
+import { ApplicationStatus } from '../../entities/ApplicationStatus';
 import { ApplicationService } from '../../services/application.service';
 
 interface AppDisplaying {
@@ -13,14 +14,10 @@ interface AppDisplaying {
   templateUrl: './application-card.component.html',
   styleUrls: ['./application-card.component.scss']
 })
-export class ApplicationCardComponent implements OnInit {
+export class ApplicationCardComponent {
-  @Input() application: Application | undefined;
+  @Input() applicationStatus: ApplicationStatus | undefined;
 
   constructor(
     private _applicationService: ApplicationService
   ) {}
-
-  ngOnInit(): void {
-    
-  }
 }

cerberus/src/app/core/entities/ApplicationStatus.ts

@@ -0,0 +1,6 @@
+import { Application } from "./Application";
+
+export interface ApplicationStatus {
+    application: Application;
+    status: string
+}

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

@@ -1,6 +1,7 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Application } from '../entities/Application';
+import { ApplicationStatus } from '../entities/ApplicationStatus';
 
 @Injectable({
   providedIn: 'root'
@@ -11,8 +12,8 @@ export class ApplicationService {
     private _httpClient: HttpClient
   ) {}
 
-  getAll(): Promise<Application[]> {
+  getAllStatus(): Promise<ApplicationStatus[]> {
-    return this._httpClient.get<Application[]>('/api/applications').toPromise();
+    return this._httpClient.get<ApplicationStatus[]>('/api/applications/status').toPromise();
   }
 
   add(application: Application): Promise<Application> {