Added stop in frontend

.gitignore

@@ -31,8 +31,8 @@ build/
 
 ### VS Code ###
 .vscode/
-/deployments/
-/config/
+backend/deployments/
+backend/config/
 
 ### Config Files ###
 backend/src/main/resources/application-local.properties

frontend/src/app/overview/overview.component.html

@@ -17,7 +17,7 @@
           <button (click)="startDeployment(element)" mat-menu-item>
             Start
           </button>
-          <button mat-menu-item>
+          <button (click)="stopDeployment(element)" mat-menu-item>
             Stop
           </button>
         </mat-menu>
@@ -35,7 +35,7 @@
     <ng-container matColumnDef="state">
       <th *matHeaderCellDef mat-header-cell> State</th>
       <td *matCellDef="let element" mat-cell>
-        <mat-chip>{{ element.state }}</mat-chip>
+        <mat-chip class="bg-red-500">{{ element.state }}</mat-chip>
       </td>
     </ng-container>
 

frontend/src/app/overview/overview.component.ts

@@ -41,7 +41,7 @@ import {interval} from 'rxjs';
 
   ],
   templateUrl: './overview.component.html',
-  styleUrl: './overview.component.css'
+  styleUrl: './overview.component.css',
 })
 export class OverviewComponent {
   dataSource: Array<DeploymentState> = [];
@@ -72,4 +72,10 @@ export class OverviewComponent {
       }
     });
   }
+
+  stopDeployment(element: DeploymentState) {
+
+    this.apiService.stopDeployment(element).subscribe(() => this.apiService.updateDeploymentStates());
+
+  }
 }