From ff8d8a5a9bc525e2ab843f70fd10106ce6940111 Mon Sep 17 00:00:00 2001
From: Simon Hanna <simhnna@gmail.com>
Date: Mon, 27 Aug 2018 19:23:03 +0200
Subject: [PATCH] Use icons to show type of items in service

---
 .../components/service/service.component.html |  2 +-
 .../components/service/service.component.ts   | 28 +++++++++++++++----
 src/app/responses.ts                          |  3 +-
 3 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/src/app/components/service/service.component.html b/src/app/components/service/service.component.html
index 6aec27e..bbec35e 100644
--- a/src/app/components/service/service.component.html
+++ b/src/app/components/service/service.component.html
@@ -2,7 +2,7 @@
 <div>
   <mat-nav-list>
     <a mat-list-item *ngFor="let item of items;let counter = index;" (click)="onItemSelected(counter)"  [class.selected]="item.selected">
-      <mat-icon mat-list-icon>queue_music</mat-icon>
+      <mat-icon mat-list-icon>{{ getIcon(item) }}</mat-icon>
       <p mat-line>{{item.title}}<p>
     </a>
   </mat-nav-list>
diff --git a/src/app/components/service/service.component.ts b/src/app/components/service/service.component.ts
index d422f02..92d12ce 100644
--- a/src/app/components/service/service.component.ts
+++ b/src/app/components/service/service.component.ts
@@ -2,16 +2,17 @@ import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router'
 
 import { OpenLPService } from '../../openlp.service';
+import { ServiceItem } from '../../responses';
 
 @Component({
-selector: 'openlp-remote-service',
-templateUrl: './service.component.html',
-styleUrls: ['./service.component.scss'],
-providers: [OpenLPService]
+  selector: 'openlp-remote-service',
+  templateUrl: './service.component.html',
+  styleUrls: ['./service.component.scss'],
+  providers: [OpenLPService]
 })
 
 export class OpenLPServiceComponent implements OnInit {
-  items = [];
+  items: ServiceItem[] = [];
   ngOnInit() {
     this.getServiceItems();
   }
@@ -29,4 +30,21 @@ export class OpenLPServiceComponent implements OnInit {
     openlpService.stateChanged$.subscribe(item => this.getServiceItems());
   }
 
+  getIcon(item: ServiceItem): string {
+    if (item.plugin == 'songs') {
+      return 'queue_music';
+    } else if (item.plugin == 'images') {
+      return 'image';
+    } else if (item.plugin == 'bibles') {
+      return 'book';
+    } else if (item.plugin == 'media') {
+      return 'movie';
+    } else if (item.plugin == 'custom') {
+      return 'description';
+    } else if (item.plugin == 'presentations') {
+      return 'slideshow';
+    }
+    return 'crop_square';
+  }
+
 }
diff --git a/src/app/responses.ts b/src/app/responses.ts
index 8c916b5..5d1419f 100644
--- a/src/app/responses.ts
+++ b/src/app/responses.ts
@@ -30,5 +30,4 @@ export interface ServiceItem {
     plugin: string;
     selected: boolean;
     title: string;
-  }
-  
\ No newline at end of file
+}
\ No newline at end of file