Merge branch 'master' of https://github.coventry.ac.uk/rollingc/group…

…H_M32COM

Code/groupH_M32COM.Angular/ClientApp/src/app/app.component.ts

@@ -1,10 +1,16 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { AuthService } from './auth/auth.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
+  constructor(private authService: AuthService){}
+  ngOnInit(): void {
+    console.log("Component ready")
+    this.authService.autoAuthUser();
+  }
   title = 'ClientApp';
 }

Code/groupH_M32COM.Angular/ClientApp/src/app/auth/auth.service.ts

@@ -4,7 +4,7 @@ import { IAuthData } from './auth-data';
 import { Subject } from 'rxjs';
 import { Router } from '@angular/router';
 import { LoginComponent } from './login/login.component';
-
+import { environment } from '../../environments/environment'
 @Injectable({
   providedIn: 'root'
 })
@@ -15,6 +15,7 @@ export class AuthService {
   private authStatuesListener = new Subject<boolean>();
   private tokenTimer: any;
   private userId: string;
+  private apiUrl = environment.apiUrl;
   getToken() {
     return this.token;
   }
@@ -27,7 +28,7 @@ export class AuthService {
   }
   createUser(email: string, password: string) {
     const authData: IAuthData = { Email: email, Password: password };
-    this.http.post('http://localhost:3000/api/user/signup', authData).subscribe(
+    this.http.post(this.apiUrl + 'api/user/signup', authData).subscribe(
       () => this.router.navigate(['/']),
       error => {
         this.authStatuesListener.next(false);
@@ -39,7 +40,7 @@ export class AuthService {
     const authData: IAuthData = { Email: email, Password: password };
     this.http
       .post<{ token: string; expiresIn: number; userId: string }>(
-        'http://localhost:3000/api/user/login',
+        this.apiUrl + 'api/user/login',
         authData
       )
       .subscribe(
@@ -69,20 +70,22 @@ export class AuthService {
   }
 
   autoAuthUser() {
-    const authInformation = this.getAuthData();
-    if (!authInformation) {
-      return;
-    }
-    const now = new Date();
+    this.isAuthenticated = true;
+    this.authStatuesListener.next(true);
+    // const authInformation = this.getAuthData();
+    // if (!authInformation) {
+    //   return;
+    // }
+    // const now = new Date();
 
-    const expiresIn = authInformation.expirationDate.getTime() - now.getTime();
-    if (expiresIn > 0) {
-      this.token = authInformation.token;
-      this.isAuthenticated = true;
-      this.userId = authInformation.userId;
-      this.setAuthTimer(expiresIn / 1000);
-      this.authStatuesListener.next(true);
-    }
+    // const expiresIn = authInformation.expirationDate.getTime() - now.getTime();
+    // if (expiresIn > 0) {
+    //   this.token = authInformation.token;
+    //   this.isAuthenticated = true;
+    //   this.userId = authInformation.userId;
+    //   this.setAuthTimer(expiresIn / 1000);
+    //   this.authStatuesListener.next(true);
+    // }
   }
 
   logout() {
@@ -110,6 +113,7 @@ export class AuthService {
     localStorage.setItem('expiration', expirationDate.toISOString());
     localStorage.setItem('userId', userId);
   }
+
   private clearAuthData() {
     localStorage.removeItem('token');
     localStorage.removeItem('expiration');

Code/groupH_M32COM.Angular/ClientApp/src/app/event/component/event.component.ts

@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { AuthService } from 'src/app/auth/auth.service';
+import { EventService } from '../event.service';
 
 @Component({
   selector: 'app-event',
@@ -7,9 +10,19 @@ import { Component, OnInit } from '@angular/core';
 })
 export class EventComponent implements OnInit {
 
-  constructor() { }
+  constructor(private router: ActivatedRoute, private eventService:EventService) { }
 
   ngOnInit() {
+
+    this.router.paramMap.subscribe(paramMap => {
+
+      if (paramMap.has("eventId")) {
+        const eventId = paramMap.get('eventId');
+        this.eventService.getEvent(eventId).subscribe(event => {
+            console.log(event)
+        });
+      }
+    })
   }
 
 }

Code/groupH_M32COM.Angular/ClientApp/src/app/event/event.service.ts

@@ -3,6 +3,8 @@ import { startOfDay, endOfDay, getDay } from 'date-fns';
 import { Injectable } from '@angular/core';
 import { EventDetail } from '../models/EventDetail';
 import { CrewMember } from '../models/CrewMember';
+import { Subject } from 'rxjs';
+import { environment } from "../../environments/environment"
 
 const eventColors: any = {
   red: {
@@ -23,15 +25,25 @@ const eventColors: any = {
   providedIn: 'root'
 })
 export class EventService {
-  constructor(private http: HttpClient) {}
+  constructor(private http: HttpClient) { }
+  private events: EventDetail[]
+  private eventsUpdated = new Subject<EventDetail[]>();
+  private apiUrl = environment.apiUrl;
 
-  getTestDate(dateTo: Date, days: number) {
-    const date = new Date(dateTo.valueOf());
-    date.setDate(date.getDate() + days);
-    return date;
+  getEventUpdatedListener(){
+    return this.eventsUpdated.asObservable();
   }
-
   getEvents() {
-    return this.http.get<EventDetail[]>('http://localhost:3000/api/events')   ;
+
+    this.http
+      .get<EventDetail[]>(this.apiUrl + 'api/events')
+      .subscribe(events => {
+        this.events = events;
+        this.eventsUpdated.next([...events]);
+      })
+  }
+
+  getEvent(eventId: string) {
+    return this.http.get<EventDetail>(this.apiUrl + 'api/events/' + eventId);
   }
 }

Code/groupH_M32COM.Angular/ClientApp/src/app/header/header.component.html

@@ -21,9 +21,6 @@
 </span>
 <span>
   <a mat-stroked-button *ngIf="!isAuthorised" [routerLink]="['/auth/Signup']">Signup</a>
-</span>
-    <span>
-  <a mat-stroked-button *ngIf="isAuthorised" [routerLink]="['/Event']">Events</a>
 </span>
     <span>
     <a mat-stroked-button *ngIf="isAuthorised" [routerLink]="['/Register']">Register</a>

Code/groupH_M32COM.Angular/ClientApp/src/app/header/header.component.ts

@@ -11,9 +11,12 @@ export class HeaderComponent implements OnInit {
   constructor(private authService:AuthService) { }
 
   ngOnInit() {
+
+    this.isAuthorised = this.authService.getIsAuth();
     this.authService
     .getAuthStatusListener()
     .subscribe(result => {
+      console.log("Header i author")
       this.isAuthorised = result;
     })
   }

Code/groupH_M32COM.Angular/ClientApp/src/app/home/home.component.html

@@ -23,6 +23,7 @@
 </ng-template>
 
 <div class="homecontainer">
+    <!-- Calander controls -->
     <div class="row text-center">
         <div class="col-md-4">
             <div class="btn-group">
@@ -55,6 +56,7 @@
         </div>
     </div>
     <br />
+    <!-- Calander -->
     <div [ngSwitch]="view">
         <mwl-calendar-month-view *ngSwitchCase="CalendarView.Month" [viewDate]="viewDate" [events]="events" [refresh]="refresh" [activeDayIsOpen]="activeDayIsOpen"  (dayClicked)="dayClicked($event.day)" (eventTimesChanged)="eventTimesChanged($event)">
         </mwl-calendar-month-view>

Code/groupH_M32COM.Angular/ClientApp/src/app/home/home.component.ts

@@ -25,6 +25,8 @@ import {
 } from 'angular-calendar';
 import { EventService } from '../event/event.service';
 import { EventDetail } from '../models/EventDetail';
+import { Route } from '@angular/compiler/src/core';
+import { Router } from '@angular/router';
 
 const colors: any = {
   red: {
@@ -55,74 +57,33 @@ export class HomeComponent implements OnInit {
   CalendarView = CalendarView;
   //Set Calander to current date
   viewDate: Date = new Date();
-
+  activeDayIsOpen: boolean = true;
   modalData: {
     action: string;
     event: CalendarEvent;
   };
-
+  refresh: Subject<any> = new Subject();
+  events: CalendarEvent[];
   actions: CalendarEventAction[] = [
     {
       label: '<i class="fa fa-fw fa-pencil"></i>',
       onClick: ({ event }: { event: CalendarEvent }): void => {
+        console.log("Edit")
         this.handleEvent('Edited', event);
       }
     },
     {
       label: '<i class="fa fa-fw fa-times"></i>',
       onClick: ({ event }: { event: CalendarEvent }): void => {
+        console.log("Deleted")
         this.events = this.events.filter(iEvent => iEvent !== event);
         this.handleEvent('Deleted', event);
       }
     }
   ];
 
-  refresh: Subject<any> = new Subject();
-
-  events: CalendarEvent[] = [
-    // {
-    //   start: subDays(startOfDay(new Date()), 1),
-    //   end: addDays(new Date(), 1),
-    //   title: 'A 3 day event',
-    //   color: colors.red,
-    //   actions: this.actions,
-    //   allDay: true,
-    //   resizable: {
-    //     beforeStart: true,
-    //     afterEnd: true
-    //   },
-    //   draggable: true
-    // },
-    // {
-    //   start: startOfDay(new Date()),
-    //   title: 'An event with no end date',
-    //   color: colors.yellow,
-    //   actions: this.actions
-    // },
-    // {
-    //   start: subDays(endOfMonth(new Date()), 3),
-    //   end: addDays(endOfMonth(new Date()), 3),
-    //   title: 'A long event that spans 2 months',
-    //   color: colors.blue,
-    //   allDay: true
-    // },
-    // {
-    //   start: addHours(startOfDay(new Date()), 2),
-    //   end: new Date(),
-    //   title: 'A draggable and resizable event',
-    //   color: colors.yellow,
-    //   actions: this.actions,
-    //   resizable: {
-    //     beforeStart: true,
-    //     afterEnd: true
-    //   },
-    //   draggable: true
-    // }
-  ];
 
-  activeDayIsOpen: boolean = true;
-
-  constructor(private modal: NgbModal, private eventsService: EventService) { }
+  constructor(private modal: NgbModal, private eventsService: EventService, private route: Router) { }
 
   dayClicked({ date, events }: { date: Date; events: CalendarEvent[] }): void {
     if (isSameMonth(date, this.viewDate)) {
@@ -150,8 +111,7 @@ export class HomeComponent implements OnInit {
   }
 
   handleEvent(action: string, event: CalendarEvent): void {
-    this.modalData = { event, action };
-    this.modal.open(this.modalContent, { size: 'lg' });
+    this.route.navigate(['/Event', event.id]);
   }
 
   addEvent(): void {
@@ -170,30 +130,20 @@ export class HomeComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.eventsService
-      .getEvents()
-      .subscribe(events => {
-        events.forEach(event => {
-          this.events.push(this.createCalanderEvent(event));
-        })
-        this.refresh.next();
-
-      });
-
-
+    this.eventsService.getEventUpdatedListener().subscribe( events => {
 
-
-      // this.events.push({
-      //     start: subDays(endOfMonth(new Date()), 3),
-      //     end: addDays(endOfMonth(new Date()), 3),
-      //     title: 'A long event that spans 2 months',
-      //     color: colors.blue,
-      //     allDay: true
-      //   })
+      events.forEach(event => {
+        this.events.push(this.createCalanderEvent(event));
+      })
+      this.refresh.next();
+    });
+    this.eventsService
+      .getEvents();
   }
 
   createCalanderEvent(event: EventDetail): CalendarEvent {
     return {
+      id: event.EventId,
       start: startOfDay(event.StartDate),
       end: event.EndDate,
       title: event.Description,