Add an experimental VO listing

src/app/body/body.component.html

@@ -10,19 +10,48 @@
 			This is due services requiring users to be member of a certain group.
 			</p>
 		</div>
-		<div *ngIf="userService.groupsParsed" style="padding-bottom: 30px;">
-			<h2>Virtual Organisations</h2>
-			<mat-accordion *ngIf="userService.groupMap.size > 0">
-				<div *ngFor="let group of userService.groupMap.keys()">
-					<h3>{{ group.name }}</h3>
-					<p *ngFor="let service of userService.groupMap.get(key)">
-					{{ service | json }}
-					</p>
-				</div>
+		<div *ngIf="userService.user" style="padding-bottom: 30px;">
+			<h2>Your Virtual Organisations</h2>
+			<mat-accordion *ngIf="userService.user.groups.length > 0">
+				<mat-expansion-panel *ngFor="let group of userService.getGroups()">
+					<mat-expansion-panel-header>
+						<mat-panel-title>{{ group.name }}</mat-panel-title>
+					</mat-expansion-panel-header>
+					<div *ngIf="userService.getServices(group).length > 0; then serviceList else noServiceList"></div>
+					<ng-template #serviceList>
+						<p>
+						You have access to these services, because you are a member of the VO  "{{ group.name }}":
+						</p>
+						<mat-accordion>
+							<app-service *ngFor="let service of userService.getServices(group)" [service]="service"></app-service>
+						</mat-accordion>
+					</ng-template>
+					<ng-template #noServiceList>
+						<p>
+						No services need membership of the VO "{{ group.name }}".
+						</p>
+					</ng-template>
+					<!--
+					<mat-action-row>
+						<div *ngIf="userService.user.ssh_keys.length > 0; then boxes else upload"></div>
+						<ng-template #boxes>
+							<span style="margin-right: 15px;">
+								Please select SSH Keys to deploy:
+							</span>
+							<mat-checkbox *ngFor="let key of userService.user.ssh_keys" style="margin-right: 8px" [checked]="isDeployed(key)" (change)="deploymentChange(key)">
+								{{ key.name }}
+							</mat-checkbox>
+						</ng-template>
+						<ng-template #upload>
+							<span style="margin-right: 15px;">
+								Please upload an SSH Key to use this service:
+							</span>
+							<button mat-icon-button (click)="dialog.openSshKeys()"><mat-icon>vpn_key</mat-icon></button>
+						</ng-template>
+					</mat-action-row>
+						-->
+				</mat-expansion-panel>
 			</mat-accordion>
-			<p *ngIf="userService.groupMap.size == 0">
-			You are not a member in any groups.
-			</p>
 		</div>
 	</div>
 </div>

src/app/header/header.component.ts

@@ -3,6 +3,8 @@ import { Component, OnInit } from '@angular/core';
 import { UserService } from '../user.service';
 import { AllAuthInfo, IdP } from '../types/types.module';
 
+import { DialogService } from '../dialogues/dialog.service';
+
 @Component({
   selector: 'app-header',
   templateUrl: './header.component.html',
@@ -14,6 +16,7 @@ export class HeaderComponent implements OnInit {
 
   constructor(
     public userService: UserService,
+    public dialog: DialogService,
   ) {
     if (!userService.loggedIn()) {
       this.userService.getIdPPreference().subscribe(

src/app/service/service.component.html

@@ -76,7 +76,7 @@
 		<div *ngIf="userService.user.ssh_keys.length > 0; then boxes else upload"></div>
 		<ng-template #boxes>
 			<span style="margin-right: 15px;">
-				Please select SSH Keys to deploy:
+				Select SSH Keys to deploy:
 			</span>
 			<mat-checkbox *ngFor="let key of userService.user.ssh_keys"
 		 style="margin-right: 8px"

src/app/user.service.ts

@@ -108,7 +108,7 @@ export class UserService {
       }
 
       for (let group of this.user.groups) {
-        this.groupMap.set(group, this._getServices(group.name));
+        this.groupMap.set(group.name, this._getServices(group.name));
       }
       this.groupsParsed = true;
     }
@@ -190,6 +190,23 @@ export class UserService {
     return this.groupMap.get(group.name);
   }
 
+  public getGroups(): t.Group[] {
+    if (this.user.groups) {
+      return this.user.groups.sort(
+        function(a,b) {
+          if (a.name < b.name) {
+            return -1;
+          } else if (a.name > b.name) {
+            return 1;
+          } else if (a.name === b.name) {
+            return 0;
+          }
+        }
+      );
+    }
+    return []
+  }
+
   public userInfo(): MatTableDataSource<any> {
       const userInfoList = [];
       for (const key in this.user.userinfo) {