From 629c96173cff13d51ef2df334fba169b1462aef0 Mon Sep 17 00:00:00 2001
From: Lukas Burgey <ubedv@student.kit.edu>
Date: Fri, 15 Dec 2017 17:11:00 +0100
Subject: [PATCH] Adapt service component to relation change

---
 src/app/app.module.ts                  |  2 ++
 src/app/service/service.component.html | 30 ++++++++++++++------------
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 4046ddd..ac5407a 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -18,6 +18,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatSelectModule} from '@angular/material/select';
 import {MatInputModule} from '@angular/material/input';
 import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatTooltipModule} from '@angular/material/tooltip';
 
 
 import { CookieService } from 'ngx-cookie-service';
@@ -81,6 +82,7 @@ const routes = [
     MatSelectModule,
     MatInputModule,
     MatCheckboxModule,
+    MatTooltipModule,
   ],
   providers: [
     CookieService,
diff --git a/src/app/service/service.component.html b/src/app/service/service.component.html
index 8e7ebd7..074a4d8 100644
--- a/src/app/service/service.component.html
+++ b/src/app/service/service.component.html
@@ -3,24 +3,26 @@
 		<mat-panel-title>{{ serviceData.name }}</mat-panel-title>
 		<mat-panel-description>{{ serviceData.description }}</mat-panel-description>
 	</mat-expansion-panel-header>
-	<p>
-	<mat-icon style="vertical-align: middle; padding-right: 35px;">storage</mat-icon>
-	Provided by: {{ serviceData.site.name }}
-	</p>
-
-	<span>
-	<mat-icon style="vertical-align: middle; padding-right: 35px;">lock outline</mat-icon>
-	</span>
-	Needs membership of one of the following groups:
-	<ul>
-		<li *ngFor="let group of serviceData.groups">
+	<div style="padding-bottom: 10px;">
+		<span style="padding-right: 35px;"
+				*ngFor="let site of serviceData.site"
+				matTooltip="Provided at site {{ site.name }}">
+			<mat-icon style="vertical-align: middle; padding-right: 5px;">storage</mat-icon>
+			{{ site.name }}
+		</span>
+	</div>
+	<div>
+		<span style="padding-right: 35px;"
+				*ngFor="let group of serviceData.groups"
+				 matTooltip="Can be used with membership of group {{ group.name }}">
+			<mat-icon style="vertical-align: middle; padding-right: 5px;">lock outline</mat-icon>
 			{{ group.name }}
-		</li>
-	</ul>
+		</span>
+	</div>
 
 	<mat-action-row>
 		<div *ngIf="userService.user.ssh_keys.length > 0">
-			<span style="margin-right: 15px">
+			<span style="margin-right: 15px;">
 				Deployed keys:
 			</span><br/>
 			<mat-checkbox *ngFor="let key of userService.user.ssh_keys"
-- 
2.26.2