diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 559156b..bafbc08 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -38,6 +38,10 @@ import { MainViewComponent } from './components/main-view/main-view.component'; import { ChordProPipe } from './components/chord-view/chordpro.pipe'; import { LoginComponent } from './components/login/login.component'; import { ThemesComponent } from './components/themes/themes.component'; +import { SlideListComponent } from './components/slides/slide-list/slide-list.component'; +import { SlideItemComponent } from './components/slides/slide-item/slide-item.component'; +import { ServiceItemComponent } from './components/service/service-item/service-item.component'; +import { ServiceListComponent } from './components/service/service-list/service-list.component'; @NgModule({ @@ -50,10 +54,14 @@ import { ThemesComponent } from './components/themes/themes.component'; ChordProPipe, LoginComponent, ServiceComponent, + ServiceListComponent, + ServiceItemComponent, AlertComponent, SearchComponent, SearchOptionsComponent, SlidesComponent, + SlideListComponent, + SlideItemComponent, ThemesComponent ], imports: [ diff --git a/src/app/components/service/service-item/service-item.component.html b/src/app/components/service/service-item/service-item.component.html new file mode 100644 index 0000000..0ec97ec --- /dev/null +++ b/src/app/components/service/service-item/service-item.component.html @@ -0,0 +1,3 @@ + + {{ getIcon(item) }} {{ item.title }} + diff --git a/src/app/components/service/service-item/service-item.component.scss b/src/app/components/service/service-item/service-item.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/service/service-item/service-item.component.ts b/src/app/components/service/service-item/service-item.component.ts new file mode 100644 index 0000000..6cc6c97 --- /dev/null +++ b/src/app/components/service/service-item/service-item.component.ts @@ -0,0 +1,40 @@ +import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'; + +import { ServiceItem } from '../../../responses'; + +@Component({ + selector: 'openlp-service-item', + templateUrl: './service-item.component.html', + styleUrls: ['./service-item.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class ServiceItemComponent { + @Input() item: ServiceItem; + @Input() selected = false; + @Output() select = new EventEmitter(); + + onItemSelected(item: ServiceItem) { + this.select.emit(item); + } + + getIcon(item: ServiceItem): string { + if (!item.is_valid) { + return 'delete'; + } else if (item.plugin === 'songs') { + return 'queue_music'; + } else if (item.plugin === 'images') { + return 'image'; + } else if (item.plugin === 'bibles') { + return 'book'; + } else if (item.plugin === 'media') { + return 'movie'; + } else if (item.plugin === 'custom') { + return 'description'; + } else if (item.plugin === 'presentations') { + return 'slideshow'; + } + return 'crop_square'; + } + +} diff --git a/src/app/components/service/service-list/service-list.component.html b/src/app/components/service/service-list/service-list.component.html new file mode 100644 index 0000000..88aa87a --- /dev/null +++ b/src/app/components/service/service-list/service-list.component.html @@ -0,0 +1,7 @@ + diff --git a/src/app/components/service/service-list/service-list.component.scss b/src/app/components/service/service-list/service-list.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/service/service-list/service-list.component.ts b/src/app/components/service/service-list/service-list.component.ts new file mode 100644 index 0000000..d562064 --- /dev/null +++ b/src/app/components/service/service-list/service-list.component.ts @@ -0,0 +1,41 @@ +import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core'; +import { Subscription } from 'rxjs'; + +import { OpenLPService } from '../../../openlp.service'; +import { ServiceItem } from '../../../responses'; + +@Component({ + selector: 'openlp-service-list', + templateUrl: './service-list.component.html', + styleUrls: ['./service-list.component.scss'], +}) + +export class ServiceListComponent implements OnInit, OnDestroy { + items: ServiceItem[] = []; + _subscription: Subscription; + + @Output() itemSelected = new EventEmitter(); + + ngOnInit() { + this.fetchServiceItems(); + } + + onItemSelected(item: ServiceItem) { + this.itemSelected.emit(item); + } + + fetchServiceItems() { + this.openlpService.getServiceItems().subscribe(items => this.items = items); + } + + constructor(private openlpService: OpenLPService) { + this._subscription = openlpService.stateChanged$.subscribe(state => { + this.fetchServiceItems(); + }); + } + + ngOnDestroy() { + this._subscription.unsubscribe(); + } +} + diff --git a/src/app/components/service/service.component.html b/src/app/components/service/service.component.html index a252bc6..3098291 100644 --- a/src/app/components/service/service.component.html +++ b/src/app/components/service/service.component.html @@ -1,3 +1 @@ - - {{ getIcon(item) }} {{ item.title }} - + \ No newline at end of file diff --git a/src/app/components/service/service.component.ts b/src/app/components/service/service.component.ts index 25b5268..6f24438 100644 --- a/src/app/components/service/service.component.ts +++ b/src/app/components/service/service.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; import { Router } from '@angular/router'; import { OpenLPService } from '../../openlp.service'; @@ -9,50 +9,18 @@ import { ServiceItem } from '../../responses'; selector: 'openlp-service', templateUrl: './service.component.html', styleUrls: ['./service.component.scss'], - providers: [OpenLPService] }) -export class ServiceComponent implements OnInit { - items: ServiceItem[] = []; - - ngOnInit() { - this.getServiceItems(); - } - - onItemSelected(item) { +export class ServiceComponent { + onItemSelected(item: ServiceItem) { if (item.is_valid) { this.openlpService.setServiceItem(item.id).subscribe(); this.router.navigate(['slides']); } } - getServiceItems() { - this.openlpService.getServiceItems().subscribe(items => this.items = items); - } - - constructor(private pageTitleService: PageTitleService, private openlpService: OpenLPService, - private router: Router) { + constructor(protected pageTitleService: PageTitleService, protected openlpService: OpenLPService, + protected router: Router) { pageTitleService.changePageTitle('Service'); - openlpService.stateChanged$.subscribe(item => this.getServiceItems()); } - - getIcon(item: ServiceItem): string { - if (!item.is_valid) { - return 'delete'; - } else if (item.plugin === 'songs') { - return 'queue_music'; - } else if (item.plugin === 'images') { - return 'image'; - } else if (item.plugin === 'bibles') { - return 'book'; - } else if (item.plugin === 'media') { - return 'movie'; - } else if (item.plugin === 'custom') { - return 'description'; - } else if (item.plugin === 'presentations') { - return 'slideshow'; - } - return 'crop_square'; - } - } diff --git a/src/app/components/slides/slide-item/slide-item.component.html b/src/app/components/slides/slide-item/slide-item.component.html new file mode 100644 index 0000000..d5a3d70 --- /dev/null +++ b/src/app/components/slides/slide-item/slide-item.component.html @@ -0,0 +1,13 @@ + +
{{ slide?.tag }}
+
+ +
+ {{ slide?.text }} +
+
+ +
{{ slide?.text }}
+
+
+ diff --git a/src/app/components/slides/slide-item/slide-item.component.scss b/src/app/components/slides/slide-item/slide-item.component.scss new file mode 100644 index 0000000..329a44b --- /dev/null +++ b/src/app/components/slides/slide-item/slide-item.component.scss @@ -0,0 +1,34 @@ +mat-card { + cursor: pointer; +} + +.selected { + background-color: rgb(235, 235, 235); + font-weight: 700; +} + +.verse-tag { + float: left; +} + +.verse-text { + margin-left: 2.5rem; + white-space: pre-wrap; +} +/* Styles for displaying thumbnails */ +.verse-img-container { + /* CSS for formatting DIV containing the image */ + margin-left: 2.5rem; + display: inline-block; +} +.verse-img-container img { + /* Roughly basing these values off of the current thumbnail size */ + /* Images sent from OpenLP should be larger and should be sized based on viewer screen size */ + max-height: 75%; + min-height: 88px; +} +.img-verse-text { + font-size: 1.1rem; + white-space: pre-wrap; +} + diff --git a/src/app/components/slides/slide-item/slide-item.component.ts b/src/app/components/slides/slide-item/slide-item.component.ts new file mode 100644 index 0000000..02ea22b --- /dev/null +++ b/src/app/components/slides/slide-item/slide-item.component.ts @@ -0,0 +1,20 @@ +import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'; +import { Slide } from '../../../responses'; + +@Component({ + selector: 'openlp-slide-item', + templateUrl: './slide-item.component.html', + styleUrls: ['./slide-item.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class SlideItemComponent { + @Input() slide: Slide; + @Input() selected = false; + @Output() select = new EventEmitter(); + + onSlideSelected(slide: Slide) { + this.select.emit(slide); + } +} + diff --git a/src/app/components/slides/slide-list/slide-list.component.html b/src/app/components/slides/slide-list/slide-list.component.html new file mode 100644 index 0000000..cf049ac --- /dev/null +++ b/src/app/components/slides/slide-list/slide-list.component.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/components/slides/slide-list/slide-list.component.scss b/src/app/components/slides/slide-list/slide-list.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/slides/slide-list/slide-list.component.ts b/src/app/components/slides/slide-list/slide-list.component.ts new file mode 100644 index 0000000..5a02da5 --- /dev/null +++ b/src/app/components/slides/slide-list/slide-list.component.ts @@ -0,0 +1,50 @@ +import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core'; +import { Subscription } from 'rxjs'; + +import { Slide } from '../../../responses'; +import { OpenLPService } from '../../../openlp.service'; + +@Component({ + selector: 'openlp-slide-list', + templateUrl: './slide-list.component.html', + styleUrls: ['./slide-list.component.scss'], +}) + +export class SlideListComponent implements OnInit, OnDestroy { + slides: Slide[] = null; + @Output() slideSelected = new EventEmitter(); + _subscription: Subscription; + + constructor(private openlpService: OpenLPService) { + this._subscription = openlpService.stateChanged$.subscribe(item => this.fetchSlides()); + } + + ngOnInit() { + this.fetchSlides(); + } + + ngOnDestroy() { + this._subscription.unsubscribe(); + } + + onSlideSelected(slide: Slide, index: number) { + this.slideSelected.emit({slide, index}); + } + + fetchSlides() { + this.openlpService.getServiceItem().subscribe(serviceItem => { + if (serviceItem instanceof Array) { + this.slides = serviceItem; + } + else { + this.slides = serviceItem.slides; + } + }); + } +} + +export interface SlideListItem { + slide: Slide; + index: number; +} + diff --git a/src/app/components/slides/slides.component.html b/src/app/components/slides/slides.component.html index 7b62e4f..cf00020 100644 --- a/src/app/components/slides/slides.component.html +++ b/src/app/components/slides/slides.component.html @@ -1,12 +1 @@ - -
{{ slide.tag }}
-
- -
- {{ slide.text }} -
-
- -
{{ slide.text }}
-
-
+ \ No newline at end of file diff --git a/src/app/components/slides/slides.component.scss b/src/app/components/slides/slides.component.scss index 43e6f90..e69de29 100644 --- a/src/app/components/slides/slides.component.scss +++ b/src/app/components/slides/slides.component.scss @@ -1,33 +0,0 @@ -mat-card { - cursor: pointer; -} - -.selected { - background-color: rgb(235, 235, 235); - font-weight: 700; -} - -.verse-tag { - float: left; -} - -.verse-text { - margin-left: 2.5rem; - white-space: pre-wrap; -} -/* Styles for displaying thumbnails */ -.verse-img-container { - /* CSS for formatting DIV containing the image */ - margin-left: 2.5rem; - display: inline-block; -} -.verse-img-container img { - /* Roughly basing these values off of the current thumbnail size */ - /* Images sent from OpenLP should be larger and should be sized based on viewer screen size */ - max-height: 75%; - min-height: 88px; -} -.img-verse-text { - font-size: 1.1rem; - white-space: pre-wrap; -} diff --git a/src/app/components/slides/slides.component.ts b/src/app/components/slides/slides.component.ts index e539423..b926597 100644 --- a/src/app/components/slides/slides.component.ts +++ b/src/app/components/slides/slides.component.ts @@ -1,39 +1,21 @@ -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; import { OpenLPService } from '../../openlp.service'; import { PageTitleService } from '../../page-title.service'; +import { SlideListItem } from './slide-list/slide-list.component'; @Component({ selector: 'openlp-slides', templateUrl: './slides.component.html', styleUrls: ['./slides.component.scss'], - providers: [OpenLPService] }) -export class SlidesComponent implements OnInit { - slides = null; - - constructor(private pageTitleService: PageTitleService, private openlpService: OpenLPService) { +export class SlidesComponent { + constructor(protected pageTitleService: PageTitleService, protected openlpService: OpenLPService) { pageTitleService.changePageTitle('Slides'); - openlpService.stateChanged$.subscribe(item => this.getSlides()); } - ngOnInit() { - this.getSlides(); - } - - onSlideSelected(id) { - this.openlpService.setSlide(id).subscribe(); - } - - getSlides() { - this.openlpService.getServiceItem().subscribe(serviceItem => { - if (serviceItem instanceof Array) { - this.slides = serviceItem; - } - else { - this.slides = serviceItem.slides; - } - }); + onSlideSelected(item: SlideListItem) { + this.openlpService.setSlide(item.index).subscribe(); } }