show component

src/app/app-routing.module.ts

@@ -1,5 +1,5 @@
 import {NgModule} from '@angular/core';
-import {RouterModule, Routes} from '@angular/router';
+import {PreloadAllModules, RouterModule, Routes} from '@angular/router';
 import {AngularFireAuthGuard, redirectUnauthorizedTo} from '@angular/fire/auth-guard';
 
 const routes: Routes = [
@@ -15,8 +15,8 @@ const routes: Routes = [
     data: {authGuardPipe: () => redirectUnauthorizedTo(['user', 'login'])}
   },
   {
-    path: 'show',
-    loadChildren: () => import('./modules/show/show.module').then(m => m.ShowModule),
+    path: 'shows',
+    loadChildren: () => import('./modules/shows/shows.module').then(m => m.ShowsModule),
     canActivate: [AngularFireAuthGuard],
     data: {authGuardPipe: () => redirectUnauthorizedTo(['user', 'login'])}
   },
@@ -27,7 +27,7 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [RouterModule.forRoot(routes, {preloadingStrategy: PreloadAllModules})],
   exports: [RouterModule]
 })
 export class AppRoutingModule {

src/app/app.module.ts

@@ -6,7 +6,7 @@ import {AppComponent} from './app.component';
 import {ServiceWorkerModule} from '@angular/service-worker';
 import {environment} from '../environments/environment';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {ApplicationFrameModule} from './widget-modules/application-frame/application-frame.module';
+import {ApplicationFrameModule} from './widget-modules/components/application-frame/application-frame.module';
 import {AngularFireModule} from '@angular/fire';
 import {AngularFirestoreModule} from '@angular/fire/firestore';
 import {AngularFireStorageModule} from '@angular/fire/storage';

src/app/modules/show/services/show.service.spec.ts

@@ -1,12 +0,0 @@
-import {TestBed} from '@angular/core/testing';
-
-import {ShowService} from './show.service';
-
-describe('ShowService', () => {
-  beforeEach(() => TestBed.configureTestingModule({}));
-
-  it('should be created', () => {
-    const service: ShowService = TestBed.get(ShowService);
-    expect(service).toBeTruthy();
-  });
-});

src/app/modules/show/services/show.service.ts

@@ -1,18 +0,0 @@
-import {Injectable} from '@angular/core';
-import {ShowDataService} from './show-data.service';
-import {Show} from './show';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class ShowService {
-
-  public SHOW_TYPE = ['praise', 'worship', 'homegroup', 'prayergroup'];
-
-  constructor(private showDataService: ShowDataService) {
-  }
-
-  public async new(data: Partial<Show>): Promise<string> {
-    return await this.showDataService.add(data);
-  }
-}

src/app/modules/shows/list/list-item/list-item.component.html

@@ -1,4 +1,4 @@
 <div class="list-item">
+  <div>{{show.date.toDate()|date:'dd.MM.yyyy'}}</div>
   <div>{{show.showType|showType}}</div>
-  <div>{{show.date.toDate()|date:'dd.MM.yyyy HH.mm'}}</div>
 </div>

src/app/modules/shows/list/list-item/list-item.component.less

@@ -3,7 +3,7 @@
 .list-item {
   padding: 5px 20px;
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr 2fr;
   min-height: 34px;
 
   & > div {

src/app/modules/shows/new/new.component.html

@@ -1,29 +1,25 @@
 <div>
-  <app-card *ngIf="!publicChosen">
-    <h1>Neue Veranstaltung</h1>
-    <app-button-row>
-      <button (click)="onIsPublic(true)" mat-button>Ja</button>
-      <button (click)="onIsPublic(false)" mat-button>Nein</button>
-      <p class="inline"> Handelt es sich um eine öffentliche Veranstaltung? </p>
-    </app-button-row>
-  </app-card>
-
-  <app-card *ngIf="publicChosen">
+  <app-card>
     <h1>Neue Veranstaltung</h1>
 
     <div [formGroup]="form" class="split">
+      <mat-form-field appearance="outline">
+        <mat-label>Art der Veranstaltung</mat-label>
+        <mat-select formControlName="showType">
+          <mat-optgroup label="öffentlich">
+            <mat-option *ngFor="let key of showTypePublic" [value]="key">{{key|showType}}</mat-option>
+          </mat-optgroup>
+          <mat-optgroup label="privat">
+            <mat-option *ngFor="let key of showTypePrivate" [value]="key">{{key|showType}}</mat-option>
+          </mat-optgroup>
+        </mat-select>
+      </mat-form-field>
       <mat-form-field appearance="outline">
         <mat-label>Datum</mat-label>
         <input [matDatepicker]="picker" formControlName="date" matInput>
         <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
         <mat-datepicker #picker touchUi></mat-datepicker>
       </mat-form-field>
-      <mat-form-field appearance="outline">
-        <mat-label>Art der Veranstaltung</mat-label>
-        <mat-select formControlName="showType">
-          <mat-option *ngFor="let key of showType" [value]="key">{{key|showType}}</mat-option>
-        </mat-select>
-      </mat-form-field>
     </div>
 
     <app-button-row>

src/app/modules/shows/new/new.component.ts

@@ -13,9 +13,9 @@ import {Router} from '@angular/router';
 })
 export class NewComponent implements OnInit {
   public shows$: Observable<Show[]>;
-  public showType = this.showService.SHOW_TYPE;
+  public showTypePublic = ShowService.SHOW_TYPE_PUBLIC;
+  public showTypePrivate = ShowService.SHOW_TYPE_PRIVATE;
   public form: FormGroup;
-  public publicChosen = false;
 
   constructor(private showService: ShowService, showDataService: ShowDataService, private router: Router) {
     this.shows$ = showDataService.list$();
@@ -23,22 +23,16 @@ export class NewComponent implements OnInit {
 
   public ngOnInit(): void {
     this.form = new FormGroup({
-      public: new FormControl(null),
       date: new FormControl(null, Validators.required),
       showType: new FormControl(null, Validators.required),
     })
   }
 
-  public onIsPublic(isPublic: boolean): void {
-    this.form.patchValue({public: isPublic});
-    this.publicChosen = true;
-  }
-
   public async onSave() {
     this.form.markAllAsTouched();
     if (!this.form.valid) return;
 
-    const id = await this.showService.new(this.form.value);
-    await this.router.navigateByUrl('/show/' + id);
+    const id = await this.showService.new$(this.form.value);
+    await this.router.navigateByUrl('/shows/' + id);
   }
 }

src/app/modules/shows/services/show-data.service.ts

@@ -7,11 +7,13 @@ import {Show} from './show';
   providedIn: 'root'
 })
 export class ShowDataService {
+  private collection = 'shows';
+
   constructor(private dbService: DbService) {
   }
 
-  public list$ = (): Observable<Show[]> => this.dbService.col$('show');
-  public read$ = (showId: string): Observable<Show | undefined> => this.dbService.doc$('show/' + showId);
-  public update = async (showId: string, data: Partial<Show>): Promise<void> => await this.dbService.doc(showId).update(data);
-  public add = async (data: Partial<Show>): Promise<string> => (await this.dbService.col('show').add(data)).id
+  public list$ = (): Observable<Show[]> => this.dbService.col$(this.collection);
+  public read$ = (showId: string): Observable<Show | undefined> => this.dbService.doc$(`${this.collection}/${showId}`);
+  public update = async (showId: string, data: Partial<Show>): Promise<void> => await this.dbService.doc(`${this.collection}/${showId}`).update(data);
+  public add = async (data: Partial<Show>): Promise<string> => (await this.dbService.col(this.collection).add(data)).id
 }

src/app/modules/shows/services/show.service.spec.ts

@@ -0,0 +1,37 @@
+import {TestBed} from '@angular/core/testing';
+
+import {ShowService} from './show.service';
+import {ShowDataService} from './show-data.service';
+
+describe('ShowService', () => {
+  const mockShowDataService = {add: Promise.resolve(null)};
+  beforeEach(() => TestBed.configureTestingModule({
+    providers: [
+      {provide: ShowDataService, useValue: mockShowDataService}
+    ]
+  }));
+
+  ShowService.SHOW_TYPE_PUBLIC.forEach(type => {
+    it('should calc public flag for ' + type, async () => {
+      const service: ShowService = TestBed.get(ShowService);
+      const addSpy = spyOn(TestBed.inject(ShowDataService), 'add').and.returnValue(Promise.resolve('id'));
+
+      const id = await service.new$({showType: type});
+
+      expect(id).toBe('id');
+      expect(addSpy).toHaveBeenCalledWith({showType: type, public: true});
+    });
+  });
+
+  ShowService.SHOW_TYPE_PRIVATE.forEach(type => {
+    it('should calc private flag for ' + type, async () => {
+      const service: ShowService = TestBed.get(ShowService);
+      const addSpy = spyOn(TestBed.inject(ShowDataService), 'add').and.returnValue(Promise.resolve('id'));
+
+      const id = await service.new$({showType: type});
+
+      expect(id).toBe('id');
+      expect(addSpy).toHaveBeenCalledWith({showType: type, public: false});
+    });
+  });
+});

src/app/modules/shows/services/show.service.ts

@@ -0,0 +1,27 @@
+import {Injectable} from '@angular/core';
+import {ShowDataService} from './show-data.service';
+import {Show} from './show';
+import {Observable} from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ShowService {
+
+  public static SHOW_TYPE = ['service-worship', 'service-praise', 'home-group-big', 'home-group', 'prayer-group', 'teens-group', 'kids-group', 'misc-public', 'misc-private'];
+  public static SHOW_TYPE_PUBLIC = ['service-worship', 'service-praise', 'home-group-big', 'teens-group', 'kids-group', 'misc-public'];
+  public static SHOW_TYPE_PRIVATE = ['home-group', 'prayer-group', 'misc-private',];
+
+  constructor(private showDataService: ShowDataService) {
+  }
+
+  public read$ = (showId: string): Observable<Show> => this.showDataService.read$(showId);
+
+  public async new$(data: Partial<Show>): Promise<string> {
+    const calculatedData: Partial<Show> = {
+      ...data,
+      public: ShowService.SHOW_TYPE_PUBLIC.indexOf(data.showType) !== -1,
+    };
+    return await this.showDataService.add(calculatedData);
+  }
+}

src/app/modules/shows/show/show.component.html

@@ -0,0 +1,7 @@
+<div *ngIf="(show$|async) as show">
+  <app-card
+    heading="{{show.showType|showType}}, {{show.date.toDate()|date:'dd.MM.yyyy'}}">
+
+
+  </app-card>
+</div>

src/app/modules/shows/show/show.component.spec.ts

@@ -0,0 +1,25 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {ShowComponent} from './show.component';
+
+describe('ShowComponent', () => {
+  let component: ShowComponent;
+  let fixture: ComponentFixture<ShowComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ShowComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ShowComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/shows/show/show.component.ts

@@ -0,0 +1,29 @@
+import {Component, OnInit} from '@angular/core';
+import {map, switchMap} from 'rxjs/operators';
+import {ActivatedRoute} from '@angular/router';
+import {ShowService} from '../services/show.service';
+import {Observable} from 'rxjs';
+import {Show} from '../services/show';
+
+@Component({
+  selector: 'app-show',
+  templateUrl: './show.component.html',
+  styleUrls: ['./show.component.less']
+})
+export class ShowComponent implements OnInit {
+  public show$: Observable<Show>;
+
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private showService: ShowService
+  ) {
+  }
+
+  ngOnInit(): void {
+    this.show$ = this.activatedRoute.params.pipe(
+      map(param => param.showId),
+      switchMap(showId => this.showService.read$(showId))
+    );
+  }
+
+}

src/app/modules/shows/shows-routing.module.ts

@@ -2,6 +2,7 @@ import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
 import {NewComponent} from './new/new.component';
 import {ListComponent} from './list/list.component';
+import {ShowComponent} from './show/show.component';
 
 
 const routes: Routes = [
@@ -13,6 +14,10 @@ const routes: Routes = [
   {
     path: 'new',
     component: NewComponent
+  },
+  {
+    path: ':showId',
+    component: ShowComponent
   }
 ];
 
@@ -20,5 +25,5 @@ const routes: Routes = [
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule]
 })
-export class ShowRoutingModule {
+export class ShowsRoutingModule {
 }

src/app/modules/shows/shows.module.ts

@@ -1,7 +1,7 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 
-import {ShowRoutingModule} from './show-routing.module';
+import {ShowsRoutingModule} from './shows-routing.module';
 import {NewComponent} from './new/new.component';
 import {CardModule} from '../../widget-modules/components/card/card.module';
 import {MatFormFieldModule} from '@angular/material/form-field';
@@ -9,7 +9,7 @@ import {ReactiveFormsModule} from '@angular/forms';
 import {MatInputModule} from '@angular/material/input';
 import {ListComponent} from './list/list.component';
 import {ListItemComponent} from './list/list-item/list-item.component';
-import {ListHeaderModule} from '../../widget-modules/list-header/list-header.module';
+import {ListHeaderModule} from '../../widget-modules/components/list-header/list-header.module';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {ButtonRowModule} from '../../widget-modules/components/button-row/button-row.module';
 import {MatButtonModule} from '@angular/material/button';
@@ -17,13 +17,14 @@ import {MatDatepickerModule} from '@angular/material/datepicker';
 import {MatSelectModule} from '@angular/material/select';
 import {ShowTypeTranslaterModule} from '../../widget-modules/pipes/show-type-translater/show-type-translater.module';
 import {MatNativeDateModule} from '@angular/material/core';
+import {ShowComponent} from './show/show.component';
 
 
 @NgModule({
-  declarations: [NewComponent, ListComponent, ListItemComponent],
+  declarations: [NewComponent, ListComponent, ListItemComponent, ShowComponent],
   imports: [
     CommonModule,
-    ShowRoutingModule,
+    ShowsRoutingModule,
     CardModule,
     MatFormFieldModule,
     ReactiveFormsModule,
@@ -38,5 +39,5 @@ import {MatNativeDateModule} from '@angular/material/core';
     ShowTypeTranslaterModule
   ]
 })
-export class ShowModule {
+export class ShowsModule {
 }

src/app/modules/songs/services/text-rendering.service.ts

@@ -32,14 +32,5 @@ export class TextRenderingService {
   constructor() {
   }
 
-  public render(text: string): Section[] {
-    const lines = text.match(/[^\r\n]+/g);
-
-
-  }
-
-  private findSection(line: string) {
-
-  }
 
 }

src/app/modules/songs/song/song.component.spec.ts

@@ -1,4 +1,4 @@
-import {async, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 
 import {SongComponent} from './song.component';
 import {of} from 'rxjs';
@@ -32,8 +32,4 @@ describe('SongComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should provide songId', fakeAsync(() => {
-    tick();
-    expect(component.songId).toBe('4711');
-  }));
 });

src/app/widget-modules/application-frame/navigation/navigation.component.html

@@ -1,12 +0,0 @@
-<nav class="head">
-  <div class="links">
-    <a href="#" routerLink="/songs" routerLinkActive="active">Lieder</a>
-    <a href="#" routerLink="/show" routerLinkActive="active">Veranstaltungen</a>
-    <a href="#" routerLink="/user" routerLinkActive="active">Benutzer</a>
-  </div>
-  <div class="actions">
-    <app-filter></app-filter>
-  </div>
-</nav>
-
-

src/app/widget-modules/application-frame/navigation/navigation.component.less

@@ -1,53 +0,0 @@
-@import "../../../../styles/styles";
-@import "../../../../styles/shadow";
-
-nav {
-  &.head {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 60px;
-    background: @navigation-background;
-    z-index: 1;
-    .card-3;
-
-    display: flex;
-    align-items: flex-end;
-    justify-content: space-between;
-
-    a {
-      display: block;
-      height: 60px;
-      color: @navigation-link-color;
-      font-size: 20px;
-      font-weight: bold;
-      text-decoration: none;
-      padding: 20px;
-      box-sizing: border-box;
-      background: transparent;
-      transition: @transition;
-
-      &:hover {
-        background: #eee;
-      }
-
-      &.active {
-        background: @primary-color;
-        color: #fff;
-      }
-    }
-
-  }
-}
-
-.actions {
-  display: flex;
-  height: 100%;
-  align-items: center;
-}
-
-
-.links {
-  display: flex;
-}

src/app/widget-modules/application-frame/navigation/navigation.component.ts

@@ -1,16 +0,0 @@
-import {Component, OnInit} from '@angular/core';
-
-@Component({
-  selector: 'app-navigation',
-  templateUrl: './navigation.component.html',
-  styleUrls: ['./navigation.component.less']
-})
-export class NavigationComponent implements OnInit {
-
-  constructor() {
-  }
-
-  ngOnInit() {
-  }
-
-}

src/app/widget-modules/components/application-frame/application-frame.module.ts

@@ -3,16 +3,20 @@ import {CommonModule} from '@angular/common';
 import {NavigationComponent} from './navigation/navigation.component';
 import {RouterModule} from '@angular/router';
 import {FilterComponent} from './navigation/filter/filter.component';
+import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
+import {LinkComponent} from './navigation/link/link.component';
 
 
 @NgModule({
   declarations: [
     NavigationComponent,
-    FilterComponent
+    FilterComponent,
+    LinkComponent
   ],
   imports: [
     CommonModule,
-    RouterModule
+    RouterModule,
+    FontAwesomeModule
   ],
   exports: [
     NavigationComponent

src/app/widget-modules/components/application-frame/navigation/filter/filter.component.less

@@ -1,4 +1,4 @@
-@import "../../../../../styles/styles";
+@import "../../../../../../styles/styles";
 
 input {
   font-size: 16px;

src/app/widget-modules/components/application-frame/navigation/link/link.component.html

@@ -0,0 +1,3 @@
+<a [routerLink]="link" href="#" routerLinkActive="active">
+  <fa-icon [icon]="icon"></fa-icon>
+  <span class="link-text">&nbsp;&nbsp;{{text}}</span></a>

src/app/widget-modules/components/application-frame/navigation/link/link.component.less

@@ -0,0 +1,43 @@
+@import "../../../../../../styles/styles";
+
+a {
+  display: block;
+  height: 60px;
+  color: @navigation-link-color;
+  font-size: 20px;
+  font-weight: bold;
+  text-decoration: none;
+  padding: 20px;
+  box-sizing: border-box;
+  background: transparent;
+  transition: @transition;
+
+  fa-icon {
+    display: inline-block;
+    transform: scale(1);
+    transition: @transition;
+  }
+
+  @media screen and (max-width: 860px) {
+    .link-text {
+      display: none;
+    }
+  }
+
+  &:hover {
+    background: #eee;
+
+    fa-icon {
+      transform: scale(1.2);
+    }
+  }
+
+  &.active {
+    background: @primary-color;
+    color: #fff;
+
+    fa-icon {
+      transform: scale(1.3);
+    }
+  }
+}

src/app/widget-modules/components/application-frame/navigation/link/link.component.spec.ts

@@ -0,0 +1,25 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {LinkComponent} from './link.component';
+
+describe('LinkComponent', () => {
+  let component: LinkComponent;
+  let fixture: ComponentFixture<LinkComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [LinkComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LinkComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/widget-modules/components/application-frame/navigation/link/link.component.ts

@@ -0,0 +1,13 @@
+import {Component, Input} from '@angular/core';
+import {IconProp} from '@fortawesome/fontawesome-svg-core';
+
+@Component({
+  selector: 'app-link',
+  templateUrl: './link.component.html',
+  styleUrls: ['./link.component.less']
+})
+export class LinkComponent {
+  @Input() public text: string;
+  @Input() public link: string;
+  @Input() public icon: IconProp;
+}

src/app/widget-modules/components/application-frame/navigation/navigation.component.html

@@ -0,0 +1,12 @@
+<nav class="head">
+  <div class="links">
+    <app-link [icon]="faSongs" link="/songs" text="Lieder"></app-link>
+    <app-link [icon]="faShows" link="/shows" text="Veranstaltungen"></app-link>
+    <app-link [icon]="faUser" link="/user" text="Benutzer"></app-link>
+  </div>
+  <div class="actions">
+    <app-filter></app-filter>
+  </div>
+</nav>
+
+

src/app/widget-modules/components/application-frame/navigation/navigation.component.less

@@ -0,0 +1,32 @@
+@import "../../../../../styles/styles";
+@import "../../../../../styles/shadow";
+
+nav {
+  &.head {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 60px;
+    background: @navigation-background;
+    z-index: 1;
+    .card-3;
+
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+
+
+  }
+}
+
+.actions {
+  display: flex;
+  height: 100%;
+  align-items: center;
+}
+
+
+.links {
+  display: flex;
+}

src/app/widget-modules/components/application-frame/navigation/navigation.component.ts

@@ -0,0 +1,23 @@
+import {Component, OnInit} from '@angular/core';
+import {faMusic} from '@fortawesome/free-solid-svg-icons/faMusic';
+import {faPersonBooth} from '@fortawesome/free-solid-svg-icons/faPersonBooth';
+import {faUserCog} from '@fortawesome/free-solid-svg-icons/faUserCog';
+
+@Component({
+  selector: 'app-navigation',
+  templateUrl: './navigation.component.html',
+  styleUrls: ['./navigation.component.less']
+})
+export class NavigationComponent implements OnInit {
+
+  public faSongs = faMusic;
+  public faShows = faPersonBooth;
+  public faUser = faUserCog;
+
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+
+}

src/app/widget-modules/pipes/show-type-translater/show-type.pipe.ts

@@ -7,16 +7,26 @@ export class ShowTypePipe implements PipeTransform {
 
   transform(type: string): string {
     switch (type) {
-      case  'worship':
+      case  'service-worship':
         return 'Gottesdienst Anbetung';
-      case 'praise':
+      case 'service-praise':
         return 'Gottesdienst Lobpreis';
-      case 'homegroup':
+      case 'home-group-big':
+        return 'großer Hauskreis';
+      case 'home-group':
         return 'Hauskreis';
-      case  'prayergroup':
+      case  'prayer-group':
         return 'Gebetskreis';
+      case  'teens-group':
+        return 'Teeniekreis';
+      case  'kids-group':
+        return 'Kinderkreis';
+      case  'misc-public':
+        return 'sonstige öffentliche Veranstaltung';
+      case  'misc-private':
+        return 'sonstige private Veranstaltung';
     }
-    ;
+
   }
 
 }