external page testing

src/app/External-Page/external-contact-us/external-contact-us.component.css

@@ -0,0 +1,16 @@
+.contactUs-w {
+    width: 100%;
+}
+
+
+.contactUs-w .containerContent-w {
+    border-top: 3px solid green !important;
+}
+
+
+
+@media(min-width: 1200px) {
+    .container {
+        width: 1200px !important;
+    }
+}

src/app/External-Page/external-contact-us/external-contact-us.component.html

@@ -0,0 +1,21 @@
+<div class="contactUs-w">
+  <div class="container">
+    <div class="containerContent-w">
+      <ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="englishTemplate">
+        <div class="row">
+          <div class="col-12">
+            <p [innerHTML]="contactUs.field"></p>
+          </div>
+        </div>
+      </ng-template>
+
+      <ng-template #englishTemplate>
+          <div class="row">
+            <div class="col-12">
+              <p [innerHTML]="contactUs.field_en"></p>
+            </div>
+          </div>
+      </ng-template>
+    </div>
+  </div>
+</div>

src/app/External-Page/external-contact-us/external-contact-us.component.ts

@@ -0,0 +1,54 @@
+import { AuthServiceService } from './../../shared/auth-service.service';
+import { ExternalPageService } from './../../shared/external-page.service';
+import { Component, OnInit } from '@angular/core';
+import { NgxSpinnerService } from 'ngx-spinner';
+
+@Component({
+  selector: 'app-external-contact-us',
+  templateUrl: './external-contact-us.component.html',
+  styleUrls: ['./external-contact-us.component.css']
+})
+export class ExternalContactUsComponent implements OnInit {
+
+  constructor(private externalService: ExternalPageService, 
+    private spinner: NgxSpinnerService,
+    private authSer:AuthServiceService) { 
+      this.spinner.show();
+    }
+  
+  contactUs = [];
+
+  ngOnInit() {
+
+    this.authSer.homeActivate = false;
+    //add active class in contact us menu header "active = 1"
+    this.externalService.getHeader().subscribe(
+      (responce) => {
+        this.externalService.headerMenus = responce['parents'];
+        for(let i = 0; i < this.externalService.headerMenus.length; i++) {
+          if(this.externalService.headerMenus[i].id == 23) {
+            this.externalService.headerMenus[i].active = 1;
+          } else {
+            this.externalService.headerMenus[i].active = 0;
+          }
+        }
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+    this.externalService.getContactUs().subscribe(
+      (responce) => {
+        console.log(responce);
+        this.contactUs = responce['contact_us'];
+        console.log('contact uus', this.contactUs);
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+      }
+    )
+  }
+
+}

src/app/External-Page/external-events-table/external-events-table.component.css

@@ -0,0 +1,43 @@
+.eventTable-w {
+    width: 100%;
+    padding-inline-end: 20px 0;
+}
+
+.eventTable-w table {
+    width: 100%
+}
+
+.containerContent-w {
+    border-top: 5px solid #049288 !important;
+}
+
+.table td, 
+.table th {
+    text-align: center !important;
+}
+
+.headBackground-w {
+    background-color: #049288 !important;
+}
+
+.table tbody tr:nth-child(odd),
+.table tbody tr:nth-child(even) {
+    color: #87c5c1 !important;      
+}
+
+.titleModal {
+    font-size: 17px;
+    color: #049288;
+}
+
+.modal-body p {
+    color: #888 !important;
+}
+
+
+
+@media(min-width: 1200px) {
+    .container {
+        width: 1200px;
+    }
+}

src/app/External-Page/external-events-table/external-events-table.component.html

@@ -0,0 +1,98 @@
+<div class="eventTable-w">
+  <div class="container">
+    <div class="containerContent-w">
+      <div class="row">
+        <ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="englishTemplate">
+          <div class="col-12">
+            <table class="table table-bordered">
+              <thead class="headBackground-w">
+                <tr>
+                  <th>الحدث</th>
+                  <th>التاريخ</th>
+                  <th>تفاصيل الحدث</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr *ngFor="let event of eventsData | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index">
+                  <td>{{event.name}}</td>
+                  <td>{{event.event_time}}</td>
+                  <td>
+                    <button type="button" class="btn" (click)="detailEvent(event)" data-toggle="modal" data-target="#exampleModalCenter">
+                      <i class="fas fa-plus"></i>
+                    </button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <pagination-controls nextLabel="التالي" previousLabel="السابق" (pageChange)="onPageChange($event)"></pagination-controls>
+            <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
+              <div class="modal-dialog modal-dialog-centered" role="document">
+                <div class="modal-content">
+                  <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                      <span aria-hidden="true">&times;</span>
+                    </button>
+                    <br><br>
+                    <h5 class="modal-title titleModal" id="exampleModalLongTitle">تفاصيل الحدث</h5>
+                  </div>
+                  <div class="modal-body">
+                      <h2>{{eventDetail.title}}</h2>
+                      <p [innerHTML]="eventDetail.description"></p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </ng-template>
+
+        <ng-template #englishTemplate>
+          <div class="col-12" style="direction:rtl">
+              <table class="table table-bordered">
+                <thead class="headBackground-w">
+                  <tr>
+                    <th>Event</th>
+                    <th>Date</th>
+                    <th>Detail Event</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr *ngFor="let event of eventsData | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index">
+                    <td>{{event.name_en}}</td>
+                    <td>{{event.event_time}}</td>
+                    <td>
+                      <button type="button" class="btn" (click)="detailEvent(event)" data-toggle="modal" data-target="#exampleModalCenter">
+                        <i class="fas fa-plus"></i>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+              <pagination-controls nextLabel="Next" previousLabel="Prev" (pageChange)="onPageChange($event)"></pagination-controls>
+              <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
+                <div class="modal-dialog modal-dialog-centered" role="document">
+                  <div class="modal-content">
+                    <div class="modal-header">
+                      <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="float:left">
+                        <span aria-hidden="true">&times;</span>
+                      </button>
+                      <br><br>
+                      <h5 class="modal-title titleModal" id="exampleModalLongTitle" style="text-align:left;">Event Details</h5>
+                    </div>
+                    <div class="modal-body">
+                      <h2 style="text-align:left;">{{eventDetail.title_en}}</h2>
+                      <p style="text-align:left;" [innerHTML]="eventDetail.description_en"></p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+          </div>
+        </ng-template>
+
+      </div>
+    </div>
+  </div>
+</div>
+
+
+
+

src/app/External-Page/external-events-table/external-events-table.component.ts

@@ -0,0 +1,98 @@
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ActivatedRoute } from '@angular/router';
+import { HttpClient } from '@angular/common/http';
+import { AuthServiceService } from './../../shared/auth-service.service';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-external-events-table',
+  templateUrl: './external-events-table.component.html',
+  styleUrls: ['./external-events-table.component.css']
+})
+
+
+export class ExternalEventsTableComponent implements OnInit {
+
+  constructor(private authSer: AuthServiceService, 
+    private http: HttpClient, 
+    private spinner: NgxSpinnerService,
+    private route: ActivatedRoute) { }
+    
+    count: number;
+    perPagePagenation: number;
+    currentPage:number = 1;
+    dataTableNumber: number = 5;
+    eventsData = [];
+    eventDetail = {
+      title: '',
+      title_en: '',
+      description: '',
+      description_en: '',
+    }
+
+  ngOnInit() {
+    this.authSer.homeActivate = false;
+    console.log(this.authSer.pathApi + '/event_bars_list_gate/' + this.currentPage + '/' + this.dataTableNumber);
+    this.http.get(this.authSer.pathApi + '/event_bars_list_gate/' + this.currentPage + '/' + this.dataTableNumber).subscribe(
+      (responce) => {
+        this.eventsData = responce['event_bar'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        console.log('eveeeents', this.eventsData);
+      },
+      (error) => {
+        console.log(error);
+      }
+    )
+  }
+
+    //change page 
+    onPageChange(pagenationNumber) {
+      this.spinner.show();
+      this.currentPage = pagenationNumber;
+      this.eventsData = [];
+      //console.log(pagenationNumber);
+      //console.log(this.pageId);
+      
+      this.http.get(this.authSer.pathApi + '/event_bars_list_gate/' + this.currentPage + '/' + this.perPagePagenation).subscribe(
+        (responce) => {
+          this.eventsData = responce['events'];
+          this.count = responce['count'];
+          this.perPagePagenation = responce['per_page'];
+          console.log('eveeeents', this.eventsData);
+          this.spinner.hide();
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
+    }
+
+    //determine the list count from select element 
+    onGetValue(event) {
+      this.spinner.show();
+      this.eventsData = [];
+      this.dataTableNumber = event.target.value;
+      this.http.get(this.authSer.pathApi + '/event_bars_list_gate/' + this.currentPage + '/' + this.perPagePagenation).subscribe(
+        (responce) => {
+          this.eventsData = responce['events'];
+          this.count = responce['count'];
+          this.perPagePagenation = responce['per_page'];
+          console.log('eveeeents', this.eventsData);
+          this.spinner.hide();
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
+    }
+
+    detailEvent(eventData) {
+      console.log(eventData);
+      this.eventDetail.title = eventData.title;
+      this.eventDetail.title_en = eventData.title_en;
+      this.eventDetail.description = eventData.description;
+      this.eventDetail.description_en = eventData.description_en;
+    }
+
+}

src/app/External-Page/external-events/custom-date-formatter.provider.ts

@@ -0,0 +1,22 @@
+import { CalendarDateFormatter, DateFormatterParams } from 'angular-calendar';
+import { DatePipe } from '@angular/common';
+
+export class CustomDateFormatter extends CalendarDateFormatter {
+  // you can override any of the methods defined in the parent class
+
+  public monthViewColumnHeader({ date, locale }: DateFormatterParams): string {
+    return new DatePipe(locale).transform(date, 'EEE', locale);
+  }
+
+  public monthViewTitle({ date, locale }: DateFormatterParams): string {
+    return new DatePipe(locale).transform(date, 'MMM y', locale);
+  }
+
+  public weekViewColumnHeader({ date, locale }: DateFormatterParams): string {
+    return new DatePipe(locale).transform(date, 'EEE', locale);
+  }
+
+  public dayViewHour({ date, locale }: DateFormatterParams): string {
+    return new DatePipe(locale).transform(date, 'HH:mm', locale);
+  }
+}

src/app/External-Page/external-events/external-events.component.html

@@ -62,6 +62,7 @@
       <p [innerHTML]="dataLecture.description"></p>
       <button class="btn btn-danger" (click)="closeDetailEvent()"><i class="fas fa-times-circle"></i></button>
     </div>
+    
   </div>
   
 

src/app/External-Page/external-events/external-events.component.ts

@@ -1,5 +1,8 @@
+import { CustomDateFormatter } from './custom-date-formatter.provider';
 import { AuthServiceService } from './../../shared/auth-service.service';
 import { HttpClient } from '@angular/common/http';
+import {CalendarDateFormatter } from 'angular-calendar';
+
 import { Component, OnInit,
   ChangeDetectionStrategy,
   ViewChild,
@@ -45,7 +48,12 @@ const colors: any = {
 @Component({
   selector: 'app-external-events',
   templateUrl: './external-events.component.html',
-  styleUrls: ['./external-events.component.css']
+  styleUrls: ['./external-events.component.css'],
+  providers: [
+    {
+      provide: CalendarDateFormatter,
+      useClass: CustomDateFormatter
+    }]
 })
 
 export class ExternalEventsComponent implements OnInit {

src/app/External-Page/external-hospital/external-hospital.component.css

@@ -0,0 +1,49 @@
+.hospitalContent-w .card-header {
+    background-color: #00a99d !important;
+    cursor: initial;
+}
+
+.hospitalContent-w .card-header button {
+    cursor: pointer;
+}
+
+.hospitalContent-w .card-body ul li{
+    cursor: pointer;
+    color: #888;
+    transition: all 0.5s;
+}
+
+
+
+.hospitalContent-w .card-body ul li:hover {
+    color: #00a99d;
+}
+
+.containerContent-w {
+    border-top: 5px solid #00a99d;
+}
+
+.hospitalContent-w .containerContent-w .information h2 {
+    color: #74c5bf;
+}
+
+.hospitalContent-w .containerContent-w .information p {
+    color: #bdb9b9;
+}
+
+.achievementsLang-w h2 {
+    color: #74c5bf;
+}
+
+.achievementsLang-w p {
+    color: #bdb9b9;
+}
+
+.testBody-w {
+    background-color: #f3f3f3;
+}
+@media screen and (min-width: 1200px) {
+    .container {
+        max-width: 1200px !important;
+    }
+}

src/app/External-Page/external-hospital/external-hospital.component.html

@@ -0,0 +1,81 @@
+<div class="hospitalContent-w">
+    <div class="container">
+      <div class="row">
+          <div class="containerContent-w">
+              <ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="englishTemplate">
+                <div class="row">
+                    <div class="col-6 col-md-3">
+                        <div class="recordsContent-w">
+                            <div id="accordion">
+                              <div class="card" *ngFor="let item of data; let i = index">
+                                <div class="card-header" [attr.id]="'heading'+(i+1)">
+                                    <button class="btn btn-link" data-toggle="collapse" [attr.data-target]="'#collapse'+(i+1)" [attr.aria-expanded]="(i+1)==1 ? true :false" [attr.aria-controls]="'collapse'+(i+1)">
+                                      <h4 class="panel-title">{{item.name}}</h4>
+                                    </button>
+                                </div>
+                            
+                                <div *ngFor="let field of item['fields']" [attr.id]="'collapse'+(i+1)" class="collapse" [ngClass]="{'show' : (i+1) == 1}" [attr.aria-labelledby]="'heading' + (i+1)" data-parent="#accordion">
+                                  <div class="card-body testBody-w">
+                                      <ul class="list-unstyled">
+                                        <li (click)="showDescriptionDetails(field)"  [className]=" authSer.arabicTemplate ? '' : 'achievementsLangHeading-w' " style="text-align:right;margin-right:-23px">
+                                            {{field.title}}
+                                        </li>
+                                      </ul>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-6 col-md-9">
+                      <div class="information">
+                        <h2>{{detailsField.title}}</h2>
+                        <p [innerHTML]="detailsField.description"></p>
+                      </div>
+                    </div>
+                </div>
+              </ng-template>
+  
+              <ng-template #englishTemplate>
+                <div class="container" style="direction:ltr">
+                  <div class="row">
+                      <div class="col-6 col-md-3">
+                          <div class="recordsContent-w">
+                              <div id="accordion">
+                                  <div class="card" *ngFor="let item of data; let i = index">
+                                      <div class="card-header" [attr.id]="'heading'+(i+1)">
+                                      <h5 class="mb-0">
+                                          <button class="btn btn-link" data-toggle="collapse" [attr.data-target]="'#collapse'+(i+1)" [attr.aria-expanded]="(i+1)==1 ? true :false" [attr.aria-controls]="'collapse'+(i+1)">
+                                          <h4 class="panel-title">{{item.name_en}}</h4>
+                                          </button>
+                                      </h5>
+                                      </div>
+                                  
+                                      <div *ngFor="let field of item['fields']" [attr.id]="'collapse'+(i+1)" class="collapse" [ngClass]="{'show' : (i+1) == 1}" [attr.aria-labelledby]="'heading' + (i+1)" data-parent="#accordion">
+                                      <div class="card-body testBody-w">
+                                          <ul class="list-unstyled nestedMenu">
+                                              <li (click)="showDescriptionDetails(field)" [className]=" authSer.arabicTemplate ? '' : 'achievementsLangHeading-w' " style="text-align:left; margin-left:10px;">
+                                                  {{field.title_en}}
+                                              </li>
+                                          </ul>
+                                      </div>
+                                      </div>
+                                  </div>
+                              </div>
+                          </div>
+                      </div>
+                      <div class="col-6 col-md-9">
+                        <div class="information" [className]=" authSer.arabicTemplate ? '' : 'achievementsLang-w' ">
+                          <h2>{{detailsField.title_en}}</h2>
+                          <p [innerHTML]="detailsField.description_en"></p>
+                        </div>
+                      </div>
+                  </div>
+                </div>
+              </ng-template>
+  
+          </div>
+      </div>
+    </div>
+  </div>
+  

src/app/External-Page/external-hospital/external-hospital.component.ts

@@ -0,0 +1,126 @@
+import { NgxSpinnerService } from 'ngx-spinner';
+import { AuthServiceService } from './../../shared/auth-service.service';
+import { ExternalPageService } from './../../shared/external-page.service';
+import { ExternalSerService } from './../../shared/external-ser.service';
+import { ActivatedRoute, Params } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-external-hospital',
+  templateUrl: './external-hospital.component.html',
+  styleUrls: ['./external-hospital.component.css']
+})
+export class ExternalHospitalComponent implements OnInit {
+
+  typePage: string = '';
+  data = [];
+  detailsField = {
+    title_en: '',
+    title: '',
+    description: '',
+    description_en: '',
+  }
+
+  constructor(private route: ActivatedRoute,
+    private authSer: AuthServiceService, 
+    private spinner: NgxSpinnerService,
+    private externalService: ExternalPageService) {
+      this.spinner.show();
+     }
+
+  ngOnInit() {
+    
+    this.authSer.homeActivate = false;
+    //catch params type from URL
+    this.route.params.subscribe(
+      (params:Params) => {
+        this.typePage = params['type_page'];
+      }
+    );
+
+
+    //get hospital or managaments data 
+    if(this.typePage == 'hospital') {
+
+      //to add class active if hospital route activate
+      this.externalService.getHospitalMangamentsData('hospital').subscribe(
+        (responce) => {
+          console.log(responce);
+          this.data = responce['hospitals_centers'];
+          console.log('data hospital', this.data);
+          this.showDescriptionDetails(this.data[0].fields[0]);
+          this.spinner.hide();
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
+
+      this.externalService.getHeader().subscribe(
+        (responce) => {
+          this.externalService.headerMenus = responce['parents'];
+          for(let i = 0; i < this.externalService.headerMenus.length; i++) {
+            if(this.externalService.headerMenus[i].id == 19) {
+              this.externalService.headerMenus[i].active = 1;
+            } else {
+              this.externalService.headerMenus[i].active = 0;
+            }
+          }
+          this.spinner.hide();
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
+
+    } else if(this.typePage == 'managements') {
+      
+      //to add class active if mangaments route activate
+      this.externalService.getHeader().subscribe(
+        (responce) => {
+          this.externalService.headerMenus = responce['parents'];
+          for(let i = 0; i < this.externalService.headerMenus.length; i++) {
+            if(this.externalService.headerMenus[i].id == 20) {
+              this.externalService.headerMenus[i].active = 1;
+            } else {
+              this.externalService.headerMenus[i].active = 0;
+            }
+          }
+          this.spinner.hide();
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
+
+      this.externalService.getHospitalMangamentsData('managements').subscribe(
+        (responce) => {
+          console.log(responce);
+          this.data = responce['managements'];
+          console.log('data mangaments', this.data);
+          this.showDescriptionDetails(this.data[0].fields[0]);
+          this.spinner.hide();
+        },
+        (error) => {
+          console.log(error);
+        }
+      )
+    }
+
+
+  }
+
+  //show data of filed if click
+  showDescriptionDetails(fieldData) {
+    console.log(fieldData);
+    this.detailsField = {
+      title: fieldData.title,
+      title_en: fieldData.title_en,
+      description: fieldData.description,
+      description_en: fieldData.description_en,
+    }
+
+    console.log(this.detailsField);
+  }
+
+}

src/app/External-Page/external-page-content/external-page-content.component.css

@@ -167,6 +167,11 @@ input,button {
     /* radial-gradient(0.5turn,#efeeee, #1db5ab, #1ba097); */
     background: radial-gradient(farthest-corner at 129px 53px,     #c4d8d7 0%, #00a99d 100%);
     margin: 10px 0;
+    transition: all 0.5s;
+}
+
+.externalServices-w .item:hover{
+    background: radial-gradient(farthest-corner at 129px 53px,     #4bcec7 0%, #00a99d 100%);
 }
 
 .externalServices-w .item img {
@@ -205,6 +210,7 @@ input,button {
     height: 214px;
     background-color: #fff;
     box-shadow: 0 1px 1px #ccc;
+    padding: 20px;
 }
 
 
@@ -467,6 +473,96 @@ input,button {
 }
 
 
+    /* show 3 items */
+    .lectureService-w .carousel-inner .active,
+    .lectureService-w .carousel-inner .active + .carousel-item,
+    .lectureService-w .carousel-inner .active + .carousel-item + .carousel-item {
+        display: block;
+    }
+    
+    .lectureService-w .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
+    .lectureService-w .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
+    .lectureService-w .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
+        transition: none;
+    }
+    
+    .lectureService-w .carousel-inner .carousel-item-next,
+    .lectureService-w .carousel-inner .carousel-item-prev {
+      position: relative;
+      transform: translate3d(0, 0, 0);
+    }
+    
+    .lectureService-w .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
+        position: absolute;
+        top: 0;
+        right: -33.3333%;
+        z-index: -1;
+        display: block;
+        visibility: visible;
+    }
+    
+    /* left or forward direction */
+    .lectureService-w .active.carousel-item-left + .carousel-item-next.carousel-item-left,
+    .lectureService-w .carousel-item-next.carousel-item-left + .carousel-item,
+    .lectureService-w .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
+    .lectureService-w .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
+        position: relative;
+        transform: translate3d(-100%, 0, 0);
+        visibility: visible;
+    }
+    
+    /* farthest right hidden item must be abso position for animations */
+    .lectureService-w .carousel-inner .carousel-item-prev.carousel-item-right {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: -1;
+        display: block;
+        visibility: visible;
+    }
+    
+    /* right or prev direction */
+    .lectureService-w .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
+    .lectureService-w .carousel-item-prev.carousel-item-right + .carousel-item,
+    .lectureService-w .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
+    .lectureService-w .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
+        position: relative;
+        transform: translate3d(100%, 0, 0);
+        visibility: visible;
+        display: block;
+        visibility: visible;
+    }
+
+    .lectureService-w .carousel-control-prev, .carousel-control-next {
+        display: block !important;
+        margin: 25px 0;
+        color: #888;
+    }
+
+    .lectureService-w .carousel-control-prev {
+        margin-left: -26px;
+    }
+
+    .lectureService-w .carousel-control-next {
+        margin-right: -26px;
+    }
+
+    .lectureService-w #carouselExample .carousel-inner {
+        margin: 20px 0;
+    }
+    
+    .lectureService-w #carouselExample .carousel-inner .carousel-item img {
+        height: 70px !important;
+        border: 2px solid #007A71;
+    }
+
+    .lectureService-w #carouselExample2 .carousel-inner .carousel-item img {
+        height: 70px !important;
+        border: 2px solid #007A71;
+    }
+  
+
+
 agm-map {
     height: 300px;
   }

src/app/External-Page/external-page-content/external-page-content.component.html

@@ -6,19 +6,19 @@
             <div class="col-12">
               <div class="sliderNews-w">
                 <div id="demo" class="carousel slide" data-ride="carousel">
-                    <ul class="carousel-indicators">
-                        <li *ngFor="let report of reports; let i = index" data-target="#demo" [attr.data-slide-to]="i" [ngClass]="i == 0 ? 'active' : ''"></li>
-                    </ul>
-                    <div class="carousel-inner">
-                        <div class="carousel-item" *ngFor="let report of reports; let i = index" [ngClass]="i == 0 ? 'active' : ''">
-                          <img src="{{authSer.pathImg + report['photo'].photo}}" />
-                          <div class="carousel-caption d-none d-md-block">
-                              <h5>{{report.title}}</h5>
-                              <p [innerHtml] = "report.description"></p>
-                              <button class="more">المزيد</button>
-                          </div>
+                  <ul class="carousel-indicators">
+                      <li *ngFor="let report of reports; let i = index" data-target="#demo" [attr.data-slide-to]="i" [ngClass]="i == 0 ? 'active' : ''"></li>
+                  </ul>
+                  <div class="carousel-inner">
+                      <div class="carousel-item" *ngFor="let report of reports; let i = index" [ngClass]="i == 0 ? 'active' : ''">
+                        <img src="{{authSer.pathImg + report['photo'].photo}}" />
+                        <div class="carousel-caption d-none d-md-block">
+                            <h5>{{report.title}}</h5>
+                            <p [innerHtml] = "report.description"></p>
+                            <button class="more" (click)="goPageNew(report)">المزيد</button>
                         </div>
-                    </div>
+                      </div>
+                  </div>
                 </div>
               </div>
             </div>
@@ -29,7 +29,7 @@
                       <div class="carousel-inner">
                           <div class="carousel-item" *ngFor="let event of events; let i = index" [ngClass]="i == 0 ? 'active' : ''">
                               <div class="carousel-caption">
-                                  <p><img src="../../../assets/image/eventX.png" /> <span> حدث :</span> {{event.name}}</p> <button class="moreEvent-w">المزيد</button>
+                                  <p><img src="../../../assets/image/eventX.png" /> <span> حدث :</span> {{event.name}}</p> <button class="moreEvent-w" (click)="oneventTable()">المزيد</button>
                               </div>   
                           </div>
                       </div>
@@ -59,20 +59,39 @@
                     <div class="advertisimentServices-w text-center">
                       <h1>خدمات إعلانيه</h1>
                       <div class="body">
-                        <!-- <owl-carousel [options]="mySlideOptions" [items]="images" [carouselClasses]="['owl-theme', 'sliding']" >
-                          <div class="item" *ngFor="let image of firstAdvertisiment;let i = index">
-                            <div>
-                              <img src="{{authSer.pathImg + image.photo}}"  style="width:50px; height:50px;"/>
-                            </div>
+                        <div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="9000">
+                          <div class="carousel-inner row w-100 mx-auto" role="listbox">
+                              <div class="carousel-item col-md-4" *ngFor="let image of firstAdvertisiment;let i = index" [ngClass]="i == 0 ? 'active' : '' ">
+                                  <img class="img-fluid mx-auto d-block" src="{{authSer.pathImg + image.photo}}" alt="slide 1">
+                              </div>
                           </div>
-                        </owl-carousel> -->
-                        <!-- <owl-carousel [options]="mySlideOptions" [items]="images" [carouselClasses]="['owl-theme', 'sliding']" >
-                          <div class="item" *ngFor="let image of firstAdvertisiment;let i = index">
-                            <div>
-                              <img src="{{authSer.pathImg + image.photo}}" />
+                          <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
+                              <i class="fa fa-chevron-left fa-lg text-muted"></i>
+                              <span class="sr-only">Previous</span>
+                          </a>
+                          <a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
+                              <i class="fa fa-chevron-right fa-lg text-muted"></i>
+                              <span class="sr-only">Next</span>
+                          </a>
+                        </div>
+
+                        <div id="carouselExample2" class="carousel slide" data-ride="carousel" data-interval="9000">
+                          <div class="carousel-inner row w-100 mx-auto" role="listbox">
+                            <div class="carousel-item col-md-4" *ngFor="let slide2 of secondAdvertisiment;let i = index" [ngClass]=" i == 0 ? 'active' : '' ">
+                                <img class="img-fluid mx-auto d-block" src="{{authSer.pathImg + slide2.photo}}" alt="slide 1">
                             </div>
                           </div>
-                        </owl-carousel> -->
+                          <a class="carousel-control-prev" href="#carouselExample2" role="button" data-slide="prev">
+                              <i class="fa fa-chevron-left fa-lg text-muted"></i>
+                              <span class="sr-only">Previous</span>
+                          </a>
+                          <a class="carousel-control-next text-faded" href="#carouselExample2" role="button" data-slide="next">
+                              <i class="fa fa-chevron-right fa-lg text-muted"></i>
+                              <span class="sr-only">Next</span>
+                          </a>
+                        </div>
+
+
                       </div>
                     </div>
                   </div>
@@ -191,7 +210,7 @@
                         <div class="carousel-caption d-none d-md-block">
                             <h5>{{report.title_en}}</h5>
                             <p [innerHtml] = "report.description_en"></p>
-                            <button class="more">More</button>
+                            <button class="more" (click)="goPageNew(report)">More</button>
                         </div>
                       </div>
                   </div>
@@ -205,7 +224,7 @@
                     <div class="carousel-inner">
                         <div class="carousel-item" *ngFor="let event of events; let i = index" [ngClass]="i == 0 ? 'active' : ''">
                             <div class="carousel-caption">
-                                <p> <img src="../../../assets/image/eventX.png" />  <span> event :</span>  {{event.name_en}}</p> <button class="moreEventEn-w">More </button>
+                                <p> <img src="../../../assets/image/eventX.png" />  <span> event :</span>  {{event.name_en}}</p> <button class="moreEventEn-w"  (click)="oneventTable()">More </button>
                             </div>   
                         </div>
                     </div>

src/app/External-Page/external-page-content/external-page-content.component.ts

@@ -1,18 +1,26 @@
+import { Subscription } from 'rxjs';
+import { Router, ActivatedRoute } from '@angular/router';
 import { AuthServiceService } from './../../shared/auth-service.service';
 import { ExternalPageService } from './../../shared/external-page.service';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import {MapsAPILoader} from '@agm/core';
 import * as $ from 'jquery';
+import { NgxSpinnerService } from 'ngx-spinner';
 
 @Component({
   selector: 'app-external-page-content',
   templateUrl: './external-page-content.component.html',
   styleUrls: ['./external-page-content.component.css']
 })
-export class ExternalPageContentComponent implements OnInit {
+export class ExternalPageContentComponent implements OnInit, OnDestroy {
 
   constructor(private externalService: ExternalPageService, 
-    private authSer:AuthServiceService) { }
+    private spinner: NgxSpinnerService,
+    private router: Router,
+    private route: ActivatedRoute,
+    private authSer:AuthServiceService) { 
+      this.spinner.show();
+    }
 
   reports = [];
   events = [];
@@ -27,9 +35,9 @@ export class ExternalPageContentComponent implements OnInit {
   lat: number;
   lng: number;
 
-  firstAdvertisiment = [] //[1,2,3,4,5,6,7,8,9].map((i)=> `https://picsum.photos/640/480?image=${i}`);
-  //myCarouselImages =[1,2,3,4,5,6].map((i)=>`https://picsum.photos/640/480?image=${i}`);
-  //firstAdvertisiment = [];
+  contentSubscription:Subscription;
+
+  firstAdvertisiment = [];
   mySlideOptions={items: 3, dots: false, nav: true};
   myCarouselOptions={items: 3, dots: true, nav: true};
 
@@ -37,8 +45,22 @@ export class ExternalPageContentComponent implements OnInit {
 
   ngOnInit() {
 
+    this.authSer.homeActivate = true;
+
+
+    //to make class active is "0"
+    this.externalService.getHeader().subscribe(
+      (responce) => {
+        console.log('Header', responce);
+        this.externalService.headerMenus = responce['parents'];
+        for(let i = 0; i < this.externalService.headerMenus.length; i++) {
+          this.externalService[i].active = 0;
+        }
+      }
+    );
+
     //get content data of external pages
-    this.externalService.getContentData().subscribe(
+   this.contentSubscription =  this.externalService.getContentData().subscribe(
       (responce) => {
         console.log(responce);
         this.reports = responce['data'].reports;
@@ -59,15 +81,29 @@ export class ExternalPageContentComponent implements OnInit {
         this.lat = responce['data']['reach_map'].latitude;
         this.lng = responce['data']['reach_map'].longitude;
         console.log('fiiiiiiiiiiiiiiiiiiiii' , this.firstAdvertisiment);
+        this.spinner.hide();
       },
       (error) => {
         console.log(error);
       }
     );
 
+  }
+
 
+  goPageNew(reprotData) {
+    console.log(reprotData);
+    this.router.navigate( ['ExternalPage/newPage/' + reprotData.id]);
   }
 
-  
+  oneventTable() {
+    this.router.navigate(['/ExternalPage/EventsTable']);
+  }
+
+  ngOnDestroy() {
+    this.contentSubscription.unsubscribe();
+  }
+
+
 
 }

src/app/External-Page/external-page-header/external-page-header.component.css

@@ -488,26 +488,58 @@ input,button {
 
   .menuHeader-w {
       margin: 0 auto;
+      height: 70px;
   }
 
   .menuHeaderEn-w {
       margin: 0 auto;
       direction: ltr;
+      height: 70px;
   }
 
   .menuHeaderEn-w li a {
       float: left;
       margin: 0 15px;
+      color: #049288 !important;
+      transition: all 0.5s;
   }
 
   .menuHeader-w li a {
       font-size: 18px;
+      color: #049288;
+      transition: all 0.5s;
   }
 
-  .menuHeader-w li a img {
+  .menuHeader-w li a img,
+  .menuHeaderEn-w li a img{
       width: 30px;
+      margin: 0 5px;
   }
 
+  .menuHeaderEn-w li, .menuHeader-w li {
+    padding: 10px 0;
+    transition: all 0.5s;
+  }
+
+  .menuHeaderEn-w li:hover {
+    background-color: #02635c;
+    color: #fff !important;
+  }
+
+  .menuHeaderEn-w li:hover a {
+      color: #fff !important;
+  }
+
+  .menuHeader-w li:hover {
+    background-color: #02635c;
+    color: #fff !important;
+  }
+
+  .menuHeader-w li:hover a {
+      color: #fff !important;
+  }
+
+
   .buttonMobileHeader-w {
       margin: 15px;
   }

src/app/External-Page/external-page-header/external-page-header.component.html

@@ -97,7 +97,13 @@
                         
                         <div class="collapse navbar-collapse" id="navbarSupportedContent">
                             <ul class="navbar-nav mr-auto menuHeader-w">
-                                <li class="nav-item" *ngFor="let menu of headerMenus" style="position: relative;">
+                                <li class="nav-item" (click)="goToHome()" style="cursor: pointer;" [ngClass]="{'homeExternalActive': authSer.homeActivate}"> 
+                                    <a class="nav-link">
+                                        <i class="fa fa-home" style="font-size: 23px;margin:0 5px;"></i> الرئيسيه
+                                    </a>
+                                </li>
+
+                                <li class="nav-item" *ngFor="let menu of externalService.headerMenus" style="position: relative;" [ngClass]="menu.active == 0 ? '' : 'activeExternalLink' ">
                                     <a class="nav-link" [ngClass]="{ 'dropdown-toggle' : menu['childs'].length > 0 }" href="{{menu.link}}" id="navbarDropdown" role="button" [attr.data-toggle]=" menu['childs'].length > 0 ? 'dropdown' : '' " aria-haspopup="true" aria-expanded="false">
                                        <img src="{{authSer.pathImg + menu.photo}}" /> {{menu.name}}
                                     </a>
@@ -105,8 +111,10 @@
                                         <a class="dropdown-item" href="{{child.link}}" *ngFor="let child of menu['childs']">{{child.name}}</a>
                                     </div>
                                 </li>
+
                             </ul>
                         </div>
+
                     </nav>
                 </div>
             </div>
@@ -214,9 +222,14 @@
                     
                         <div class="collapse navbar-collapse" id="navbarSupportedContent">
                             <ul class="navbar-nav mr-auto menuHeaderEn-w">
-                                <li class="nav-item" *ngFor="let menu of headerMenus" style="position: relative;">
+                                <li class="nav-item" (click)="goToHome()" style="cursor: pointer;" [ngClass]="{'homeExternalActive': authSer.homeActivate}"> 
+                                    <a class="nav-link">
+                                        <i class="fa fa-home" style="font-size: 23px;margin:0 5px;"></i> Home
+                                    </a>
+                                </li>
+                                <li class="nav-item" *ngFor="let menu of externalService.headerMenus" style="position: relative;" [ngClass]="menu.active == 0 ? '' : 'activeExternalLink' ">
                                     <a class="nav-link" [ngClass]="{ 'dropdown-toggle' : menu['childs'].length > 0 }" href="{{menu.link}}" id="navbarDropdown" role="button" [attr.data-toggle]=" menu['childs'].length > 0 ? 'dropdown' : '' " aria-haspopup="true" aria-expanded="false">
-                                        {{menu.name_en}}
+                                        <img src="{{authSer.pathImg + menu.photo}}" /> {{menu.name_en}} 
                                     </a>
                                     <div class="dropdown-menu" aria-labelledby="navbarDropdown" *ngIf="menu['childs'].length > 0">
                                         <a class="dropdown-item" href="{{child.link}}" *ngFor="let child of menu['childs']">{{child.name_en}}</a>

src/app/External-Page/external-page-header/external-page-header.component.ts

@@ -16,7 +16,6 @@ export class ExternalPageHeaderComponent implements OnInit {
     
     currentDate: any = Date.now();//ararbic date 
     currentEnglishDate: any = Date.now(); //english date
-    headerMenus = []; //header data 
 
   ngOnInit() {
 
@@ -25,22 +24,34 @@ export class ExternalPageHeaderComponent implements OnInit {
     this.authSer.setLocalLang(); //set languages icons
     this.currentDate = this.authSer.writeHijri(new Date(this.currentDate), 'ar', 'header');
 
+    this.authSer.footerData = [];
+
+    this.authSer.onGetFooterData('internal').subscribe(
+      (responce) => {
+        this.authSer.footerData = responce['footer'];
+        console.log(this.authSer.footerData);
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+    
+
     //get header data 
     this.externalService.getHeader().subscribe(
       (responce) => {
         console.log(responce);
-        this.headerMenus = responce['parents'];
-        console.log('menu data' , this.headerMenus);
+        this.externalService.headerMenus = responce['parents'];
+        console.log('menu data' , this.externalService.headerMenus);
       },
       (error) => {
         console.log(error);
       }
     );
+  }
 
-
-
-
-
+  goToHome() {
+    this.router.navigate(['/ExternalPage/home']);
   }
 
 

src/app/External-Page/external-page.module.ts

@@ -1,3 +1,4 @@
+import { SharedModule } from './../shared/shared.module';
 import { ExternalEventsComponent } from './external-events/external-events.component';
 import { ExternalPageService } from './../shared/external-page.service';
 import { ExternalPageRoutingModule } from './external-routing-module';
@@ -12,19 +13,32 @@ import { AgmCoreModule } from '@agm/core';
 import { OwlModule } from 'ngx-owl-carousel';
 import { CalendarModule, DateAdapter } from 'angular-calendar';
 import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
+import { ExternalHospitalComponent } from './external-hospital/external-hospital.component';
+import { ExternalContactUsComponent } from './external-contact-us/external-contact-us.component';
+import { NewPageComponent } from './new-page/new-page.component';
+import { ExternalEventsTableComponent } from './external-events-table/external-events-table.component';
+import {NgxPaginationModule} from 'ngx-pagination';
+//import { CeiboShare } from 'ng2-social-share';
 
 
 @NgModule({
     declarations: [ExternalPageHeaderComponent,
         ExternalPageContentComponent,
         ExternalPageComponent,
-        ExternalEventsComponent
+        ExternalEventsComponent,
+        ExternalHospitalComponent,
+        ExternalContactUsComponent,
+        NewPageComponent,
+        ExternalEventsTableComponent,
+        //CeiboShare,
     ],
     imports: [
         CommonModule,
         FormsModule,
         OwlModule,
+        NgxPaginationModule,
         SlickCarouselModule,
+        SharedModule,
         AgmCoreModule.forRoot({
             apiKey: 'AIzaSyAxlgymaua-8BszEryfQIOr9PLKrtEqU2I'
           }),

src/app/External-Page/external-routing-module.ts

@@ -1,3 +1,7 @@
+import { ExternalEventsTableComponent } from './external-events-table/external-events-table.component';
+import { NewPageComponent } from './new-page/new-page.component';
+import { ExternalContactUsComponent } from './external-contact-us/external-contact-us.component';
+import { ExternalHospitalComponent } from './external-hospital/external-hospital.component';
 import { ExternalPageContentComponent } from './external-page-content/external-page-content.component';
 import { ExternalPageComponent } from './external-page/external-page.component';
 import { NgModule } from '@angular/core';
@@ -8,6 +12,10 @@ import { RouterModule, Routes } from '@angular/router';
 const externalPageRoutes: Routes = [
     {path: 'ExternalPage' , component: ExternalPageComponent, children:[
         {path: 'home', component: ExternalPageContentComponent},
+        {path: 'contactUs', component: ExternalContactUsComponent},
+        {path: 'EventsTable', component: ExternalEventsTableComponent},
+        {path: 'newPage/:reportId', component: NewPageComponent},
+        {path: ':type_page', component: ExternalHospitalComponent},
     ]},
 ];
 

src/app/External-Page/new-page/new-page.component.css

@@ -0,0 +1,153 @@
+.newPage-w {
+    width: 100%;
+}
+
+.newPage-w .containerContent-w {
+    border-top: 5px solid #007a71;
+}
+
+.newPage-w .containerContent-w .firstReport-w {
+    width: 100%;
+    display: inline-block;
+    padding: 20px 0;
+}
+
+.newPage-w .containerContent-w .firstReport-w h2 {
+    font-size: 18px;
+    color: #007a71;
+    text-align: right;
+    margin: 10px 0;
+}
+
+.newPage-w .containerContent-w .firstReport-w h2 span {
+    font-size: 15px;
+    color: #888;
+}
+
+.newPage-w .containerContent-w .firstReport-w .img {
+    width: 100%;
+    height: 400px;
+    margin-top: 20px;
+}
+
+.newPage-w .containerContent-w .firstReport-w .reprtDetail-w {
+    width: 100%;
+    padding: 20px 0;
+}
+
+.newPage-w .containerContent-w .firstReport-w .reprtDetail-w .dateReport-w {
+    width: 100%;
+    padding: 10px;
+}
+
+.newPage-w .containerContent-w .firstReport-w .reprtDetail-w .dateReport-w p {
+    font-size: 17px;
+    color: #ccc;
+}
+
+.newPage-w .containerContent-w .firstReport-w .img img {
+    width: 100%;
+    height: 100%;
+}
+
+.newPage-w .containerContent-w .descriptionBody-w {
+    width: 100%;
+    padding: 20px 0;
+}
+
+.newPage-w .containerContent-w .descriptionBody-w h2 {
+    text-align: right;
+    font-size: 17px;
+    color: #007a71;
+    margin: 10px 0;
+}
+
+.newPage-w .containerContent-w .descriptionBody-w p {
+    text-align: right;
+    font-size: 15px;
+    color: #888;
+}
+
+.newPage-w .containerContent-w .imagesBody-w {
+    width: 100%;
+    padding: 20px 0;
+}
+
+.newPage-w .containerContent-w .imagesBody-w .imageNews {
+    width: 100%;
+    height: 300px;
+}
+
+.newPage-w .containerContent-w .imagesBody-w .imageNews img {
+    width: 100%;
+    height: 100%;
+}
+
+.inside_links{
+    width: 100%;
+overflow: hidden;
+margin-top: 70px;
+display: block;
+}
+
+.inside_links ul{
+  display: block;
+width: 100%;
+padding: 0px;
+}
+
+.inside_links ul li{
+display: block;
+width: 100%;
+height: 65px;
+}
+
+.inside_links ul li span{
+display: block;
+float: right;
+margin: 1px 4px 0px 0px;
+}
+.eninside_links ul li span{
+ float: left !important;
+}
+.eninside_links ul li a img{
+ float: left !important;
+}
+.inside_links ul li a img{
+  display: block;
+width: 30px;
+float: right;
+height: 30px;
+margin: 15px 10px 0px 10px;
+filter: invert(65%);
+}
+
+.inside_links ul li a{
+display: block;
+float: right;
+color: #755a07;
+line-height: 62px;
+margin: 0px 2px 2px 0px;
+width: 100%;
+background-color: #e6e6e6;
+height: 65px;
+border-bottom: 1px solid #ceb79d96;
+transition: all 0.5s;
+}
+.inside_links ul li a:hover{
+    background: linear-gradient(1turn,#e6ded5cc, #e6e6e6, #e6e6e6);
+}
+
+
+@media(max-width:767px){
+    .inside_links{
+		display: none !important;
+	}
+}
+
+
+@media(min-width: 1200px) {
+    .container {
+        width: 1200px;
+    }
+}

src/app/External-Page/new-page/new-page.component.html

@@ -0,0 +1,196 @@
+<div class="newPage-w">
+  <div class="container">
+      <div class="containerContent-w">
+        <ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="englishTemplate">
+            <div class="row">
+
+              <div class="col-12 col-sm-12 col-md-9">
+                <div class="firstReport-w">
+                  <h2> {{reportData.title}} <span>{{reportData.created_at}}</span> </h2>
+                  <div class="img">
+                    <img src="{{authSer.pathImg + singleImg.photo}}" />
+                  </div>
+                  <div class="reprtDetail-w">
+                    <div class="row">
+                      <div class="col-6">
+                        <div class="socialMedia-w">
+                          <ul class="list-unstyled">
+                            <!-- <li><button class="facebook" ceiboShare  [facebook]="{u: repoUrl}"><i class="fab fa-facebook-f"></i></button></li>
+                            <li><button class="linkedin" ceiboShare  [linkedIn]="{url:repoUrl}"><i class="fab fa-linkedin-in"></i></button></li>
+                            <li><button class="googleplus" ceiboShare  [googlePlus]="{url:repoUrl}"><i class="fab fa-google-plus-g"></i></button></li>
+                            <li> <button class="whatsapp"> <a href="{{'http://example.org/?test=' + url}}"><i class="fab fa-whatsapp"></i></a></button></li>
+                            <li><button class="twitter" ceiboShare  [twitter]="{url:repoUrl, text:'Checkout this awesome ng2 social share directive', hashtags:'angular2, social, ceiboIT'}"><i class="fab fa-twitter"></i></button></li> -->
+                          </ul>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="col-12 col-sm-12 col-md-3">
+                <div class="items inside_links">
+                  <!-- <ul>
+                    <li>
+                      <a href="service.link">
+                          <img src="http://kfmc.info/back_end/public/uploads/1548286652.png" />
+                        <span>صحه المريض</span>
+                      </a>
+                    </li>
+                    <li>
+                      <a href="service.link">
+                          <img src="http://kfmc.info/back_end/public/uploads/1548286545.png" />
+                        <span> التدريب والتعليم</span>
+                      </a>
+                    </li>
+                    <li>
+                      <a href="service.link">
+                          <img src="http://kfmc.info/back_end/public/uploads/1548286575.png" />
+                        <span>الموظفين</span>
+                      </a>
+                    </li>
+                    <li>
+                      <a href="service.link">
+                        <img src="http://kfmc.info/back_end/public/uploads/1548286592.png" />
+                        <span>التوظيف</span>
+                      </a>
+                      
+                    </li>
+                    <li>
+                      <a href="service.link">
+                        <img src="http://kfmc.info/back_end/public/uploads/1547465492.png" />
+                        <span>نظام البلاغات -OVR </span>
+                      </a>
+                      
+                    </li>
+                    <li>
+                      <a href="service.link">
+                          <img src="http://kfmc.info/back_end/public/uploads/1548286494.png" />
+                        <span> دليل المجمع</span>
+                      </a>
+                    </li>
+                  </ul> -->
+                </div>
+              </div>
+
+              <div class="col-12">
+                <div class="descriptionBody-w">
+                  <p [innerHTML]="reportData.description"></p>
+                </div>
+              </div>
+
+              <div class="col-12">
+                <div class="imagesBody-w">
+                  <div class="row">
+                    <div class="col-12 col-sm-12 col-md-6" *ngFor="let image of reportData.photos; let i = index">
+                      <div class="imageNews">
+                        <img src="{{authSer.pathImg + image.photo}}"> 
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+            </div>
+        </ng-template>
+
+        <ng-template #englishTemplate>
+          <div class="row" style="direction:ltr">
+            <div class="col-12 col-sm-12 col-md-8">
+              <div class="firstReport-w">
+                <h2 style="text-align:left"> {{reportData.title_en}} <span>{{reportData.created_at}}</span>  </h2>
+                <div class="img">
+                  <img src="{{authSer.pathImg + singleImg.photo}}" />
+                </div>
+                <div class="reprtDetail-w">
+                  <div class="row">
+                    <div class="col-6">
+                      <div class="dateReport-w">
+                        <p>{{reportData.created_at}}</p>
+                      </div>
+                    </div>
+                    <div class="col-6">
+                      <div class="socialMedia-w">
+                        <ul class="list-unstyled">
+                          <!-- <li><button class="facebook" ceiboShare  [facebook]="{u: repoUrl}"><i class="fab fa-facebook-f"></i></button></li>
+                          <li><button class="linkedin" ceiboShare  [linkedIn]="{url:repoUrl}"><i class="fab fa-linkedin-in"></i></button></li>
+                          <li><button class="googleplus" ceiboShare  [googlePlus]="{url:repoUrl}"><i class="fab fa-google-plus-g"></i></button></li>
+                          <li> <button class="whatsapp"> <a href="{{'http://example.org/?test=' + url}}"><i class="fab fa-whatsapp"></i></a></button></li>
+                          <li><button class="twitter" ceiboShare  [twitter]="{url:repoUrl, text:'Checkout this awesome ng2 social share directive', hashtags:'angular2, social, ceiboIT'}"><i class="fab fa-twitter"></i></button></li> -->
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="col-12 col-sm-12 col-md-4">
+              <div class="items inside_links eninside_links">
+                  <!-- <ul>
+                    <li>
+                      
+                      <a href="service.link">
+                          <img src="http://kfmc.info/back_end/public/uploads/1548286652.png" />
+                        <span>Pharmacy Library</span>
+                      </a>
+                    </li>
+                    <li>
+                      <a href="service.link">
+                          <img src="http://kfmc.info/back_end/public/uploads/1548286545.png" />
+                        <span>User Guide</span>
+                      </a>
+                    </li>
+                    <li>
+                      <a href="service.link">
+                          <img src="http://kfmc.info/back_end/public/uploads/1548286575.png" />
+                        <span>Employee Handbook</span>
+                      </a>
+                    </li>
+                    <li>
+                      <a href="service.link">
+                        <img src="http://kfmc.info/back_end/public/uploads/1548286592.png" />
+                        <span>Initiatives </span>
+                      </a>
+                      
+                    </li>
+                    <li>
+                      <a href="service.link">
+                        <img src="http://kfmc.info/back_end/public/uploads/1547465492.png" />
+                        <span> OVR System </span>
+                      </a>
+                      
+                    </li>
+                    <li>
+                      <a href="service.link">
+                          <img src="http://kfmc.info/back_end/public/uploads/1548286494.png" />
+                        <span>Medical Library</span>
+                      </a>
+                    </li>
+                  </ul> -->
+              </div>
+            </div>
+
+            <div class="col-12">
+              <div class="descriptionBody-w">
+                <p style="text-align:left" [innerHTML]="reportData.description_en"></p>
+              </div>
+            </div>
+
+            <div class="col-12">
+              <div class="imagesBody-w">
+                <div class="row">
+                  <div class="col-12 col-sm-12 col-md-6" *ngFor="let image of reportData.photos; let i = index">
+                    <div class="imageNews">
+                      <img src="{{authSer.pathImg + image.photo}}"> 
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+          </div>
+        </ng-template>
+      </div>
+  </div>
+</div>

src/app/External-Page/new-page/new-page.component.ts

@@ -0,0 +1,73 @@
+import { HttpClient } from '@angular/common/http';
+import { ActivatedRoute, Params } from '@angular/router';
+import { AuthServiceService } from './../../shared/auth-service.service';
+import { Component, OnInit } from '@angular/core';
+import { NgxSpinnerService } from 'ngx-spinner';
+
+@Component({
+  selector: 'app-new-page',
+  templateUrl: './new-page.component.html',
+  styleUrls: ['./new-page.component.css']
+})
+export class NewPageComponent implements OnInit {
+
+  constructor(private authSer: AuthServiceService, 
+    private http: HttpClient,
+    private spinner: NgxSpinnerService,
+    private route:ActivatedRoute) { 
+      this.spinner.show();
+    }
+
+    reportId: number;
+    reportData = {
+      created_at: '',
+      title: '',
+      title_en: '',
+      description: '',
+      description_en: '',
+      photos: [],
+    };
+
+    singleImg = {
+      photo: '',
+    };
+
+  ngOnInit() {
+    
+    this.authSer.homeActivate = false;
+
+    this.route.params.subscribe(
+      (params: Params) => {
+        this.reportId = params['reportId'];
+      }
+    );
+
+    this.http.get(this.authSer.pathApi + '/get_report/' + this.reportId).subscribe(
+      (responce) => {
+        console.log(responce);
+        const singleDataImg = responce['report']['photos'].splice(responce['report']['photos'].indexOf(responce['report']['photos'][0]) , 1);
+        console.log('single image data' , singleDataImg);
+        this.singleImg.photo = singleDataImg[0].photo;
+        console.log('single image ', this.singleImg.photo);
+
+        console.log('responnnnnce' , responce['report']);
+
+        this.reportData.created_at = responce['report'].created_at;
+        this.reportData.title = responce['report'].title;
+        this.reportData.title_en = responce['report'].title_en;
+        this.reportData.description = responce['report'].description;
+        this.reportData.description_en = responce['report'].description_en;
+        for(let i = 1; i < responce['report']['photos'].length; i++) {
+          this.reportData.photos.push(responce['report']['photos'][i]);
+        }
+        console.log('dddddddddddddddddddd', this.reportData);
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+  }
+
+}

src/app/Internal-Page/hospital-content/hospital-content.component.css

@@ -69,7 +69,7 @@
     width: 100%;
     padding: 6px 0;
     border-bottom: 1px solid #ccc;
-    margin-left: 50px;
+    margin: 0 10px;
     transition: all 0.5s;
 }
 
@@ -120,7 +120,7 @@
     width: 100%;
     padding: 6px 0;
     border-bottom: 1px solid #ccc;
-    margin-right: 50px;
+    margin-right: 0 10px;
     transition: all 0.5s;
 }
 

src/app/Internal-Page/hospital-content/hospital-content.component.html

@@ -7,20 +7,20 @@
                   <div class="col-6 col-md-3">
                       <div class="recordsContent-w">
                           <!-- <ul class="list-unstyled">
-                            <li *ngFor="let hospital of hospitalCenters; let i = index" (click)="open(hospital,i)" style="cursor: pointer;">  
+                            <li *ngFor="let hospital of hospitalCenters; let i = index" (click)="open(hospital,i)" style="cursor: pointer;">
                                 {{hospital.name}}
-                                <div *ngIf="i == expandedIndex">  
+                                <div *ngIf="i == expandedIndex">
                                     <div class="containetttt" *ngFor="let field of hospital['fields']">
                                       <ul class="list-unstyled nestedMenu">
                                         <li (click)="showDescriptionDetails(field)" [className]=" authSer.arabicTemplate ? '' : 'achievementsLangHeading-w' ">
-                                          {{field.title}} 
+                                          {{field.title}}
                                         </li>
                                       </ul>
-                                    </div>  
-                                </div>                                  
+                                    </div>
+                                </div>
                             </li>
                           </ul> -->
-                          <div class="accordion nothome" id="accordionExample">
+                          <!-- <div class="accordion" id="accordionExample">
                               <div class="panel-group testGroup-w" *ngFor="let hospital of hospitalCenters; let i = index"  id="accordion">
                                   <div class="panel panel-default">
                                       <div class="panel-heading accordion-toggle collapsed" [ngClass]="{ 'collapsed' : i == 0 }" id="{{ 'heading' + (i+1) }}" data-toggle="collapse" [attr.data-target]=" '#collapse' + (i+1) " [attr.aria-controls] = " 'collapse' + (i+1) ">
@@ -30,15 +30,34 @@
                                           <div class="panel-body testBody-w">
                                               <ul class="list-unstyled nestedMenu">
                                                 <li (click)="showDescriptionDetails(field)" [className]=" authSer.arabicTemplate ? '' : 'achievementsLangHeading-w' ">
-                                                  {{field.title}} 
+                                                  {{field.title}}
                                                 </li>
                                               </ul>
                                           </div>
                                       </div>
                                   </div>
                               </div>
+                          </div> -->
+                          
+                          <div id="accordion">
+                            <div class="card" *ngFor="let hospital of hospitalCenters; let i = index">
+                              <div class="card-header" [attr.id]="'heading'+(i+1)">
+                                  <button class="btn btn-link" data-toggle="collapse" [attr.data-target]="'#collapse'+(i+1)" [attr.aria-expanded]="(i+1)==1 ? true :false" [attr.aria-controls]="'collapse'+(i+1)">
+                                    <h4 class="panel-title">{{hospital.name}}</h4>
+                                  </button>
+                              </div>
+                          
+                              <div *ngFor="let field of hospital['fields']" [attr.id]="'collapse'+(i+1)" class="collapse" [ngClass]="{'show' : (i+1) == 1}" [attr.aria-labelledby]="'heading' + (i+1)" data-parent="#accordion">
+                                <div class="card-body testBody-w">
+                                    <ul class="list-unstyled">
+                                        <li (click)="showDescriptionDetails(field)"  [className]=" authSer.arabicTemplate ? '' : 'achievementsLangHeading-w' " style="text-align:right;margin-right:-23px">
+                                            {{field.title}}
+                                        </li>
+                                    </ul>
+                                </div>
+                              </div>
+                            </div>
                           </div>
-                        
                       </div>
                   </div>
                   <div class="col-6 col-md-9">
@@ -46,16 +65,16 @@
                       <h2>{{detailsField.title}}</h2>
                       <p [innerHTML]="detailsField.description"></p>
                     </div>
-                  </div> 
+                  </div>
               </div>
             </ng-template>
-    
+
             <ng-template #englishTemplate>
               <div class="container" style="direction:ltr">
                 <div class="row">
                     <div class="col-6 col-md-3">
                         <div class="recordsContent-w">
-                            <div class="accordion nothome" id="accordionExample">
+                            <!-- <div class="accordion nothome" id="accordionExample">
                                 <div class="panel-group testGroupEn-w" *ngFor="let hospital of hospitalCenters; let i = index"  id="accordion">
                                     <div class="panel panel-default">
                                         <div class="panel-headingEn accordion-toggle collapsed"  [ngClass]="{ 'collapsed' : i == 0 }" id="{{ 'heading' + (i+1) }}" data-toggle="collapse" [attr.data-target]=" '#collapse' + (i+1) " [attr.aria-controls] = " 'collapse' + (i+1) ">
@@ -65,26 +84,48 @@
                                             <div class="panel-body testBodyEn-w">
                                                 <ul class="list-unstyled nestedMenu">
                                                   <li (click)="showDescriptionDetails(field)">
-                                                    {{field.title_en}} 
+                                                    {{field.title_en}}
                                                   </li>
                                                 </ul>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
+                            </div> -->
+
+                            <div id="accordion">
+                                <div class="card" *ngFor="let hospital of hospitalCenters; let i = index">
+                                    <div class="card-header" [attr.id]="'heading'+(i+1)">
+                                    <h5 class="mb-0">
+                                        <button class="btn btn-link" data-toggle="collapse" [attr.data-target]="'#collapse'+(i+1)" [attr.aria-expanded]="(i+1)==1 ? true :false" [attr.aria-controls]="'collapse'+(i+1)">
+                                        <h4 class="panel-title">{{hospital.name_en}}</h4>
+                                        </button>
+                                    </h5>
+                                    </div>
+                                
+                                    <div *ngFor="let field of hospital['fields']" [attr.id]="'collapse'+(i+1)" class="collapse" [ngClass]="{'show' : (i+1) == 1}" [attr.aria-labelledby]="'heading' + (i+1)" data-parent="#accordion">
+                                    <div class="card-body testBody-w">
+                                        <ul class="list-unstyled nestedMenu">
+                                            <li (click)="showDescriptionDetails(field)" [className]=" authSer.arabicTemplate ? '' : 'achievementsLangHeading-w' " style="text-align:left">
+                                                {{field.title_en}}
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    </div>
+                                </div>
                             </div>
                             <!-- <ul class="list-unstyled">
-                              <li *ngFor="let hospital of hospitalCenters; let i = index" (click)="open(hospital,i)" style="cursor: pointer;">  
-                                  {{hospital.name_en}}  
-                                  <div *ngIf="i == expandedIndex">  
+                              <li *ngFor="let hospital of hospitalCenters; let i = index" (click)="open(hospital,i)" style="cursor: pointer;">
+                                  {{hospital.name_en}}
+                                  <div *ngIf="i == expandedIndex">
                                       <div class="containetttt" c>
                                         <ul class="list-unstyled nestedMenu">
                                           <li (click)="showDescriptionDetails(field)">
-                                            {{field.title_en}} 
+                                            {{field.title_en}}
                                           </li>
                                         </ul>
-                                      </div>  
-                                  </div>                                  
+                                      </div>
+                                  </div>
                               </li>
                             </ul> -->
                         </div>
@@ -94,11 +135,11 @@
                         <h2>{{detailsField.title_en}}</h2>
                         <p>{{detailsField.description_en}}</p>
                       </div>
-                    </div> 
+                    </div>
                 </div>
               </div>
             </ng-template>
-            
+
         </div>
     </div>
   </div>

src/app/Internal-Page/hospital-content/hospital-content.component.ts

@@ -17,7 +17,6 @@ export class HospitalContentComponent implements OnInit {
               private route: ActivatedRoute,
               private spinner: NgxSpinnerService,
               private authSer:AuthServiceService) { 
-                this.spinner.show();
               }
 
   hospitalCenters = [];
@@ -41,6 +40,8 @@ export class HospitalContentComponent implements OnInit {
 
 
   ngOnInit() {
+    
+    this.spinner.show();
     this.authSer.homeActivate = false;
     this.expandedIndex = 0;
     this.route.params.subscribe(
@@ -115,7 +116,7 @@ export class HospitalContentComponent implements OnInit {
           console.log(error);
         }
       );
-
+      
     }
   }
 
@@ -147,8 +148,4 @@ export class HospitalContentComponent implements OnInit {
     this.expandedIndex = -1;
   }
 
-
-
-
-
 }

src/app/Internal-Page/internal-page-content/internal-page-content.component.css

@@ -793,6 +793,31 @@ input,button {
     display: inline-block;
 }
 
+.tabs .card {
+    border: 0;
+}
+
+.tabs .recods .card-header{
+    padding: 0;
+    overflow: hidden;
+}
+
+.tabs .recods .card-header h4 {
+    font-size: 15px;
+}
+
+.tabs .recods .card-header h5 button {
+    cursor: pointer;
+}
+
+.tabs .recods .card-body {
+    padding: 0;
+}
+.testBody-w p {
+    text-align: right;
+    font-size: 15px;
+    padding: 5px 10px;
+  }
 .tabs .recods .headerRecords-w {
     width: 100%;
     display: inline-block;

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

@@ -211,7 +211,24 @@
                                 <div class="headerRecords-w">
                                     إحصائيات عامه - إنجازات
                                 </div>
-                                <div class="recordsContent-w">
+                                <div id="accordion">
+                                    <div class="card" *ngFor="let achiev of achievements; let i = index">
+                                        <div class="card-header" [attr.id]="'heading'+(i+1)">
+                                        <h5 class="mb-0">
+                                            <button class="btn btn-link" data-toggle="collapse" [attr.data-target]="'#collapse'+(i+1)" [attr.aria-expanded]="(i+1)==1 ? true :false" [attr.aria-controls]="'collapse'+(i+1)">
+                                            <h4 class="panel-title">{{achiev.title}}</h4>
+                                            </button>
+                                        </h5>
+                                        </div>
+                                    
+                                        <div [attr.id]="'collapse'+(i+1)" class="collapse" [ngClass]="{'show' : (i+1) == 1}" [attr.aria-labelledby]="'heading' + (i+1)" data-parent="#accordion">
+                                        <div class="card-body testBody-w">
+                                            <p [innerHTML]="achiev.description"></p>
+                                        </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- <div class="recordsContent-w">
                                     <div class="accordion" id="accordionExample">
                                         <div class="panel-group testGroup-w" *ngFor="let achiev of achievements; let i = index"  id="accordion">
                                             <div class="panel panel-default">
@@ -226,7 +243,7 @@
                                             </div>
                                         </div>
                                     </div>
-                                </div>
+                                </div> -->
                             </div>
                         </div>
                     </div>
@@ -446,7 +463,7 @@
                             General Statistics - Achievements
                         </div>
                         <div class="recordsContent-w">
-                            <div class="accordion" id="accordionExample">
+                            <!-- <div class="accordion" id="accordionExample">
                                 <div class="panel-group testGroupEn-w" *ngFor="let achiev of achievements; let i = index"  id="accordion">
                                     <div class="panel panel-default">
                                         <div class="panel-headingEn accordion-toggle collapsed" id="{{ 'heading' + (i+1) }}" data-toggle="collapse" [attr.data-target]=" '#collapse' + (i+1) " [attr.aria-controls] = " 'collapse' + (i+1) ">
@@ -459,6 +476,23 @@
                                         </div>
                                     </div>
                                 </div>
+                            </div> -->
+                            <div id="accordion">
+                                <div class="card" *ngFor="let achiev of achievements; let i = index">
+                                    <div class="card-header" [attr.id]="'heading'+(i+1)">
+                                    <h5 class="mb-0">
+                                        <button class="btn btn-link" data-toggle="collapse" [attr.data-target]="'#collapse'+(i+1)" [attr.aria-expanded]="(i+1)==1 ? true :false" [attr.aria-controls]="'collapse'+(i+1)">
+                                        <h4 class="panel-title">{{achiev.title_en}}</h4>
+                                        </button>
+                                    </h5>
+                                    </div>
+                                
+                                    <div [attr.id]="'collapse'+(i+1)" class="collapse" [ngClass]="{'show' : (i+1) == 1}" [attr.aria-labelledby]="'heading' + (i+1)" data-parent="#accordion">
+                                    <div class="card-body testBody-w">
+                                        <p [innerHTML]="achiev.description_en" style="text-align:left !important"></p>
+                                    </div>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>

src/app/Internal-Page/internal-page-content/internal-page-content.component.ts

@@ -101,9 +101,9 @@ export class InternalPageContentComponent implements OnInit {
   ngOnInit() {
    //console.log(this.checkTokenExpire);
        //get profile data
+       this.spinner.show();
     this.userservice.getUserDataProfile();
     this.authSer.homeActivate = true;
-    this.spinner.show();
     
     this.internalService.getParentData().subscribe(
       (responce) => {
@@ -111,7 +111,6 @@ export class InternalPageContentComponent implements OnInit {
         for(let i = 0; i < this.authSer.parentsPage.length; i++) {
           this.authSer.parentsPage[i].active = 0;
         }
-        this.spinner.hide();
       },
       (error) => {
         console.log(error);
@@ -163,7 +162,12 @@ export class InternalPageContentComponent implements OnInit {
           description: responce['data']['main_ad'].description,
           description_en: responce['data']['main_ad'].description_en,
         }
-        this.spinner.hide();
+
+        if(this.achievements.length > 0) {
+          this.spinner.hide();
+        }
+        
+
       },
       (error) => {
         console.log(error);

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

@@ -178,6 +178,10 @@ input,button {
     text-align: right;
 }
 
+.logoHeader-w .leftLogo-w {
+    text-align: left;
+}
+
 .logoHeader-w .rightLogo-w img {
     margin-top: 15px;
     margin-right:15px

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

@@ -28,7 +28,18 @@ export class InternalPageHeaderComponent implements OnInit {
   showActiveBackground: boolean = false;
      
   ngOnInit() {
+   
+     this.authSer.footerData = [];
 
+    this.authSer.onGetFooterData('internal').subscribe(
+      (responce) => {
+        this.authSer.footerData = responce['footer'];
+        console.log(this.authSer.footerData);
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
 
     this.authSer.setLocalLang();
     console.log('tooooken', this.authSer.isAuthenticated());
@@ -76,6 +87,9 @@ export class InternalPageHeaderComponent implements OnInit {
   }
 
 
+  
+
+
 
 
 

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

@@ -13,7 +13,6 @@ import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
 import { FormsModule } from '@angular/forms';
 import {NgxPaginationModule} from 'ngx-pagination';
 import { JwSocialButtonsModule } from 'jw-angular-social-buttons';
-import { CeiboShare } from 'ng2-social-share';
 import { CarouselModule } from 'ngx-owl-carousel-o';
 
 import { InternalPageHeaderComponent } from './internal-page-header/internal-page-header.component';
@@ -23,7 +22,9 @@ import { CollapsibleModule } from 'angular2-collapsible'; // <-- import the modu
 import { CircularsPageComponent } from './circulars-page/circulars-page.component';
 
 import { NgxSpinnerModule } from 'ngx-spinner';
+import { SharedModule } from '../shared/shared.module';
 
+import { CeiboShare } from 'ng2-social-share';
 
 @NgModule({
     declarations: [
@@ -45,6 +46,7 @@ import { NgxSpinnerModule } from 'ngx-spinner';
         JwSocialButtonsModule,
         CarouselModule,
         NgxSpinnerModule,
+        SharedModule,
         NgbModule.forRoot(),
         FlatpickrModule.forRoot(),
         CalendarModule.forRoot({

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

@@ -13,7 +13,7 @@ import { LoginComponent } from './../login/login.component';
 
 
 const internalPageRoutes: Routes = [
-        {path: '' , component: InternalPageComponent, children:[
+        {path: 'InternalPage' , component: InternalPageComponent, children:[
         {path: 'home', component: InternalPageContentComponent},
         {path:'circulars', component: CircularsPageComponent},
         {path: 'events', component: EventsDateComponent},

src/app/Internal-Page/news-page/news-page.component.html

@@ -54,7 +54,6 @@
 					<div class="col-12 col-sm-12 col-md-12 inside_links">
 						<ul>
 							<li>
-								
 								<a href="service.link">
 									 <img src="http://kfmc.info/back_end/public/uploads/1548286652.png" />
 									<span>مكتبة الصيدلية</span>
@@ -94,8 +93,6 @@
 							</li>
 						</ul>
 					</div>
-			
-				
 				</div>
 			
 			

src/app/Internal-Page/news-page/news-page.component.ts

@@ -11,6 +11,7 @@ import { CeiboShare } from 'ng2-social-share';
   templateUrl: './news-page.component.html',
   styleUrls: ['./news-page.component.css'],
 })
+
 export class NewsPageComponent implements OnInit {
   public repoUrl = '';
   public imageUrl = '';
@@ -40,6 +41,7 @@ export class NewsPageComponent implements OnInit {
     );
 
     this.repoUrl = this.authSer.pathApi + '/get_report/' + this.newsId;
+
     //get news data 
     this.internalService.getNewsData(this.newsId).subscribe(
       (responce) => {
@@ -55,7 +57,8 @@ export class NewsPageComponent implements OnInit {
       (error) => {
         console.log(error);
       }
-    )
+    );
+
   }
 
 }

src/app/app.module.ts

@@ -1,6 +1,6 @@
 import { ServicesComponent } from './servicesItems/services.component';
 import { ExternalPageModule } from './External-Page/external-page.module';
-//import { InternalPageModule } from './Internal-Page/internal-page.module';
+import { InternalPageModule } from './Internal-Page/internal-page.module';
 import { DashBoardModule } from './dashboard/dashboard.module';
 
 import { CanDeactivateGuard } from './shared/can-deactivate-guards.service';
@@ -61,10 +61,9 @@ import { JwSocialButtonsModule } from 'jw-angular-social-buttons';
 
 import { Ng2CarouselamosModule } from 'ng2-carouselamos';
 import { NumberDerictiveDirective } from './number-derictive.directive';
-import { EnglishCharactersDirective } from './shared/english-characters.directive';
+//import { EnglishCharactersDirective } from './shared/english-characters.directive';
 import { OnlyNumberDirective } from './shared/only-number.directive';
-
-
+import {SharedModule} from './shared/shared.module';
 //registerLocaleData(localeAr, 'ar');
 
 
@@ -84,8 +83,8 @@ import { OnlyNumberDirective } from './shared/only-number.directive';
     PageNotFoundComponent,
     //CeiboShare,
     NumberDerictiveDirective,
-    EnglishCharactersDirective,
-    OnlyNumberDirective,
+    //EnglishCharactersDirective,
+    //OnlyNumberDirective,
   ],
   imports: [
     BrowserModule,
@@ -94,8 +93,9 @@ import { OnlyNumberDirective } from './shared/only-number.directive';
     HttpModule,
     HttpClientModule,
     DashBoardModule,
-    //InternalPageModule,
+    InternalPageModule,
     ExternalPageModule,
+    SharedModule,
     AppRoutingModule,
     SlideMenuModule,
     NgxSpinnerModule,

src/app/dashboard/dashboard.module.ts

@@ -1,3 +1,4 @@
+import { SharedModule } from './../shared/shared.module';
 import { EventsComponent } from './events/events.component';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
@@ -78,8 +79,8 @@ import { RoleReportComponent } from './roles/role-report/role-report.component';
 import { ReportListComponent } from './report-list/report-list.component';
 
 import { UserService } from '../shared/user.service';
-import { NumberDirective } from './number.directive';
-import { EnglishDirective } from './english.directive';
+// import { NumberDirective } from './number.directive';
+// import { EnglishDirective } from './english.directive';
 
 
 
@@ -130,8 +131,8 @@ import { EnglishDirective } from './english.directive';
         HigriDateComponent,
         AdvertisimentComponent,
         AddAdverComponent,
-        NumberDirective,
-        EnglishDirective,
+        // NumberDirective,
+        // EnglishDirective,
         //NumberDerictiveDirective,
     ],
     imports: [
@@ -140,6 +141,7 @@ import { EnglishDirective } from './english.directive';
         JwSocialButtonsModule,
         NgxPaginationModule,
         AlifeFileToBase64Module,
+        SharedModule,
         NgbModule.forRoot(),
         ModalModule.forRoot(),
         FormsModule,

src/app/dashboard/events/events.component.html

@@ -64,20 +64,11 @@
           <td>
             <div class="custom-control custom-checkbox centerIneerItem">
               <input type="checkbox" class="custom-control-input" id="{{event.id}}" [(ngModel)]="event.selected" [value]='event' (change)="checkIfAllSelected();">
-              <!-- <label class="custom-control-label disblayBlock-w" for="{{event.id}}" style="color:#2a2a2a;cursor: pointer;"></label> -->
             </div>
           </td>
           <td>{{event.name}}</td>
           <td>
             {{event.ranking}}
-            <!-- <select class="form-control" [ngModel]="event.ranking" (change)="changeRanking($event, event.id)">
-              <option value="1">1</option>
-              <option value="2">2</option>
-              <option value="3">3</option>
-              <option value="4">4</option>
-              <option value="5">5</option>
-              <option value="6">6</option>
-            </select> -->
           </td>
           <td>{{event.display_location == 'both' ? 'كلاهما' : event.display_location == 'internal' ? 'الصفحه الداخليه' : event.display_location == 'external' ? 'الصفحه الخارجيه' : 'No'}}</td>
           <td>{{event.type == '0' ? 'التعازي' : event.type == '1' ? 'التهاني' : 'No'}}</td>

src/app/dashboard/events/events.component.ts

@@ -149,28 +149,28 @@ export class EventsComponent implements OnInit {
     );
   };
 
-     //change page 
-     onPageChange(pagenationNumber) {
-      this.spinner.show();
-      this.currentPage = pagenationNumber;
-      this.eventsList = [];
-      //console.log(pagenationNumber);
-      //console.log(this.pageId);
-      this.eventService.getEventsList(this.pageId, pagenationNumber, this.dataTableNumber).subscribe(
-        (responce) => {
-          console.log(responce);
-          this.eventsList = responce['events'];
-          this.count = responce['count'];
-          this.perPagePagenation = responce['per_page'];
-          console.log(this.eventsList);
-          this.spinner.hide();
-        },
-        (error) => {
-          console.log(error);
-          this.spinner.hide();
-        }
-      );
-    }
+    //change page 
+    onPageChange(pagenationNumber) {
+    this.spinner.show();
+    this.currentPage = pagenationNumber;
+    this.eventsList = [];
+    //console.log(pagenationNumber);
+    //console.log(this.pageId);
+    this.eventService.getEventsList(this.pageId, pagenationNumber, this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.eventsList = responce['events'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        console.log(this.eventsList);
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+        this.spinner.hide();
+      }
+    );
+  }
 
   changeRanking(event, id) {
     const data = {

src/app/dashboard/hospitals/add-hospital/add-hospital.component.html

@@ -74,22 +74,20 @@
                           </div>
                         </div>
 
-                        <div class="col-6">
-                            <button type="submit" class="btn btn-success rightW" [disabled]="!addHospitalForm.valid || checkSaveClick">حفظ</button>
-                            <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()" style="margin: 33px 10px;">إلغاء</button>
-
+                        <div class="col-12">
+                          <button type="button" class="btn btn-danger rightW" (click)="removeTitle(i)" *ngIf="i == 0 ? false : true">حذف</button>
                         </div>
       
                     </div>
-          
-                    <button type="button" class="btn btn-danger rightW" (click)="removeTitle(i)" *ngIf="i == 0 ? false : true">حذف</button>
                   </div>
                 </div>
-      
-      
+
+                <button type="submit" class="btn btn-success rightW" [disabled]="!addHospitalForm.valid || checkSaveClick">حفظ</button>
+                <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()" style="margin: 33px 10px;">إلغاء</button>
+                
               </form>
             </div>
-          </div>
+        </div>
     </div>
   </div>
 </div>

src/app/dashboard/main-footer/footer.component.html

@@ -14,64 +14,40 @@
         <div class="col-12 col-sm-6 col-md-6 col-lg-6 hidden-xs hidden-sm">
           <div class="linksSection-w text-center d-none d-sm-none d-md-block">
             <ul class="list-unstyled">
-                <li *ngFor="let section of sectionLinks">
+                <li *ngFor="let section of authSer.footerData['links_section']">
                   <a href="{{section.link}}" target="_blank">{{section.name}}</a>
                 </li>
             </ul>
           </div>
 			
-			 <div class="col-12">
-				  <div class="copyRights">
-                <p class="rights">كافة الحقوق محفوظة لمجمع الملك فيصل الطبي بصحة الطائف 2018</p>
+          <div class="col-12">
+            <div class="copyRights">
+              <p class="rights">كافة الحقوق محفوظة لمجمع الملك فيصل الطبي بصحة الطائف 2018</p>
             </div>
-				 
-          <div class="linksSection-w text-center" style="margin-top:0 !important;">
+          
+            <div class="linksSection-w text-center" style="margin-top:0 !important;">
               <ul class="list-unstyled">
-                  <li *ngFor="let socialMedia of socialLinks">
+                  <li *ngFor="let socialMedia of authSer.footerData['socials_section']">
                     <a href="{{socialMedia.link}}"><img src="{{authSer.pathImg +socialMedia.photo}}" /></a>
                   </li>
               </ul>
             </div>
-           
-        </div>
+          </div>
 			
         </div>
 
         <div class="col-12 col-sm-6 col-md-3 col-lg-3">
-            <div class="leftFooter-w text-center">
-              <ul class="list-unstyled">
-                <li *ngFor="let award of awardsData">
-                  <img src="{{authSer.pathImg + award.photo}}" />
-                </li>
-              </ul>
-            </div>
-        </div>
-
-       
-
-        <!-- <div class="col-12 col-sm-6 col-md-3  d-none d-sm-none d-md-block">
-            
-        </div>
-
-        <div class="col-12 col-sm-6 col-md-6">
-
-         
-
-          
-        
-            
+          <div class="leftFooter-w text-center">
+            <ul class="list-unstyled">
+              <li *ngFor="let award of authSer.footerData['awards_section']">
+                <img src="{{authSer.pathImg + award.photo }}" />
+              </li>
+            </ul>
+          </div>
         </div>
 
-
-
-        <div class="col-12 col-sm-6 col-md-3">
-          
-        </div> -->
-
       </div>
 
     </div>
-
   </div>
-
 </div>

src/app/dashboard/main-footer/footer.component.ts

@@ -15,18 +15,18 @@ export class FooterComponent implements OnInit {
   constructor(private authSer: AuthServiceService) { }
 
   ngOnInit() {
-    this.authSer.onGetFooterData().subscribe(
-      (responce) => {
-        console.log(responce);
-        this.sectionLinks = responce['footer']['links_section'];//
-        this.awardsData = responce['footer']['awards_section'];//
-        this.socialLinks = responce['footer']['socials_section'];
-        console.log(this.sectionLinks);
-      },
-      (error) => {
-        console.log(error);
-      }
-    )
+    // this.authSer.onGetFooterData().subscribe(
+    //   (responce) => {
+    //     console.log(responce);
+    //     this.sectionLinks = responce['footer']['links_section'];//
+    //     this.awardsData = responce['footer']['awards_section'];//
+    //     this.socialLinks = responce['footer']['socials_section'];
+    //     console.log(this.sectionLinks);
+    //   },
+    //   (error) => {
+    //     console.log(error);
+    //   }
+    // )
   }
 
 }

src/app/dashboard/number.directive.ts

@@ -1,30 +0,0 @@
-import { Directive, HostListener, ElementRef } from '@angular/core';
-
-@Directive({
-  selector: '[appNumber]'
-})
-export class NumberDirective {
-
-
-
-  private regex: RegExp = new RegExp(/^[0-9]+(\.[0-9]*){0,1}$/g);
-
-  private specialKeys: Array<string> = [ 'Backspace', 'Tab', 'End', 'Home' ];
-
-  constructor(private el: ElementRef) {
-  }
-
-  @HostListener('keydown', [ '$event' ])
-  onKeyDown(event: KeyboardEvent) {
-      // Allow Backspace, tab, end, and home keys
-      if (this.specialKeys.indexOf(event.key) !== -1) {
-          return;
-      }
-      let current: string = this.el.nativeElement.value;
-      let next: string = current.concat(event.key);
-      if (next && !String(next).match(this.regex) || next.length > 10) {
-          event.preventDefault();
-      }
-  }
-
-}

src/app/dashboard/service-item/service-item.component.html

@@ -39,7 +39,7 @@
 
 
   <div class="headerServices" (mouseover)="mouseOvered=true" [className]="mouseOvered ? 'showHeaderServices' : 'headerServices' ">
-      <i class="fas fa-home" style="margin-left:10px;"></i>
+      <i class="fas fa-home" style="margin-left:10px; margin-right:20px"></i>
   </div>
 
   <div class="serviceSideList-w" (mouseover)="mouseOvered=true" (mouseout)="mouseOvered=false" [className]="mouseOvered ? 'showServiceSideList-w' : 'serviceSideList-w' ">

src/app/dashboard/users/form-user/form-user.component.html

@@ -69,7 +69,7 @@
             <div class="col-12 col-sm-12 col-md-4 col-lg-4">
               <div class="form-group">
                 <label for="email" style="float:right">البريد الإلكتروني <span class="spanReqired-w">*</span></label>
-                <input type="email" id="email" class="form-control" placeholder="البريد الإلكتروني" appEnglish formControlName="email" />
+                <input type="email" id="email" class="form-control" placeholder="البريد الإلكتروني" appEnglishCharacters formControlName="email" />
                 <span class="help-block" *ngIf="!signupForm.get('email').valid && signupForm.get('email').touched" style="color:red">من فضلك أدخل إيميل صحيح</span>
               </div>
             </div>
@@ -77,7 +77,7 @@
             <div class="col-12 col-sm-12 col-md-4 col-lg-4">
               <div class="form-group">
                 <label for="phone" style="float:right">رقم الجوال <span class="spanReqired-w">*</span></label>
-                <input type="text" id="phone" appNumber class="form-control" placeholder="رقم جوال يبدأ ب 05" formControlName="phone" />
+                <input type="text" id="phone" appOnlyNumber class="form-control" placeholder="رقم جوال يبدأ ب 05" formControlName="phone" />
               </div>
             </div>
 

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

@@ -62,6 +62,8 @@ export class AuthServiceService {
   cachedRequests: Array<HttpRequest<any>> = [];
   notificationLogin: boolean = true;
   parentsPage = [];
+
+  footerData=[];
   
 
   dataLoginUser = {};
@@ -168,8 +170,12 @@ export class AuthServiceService {
 
 
   //get footer list 
-  onGetFooterData() {
-    return this.http.get(this.pathApi + '/get_footers_links');
+  onGetFooterData(typePageFooter:string) {
+    if(typePageFooter == 'external') {
+      return this.http.get(this.pathApi + '/get_footers_links/1');
+    } else if(typePageFooter == 'internal' || 'dashboard') {
+      return this.http.get(this.pathApi + '/get_footers_links');
+    }
   }
 
    writeHijri(date, lang, type) {

src/app/shared/external-page.service.ts

@@ -9,14 +9,33 @@ export class ExternalPageService {
   constructor(private http: HttpClient, 
     private authSer: AuthServiceService) { }
 
+    headerMenus = []; //header data 
+
+
 
   //get header data 
   getHeader(){
-    return this.http.get(this.authSer.pathApi + '/main_menu_list');
+    return this.http.get(this.authSer.pathApi + '/main_menu_list/1');
   }
 
   //get content data 
   getContentData() {
     return this.http.get(this.authSer.pathApi + '/external_page/1');
   }
+  
+  //get hospital or mangament data 
+  getHospitalMangamentsData(typeRequest:string) {
+    if(typeRequest == 'hospital') {
+      return this.http.get(this.authSer.pathApi + '/hospitals_centers_list/1'); 
+    } else if(typeRequest == 'managements') {
+      return this.http.get(this.authSer.pathApi + '/managements_list/1');
+    }
+  }
+
+  //get contact us data 
+  getContactUs() {
+    return this.http.get(this.authSer.pathApi + '/get_contact_us/1');
+  }
+
+  
 }

src/app/shared/shared.module.ts

@@ -0,0 +1,22 @@
+import { EnglishCharactersDirective } from './english-characters.directive';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { OnlyNumberDirective } from './only-number.directive';
+//import { CeiboShare } from 'ng2-social-share';
+
+
+@NgModule({
+  declarations: [
+    OnlyNumberDirective,
+    EnglishCharactersDirective,
+    //CeiboShare,
+  ],
+  exports: [
+    CommonModule,
+    OnlyNumberDirective,
+    EnglishCharactersDirective
+  ]
+})
+
+export class SharedModule {
+}

src/index.html

@@ -12,9 +12,6 @@
   <!-- <link href="https://fonts.googleapis.com/css?family=Dosis|Niramit" rel="stylesheet"> -->
   <!-- <link href="https://fonts.googleapis.com/css?family=Cairo" rel="stylesheet"> -->
   <link href="https://fonts.googleapis.com/css?family=Cairo" rel="stylesheet">
-  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
-  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
-  
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
 </head>
 <body>
@@ -27,7 +24,6 @@
           integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
           integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> -->
-          <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
-          <script src="//unpkg.com/slick-carousel@1.8.1/slick/slick.js"></script>
+
 </body>
 </html>

src/styles.css

@@ -402,6 +402,15 @@ table .btn{
     background-color: #007A71 !important;
   }
 
+  .activeExternalLink {
+    color: #fff !important;
+    background-color: #007A71 !important;
+  }
+
+  .activeExternalLink a {
+    color: #fff !important;
+  }
+
   .spanReqired-w {
     color: red;
   }
@@ -464,11 +473,7 @@ width: 100%;
     background-color: #fff;
     border: 1px solid #f7f7f7;
   }
-  .testBody-w p {
-    text-align: right;
-    font-size: 15px;
-    padding: 5px 10px;
-  }
+  
 
   .testBodyEn-w p {
     text-align: left;
@@ -917,6 +922,27 @@ height: 7px !important;
     background-color: transparent;
 }
 
+.hospitalContent-w .card-header {
+  background-color: #967853 !important;
+  border: 0px !important;
+  padding: 0;
+  cursor: pointer;
+}
+
+.hospitalContent-w .card-header h5 button {
+  cursor: pointer;
+}
+
+.hospitalContent-w .card-header h4 {
+  color: #fff;
+  font-size: 15px;
+}
+
+.hospitalContent-w .card-body {
+  padding: 0;
+}
+
+
 
 
 
@@ -934,6 +960,15 @@ height: 7px !important;
     color: #fff !important;
   }
 
+  .homeExternalActive {
+    background-color: #007A71 !important;
+    color: #fff !important;
+  }
+
+  .homeExternalActive a {
+    color: #fff !important;
+  }
+
 }
 /* ------pink-----*/
 @media screen and (min-width: 992px) and (max-width: 1200px) {
@@ -946,6 +981,17 @@ height: 7px !important;
     background-color: #a2835d !important;
     color: #fff !important;
   }
+
+  .homeExternalActive {
+    background-color: #007A71 !important;
+    color: #fff !important;
+  }
+
+
+  .homeExternalActive a {
+    color: #fff !important;
+  }
+
 	
 }
 /* ------yellow-----*/
@@ -1009,6 +1055,16 @@ height: 7px !important;
     background-color: #a2835d !important;
     color: #fff !important;
   }
+
+  .homeExternalActive {
+    background-color: #007A71 !important;
+    color: #fff !important;
+  }
+
+
+  .homeExternalActive a {
+    color: #fff !important;
+  }
   
   
 }