finish touch

angular.json

@@ -25,19 +25,17 @@
             "styles": [
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
               "node_modules/font-awesome/css/font-awesome.css",
-              "node_modules/owl.carousel/dist/assets/owl.carousel.css",
-              "node_modules/owl.carousel/dist/assets/owl.theme.default.css",
               "node_modules/ngx-toastr/toastr.css",
+              "node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.carousel.min.css",
+              "node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.theme.default.min.css",
               "node_modules/animate.css/animate.min.css",
-              "node_modules/owl.carousel/dist/assets/owl.carousel.min.css",
-              "node_modules/owl.carousel/dist/assets/owl.theme.default.min.css",
               "src/styles.css"
             ],
             "scripts": [
               "node_modules/jquery/dist/jquery.min.js",
               "node_modules/popper.js/dist/umd/popper.min.js",
               "node_modules/bootstrap/dist/js/bootstrap.js",
-              "node_modules/owl.carousel/dist/owl.carousel.min.js"
+              "node_modules/slick-carousel/slick/slick.min.js"
             ]
           },
           "configurations": {

package-lock.json

@@ -7426,6 +7426,15 @@
         }
       }
     },
+    "ng2-owl-carousel2": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/ng2-owl-carousel2/-/ng2-owl-carousel2-2.0.3.tgz",
+      "integrity": "sha512-IZvQGYTErTa7krrS5bfQyccBAZvy0Uzpn3HGJGtmjdTVC64RxY9XTxwaVUsKirSW2iKKfyRsQBxXOLsMu//XIw==",
+      "requires": {
+        "jquery": ">= 2.2.0",
+        "owl.carousel": "^2.2.0"
+      }
+    },
     "ng2-social-share": {
       "version": "0.0.10",
       "resolved": "https://registry.npmjs.org/ng2-social-share/-/ng2-social-share-0.0.10.tgz",
@@ -7479,9 +7488,9 @@
       }
     },
     "ngx-owl-carousel-o": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/ngx-owl-carousel-o/-/ngx-owl-carousel-o-1.0.11.tgz",
-      "integrity": "sha512-pRxDTln1Lo4tIfJh+TD60JAbFd6Bxu+47NKg6KLaxtVaFMcWXbuN9flVK20doyz/tARMqt3X38BhXNI7bwevBA==",
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/ngx-owl-carousel-o/-/ngx-owl-carousel-o-0.1.1.tgz",
+      "integrity": "sha512-bk8ujlIwmW/bAKZfY6F8tL6V4524vSb9koUv+7MqfTr+2zolJX/Mpd3Ajp7eZrBUroaD/xp2pc1WvP7jH1DFxw==",
       "requires": {
         "tslib": "^1.9.0"
       }

package.json

@@ -61,6 +61,7 @@
     "ng2-carousel-angular5": "^1.0.5",
     "ng2-carouselamos": "^3.2.0",
     "ng2-opd-popup": "^1.1.21",
+    "ng2-owl-carousel2": "^2.0.3",
     "ng2-social-share": "0.0.10",
     "ng2-toastr": "^4.1.2",
     "ng6-social-button": "^1.0.5",
@@ -68,7 +69,7 @@
     "ngx-modialog": "^5.0.1",
     "ngx-moment": "^3.3.0",
     "ngx-owl-carousel": "^2.0.7",
-    "ngx-owl-carousel-o": "^1.0.11",
+    "ngx-owl-carousel-o": "^0.1.1",
     "ngx-pagination": "^3.2.1",
     "ngx-quill": "^3.0.0",
     "ngx-slick": "^0.2.1",

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

@@ -72,5 +72,85 @@
 }
 
 
+/* .cards-section {
+    background-color: white;
+    padding: 100px 10px;
+    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
+  }
+  
+  .cards {
+    padding: 0px 30px;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+  
+  .card {
+    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
+    max-width: 200px;
+    height: 280px;
+    overflow: hidden;
+    padding: 10px;
+    margin: 10px;
+  }
+  
+  .card h5 {
+    text-align: center;
+    margin-top: 20px;
+    font-size: 13pt;
+  }
+  
+  .card .img-container {
+    overflow: hidden;
+    height: 150px;
+    width: 100%;
+  }
+  
+  .card .card-img {
+    width: 100%;
+    height: auto;
+    vertical-align: middle;
+  }
+  
+  .card .text {
+    opacity: 0.6;
+    white-space: wrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-height: 55px;
+    text-align: justify;
+    font-size: small;
+  }
+
+  
+  .section-title {
+    margin: 50px 0px;
+    color: var(--main-color);
+    font-size: 15pt;
+    font-weight: bold;
+    text-transform: capitalize;
+    text-align: center;
+  }
+  
+  .client-cards {
+    background-color: white;
+    padding: 10px;
+    margin: 20px 0px;
+    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
+  }
+  
+  .client-cards .img-container {
+    max-height: 100px;
+    overflow: hidden;
+  }
+  
+  .client-card-img {
+    width: 100%;
+    height: auto;
+  } */
+
+
+  
+
 
 

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

@@ -1,4 +1,4 @@
-<div class="hospitalContent-w">
+ <div class="hospitalContent-w">
     <div class="container">
       <div class="row">
           <div class="containerContent-w">
@@ -78,4 +78,15 @@
       </div>
     </div>
   </div>
-  
+
+ 
+
+ <!-- <div class="container">
+        <div>Some tags before</div>
+        <owl-carousel-o [options]="customOptions">
+        <ng-template carouselSlide>Slide 1</ng-template>  
+        <ng-template carouselSlide>Slide 2</ng-template>  
+        <ng-template carouselSlide>Slide 3</ng-template>  
+      </owl-carousel-o>
+      <div>Some tags after</div>
+ </div> -->

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

@@ -12,8 +12,43 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ExternalHospitalComponent implements OnInit {
 
+  // customOptions: any = {
+  //   loop: true,
+  //   mouseDrag: false,
+  //   touchDrag: false,
+  //   pullDrag: false,
+  //   dots: false,
+  //   navSpeed: 700,
+  //   navText: [ '<i class="fa-chevron-left"></i>', '<i class="fa-chevron-right></i>"' ],
+  //   responsive: {
+  //     0: {
+  //       items: 1
+  //     },
+  //     400: {
+  //       items: 2
+  //     },
+  //     740: {
+  //       items: 3
+  //     },
+  //     940: {
+  //       items: 4
+  //     }
+  //   },
+  //   nav: true
+  // }
+
+  // slidesStore=[];
+
+ 
+
+  number: number = 1;
+  numberWidth:number = 6;
+
+
   typePage: string = '';
+  
   data = [];
+
   detailsField = {
     title_en: '',
     title: '',
@@ -21,6 +56,8 @@ export class ExternalHospitalComponent implements OnInit {
     description_en: '',
   }
 
+
+
   constructor(private route: ActivatedRoute,
     private authSer: AuthServiceService, 
     private spinner: NgxSpinnerService,
@@ -37,7 +74,13 @@ export class ExternalHospitalComponent implements OnInit {
     //     this.typePage = params['type_page'];
     //   }
     // );
-
+   
+    // this.slidesStore = [
+    //   {src: '../../../assets/image/avatar.png', alt: 'title', title: 'title' , id: 1},
+    //   {src: '../../../assets/image/avatar.png', alt: 'title', title: 'title', id: 2},
+    //   {src: '../../../assets/image/avatar.png', alt: 'title', title: 'title', id: 3},
+    //   {src: '../../../assets/image/avatar.png', alt: 'title', title: 'title', id: 4}
+    // ];
 
     //get hospital or managaments data 
 
@@ -84,5 +127,9 @@ export class ExternalHospitalComponent implements OnInit {
     }
     console.log(this.detailsField);
   }
+
+  
   
 }
+
+

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

@@ -642,7 +642,8 @@ agm-map {
     animation: spin 2s linear infinite;
     margin: 100px auto;
   }
-  
+
+
   /* Safari */
   @-webkit-keyframes spin {
     0% { -webkit-transform: rotate(0deg); }

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

@@ -45,7 +45,7 @@
                   <div class="row">
                     <div class="col-6 col-sm-6 col-md-3 col-lg-3" *ngFor="let service of services; let i = index">
                       <div class="animated" style="position:relative">
-                        <a (click)="onGetService(service)">
+                        <a (click)="onGetService(service)" style="cursor:pointer">
                             <div class="item text-center">
                               <img src="{{authSer.pathImg + service.photo}}" />
                               <p>{{service.name}}</p>
@@ -221,124 +221,123 @@
   <div class="externalPageContentt-w">
       <div class="container">
         <div class="row">
-    
-          <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_en}}</h5>
-                            <p [innerHtml] = "report.description_en"></p>
-                            <button class="more hvr-grow" (click)="goPageNew(report)" style="left:10px;">Read More</button>
-                            <button class="moreNews hvr-grow" (click)="moreNewsPage()">More From News</button>
-                        </div>
+          <div class="contentPage-w">
+            <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_en}}</h5>
+                                <p [innerHtml] = "report.description_en"></p>
+                                <button class="more hvr-grow" (click)="goPageNew(report)" style="left:10px;">Read More</button>
+                                <button class="moreNews hvr-grow" (click)="moreNewsPage()">More From News</button>
+                            </div>
+                          </div>
                       </div>
                   </div>
+                </div>
               </div>
-            </div>
-          </div>
-    
-          <div class="col-12">
-            <div class="eventPartEn-w">
-                <div id="demo1" class="carousel slide" data-ride="carousel">
-                    <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"  (click)="oneventTable()">More </button>
-                            </div>   
+        
+              <div class="col-12">
+                <div class="eventPartEn-w">
+                    <div id="demo1" class="carousel slide" data-ride="carousel">
+                        <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"  (click)="oneventTable()">More </button>
+                                </div>   
+                            </div>
                         </div>
+                    </div> 
+                </div>
+              </div>
+        
+              <div class="col-12">
+                <div class="externalServices-w">
+                  <div class="row">
+                    <div class="col-6 col-sm-6 col-md-3 col-lg-3" *ngFor="let service of services; let i = index">
+                      <a href="{{service.link}}">
+                        <div class="item text-center">
+                          <img src="{{authSer.pathImg + service.photo}}" />
+                          <p>{{service.name_en}}</p>
+                        </div>
+                      </a>
                     </div>
-                </div> 
-            </div>
-          </div>
-    
-          <div class="col-12">
-            <div class="externalServices-w">
-              <div class="row">
-                <div class="col-6 col-sm-6 col-md-3 col-lg-3" *ngFor="let service of services; let i = index">
-                  <a href="{{service.link}}">
-                    <div class="item text-center">
-                      <img src="{{authSer.pathImg + service.photo}}" />
-                      <p>{{service.name_en}}</p>
-                    </div>
-                  </a>
+                  </div>
                 </div>
               </div>
-            </div>
-          </div>
-
-
-          <div class="col-12" style="direction:ltr">
-              <div class="lectureService-w">
-                <div class="row">
-                  <div class="col-12 col-sm-12 col-md-4 col-lg-4 hidden-xs">
-                    <div class="advertisimentServices-w text-center">
-                      <h1>Advertising services</h1>
-                       <div class="body">
-                        <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>
-                          <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 class="col-12" style="direction:ltr">
+            <div class="lectureService-w">
+              <div class="row">
+                <div class="col-12 col-sm-12 col-md-4 col-lg-4 hidden-xs">
+                  <div class="advertisimentServices-w text-center">
+                    <h1>Advertising services</h1>
+                      <div class="body">
+                      <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>
+                        <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 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>
-                          <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>
-
+                        <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 class="col-12 col-sm-12 col-md-8 col-lg-8">
-                    <div class="visitingTime-w">
-                      <h1>Dates of the visit</h1>
-                      <div class="row">
-                        <div class="col-12 col-sm-12 col-md-6 col-lg-6">
-                          <div class="monthRecord-w text-center">
-                            <h1>Hypnosis Sections</h1>
-                            <div class="body">
-                              <ul class="list-unstyled">
-                                <li><img src="../../../assets/image/Path 82.png" /><span style="color:green">{{hypnosisSections.open_time}}</span></li>
-                                <li><img src="../../../assets/image/Path 82.png" /><span style="color:red">{{hypnosisSections.close_time}}</span></li>
-                              </ul>
-                            </div>
+                </div>
+                <div class="col-12 col-sm-12 col-md-8 col-lg-8">
+                  <div class="visitingTime-w">
+                    <h1>Dates of the visit</h1>
+                    <div class="row">
+                      <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+                        <div class="monthRecord-w text-center">
+                          <h1>Hypnosis Sections</h1>
+                          <div class="body">
+                            <ul class="list-unstyled">
+                              <li><img src="../../../assets/image/Path 82.png" /><span style="color:green">{{hypnosisSections.open_time}}</span></li>
+                              <li><img src="../../../assets/image/Path 82.png" /><span style="color:red">{{hypnosisSections.close_time}}</span></li>
+                            </ul>
                           </div>
                         </div>
-                        <div class="col-12 col-sm-12 col-md-6 col-lg-6">
-                          <div class="achiev text-center">
-                            <h1>Intensive care</h1>
-                            <div class="body">
-                              <ul class="list-unstyled">
-                                <li><img src="../../../assets/image/Path 82.png" /><span style="color:green">{{intensiveCare.open_time}}</span></li>
-                                <li><img src="../../../assets/image/Path 82.png" /><span style="color:red">{{intensiveCare.close_time}}</span></li>
-                              </ul>
-                            </div>
+                      </div>
+                      <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+                        <div class="achiev text-center">
+                          <h1>Intensive care</h1>
+                          <div class="body">
+                            <ul class="list-unstyled">
+                              <li><img src="../../../assets/image/Path 82.png" /><span style="color:green">{{intensiveCare.open_time}}</span></li>
+                              <li><img src="../../../assets/image/Path 82.png" /><span style="color:red">{{intensiveCare.close_time}}</span></li>
+                            </ul>
                           </div>
                         </div>
                       </div>
@@ -347,73 +346,75 @@
                 </div>
               </div>
             </div>
-
-
-            <div class="col-12">
-                <div class="recordsContent-w">
-                  <div class="row">
-                      <div class="col-12 col-sm-12 col-md-5">
-                        <div class="datePicker-w">
-                          <h1>Events Calendar</h1>
-                          <div class="body">
-                             <app-external-events></app-external-events>
-                          </div>
+          </div>
+      
+      
+          <div class="col-12">
+              <div class="recordsContent-w">
+                <div class="row">
+                    <div class="col-12 col-sm-12 col-md-5">
+                      <div class="datePicker-w">
+                        <h1>Events Calendar</h1>
+                        <div class="body">
+                            <app-external-events></app-external-events>
                         </div>
                       </div>
-                      <div class="col-12 col-sm-12 col-md-7 col-lg-7">
-                        <h1>General Statistics and Achievements</h1>
-                        <div class="row">
-                          <div class="col-12 col-sm-12 col-md-6">
-                            <div class="records">
-                              <span class="rightArrow-w" (click)="nextMonth()"><i class="fas fa-angle-right"></i></span>
-                              <h1> Stqtistics Month {{recordsOfMonth.statistics_month_en}}</h1>
-                              <span class="leftArrow-w" (click)="prevMonth()"><i class="fas fa-angle-left"></i></span>
-                              <div class="body">
-                                <div class="spinnerContainer-w" *ngIf="showSmallSpinner">
-                                  <div class="loader">
+                    </div>
+                    <div class="col-12 col-sm-12 col-md-7 col-lg-7">
+                      <h1>General Statistics and Achievements</h1>
+                      <div class="row">
+                        <div class="col-12 col-sm-12 col-md-6">
+                          <div class="records">
+                            <span class="rightArrow-w" (click)="nextMonth()"><i class="fas fa-angle-right"></i></span>
+                            <h1> Stqtistics Month {{recordsOfMonth.statistics_month_en}}</h1>
+                            <span class="leftArrow-w" (click)="prevMonth()"><i class="fas fa-angle-left"></i></span>
+                            <div class="body">
+                              <div class="spinnerContainer-w" *ngIf="showSmallSpinner">
+                                <div class="loader">
 
-                                  </div>
                                 </div>
-                                <ul class="list-unstyled" style="direction:ltr">
-                                  <li *ngIf="checkStatisticShow">No Statistics To Show !</li>
-                                  <li *ngFor="let static of recordsOfMonth['statistics_values']; let i = index"> {{static.name_en}} <span>{{static.value}}</span></li>
-                                </ul>
                               </div>
+                              <ul class="list-unstyled" style="direction:ltr">
+                                <li *ngIf="checkStatisticShow">No Statistics To Show !</li>
+                                <li *ngFor="let static of recordsOfMonth['statistics_values']; let i = index"> {{static.name_en}} <span>{{static.value}}</span></li>
+                              </ul>
                             </div>
                           </div>
-                          <div class="col-12 col-sm-12 col-md-6">
-                            <div class="medical">
-                              <h1>Medical achievement</h1>
-                              <div class="body">
-                                <div id="demo2" class="carousel slide" data-ride="carousel">
-                                  <ul class="carousel-indicators">
-                                      <li *ngFor="let achievement of achievements; let i = index" data-target="#demo2" [attr.data-slide-to]="i" [ngClass]="i == 0 ? 'active' : ''"></li>
-                                  </ul>
-                                  <div class="carousel-inner">
-                                      <div class="carousel-item" *ngFor="let achievement of achievements; let i = index" [ngClass]="i == 0 ? 'active' : ''">
-                                          <div class="carousel-caption">
-                                              <p [innerHtml]="achievement.description_en"></p>
-                                          </div>   
-                                      </div>
-                                  </div>
-                                </div> 
-                              </div>
+                        </div>
+                        <div class="col-12 col-sm-12 col-md-6">
+                          <div class="medical">
+                            <h1>Medical achievement</h1>
+                            <div class="body">
+                              <div id="demo2" class="carousel slide" data-ride="carousel">
+                                <ul class="carousel-indicators">
+                                    <li *ngFor="let achievement of achievements; let i = index" data-target="#demo2" [attr.data-slide-to]="i" [ngClass]="i == 0 ? 'active' : ''"></li>
+                                </ul>
+                                <div class="carousel-inner">
+                                    <div class="carousel-item" *ngFor="let achievement of achievements; let i = index" [ngClass]="i == 0 ? 'active' : ''">
+                                        <div class="carousel-caption">
+                                            <p [innerHtml]="achievement.description_en"></p>
+                                        </div>   
+                                    </div>
+                                </div>
+                              </div> 
                             </div>
                           </div>
                         </div>
                       </div>
                     </div>
-                </div>
+                  </div>
               </div>
-
-              <div class="col-12">
-                <div class="maps">
-                  <h1>Contact Us</h1>
-                    <agm-map [latitude]="lat" [longitude]="lng">
-                      <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
-                    </agm-map>
-                </div>
+            </div>
+      
+            <div class="col-12">
+              <div class="maps">
+                <h1>Contact Us</h1>
+                  <agm-map [latitude]="lat" [longitude]="lng">
+                    <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
+                  </agm-map>
               </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>

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

@@ -8,11 +8,13 @@ import * as $ from 'jquery';
 import { NgxSpinnerService } from 'ngx-spinner';
 import { HttpClient } from '@angular/common/http';
 import { ToastrService } from 'ngx-toastr';
+import { NgbCarouselConfig } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
   selector: 'app-external-page-content',
   templateUrl: './external-page-content.component.html',
-  styleUrls: ['./external-page-content.component.css']
+  styleUrls: ['./external-page-content.component.css'],
+  providers: [NgbCarouselConfig]
 })
 export class ExternalPageContentComponent implements OnInit, OnDestroy {
 
@@ -21,9 +23,11 @@ export class ExternalPageContentComponent implements OnInit, OnDestroy {
     private router: Router,
     private http: HttpClient,
     private route: ActivatedRoute,
+    config: NgbCarouselConfig,
     private toastr: ToastrService,
-    private authSer:AuthServiceService) { 
-      this.spinner.show();
+    private authSer: AuthServiceService) {
+    this.spinner.show();
+    
     }
 
   reports = [];
@@ -46,10 +50,9 @@ export class ExternalPageContentComponent implements OnInit, OnDestroy {
   contentSubscription:Subscription;
 
   firstAdvertisiment = [];
-  mySlideOptions={items: 3, dots: false, nav: true};
-  myCarouselOptions={items: 3, dots: true, nav: true};
 
   
+ 
 
   ngOnInit() {
 
@@ -86,11 +89,16 @@ export class ExternalPageContentComponent implements OnInit, OnDestroy {
         this.hypnosisSections = responce['data'].visiting_times_hs;
         this.intensiveCare = responce['data'].visiting_times_ic;
         this.recordsOfMonth = responce['data']['statistics'];
+        if(responce['data']['statistics'].statistics_values.length > 0) {
+          this.checkStatisticShow = false;
+        } else {
+          this.checkStatisticShow = true;
+        }
+        
         this.achievements = responce['data'].external_achievements;
         this.initialMonthNumber = responce['data']['statistics'].month_id;
-        this.lat = responce['data']['reach_map'].latitude;
-        this.lng = responce['data']['reach_map'].longitude;
-        console.log('fiiiiiiiiiiiiiiiiiiiii' , this.firstAdvertisiment);
+        // this.lat = responce['data']['reach_map'].latitude;
+        // this.lng = responce['data']['reach_map'].longitude;
         this.spinner.hide();
       },
       (error) => {
@@ -221,3 +229,4 @@ export class ExternalPageContentComponent implements OnInit, OnDestroy {
 
 
 }
+

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

@@ -528,9 +528,9 @@ input,button {
   .menuHeader-w li img,
   .menuHeaderEn-w li img{
       width: 38px;
-      margin: 0 5px;
+      margin: 0 10px;
       float: right;
-      margin-top: 9px;
+      margin-top: -4px;
   }
 
   .menuHeaderEn-w li img {

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

@@ -104,9 +104,8 @@
                                 </li>
 
                                 <li class="nav-item" *ngFor="let menu of externalService.headerMenus" style="position: relative;" [ngClass]="menu.active == 0 ? '' : 'activeExternalLink' ">
-                                    <img src="{{authSer.pathImg + menu.photo}}" />
                                     <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}}
+                                        {{menu.name}} <img src="{{authSer.pathImg + menu.photo}}" />
                                     </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}}</a>

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

@@ -1,3 +1,4 @@
+import { RouterModule } from '@angular/router';
 import { EventDetailsComponent } from './event-details/event-details.component';
 import { ExternalManagamentsComponent } from './external-managaments/external-managaments.component';
 import { SharedModule } from './../shared/shared.module';
@@ -10,7 +11,6 @@ import { FormsModule } from '@angular/forms';
 import { ExternalPageHeaderComponent } from './external-page-header/external-page-header.component';
 import { ExternalPageContentComponent } from './external-page-content/external-page-content.component';
 import { ExternalPageComponent } from './external-page/external-page.component';
-import { SlickCarouselModule } from 'ngx-slick-carousel';
 import { AgmCoreModule } from '@agm/core';
 import { OwlModule } from 'ngx-owl-carousel';
 import { CalendarModule, DateAdapter } from 'angular-calendar';
@@ -23,8 +23,10 @@ import { MoreNewsComponent } from './more-news/more-news.component';
 import { InernalServicePageComponent } from './inernal-service-page/inernal-service-page.component';
 import { ExternalContactUsComponent } from './external-contact-us/external-contact-us.component';
 import { ExternalPolicyComponent } from './external-policy/external-policy.component';
+import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
+import { CarouselModule } from 'ngx-owl-carousel-o';
 
-
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 @NgModule({
     declarations: [ExternalPageHeaderComponent,
@@ -44,10 +46,13 @@ import { ExternalPolicyComponent } from './external-policy/external-policy.compo
     imports: [
         CommonModule,
         FormsModule,
+        BrowserAnimationsModule,
+        RouterModule,
         OwlModule,
+        CarouselModule,
         NgxPaginationModule,
-        SlickCarouselModule,
         SharedModule,
+        NgbModule.forRoot(),
         AgmCoreModule.forRoot({
             apiKey: 'AIzaSyAxlgymaua-8BszEryfQIOr9PLKrtEqU2I'
           }),

src/app/dashboard/dashboard-content.ts

@@ -12,7 +12,7 @@ export class DashboardContent implements OnInit {
   constructor(private authSer: AuthServiceService) { }
   myInnerHeight = window.innerHeight;
   ngOnInit() {
-    
+    this.authSer.arabicTemplate = true; //to make footer arabic all time 
   }
 
 

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

@@ -2,51 +2,95 @@
   <div class="overlayFooter-w">
 
     <div class="container">
-
-      <div class="row">
-
-        <div class="col-12 col-sm-6 col-md-3 col-lg-3">
-          <div class="rightFooter-w text-center">
-            <img src="../../assets/image/logo11.png" alt="logo" title="logo" />
-          </div> 
-        </div>
-
-        <div class="col-12 col-sm-6 col-md-6 col-lg-6">
-          <div class="linksSection-w text-center d-none d-sm-none d-md-block">
-            <ul class="list-unstyled">
-                <li *ngFor="let section of authSer.footerData['links_section']">
-                  <a (click)="goPolicy(section)" target="_blank" style="cursor: pointer;">{{section.name}}</a>
-                </li>
-            </ul>
-          </div>
-			
-          <div class="col-12">
-            <div class="copyRights">
-              <p class="rights">كافة الحقوق محفوظة لمجمع الملك فيصل الطبي بصحة الطائف 2018</p>
+      <ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="englishTemplate">
+          <div class="row">
+            <div class="col-12 col-sm-6 col-md-3 col-lg-3">
+              <div class="rightFooter-w text-center">
+                <img src="../../assets/image/logo11.png" alt="logo" title="logo" />
+              </div> 
             </div>
+    
+            <div class="col-12 col-sm-6 col-md-6 col-lg-6">
+              <div class="linksSection-w text-center d-none d-sm-none d-md-block">
+                <ul class="list-unstyled">
+                    <li *ngFor="let section of authSer.footerData['links_section']">
+                      <a (click)="goPolicy(section)" target="_blank" style="cursor: pointer;">{{section.name}}</a>
+                    </li>
+                </ul>
+              </div>
           
-            <div class="linksSection-w text-center" style="margin-top:0 !important;">
-              <ul class="list-unstyled">
-                  <li *ngFor="let socialMedia of authSer.footerData['socials_section']">
-                    <a href="{{socialMedia.link}}"><img src="{{authSer.pathImg +socialMedia.photo}}" /></a>
+              <div class="col-12">
+                <div class="copyRights">
+                  <p class="rights">كافة الحقوق محفوظة لمجمع الملك فيصل الطبي بصحة الطائف 2018</p>
+                </div>
+              
+                <div class="linksSection-w text-center" style="margin-top:0 !important;">
+                  <ul class="list-unstyled">
+                      <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 class="col-12 col-sm-6 col-md-3 col-lg-3 hidden-xs hidden-sm">
+              <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>
+                </ul>
+              </div>
             </div>
           </div>
-			
-        </div>
+      </ng-template>
 
-        <div class="col-12 col-sm-6 col-md-3 col-lg-3 hidden-xs hidden-sm">
-          <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>
+      <ng-template #englishTemplate>
+          <div class="row">
+            <div class="col-12 col-sm-6 col-md-3 col-lg-3">
+              <div class="rightFooter-w text-center">
+                <img src="../../assets/image/logo11.png" alt="logo" title="logo" />
+              </div> 
+            </div>
+    
+            <div class="col-12 col-sm-6 col-md-6 col-lg-6">
+              <div class="linksSection-w text-center d-none d-sm-none d-md-block">
+                <ul class="list-unstyled">
+                  <li *ngFor="let section of authSer.footerData['links_section']">
+                    <a (click)="goPolicy(section)" target="_blank" style="cursor: pointer;">{{section.name_en}}</a>
+                  </li>
+                </ul>
+              </div>
+          
+              <div class="col-12">
+                <div class="copyRights">
+                  <p class="rights">Copyright © King Faisal Medical Complex. All Rights Reserved</p>
+                </div>
+              
+                <div class="linksSection-w text-center" style="margin-top:0 !important;">
+                  <ul class="list-unstyled">
+                    <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 class="col-12 col-sm-6 col-md-3 col-lg-3 hidden-xs hidden-sm">
+              <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>
-        </div>
-
-      </div>
+      </ng-template>
 
     </div>
   </div>

src/app/login/login.component.ts

@@ -1,3 +1,4 @@
+import { Location } from '@angular/common';
 import { Router, ActivatedRoute } from '@angular/router';
 import { AuthServiceService } from './../shared/auth-service.service';
 import { Component, OnInit, ViewChild } from '@angular/core';
@@ -17,6 +18,7 @@ export class LoginComponent implements OnInit {
   constructor(private authSer: AuthServiceService, 
     private router: Router, 
     private route: ActivatedRoute, 
+    private location: Location,
     private spinner: NgxSpinnerService,
     private toastr: ToastrService) { }
 
@@ -46,7 +48,8 @@ export class LoginComponent implements OnInit {
         console.log(id);
         this.authSer.setDataUser(responce);
         this.loginFormData.reset();
-        this.router.navigate(['/services/' + id]);
+        //this.router.navigate(['/services/' + id]);
+        this.location.back();
       },
       (error) => {
         console.log(error);

src/app/servicesItems/services.component.ts

@@ -29,6 +29,7 @@ export class ServicesComponent implements OnInit {
     ngOnInit() {
       this.spinner.show();//spinner
       this.authService.checkExternalFooter = false;
+      this.authService.arabicTemplate = true; //to make footer is arabic all time
       //show / hide notification search in header
       this.authService.notificationLogin = true;
       this.authService.showSearchHeader = false;

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

@@ -62,8 +62,10 @@ export class AuthServiceService {
   cachedRequests: Array<HttpRequest<any>> = [];
   notificationLogin: boolean = true;
   checkExternalFooter: boolean = false; 
-  parentsPage = [];
+  
 
+
+  parentsPage = [];
   footerData=[];
   
 

src/index.html

@@ -13,7 +13,7 @@
   <!-- <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" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
-  <link href="./assets/css/hover-min.css" />
+
 </head>
 <body>
    

src/styles.css

@@ -1079,6 +1079,8 @@ height: 7px !important;
 
 
 
+
+
 /* ------black-----*/
 @media screen and (min-width: 1200px) {
 	body{border-top: 1px solid black;}
@@ -1644,3 +1646,8 @@ height: 7px !important;
 @media screen and (max-width: 480px) {}
 
   /* Eng Magdy Style */
+
+
+
+
+