Lot of improvements.

cerberus/package-lock.json

@@ -20504,6 +20504,8 @@
       "integrity": "sha512-v3+E0Ucu2xWJMOJ2fA/q9pDT/hlxHftHGPUay1/1cTgyPV5JTHFdO9hqo837Sx2s9vKBMTt5gO+lhF95PO6J+g==",
       "dev": true,
       "requires": {
+        "@angular/compiler": "9.0.0",
+        "@angular/core": "9.0.0",
         "app-root-path": "^3.0.0",
         "aria-query": "^3.0.0",
         "axobject-query": "2.0.2",

cerberus/src/app/app-routing.module.ts

@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { CreateApplicationComponent } from './applications/create-application/create-application.component';
-import { UiKitComponent } from './ui-kit/ui-kit.component';
-
-const routes: Routes = [
-  {path: '', component: CreateApplicationComponent}
-];
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload' })],
-  exports: [RouterModule]
-})
-export class AppRoutingModule { }

cerberus/src/app/app.component.html

@@ -1 +1,4 @@
-<router-outlet></router-outlet>
+<app-header></app-header>
+<div class="content">
+    <router-outlet></router-outlet>
+</div>

cerberus/src/app/app.component.scss

@@ -0,0 +1,4 @@
+.content {
+    margin-top: 56px;
+    padding: 1rem 0;
+}

cerberus/src/app/app.module.ts

@@ -1,33 +1,30 @@
 import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { AppRoutingModule } from './app-routing.module';
+import { RouterModule } from '@angular/router';
+import { AppRoutingModule } from './app.routing';
 import { AppComponent } from './app.component';
+import { SharedModule } from './core/shared.module';
 import { UiKitComponent } from './ui-kit/ui-kit.component';
 import { CreateApplicationComponent } from './applications/create-application/create-application.component';
-import { SelectComponent } from './core/components/select/select.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import {MatIconModule} from '@angular/material/icon';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { HttpClientModule } from '@angular/common/http';
+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'; 
 
 @NgModule({
   declarations: [
     AppComponent,
-    UiKitComponent,
+    HeaderComponent,
     CreateApplicationComponent,
-    SelectComponent,
+    UiKitComponent,
+    StatusComponent,
+    ApplicationCardComponent
   ],
   imports: [
-    BrowserModule,
+    RouterModule,
+    SharedModule,
     AppRoutingModule,
-    BrowserAnimationsModule,
-    MatIconModule,
-    FormsModule,
-    ReactiveFormsModule,
-    HttpClientModule
+    MatTooltipModule
   ],
-  providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
 export class AppModule { }

cerberus/src/app/app.routing.ts

@@ -0,0 +1,30 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { CreateApplicationComponent } from './applications/create-application/create-application.component';
+import { StatusComponent } from './applications/status/status.component';
+import { SharedModule } from './core/shared.module';
+import { UiKitComponent } from './ui-kit/ui-kit.component';
+
+const ApplicationRoutes: Routes = [
+  {
+    path: 'uikit',
+    component: UiKitComponent
+  },
+  {
+    path: 'applications/add',
+    component: CreateApplicationComponent
+  },
+  {
+    path: '**',
+    component: StatusComponent
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(ApplicationRoutes, { onSameUrlNavigation: 'reload' }),
+  ],
+  exports: [RouterModule],
+})
+export class AppRoutingModule { }

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

@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-applications',
+  template: `
+    <h1>Applications</h1>
+    <!-- <router-outlet></router-outlet> -->
+  `,
+})
+export class ApplicationsComponent implements OnInit {
+
+  constructor() {}
+
+  ngOnInit(): void {
+  }
+
+}

cerberus/src/app/applications/create-application/create-application.component.html

@@ -1,15 +1,17 @@
 <div class="card">
   <h1>Add a new application</h1>
   <form [formGroup]="form" (ngSubmit)="onSubmit()" ngNativeValidate>
-    <div class="row">
-      <input formControlName="name" placeholder="Application name" required/>
+    <div class="form-control">
+      <label for="name">Application name</label>
+      <input id="name" formControlName="name" placeholder="Enter application name" required/>
     </div>
-    <div class="row">
-      <input formControlName="serviceName" placeholder="Service name" required/>
+    <div class="form-control">
+      <label for="service-name">Service name</label>
+      <input id="service-name" formControlName="serviceName" placeholder="Enter service name" required/>
     </div>
-    <div class="row">
+    <div class="form-control">
       <label for="service-type">Type:</label>
-      <select formControlName="serviceType">
+      <select id="service-type" formControlName="serviceType" placeholder="Enter service type">
         <option *ngFor="let type of serviceTypes" [value]="type.value">
           {{type.label}}
         </option>
@@ -20,4 +22,4 @@
       <button type="submit">Save</button>
     </div>
   </form>
-</div>
+</div>

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

@@ -0,0 +1,3 @@
+<div class="application-list">
+    <app-application-card *ngFor="let application of applications" [application]="application"></app-application-card>
+</div>

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

@@ -0,0 +1,6 @@
+.application-list {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    flex-wrap: wrap;
+}

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

@@ -0,0 +1,32 @@
+import { Component, OnInit } from '@angular/core';
+import { Application } from 'src/app/core/entities/Application';
+import { ApplicationService } from 'src/app/core/services/application.service';
+
+@Component({
+  selector: 'app-status',
+  templateUrl: './status.component.html',
+  styleUrls: ['./status.component.scss']
+})
+export class StatusComponent implements OnInit {
+  applications: Application[] = [];
+
+  constructor(
+    private _applicationService: ApplicationService
+  ) {}
+
+  ngOnInit(): void {
+    this.applications.push({
+      name: 'Codiki',
+      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);
+  }
+}

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

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

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

@@ -0,0 +1,44 @@
+.application-card {
+    margin: 2rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    
+    .logo {
+        position: relative;
+
+        img {
+            width: 164px;
+            height: 164px;
+            background-color: #fff;
+            border-radius: 4px;
+            box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.2);
+        }
+
+        .status {
+            width: 2rem;
+            height: 2rem;
+            
+            border-radius: 10em;
+            position: absolute;
+            bottom: 10px;
+            right: 5px;
+
+            &.started {
+                background-image: linear-gradient(#5bc13e, #1fa200);
+                border: 2px solid #136900;
+            }
+            &.stoped {
+                background-image: linear-gradient(#c13e3e, #a20000);
+                border: 2px solid #770000;
+            }
+        }
+    }
+
+
+    .name {
+        margin: .5rem;
+        font-weight: 500;
+    }
+}

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

@@ -0,0 +1,26 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Application } from '../../entities/Application';
+import { ApplicationService } from '../../services/application.service';
+
+interface AppDisplaying {
+  name: string,
+  image: string,
+  status: string
+}
+
+@Component({
+  selector: 'app-application-card',
+  templateUrl: './application-card.component.html',
+  styleUrls: ['./application-card.component.scss']
+})
+export class ApplicationCardComponent implements OnInit {
+  @Input() application: Application | undefined;
+
+  constructor(
+    private _applicationService: ApplicationService
+  ) {}
+
+  ngOnInit(): void {
+    
+  }
+}

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

@@ -3,4 +3,6 @@ export interface Application {
   name: string;
   serviceName: string;
   serviceType: string;
+  image: string;
+  status: string;
 }

cerberus/src/app/core/shared.module.ts

@@ -0,0 +1,35 @@
+import { HttpClientModule } from "@angular/common/http";
+import { NgModule } from "@angular/core";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { MatIconModule } from "@angular/material/icon";
+import { BrowserModule } from "@angular/platform-browser";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { RouterModule } from "@angular/router";
+import { AppRoutingModule } from "../app.routing";
+import { ApplicationCardComponent } from './components/application-card/application-card.component';
+
+@NgModule({
+    imports: [
+        BrowserModule,
+        AppRoutingModule,
+        BrowserAnimationsModule,
+        MatIconModule,
+        FormsModule,
+        ReactiveFormsModule,
+        HttpClientModule,
+        RouterModule,
+    ],
+    exports: [
+        BrowserModule,
+        AppRoutingModule,
+        BrowserAnimationsModule,
+        MatIconModule,
+        FormsModule,
+        ReactiveFormsModule,
+        HttpClientModule,
+        RouterModule,
+    ]
+})
+export class SharedModule {
+
+}

cerberus/src/app/header/header.component.html

@@ -0,0 +1,13 @@
+<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>
+        <div class="iconed-input">
+            <mat-icon>search</mat-icon>
+            <input placeholder="Search"/>
+        </div>
+    </div>
+</header>

cerberus/src/app/header/header.component.scss

@@ -0,0 +1,30 @@
+@import '../../colors.scss';
+
+header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    background-image: linear-gradient($gray-top, $gray-bottom);
+    display: flex;
+    flex: 1 0;
+    height: 56px;
+    justify-content: center;
+    align-items: center;
+
+    img {
+        width: 42px;
+        height: 42px;
+    }
+
+    .actions {
+        display: flex;
+        flex-direction: row;
+        position: absolute;
+        right: 1rem;
+    }
+}
+
+mat-icon {
+    font-size: 18px;
+}

cerberus/src/app/header/header.component.ts

@@ -0,0 +1,11 @@
+import { Component } from "@angular/core";
+
+
+@Component({
+    selector: 'app-header',
+    templateUrl: './header.component.html',
+    styleUrls: ['./header.component.scss']
+})
+export class HeaderComponent {
+
+}

cerberus/src/colors.scss

@@ -0,0 +1,18 @@
+$blue: #017aff;
+
+$btn-primary-border: #2f8df9;
+$btn-primary-background-top: #4ca4f6;
+$btn-primary-background-bottom: #0073f7;
+$btn-primary-active-border: #007cf8;
+$btn-primary-active-background-top: #0093f8;
+$btn-primary-active-background-bottom: #0064dd;
+
+$btn-secondary-border: #c3c5c6;
+$btn-secondary-background: #ffffff;
+$btn-secondary-active-border: #c8c8c8;
+$btn-secondary-active-background: #f0f0f0;
+
+$gray-top: #e6e6e6;
+$gray-bottom: #cfcfcf;
+
+$gray-icon-secondary: #777777;

cerberus/src/index.html

@@ -12,5 +12,9 @@
 </head>
 <body>
   <app-root></app-root>
+  <!-- Necessary for onsenUI loading -->
+  <script>
+    window.setImmediate = window.setTimeout;
+  </script>
 </body>
 </html>

cerberus/src/styles.scss

@@ -1,29 +1,23 @@
+@import './colors.scss';
+
 /* You can add global styles to this file, and also import other style files */
 @font-face {
   font-family: helvetica;
   src: url(assets/fonts/Helvetica.ttf);
 }
 
-
-$blue: #017aff;
-
-$btn-primary-border: #2f8df9;
-$btn-primary-background-top: #4ca4f6;
-$btn-primary-background-bottom: #0073f7;
-$btn-primary-active-border: #007cf8;
-$btn-primary-active-background-top: #0093f8;
-$btn-primary-active-background-bottom: #0064dd;
-
-$btn-secondary-border: #c3c5c6;
-$btn-secondary-background: #ffffff;
-$btn-secondary-active-border: #c8c8c8;
-$btn-secondary-active-background: #f0f0f0;
-
 $font-size: 14px;
 
 body {
   font-size: $font-size;
   font-family: helvetica;
+
+  ::selection {
+    background: $blue;
+  }
+  ::-moz-selection {
+    background: $blue;
+  }
 }
 
 button {
@@ -83,10 +77,25 @@ div.card {
   margin: 2rem;
 }
 
-label {
+.form-control {
   display: flex;
-  flex: 0 !important;
-  margin-right: .5rem;
+  flex-direction: column;
+  margin: 1rem 0;
+
+  & > * {
+    display: flex;
+    flex: 1 0;
+  }
+
+  & > input, select {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
+label {
+  margin-bottom: .2rem;
+  font-weight: 500;
 }
 
 input {
@@ -95,7 +104,10 @@ input {
   box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.1);
   padding: .2rem .5rem;
   border-radius: .2rem;
-  width: 3rem;
+
+  &:focus {
+    outline: 2px solid $blue;
+  }
 }
 
 select {
@@ -110,7 +122,6 @@ select {
   font-weight: 600;
   margin: .2rem .5rem;
   font-size: $font-size;
-  width: 10em;
 
   &::-ms-expand {
     display: none;
@@ -145,12 +156,32 @@ div.row {
     display: flex;
     flex: 1 0;
   }
-
-  & > input, select {
-    margin-left: 0;
-    margin-right: 0;
-  }
 }
 
 html, body { height: 100%; }
 body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+
+
+mat-icon.mat-icon {
+  display: flex;
+  align-items: center;
+  width: 18px;
+  height: 18px;
+}
+
+
+.iconed-input {
+  display: flex;
+  position: relative;
+  align-items: center;
+
+  input {
+    padding-left: 2rem;
+  }
+
+  mat-icon {
+    color: $gray-icon-secondary;
+    position: absolute;
+    left: 1rem;
+  }
+}