From 932c6a2a638a747996a891e956d62c92cf1260af Mon Sep 17 00:00:00 2001 From: smuddyx Date: Fri, 21 May 2021 09:57:43 +0200 Subject: [PATCH] guest page --- package-lock.json | 30 ++++++++++++++++ package.json | 4 ++- src/app/app-routing.module.ts | 4 +++ src/app/modules/guest/guest.component.html | 8 +++++ src/app/modules/guest/guest.component.less | 16 +++++++++ src/app/modules/guest/guest.component.spec.ts | 25 +++++++++++++ src/app/modules/guest/guest.component.ts | 35 ++++++++++++++++++ src/app/modules/guest/guest.module.ts | 36 +++++++++++++++++++ .../presentation/remote/remote.component.less | 6 ++-- src/index.html | 2 +- src/styles/styles.less | 11 ++++++ 11 files changed, 172 insertions(+), 5 deletions(-) create mode 100644 src/app/modules/guest/guest.component.html create mode 100644 src/app/modules/guest/guest.component.less create mode 100644 src/app/modules/guest/guest.component.spec.ts create mode 100644 src/app/modules/guest/guest.component.ts create mode 100644 src/app/modules/guest/guest.module.ts diff --git a/package-lock.json b/package-lock.json index 0a7cc46..74209e6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5905,6 +5905,14 @@ "resolved": "https://registry.npmjs.org/dom-storage/-/dom-storage-2.1.0.tgz", "integrity": "sha512-g6RpyWXzl0RR6OTElHKBl7nwnK87GUyZMYC7JWsB/IA73vpqK2K6LT39x4VepLxlSsWBFrPVLnsSR5Jyty0+2Q==" }, + "dom7": { + "version": "2.1.5", + "resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.5.tgz", + "integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==", + "requires": { + "ssr-window": "^2.0.0" + } + }, "domain-browser": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz", @@ -11368,6 +11376,14 @@ "resize-observer-polyfill": "^1.5.0" } }, + "ngx-swiper-wrapper": { + "version": "9.0.1", + "resolved": "https://registry.npmjs.org/ngx-swiper-wrapper/-/ngx-swiper-wrapper-9.0.1.tgz", + "integrity": "sha512-Bm0zZZiJSn+Ubif4zLMJ0A4RmKSS4utCnmjpeNCLH4Y2rwLyYMoVggF+zpxhiPZ5f+xVc2QBped3VZvu1tzL9w==", + "requires": { + "swiper": "^5.3.0" + } + }, "nice-try": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", @@ -15152,6 +15168,11 @@ "tweetnacl": "~0.14.0" } }, + "ssr-window": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-2.0.0.tgz", + "integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A==" + }, "ssri": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.0.tgz", @@ -15660,6 +15681,15 @@ "util.promisify": "~1.0.0" } }, + "swiper": { + "version": "5.4.5", + "resolved": "https://registry.npmjs.org/swiper/-/swiper-5.4.5.tgz", + "integrity": "sha512-7QjA0XpdOmiMoClfaZ2lYN6ICHcMm72LXiY+NF4fQLFidigameaofvpjEEiTQuw3xm5eksG5hzkaRsjQX57vtA==", + "requires": { + "dom7": "^2.1.5", + "ssr-window": "^2.0.0" + } + }, "symbol-observable": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz", diff --git a/package.json b/package.json index c75e306..ed92ef2 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,8 @@ "build": "ng build", "deploy": "ng build --prod && firebase deploy", "test": "ng test", - "lint": "ng lint --fix" + "lint": "ng lint --fix", + "postinstall": "ngcc" }, "private": true, "dependencies": { @@ -30,6 +31,7 @@ "ngx-hocs-unsubscriber": "^1.1.7", "ngx-mat-select-search": "^2.1.2", "ngx-perfect-scrollbar": "^9.0.0", + "ngx-swiper-wrapper": "^9.0.1", "rxjs": "~6.5.5", "tslib": "^1.10.0", "zone.js": "~0.10.2" diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 62c1191..9cc3e23 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -43,6 +43,10 @@ const routes: Routes = [ { path: 'brand', loadChildren: () => import('./modules/brand/brand.module').then(m => m.BrandModule), + }, + { + path: 'guest', + loadChildren: () => import('./modules/guest/guest.module').then(m => m.GuestModule), } ]; diff --git a/src/app/modules/guest/guest.component.html b/src/app/modules/guest/guest.component.html new file mode 100644 index 0000000..eef822d --- /dev/null +++ b/src/app/modules/guest/guest.component.html @@ -0,0 +1,8 @@ +
+ +
+ +
+ +
diff --git a/src/app/modules/guest/guest.component.less b/src/app/modules/guest/guest.component.less new file mode 100644 index 0000000..740be92 --- /dev/null +++ b/src/app/modules/guest/guest.component.less @@ -0,0 +1,16 @@ +.view { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: #0003; + backdrop-filter: blur(10px); + z-index: 1; + color: white; +} + +app-song-text { + margin: 20px; + display: block; +} diff --git a/src/app/modules/guest/guest.component.spec.ts b/src/app/modules/guest/guest.component.spec.ts new file mode 100644 index 0000000..05fbae5 --- /dev/null +++ b/src/app/modules/guest/guest.component.spec.ts @@ -0,0 +1,25 @@ +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; + +import {GuestComponent} from './guest.component'; + +describe('GuestComponent', () => { + let component: GuestComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [GuestComponent] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(GuestComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/modules/guest/guest.component.ts b/src/app/modules/guest/guest.component.ts new file mode 100644 index 0000000..1071d83 --- /dev/null +++ b/src/app/modules/guest/guest.component.ts @@ -0,0 +1,35 @@ +import {Component, OnInit} from '@angular/core'; +import {SongService} from '../songs/services/song.service'; +import {GlobalSettingsService} from '../../services/global-settings.service'; +import {Observable} from 'rxjs'; +import {map, switchMap} from 'rxjs/operators'; +import {ShowSongService} from '../shows/services/show-song.service'; + +@Component({ + selector: 'app-guest', + templateUrl: './guest.component.html', + styleUrls: ['./guest.component.less'] +}) +export class GuestComponent implements OnInit { + public songs$: Observable[]>; + + + constructor( + private songService: SongService, + private globalSettingsService: GlobalSettingsService, + private showSongService: ShowSongService, + ) { + } + + public ngOnInit(): void { + this.songs$ = this.globalSettingsService.get$.pipe( + map(_ => _.currentShow), + switchMap(_ => this.showSongService.list$(_)), + map(_ => _ + .sort((x, y) => x.order - y.order) + .map(showSong => this.songService.read$(showSong.songId).pipe(map(song => song.text))) + ) + ); + } + +} diff --git a/src/app/modules/guest/guest.module.ts b/src/app/modules/guest/guest.module.ts new file mode 100644 index 0000000..0318bcb --- /dev/null +++ b/src/app/modules/guest/guest.module.ts @@ -0,0 +1,36 @@ +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {GuestComponent} from './guest.component'; +import {RouterModule} from '@angular/router'; +import {SWIPER_CONFIG, SwiperConfigInterface, SwiperModule} from 'ngx-swiper-wrapper'; +import {SongTextModule} from '../../widget-modules/components/song-text/song-text.module'; + +const DEFAULT_SWIPER_CONFIG: SwiperConfigInterface = { + a11y: true, + direction: 'horizontal', + slidesPerView: 1, + keyboard: true, + mousewheel: true, + scrollbar: false, + navigation: true, + pagination: false, + +}; + +@NgModule({ + declarations: [GuestComponent], + imports: [ + CommonModule, + RouterModule.forChild([{path: '', component: GuestComponent}]), + SwiperModule, + SongTextModule + ], + providers: [ + { + provide: SWIPER_CONFIG, + useValue: DEFAULT_SWIPER_CONFIG + } + ] +}) +export class GuestModule { +} diff --git a/src/app/modules/presentation/remote/remote.component.less b/src/app/modules/presentation/remote/remote.component.less index 5186996..1d86479 100644 --- a/src/app/modules/presentation/remote/remote.component.less +++ b/src/app/modules/presentation/remote/remote.component.less @@ -35,14 +35,14 @@ overflow: hidden; transition: 300ms all ease-in-out; cursor: pointer; - .card-1; + // .card-1; &:hover { - .card-2; + .card-1; } &.active { - .card-5; + .card-2; .head { background: #4286f4; diff --git a/src/index.html b/src/index.html index d6ee632..1b0e3c1 100644 --- a/src/index.html +++ b/src/index.html @@ -4,7 +4,7 @@ Worship Generator - + diff --git a/src/styles/styles.less b/src/styles/styles.less index 9bd82b3..6e89462 100644 --- a/src/styles/styles.less +++ b/src/styles/styles.less @@ -122,3 +122,14 @@ mat-dialog-container.mat-dialog-container { .mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label { transform: translateY(-1.0em) scale(0.75); } + + +body { + .swiper-button-next, .swiper-button-prev { + opacity: 0.1; + } + + .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { + opacity: 0; + } +}