florian/Cerberus
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Lot of improvements.

Browse Source
This commit is contained in:
Florian THIERRY - Takiguchi
2021-08-01 17:19:13 +02:00
parent 935d8fc790
commit 0d9340f220
23 changed files with 368 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
cerberus/src/app/app-routing.module.ts
View File

@@ -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 { }

5
cerberus/src/app/app.component.html
View File

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

4
cerberus/src/app/app.component.scss
View File

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

33
cerberus/src/app/app.module.ts
View File

@@ -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 { }

30
cerberus/src/app/app.routing.ts Normal file
View File

@@ -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 { }

17
cerberus/src/app/applications/applications.component.ts Normal file
View File

@@ -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 {
}
}

16
cerberus/src/app/applications/create-application/create-application.component.html
View File

@@ -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>

3
cerberus/src/app/applications/status/status.component.html Normal file
View File

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

6
cerberus/src/app/applications/status/status.component.scss Normal file
View File

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

32
cerberus/src/app/applications/status/status.component.ts Normal file
View File

@@ -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);
}
}

7
cerberus/src/app/core/components/application-card/application-card.component.html Normal file
View File

@@ -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>

44
cerberus/src/app/core/components/application-card/application-card.component.scss Normal file
View File

@@ -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;
}
}

26
cerberus/src/app/core/components/application-card/application-card.component.ts Normal file
View File

@@ -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 {
}
}

2
cerberus/src/app/core/entities/Application.ts
View File

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

35
cerberus/src/app/core/shared.module.ts Normal file
View File

@@ -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 {
}

13
cerberus/src/app/header/header.component.html Normal file
View File

@@ -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>

30
cerberus/src/app/header/header.component.scss Normal file
View File

@@ -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;
}

11
cerberus/src/app/header/header.component.ts Normal file
View File

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