gohari edits

package.json

@@ -28,10 +28,12 @@
     "angular-font-awesome": "^3.1.2",
     "angular2-collapsible": "^0.6.1",
     "angular2-jwt": "^0.2.3",
+    "angularx-flatpickr": "^6.1.0",
     "bootstrap": "^4.1.3",
     "core-js": "^2.5.4",
     "cuppa-ng2-slidemenu": "^2.0.0",
     "date-fns": "^1.30.1",
+    "flatpickr": "^4.5.2",
     "font-awesome": "^4.7.0",
     "jwt-decode": "^2.2.0",
     "materialize-css": "^1.0.0",
@@ -52,13 +54,13 @@
     "zone.js": "~0.8.26"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.10.0",
+    "@angular-devkit/build-angular": "^0.12.1",
     "@angular/cli": "~7.0.6",
     "@angular/compiler-cli": "~7.0.0",
     "@angular/language-service": "~7.0.0",
-    "@types/node": "~8.9.4",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "~2.0.3",
+    "@types/node": "~8.9.4",
     "codelyzer": "~4.5.0",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",

src/app/Internal-Page/events/events.component.html

@@ -0,0 +1,108 @@
+<br><br><br>
+
+<ng-template #modalContent let-close="close">
+  <div class="modal-header">
+    <h5 class="modal-title">Event action occurred</h5>
+    <button type="button" class="close" (click)="close()">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <div class="modal-body">
+    <div>
+      Action:
+      <pre>{{ modalData?.action }}</pre>
+    </div>
+    <div>
+      Event:
+      <pre>{{ modalData?.event | json }}</pre>
+    </div>
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-outline-secondary" (click)="close()">OK</button>
+  </div>
+</ng-template>
+
+<div class="row text-center">
+  <div class="col-md-4">
+    <div class="btn-group">
+      <div
+        class="btn btn-primary"
+        mwlCalendarPreviousView
+        [view]="view"
+        [(viewDate)]="viewDate"
+        (viewDateChange)="activeDayIsOpen = false">
+        Previous
+      </div>
+      <div
+        class="btn btn-outline-secondary"
+        mwlCalendarToday
+        [(viewDate)]="viewDate">
+        Today
+      </div>
+      <div
+        class="btn btn-primary"
+        mwlCalendarNextView
+        [view]="view"
+        [(viewDate)]="viewDate"
+        (viewDateChange)="activeDayIsOpen = false">
+        Next
+      </div>
+    </div>
+  </div>
+  <div class="col-md-4">
+    <h3>{{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}</h3>
+  </div>
+  <div class="col-md-4">
+    <div class="btn-group">
+      <div
+        class="btn btn-primary"
+        (click)="view = CalendarView.Month"
+        [class.active]="view === CalendarView.Month">
+        Month
+      </div>
+      <div
+        class="btn btn-primary"
+        (click)="view = CalendarView.Week"
+        [class.active]="view === CalendarView.Week">
+        Week
+      </div>
+      <div
+        class="btn btn-primary"
+        (click)="view = CalendarView.Day"
+        [class.active]="view === CalendarView.Day">
+        Day
+      </div>
+    </div>
+  </div>
+</div>
+<br>
+<div [ngSwitch]="view">
+  <mwl-calendar-month-view
+    *ngSwitchCase="CalendarView.Month"
+    [viewDate]="viewDate"
+    [events]="events"
+    [refresh]="refresh"
+    [activeDayIsOpen]="activeDayIsOpen"
+    (dayClicked)="dayClicked($event.day)"
+    (eventClicked)="handleEvent('Clicked', $event.event)"
+    (eventTimesChanged)="eventTimesChanged($event)">
+  </mwl-calendar-month-view>
+  <mwl-calendar-week-view
+    *ngSwitchCase="CalendarView.Week"
+    [viewDate]="viewDate"
+    [events]="events"
+    [refresh]="refresh"
+    (eventClicked)="handleEvent('Clicked', $event.event)"
+    (eventTimesChanged)="eventTimesChanged($event)">
+  </mwl-calendar-week-view>
+  <mwl-calendar-day-view
+    *ngSwitchCase="CalendarView.Day"
+    [viewDate]="viewDate"
+    [events]="events"
+    [refresh]="refresh"
+    (eventClicked)="handleEvent('Clicked', $event.event)"
+    (eventTimesChanged)="eventTimesChanged($event)">
+  </mwl-calendar-day-view>
+</div>
+
+<br><br><br>

src/app/Internal-Page/events/events.component.ts

@@ -0,0 +1,124 @@
+import { InternalPageService } from './../../shared/internal-page.service';
+
+import { Component, OnInit,
+          ChangeDetectionStrategy,
+          ViewChild,
+          TemplateRef } from '@angular/core';
+
+import {
+  startOfDay,
+  endOfDay,
+  subDays,
+  addDays,
+  endOfMonth,
+  isSameDay,
+  isSameMonth,
+  addHours
+} from 'date-fns';
+
+import { Subject } from 'rxjs';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import {
+  CalendarEvent,
+  CalendarEventAction,
+  CalendarEventTimesChangedEvent,
+  CalendarView
+} from 'angular-calendar';
+const colors: any = {
+  red: {
+    primary: '#ad2121',
+    secondary: '#FAE3E3'
+  },
+  blue: {
+    primary: '#1e90ff',
+    secondary: '#D1E8FF'
+  },
+  yellow: {
+    primary: '#e3bc08',
+    secondary: '#FDF1BA'
+  }
+};
+
+@Component({
+  selector: 'app-events',
+  templateUrl: './events.component.html',
+  styleUrls: ['./events.component.css']
+})
+export class EventsComponent implements OnInit {
+  events: CalendarEvent[] = [] ;
+  refresh: Subject<any> = new Subject();
+
+  constructor(private modal: NgbModal, private internalService: InternalPageService) {
+
+}
+  ngOnInit() {
+    this.loadEvents();
+    this.refresh.next();
+    console.log("dddddddd"+new Date())
+
+
+  }
+  loadEvents(): void {
+    this.internalService.getEventNow().subscribe(
+      (responce) => {
+        for(var i =0;i < responce['lectures'].length;i++){
+              let event: any={};
+              event['start'] = new Date(responce['lectures'][i].start);
+              event['end'] = new Date(responce['lectures'][i].end);
+              event['title'] = responce['lectures'][i].title;
+              this.events.push(event)
+          }
+          this.dayClicked({ date: new Date(), events: this.events });
+
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+  }
+
+
+  @ViewChild('modalContent')
+    modalContent: TemplateRef<any>;
+
+    view: CalendarView = CalendarView.Month;
+
+    CalendarView = CalendarView;
+
+    viewDate: Date = new Date();
+
+    modalData: {
+      action: string;
+      event: CalendarEvent;
+    };
+
+
+
+
+
+    activeDayIsOpen: boolean = true;
+
+
+
+    dayClicked({ date, events }: { date: Date; events: CalendarEvent[] }): void {
+      console.log(date)
+
+      if (isSameMonth(date, this.viewDate)) {
+        this.viewDate = date;
+        if (
+          (isSameDay(this.viewDate, date) && this.activeDayIsOpen === true) ||
+          events.length === 0
+        ) {
+          this.activeDayIsOpen = false;
+        } else {
+          this.activeDayIsOpen = true;
+        }
+      }
+    }
+
+  
+
+
+
+
+}

src/app/Internal-Page/internal-page-header/internal-page-header.component.html

@@ -6,7 +6,7 @@
             <div class="container">
                 <div class="row">
                     <div class="col-12 col-sm-12 col-md-4 col-lg-4"  style="margin:0;padding:0">
-                        <ul class="list-unstyled notificationList-w" *ngIf="!authSer.isAuthenticated()">
+                        <ul class="list-unstyled notificationList-w" *ngIf="authSer.isAuthenticated()">
                             <li class="profileData-w">
                                 <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
                                     <button class="buttonW" ngbDropdownToggle><img src="{{authSer.dataLoginUser['photo'] ? authSer.pathImg + authSer.dataLoginUser['photo'] : authSer.imgSrc}}" title="imageProfile" /> {{authSer.dataLoginUser['name']}} </button>
@@ -20,7 +20,7 @@
                             <li><span><i class="fas fa-comments"></i></span></li>
                             <li><span><i class="fas fa-bell"></i></span></li>
                         </ul>
-                        <p *ngIf="authSer.isAuthenticated()" class="login" (click)="onLogin()"><a>LOG IN</a></p>
+                        <p *ngIf="!authSer.isAuthenticated()" class="login" (click)="onLogin()"><a>LOG IN</a></p>
                     </div>
                     <div class="col-12 col-sm-12 col-md-4 col-lg-4 backgroundXS">
                         <div class="form-group" style="margin:10px 0;">
@@ -28,14 +28,14 @@
                         </div>
                     </div>
                     <div class="col-6 col-sm-6 col-md-4 col-lg-4 hidden-xs hidden-sm">
-                       <p style="margin:15px 0; display:inline-block" class="dateW"> {{authSer.currentDate}} </p> 
+                       <p style="margin:15px 0; display:inline-block" class="dateW"> {{authSer.currentDate}} </p>
                        <span class="ar" (click)="authSer.onLanguageContent('ar')" [ngClass]="{'activeLanguage':authSer. arabicLanguage}">AR</span>
-                       <span class="en" (click)="authSer.onLanguageContent('en')" [ngClass]="{'activeLanguage': authSer.englishLanguage}">EN</span>               
+                       <span class="en" (click)="authSer.onLanguageContent('en')" [ngClass]="{'activeLanguage': authSer.englishLanguage}">EN</span>
                     </div>
                 </div>
             </div>
         </div>
-    
+
         <div class="logoHeader-w">
             <div class="container">
                 <div class="row">
@@ -70,7 +70,7 @@
                                 <i class="fa fa-caret-down" *ngIf="parent['childs'].length > 0"></i>
                                 </button>
                                 <button class="dropbtn" *ngIf="parent['childs'].length == 0">
-                                    <a [routerLink]="parent.link" style="text-decoration:none">{{parent.name}}</a> 
+                                    <a [routerLink]="parent.link" style="text-decoration:none">{{parent.name}}</a>
                                     <i class="fa fa-caret-down"  *ngIf="parent['childs'].length > 0"></i>
                                 </button>
                                 <div class="dropdown-content" *ngIf="parent['childs'].length > 0">
@@ -121,14 +121,14 @@
                         </div>
                     </div>
                     <div class="col-6 col-sm-6 col-md-4 col-lg-4 hidden-xs hidden-sm">
-                       <p style="margin:15px 0; display:inline-block" class="dateW"> {{authSer.currentDate}} </p> 
+                       <p style="margin:15px 0; display:inline-block" class="dateW"> {{authSer.currentDate}} </p>
                        <span class="ar" (click)="authSer.onLanguageContent('ar')" [ngClass]="{'activeLanguage':authSer. arabicLanguage}">AR</span>
-                       <span class="en" (click)="authSer.onLanguageContent('en')" [ngClass]="{'activeLanguage': authSer.englishLanguage}">EN</span>               
+                       <span class="en" (click)="authSer.onLanguageContent('en')" [ngClass]="{'activeLanguage': authSer.englishLanguage}">EN</span>
                     </div>
                 </div>
             </div>
         </div>
-    
+
         <div class="logoHeader-w">
             <div class="container">
                 <div class="row">
@@ -163,7 +163,7 @@
                                 <i class="fa fa-caret-down" *ngIf="parent['childs'].length > 0"></i>
                                 </button>
                                 <button class="dropbtn" *ngIf="parent['childs'].length == 0">
-                                    <a href="{{parent.link}}" style="text-decoration:none">{{parent.name_en}}</a> 
+                                    <a href="{{parent.link}}" style="text-decoration:none">{{parent.name_en}}</a>
                                     <i class="fa fa-caret-down"  *ngIf="parent['childs'].length > 0"></i>
                                 </button>
                                 <div class="dropdown-content" *ngIf="parent['childs'].length > 0">
@@ -179,6 +179,3 @@
             </div>
         </div>
     </ng-template>
-
-
-    

src/app/Internal-Page/internal-page.module.ts

@@ -7,8 +7,12 @@ import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
 import { InternalPageHeaderComponent } from './internal-page-header/internal-page-header.component';
 import { InternalPageContentComponent } from './internal-page-content/internal-page-content.component';
 import { HospitalContentComponent } from './hospital-content/hospital-content.component';
-import { CollapsibleModule } from 'angular2-collapsible'; // <-- import the module
-
+import { CollapsibleModule } from 'angular2-collapsible';
+import { EventsComponent } from '../Internal-Page/events/events.component'; // <-- import the module
+import { FlatpickrModule } from 'angularx-flatpickr';
+import { CalendarModule, DateAdapter } from 'angular-calendar';
+import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
     declarations: [
@@ -16,12 +20,19 @@ import { CollapsibleModule } from 'angular2-collapsible'; // <-- import the modu
         InternalPageHeaderComponent,
         InternalPageContentComponent,
         HospitalContentComponent,
+        EventsComponent,
     ],
     imports: [
         CommonModule,
         InternalPageRoutingModule,
         CollapsibleModule,
         NgbModule.forRoot(),
+        FlatpickrModule.forRoot(),
+        CalendarModule.forRoot({
+          provide: DateAdapter,
+          useFactory: adapterFactory
+        }),
+        FormsModule,
     ],
     providers: [
         InternalPageService,
@@ -30,4 +41,4 @@ import { CollapsibleModule } from 'angular2-collapsible'; // <-- import the modu
 
 export class InternalPageModule {
 
-}
+}

src/app/Internal-Page/internal-routing-module.ts

@@ -5,6 +5,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { InternalPageComponent } from './internal-page/internal-page.component';
 
 import { HospitalContentComponent } from './hospital-content/hospital-content.component';
+import { EventsComponent } from './events/events.component';
 import { LoginComponent } from './../login/login.component';
 
 const internalPageRoutes: Routes = [
@@ -12,6 +13,7 @@ const internalPageRoutes: Routes = [
         {path: 'InternalPage' , component: InternalPageComponent, children:[
         {path: 'home', component: InternalPageContentComponent},
         {path: 'hospital', component: HospitalContentComponent},
+        {path: 'events', component: EventsComponent},
     ]},
 ];
 
@@ -28,4 +30,3 @@ const internalPageRoutes: Routes = [
 export class InternalPageRoutingModule {
 
 }
-

src/app/app.module.ts

@@ -90,13 +90,11 @@ import { DashboardContent } from './dashboard/dashboard-content';
 import { AddJoinUsComponent } from './dashboard/add-join-us/add-join-us.component';
 import { InternalPageModule } from './Internal-Page/internal-page.module';
 import { CollapsibleModule } from 'angular2-collapsible'; // <-- import the module
-
+import { FlatpickrModule } from 'angularx-flatpickr';
 import { CalendarModule, DateAdapter } from 'angular-calendar';
 import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
 
 
-
-
 @NgModule({
   declarations: [
     AppComponent,
@@ -165,6 +163,7 @@ import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
     CollapsibleModule,
     ToastrModule.forRoot(), // ToastrModule added
     NgbModule.forRoot(),
+    FlatpickrModule.forRoot(),
     CalendarModule.forRoot({
       provide: DateAdapter,
       useFactory: adapterFactory

src/app/shared/auth-service.service.ts

@@ -17,7 +17,7 @@ import { Location } from '@angular/common';
 export class AuthServiceService {
 
   constructor(private http:  HttpClient, private location: Location, private route: ActivatedRoute) { }
-  
+
   jwtHelper: JwtHelper = new JwtHelper();
 
   //user permision name
@@ -52,13 +52,13 @@ export class AuthServiceService {
 
   cachedRequests: Array<HttpRequest<any>> = [];
   notificationLogin: boolean = true;
-  
+
   dataLoginUser = {};
   //login function
   login(dataForm) {
     console.log(dataForm);
     return this.http.post(this.pathApi + '/login', dataForm);
-  } 
+  }
 
   //signup Function
   signUp(dataSignUp){
@@ -66,14 +66,14 @@ export class AuthServiceService {
     return this.http.post(this.pathApi + '/register', dataSignUp);
   }
 
-  //return data user function 
+  //return data user function
   setDataUser(user) {
     this.dataLoginUser = user.user;
     console.log('data loooogin' , this.dataLoginUser);
   }
 
-  
-  //Authentication 
+
+  //Authentication
   public getToken(): string {
     return localStorage.getItem('token');
   }
@@ -82,16 +82,20 @@ export class AuthServiceService {
     // get the token
     const token = this.getToken();
     // console.log('toooooken',this.jwtHelper.isTokenExpired(token));
-    // return a boolean reflecting 
+    // return a boolean reflecting
     // whether or not the token is expired
-    return this.jwtHelper.isTokenExpired(token);
+    if(token){
+      return this.jwtHelper.isTokenExpired(token);
+
+    }
+    return false;
   }
 
- 
+
   public collectFailedRequest(request): void {
     this.cachedRequests.push(request);
   }
-  
+
 
   //previous back locarion
   perviousLocation() {
@@ -99,7 +103,7 @@ export class AuthServiceService {
   }
 
 
-  //language content 
+  //language content
   onLanguageContent(typeLang:string) {
     if(typeLang == 'ar') {
       this.arabicTemplate = true;