Add notes to stage, fix CORS issue

- Use a ServiceItem object rather than just slides to transfer more information at one time
- Add notes to stage view
- Fix CORS issue

src/app/app.module.ts

@@ -28,6 +28,7 @@ import { SlidesComponent } from './components/slides/slides.component';
 import { FormsModule } from '@angular/forms';
 import { ChordViewComponent } from './components/chord-view/chord-view.component';
 import { StageViewComponent } from './components/stage-view/stage-view.component';
+import { Nl2BrPipe } from './components/stage-view/nl2br.pipe';
 import { MainViewComponent } from './components/main-view/main-view.component';
 import { ChordProPipe } from './components/chord-view/chordpro.pipe';
 import { LoginComponent } from './components/login/login.component';
@@ -39,6 +40,7 @@ import { ThemesComponent } from './components/themes/themes.component';
     AppComponent,
     ChordViewComponent,
     StageViewComponent,
+    Nl2BrPipe,
     MainViewComponent,
     ChordProPipe,
     LoginComponent,

src/app/components/overlay.scss

@@ -1,64 +1,79 @@
 .overlay {
-    background: black;
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    left: 0;
-    top: 0;
-    z-index: 1;
-    overflow: hidden;
-    color: white;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
+  background: black;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  overflow: hidden;
+  color: white;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
 }
 
 .sidebar {
-    margin: 1rem;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
+  margin: 1rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 30%;
 }
 
 .time {
-    font-size: 2rem;
-    color: gray;
+  font-size: 3rem;
+  color: yellow;
+  text-align: right;
+}
+
+.notes {
+  margin-top: 1em;
+  font-size: 3rem;
+  line-height: 3rem;
+  color: salmon;
+  text-align: right;
+}
+
+.close {
+  text-align: right;
 }
 
 .tags {
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    color: gray;
-    font-size: 4rem;
-    span {
-        margin-left: 1rem;
-        &.active {
-            color: white;
-        }
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  color: green;
+  font-size: 4rem;
+  span {
+    margin-left: 1rem;
+    &.active {
+      color: lightgreen;
+      font-weight: bold;
     }
+  }
 }
 
 .slide {
-    font-size: 3rem;
-    white-space: pre-line;
-    margin: 0;
-    &.first {
-        margin-top: 1rem;
-    }
+  font-size: 3rem;
+  white-space: pre-line;
+  margin: 0;
+  &.first {
+    margin-top: 1rem;
+  }
 }
 
 .container {
-    margin-left: 1rem;
+  margin-left: 1rem;
 }
 
 .nextSlides {
+  font-size: 2rem;
+  margin-top: 1rem;
+  color: grey;
+  .slide {
     font-size: 2rem;
-    margin-top: 1rem;
-    color: gray;
-    .slide {
-        font-size: 2rem;
-    }
-}
+  }
+}

src/app/components/slides/slides.component.ts

@@ -27,6 +27,13 @@ export class SlidesComponent implements OnInit {
   }
 
   getSlides() {
-    this.openlpService.getItemSlides().subscribe(slides => this.slides = slides);
+    this.openlpService.getServiceItem().subscribe(serviceItem => {
+      if (serviceItem instanceof Array) {
+        this.slides = serviceItem;
+      }
+      else {
+        this.slides = serviceItem.slides;
+      }
+    });
   }
 }

src/app/components/stage-view/nl2br.pipe.ts

@@ -0,0 +1,17 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+
+@Pipe({name: 'nl2br'})
+export class Nl2BrPipe implements PipeTransform {
+    constructor(private sanitizer: DomSanitizer) { }
+
+    transform(value: string): string|SafeHtml {
+      if (!value) {
+        return value;
+      }
+      if (typeof value !== 'string') {
+        throw Error(`Invalid pipe argument: '${value}' for pipe 'Nl2BrPipe'`);
+      }
+      return this.sanitizer.bypassSecurityTrustHtml(value.replace(/(?:\r\n|\r|\n)/g, '<br>'));
+    }
+}

src/app/components/stage-view/stage-view.component.html

@@ -15,7 +15,10 @@
     </div>
   </div>
   <div class="sidebar">
-    <div class="time">{{ time|date:'HH:mm' }}</div>
-    <button mat-raised-button class="closeButton" routerLink="/">Close</button>
+    <div class="top">
+      <div class="time">{{ time|date:'HH:mm' }}</div>
+      <div class="notes" [innerHTML]="notes|nl2br"></div>
+    </div>
+    <div class="close"><button mat-raised-button class="closeButton" routerLink="/">Close</button></div>
   </div>
-</div>
+</div>

src/app/components/stage-view/stage-view.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { OpenLPService } from '../../openlp.service';
-import { Slide } from '../../responses';
+import { ServiceItem, Slide } from '../../responses';
 
 interface Tag {
   text: string;
@@ -13,10 +13,13 @@ interface Tag {
   styleUrls: ['./stage-view.component.scss', '../overlay.scss']
 })
 export class StageViewComponent implements OnInit {
+  serviceItem: ServiceItem = null;
+  notes = '';
   currentSlides: Slide[] = [];
   activeSlide = 0;
   tags: Tag[] = [];
   time = new Date();
+
   constructor(private openlpService: OpenLPService) {
     setInterval(() => this.time = new Date(), 1000);
   }
@@ -27,7 +30,15 @@ export class StageViewComponent implements OnInit {
   }
 
   updateCurrentSlides(): void {
-    this.openlpService.getItemSlides().subscribe(slides => this.setNewSlides(slides));
+    this.openlpService.getServiceItem().subscribe(serviceItem => {
+      if (serviceItem instanceof Array) {
+        this.setNewSlides(serviceItem);
+      }
+      else {
+        this.setNewSlides(serviceItem.slides);
+        this.setNotes(serviceItem.notes);
+      }
+    });
   }
 
   get nextSlides(): Slide[] {
@@ -43,6 +54,10 @@ export class StageViewComponent implements OnInit {
     this.updateTags();
   }
 
+  setNotes(notes: string): void {
+    this.notes = notes;
+  }
+
   /**
    * This method updates the tags from the current slides.
    *

src/app/openlp.service.ts

@@ -28,7 +28,10 @@ const deserialize = (json, cls) => {
 };
 
 const httpOptions = {
-  headers: new HttpHeaders({'Content-Type': 'application/json'})
+  headers: new HttpHeaders({
+    'Content-Type': 'application/json',
+    'Access-Control-Allow-Origin': '*'
+  })
 };
 
 
@@ -98,10 +101,14 @@ export class OpenLPService {
     return this.http.post(`${this.apiURL}/service/progress`, {'action': 'previous'}, httpOptions);
   }
 
-  getItemSlides(): Observable<Slide[]> {
+  getServiceItem(): Observable<any> {
     return this.http.get<Slide[]>(`${this.apiURL}/controller/live-item`, httpOptions);
   }
 
+  getNotes(): Observable<any> {
+    return this.http.get(`${this.apiURL}/controller/notes`, httpOptions);
+  }
+
   setSlide(id: any): Observable<any> {
     return this.http.post(`${this.apiURL}/controller/show`, {'id': id}, httpOptions);
   }

src/app/responses.ts

@@ -33,6 +33,7 @@ export interface ServiceItem {
   selected: boolean;
   title: string;
   is_valid: boolean;
+  slides: object[];
 }
 
 export interface Theme {