external page

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

@@ -138,6 +138,11 @@ input,button {
     top: 0;
     cursor: pointer;
     font-weight: bold;
+    transition: all 0.5s;
+}
+
+.eventPart-w .moreEvent-w:hover {
+    color: #35e2d6;
 }
 
 .eventPartEn-w .moreEventEn-w {
@@ -154,19 +159,27 @@ input,button {
 
 .externalServices-w {
     width: 100%;
-    padding: 20px 0;
+    padding: 20px 30px;
 }
 
 .externalServices-w a {
     text-decoration: none;
+    transition: all 0.5s;
 }
 
+
+
 .externalServices-w .item {
     width: 100%;
     height: 150px;
     /* radial-gradient(0.5turn,#efeeee, #1db5ab, #1ba097); */
-    background: radial-gradient(farthest-corner at 129px 53px,     #c4d8d7 0%, #00a99d 100%);
+    background: radial-gradient(farthest-corner at 129px 53px,      #69ccc7 0%, #0e756e 100%);
     margin: 10px 0;
+    transition: all 0.5s;
+}
+
+.externalServices-w .item:hover {
+    background: radial-gradient(farthest-corner at 129px 53px, #c4d8d7 0%, #00a99d 100%);
 }
 
 .externalServices-w .item img {
@@ -242,7 +255,7 @@ input,button {
 
 .lectureService-w .visitingTime-w h1 {
     font-size: 18px;
-    background-color: #1ba097;
+    background-color: #00A99D;
     color: #fff;
     padding: 12px 0;
     margin: 0;
@@ -257,7 +270,7 @@ input,button {
 }
 
 .lectureService-w .visitingTime-w .monthRecord-w .body ul {
-    padding: 0 15px;
+    padding: 30px 15px;
 }
 
 .lectureService-w .visitingTime-w .monthRecord-w .body ul li {
@@ -269,17 +282,17 @@ input,button {
 .lectureService-w .visitingTime-w .monthRecord-w .body ul li span {
     position: absolute;
     bottom: 0;
-    left: -10px;
-    top: 53px;
+    left: -17px;
+    top: 35px;
     font-size: 15px;
 }
 
 .lectureService-w .visitingTime-w .monthRecord-w .body ul li img {
-    width: 80px;
+    width: 60px;
 }
 
 .lectureService-w .visitingTime-w .achiev .body ul {
-    padding: 0 15px;
+    padding: 30px 15px;
 }
 
 .lectureService-w .visitingTime-w .achiev .body ul li {
@@ -291,13 +304,13 @@ input,button {
 .lectureService-w .visitingTime-w .achiev .body ul li span {
     position: absolute;
     bottom: 0;
-    left: -10px;
-    top: 53px;
+    left: -17px;
+    top: 35px;
     font-size: 15px;
 }
 
 .lectureService-w .visitingTime-w .achiev .body ul li img {
-    width: 80px;
+    width: 60px;
 }
 
 .lectureService-w .visitingTime-w .achiev .body{
@@ -466,6 +479,23 @@ input,button {
     text-align: center;
 }
 
+.items {
+    max-width: 100px;
+    height: 50px;
+}
+
+
+/* .thumbnail-image {
+    width: 80px;
+    height: 80px;
+    margin: 0 5px;
+}
+
+.thumbnail-image img {
+    width: 100%;
+    height: 100%;
+} */
+
 
 agm-map {
     height: 300px;
@@ -481,6 +511,6 @@ agm-map {
 
 @media(min-width: 1200px) {
     .container{
-        max-width: 1200px !important;
+        max-width: 1100px !important;
     }
 }

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

@@ -58,56 +58,62 @@
                   <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                     <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>
-                        </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}}" />
-                            </div>
-                          </div>
-                        </owl-carousel> -->
+                        <div class="body">
+                          <owl-carousel
+                              [options]="{items: 3, dots: false, navigation: true}"
+                              [items]="firstAdvertisiment"
+                              [carouselClasses]="['owl-theme', 'row', 'sliding']">
+                              <div class="item" *ngFor="let image of firstAdvertisiment;let i = index">
+                                  <div class="thumbnail-image">
+                                    <img src="{{authSer.pathImg + image.photo}}" />
+                                  </div>
+                              </div>
+                          </owl-carousel>
+                          <owl-carousel
+                              [options]="{items: 3, dots: false, navigation: true}"
+                              [items]="secondAdvertisiment"
+                              [carouselClasses]="['owl-theme', 'row', 'sliding']">
+                              <div class="item" *ngFor="let image of secondAdvertisiment;let i = index">
+                                  <div class="thumbnail-image">
+                                    <img src="{{authSer.pathImg + image.photo}}" />
+                                  </div>
+                              </div>
+                          </owl-carousel>
+                       </div>
                       </div>
                     </div>
-                  </div>
-                  <div class="col-12 col-sm-12 col-md-8 col-lg-8">
-                    <div class="visitingTime-w">
-                      <h1>مواعيد الزياره</h1>
-                      <div class="row">
-                        <div class="col-12 col-sm-12 col-md-6 col-lg-6">
-                          <div class="monthRecord-w text-center">
-                            <h1>أقسام التنويم</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 class="col-12 col-sm-12 col-md-8 col-lg-8">
+                        <div class="visitingTime-w">
+                          <h1>مواعيد الزياره</h1>
+                          <div class="row">
+                            <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+                              <div class="monthRecord-w text-center">
+                                <h1>أقسام التنويم</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>
-                          </div>
-                        </div>
-                        <div class="col-12 col-sm-12 col-md-6 col-lg-6">
-                          <div class="achiev text-center">
-                            <h1>العنايه المركزه</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 class="col-12 col-sm-12 col-md-6 col-lg-6">
+                              <div class="achiev text-center">
+                                <h1>العنايه المركزه</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>
                           </div>
                         </div>
                       </div>
-                    </div>
                   </div>
                 </div>
               </div>
-            </div>
 
 
             <div class="col-12">
@@ -167,10 +173,9 @@
                   </agm-map>
               </div>
             </div>
-      
-          </div>
         </div>
       </div>
+     </div>
 </ng-template>
 
 

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

@@ -1,18 +1,23 @@
 import { AuthServiceService } from './../../shared/auth-service.service';
 import { ExternalPageService } from './../../shared/external-page.service';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild, ElementRef, AfterContentInit } from '@angular/core';
 import {MapsAPILoader} from '@agm/core';
-import * as $ from 'jquery';
+//import * as $ from 'jquery';
+declare var $: any;
+import {OwlCarousel} from 'ngx-owl-carousel';
+
 
 @Component({
   selector: 'app-external-page-content',
   templateUrl: './external-page-content.component.html',
   styleUrls: ['./external-page-content.component.css']
 })
+
 export class ExternalPageContentComponent implements OnInit {
 
   constructor(private externalService: ExternalPageService, 
     private authSer:AuthServiceService) { }
+    @ViewChild('carousel') el:ElementRef;
 
   reports = [];
   events = [];
@@ -22,16 +27,13 @@ export class ExternalPageContentComponent implements OnInit {
   intensiveCare = []; 
   recordsOfMonth = [];
   achievements = [];
+  @ViewChild('owlElement') owlElement: OwlCarousel
 
   title: string = 'My first AGM project';
   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 = [];
-  mySlideOptions={items: 3, dots: false, nav: true};
-  myCarouselOptions={items: 3, dots: true, nav: true};
+  firstAdvertisiment = []
 
   
 
@@ -64,10 +66,11 @@ export class ExternalPageContentComponent implements OnInit {
         console.log(error);
       }
     );
-
-
   }
 
-  
+  fun() {
+    this.owlElement.next([200])
+    //duration 200ms
+  }
 
 }

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

@@ -12,6 +12,7 @@ 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 { Ng2CarouselamosModule } from 'ng2-carouselamos';
 
 
 @NgModule({
@@ -25,6 +26,7 @@ import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
         FormsModule,
         OwlModule,
         SlickCarouselModule,
+        Ng2CarouselamosModule,
         AgmCoreModule.forRoot({
             apiKey: 'AIzaSyAxlgymaua-8BszEryfQIOr9PLKrtEqU2I'
           }),

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

@@ -6,7 +6,7 @@ import { RouterModule, Routes } from '@angular/router';
 
 
 const externalPageRoutes: Routes = [
-    {path: '' , component: ExternalPageComponent, children:[
+    {path: 'ExternalPage' , component: ExternalPageComponent, children:[
         {path: 'home', component: ExternalPageContentComponent},
     ]},
 ];

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

@@ -101,8 +101,7 @@ export class InternalPageContentComponent implements OnInit {
   ngOnInit() {
    //console.log(this.checkTokenExpire);
        //get profile data
-    this.userservice.getUserDataProfile();
-
+    //this.userservice.getUserDataProfile();
     this.internalService.getInternalPageData().subscribe(
       (responce) => {
         console.log(responce);

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

@@ -23,7 +23,10 @@ export class InternalPageComponent implements OnInit {
     private userservice: UserService, 
     private route: ActivatedRoute,
     private internalService: InternalPageService,
-    private spinner: NgxSpinnerService,) { }
+    private spinner: NgxSpinnerService,) {
+      this.spinner.show();
+
+     }
 
     // joinUs = [];
     // reportsData = [];
@@ -57,14 +60,12 @@ export class InternalPageComponent implements OnInit {
 
   ngOnInit() {
 
-    this.spinner.show();
 
     //this.spinner.show();
     this.authSer.showDashboardHeader = false;
     
    //get profile data
     this.userservice.getUserDataProfile();
-    this.spinner.hide();
     //get parent and child data
    
     //this.router.navigate(['InternalPage/home']);

src/app/app-routing.module.ts

@@ -13,9 +13,9 @@ const routes: Routes = [
   {path: 'login', component: LoginComponent},
   {path: 'signup', component: RegesterComponent},
   {path: 'services/:id', component: ServicesComponent, canActivate: [AuthGuard]},
-  {path: 'service/:userID/:serviceID', loadChildren: './dashboard/dashboard.module#DashBoardModule', canLoad: [AuthGuard]},
   {path: 'InternalPage' , loadChildren: './Internal-Page/internal-page.module#InternalPageModule'},
   {path: 'ExternalPage', loadChildren: './External-Page/external-page.module#ExternalPageModule'},
+  {path: 'service/:userID/:serviceID', loadChildren: './dashboard/dashboard.module#DashBoardModule', canLoad: [AuthGuard]},
   {path: 'profile/:idProfile', component: RegesterComponent, canActivate: [AuthGuard]},
   {path: 'page-not-found', component: PageNotFoundComponent},
   {path: '**', redirectTo: '/page-not-found', pathMatch: 'full'}

src/app/app.component.html

@@ -7,9 +7,11 @@
  ></ngx-spinner>
 
  <app-header></app-header>
+
     <div class="routerLinkContainer-w" [style.min-height.px]="myInnerHeight">
         <router-outlet></router-outlet>
     </div>
+    
 <app-footer></app-footer>
 
 <!-- <app-dashboard-content></app-dashboard-content> -->

src/app/app.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { NgxSpinnerService } from 'ngx-spinner';
 
 
 
@@ -11,7 +12,10 @@ import { Component, OnInit } from '@angular/core';
 export class AppComponent implements OnInit {
 
  
-
+  myInnerHeight = window.innerHeight;
+  constructor(private spinner: NgxSpinnerService) {
+    this.spinner.show();
+  }
   ngOnInit() {
 
   }

src/app/dashboard/dashboard-routing.ts

@@ -42,7 +42,7 @@ import { ReportListComponent } from './report-list/report-list.component';
 import { EventsComponent } from './events/events.component';
 
 const dashboardRouting: Routes = [
-    {path: '', component: ServiceItemComponent, canActivate: [AuthGuard], children: [
+    {path: 'service/:userID/:serviceID', component: ServiceItemComponent, canActivate: [AuthGuard], children: [
     {path: 'users/:userPageId', component: UsersComponent, canActivate: [AuthGuard]},
     {path: 'roles/:rolesPageId', component: RolesListComponent, canActivate: [AuthGuard]},
     {path: 'departments/:departsPageId', component: DepartmentListComponent, canActivate: [AuthGuard]},

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

@@ -46,7 +46,6 @@ export class ServiceItemComponent implements OnInit {
 
 
   ngOnInit() {
-
     this.extraPages = [];
     //get profile data
     this.userSer.getUserDataProfile();
@@ -74,29 +73,29 @@ export class ServiceItemComponent implements OnInit {
       (error) => {console.log(error)}
     );
 
-    this.userSer.getPagesPermetiotns(this.userId, this.servicesId).subscribe(
-      (responce) => {
-        this.mobilePages = responce['pages'];
-        console.log(responce['pages'].length);
-        if(responce['pages'].length > 6) {
-          for(let i = 0; i < 6 ; i++) {
-            this.pages[i] = responce['pages'][i];
-          }
-          for(let i = 6; i < responce['pages'].length; i++) {
-            this.extraPages.push(responce['pages'][i]); 
-          }
-          this.authSer.showMoreLinks = true;
-        } else {
-          this.authSer.showMoreLinks = false;
-          this.pages = responce['pages'];
-          // this.pages[0].active = 1;
-        }
-        this.spinner.hide();
-        console.log('extraaaaa' , this.extraPages);
-        console.log('paggges' , this.pages);
-      },
-      (error) => {console.log(error)}
-    );
+    // this.userSer.getPagesPermetiotns(this.userId, this.servicesId).subscribe(
+    //   (responce) => {
+    //     this.mobilePages = responce['pages'];
+    //     console.log(responce['pages'].length);
+    //     if(responce['pages'].length > 6) {
+    //       for(let i = 0; i < 6 ; i++) {
+    //         this.pages[i] = responce['pages'][i];
+    //       }
+    //       for(let i = 6; i < responce['pages'].length; i++) {
+    //         this.extraPages.push(responce['pages'][i]); 
+    //       }
+    //       this.authSer.showMoreLinks = true;
+    //     } else {
+    //       this.authSer.showMoreLinks = false;
+    //       this.pages = responce['pages'];
+    //       // this.pages[0].active = 1;
+    //     }
+    //     this.spinner.hide();
+    //     console.log('extraaaaa' , this.extraPages);
+    //     console.log('paggges' , this.pages);
+    //   },
+    //   (error) => {console.log(error)}
+    // );
   }
 
   //click on service in side button

src/app/login/login.component.ts

@@ -46,7 +46,9 @@ 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.router.navigate(['InternalPage/home']);
+        
       },
       (error) => {
         console.log(error);

src/styles.css

@@ -520,18 +520,18 @@ input:-webkit-autofill:active  {
     transform:         rotate(90deg);
   }
 
-  .owl-carousel.owl-loaded {
+  /* .owl-carousel.owl-loaded {
     margin: 10px 0;
-  }
+  } */
 
 
-  .owl-theme .owl-nav {
+  /* .owl-theme .owl-nav {
     position: absolute !important;
     width: 100% !important;
     bottom: 0 !important;
-}
+} */
 
-.owl-carousel .owl-nav button.owl-prev {
+/* .owl-carousel .owl-nav button.owl-prev {
   width: 50px;
   background-color: red;
   float: right;
@@ -559,7 +559,7 @@ input:-webkit-autofill:active  {
 .owl-carousel .owl-nav button.owl-next span {
   font-size: 30px;
   font-weight: bold;
-}
+} */
 
 /* .cal-month-view .cal-day-cell {
   height: 50px !important;