From 82053e400222810f45e89f85cc8eccc75cd8cf2b Mon Sep 17 00:00:00 2001
From: Florian THIERRY <florian.thierry72@gmail.com>
Date: Sat, 7 Aug 2021 23:24:33 +0200
Subject: [PATCH] Add button to edit application.

---
 .../applications/status/status.component.html |  18 +--
 .../application-card.component.html           |   5 +
 .../application-card.component.scss           |  14 +++
 .../application-card.component.ts             |   8 +-
 cerberus/src/components-styles/button.scss    | 104 ++++++++++--------
 5 files changed, 93 insertions(+), 56 deletions(-)

diff --git a/cerberus/src/app/applications/status/status.component.html b/cerberus/src/app/applications/status/status.component.html
index c8ff217..1fe7cd1 100644
--- a/cerberus/src/app/applications/status/status.component.html
+++ b/cerberus/src/app/applications/status/status.component.html
@@ -1,13 +1,13 @@
 <div class="application-list" *ngIf="applicationsStatus?.length; else noAnyApp">
-    <app-application-card *ngFor="let applicationStatus of applicationsStatus" [applicationStatus]="applicationStatus"></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">
-        <p>
-            There is no any application.
-        </p>
-        <p>
-            Add one by clicking here: <app-add-application-button></app-add-application-button>
-        </p>
-    </div>
+  <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/core/components/application-card/application-card.component.html b/cerberus/src/app/core/components/application-card/application-card.component.html
index 4f13caf..bc9d6bd 100644
--- a/cerberus/src/app/core/components/application-card/application-card.component.html
+++ b/cerberus/src/app/core/components/application-card/application-card.component.html
@@ -2,6 +2,11 @@
     <div class="logo">
         <img [src]="applicationStatus?.application?.image" />
         <div class="status {{applicationStatus?.status?.toLowerCase()}}" matTooltip="This application is running"></div>
+        <button class="icon secondary"
+                (click)="edit()"
+                matTooltip="Edit the application details">
+            <mat-icon>edit</mat-icon>
+        </button>
     </div>
     <div class="name">{{applicationStatus?.application?.name}}</div>
 </div>
\ No newline at end of file
diff --git a/cerberus/src/app/core/components/application-card/application-card.component.scss b/cerberus/src/app/core/components/application-card/application-card.component.scss
index 478196a..d858a6a 100644
--- a/cerberus/src/app/core/components/application-card/application-card.component.scss
+++ b/cerberus/src/app/core/components/application-card/application-card.component.scss
@@ -7,6 +7,12 @@
     
     .logo {
         position: relative;
+        
+        &:hover {
+            button {
+                opacity: 1;
+            }
+        }
 
         img {
             width: 164px;
@@ -34,6 +40,14 @@
                 border: 2px solid #770000;
             }
         }
+        
+        button {
+            position: absolute;
+            top: 5px;
+            right: 5px;
+            opacity: 0;
+            transition: opacity .2s ease;
+        }
     }
 
 
diff --git a/cerberus/src/app/core/components/application-card/application-card.component.ts b/cerberus/src/app/core/components/application-card/application-card.component.ts
index 754d506..adc3fa8 100644
--- a/cerberus/src/app/core/components/application-card/application-card.component.ts
+++ b/cerberus/src/app/core/components/application-card/application-card.component.ts
@@ -2,6 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 import { Application } from '../../entities/Application';
 import { ApplicationStatus } from '../../entities/ApplicationStatus';
 import { ApplicationService } from '../../services/application.service';
+import { ModalService } from '../../services/modal.service';
 
 interface AppDisplaying {
   name: string,
@@ -18,6 +19,11 @@ export class ApplicationCardComponent {
   @Input() applicationStatus: ApplicationStatus | undefined;
 
   constructor(
-    private _applicationService: ApplicationService
+    private _applicationService: ApplicationService,
+    private _modalService: ModalService
   ) {}
+
+  edit(): void {
+    // this._modalService.open();
+  }
 }
diff --git a/cerberus/src/components-styles/button.scss b/cerberus/src/components-styles/button.scss
index ff8e761..d279a29 100644
--- a/cerberus/src/components-styles/button.scss
+++ b/cerberus/src/components-styles/button.scss
@@ -1,50 +1,62 @@
-@import '../colors.scss';
+@import "../colors.scss";
+
+button, a.button {
+  background-image: linear-gradient(
+    $btn-primary-background-top,
+    $btn-primary-background-bottom
+  );
+  color: white;
+  border: solid 1px $btn-primary-background-bottom;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 5rem;
+  border-radius: 0.3rem;
+  padding: 0.15rem 1rem;
+  font-weight: 600;
+  margin: 0.2rem 0.5rem;
+
+  &:active {
+    border-color: $btn-primary-active-border;
+    background-image: linear-gradient(
+      $btn-primary-active-background-top,
+      $btn-primary-active-background-bottom
+    );
+  }
+
+  &.secondary {
+    background-image: none;
+    background-color: $btn-secondary-background;
+    border-color: $btn-secondary-border;
+    color: #222;
+    font-weight: 500;
 
-button {
-    // background-color: $blue;
-    background-image: linear-gradient($btn-primary-background-top, $btn-primary-background-bottom);
-    color: white;
-    border: solid 1px $btn-primary-background-bottom;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-width: 5rem;
-    border-radius: .3rem;
-    padding: .15rem 1rem;
-    font-weight: 600;
-    margin: .2rem .5rem;
-  
     &:active {
-      border-color: $btn-primary-active-border;
-      background-image: linear-gradient($btn-primary-active-background-top, $btn-primary-active-background-bottom);
+      background-color: $btn-secondary-active-background;
+      border-color: $btn-secondary-active-border;
     }
-  
-    &.secondary {
-      background-image: none;
-      background-color: $btn-secondary-background;
-      border-color: $btn-secondary-border;
-      color: #222;
-      font-weight: 500;
-  
-      &:active {
-        background-color: $btn-secondary-active-background;
-        border-color: $btn-secondary-active-border;
-      }
+  }
+
+  &.help {
+    border-radius: 10em;
+    padding: 0;
+    background-image: none;
+    background-color: #eeeeee;
+    color: #333;
+    border-color: #bbb;
+    min-width: min-content;
+    width: 1.5rem;
+    height: 1.5rem;
+
+    &:hover {
+      background-color: #dddddd;
     }
-  
-    &.help {
-      border-radius: 10em;
-      padding: 0;
-      background-image: none;
-      background-color: #eeeeee;
-      color: #333;
-      border-color: #bbb;
-      min-width: min-content;
-      width: 1.5rem;
-      height: 1.5rem;
-  
-      &:hover {
-        background-color: #dddddd;
-      }
-    }
-  }
\ No newline at end of file
+  }
+
+  &.icon {
+    padding-left: 0;
+    padding-right: 0;
+    min-width: 25px;
+    width: 25px;
+  }
+}