From 01c00857bcafca7d59b0000bb82a82ad9c5e313d Mon Sep 17 00:00:00 2001
From: David Weinholz <david-weinholz@web.de>
Date: Fri, 7 Dec 2018 17:07:33 +0100
Subject: [PATCH] fixed

---
 .../baseClass/abstract-base-class.ts          |  9 +++
 .../virtualmachines/vmOverview.component.html |  9 +--
 .../virtualmachines/vmOverview.component.ts   |  6 +-
 .../volumeOverview.component.html             | 72 ++++++++++++-------
 .../volumeOverview.component.ts               | 25 +------
 5 files changed, 70 insertions(+), 51 deletions(-)

diff --git a/src/app/shared_modules/baseClass/abstract-base-class.ts b/src/app/shared_modules/baseClass/abstract-base-class.ts
index 3bf03a68a7..680a3a4fa9 100644
--- a/src/app/shared_modules/baseClass/abstract-base-class.ts
+++ b/src/app/shared_modules/baseClass/abstract-base-class.ts
@@ -94,12 +94,21 @@ export abstract class AbstractBaseClasse {
         }
     }
 
+    public setCollapseStatus(id:string,status:boolean):void{
+
+            this.collapse_status[id] = status;
+
+    }
+
+
+
     /**
      * Switch status of collapse.
      * @param {string} id
      */
     public switchCollapseStatus(id: string) {
         this.collapse_status[id] = !this.getCollapseStatus(id);
+        console.log(this.collapse_status[id])
     }
 
 
diff --git a/src/app/virtualmachines/vmOverview.component.html b/src/app/virtualmachines/vmOverview.component.html
index 1eafab4c38..e0879d806f 100755
--- a/src/app/virtualmachines/vmOverview.component.html
+++ b/src/app/virtualmachines/vmOverview.component.html
@@ -133,9 +133,10 @@
                     </td>
 
                     <td>
-                        <div (clickOutside)="closeCollapse(vm.openstackid);"
+                        <div (clickOutside)="setCollapseStatus(vm.openstackid,false)"
                              *ngIf="vm.status !=vm_statuses[vm_statuses.DELETED]"
-                             class="btn-group {{collapse_status[vm.openstackid]}}">
+                             [ngClass]="getCollapseStatus(vm.openstackid) ? 'btn-group open': 'btn-group'"
+                             >
 
                             <button class="btn btn-secondary" type="button"
                                     *ngIf="vm.status !=vm_statuses[vm_statuses.DELETED]"
@@ -143,10 +144,10 @@
 
                                 Create Snapshot
                             </button>
-                            <button  class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
+                            <button class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
                                     data-toggle="dropdown"
                                     type="button" aria-haspopup="true" aria-expanded="false"
-                                    (click)="getCollapseStatus(vm.openstackid)"></button>
+                                    (click)="switchCollapseStatus(vm.openstackid)"></button>
                             <ul class="dropdown-menu " role="menu">
                                 <li role="menuitem"
                                     *ngIf="vm.status ==vm_statuses[vm_statuses.ACTIVE]">
diff --git a/src/app/virtualmachines/vmOverview.component.ts b/src/app/virtualmachines/vmOverview.component.ts
index f3acff0dee..ea96bbaabd 100644
--- a/src/app/virtualmachines/vmOverview.component.ts
+++ b/src/app/virtualmachines/vmOverview.component.ts
@@ -85,7 +85,6 @@ export class VmOverviewComponent extends FilterBaseClass implements OnInit {
     }
 
 
-
     toggleTab(tabString: string) {
         this.tab = tabString;
     }
@@ -249,7 +248,10 @@ export class VmOverviewComponent extends FilterBaseClass implements OnInit {
     getVms(elixir_id: string): void {
         this.virtualmachineservice.getVmsFromLoggedInUser().subscribe(vms => {
                 this.vms_content = vms;
+
                 for (let vm of this.vms_content) {
+                    this.setCollapseStatus(vm.openstackid, false)
+
                     if (vm.created_at != '') {
                         vm.created_at = new Date(parseInt(vm.created_at) * 1000).toLocaleDateString();
                     }
@@ -300,6 +302,8 @@ export class VmOverviewComponent extends FilterBaseClass implements OnInit {
         this.virtualmachineservice.getAllVM().subscribe(vms => {
                 this.vms_content = vms;
                 for (let vm of this.vms_content) {
+                    this.setCollapseStatus(vm.openstackid, false)
+
 
                     if (vm.created_at != '') {
                         vm.created_at = new Date(parseInt(vm.created_at) * 1000).toLocaleDateString();
diff --git a/src/app/virtualmachines/volumeOverview.component.html b/src/app/virtualmachines/volumeOverview.component.html
index 81e0f8a832..1895283e83 100644
--- a/src/app/virtualmachines/volumeOverview.component.html
+++ b/src/app/virtualmachines/volumeOverview.component.html
@@ -1,7 +1,8 @@
 <div *ngIf="isLoaded==false" class="loader"></div>
 <div *ngIf="isLoaded">
     <button type="button" style="margin-bottom: 5px" class="btn btn-secondary"
-            (click)="selectedProject = undefined;selected_vm=undefined; createModal.show();">Create & Attach Volume
+            (click)="selectedProject = undefined;selected_vm=undefined; createModal.show();">Create
+        & Attach Volume
     </button>
 </div>
 
@@ -30,13 +31,16 @@
                     <tbody>
                     <tr *ngFor="let volume of volumes">
                         <td>{{volume.volume_project}}</td>
-                        <td *ngIf="volume.volume_virtualmachine">{{volume.volume_virtualmachine.name}}</td>
+                        <td *ngIf="volume.volume_virtualmachine">
+                            {{volume.volume_virtualmachine.name}}
+                        </td>
                         <td *ngIf="!volume.volume_virtualmachine"></td>
                         <td>{{volume.volume_name}}</td>
                         <td>{{volume.volume_size }} GB</td>
                         <td>
-                            <div (clickOutside)="closeCollapse(volume.volume_openstackid)"
-                                 class="btn-group {{collapse_status[volume.volume_openstackid]}}">
+                            <div
+                                    (clickOutside)="setCollapseStatus(volume.volume_openstackid,false)"
+                                    [ngClass]="getCollapseStatus(volume.volume_openstackid) ? 'btn-group open': 'btn-group'">
                                 <button class="btn btn-secondary"
                                         (click)="setRequestStatus(0);setSelectedVolume(volume);verifyModal.show();"
                                         type="button">Delete Volume
@@ -82,19 +86,22 @@
     </div>
 </div>
 
-<div bsModal #resultModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Label"
+<div bsModal #resultModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
+     aria-labelledby="Label"
      aria-hidden="true">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h4 class="modal-title" *ngIf="volume_status == 0 || volume_status == 3 || volume_status == 5">
+                <h4 class="modal-title"
+                    *ngIf="volume_status == 0 || volume_status == 3 || volume_status == 5">
                     Waiting </h4>
                 <h4 class="modal-title"
                     *ngIf="volume_status == 1 || volume_status == 4 || volume_status == 6 || volume_status == 8">
                     Success </h4>
                 <h4 class="modal-title" *ngIf="volume_status == 2"> Error </h4>
 
-                <button type="button" class="close" style="cursor:pointer" (click)="resultModal.hide()"
+                <button type="button" class="close" style="cursor:pointer"
+                        (click)="resultModal.hide()"
                         aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
@@ -110,7 +117,8 @@ <h4 class="modal-title" *ngIf="volume_status == 2"> Error </h4>
                 </div>
 
                 <div class="alert alert-info" role="alert" *ngIf="volume_status == 5">
-                    Attaching Volume {{selected_volume?.volume_name}} to Virtualmachine {{selected_vm.name}}...
+                    Attaching Volume {{selected_volume?.volume_name}} to Virtualmachine
+                    {{selected_vm.name}}...
                     <i class="fa fa-spinner fa-spin"
                        style="font-size:24px"></i>
                 </div>
@@ -142,7 +150,8 @@ <h4 class="modal-title" *ngIf="volume_status == 2"> Error </h4>
 
 
             <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" (click)="volume_status = 0;resultModal.hide()">Close
+                <button type="button" class="btn btn-secondary"
+                        (click)="volume_status = 0;resultModal.hide()">Close
                 </button>
             </div>
 
@@ -150,13 +159,15 @@ <h4 class="modal-title" *ngIf="volume_status == 2"> Error </h4>
     </div><!-- /.modal-dialog -->
 </div><!-- /.modal -->
 
-<div bsModal #verifyModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Label"
+<div bsModal #verifyModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
+     aria-labelledby="Label"
      aria-hidden="true">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <h4 class="modal-title">Delete Volume</h4>
-                <button type="button" class="close" style="cursor:pointer" (click)="verifyModal.hide()"
+                <button type="button" class="close" style="cursor:pointer"
+                        (click)="verifyModal.hide()"
                         aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
@@ -191,13 +202,15 @@ <h4 class="modal-title">Delete Volume</h4>
 </div><!-- /.modal -->
 
 
-<div bsModal #attachModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Label"
+<div bsModal #attachModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
+     aria-labelledby="Label"
      aria-hidden="true">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <h4 class="modal-title">Attach Volume</h4>
-                <button type="button" class="close" style="cursor: pointer" (click)="attachModal.hide()"
+                <button type="button" class="close" style="cursor: pointer"
+                        (click)="attachModal.hide()"
                         aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
@@ -231,13 +244,15 @@ <h4 class="modal-title">Attach Volume</h4>
 </div><!-- /.modal -->
 
 
-<div bsModal #renameModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Label"
+<div bsModal #renameModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
+     aria-labelledby="Label"
      aria-hidden="true">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <h4 class="modal-title">Rename Volume</h4>
-                <button type="button" class="close" style="cursor:pointer" (click)="renameModal.hide()"
+                <button type="button" class="close" style="cursor:pointer"
+                        (click)="renameModal.hide()"
                         aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
@@ -260,20 +275,23 @@ <h4 class="modal-title">Rename Volume</h4>
                 </button>
 
                 <button class="btn  btn-danger col-md-4" type="reset"
-                        (click)="selected_volume=undefined;newName.value='';renameModal.hide();">Cancel
+                        (click)="selected_volume=undefined;newName.value='';renameModal.hide();">
+                    Cancel
                 </button>
             </div>
         </div><!-- /.modal-content -->
     </div><!-- /.modal-dialog -->
 </div><!-- /.modal -->
 
-<div bsModal #createModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Label"
+<div bsModal #createModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
+     aria-labelledby="Label"
      aria-hidden="true">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <h4 class="modal-title">Create & Attach Volume</h4>
-                <button type="button" class="close" style="cursor: pointer" (click)="createModal.hide()"
+                <button type="button" class="close" style="cursor: pointer"
+                        (click)="createModal.hide()"
                         aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
@@ -282,7 +300,8 @@ <h4 class="modal-title">Create & Attach Volume</h4>
                 <div class="form-group row">
 
 
-                    <label class="col-md-12"> <strong>For which Project the Volume should be created?</strong></label>
+                    <label class="col-md-12"> <strong>For which Project the Volume should be
+                        created?</strong></label>
 
                 </div>
 
@@ -293,8 +312,10 @@ <h4 class="modal-title">Create & Attach Volume</h4>
                         <select class="form-control"
                                 name="selectedProject" [(ngModel)]="selectedProject"
                                 (ngModelChange)="getActiveVmsByProject(selectedProject[1]);getSelectedProjectDiskspace();getSelectedProjectVolumes();">
-                            <option value="undefined" disabled selected hidden> Please Select</option>
-                            <option *ngFor="let project of projects" [ngValue]="project"> {{project[0]}}
+                            <option value="undefined" disabled selected hidden> Please Select
+                            </option>
+                            <option *ngFor="let project of projects" [ngValue]="project">
+                                {{project[0]}}
                             </option>
 
                         </select>
@@ -337,7 +358,8 @@ <h4 class="modal-title">Create & Attach Volume</h4>
                      *ngIf="selectedProject && !(selectedProjectVolumesUsed == selectedProjectVolumesMax || selectedProjectDiskspaceUsed == selectedProjectDiskspaceMax)">
 
 
-                    <label class="col-md-12"><strong>To which Vm the Volume should be attached?</strong></label>
+                    <label class="col-md-12"><strong>To which Vm the Volume should be
+                        attached?</strong></label>
                 </div>
                 <div *ngIf="selectedProject && !(selectedProjectVolumesUsed == selectedProjectVolumesMax || selectedProjectDiskspaceUsed == selectedProjectDiskspaceMax)"
                      class="form-group row">
@@ -346,7 +368,8 @@ <h4 class="modal-title">Create & Attach Volume</h4>
                     <div class="col-md-9">
                         <select class="form-control col-md-6" name="selected_vm"
                                 [(ngModel)]="selected_vm">
-                            <option value="undefined" disabled selected hidden> Please Select</option>
+                            <option value="undefined" disabled selected hidden> Please Select
+                            </option>
                             <option *ngFor="let vm of project_vms" [ngValue]="vm"> {{vm.name}}
                             </option>
 
@@ -373,7 +396,8 @@ <h4 class="modal-title">Create & Attach Volume</h4>
                     <div class="col-md-9">
                         <div class="input-group">
                             <input min="0" step="1" [value]="diskspace"
-                                   (input)="diskspace = $event.target.value;calcDiskSpaceSum();" type="number" placeholder="e.g 8 "><span
+                                   (input)="diskspace = $event.target.value;calcDiskSpaceSum();"
+                                   type="number" placeholder="e.g 8 "><span
                                 class="input-group-addon"> GB
                                     </span>
 
diff --git a/src/app/virtualmachines/volumeOverview.component.ts b/src/app/virtualmachines/volumeOverview.component.ts
index 18cc37d623..e78b5766b6 100644
--- a/src/app/virtualmachines/volumeOverview.component.ts
+++ b/src/app/virtualmachines/volumeOverview.component.ts
@@ -3,6 +3,7 @@ import {Volume} from "./virtualmachinemodels/volume";
 import {VirtualmachineService} from "../api-connector/virtualmachine.service";
 import {VirtualMachine} from "./virtualmachinemodels/virtualmachine";
 import {GroupService} from "../api-connector/group.service";
+import {AbstractBaseClasse} from "../shared_modules/baseClass/abstract-base-class";
 
 
 @Component({
@@ -12,11 +13,10 @@ import {GroupService} from "../api-connector/group.service";
     providers: [GroupService, VirtualmachineService]
 })
 
-export class VolumeOverviewComponent implements OnInit {
+export class VolumeOverviewComponent extends AbstractBaseClasse implements OnInit {
     volumes: Volume[];
     project_vms: VirtualMachine[];
     selected_vm: VirtualMachine;
-    collapse_status: { [id: string]: string } = {};
     isLoaded = false;
     selected_volume: Volume;
     selectedProjectDiskspaceMax: number;
@@ -36,7 +36,7 @@ export class VolumeOverviewComponent implements OnInit {
     request_status: number; // 0=Delete ,1 =Detach
 
 
-    constructor(private groupService: GroupService, private vmService: VirtualmachineService) {
+    constructor(private groupService: GroupService, private vmService: VirtualmachineService) {super();
 
     }
 
@@ -48,25 +48,6 @@ export class VolumeOverviewComponent implements OnInit {
         this.selected_volume = volume;
     }
 
-    public getCollapseStatus(id: string) {
-        if (id in this.collapse_status) {
-            this.switchCollapseStatus(id);
-        } else {
-            this.collapse_status[id] = 'open';
-        }
-    }
-
-    public closeCollapse(id: string) {
-        this.collapse_status[id] = '';
-
-
-    }
-
-
-    public switchCollapseStatus(id: string) {
-        this.collapse_status[id] == '' ? this.collapse_status[id] = 'open' : this.collapse_status[id] = '';
-    }
-
 
     getVolumes() {
         this.vmService.getVolumesByUser().subscribe(result => {