Move stuff around

src/app/app.component.scss

@@ -15,6 +15,10 @@ min-height: 100vh;
 flex: 1;
 }
 
+.selected {
+    font-weight: 600;
+}
+
 .footer {
     display: flex;
     flex-direction: row;

src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { State } from './state';
+import { State } from './responses';
 import { OpenLPService } from './openlp.service';
 
 @Component({

src/app/app.module.ts

@@ -19,10 +19,10 @@ import { AppComponent } from './app.component';
 import { OpenLPService } from './openlp.service';
 import { HttpClientModule } from '@angular/common/http';
 import { AppRoutingModule } from './app.routing';
-import { OpenLPServiceComponent } from './service.component';
-import { OpenLPAlertComponent } from './alert.component';
-import { OpenLPSearchComponent } from './search.component';
-import { OpenLPSlidesComponent } from './slides.component';
+import { OpenLPServiceComponent } from './components/service/service.component';
+import { OpenLPAlertComponent } from './components/alert/alert.component';
+import { OpenLPSearchComponent } from './components/search/search.component';
+import { OpenLPSlidesComponent } from './components/slides/slides.component';
 import { FormsModule } from '@angular/forms';
 
 @NgModule({

src/app/app.routing.ts

@@ -2,10 +2,10 @@ import { ModuleWithProviders, NgModule }  from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
 import { AppComponent } from './app.component';
-import { OpenLPSearchComponent } from './search.component';
-import { OpenLPAlertComponent } from './alert.component';
-import { OpenLPSlidesComponent } from './slides.component';
-import { OpenLPServiceComponent } from './service.component';
+import { OpenLPServiceComponent } from './components/service/service.component';
+import { OpenLPAlertComponent } from './components/alert/alert.component';
+import { OpenLPSearchComponent } from './components/search/search.component';
+import { OpenLPSlidesComponent } from './components/slides/slides.component';
 
 const routes: Routes = [
 {

src/app/components/alert/alert.component.html

@@ -0,0 +1,6 @@
+<h3>Send an Alert</h3>
+<mat-form-field>
+  <input matInput [(ngModel)]="alert" type="text" placeholder="Alert"></mat-form-field>
+<div>
+<button mat-raised-button color="warn" (click)="onSubmit()">Send</button>
+</div>

src/app/components/alert/alert.component.ts

@@ -1,18 +1,12 @@
 import { Component } from '@angular/core';
 
 
-import { OpenLPService } from './openlp.service';
+import { OpenLPService } from '../../openlp.service';
 
 @Component({
 selector: 'openlp-remote-alert',
-template: `
-<h3>Send an Alert</h3>
-<mat-form-field>
-  <input matInput [(ngModel)]="alert" type="text" placeholder="Alert"></mat-form-field>
-<div>
-<button mat-raised-button color="warn" (click)="onSubmit()">Send</button>
-</div>
-`,
+templateUrl: './alert.component.html',
+styleUrls: ['./alert.component.scss'],
 providers: [OpenLPService]
 })
 

src/app/components/search/search.component.html

@@ -0,0 +1,27 @@
+<h3>Search</h3>
+<form>
+<label>Search for:</label>
+<mat-form-field>
+<mat-select [(ngModel)]="selectedPlugin" name="selectedPlugin">
+  <mat-option *ngFor="let plugin of searchPlugins" name="searchPlugins" [value]="plugin.key">
+    {{plugin.name}}
+  </mat-option>
+</mat-select>
+</mat-form-field>
+<br>
+<mat-form-field>
+  <input matInput [(ngModel)]="searchText" name="searchText" placeholder="Search Text">
+</mat-form-field>
+  <br>
+<button mat-raised-button color="warn" (click)="onSubmit()">Search</button>
+</form>
+<div *ngIf="searchResults">
+  <h3>Search Results:</h3>
+  <table>
+    <tr *ngFor="let item of searchResults">
+      <td>{{item[1]}}</td>
+      <td><button mat-button color="primary" (click)="addToService(item[0])">Add</button></td>
+      <td><button mat-button color="accent" (click)="sendLive(item[0])">Send Live</button></td>
+    </tr>
+  </table>
+</div>

src/app/components/search/search.component.ts

@@ -1,38 +1,11 @@
 import { Component, OnInit } from '@angular/core';
-import { OpenLPService } from './openlp.service';
-import { PluginDescription } from './responses';
+import { OpenLPService } from '../../openlp.service';
+import { PluginDescription } from '../../responses';
 
 @Component({
 selector: 'openlp-remote-search',
-template: `
-<h3>Search</h3>
-<form>
-<label>Search for:</label>
-<mat-form-field>
-<mat-select [(ngModel)]="selectedPlugin" name="selectedPlugin">
-  <mat-option *ngFor="let plugin of searchPlugins" name="searchPlugins" [value]="plugin.key">
-    {{plugin.name}}
-  </mat-option>
-</mat-select>
-</mat-form-field>
-<br>
-<mat-form-field>
-  <input matInput [(ngModel)]="searchText" name="searchText" placeholder="Search Text">
-</mat-form-field>
-  <br>
-<button mat-raised-button color="warn" (click)="onSubmit()">Search</button>
-</form>
-<div *ngIf="searchResults">
-  <h3>Search Results:</h3>
-  <table>
-    <tr *ngFor="let item of searchResults">
-      <td>{{item[1]}}</td>
-      <td><button mat-button color="primary" (click)="addToService(item[0])">Add</button></td>
-      <td><button mat-button color="accent" (click)="sendLive(item[0])">Send Live</button></td>
-    </tr>
-  </table>
-</div>
-`,
+templateUrl: './search.component.html',
+styleUrls: ['./search.component.scss'],
 providers: [OpenLPService]
 })
 

src/app/components/service/service.component.html

@@ -0,0 +1,9 @@
+<h3>Service items:</h3>
+<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>
+      <p mat-line>{{item.title}}<p>
+    </a>
+  </mat-nav-list>
+</div>

src/app/components/service/service.component.ts

@@ -1,20 +1,12 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router'
 
-import { OpenLPService } from './openlp.service';
+import { OpenLPService } from '../../openlp.service';
 
 @Component({
 selector: 'openlp-remote-service',
-template: `
-<h3>Service items:</h3>
-<div>
-  <mat-nav-list>
-    <a mat-list-item *ngFor="let item of items;let counter = index;" (click)="onItemSelected(counter)"  [class.selected]="item.selected">
-      <p mat-line>{{item.title}}<p>
-    </a>
-  </mat-nav-list>
-</div>
-`,
+templateUrl: './service.component.html',
+styleUrls: ['./service.component.scss'],
 providers: [OpenLPService]
 })
 

src/app/components/slides/slides.component.html

@@ -0,0 +1,9 @@
+<h3>Slides:</h3>
+<div>
+  <mat-nav-list>
+    <mat-list-item *ngFor="let slide of slides; let counter = index;" (click)="onSlideSelected(counter)" [class.selected]="slide.selected">
+      <span MatListAvatar>{{ slide.tag }}</span>
+      <span MatLine style="margin-left: 2rem;">{{ slide.text }}</span>
+    </mat-list-item>
+  </mat-nav-list>
+</div>

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

@@ -1,23 +1,12 @@
 import { Component, OnInit } from '@angular/core';
 
 
-import { OpenLPService } from './openlp.service';
+import { OpenLPService } from '../../openlp.service';
 
 @Component({
 selector: 'openlp-remote-slides',
-template: `
-<h3>Slides:</h3>
-<div>
-  <mat-list>
-    <mat-list-item *ngFor="let slide of slides; let counter = index;" style="white-space:pre-wrap;cursor: pointer;" (click)="onSlideSelected(counter)" [class.selected]="slide.selected">
-      <span mat-list-avatar>{{ slide.tag }}</span>
-      <p mat-line *ngFor="let line of slide.lines">
-        {{line}}
-      </p>
-    </mat-list-item>
-  </mat-list>
-</div>
-`,
+templateUrl: './slides.component.html',
+styleUrls: ['./slides.component.scss'],
 providers: [OpenLPService]
 })
 

src/app/openlp.service.ts

@@ -2,12 +2,10 @@ import { Injectable, EventEmitter } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { URLSearchParams, Http } from '@angular/http';
 
-import { State } from './state';
-import { Slide } from './slide';
-import { ServiceItem } from './service_item';
+
 import { Observable } from 'rxjs';
 import { map, take } from 'rxjs/operators';
-import { PluginDescription } from './responses';
+import { PluginDescription, State, Slide, ServiceItem } from './responses';
 
 let deserialize = (json, cls) => {
     var inst = new cls();

src/app/responses.ts

@@ -1,15 +1,34 @@
-import { Slide } from "./slide";
-
-interface SlideResponse {
-    item: string;
-    slides: Slide[];
-}
-
-export interface SlideOuterResponse {
-    results: SlideResponse;
-}
-
 export interface PluginDescription {
     key: string;
     name: string;
-}
+}
+
+export class State {
+	isAuthorized: boolean;
+	version: number;
+	slide: number;
+	display: boolean;
+	isSecure: boolean;
+	blank: boolean;
+	twelve: boolean;
+	theme: boolean;
+
+	live = () => {return !(this.blank || this.display || this.theme);}
+}
+
+export interface Slide {
+	selected: boolean;
+	html: string;
+	tag: string;
+	text: string;
+	lines: string[];
+}
+
+export interface ServiceItem {
+    id: string;
+    notes: string;
+    plugin: string;
+    selected: boolean;
+    title: string;
+  }
+  

src/app/service_item.ts

@@ -1,7 +0,0 @@
-export class ServiceItem {
-  id: string;
-  notes: string;
-  plugin: string;
-  selected: boolean;
-  title: string;
-}

src/app/slide.ts

@@ -1,7 +0,0 @@
-export class Slide {
-	selected: boolean;
-	html: string;
-	tag: string;
-	text: string;
-	lines: string[];
-}

src/app/state.ts

@@ -1,12 +0,0 @@
-export class State {
-	isAuthorized: boolean;
-	version: number;
-	slide: number;
-	display: boolean;
-	isSecure: boolean;
-	blank: boolean;
-	twelve: boolean;
-	theme: boolean;
-
-	live = () => {return !(this.blank || this.display || this.theme);}
-}