mirror of https://gitlab.com/openlp/web-remote.git
Start working on stage views
This commit is contained in:
parent
f08a80e3bd
commit
ba7a41abec
|
@ -6,6 +6,8 @@
|
|||
<a mat-list-item (click)="menu.close()" routerLink="/alerts">Alerts</a>
|
||||
<a mat-list-item (click)="menu.close()" routerLink="/search">Search</a>
|
||||
<mat-divider></mat-divider>
|
||||
<a mat-list-item (click)="menu.close()" routerLink="/chords">Chord View</a>
|
||||
<mat-divider></mat-divider>
|
||||
<mat-slide-toggle color="primary" [checked]="fastSwitching" (change)="sliderChanged($event)">Fast switching</mat-slide-toggle>
|
||||
</mat-nav-list>
|
||||
</mat-sidenav>
|
||||
|
|
|
@ -25,6 +25,9 @@ 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';
|
||||
import { ChordViewComponent } from './components/chord-view/chord-view.component';
|
||||
import { StageViewComponent } from './components/stage-view/stage-view.component';
|
||||
import { MainViewComponent } from './components/main-view/main-view.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
|
@ -32,7 +35,10 @@ import { FormsModule } from '@angular/forms';
|
|||
OpenLPServiceComponent,
|
||||
OpenLPAlertComponent,
|
||||
OpenLPSearchComponent,
|
||||
OpenLPSlidesComponent
|
||||
OpenLPSlidesComponent,
|
||||
ChordViewComponent,
|
||||
StageViewComponent,
|
||||
MainViewComponent
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { ModuleWithProviders, NgModule } from '@angular/core';
|
||||
import { ModuleWithProviders, NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
|
@ -6,33 +6,23 @@ 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 { ChordViewComponent } from './components/chord-view/chord-view.component';
|
||||
import { MainViewComponent } from './components/main-view/main-view.component';
|
||||
import { StageViewComponent } from './components/stage-view/stage-view.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
|
||||
}
|
||||
{ path: '', redirectTo: '/service', pathMatch: 'full' },
|
||||
{ path: 'service', component: OpenLPServiceComponent },
|
||||
{ path: 'slides', component: OpenLPSlidesComponent },
|
||||
{ path: 'alerts', component: OpenLPAlertComponent },
|
||||
{ path: 'search', component: OpenLPSearchComponent },
|
||||
{ path: 'chords', component: ChordViewComponent },
|
||||
{ path: 'main', component: MainViewComponent },
|
||||
{ path: 'stage', component: StageViewComponent }
|
||||
];
|
||||
@NgModule({
|
||||
imports: [RouterModule.forRoot(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
|
||||
export class AppRoutingModule {}
|
||||
export class AppRoutingModule { }
|
|
@ -0,0 +1,14 @@
|
|||
<div class="overlay">
|
||||
<button mat-raised-button class="closeButton" routerLink="/">Close</button>
|
||||
<div class="tags">
|
||||
<span class="mat-display-3" *ngFor="let tag of tags">{{ tag }}</span>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="currentSlide mat-display-2">
|
||||
{{ activeSlide.text }}
|
||||
</div>
|
||||
<div class="nextSlide mat-display-1">
|
||||
{{ currentSlides[3].text }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
|
@ -0,0 +1,17 @@
|
|||
.tags {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: start;
|
||||
span {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.nextSlide {
|
||||
color: gray;
|
||||
}
|
|
@ -0,0 +1,25 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ChordViewComponent } from './chord-view.component';
|
||||
|
||||
describe('ChordViewComponent', () => {
|
||||
let component: ChordViewComponent;
|
||||
let fixture: ComponentFixture<ChordViewComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ ChordViewComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ChordViewComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
|
@ -0,0 +1,47 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { OpenLPService } from '../../openlp.service';
|
||||
import { Slide } from '../../responses';
|
||||
import { Observable } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'app-chord-view',
|
||||
templateUrl: './chord-view.component.html',
|
||||
styleUrls: ['./chord-view.component.scss', '../overlay.scss']
|
||||
})
|
||||
export class ChordViewComponent implements OnInit {
|
||||
|
||||
currentSlides: Slide[] = [];
|
||||
activeSlide: Slide;
|
||||
tags: string[] = [];
|
||||
constructor(private openlpService: OpenLPService) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.updateCurrentSlides();
|
||||
this.openlpService.stateChanged$.subscribe(item => this.updateCurrentSlides());
|
||||
}
|
||||
|
||||
updateCurrentSlides(): void {
|
||||
this.openlpService.getItemSlides().subscribe(slides => this.setNewSlides(slides));
|
||||
}
|
||||
|
||||
setNewSlides(slides: Slide[]): void {
|
||||
this.currentSlides = slides;
|
||||
console.log(slides);
|
||||
this.activeSlide = slides.find(s => s.selected);
|
||||
this.updateOrderOfTags();
|
||||
}
|
||||
|
||||
updateOrderOfTags(): void {
|
||||
this.tags = [];
|
||||
let lastTag: string;
|
||||
let lastIndex: number;
|
||||
for (let i = 0; i < this.currentSlides.length; ++i) {
|
||||
let currentTag = this.currentSlides[i].tag;
|
||||
if (currentTag != lastTag) {
|
||||
this.tags.push(lastTag);
|
||||
lastTag = currentTag;
|
||||
lastIndex = i;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,3 @@
|
|||
<p>
|
||||
main-view works!
|
||||
</p>
|
|
@ -0,0 +1,25 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { MainViewComponent } from './main-view.component';
|
||||
|
||||
describe('MainViewComponent', () => {
|
||||
let component: MainViewComponent;
|
||||
let fixture: ComponentFixture<MainViewComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ MainViewComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(MainViewComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
|
@ -0,0 +1,15 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-main-view',
|
||||
templateUrl: './main-view.component.html',
|
||||
styleUrls: ['./main-view.component.scss', '../overlay.scss']
|
||||
})
|
||||
export class MainViewComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
|
@ -0,0 +1,17 @@
|
|||
.overlay {
|
||||
background: black;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
overflow-x: hidden;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.closeButton {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
}
|
|
@ -0,0 +1,3 @@
|
|||
<p>
|
||||
stage-view works!
|
||||
</p>
|
|
@ -0,0 +1,25 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { StageViewComponent } from './stage-view.component';
|
||||
|
||||
describe('StageViewComponent', () => {
|
||||
let component: StageViewComponent;
|
||||
let fixture: ComponentFixture<StageViewComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ StageViewComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(StageViewComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
|
@ -0,0 +1,16 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-stage-view',
|
||||
templateUrl: './stage-view.component.html',
|
||||
styleUrls: ['./stage-view.component.scss', '../overlay.scss']
|
||||
})
|
||||
export class StageViewComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
}
|
||||
|
||||
}
|
Loading…
Reference in New Issue