${song}
`;
+ }
+ song.split(comp.chordRegex).forEach((part, index) => {
+ if (index % 2 === 0) {
+ // text
+ if (lastChord) {
+ chordText += `${part.substring(0, 1)}${part.substring(1)}`;
+ lastChord = '';
+ } else {
+ chordText += part;
+ }
+ } else {
+ // chord
+ lastChord = part.replace(/[[]]/, '');
+ if (nHalfSteps !== 0) {
+ lastChord = lastChord.split('/').map(chord => {
+ const chordRoot = comp.chordRoot(chord);
+ const newRoot = comp.transposeChord(chordRoot, nHalfSteps);
+ return newRoot + comp.restOfChord(chord);
+ }).join('/');
+ }
+
+ // use proper symbols
+ lastChord = lastChord.replace(/b/g, '♭');
+ lastChord = lastChord.replace(/#/g, '♯');
+ }
+ });
+ return `${chordText}
`;
+ }
+}
diff --git a/src/app/components/chord-view/chordpro.scss b/src/app/components/chord-view/chordpro.scss
new file mode 100644
index 0000000..0540bcd
--- /dev/null
+++ b/src/app/components/chord-view/chordpro.scss
@@ -0,0 +1,23 @@
+.song {
+ white-space: pre-wrap;
+ .with-chords {
+ line-height: 2;
+ }
+
+ span[data-chord]:before {
+ position: relative;
+ top: -1em;
+ display: inline-block;
+ content: attr(data-chord);
+ width: 0;
+ color: yellow;
+ }
+}
+
+.nextSlides {
+ .song {
+ span[data-chord]:before {
+ color: gray;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/app/components/login/login.component.html b/src/app/components/login/login.component.html
new file mode 100644
index 0000000..0e59ef9
--- /dev/null
+++ b/src/app/components/login/login.component.html
@@ -0,0 +1,15 @@
+Login
+ + \ No newline at end of file diff --git a/src/app/components/login/login.component.scss b/src/app/components/login/login.component.scss new file mode 100644 index 0000000..bae3884 --- /dev/null +++ b/src/app/components/login/login.component.scss @@ -0,0 +1,3 @@ +mat-form-field { + width: 100%; +} \ No newline at end of file diff --git a/src/app/components/login/login.component.ts b/src/app/components/login/login.component.ts new file mode 100644 index 0000000..b406ffb --- /dev/null +++ b/src/app/components/login/login.component.ts @@ -0,0 +1,29 @@ +import { Component, OnInit } from '@angular/core'; +import { Credentials } from '../../responses'; +import { MatDialogRef, MatSnackBar } from '@angular/material'; +import { OpenLPService } from '../../openlp.service'; + +@Component({ + selector: 'app-login', + templateUrl: './login.component.html', + styleUrls: ['./login.component.scss'] +}) +export class LoginComponent implements OnInit { + username: string; + password: string; + constructor(private dialogRef: MatDialogRef
+ 
+
\ No newline at end of file
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..2f570e8
--- /dev/null
+++ b/src/app/components/main-view/main-view.component.scss
@@ -0,0 +1,8 @@
+img {
+ position: absolute;
+ top: 0;
+ vertical-align: middle;
+ height: 100%;
+ background-size: cover;
+ background-repeat: no-repeat;
+}
\ No newline at end of file
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..3ebc4f4
--- /dev/null
+++ b/src/app/components/main-view/main-view.component.ts
@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import { OpenLPService } from '../../openlp.service';
+
+@Component({
+ selector: 'app-main-view',
+ templateUrl: './main-view.component.html',
+ styleUrls: ['./main-view.component.scss', '../overlay.scss']
+})
+export class MainViewComponent implements OnInit {
+ img: string;
+ constructor(private openlpService: OpenLPService) { }
+
+ ngOnInit() {
+ this.updateImage();
+ this.openlpService.stateChanged$.subscribe(item => this.updateImage());
+ }
+
+ updateImage(): void {
+ this.openlpService.getMainImage().subscribe(view => this.img = view.binary_image);
+ }
+
+}
diff --git a/src/app/components/overlay.scss b/src/app/components/overlay.scss
new file mode 100644
index 0000000..2db0709
--- /dev/null
+++ b/src/app/components/overlay.scss
@@ -0,0 +1,64 @@
+.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;
+}
+
+.sidebar {
+ margin: 1rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
+
+.time {
+ font-size: 2rem;
+ color: gray;
+}
+
+.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;
+ }
+ }
+}
+
+.slide {
+ font-size: 3rem;
+ white-space: pre-line;
+ margin: 0;
+ &.first {
+ margin-top: 1rem;
+ }
+}
+
+.container {
+ margin-left: 1rem;
+}
+
+.nextSlides {
+ font-size: 2rem;
+ margin-top: 1rem;
+ color: gray;
+ .slide {
+ font-size: 2rem;
+ }
+}
\ No newline at end of file
diff --git a/src/app/components/search/search.component.ts b/src/app/components/search/search.component.ts
index e5bbe39..7c1c1a5 100644
--- a/src/app/components/search/search.component.ts
+++ b/src/app/components/search/search.component.ts
@@ -27,11 +27,11 @@ export class SearchComponent implements OnInit {
}
sendLive(id) {
- this.openlpService.sendItemLive(this.currentPlugin, id).subscribe(res => console.log(res));
+ this.openlpService.sendItemLive(this.currentPlugin, id).subscribe(res => {});
}
addToService(id) {
- this.openlpService.addItemToService(this.currentPlugin, id).subscribe(res => console.log(res));
+ this.openlpService.addItemToService(this.currentPlugin, id).subscribe(res => {});
}
ngOnInit() {
diff --git a/src/app/components/service/service.component.ts b/src/app/components/service/service.component.ts
index 6a84130..9d1210b 100644
--- a/src/app/components/service/service.component.ts
+++ b/src/app/components/service/service.component.ts
@@ -18,7 +18,7 @@ export class ServiceComponent implements OnInit {
}
onItemSelected(item) {
- this.openlpService.setServiceItem(item).subscribe(res => console.log(res));
+ this.openlpService.setServiceItem(item).subscribe(res => {});
this.router.navigate(['slides']);
}
diff --git a/src/app/components/slides/slides.component.ts b/src/app/components/slides/slides.component.ts
index 8cb3d69..fe44928 100644
--- a/src/app/components/slides/slides.component.ts
+++ b/src/app/components/slides/slides.component.ts
@@ -17,7 +17,7 @@ export class SlidesComponent implements OnInit {
}
onSlideSelected(item) {
- this.openlpService.setSlide(item).subscribe(res => console.log(res));
+ this.openlpService.setSlide(item).subscribe(res => {});
}
getSlides() {
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..548466a
--- /dev/null
+++ b/src/app/components/stage-view/stage-view.component.html
@@ -0,0 +1,21 @@
+
\ No newline at end of file
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.ts b/src/app/components/stage-view/stage-view.component.ts
new file mode 100644
index 0000000..ddea8b1
--- /dev/null
+++ b/src/app/components/stage-view/stage-view.component.ts
@@ -0,0 +1,84 @@
+import { Component, OnInit } from '@angular/core';
+import { OpenLPService } from '../../openlp.service';
+import { Slide } from '../../responses';
+
+interface Tag {
+ text: string;
+ active: boolean;
+}
+
+@Component({
+ selector: 'app-stage-view',
+ templateUrl: './stage-view.component.html',
+ styleUrls: ['./stage-view.component.scss', '../overlay.scss']
+})
+export class StageViewComponent implements OnInit {
+ currentSlides: Slide[] = [];
+ activeSlide = 0;
+ tags: Tag[] = [];
+ time = new Date();
+ constructor(private openlpService: OpenLPService) {
+ setInterval(() => this.time = new Date(), 1000);
+ }
+
+ ngOnInit() {
+ this.updateCurrentSlides();
+ this.openlpService.stateChanged$.subscribe(item => this.updateCurrentSlides());
+ }
+
+ updateCurrentSlides(): void {
+ this.openlpService.getItemSlides().subscribe(slides => this.setNewSlides(slides));
+ }
+
+ get nextSlides(): Slide[] {
+ return this.currentSlides.slice(this.activeSlide + 1);
+ }
+
+ setNewSlides(slides: Slide[]): void {
+ if (slides.length === 0) {
+ return;
+ }
+ this.currentSlides = slides;
+ this.activeSlide = slides.findIndex(s => s.selected);
+ this.updateTags();
+ }
+
+ /**
+ * This method updates the tags from the current slides.
+ *
+ * We add a tag as soon as we know we need it.
+ * So we start with the first tag and on each tag change we push the new one.
+ *
+ * If we find the same tag, we check to see if the current slide is a repition.
+ * In case of a repition we also add a new tag.
+ *
+ * TODO This approach should work for most cases. It is a primary candidate for a test :-)
+ */
+ updateTags(): void {
+ this.tags = [];
+ this.tags.push({text: this.currentSlides[0].tag, active: this.currentSlides[0].selected});
+ let lastIndex = 0;
+ loop:
+ for (let index = 1; index < this.currentSlides.length; ++index) {
+ let foundActive = false;
+ if (this.currentSlides[index].tag === this.currentSlides[lastIndex].tag) {
+ for (let i = 0; i < index - lastIndex; ++i) {
+ foundActive = foundActive || this.currentSlides[index + i].selected;
+
+ // they are different, stop checking and continue outer loop
+ if (this.currentSlides[lastIndex + i].text !== this.currentSlides[index + i].text) {
+ // Since we are collapsing tags, we make sure to mark the tag active, if any of the collapsed tags were active
+ if (foundActive) {
+ this.tags[this.tags.length - 1].active = foundActive;
+ }
+ continue loop;
+ }
+ }
+ }
+ // either the tags differed, or we found a repitition. Either way add a tag
+ this.tags.push({text: this.currentSlides[index].tag, active: this.currentSlides[index].selected});
+ this.currentSlides[index].first_slide_of_tag = true;
+ lastIndex = index;
+ }
+ }
+}
diff --git a/src/app/openlp.service.ts b/src/app/openlp.service.ts
index 4848f26..c1e0833 100644
--- a/src/app/openlp.service.ts
+++ b/src/app/openlp.service.ts
@@ -1,10 +1,9 @@
import { Injectable, EventEmitter } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { URLSearchParams, Http } from '@angular/http';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
-import { map, take } from 'rxjs/operators';
-import { PluginDescription, State, Slide, ServiceItem } from './responses';
+
+import { PluginDescription, State, Slide, ServiceItem, MainView, SystemInformation, Credentials, AuthToken } from './responses';
import { environment } from '../environments/environment';
const deserialize = (json, cls) => {
@@ -18,6 +17,10 @@ const deserialize = (json, cls) => {
return inst;
};
+const httpOptions = {
+ headers: new HttpHeaders({'Content-Type': 'application/json'})
+};
+
@Injectable()
export class OpenLPService {
private apiURL: string;
@@ -31,30 +34,45 @@ export class OpenLPService {
else {
port = '4316';
}
- this.apiURL = `http://localhost:${port}`;
+ this.apiURL = `http://localhost:${port}/api/v1`;
+
+
this.stateChanged$ = new EventEmitter
- 
+ 
+
Loading...