mirror of https://gitlab.com/openlp/web-remote.git
Update code to make it compatible with the current releases of angular
This commit is contained in:
Simon Hanna
parent
cada50dfa0
commit
7647b98437
|
|
@ -8,7 +8,11 @@
|
|||
"sourceRoot": "src",
|
||||
"projectType": "application",
|
||||
"prefix": "app",
|
||||
"schematics": {},
|
||||
"schematics": {
|
||||
"@schematics/angular:component": {
|
||||
"styleext": "scss"
|
||||
}
|
||||
},
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:browser",
|
||||
|
|
@ -119,4 +123,4 @@
|
|||
}
|
||||
},
|
||||
"defaultProject": "openlp-remote"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
10
package.json
10
package.json
|
|
@ -12,11 +12,13 @@
|
|||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^6.0.0",
|
||||
"@angular/cdk": "^6.4.2",
|
||||
"@angular/common": "^6.0.0",
|
||||
"@angular/compiler": "^6.0.0",
|
||||
"@angular/core": "^6.0.0",
|
||||
"@angular/forms": "^6.0.0",
|
||||
"@angular/http": "^6.0.0",
|
||||
"@angular/material": "^6.4.2",
|
||||
"@angular/platform-browser": "^6.0.0",
|
||||
"@angular/platform-browser-dynamic": "^6.0.0",
|
||||
"@angular/router": "^6.0.0",
|
||||
|
|
@ -25,10 +27,9 @@
|
|||
"zone.js": "^0.8.26"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/compiler-cli": "^6.0.0",
|
||||
"@angular-devkit/build-angular": "~0.6.0",
|
||||
"typescript": "~2.7.2",
|
||||
"@angular/cli": "~6.0.0",
|
||||
"@angular/compiler-cli": "^6.0.0",
|
||||
"@angular/language-service": "^6.0.0",
|
||||
"@types/jasmine": "~2.8.6",
|
||||
"@types/jasminewd2": "~2.0.3",
|
||||
|
|
@ -43,6 +44,7 @@
|
|||
"karma-jasmine-html-reporter": "^0.2.2",
|
||||
"protractor": "~5.3.0",
|
||||
"ts-node": "~5.0.1",
|
||||
"tslint": "~5.9.1"
|
||||
"tslint": "~5.9.1",
|
||||
"typescript": "~2.7.2"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,30 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
|
||||
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>
|
||||
`,
|
||||
providers: [OpenLPService]
|
||||
})
|
||||
|
||||
export class OpenLPAlertComponent {
|
||||
|
||||
public alert: string;
|
||||
|
||||
constructor(private openlpService: OpenLPService) { }
|
||||
|
||||
onSubmit() {
|
||||
console.log('submitted: ', this.alert);
|
||||
this.openlpService.showAlert(this.alert);
|
||||
this.alert = '';
|
||||
}
|
||||
}
|
||||
|
|
@ -1,20 +1,49 @@
|
|||
<!--The content below is only a placeholder and can be replaced.-->
|
||||
<div style="text-align:center">
|
||||
<h1>
|
||||
Welcome to {{ title }}!
|
||||
</h1>
|
||||
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
|
||||
<mat-sidenav-container class="all-wrap" fullscreen>
|
||||
<mat-sidenav #menu mode="over">
|
||||
<mat-nav-list>
|
||||
<a mat-list-item (click)="menu.close()" routerLink="/service">Service</a>
|
||||
<a mat-list-item (click)="menu.close()" routerLink="/slides">Slides</a>
|
||||
<a mat-list-item (click)="menu.close()" routerLink="/alerts">Alerts</a>
|
||||
<a mat-list-item (click)="menu.close()" routerLink="/search">Search</a>
|
||||
</mat-nav-list>
|
||||
</mat-sidenav>
|
||||
<div class="page-wrap">
|
||||
<header>
|
||||
<mat-toolbar style="background-color: #64aef3;">
|
||||
<button mat-icon-button (click)="menu.toggle()"><mat-icon>menu</mat-icon></button>
|
||||
<span>OpenLP Remote</span>
|
||||
</mat-toolbar>
|
||||
</header>
|
||||
<main class="content">
|
||||
<router-outlet></router-outlet>
|
||||
</main>
|
||||
<footer>
|
||||
<mat-toolbar class="footer">
|
||||
<button mat-icon-button (click)="previousItem()">
|
||||
<mat-icon>first_page</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button (click)="nextItem()">
|
||||
<mat-icon>last_page</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button (click)="previousSlide()">
|
||||
<mat-icon>navigate_before</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button (click)="nextSlide()">
|
||||
<mat-icon>navigate_next</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button (click)="blankDisplay()" class="displayButton" [class.active]="state.blank" [disabled]="state.blank">
|
||||
<mat-icon>videocam_off</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button (click)="themeDisplay()" class="displayButton" [class.active]="state.theme" [disabled]="state.theme">
|
||||
<mat-icon>wallpaper</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button (click)="desktopDisplay()" class="displayButton" [class.active]="state.display" [disabled]="state.display">
|
||||
<mat-icon>desktop_windows</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button (click)="showDisplay()" class="displayButton" [class.active]="state.display" [disabled]="state.live()">
|
||||
<mat-icon>videocam</mat-icon>
|
||||
</button>
|
||||
</mat-toolbar>
|
||||
</footer>
|
||||
</div>
|
||||
<h2>Here are some links to help you start: </h2>
|
||||
<ul>
|
||||
<li>
|
||||
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
|
||||
</li>
|
||||
<li>
|
||||
<h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
|
||||
</li>
|
||||
<li>
|
||||
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</mat-sidenav-container>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,34 @@
|
|||
mat-sidenav {
|
||||
background: white;
|
||||
}
|
||||
.all-wrap {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.page-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/*
|
||||
* Make the Component injected by Router Outlet full height:
|
||||
*/
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> *:not(router-outlet) {
|
||||
flex: 1;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +1,55 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { State } from './state';
|
||||
import { OpenLPService } from './openlp.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.css']
|
||||
styleUrls: ['./app.component.scss']
|
||||
})
|
||||
export class AppComponent {
|
||||
title = 'app';
|
||||
|
||||
state: State = new State();
|
||||
|
||||
constructor(private openlpService: OpenLPService) {
|
||||
openlpService.stateChanged$.subscribe(item => this.state = item);
|
||||
openlpService.getServiceItems().subscribe(result => {
|
||||
console.log(result);
|
||||
});
|
||||
}
|
||||
/*
|
||||
nextItem() {
|
||||
this.openlpService.nextItem();
|
||||
}
|
||||
|
||||
previousItem() {
|
||||
this.openlpService.previousItem();
|
||||
}
|
||||
|
||||
nextSlide() {
|
||||
this.openlpService.nextSlide();
|
||||
}
|
||||
|
||||
previousSlide() {
|
||||
this.openlpService.previousSlide();
|
||||
}
|
||||
|
||||
blankDisplay() {
|
||||
this.openlpService.blankDisplay();
|
||||
}
|
||||
|
||||
themeDisplay() {
|
||||
this.openlpService.themeDisplay();
|
||||
}
|
||||
|
||||
desktopDisplay() {
|
||||
this.openlpService.desktopDisplay();
|
||||
}
|
||||
|
||||
showDisplay() {
|
||||
this.openlpService.showDisplay();
|
||||
}
|
||||
*/
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,53 @@
|
|||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
|
||||
|
||||
import { NgModule } from '@angular/core';
|
||||
|
||||
import {MatListModule} from '@angular/material/list';
|
||||
import {MatSidenavModule} from '@angular/material/sidenav';
|
||||
import {MatIconModule} from '@angular/material/icon';
|
||||
import {MatToolbarModule} from '@angular/material/toolbar';
|
||||
import {MatGridListModule} from '@angular/material/grid-list';
|
||||
import {MatFormFieldModule} from '@angular/material/form-field';
|
||||
import {MatSelectModule} from '@angular/material/select';
|
||||
import {MatButtonModule} from '@angular/material/button';
|
||||
|
||||
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 { FormsModule } from '@angular/forms';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent
|
||||
AppComponent,
|
||||
OpenLPServiceComponent,
|
||||
OpenLPAlertComponent,
|
||||
OpenLPSearchComponent,
|
||||
OpenLPSlidesComponent
|
||||
],
|
||||
imports: [
|
||||
BrowserModule
|
||||
BrowserModule,
|
||||
BrowserAnimationsModule,
|
||||
HttpClientModule,
|
||||
AppRoutingModule,
|
||||
MatListModule,
|
||||
MatSidenavModule,
|
||||
MatIconModule,
|
||||
MatToolbarModule,
|
||||
MatGridListModule,
|
||||
FormsModule,
|
||||
MatFormFieldModule,
|
||||
MatSelectModule,
|
||||
MatButtonModule
|
||||
],
|
||||
providers: [
|
||||
OpenLPService
|
||||
],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
export class AppModule { }
|
||||
|
|
|
|||
|
|
@ -0,0 +1,38 @@
|
|||
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';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
redirectTo: '/service',
|
||||
pathMatch: 'full'
|
||||
},
|
||||
{
|
||||
path: 'service',
|
||||
component: OpenLPServiceComponent
|
||||
},
|
||||
{
|
||||
path: 'slides',
|
||||
component: OpenLPSlidesComponent
|
||||
},
|
||||
// {
|
||||
// path: 'alerts',
|
||||
// component: OpenLPAlertComponent
|
||||
// },
|
||||
// {
|
||||
// path: 'search',
|
||||
// component: OpenLPSearchComponent
|
||||
// }
|
||||
];
|
||||
@NgModule({
|
||||
imports: [RouterModule.forRoot(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
|
||||
export class AppRoutingModule {}
|
||||
|
|
@ -0,0 +1,221 @@
|
|||
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 { SlideOuterResponse } from './responses';
|
||||
|
||||
let deserialize = (json, cls) => {
|
||||
var inst = new cls();
|
||||
for(var p in json) {
|
||||
if(!json.hasOwnProperty(p)) {
|
||||
continue;
|
||||
}
|
||||
inst[p] = json[p];
|
||||
}
|
||||
return inst;
|
||||
}
|
||||
|
||||
let buildTextParams = id => {
|
||||
let params: URLSearchParams = new URLSearchParams();
|
||||
params.set('data', '{"request": {"text": "' + id + '"}}');
|
||||
return {search: params}
|
||||
}
|
||||
|
||||
let buildNumberParams = id => {
|
||||
let params: URLSearchParams = new URLSearchParams();
|
||||
params.set('data', '{"request": {"id": ' + id + '}}');
|
||||
return {search: params}
|
||||
}
|
||||
|
||||
@Injectable()
|
||||
export class OpenLPService {
|
||||
private apiURL: string = 'http://localhost:4316';
|
||||
|
||||
public stateChanged$: EventEmitter<State>;
|
||||
|
||||
constructor(private http: HttpClient) {
|
||||
this.stateChanged$ = new EventEmitter<State>();
|
||||
let state:State = null;
|
||||
let ws:WebSocket = new WebSocket('ws://localhost:4317/poll')
|
||||
ws.onmessage = (event) => {
|
||||
let reader = new FileReader()
|
||||
reader.onload = () => {
|
||||
state = deserialize(JSON.parse(reader.result).results, State);
|
||||
this.stateChanged$.emit(state);
|
||||
}
|
||||
reader.readAsText(event.data);
|
||||
}
|
||||
}
|
||||
|
||||
getItemSlides(): Observable<Slide[]> {
|
||||
return this.http.get<SlideOuterResponse>('http://localhost:4316/controller/live/text')
|
||||
.pipe(
|
||||
take(1),
|
||||
map(result => result.results.slides));
|
||||
}
|
||||
|
||||
// getItemSlides() {
|
||||
// return this.http.get('http://localhost:4316/api/controller/live/text')
|
||||
// .toPromise()
|
||||
// .then(response => {
|
||||
// let slides:Slide[] = [];
|
||||
// response.json().results.slides.forEach(item => {
|
||||
// let slide = deserialize(item, Slide);
|
||||
// slide.lines = slide.text.split('\n');
|
||||
// slides.push(slide);
|
||||
// });
|
||||
// return slides;
|
||||
// })
|
||||
// .catch(this.handleError);
|
||||
// }
|
||||
|
||||
getServiceItems(): Observable<ServiceItem[]> {
|
||||
return this.http.get<ServiceItem[]>('http://localhost:4316/service/list');
|
||||
}
|
||||
|
||||
|
||||
// getServiceItems() {
|
||||
// return this.http.get('http://localhost:4316/api/service/list')
|
||||
// .toPromise()
|
||||
// .then(response => {
|
||||
// let serviceItems:ServiceItem[] = [];
|
||||
// response.json().results.items.forEach(item => serviceItems.push(deserialize(item, ServiceItem)));
|
||||
// return serviceItems;
|
||||
// })
|
||||
// .catch(this.handleError);
|
||||
// }
|
||||
|
||||
sendItemLive(plugin, id) {}
|
||||
showAlert(text) {}
|
||||
search(plugin, text) {}
|
||||
addItemToService(plugin, id) {}
|
||||
|
||||
getSearchablePlugins() {
|
||||
return this.http.get(`${this.apiURL}/plugin/search`);
|
||||
}
|
||||
|
||||
// getSearchablePlugins() {
|
||||
// return this.http.get('http://localhost:4316/plugin/search')
|
||||
// .toPromise()
|
||||
// .then(response => response.json().results.items)
|
||||
// .catch(this.handleError);
|
||||
// }
|
||||
|
||||
setServiceItem(id:number) {
|
||||
}
|
||||
|
||||
|
||||
// setServiceItem(id:number) {
|
||||
// this.http.get('http://localhost:4316/service/set', buildNumberParams(id))
|
||||
// .toPromise()
|
||||
// .then(response => console.log(response.json().results))
|
||||
// .catch(this.dropError);
|
||||
// }
|
||||
|
||||
/*
|
||||
setSlide(id) {
|
||||
this.http.get('http://localhost:4316/controller/live/set', buildNumberParams(id))
|
||||
.toPromise()
|
||||
.then(response => console.log(response.json().results))
|
||||
.catch(this.dropError);
|
||||
}
|
||||
|
||||
nextItem() {
|
||||
this.http.get('http://localhost:4316/service/next')
|
||||
.toPromise()
|
||||
.then(response => console.log(response.json().results))
|
||||
.catch(this.dropError);
|
||||
}
|
||||
|
||||
previousItem() {
|
||||
this.http.get('http://localhost:4316/service/previous')
|
||||
.toPromise()
|
||||
.then(response => console.log(response.json().results))
|
||||
.catch(this.dropError);
|
||||
}
|
||||
|
||||
nextSlide() {
|
||||
this.http.get('http://localhost:4316/controller/live/next')
|
||||
.toPromise()
|
||||
.then(response => console.log(response.json().results))
|
||||
.catch(this.dropError);
|
||||
}
|
||||
|
||||
previousSlide() {
|
||||
this.http.get('http://localhost:4316/controller/live/previous')
|
||||
.toPromise()
|
||||
.then(response => console.log(response.json().results))
|
||||
.catch(this.dropError);
|
||||
}
|
||||
|
||||
blankDisplay() {
|
||||
this.http.get('http://localhost:4316/display/blank')
|
||||
.toPromise()
|
||||
.then(response => console.log(response.json().results))
|
||||
.catch(this.dropError);
|
||||
}
|
||||
|
||||
themeDisplay() {
|
||||
this.http.get('http://localhost:4316/display/theme')
|
||||
.toPromise()
|
||||
.then(response => console.log(response.json().results))
|
||||
.catch(this.dropError);
|
||||
}
|
||||
|
||||
desktopDisplay() {
|
||||
this.http.get('http://localhost:4316/display/desktop')
|
||||
.toPromise()
|
||||
.then(response => console.log(response.json().results))
|
||||
.catch(this.dropError);
|
||||
}
|
||||
|
||||
showDisplay() {
|
||||
this.http.get('http://localhost:4316/display/show')
|
||||
.toPromise()
|
||||
.then(response => console.log(response.json().results))
|
||||
.catch(this.dropError);
|
||||
}
|
||||
|
||||
showAlert(text) {
|
||||
this.http.get('http://localhost:4316/alert', buildTextParams(text))
|
||||
.toPromise()
|
||||
.then(response => console.log(response.json().results))
|
||||
.catch(this.dropError);
|
||||
}
|
||||
|
||||
search(plugin, text) {
|
||||
return this.http.get('http://localhost:4316/' + plugin + '/search', buildTextParams(text))
|
||||
.toPromise()
|
||||
.then(response => response.json().results.items)
|
||||
.catch(this.handleError);
|
||||
}
|
||||
|
||||
sendItemLive(plugin, id) {
|
||||
this.http.get('http://localhost:4316/' + plugin + '/live', buildNumberParams(id))
|
||||
.toPromise()
|
||||
.then(response => console.log(response))
|
||||
.catch(this.dropError);
|
||||
}
|
||||
|
||||
addItemToService(plugin, id) {
|
||||
this.http.get('http://localhost:4316/' + plugin + '/add', buildNumberParams(id))
|
||||
.toPromise()
|
||||
.then(response => console.log(response))
|
||||
.catch(this.dropError);
|
||||
}
|
||||
|
||||
private dropError(error: any) {
|
||||
console.error('An error occurred', error);
|
||||
}
|
||||
|
||||
private handleError(error: any) {
|
||||
console.error('An error occurred', error);
|
||||
return Promise.reject(error.message || error);
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import { Slide } from "./slide";
|
||||
|
||||
interface SlideResponse {
|
||||
item: string;
|
||||
slides: Slide[];
|
||||
}
|
||||
|
||||
export interface SlideOuterResponse {
|
||||
results: SlideResponse;
|
||||
}
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { OpenLPService } from './openlp.service';
|
||||
|
||||
@Component({
|
||||
selector: 'openlp-remote-search',
|
||||
template: `
|
||||
<h3>Search</h3>
|
||||
<form>
|
||||
<label>Search for:</label>
|
||||
<mat-select [(ngModel)]="selectedPlugin" name="selectedPlugin">
|
||||
<mat-option *ngFor="let plugin of searchPlugins" name="searchPlugins" [value]="plugin.id">
|
||||
{{plugin.name}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<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 md-button color="primary" (click)="addToService(item[0])">Add</button></td>
|
||||
<td><button md-button color="primary" (click)="sendLive(item[0])">Send Live</button></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
`,
|
||||
providers: [OpenLPService]
|
||||
})
|
||||
|
||||
|
||||
export class OpenLPSearchComponent implements OnInit {
|
||||
|
||||
public searchPlugins: OpenLPPlugin[] = null;
|
||||
public searchText = null;
|
||||
public searchResults = null;
|
||||
public selectedPlugin: string;
|
||||
public currentPlugin: string;
|
||||
|
||||
constructor(private openlpService: OpenLPService) {}
|
||||
|
||||
onSubmit() {
|
||||
this.currentPlugin = this.selectedPlugin;
|
||||
// this.openlpService.search(this.currentPlugin, this.searchText).then(items => this.searchResults = items);
|
||||
}
|
||||
|
||||
sendLive(id) {
|
||||
this.openlpService.sendItemLive(this.currentPlugin, id);
|
||||
}
|
||||
|
||||
addToService(id) {
|
||||
this.openlpService.addItemToService(this.currentPlugin, id);
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.getSearchablePlugins();
|
||||
}
|
||||
|
||||
getSearchablePlugins() {
|
||||
// this.openlpService.getSearchablePlugins().then(items => {
|
||||
// this.searchPlugins = [];
|
||||
// for (var i = items.length - 1; i >= 0; i--) {
|
||||
// this.searchPlugins.push({id: items[i][0], name: items[i][1]})
|
||||
// }
|
||||
// });
|
||||
}
|
||||
}
|
||||
|
||||
interface OpenLPPlugin {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { Router } from '@angular/router'
|
||||
|
||||
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>
|
||||
`,
|
||||
providers: [OpenLPService]
|
||||
})
|
||||
|
||||
export class OpenLPServiceComponent implements OnInit {
|
||||
items = null;
|
||||
ngOnInit() {
|
||||
this.getServiceItems();
|
||||
}
|
||||
|
||||
onItemSelected(item) {
|
||||
this.openlpService.setServiceItem(item);
|
||||
this.router.navigate(['slides']);
|
||||
}
|
||||
|
||||
getServiceItems() {
|
||||
// this.openlpService.getServiceItems().then(items => this.items = items);
|
||||
}
|
||||
|
||||
constructor(private openlpService: OpenLPService, private router: Router) {
|
||||
openlpService.stateChanged$.subscribe(item => this.getServiceItems());
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
export class ServiceItem {
|
||||
id: string;
|
||||
notes: string;
|
||||
plugin: string;
|
||||
selected: boolean;
|
||||
title: string;
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
export class Slide {
|
||||
selected: boolean;
|
||||
html: string;
|
||||
tag: string;
|
||||
text: string;
|
||||
lines: string[];
|
||||
}
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
|
||||
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>
|
||||
`,
|
||||
providers: [OpenLPService]
|
||||
})
|
||||
|
||||
export class OpenLPSlidesComponent implements OnInit {
|
||||
slides = null;
|
||||
ngOnInit() {
|
||||
this.getSlides();
|
||||
}
|
||||
|
||||
onSlideSelected(item) {
|
||||
// this.openlpService.setSlide(item);
|
||||
}
|
||||
|
||||
getSlides() {
|
||||
// this.openlpService.getItemSlides().then(slides=> {this.slides = slides;console.log(slides);});
|
||||
}
|
||||
|
||||
constructor(private openlpService: OpenLPService) {
|
||||
openlpService.stateChanged$.subscribe(item => this.getSlides());
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
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);}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
|
|
@ -7,8 +7,16 @@
|
|||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
<app-root>
|
||||
<div style="margin-top: 80px;">
|
||||
<div style="margin: auto; width: 100%; display: block;">
|
||||
<img src="/assets/images/loading.png" style='height: 100%; width: 100%; object-fit: contain'>
|
||||
<p style="text-align: center;">Loading...</p>
|
||||
</div>
|
||||
</div>
|
||||
</app-root>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1 +1,24 @@
|
|||
/* You can add global styles to this file, and also import other style files */
|
||||
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
|
||||
|
||||
|
||||
* {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
mat-sidenav-layout {
|
||||
background: rgba(0,0,0,0.03);
|
||||
}
|
||||
mat-sidenav {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.displayButton .active {
|
||||
background: 'teal';
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
|
|
|
|||
20
yarn.lock
20
yarn.lock
|
|
@ -97,6 +97,12 @@
|
|||
dependencies:
|
||||
tslib "^1.9.0"
|
||||
|
||||
"@angular/cdk@^6.4.2":
|
||||
version "6.4.2"
|
||||
resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-6.4.2.tgz#e623cdbbe6258980b0fa93beafce0ea7c4e2c17b"
|
||||
dependencies:
|
||||
tslib "^1.7.1"
|
||||
|
||||
"@angular/cli@~6.0.0":
|
||||
version "6.0.8"
|
||||
resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-6.0.8.tgz#65070958b944be30053232c51f8449b7ddd4d92a"
|
||||
|
|
@ -157,6 +163,14 @@
|
|||
version "6.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@angular/language-service/-/language-service-6.1.1.tgz#131a320be957a02dcf710d9242bd8e43b7c24c3c"
|
||||
|
||||
"@angular/material@^6.4.2":
|
||||
version "6.4.2"
|
||||
resolved "https://registry.yarnpkg.com/@angular/material/-/material-6.4.2.tgz#f39529d56bad97f0470b886c3f30591b9d3a7d05"
|
||||
dependencies:
|
||||
tslib "^1.7.1"
|
||||
optionalDependencies:
|
||||
parse5 "^5.0.0"
|
||||
|
||||
"@angular/platform-browser-dynamic@^6.0.0":
|
||||
version "6.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-6.1.1.tgz#2505f463d29827256944c1d134cd8519e7f954cd"
|
||||
|
|
@ -4436,6 +4450,10 @@ parse5@^4.0.0:
|
|||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608"
|
||||
|
||||
parse5@^5.0.0:
|
||||
version "5.0.0"
|
||||
resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.0.0.tgz#4d02710d44f3c3846197a11e205d4ef17842b81a"
|
||||
|
||||
parsejson@0.0.3:
|
||||
version "0.0.3"
|
||||
resolved "https://registry.yarnpkg.com/parsejson/-/parsejson-0.0.3.tgz#ab7e3759f209ece99437973f7d0f1f64ae0e64ab"
|
||||
|
|
@ -5916,7 +5934,7 @@ tsickle@^0.32.1:
|
|||
source-map "^0.6.0"
|
||||
source-map-support "^0.5.0"
|
||||
|
||||
tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0:
|
||||
tslib@^1.7.1, tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0:
|
||||
version "1.9.3"
|
||||
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue