Remove header in activities component

Add Button in child (card)
Add my schedules
Add scheduler module
Plus clean up architecture and code

src/app/activities/activities.component.html

@@ -1,5 +1,3 @@
-<app-header></app-header>
-
 <h1> List of Activities</h1>
 <div *ngFor="let activity of activities">
   <h3>{{activity.data.name}}</h3>

src/app/activities/activities.component.ts

@@ -1,15 +1,11 @@
 import { Component, OnInit } from '@angular/core';
-import {ActivitiesService} from '@app/Services/activities.service';
-import {ScheduleService} from '@app/Services/schedule.service';
-import {ScheduleComponent} from '@app/schedule/schedule.component';
-import {MatDialog} from '@angular/material';
-import {NewScheduleComponent} from '@app/new-schedule/new-schedule.component';
+import { ActivitiesService } from '@app/core/services';
 
-@Component({
+@Component( {
   selector: 'app-activities',
   templateUrl: './activities.component.html',
-  styleUrls: ['./activities.component.css']
-})
+  styleUrls: [ './activities.component.css' ]
+} )
 export class ActivitiesComponent implements OnInit {
 
   activities: any[];
@@ -17,25 +13,20 @@ export class ActivitiesComponent implements OnInit {
     activitiesId: '',
   };
 
-  animal: string;
-  name: string;
-
-  constructor(private activitiesService: ActivitiesService,
-              private scheduleService: ScheduleService,
-              public dialog: MatDialog) {
+  constructor( private activitiesService: ActivitiesService ) {
   }
 
   ngOnInit() {
-    this.activitiesService.getActivities().subscribe(data => {
-      this.activities = data.map(e => {
+    this.activitiesService.getActivities().subscribe( data => {
+      this.activities = data.map( e => {
         return {
           id: e.payload.doc.id,
           data: e.payload.doc.data()
         } as any;
-      });
-    });
+      } );
+    } );
   }
 
-  addActivitiesIntoSchedule(id) {
+  addActivitiesIntoSchedule( id ) {
   }
 }

src/app/app-routing.module.ts

@@ -2,15 +2,15 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { HomeComponent } from './home/home.component';
 import { RegisterComponent } from './register/register.component';
-import {ActivitiesComponent} from '@app/activities/activities.component';
-import {ScheduleComponent} from '@app/schedule/schedule.component';
+import { ActivitiesComponent } from '@app/activities/activities.component';
+import { MyScheduleComponent } from '@app/my-schedule/my-schedule.component';
 
 const routes: Routes = [
   // No logged pages
   { path: '', component: HomeComponent, },
   { path: 'register', component: RegisterComponent },
   { path: 'activities', component: ActivitiesComponent },
-  { path: 'schedule', component: ScheduleComponent },
+  { path: 'my-schedule', component: MyScheduleComponent },
   // {
   //   path: 'login',
   //   component: LoginComponent,

src/app/app.component.html

@@ -32,7 +32,7 @@
            id="header-container-desktop">
 
         <div class="title" fxFlex="200px">
-          <a [routerLink]="">DiscoTrip</a>
+          <a routerLink="/">DiscoTrip</a>
         </div>
         <div fxFlex="calc(100% - 200px)" fxLayout="row" fxLayoutAlign="end">
 

src/app/app.module.ts

@@ -13,16 +13,28 @@ import { AngularFireAuthModule } from '@angular/fire/auth';
 import { AppMaterialModule } from '@app/app-material.module';
 
 import { LogService, SEOService } from '@app/core/services';
+import {
+  AgendaService,
+  DayService,
+  DragAndDropService,
+  MonthAgendaService,
+  MonthService,
+  ResizeService,
+  ScheduleModule,
+  TimelineMonthService,
+  TimelineViewsService,
+  WeekService,
+  WorkWeekService
+} from '@syncfusion/ej2-angular-schedule';
 import { GlobalErrorHandler } from '@app/core/global-error-handler/global-error-handler.service';
 
 import { environment } from '@env/environment';
 import { CardComponent } from './card/card.component';
 import { SearchCardComponent } from './search-card/search-card.component';
+import { MyScheduleComponent } from './my-schedule/my-schedule.component';
 import { ActivitiesComponent } from './activities/activities.component';
-import {AngularFirestore} from '@angular/fire/firestore';
-import { ScheduleComponent } from './schedule/schedule.component';
-import {MatDialogModule} from '@angular/material';
-import { NewScheduleComponent } from './new-schedule/new-schedule.component';
+import { AngularFirestore } from '@angular/fire/firestore';
+import { MatDialogModule } from '@angular/material';
 
 @NgModule( {
   declarations: [
@@ -32,8 +44,7 @@ import { NewScheduleComponent } from './new-schedule/new-schedule.component';
     CardComponent,
     SearchCardComponent,
     ActivitiesComponent,
-    ScheduleComponent,
-    NewScheduleComponent,
+    MyScheduleComponent,
   ],
   imports: [
     BrowserModule,
@@ -44,18 +55,28 @@ import { NewScheduleComponent } from './new-schedule/new-schedule.component';
     AngularFireDatabaseModule,
     AppMaterialModule,
     MatDialogModule,
+    ScheduleModule,
   ],
   providers: [
     AngularFirestore,
     LogService,
     SEOService,
+    AgendaService,
+    DayService,
+    WeekService,
+    WorkWeekService,
+    MonthService,
+    DragAndDropService,
+    MonthAgendaService,
+    ResizeService,
+    TimelineViewsService,
+    TimelineMonthService,
     {
       provide: ErrorHandler,
       useClass: GlobalErrorHandler,
     },
   ],
-  bootstrap: [ AppComponent ],
-  entryComponents: [NewScheduleComponent],
+  bootstrap: [ AppComponent ]
 } )
 export class AppModule {
 }

src/app/card/card.component.html

@@ -15,10 +15,12 @@
       </p>
     </mat-card-content>
 
-    <mat-card-actions>
-      <button mat-button>LIKE</button>
-      <button mat-button>SHARE</button>
-    </mat-card-actions>
+    <ng-content select="mt-card-actions"></ng-content>
+
+    <!--    <mat-card-actions>-->
+    <!--      <button mat-button>LIKE</button>-->
+    <!--      <button mat-button>SHARE</button>-->
+    <!--    </mat-card-actions>-->
 
   </mat-card>
 

src/app/core/services/activities/activities.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
-import {AngularFirestore} from '@angular/fire/firestore';
-import {AngularFireDatabase} from '@angular/fire/database';
+import { AngularFirestore } from '@angular/fire/firestore';
+import { AngularFireDatabase } from '@angular/fire/database';
 
 @Injectable({
   providedIn: 'root'

src/app/core/services/index.ts

@@ -2,3 +2,5 @@ export * from './auth/auth.service';
 export * from './log/log.service';
 export * from './seo/seo.service';
 export * from './storage/storage.service';
+export * from './activities/activities.service';
+export * from './schedule/schedule.service';

src/app/core/services/schedule/schedule.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import {AngularFirestore} from '@angular/fire/firestore';
+import { AngularFirestore } from '@angular/fire/firestore';
 
 @Injectable({
   providedIn: 'root'

src/app/my-schedule/my-schedule.component.html

@@ -0,0 +1,5 @@
+<div class="main-container" style="margin-top: 30px">
+
+  <ejs-schedule></ejs-schedule>
+
+</div>

src/app/my-schedule/my-schedule.component.spec.ts

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

src/app/my-schedule/my-schedule.component.ts

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

src/index.html

@@ -11,6 +11,7 @@
   <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css?family=Lobster&display=swap" rel="stylesheet">
+  <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet"/>
 
 </head>