diff --git a/src/app/app.component.html b/src/app/app.component.html
index 38b3f9f..7fc3b1a 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -6,6 +6,8 @@
Alerts
Search
+ Chord View
+
Fast switching
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index fc3c949..2ab5cd4 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -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,
diff --git a/src/app/app.routing.ts b/src/app/app.routing.ts
index aa29779..b7334c7 100644
--- a/src/app/app.routing.ts
+++ b/src/app/app.routing.ts
@@ -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 {}
\ No newline at end of file
+export class AppRoutingModule { }
\ No newline at end of file
diff --git a/src/app/components/chord-view/chord-view.component.html b/src/app/components/chord-view/chord-view.component.html
new file mode 100644
index 0000000..ff7302b
--- /dev/null
+++ b/src/app/components/chord-view/chord-view.component.html
@@ -0,0 +1,14 @@
+
+
+
+ {{ tag }}
+
+
+
+ {{ activeSlide.text }}
+
+
+ {{ currentSlides[3].text }}
+
+
+
\ No newline at end of file
diff --git a/src/app/components/chord-view/chord-view.component.scss b/src/app/components/chord-view/chord-view.component.scss
new file mode 100644
index 0000000..287ce7f
--- /dev/null
+++ b/src/app/components/chord-view/chord-view.component.scss
@@ -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;
+}
\ No newline at end of file
diff --git a/src/app/components/chord-view/chord-view.component.spec.ts b/src/app/components/chord-view/chord-view.component.spec.ts
new file mode 100644
index 0000000..8a73f44
--- /dev/null
+++ b/src/app/components/chord-view/chord-view.component.spec.ts
@@ -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;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ ChordViewComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ChordViewComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/components/chord-view/chord-view.component.ts b/src/app/components/chord-view/chord-view.component.ts
new file mode 100644
index 0000000..a0f6b24
--- /dev/null
+++ b/src/app/components/chord-view/chord-view.component.ts
@@ -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;
+ }
+ }
+ }
+}
diff --git a/src/app/components/main-view/main-view.component.html b/src/app/components/main-view/main-view.component.html
new file mode 100644
index 0000000..eddd55b
--- /dev/null
+++ b/src/app/components/main-view/main-view.component.html
@@ -0,0 +1,3 @@
+
+ main-view works!
+
diff --git a/src/app/components/main-view/main-view.component.scss b/src/app/components/main-view/main-view.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/main-view/main-view.component.spec.ts b/src/app/components/main-view/main-view.component.spec.ts
new file mode 100644
index 0000000..00c197d
--- /dev/null
+++ b/src/app/components/main-view/main-view.component.spec.ts
@@ -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;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ MainViewComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(MainViewComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/components/main-view/main-view.component.ts b/src/app/components/main-view/main-view.component.ts
new file mode 100644
index 0000000..3865a79
--- /dev/null
+++ b/src/app/components/main-view/main-view.component.ts
@@ -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() {
+ }
+
+}
diff --git a/src/app/components/overlay.scss b/src/app/components/overlay.scss
new file mode 100644
index 0000000..eafe216
--- /dev/null
+++ b/src/app/components/overlay.scss
@@ -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;
+}
\ No newline at end of file
diff --git a/src/app/components/stage-view/stage-view.component.html b/src/app/components/stage-view/stage-view.component.html
new file mode 100644
index 0000000..2189d41
--- /dev/null
+++ b/src/app/components/stage-view/stage-view.component.html
@@ -0,0 +1,3 @@
+
+ stage-view works!
+
diff --git a/src/app/components/stage-view/stage-view.component.scss b/src/app/components/stage-view/stage-view.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/stage-view/stage-view.component.spec.ts b/src/app/components/stage-view/stage-view.component.spec.ts
new file mode 100644
index 0000000..8714547
--- /dev/null
+++ b/src/app/components/stage-view/stage-view.component.spec.ts
@@ -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;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ StageViewComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(StageViewComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/components/stage-view/stage-view.component.ts b/src/app/components/stage-view/stage-view.component.ts
new file mode 100644
index 0000000..e95f117
--- /dev/null
+++ b/src/app/components/stage-view/stage-view.component.ts
@@ -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() {
+
+ }
+
+}
\ No newline at end of file