trainning service

package-lock.json

@@ -1561,7 +1561,6 @@
       "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
       "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
       "dev": true,
-      "optional": true,
       "requires": {
         "delegates": "^1.0.0",
         "readable-stream": "^2.0.6"
@@ -2812,8 +2811,7 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
       "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "constants-browserify": {
       "version": "1.0.0",
@@ -3227,8 +3225,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
       "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "depd": {
       "version": "1.1.2",
@@ -4314,8 +4311,7 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -4336,14 +4332,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -4358,20 +4352,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -4488,8 +4479,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -4501,7 +4491,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -4516,7 +4505,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -4524,14 +4512,12 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -4550,7 +4536,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -4631,8 +4616,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4644,7 +4628,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4730,8 +4713,7 @@
         "safe-buffer": {
           "version": "5.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -4767,7 +4749,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -4787,7 +4768,6 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -4831,14 +4811,12 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "yallist": {
           "version": "3.0.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },
@@ -4847,7 +4825,6 @@
       "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz",
       "integrity": "sha1-XB+x8RdHcRTwYyoOtLcbPLD9MXE=",
       "dev": true,
-      "optional": true,
       "requires": {
         "graceful-fs": "^4.1.2",
         "inherits": "~2.0.0",
@@ -4860,7 +4837,6 @@
       "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
       "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
       "dev": true,
-      "optional": true,
       "requires": {
         "aproba": "^1.0.3",
         "console-control-strings": "^1.0.0",
@@ -4898,8 +4874,7 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
       "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "get-stream": {
       "version": "3.0.0",
@@ -5159,8 +5134,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
       "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "has-value": {
       "version": "1.0.0",
@@ -5931,8 +5905,7 @@
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
       "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "is-windows": {
       "version": "1.0.2",
@@ -6619,7 +6592,6 @@
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
       "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
       "dev": true,
-      "optional": true,
       "requires": {
         "graceful-fs": "^4.1.2",
         "parse-json": "^2.2.0",
@@ -6632,8 +6604,7 @@
           "version": "2.3.0",
           "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
           "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },
@@ -6907,8 +6878,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
       "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "map-visit": {
       "version": "1.0.0",
@@ -7805,7 +7775,6 @@
       "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
       "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
       "dev": true,
-      "optional": true,
       "requires": {
         "are-we-there-yet": "~1.1.2",
         "console-control-strings": "~1.1.0",
@@ -8978,7 +8947,6 @@
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
       "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
       "dev": true,
-      "optional": true,
       "requires": {
         "load-json-file": "^1.0.0",
         "normalize-package-data": "^2.3.2",
@@ -8990,7 +8958,6 @@
           "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
           "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
           "dev": true,
-          "optional": true,
           "requires": {
             "graceful-fs": "^4.1.2",
             "pify": "^2.0.0",
@@ -9001,8 +8968,7 @@
           "version": "2.3.0",
           "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
           "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },
@@ -9011,7 +8977,6 @@
       "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
       "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
       "dev": true,
-      "optional": true,
       "requires": {
         "find-up": "^1.0.0",
         "read-pkg": "^1.0.0"
@@ -9022,7 +8987,6 @@
           "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
           "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
           "dev": true,
-          "optional": true,
           "requires": {
             "path-exists": "^2.0.0",
             "pinkie-promise": "^2.0.0"
@@ -9033,7 +8997,6 @@
           "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
           "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
           "dev": true,
-          "optional": true,
           "requires": {
             "pinkie-promise": "^2.0.0"
           }
@@ -10333,7 +10296,6 @@
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
       "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
       "dev": true,
-      "optional": true,
       "requires": {
         "is-utf8": "^0.2.0"
       }
@@ -11685,7 +11647,6 @@
       "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
       "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
       "dev": true,
-      "optional": true,
       "requires": {
         "string-width": "^1.0.2 || 2"
       }

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

@@ -0,0 +1,29 @@
+<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-12 col-md-9">
+                    <div class="information">
+                      <p [innerHTML]="contactUs.field"></p>
+                    </div>
+                  </div>
+              </div>
+            </ng-template>
+
+            <ng-template #englishTemplate>
+              <div class="container" style="direction:ltr">
+                <div class="row">
+                  <div class="col-12 col-md-9">
+                    <div class="information">
+                      <p [innerHTML]="contactUs.field_en"></p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </ng-template>
+        </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,57 @@
+import { ExternalPageService } from './../../shared/external-page.service';
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { AuthServiceService } from '../../shared/auth-service.service';
+import { NgxSpinnerService } from 'ngx-spinner';
+
+@Component({
+  selector: 'app-contact-us',
+  templateUrl: './contact-us.component.html',
+  styleUrls: ['./contact-us.component.css']
+})
+export class ContactUsComponent implements OnInit {
+
+  constructor(private http: HttpClient, 
+    private spinner: NgxSpinnerService,
+    private externalService: ExternalPageService,
+    private authSer: AuthServiceService) { }
+
+    contactUs = [];
+
+  ngOnInit() {
+    this.spinner.show();
+    this.authSer.homeActivate = false;
+    this.http.get(this.authSer.pathApi + '/get_contact_us/1').subscribe(
+      (responce) => {
+        console.log(responce);
+        this.contactUs = responce['contact_us'];
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+    this.externalService.getHeader().subscribe(
+      (responce) => {
+        this.externalService.headerMenus = responce['parents'];
+        console.log('wesssssaaaaaaaaaaaaaaaaaaaaam' , this.externalService.headerMenus);
+        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;
+          }
+        }
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+  }
+
+ 
+
+}

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

@@ -24,26 +24,33 @@ input,button {
     bottom: 0;
     background-color: rgba(0, 0, 0, 0.7);
     z-index: 10;
-    padding-top: 20px;
+    padding-top: 6px;
     padding-bottom: 20px;
     color: #fff;
     text-align: center;
     right: 0;
     left: 0;
+	height: 90px;
+}
+.cslide{
+	    width: 75px;
+    height: 75px;
+    margin: 0px 16px;
+    overflow: hidden;
 }
-
 .sliderNews-w .carousel-caption .more {
-    width: 104px;
+    width: 107px;
     background-color: #dedede;
     border: 1px solid #dedede;
     color: #bea380;
     position: absolute;
     left: 10px;
-    bottom: 32px;
+    bottom: 53px;
     cursor: pointer;
     transition: all 0.5s;
-    font-size: 14px;
+    font-size: 13px;
     font-weight: bold;
+    padding: 4px 0px;
 }
 
 .sliderNews-w .carousel-caption .more:hover {
@@ -54,17 +61,35 @@ input,button {
 }
 
 .sliderNews-w .carousel-caption h5 {
-    color: #00a99d;
+       color: #00a99d;
+    /*border: 1px solid;*/
+    width: 60%;
+    height: 17px;
+    margin-right: auto;
+    margin-left: auto;
+    font-size: 15px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.sliderNews-w .carousel-caption p{
+	width: 60%;
+    margin-right: auto;
+    margin-left: auto;
+    height: 22px;
+    overflow: hidden;
+    font-size: 15px;
+	    text-overflow: ellipsis;
 }
-
 .eventPart-w,
 .eventPartEn-w {
     width: 100%;
-    height: 40px;
+    height: 34px;
     padding: 5px 0;
     background-color: #e5f7f6;
     margin: 10px 0;
     margin-top: 15px;
+	    overflow: hidden;
+    font-size: 14px;
 }
 
 
@@ -75,8 +100,8 @@ input,button {
 .carousel-indicators li {
     cursor: pointer;
     width: 25px;
-    height: 7px;
-    border-radius: 5px;
+    height: 4px;
+    border-radius: 0px;
     background-color: #fff;
 }
 
@@ -131,14 +156,19 @@ input,button {
     font-weight: bold;
 }
 .eventPart-w .moreEvent-w {
-    position: absolute;
+position: absolute;
     left: 10px;
-    background-color: transparent;
-    border: none;
+    /* background-color: transparent; */
+    border: 1px solid #c0a786;
     color: #1ba097;
-    top: 0;
+    top: 0px;
     cursor: pointer;
     font-weight: bold;
+    font-size: 13px;
+    border-radius: 2px;
+    background-color: #d5d6c7;
+    padding: 2px 13px;
+	z-index: 2;
 }
 
 .eventPartEn-w .moreEventEn-w {
@@ -163,22 +193,24 @@ input,button {
 
 .externalServices-w .item {
     width: 100%;
-    height: 150px;
-    /* radial-gradient(0.5turn,#efeeee, #1db5ab, #1ba097); */
-    background: radial-gradient(farthest-corner at 129px 53px,   #4bcec7 0%, #00a99d 100%);
+    height: 100px;
+    background: radial-gradient(farthest-corner at 129px 53px, #50cec6 0%, #1b948b 100%);
     margin: 10px 0;
     transition: all 0.5s;
+	    border-image: linear-gradient(to right, #bb9e77, #e0d0bad6) 0 1 100%;
+    border-width: 0px 0px 4px 0px;
+    border-style: solid;
 }
 
 .externalServices-w .item:hover{
-    background: radial-gradient(farthest-corner at 129px 53px,     #c4d8d7 0%, #00a99d 100%);
+    background: radial-gradient(farthest-corner at 129px 53px,     #10cec4 0%, #01867d 100%);
 }
 
 .externalServices-w .item img {
-    width: 50px;
-    height: 50px;
+    width: 40px;
+    height: 40px;
     margin: 10px 0;
-    margin-top: 30px;
+    margin-top: 13px;
 }
 
 
@@ -186,7 +218,7 @@ input,button {
 .externalServices-w .item p {
     color: #fff;
     font-size: 16px;
-    margin: 10px 0;
+    margin: 3px 0;
 }
 
 .lectureService-w {
@@ -202,7 +234,7 @@ input,button {
 
 .lectureService-w .advertisimentServices-w h1 {
     font-size: 18px;
-    background-color: #1ba097;
+    background-color: #08ada2;
     color: #fff;
     padding: 12px 0;
     margin: 0;
@@ -251,7 +283,7 @@ input,button {
 
 .lectureService-w .visitingTime-w h1 {
     font-size: 18px;
-    background-color: #1ba097;
+    background-color: #08ada2;
     color: #fff;
     padding: 12px 0;
     margin: 0;
@@ -271,7 +303,7 @@ input,button {
 
 .lectureService-w .visitingTime-w .monthRecord-w .body ul li {
     display: inline-block;
-    margin: 0 40px;
+    margin: 0 39px;
     margin-top: 25px;
     position: relative;
 }
@@ -294,7 +326,7 @@ input,button {
 
 .lectureService-w .visitingTime-w .achiev .body ul li {
     display: inline-block;
-    margin: 0 40px;
+    margin: 0 39px;
     margin-top: 25px;
     position: relative;
 }
@@ -326,7 +358,7 @@ input,button {
 
 .externalPageContentt-w .recordsContent-w h1 {
     font-size: 18px;
-    background-color: #1ba097;
+    background-color: #08ada2;
     color: #fff;
     padding: 12px 0;
     margin: 0;
@@ -472,7 +504,7 @@ input,button {
 
 .externalPageContentt-w .datePicker-w h1 {
     font-size: 18px;
-    background-color: #1ba097;
+    background-color: #08ada2;
     color: #fff;
     padding: 12px 0;
     margin: 0;
@@ -492,7 +524,7 @@ input,button {
 
 .maps h1 {
     font-size: 18px;
-    background-color: #1ba097;
+    background-color: #08ada2;
     color: #fff;
     padding: 12px 0;
     margin: 0;
@@ -580,27 +612,33 @@ input,button {
     }
     
     .lectureService-w #carouselExample .carousel-inner .carousel-item img {
-        height: 70px !important;
+       /* height: 70px !important;*/
         border: 2px solid #007A71;
+		    width: 100%;
+    min-height: 100%;
     }
 
     .lectureService-w #carouselExample2 .carousel-inner .carousel-item img {
-        height: 70px !important;
+       /* height: 70px !important;*/
         border: 2px solid #007A71;
+		    width: 100%;
+    min-height: 100%;
     }
   
 
     .moreNews {
-        border: none;
-        position: absolute;
-        left: 10px;
-        bottom: 5px;
-        background: #c0a786;
-        color: #fff;
-        font-size: 14px;
-        transition: all 0.5s;
-        cursor: pointer;
-        font-weight: bold;
+    border: none;
+    position: absolute;
+    left: 10px;
+    bottom: 19px;
+    background: #c0a786;
+    color: #fff;
+    font-size: 13px;
+    transition: all 0.5s;
+    cursor: pointer;
+    font-weight: bold;
+    width: 107px;
+    padding: 5px 0px;
     }
 
     .moreNews:hover {

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

@@ -13,7 +13,7 @@
                     <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">
+                          <div class="carousel-caption d-md-block">
                               <h5>{{report.title}}</h5>
                               <p [innerHtml] = "report.description"></p>
                               <button class="more hvr-grow" (click)="goPageNew(report)">تفاصيل الخبر</button>
@@ -43,7 +43,7 @@
               <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">
+                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" *ngFor="let service of services; let i = index">
                       <div class="animated" style="position:relative">
                         <a (click)="onGetService(service)" style="cursor:pointer">
                             <div class="item text-center">
@@ -65,13 +65,13 @@
                 <div class="lectureService-w">
                   <div class="row">
                     
-                    <div class="col-12 col-sm-12 col-md-4 col-lg-4 hidden-xs">
+                    <div class="col-12 col-sm-12 col-md-4 col-lg-4 "><!-- hidden-xs -->
                       <div class="advertisimentServices-w text-center">
                         <h1>خدمات إعلانيه</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' : '' ">
+                                <div class="carousel-item cslide" *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>
@@ -87,7 +87,7 @@
   
                           <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' : '' ">
+                              <div class="carousel-item cslide" *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>
@@ -116,6 +116,7 @@
                               <div class="body">
                                 <ul class="list-unstyled">
                                   <li><img src="../../../assets/image/Path 82.png" /><span style="color:green">{{hypnosisSections.open_time}}</span></li>
+									<i class="fa fa-chevron-left fa-lg text-muted"></i>
                                   <li><img src="../../../assets/image/Path 82.png" /><span style="color:red">{{hypnosisSections.close_time}}</span></li>
                                 </ul>
                               </div>
@@ -127,6 +128,7 @@
                               <div class="body">
                                 <ul class="list-unstyled">
                                   <li><img src="../../../assets/image/Path 82.png" /><span style="color:green">{{intensiveCare.open_time}}</span></li>
+									<i class="fa fa-chevron-left fa-lg text-muted"></i>
                                   <li><img src="../../../assets/image/Path 82.png" /><span style="color:red">{{intensiveCare.close_time}}</span></li>
                                 </ul>
                               </div>

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

@@ -55,11 +55,10 @@ input,button {
     background-color: #f1f1f1;
 }
 
-.externalPage-w {
+.externalPage-w { /* <— eng mega Edit */
     width: 100%;
-    height: 45px;
-    
-    background: #D9D9D9
+    height: 36px;
+    background: #0000004d;
 
     /* background: url('../../../assets/image/XMLID_19_.png') no-repeat center center;
     background-size: cover; */
@@ -72,7 +71,7 @@ input,button {
 }
 
 .externalPage-w .login  {
-    color: #00a99d;
+    color: #ffffff;
     text-align: right;
     padding: 0 40px;
     margin: 7px 0;
@@ -117,14 +116,14 @@ input,button {
     background-color: transparent;
 }
 
-.externalPage-w input[type='text'] {
+.externalPage-w input[type='text'] {/* <— eng mega Edit */
     background-color: #fff;
     border: none;
     color: #00A99D !important;
     padding: 0 5px;
-    height: 35px;
+    height: 30px;
     width: 260px;
-    margin-top: 4px;
+    margin-top: 3px;
     transition: all 0.5s;
     border: 1px solid #00A99D !important;
 }
@@ -133,13 +132,13 @@ input,button {
     border: 2px solid #00a99d;
 }
 
-.externalPage-w .searchBtn {
+.externalPage-w .searchBtn {/* <— eng mega Edit */
     background-color: #fff;
     border: none;
-    height: 35px;
-    padding: 0 10px;
+    height: 30px;
+    padding: 0 12px;
     border: 1px solid #00a99d !important;
-    margin: 4px 10px;
+    margin: 3px 6px;
 }
 
 .externalPage-w .searchBtn i{
@@ -150,7 +149,7 @@ input,button {
 	width: 45px;
     border: 1px solid #eceaea;
     margin: -12px 0px 0px 6px;
-    height: 45px;
+    height: 37px;
     background-color: #fff;
     display: block;
     float: right;
@@ -184,9 +183,9 @@ input,button {
 
 .logoHeader-w {
     width: 100%;
-    height: 160px;
+    height: 100px;
     display: inline-block;
-    background: url('../../../assets/image/bottomBackground.jpg');
+    /*background: url('../../../assets/image/bottomBackground.jpg');*/
     background-size: cover;
 }
 
@@ -195,7 +194,7 @@ input,button {
 .logoHeader-w .center {
     width: 100%;
     display: inline-block;
-    margin-top: 20px;
+    margin-top: 0px;
 }
 
 .logoHeader-w .leftLogo-w {
@@ -237,7 +236,7 @@ input,button {
 
 .pagesHeader-w {
     width: 100%;
-    background: rgba(94, 204, 196, 0.5) !important;
+    background: rgba(204, 204, 204, 0.46) !important;
     margin-top: -6px;
     position: relative;
     height: 50px;
@@ -489,13 +488,13 @@ input,button {
 
   .menuHeader-w {
       margin: 0 auto;
-      height: 70px;
+      height: 50px;
   }
 
   .menuHeaderEn-w {
       margin: 0 auto;
       direction: ltr;
-      height: 70px;
+      height: 50px;
   }
 
   .menuHeaderEn-w li a {
@@ -503,7 +502,7 @@ input,button {
       font-size: 20px;
       border: none;
       outline: none;
-      color: #078c82;
+      color: #31aca3; /*#078c82;*/
       background-color: inherit;
       font: inherit;
       margin: 0;
@@ -530,7 +529,8 @@ input,button {
       width: 38px;
       margin: 0 10px;
       float: right;
-      margin-top: -4px;
+      margin-top: -5px;
+	    filter: invert(45%);
   }
 
   .menuHeaderEn-w li img {
@@ -540,7 +540,7 @@ input,button {
   }
 
   .menuHeaderEn-w li, .menuHeader-w li {
-    padding: 10px 10px;
+    padding: 0px 10px;
     transition: all 0.5s;
   }
 
@@ -564,7 +564,7 @@ input,button {
 
 
   .buttonMobileHeader-w {
-      margin: 15px;
+      margin: 5px;
   }
 
 @media(max-width: 767px) {
@@ -590,7 +590,7 @@ input,button {
     .externalPage-w .searchBtn {
         background-color: #fff;
         border: none;
-        height: 35px;
+        height: 30px;
         margin-left: 40px;
     }
 
@@ -600,7 +600,7 @@ input,button {
 
     .externalPage-w .login {
         margin-top: 8px;
-        color: #00a99d;
+        color: #ffffff;
         cursor: pointer;
         text-align: right;
         padding: 0 9px;

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

@@ -99,7 +99,7 @@
                             <ul class="navbar-nav mr-auto menuHeader-w">
                                 <li class="nav-item homeLinkMobile-w" (click)="goToHome()" style="cursor: pointer;" [ngClass]="{'homeExternalActive': authSer.homeActivate}"> 
                                     <a class="nav-link">
-                                        <i class="fa fa-home" style="font-size: 30px;margin:-7px 5px; color:#bda380"></i> الرئيسيه
+                                        <i class="fa fa-home" style="font-size: 30px;margin:-7px 5px; color:#85837f"></i> الرئيسيه
                                     </a>
                                 </li>
 
@@ -223,7 +223,7 @@
                             <ul class="navbar-nav mr-auto menuHeaderEn-w">
                                 <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: 35px;margin:0 5px; margin-top:-16px; color:#bda380"></i> Home
+                                        <i class="fa fa-home" style="font-size: 35px;margin:0 5px; margin-top:-16px; color:#85837f"></i> Home
                                     </a>
                                 </li>
                                 <li class="nav-item" *ngFor="let menu of externalService.headerMenus" style="position: relative;" [ngClass]="menu.active == 0 ? '' : 'activeExternalLink' ">

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

@@ -55,7 +55,7 @@ export class ExternalPageHeaderComponent implements OnInit {
   }
 
   goToHome() {
-    this.router.navigate(['/ExternalPage/home']);
+    this.router.navigate(['/ExternalPage']);
   }
 
 
@@ -63,4 +63,9 @@ export class ExternalPageHeaderComponent implements OnInit {
     this.router.navigate(['/login']);
   }
 
+  onGetProfile() {
+    console.log('profile/'  + this.authSer.dataLoginUser['id']);
+    this.router.navigate(['profile/'  + this.authSer.dataLoginUser['id']]);
+  }
+
 }

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

@@ -25,6 +25,7 @@ import { ExternalContactUsComponent } from './external-contact-us/external-conta
 import { ExternalPolicyComponent } from './external-policy/external-policy.component';
 import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
 import { CarouselModule } from 'ngx-owl-carousel-o';
+import { ContactUsComponent } from './contact-us/contact-us.component';
 
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
@@ -42,6 +43,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
         InernalServicePageComponent,
         ExternalContactUsComponent,
         ExternalPolicyComponent,
+        ContactUsComponent,
     ],
     imports: [
         CommonModule,

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

@@ -16,7 +16,7 @@ export class ExternalPageComponent implements OnInit {
 
   ngOnInit() {
     this.authSer.checkExternalFooter = true;
-    this.router.navigate(['ExternalPage/home']);
+    //this.router.navigate(['ExternalPage/home']);
   }
 
 }

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

@@ -1,3 +1,4 @@
+import { ContactUsComponent } from './contact-us/contact-us.component';
 import { ExternalPolicyComponent } from './external-policy/external-policy.component';
 import { ExternalContactUsComponent } from './external-contact-us/external-contact-us.component';
 import { ExternalEventsTableComponent } from './external-events-table/external-events-table.component';
@@ -15,16 +16,17 @@ import {InernalServicePageComponent} from './inernal-service-page/inernal-servic
 
 const externalPageRoutes: Routes = [
     {path: 'ExternalPage' , component: ExternalPageComponent, children:[
-        {path: 'home', component: ExternalPageContentComponent},
+        {path: '', component: ExternalPageContentComponent},
         {path: 'EventsTable', component: ExternalEventsTableComponent},
         {path: 'moreNews', component: MoreNewsComponent},
         {path: 'eventsDetails', component: EventDetailsComponent},
+        {path: 'contact', component: ContactUsComponent},
+        {path: 'hospital', component: ExternalHospitalComponent},
+        {path: 'managements', component: ExternalManagamentsComponent},
         {path: 'contactUs/:contactId', component: ExternalContactUsComponent},
         {path: 'externalPolicy/:policyId', component: ExternalPolicyComponent},
         {path: 'externalServiceDetails/:externalServiceId', component: InernalServicePageComponent},
-        {path: 'newPage/:reportId', component: NewPageComponent},
-        {path: 'hospital', component: ExternalHospitalComponent},
-        {path: 'managements', component: ExternalManagamentsComponent},
+        {path: 'newPage/:reportId', component: NewPageComponent}
     ]},
 ];
 

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

@@ -43,7 +43,7 @@ input,button {
 
 .internalHeader-w {
     width: 100%;
-    height: 35px;
+    height: 36px;
     background: rgba(185, 183, 183, 0.8);
 
     /* background: url('../../../assets/image/XMLID_19_.png') no-repeat center center;
@@ -57,7 +57,7 @@ input,button {
 }
 
 .internalHeader-w .login  {
-    color: #00a99d;
+    color: #ffffff;
     text-align: right;
     padding: 0 40px;
     margin: 5px 0;
@@ -108,7 +108,7 @@ input,button {
     color: #888;
     padding: 0 5px;
     height: 30px;
-    margin-top: 2px;
+    margin-top: 3px;
     transition: all 0.5s;
 }
 
@@ -117,17 +117,23 @@ input,button {
 }
 
 .internalHeader-w .searchBtn {
+       background-color: #fff;
+    border: none;
+    height: 30px;
+    margin-top: 3px;
     background-color: #fff;
     border: none;
     height: 30px;
-    margin-top: 2px;
+    padding: 0 12px;
+    margin: 3px 6px;
+    border: 1px solid #BDA380;
 }
 
 .profileData-w img {
 	width: 45px;
     border: 1px solid #eceaea;
     margin: -12px 0px 0px 6px;
-    height: 45px;
+    height: 39px;
     background-color: #fff;
     display: block;
     float: right;
@@ -160,9 +166,9 @@ input,button {
 
 .logoHeader-w {
     width: 100%;
-    height: 160px;
+    height: 100px;
     display: inline-block;
-    background: url('../../../assets/image/bottomBackground.jpg');
+  /*  background: url('../../../assets/image/bottomBackground.jpg');*/
     background-size: cover;
 }
 
@@ -171,7 +177,7 @@ input,button {
 .logoHeader-w .center {
     width: 100%;
     display: inline-block;
-    margin-top: 20px;
+    margin-top: 0px;
 }
 
 .logoHeader-w .rightLogo-w {
@@ -253,7 +259,7 @@ input,button {
     border: none;
     outline: none;
     color: #078c82;
-    padding: 14px 5px;
+    padding: 4px 5px;
     background-color: inherit;
     font: inherit;
     margin: 0;

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

@@ -96,7 +96,7 @@
                     <div ngbDropdown class="d-inline-block d-lg-none mobileMenu-w">
                         <button class="btn btn-outline-primary menuMobile-w" id="dropdownBasic1" ngbDropdownToggle style="color:#61a59b"><i class="fas fa-bars"></i></button>
                         <div ngbDropdownMenu aria-labelledby="dropdownBasic1" class="dropDownMobile-w">
-                            <button class="dropdown-item activeInternalHeader-w"> <a href="/home"> الرئيسيه</a></button>
+                            <button class="dropdown-item activeInternalHeader-w" (click)="goToHome()"> <a href="/home"> الرئيسيه</a></button>
                             <div *ngFor="let parent of authSer.parentsPage; let i = index" class="dropdown">
                                 <button class="dropbtn" *ngIf="parent['childs'].length > 0">
                                     <span class="parentName-w"> {{parent.name}}<i class="fa fa-caret-down" *ngIf="parent['childs'].length > 0"></i></span>

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

@@ -87,7 +87,7 @@ export class InternalPageHeaderComponent implements OnInit {
   }
 
   goToHome() {
-    this.router.navigate(['InternalPage/home']);
+    this.router.navigate(['/InternalPage']);
   }
 
   getData(parentData) {

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

@@ -24,217 +24,26 @@ export class InternalPageComponent implements OnInit {
     private route: ActivatedRoute,
     private internalService: InternalPageService,
     private spinner: NgxSpinnerService,) {
+      this.spinner.show();
      }
 
-    // joinUs = [];
-    // reportsData = [];
-    // externalServices = [];
-    // congratulations = [];
-    // condolences = [];
-    // internalServices = [];
-    // tabsData = [];
-    // achievements = [];
-    // checkShowData: boolean;
-    // tabtype:number = 0;
-    // expandedIndex:number;
-    // live_event = [];
-    // next_lecture = [];
+
     myInnerHeight = window.innerHeight;
    externalServices = [];
 
 
 
     
-    // flag: boolean = false;
-  
-    // catchEvent(event) {
-    //   this.flag = true
-    //   console.log(event)
-    // }
   
-    // hide(event) {
-    //   this.flag = false;
-    // }
 
   ngOnInit() {
 
 
-    this.spinner.show();
     this.authSer.showDashboardHeader = false;
     this.authSer.checkExternalFooter = false;
-   //get profile data
-    this.userservice.getUserDataProfile();
-    this.router.navigate(['InternalPage/home']);
-    //get parent and child data
-   
-    //this.router.navigate(['InternalPage/home']);
-
-   
-
-    // //get slider data
-    // this.internalService.getSliderData().subscribe(
-    //   (responce) => {
-    //     console.log('responxce', responce);
-    //     this.reportsData = responce['reports'];
-    //   }, 
-    //   (error) => {
-    //     console.log(error);
-    //   }
-    // );
-
-    // //get externals list 
-    // this.internalService.getExternalServicesList().subscribe(
-    //   (responce) => {
-    //     console.log('external_list' , responce);
-    //     this.externalServices = responce['external_services'];
-    //   },
-    //   (error) => {
-    //     console.log(error);
-    //   }
-    // );
-
-    // //get join us data 
-    // this.internalService.getJoinUsData().subscribe(
-    //   (responce) => {
-    //     console.log('joooin us', responce);
-    //     this.joinUs = responce['user'];
-    //   },
-    //   (error) => {
-    //     console.log(error);
-    //   }
-    // );
-
-    // this.internalService.getCongatoration().subscribe(
-    //   (responce) => {
-    //     console.log('condddddd' ,responce['event']);
-    //     this.congratulations = responce['event'];
-    //   },
-    //   (error) => {
-    //     console.log(error);
-    //   }
-    // );
-
-    // this.internalService.getCondolences().subscribe(
-    //   (responce) => {
-    //     console.log('condddddd',responce['event']);
-    //     this.condolences = responce['event'];
-    //   },
-    //   (error) => {
-    //     console.log(error);
-    //   }
-    // );
-
-    // this.internalService.getInternalServicesList().subscribe(
-    //   (responce) => {
-    //     console.log('internal serviceees',responce);
-    //     this.internalServices = responce['internal_services'];
-    //   },
-    //   (error) => {
-    //     console.log(error);
-    //   }
-    // );
-
-    // this.internalService.getTabData(this.tabtype).subscribe(
-    //   (responce) => {
-    //     this.tabsData = responce['tabs'];
-    //     if(this.tabsData.length > 0) {
-    //       this.checkShowData = false;
-    //     } else {
-    //       this.checkShowData = true;
-    //     }
-    //   },
-    //   (error) => {
-    //     console.log(error);
-    //   }
-    // );
-
-    // this.internalService.getForthAchievementsList().subscribe(
-    //   (responce) => {
-    //     console.log('weeeeeeeeeeeeeeeeeeee', responce);
-    //     this.achievements = responce['achievements'];
-    //     this.spinner.hide();
-    //   },
-    //   (error) => {
-    //     console.log(error);
-    //   }
-    // );
-
-    // this.internalService.getEventNow().subscribe(
-    //   (responce) => {
-    //     console.log( 'liiiiiiiiive', responce);
-    //     this.live_event = responce['live_lecture'];
-    //     this.next_lecture = responce['next_lecture'];
-    //   },
-    //   (error) => {
-    //     console.log(error);
-    //   }
-    // )
-
-  }
-
-  // onLogin() {
-  //   this.router.navigate(['/login']);
-  // }
-
-  // onGetProfile() {
-  //   console.log('profile/'  + this.authSer.dataLoginUser['id']);
-  //   this.router.navigate(['profile/'  + this.authSer.dataLoginUser['id']]);
-  // }
-
-  // //log out function
-  // onLogout() { 
-  //   localStorage.clear();
-  //   this.router.navigate(['login']);
-  // }
-
-  // onDashBoard() {
-  //   this.router.navigate(['dashboard/' + this.authSer.dataLoginUser['id']]);
-  // }
-
-  // getListPage(parent) {
-  //   for(let i = 0; i< this.internalService.parentsPage.length; i++) {
-  //     if(this.internalService[i].id == parent.id) {
-  //       this.internalService[i].active = 1;
-  //     } else if(this.internalService[0].id != parent.id) {
-  //       this.internalService[i].active = 0;
-  //     } else {
-  //       this.internalService[i].active = 0;
-  //     }
-  //   }
-  // };
-
-  // onGetData(numberTab) {
-  //   this.spinner.show();
-  //   this.tabsData = [];
-  //   this.tabtype = numberTab;
-  //   this.internalService.getTabData(this.tabtype).subscribe(
-  //     (responce) => {
-  //       this.tabsData = responce['tabs'];
-  //       if(this.tabsData.length > 0) {
-  //         this.checkShowData = false;
-  //       } else {
-  //         this.checkShowData = true;
-  //       }
-  //       this.spinner.hide();
-  //     },
-  //     (error) => {
-  //       console.log(error);
-  //     }
-  //   )
-  // }
-
-  // open(data,i) {
-  //   console.log(data);
-  //   this.expandedIndex = i;
-  // }
-
-  // closeCollapse(i) {
-  //   this.expandedIndex = -1;
-  // }
 
+   //get profile data
+    //this.userservice.getUserDataProfile();
   
-
-
-
-
+  }
 }

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

@@ -17,7 +17,7 @@ import { InternalPolicyComponent } from './internal-policy/internal-policy.compo
 
 const internalPageRoutes: Routes = [
         {path: 'InternalPage' , component: InternalPageComponent, children:[
-        {path: 'home', component: InternalPageContentComponent},
+        {path: '', component: InternalPageContentComponent},
         {path:'circulars', component: CircularsPageComponent},
         {path: 'events', component: EventsDateComponent},
         {path: 'newpages', component: NewsPagesComponent},

src/app/app-routing.module.ts

@@ -9,7 +9,7 @@ import { ServicesComponent } from './servicesItems/services.component';
 
 
 const routes: Routes = [
-  {path: '', redirectTo: '/ExternalPage/home', pathMatch: 'full'},
+  {path: '', redirectTo: '/ExternalPage', pathMatch: 'full'},
   {path: 'login', component: LoginComponent},
   {path: 'signup', component: RegesterComponent},
   {path: 'services/:id', component: ServicesComponent, canActivate: [AuthGuard]},

src/app/dashboard/dashboard-routing.ts

@@ -1,3 +1,4 @@
+import { SupervisorAddComponent } from './supervisor/supervisor-add/supervisor-add.component';
 import { MapComponent } from './map/map.component';
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
@@ -55,6 +56,7 @@ import { StatisticsListComponent } from './statistics/statistics-list/statistics
 import { AddStatisticComponent } from './statistics/add-statistic/add-statistic.component';
 import { AdvertisingServicesListComponent } from './advertising-services/advertising-services-list/advertising-services-list.component';
 import { AddAdvertisingServiceComponent } from './advertising-services/add-advertising-service/add-advertising-service.component';
+import { SupervisorListComponent } from './supervisor/supervisor-list/supervisor-list.component';
 
 const dashboardRouting: Routes = [
     {path: 'service/:userID/:serviceID', component: ServiceItemComponent, canActivate: [AuthGuard], children: [
@@ -133,6 +135,9 @@ const dashboardRouting: Routes = [
     {path: 'addAdvertising', component: AddAdvertisingServiceComponent, canActivate: [AuthGuard] },
     {path: 'advertising/:typeAdvertising/:advertisingId', component: AddAdvertisingServiceComponent , canActivate: [AuthGuard]},
     {path: 'map/:mapId', component: MapComponent, canActivate: [AuthGuard]},
+    {path: 'supervisorList/:superVisorId', component: SupervisorListComponent},
+    {path: 'superVisor/Add', component: SupervisorAddComponent},
+    {path: 'superVisor/edit/:superEditId', component: SupervisorAddComponent},
   ]},
 ];
 

src/app/dashboard/dashboard.module.ts

@@ -98,6 +98,8 @@ import { MapComponent } from './map/map.component';
 // import { EnglishDirective } from './english.directive';
 
 import { AgmCoreModule } from '@agm/core';
+import { SupervisorListComponent } from './supervisor/supervisor-list/supervisor-list.component';
+import { SupervisorAddComponent } from './supervisor/supervisor-add/supervisor-add.component';
 
 
 @NgModule({
@@ -162,6 +164,8 @@ import { AgmCoreModule } from '@agm/core';
         AdvertisingServicesListComponent,
         AddAdvertisingServiceComponent,
         MapComponent,
+        SupervisorListComponent,
+        SupervisorAddComponent,
     ],
     imports: [
         CommonModule,

src/app/dashboard/internal-services/add-internal-services/add-internal-services.component.html

@@ -4,8 +4,8 @@
     <div class="row">
       <div class="col-12">
         <ul class="list-unstyled titileLi-w">
-          <li class="headingText-w">خدمه إداره المحتوي > </li>
-          <li class="headingText-w" style="cursor:pointer" (click)="authSer.perviousLocation()"> الخدمات الداخليه > </li>
+          <li class="headingText-w">خدمه إداره المحتوي  </li>
+          <li class="headingText-w" style="cursor:pointer" (click)="authSer.perviousLocation()"> الخدمات الداخليه  </li>
           <li class="headingText-w activeLi-w" style="margin-right:5px"> {{typeLink}} </li>
         </ul>
       </div>

src/app/dashboard/main-menu/add-menu/add-menu.component.ts

@@ -184,7 +184,7 @@ export class AddMenuComponent implements OnInit {
     if(this.imageBase64 == '' && this.photoEdit == true){
       this.toastr.warning('قم باختيار صوره !');
       this.checkSaveClick = false;
-    } else if(formData.photo_type != 'png'){
+    } else if(formData.photo_type != 'png' && this.photoEdit == true){
       this.toastr.warning('الصوره يجب أن تكون بصيغه png');
       this.checkSaveClick = false;
     } else {

src/app/dashboard/sections/add-section/add-section.component.html

@@ -24,7 +24,6 @@
                     <label for="email">الأيميل <span class="spanReqired-w">*</span></label>
                     <input type="email" class="form-control" name="email" placeholder="الإيميل" ngModel email #email="ngModel" [ngModel]="section.email" required/>
                     <span class="help-block" *ngIf="!email.valid && email.touched" style="color:red">من فضلك أدخل إيميل صحيح</span>
-
                   </div>
                 </div>
                 <div class="col-12 col-sm-6 col-md-4 col-lg-4">

src/app/dashboard/sections/add-section/add-section.component.ts

@@ -1,3 +1,4 @@
+import { NgForm } from '@angular/forms';
 import { Location } from '@angular/common';
 import { Router, ActivatedRoute, Params } from '@angular/router';
 import { SectionService } from './../../../shared/section.service';
@@ -28,7 +29,6 @@ export class AddSectionComponent implements OnInit {
      }
 
 checkEditMode: boolean = false;
-
 departId: number;
 adminstartionsList = [];
 typeLink: string = '';
@@ -43,7 +43,7 @@ section = {
   adminstration_id: '',
 }
 
-@ViewChild('f') addSectionForm;
+@ViewChild('f') addSectionForm: NgForm;
 
 ngOnInit() {
 

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

@@ -53,7 +53,7 @@ export class ServiceItemComponent implements OnInit {
     this.changeText = false;
     //show spinner
     this.spinner.show();
-
+    this.authSer.arabicTemplate = true;
     //hide search header
     this.authService.showSearchHeader = false;
 
@@ -212,7 +212,21 @@ export class ServiceItemComponent implements OnInit {
           }
           this.spinner.hide();
         },
-        (error) => {console.log(error)}
+        (error) => {
+          console.log(error)
+        }
+      );
+    } else if(service.id == 3) {
+      this.userservice.getPagesPermetiotns(this.userId, service.id).subscribe(
+        (responce) => {
+          console.log(responce);
+          if(this.pages[0].id == 33) {
+            this.router.navigate(['/service/' + this.userId + '/' + service.id + '/supervisorList/' + this.pages[0].id]);
+          }
+        },
+        (error) => {
+          console.log(error);
+        }
       );
     }
   }
@@ -283,6 +297,8 @@ export class ServiceItemComponent implements OnInit {
       this.router.navigate(['advertisingList/' + dataPage.id], {relativeTo: this.route});
     } else if(dataPage.id == 28) {
       this.router.navigate(['map/' + dataPage.id], {relativeTo: this.route});
+    } else if(dataPage.id == 33) {
+      this.router.navigate(['supervisorList/' + this.pages[0].id], {relativeTo: this.route});
     }
   }
 

src/app/dashboard/supervisor/supervisor-add/supervisor-add.component.css

@@ -0,0 +1,94 @@
+.imgProfile {
+    width: 200px;
+    height: 200px;
+    border: 1px solid #ccc;
+    border-radius: 20px 20px 0 0;
+}
+
+
+input,select {
+    font-size: 12px; 
+    background-color: #f9f9f9;
+    border: 2px solid #bda380;
+}
+
+.imgProfile {
+    width: 70px;
+    height: 70px;
+    border-radius: 20px 20px 0 0;
+    border-radius: 50%;
+    border: 1px solid #ccc;
+
+}
+
+.imgContainer {
+    width: 200px;
+    position: relative;
+    border-radius: 20px;
+    margin: 30px auto;
+}
+.iconUpload-w {
+    width: 30px;
+    font-size: 1.25em;
+    font-weight: 700;
+    color: #252525;
+    display: inline-block;
+    border-radius: 0 0 20px 20px;
+    position: absolute;
+    border: 1px solid #ccc;
+    border-radius: 50%;
+    bottom: -9px;
+    right: 41%;
+}
+
+.inputfile {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
+
+/* .inputfile + label {
+    width: 100%;
+    font-size: 1.25em;
+    font-weight: 700;
+    color: #252525;
+    background-color: transparent;
+    display: inline-block;
+    border: 1px solid #ccc;
+    border-radius: 0 0 20px 20px;
+} */
+
+.inputfile:focus + label,
+.inputfile + label:hover {
+    background-color: #00a99d;
+    color: #fff;
+}
+
+.inputfile + label {
+	cursor: pointer; /* "hand" cursor */
+}
+
+.inputfile:focus + label {
+	outline: 1px dotted #000;
+	outline: -webkit-focus-ring-color auto 5px;
+}
+
+.regesterBtn-w {
+    width: 200px;
+    display: block;
+    margin:  20px auto;
+}
+
+.inlineBlock-w {
+    display: inline-block !important;
+    float: right !important;
+    margin: 40px 0 !important;
+}
+
+.ql-container  {
+    min-height: 100px !important;
+}

src/app/dashboard/supervisor/supervisor-add/supervisor-add.component.html

@@ -0,0 +1,91 @@
+<div class="addHospital-w">
+  <div class="container">
+    
+    <div class="containerContent-w">
+        <div class="row">
+            <div class="col-12">
+      
+              <form (ngSubmit)="onSubmitted()" #f="ngForm">
+                <div class="addHospital-w">
+                    <div class="container">
+                      
+                      <div class="row" style="margin-bottom: 30px;">
+                          <div class="col-12">
+                            <ul class="list-unstyled titileLi-w">
+                              <li class="headingText-w">خدمه التدريب</li>
+                              <li class="headingText-w" style="cursor:pointer" (click)="authSer.perviousLocation()" style="cursor: pointer;">ربط المشرفين بالاقسام</li>
+                              <li class="headingText-w activeLi-w" style="margin-right:5px"> {{typeLink}} </li>
+                            </ul>
+                          </div>
+                      </div>
+                
+                      <div class="containerContent-w">
+                        <div class="row">
+                            <div class="col-12">
+                              <form (ngSubmit)="onSubmitted(f)" #f="ngForm">
+                                <div class="row">
+
+                                  <div class="col-12" *ngIf="supervisorId">
+                                    <div class="form-group">
+                                      <h2>{{departmentName}}</h2>
+                                    </div>
+                                  </div>
+                                  
+                                  <div class="col-12 col-sm-12 col-md-4" *ngIf="!supervisorId">
+                                    <div class="form-group">
+                                      <label for="department" style="float: right; margin-right: 5px">القسم<span class="spanReqired-w">*</span></label>
+                                      <select class="form-control" id="department" [ngModel]="superDeaprt.department_id" name="department_id" (change)="changeDepartment($event)" required>
+                                        <option *ngFor="let department of departments" [value]="department.id">{{department.name}}</option>
+                                      </select>
+                                    </div>
+                                  </div>
+
+                                  <div class="col-12 col-sm-12 col-md-4" *ngIf="superDeaprt.email != '' ">
+                                    <label for="email" style="float: right; margin-right: 5px">البريد الإلكتروني<span class="spanReqired-w">*</span></label>
+                                    <input type="email" class="form-control" placeholder="البريد الإلكتروني" id="email" [ngModel]="superDeaprt.email" name="email" email ngModel #email="ngModel" required />
+                                    <span class="help-block" *ngIf="!email.valid && email.touched" style="color:red">من فضلك أدخل إيميل صحيح</span>
+                                  </div>
+
+                                  <div class="col-12 col-sm-12 col-md-4" *ngIf="superDeaprt.phone != ''">
+                                    <div class="form-group">
+                                        <label for="phone" style="float: right; margin-right: 5px">رقم الجوال<span class="spanReqired-w">*</span></label>
+                                        <input type="phone" class="form-control" placeholder="رقم الجوال" id="phone" [ngModel]="superDeaprt.phone" name="phone" ngModel required/> 
+                                    </div>
+                                  </div>
+
+                                  <div class="col-12 col-sm-12 col-md-4" *ngIf="superDeaprt.switch_phone != ''">
+                                    <div class="form-group">
+                                      <label for="switchPhone" style="float: right; margin-right: 5px">التحويله</label>
+                                      <input type="phone" class="form-control" placeholder="رقم الجوال البديل" id="switchPhone" [ngModel]="superDeaprt.switch_phone" name="switch_phone" ngModel required/> 
+                                    </div>
+                                  </div>
+
+                                  <div class="col-12 col-sm-12 col-md-4" *ngIf="superDeaprt.supervisor_id != ''">
+                                    <div class="form-group">
+                                      <label for="supervisor" style="float: right; margin-right: 5px">المشرف<span class="spanReqired-w">*</span></label>
+                                      <select class="form-control" id="supervisor" name="supervisor_id" [ngModel]="superDeaprt.supervisor_id" required>
+                                        <option *ngFor="let supervisor of supervisorList" [value]="supervisor.id">{{supervisor.name}}</option>
+                                      </select>
+                                    </div>
+                                  </div>
+                                  
+                                  <div class="col-12">
+                                    <button type="submit" [disabled]="!f.valid || checkSaveClick" class="btn btn-success rightW">حفظ</button>
+                                    <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()">إلغاء</button>
+                                  </div>
+
+                                </div>
+                              </form>
+                            </div>
+                          </div>
+                      </div>
+
+                    </div>
+                </div>                  
+              </form>
+      
+            </div>
+          </div>
+    </div>
+  </div>
+</div>

src/app/dashboard/supervisor/supervisor-add/supervisor-add.component.ts

@@ -0,0 +1,157 @@
+import { ActivatedRoute, Params } from '@angular/router';
+import { Location } from '@angular/common';
+import { DashboardService } from './../../../shared/dashboard.service';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { FormGroup, NgForm } from '@angular/forms';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { UserService } from '../../../shared/user.service';
+import { ToastrService } from 'ngx-toastr';
+import { NgxSpinnerService } from 'ngx-spinner';
+
+@Component({
+  selector: 'app-supervisor-add',
+  templateUrl: './supervisor-add.component.html',
+  styleUrls: ['./supervisor-add.component.css']
+})
+export class SupervisorAddComponent implements OnInit {
+
+  constructor(private userSer: UserService, 
+    private dashboardService: DashboardService,
+    private toastr: ToastrService,
+    private location: Location,
+    private spinner: NgxSpinnerService,
+    private route: ActivatedRoute,
+    private authSer: AuthServiceService) { }
+
+    formData: any;
+    checkSaveClick: boolean = false;
+
+  superDeaprt = {
+    email: '',
+    phone: '',
+    switch_phone: '',
+    department_id: '',
+    supervisor_id: '',
+  }
+
+  departments = []; //all departments list view
+  department = []; //department for edit
+  supervisorList = []; 
+  departmentData = [];
+  supervisorId: number;
+  departmentName: string = '';
+
+  checkSaveDisabled: boolean = false;
+  typeLink: string = '';
+
+  ngOnInit() {
+
+
+  //show / hide notification search in header
+  this.authSer.notificationLogin = true;
+  this.authSer.showSearchHeader = false;
+  this.authSer.showHeaderLogin = false;
+  this.authSer.showHeaderDashBoard = true;
+  this.authSer.internalHeader = false;
+  
+
+    //get user departments
+    this.userSer.getTrainningServiceDepartments().subscribe(
+      (responce) => {
+        console.log(responce);
+        this.departments = responce['departments'];
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+    this.route.params.subscribe(
+      (params: Params) => {
+        this.supervisorId = +params['superEditId'];
+      }
+    );
+
+    if(this.supervisorId) {
+      this.spinner.show();
+      this.typeLink = 'تعديل';
+      this.dashboardService.getItemData(this.supervisorId, 'supervisor').subscribe(
+        (responce) =>{
+          console.log('get data of one', responce);
+          this.department = responce['department'];
+          this.superDeaprt.email = this.department['email'];
+          this.superDeaprt.phone = this.department['phone'];
+          this.superDeaprt.switch_phone = this.department['switch_phone'];
+          this.superDeaprt.department_id = this.department['id'];
+          this.superDeaprt.supervisor_id = this.department['supervisor_id'];
+          this.getSupervisors(this.department['id']);
+          this.departmentName = this.department['name'];
+          console.log(this.superDeaprt.department_id);
+          this.spinner.hide();
+        },
+        (error) => {
+          console.log(error);
+        }
+      )
+    } else {
+      this.typeLink = 'إضافه';
+    }
+  }
+
+  getSupervisors(departmentId: number) {
+    this.userSer.getSupervisorsList(departmentId).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.supervisorList = responce['users'];
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+  }
+
+  changeDepartment(event) {
+    console.log(event.target.value);
+    this.getSupervisors(event.target.value);
+    this.userSer.getDepartmentData(event.target.value).subscribe(
+      (responce) => {
+        this.departmentData = responce['department'];
+        this.superDeaprt.email = this.departmentData['email'];
+        this.superDeaprt.phone = this.departmentData['phone'];
+        this.superDeaprt.switch_phone = this.departmentData['switch_phone'];
+        this.superDeaprt.supervisor_id = this.departmentData['supervisor_id'];
+        console.log(this.superDeaprt.supervisor_id);
+        console.log(this.departmentData);
+      },
+      (error) => {
+        console.log(error);
+      }
+    )
+  }
+
+  onSubmitted(form: NgForm) {
+    this.formData = form.value;
+    if(this.supervisorId){
+      this.formData['department_id'] = this.superDeaprt.department_id;
+    }
+    console.log(this.formData);
+    this.dashboardService.addItem(this.formData, 'supervisor').subscribe(
+      (responce) => {
+        console.log(responce);
+        this.checkSaveClick = false;
+        if(this.supervisorId) {
+          this.toastr.success('تمت التعديل بنجاح');
+        } else {
+          this.toastr.success('تمت الاضافه بنجاح');
+        }
+        this.location.back();
+      },
+      (error) => {
+        console.log(error);
+        this.checkSaveClick = false;
+        this.toastr.error('خطأ في الحفظ !');
+      }
+    );
+  }
+
+}

src/app/dashboard/supervisor/supervisor-list/supervisor-list.component.css

@@ -0,0 +1,30 @@
+.table {
+    margin: 30px 0;
+}
+
+.dashButton-w {
+    float: right;
+    margin: 10px;
+}
+
+.custom-control-label::after,
+.custom-control-label::before {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.fixedWidthLabel-w::after,
+.fixedWidthLabel-w::before {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.disblayBlock-w {
+    display: block;
+}
+/* 
+.centerIneerItem {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+} */

src/app/dashboard/supervisor/supervisor-list/supervisor-list.component.html

@@ -0,0 +1,79 @@
+<div class="container">
+  
+  <div class="row">
+    <div class="col-12">
+        <ul class="list-unstyled titileLi-w">
+          <li class="headingText-w" style="cursor: pointer;">{{servicesName}} </li>
+          <li class="headingText-w activeLi-w" style="margin-right:5px">ربط المشرفين بالأقسام</li>
+        </ul>
+    </div>
+  </div>
+
+  <div class="containerContent-w">
+    
+    <div class="row">
+        <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+            <button type="button" class="btn btn-outline-success butttonCreate dashButton-w" (click)="onAdd()" *ngIf="authSer.showAddBtn"><i class="fas fa-plus marginFontAowsome-w"></i>إنشاء جديد</button>
+            <button type="button" class="btn btn-outline-danger butttonDelete dashButton-w" (click)="onDelete()" *ngIf="authSer.showDeleteBtn"><i class="fas fa-times marginFontAowsome-w"></i>حذف</button>
+        </div>
+        <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+          <div class="form-group">
+            <input type="text" placeholder="البحث" class="form-control inputSearchTable-w" style="margin-top:13px;" (input)="filtterFunc($event)"/>
+            <hr>
+          </div>
+        </div>
+      </div>
+    
+      <div class="row">
+          <div class="col-12 col-sm-12 col-md-12 col-lg-6">
+            <div class="form-group">
+              <span class="spanSelect-w">
+                <select [ngModel]="dataTableNumber" class="form-control selectButton-w" (input)="onGetValue($event)">
+                  <option value="5">5</option>
+                  <option value="10">10</option>
+                  <option value="15">15</option>
+                  <option value="20">20</option>
+                </select>
+                من العناصر يتم عرضها 
+              </span>
+            </div>
+          </div>
+          <div class="col-12 col-sm-12 col-md-12 col-lg-6">
+          
+          </div>
+      </div>
+      
+      <table class="table table-bordered">
+          <thead class="headBackground-w">
+            <tr>
+              <th>
+                <div class="custom-control custom-checkbox">
+                  <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1">
+                  <!-- <label class="custom-control-label fixedWidthLabel-w checkAll-w" for="customCheck" style="margin-bottom:20px; cursor: pointer;"></label> -->
+                </div>
+              </th>
+              <th> إسم القسم</th>
+              <th>إسم المشرف</th>
+              <th>الإيميل</th>
+              <th> رقم الجوال</th>
+              <th *ngIf="authSer.showEditBtn">تعديل</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr *ngFor="let data of superDepartList | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
+              <td>
+                <div class="custom-control custom-checkbox centerIneerItem">
+                  <input type="checkbox" class="custom-control-input" id="{{data.id}}" [(ngModel)]="data.selected" [value]='data' (change)="checkIfAllSelected();">
+                </div>
+              </td>
+              <td>{{data.name}}</td>
+              <td> {{data.supervisor_name}}</td>
+              <td>{{data.email }}</td>
+              <td>{{data.phone}}</td>
+              <td *ngIf="authSer.showEditBtn"><button type="button" class="btn btn-outline-secondary" (click)="onEdit(data.id)"><i class="fas fa-edit"></i></button></td>
+            </tr>
+          </tbody>
+        </table>
+        <pagination-controls nextLabel="التالي" previousLabel="السابق" (pageChange)="onPageChange($event)"></pagination-controls>
+  </div>
+</div>

src/app/dashboard/supervisor/supervisor-list/supervisor-list.component.ts

@@ -0,0 +1,264 @@
+import { DashboardService } from './../../../shared/dashboard.service';
+import { MainMenuService } from './../../../shared/main-menu.service';
+import { Component, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { AuthServiceService } from './../../../shared/auth-service.service';
+import { ActivatedRoute, Router, Params } from '@angular/router';
+import { UserService } from '../../../shared/user.service';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ToastrService } from 'ngx-toastr';
+import { Overlay } from 'ngx-modialog';
+import { Modal } from 'ngx-modialog/plugins/bootstrap';
+
+@Component({
+  selector: 'app-supervisor-list',
+  templateUrl: './supervisor-list.component.html',
+  styleUrls: ['./supervisor-list.component.css']
+})
+export class SupervisorListComponent implements OnInit {
+
+  superVisorId: number;
+  superDepartList = [];
+  superDepartListIds = [];
+  count: number;
+  perPagePagenation: number;
+  p: number[] = [];
+  currentPage:number = 1;
+  filtterStatus = '';
+  selectedAll: any;
+  userLoginId:number;
+  serviceId:number;
+  dataTableNumber: number = 5;
+  pages = [];
+  servicesName: string = '';
+
+  constructor(private route: ActivatedRoute, 
+    private router: Router, 
+    private userSer: UserService,
+    private http: HttpClient,
+    private toastr: ToastrService,
+    private spinner: NgxSpinnerService,
+    private modal: Modal,
+    private dashBoardService: DashboardService,
+    private authSer: AuthServiceService) { }
+
+  ngOnInit() {
+    
+    this.spinner.show();
+    //init the values of permision boolean
+    this.authSer.showAddBtn = false;
+    this.authSer.showDeleteBtn = false;
+    this.authSer.showEditBtn = false;
+    //show / hide notification search in header
+    this.authSer.notificationLogin = true;
+    this.authSer.showSearchHeader = false;
+    this.authSer.showHeaderLogin = false;
+    this.authSer.showHeaderDashBoard = true;
+    this.authSer.showDashboardHeader = true;
+    this.authSer.internalHeader = false;
+
+    
+    
+    this.route.params.subscribe(
+      (params: Params) => {
+        this.superVisorId = params['superVisorId'];
+      }
+    );
+    
+    //to show / hide permissions
+
+  this.route.parent.params.subscribe(
+    (params:Params) => {
+        this.userLoginId = params['userID'];
+        this.serviceId = params['serviceID'];
+        this.servicesName = 'خدمه التدريب';
+
+        this.userSer.getPagesPermetiotns(this.userLoginId, this.serviceId).subscribe(
+          (responce) => {
+            console.log(responce);
+            this.pages = responce['pages'];
+            for(let i = 0; i< this.pages.length; i++) {
+              if(this.pages[i].id == 33) {
+                if(this.pages[i]['permissions'][0].name == 'asign_supervisors_to_departments') {
+                  this.authSer.showAddBtn = true;
+                  this.authSer.showEditBtn = true;
+                  this.authSer.showDeleteBtn = true;
+                } else {
+                  console.log('no permissions');
+                }
+              } else {
+                console.log('no events');
+              }
+            }
+            this.spinner.hide();
+          },
+          (error) => {console.log(error)}
+        );
+      }
+    );
+
+    //get list data 
+    this.dashBoardService.getListData(this.superVisorId, this.currentPage ,this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.superDepartList = responce['departments'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        console.log('evennnnts', this.superDepartList);
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+        this.spinner.hide();
+      }
+    );
+    
+  }
+
+  //make all checkbox of user checked 
+  selectAll() {
+    for (var i = 0; i < this.superDepartList.length; i++) {
+      this.superDepartList[i].selected = this.selectedAll;
+    }
+  }
+
+  checkIfAllSelected() {
+    this.selectedAll = this.superDepartList.every(function(item:any) {
+      return item.selected == true;
+    });
+  }
+
+  //filtter function
+  filtterFunc(data) {
+    this.superDepartList = [];
+    console.log(data.target.value);
+    const dataSearch = data.target.value;     
+    this.currentPage = 1;
+    console.log('search curent page', this.currentPage);
+    console.log('search page id', this.superVisorId);
+    this.dashBoardService.getDataUSerSearchBar(dataSearch, this.superVisorId, this.currentPage, this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.superDepartList = responce['departments'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        console.log('filtter count', this.count);
+        console.log('filtter perPagePAgenation', this.perPagePagenation);
+      },
+      (error) => {
+        console.log(error)
+      }
+    );
+  };
+
+  //change pagenation
+  onPageChange(pagenationNumber) {
+    this.spinner.show();
+    this.currentPage = pagenationNumber;
+    this.superDepartList = [];
+    //console.log(pagenationNumber);
+    //console.log(this.pageId);
+    this.dashBoardService.getListData(this.superVisorId, pagenationNumber, this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.superDepartList = responce['departments'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        console.log(this.superDepartList);
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+        this.spinner.hide();
+      }
+    );
+  }
+
+
+
+  //determine the list count from select element 
+  onGetValue(event) {
+    this.spinner.show();
+    this.superDepartList = [];
+    this.dataTableNumber = event.target.value;
+    this.dashBoardService.getListData(this.superVisorId, this.currentPage, this.dataTableNumber).subscribe(
+      (responce) => {
+        console.log(responce);
+        this.superDepartList = responce['departments'];
+        this.count = responce['count'];
+        this.perPagePagenation = responce['per_page'];
+        this.spinner.hide();
+      },
+      (error) => {
+        console.log(error);
+        this.spinner.hide();
+      }
+    );
+  };
+  
+  onDelete() {
+
+    this.superDepartListIds = [];
+    for(let i = 0; i < this.superDepartList.length; i++) {
+      if(this.superDepartList[i].selected == true) {
+        this.superDepartListIds.push(this.superDepartList[i].id);
+      }
+    }
+
+    console.log(this.superDepartListIds);
+    if(this.superDepartListIds.length > 0) {
+      const dialogRef = this.modal.alert()
+      .size('sm')
+      .showClose(true)
+      .title('تأكيد الحذف')
+      .body(`
+          <h4>هل ترغب في حذف العناصر المحدده ؟ </h4>
+          `)
+      .open();
+  
+        dialogRef.result
+        .then( result => 
+          this.dashBoardService.deleteItem(this.superDepartListIds, this.superVisorId).subscribe(
+              (responce) => {
+                console.log(responce);
+                this.toastr.success('تم الحذف');
+                this.spinner.show();
+                this.superDepartList = [];
+                this.dashBoardService.getListData(this.superVisorId, this.currentPage, this.dataTableNumber).subscribe(
+                  (responce) => {
+                    console.log(responce);
+                    this.count = responce['count'];
+                    this.perPagePagenation = responce['per_page'];
+                    this.superDepartList = responce['departments'];
+                    console.log(this.superDepartList);
+                    this.spinner.hide();
+                  },
+                  (error) => {
+                    console.log(error);
+                  }
+                )
+              },
+              (error) => {
+                console.log(error);
+                this.toastr.error('حدث خطأ رجاء الانتظار وحاول ثانيه');
+                this.spinner.hide();
+              }
+          )
+        );
+    } else {
+      this.toastr.warning('لم يتم أختيار أي عنصر للحذف !');
+    }
+  };
+
+  //add function
+  onAdd() {
+    console.log('service/' + this.userLoginId + '/' + this.serviceId + '/superVisor/Add');
+    this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/superVisor/Add']);
+  }
+
+  //edit function
+   onEdit(editMenuID) {
+    this.router.navigate(['service/' + this.userLoginId + '/' + this.serviceId + '/superVisor/edit/' + editMenuID]);
+  }
+
+}

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

@@ -102,3 +102,187 @@ input,select {
 }
 
 
+
+.userForm-w {
+    width: 100%;
+    padding: 20px 0;
+    margin-top: -6px;
+    direction: rtl;
+    font-family: 'Cairo', sans-serif;
+}
+
+input,select {
+    font-size: 12px; 
+    background-color: #fff;
+    border: 2px solid #bda380;
+}
+
+/* input.ng-invalid.ng-touched {
+    border: 2px solid #ccc;
+}
+
+input.ng-invalid {
+    border: 2px solid #ccc;
+}
+
+select.ng-invalid{
+    border: 2px solid #ccc;
+} */
+.custom-radio .custom-control-label::before{
+	    border: 1px solid #b28c5e;
+}
+.custom-radio .custom-control-input:checked~.custom-control-label::before{
+	background-color: #906635;
+	    border: 1px solid #fff;
+}
+
+.formfieldset{
+	border: 1px solid #61606073;
+    width: 100%;
+	border-radius: 3px;
+	    margin-top: 40px;
+    background-color: #a5a3a31a;
+}
+.formfieldset legend{
+	    float: right;
+}
+.formfieldset legend span{
+    width: auto !important;
+    font-size: 15px;
+    border: 1px solid #616060;
+    padding: 2px 15px;
+    background-color: #616060;
+    float: right;
+    margin: -15px 14px 0px 0px;
+    border-radius: 3px;
+    color: #ffffff;
+}
+.imgProfile {
+    width: 100%;
+    border-radius: 20px 20px 0 0;
+    border-radius: 50%;
+    border: 1px solid #ccc;
+
+}
+
+.imgContainer {
+    width: 200px;
+    position: relative;
+    border-radius: 20px;
+    margin: 30px auto;
+}
+.iconUpload-w {
+    width: 30px;
+    font-size: 1.25em;
+    font-weight: 700;
+    color: #252525;
+    display: inline-block;
+    border-radius: 0 0 20px 20px;
+    position: absolute;
+    right: 40%;
+    border: 1px solid #ccc;
+    border-radius: 50%;
+    bottom: 0;
+}
+
+.inputfile {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
+/* .inputfile + label {
+    width: 100%;
+    font-size: 1.25em;
+    font-weight: 700;
+    color: #252525;
+    background-color: transparent;
+    display: inline-block;
+    border: 1px solid #ccc;
+    border-radius: 0 0 20px 20px;
+} */
+
+.inputfile:focus + label,
+.inputfile + label:hover {
+    background-color: #00a99d;
+    color: #fff;
+}
+
+.inputfile + label {
+	cursor: pointer; /* "hand" cursor */
+}
+
+.inputfile:focus + label {
+	outline: 1px dotted #000;
+	outline: -webkit-focus-ring-color auto 5px;
+}
+
+
+
+.inlineBlock-w {
+    display: inline-block !important;
+    float: right !important;
+    margin: 40px 0 !important;
+}
+
+
+.regesterBtn-w {
+    margin:  20px 10px;
+    float: right;
+}
+
+.inlineBlock-w {
+    display: inline-block !important;
+    float: right !important;
+    margin: 40px 0 !important;
+}
+
+.formStyle{
+    border: 1px solid #ccc;
+    border-top: 4px solid #bda380;
+    padding: 20px;
+    margin: 0 auto
+}
+
+
+
+.titileLi-w {
+    margin: 0 65px;
+}
+.titileLi-w li {
+    margin: 0 5px;
+}
+
+.errorMessage-w {
+    font-size: 14px;
+    text-align: right;
+    margin: 5px;
+    color: red;
+}
+/* start media query style */
+
+@media(max-width: 767px){
+    .formStyle {
+        padding: 20px;
+    }
+
+    input,select {
+        font-size: 12px; 
+    }
+}
+
+@media(min-width: 767px) and (max-width: 991px){
+    .formStyle {
+        padding: 20px;
+    }
+    input,select {
+        font-size: 12px; 
+    }
+}
+
+
+
+

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

@@ -14,6 +14,22 @@
       <div class="containerContent-w">
         <form [formGroup]="signupForm" (ngSubmit)="onSubmittedForm()">
           <div class="row">
+            
+            <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+              <div class="form-group">
+                <label style="float: right; margin-right:5px;margin-top:10px">الحاله <span class="spanReqired-w">*</span></label>
+                <div class="custom-control custom-radio inlineBlock-w" style="padding: 2px 31px;background: #bd90592e;color: #a98559;border: 1px solid #b38553c2;">
+                  <input type="radio" class="custom-control-input customStyleInput" id="defaultUnradio" value="1" formControlName="type" name="type" (change)="checkTypeUser($event)">
+                  <label class="custom-control-label" for="defaultUnradio" style="cursor: pointer;">زائر</label>
+                </div>
+                
+                <div class="custom-control custom-radio inlineBlock-w" style="padding: 2px 31px;background: #bd90592e;color: #a98559;border: 1px solid #b38553c2;">
+                  <input type="radio" class="custom-control-input customStyleInput" id="defaultRadio" value="0" formControlName="type" name="type" (change)="checkTypeUser($event)">
+                  <label class="custom-control-label" for="defaultRadio" style="cursor: pointer;">موظف</label>
+                </div>
+
+              </div>
+            </div>
 
             <div class="col-12 col-sm-12 col-md-12 col-lg-12" style="margin-bottom:30px">
               <div class="form-group text-center imgContainer">
@@ -51,7 +67,7 @@
             <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="identity_id != 4">
               <div class="form-group">
                 <label for="identityNumber" style="float:right">رقم الهويه <span class="spanReqired-w">*</span></label>
-                <input type="phone" class="form-control" placeholder="رقم الهويه"d="identityNumber" formControlName="identity_number" appNumber (input)="onIdentitiyChange($event.target.value)" />
+                <input type="phone" class="form-control" placeholder="رقم الهويه"d="identityNumber" formControlName="identity_number" appOnlyNumber (input)="onIdentitiyChange($event.target.value)" />
                 <span *ngIf="identity_id == 1"  style="color:red">أدخل رقم هويه مكون من 10 أرقام يبدأ برقم 1</span>
                 <span *ngIf="identity_id == 2" style="color:red">أدخل رقم هويه مكون من 10 أرقام </span>
                 <span *ngIf="identity_id == 3" style="color:red">أدخل رقم الإقامه مكون من 10 أرقام يبدأ برقم 2 </span>
@@ -95,7 +111,7 @@
               </div>
             </div>
 
-            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="signupForm.controls.type.value == '0' ">
               <div class="form-group">
                 <label for="functional_number" style="float:right">الرقم الوظيفي <span class="spanReqired-w">*</span></label>
                 <input type="number" class="form-control" id="functional_number" formControlName="functional_number" />
@@ -110,16 +126,17 @@
                 <input type="date" [max]="authSer.end" id="birthdate" class="form-control" formControlName="birthday" /> 
               </div>
             </div>
-            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="signupForm.controls.type.value == '0' ">
               <div class="form-group">
                 <label for="date_employment" style="float:right">تاريخ التوظيف الميلادي <span class="spanReqired-w">*</span></label>
                 <input type="date" class="form-control"  id="date_employment" formControlName="date_of_employment_gre" />
               </div>
             </div>
 
-            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="signupForm.controls.type.value == '0' ">
               <div class="form-group">
-                <label for="date_employment_hij" style="float:right">تاريخ التوظيف الهجري <span class="spanReqired-w">*</span></label>
+                <label for="date_employment_hij" style="float:right" >تاريخ التوظيف الهجري <span class="spanReqired-w">*</span></label>
                 <div *ngIf='bindingDateSplit && typeMode'>
                   <app-higri-date (onDatePicked)="getDate($event)" [myDate]="bindingDateSplit"></app-higri-date>
                 </div>
@@ -129,13 +146,14 @@
               </div>
             </div>
             
-            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="signupForm.controls.type.value == '0' ">
               <div class="form-group">
                 <label for="position" style="float:right">المنصب <span class="spanReqired-w">*</span></label>
                 <input type="text" id="position" class="form-control" placeholder="المنصب" formControlName="position"  />
               </div>
             </div>
-            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="signupForm.controls.type.value == '0' ">
               <div class="form-group">
                 <label style="float:right">اسم الوظيفه</label>
                 <select class="form-control" formControlName="job_title_id">
@@ -143,7 +161,8 @@
                 </select>
               </div>
             </div>
-            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="signupForm.controls.type.value == '0' ">
               <div class="form-group">
                 <label style="float:right">التخصص</label>
                 <select class="form-control" formControlName="specialization_id">
@@ -151,7 +170,8 @@
                 </select>
               </div>
             </div>
-            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="signupForm.controls.type.value == '0' ">
               <div class="form-group">
                 <label style="float:right">نوع العقد</label>
                 <select class="form-control" formControlName="contract_type_id">
@@ -159,7 +179,8 @@
                 </select>
               </div>
             </div>
-            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+
+            <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="signupForm.controls.type.value == '0' ">
               <div class="form-group">
                 <label style="float:right">الملاك الوظيفي</label>
                 <select class="form-control" formControlName="staff_id">
@@ -178,7 +199,8 @@
                 </select>
               </div>
             </div>
-            <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+
+            <div class="col-12 col-sm-12 col-md-6 col-lg-4" *ngIf="signupForm.controls.type.value == '0' ">
               <div class="form-group">
                 <label style="float:right">الاداره <span class="spanReqired-w">*</span></label>
                 <select class="form-control" formControlName="adminstration_id" (change)="getDepartment()">
@@ -186,6 +208,7 @@
                 </select>
               </div>
             </div>
+
             <div class="col-12 col-sm-12 col-md-4 col-lg-4" *ngIf="showDepart">
               <div class="form-group">
                 <label style="float:right">القسم <span class="spanReqired-w">*</span></label>
@@ -194,6 +217,7 @@
                 </select>
               </div>
             </div>
+
             <div class="col-12 col-sm-12 col-md-4 col-lg-4">
               <label style="float: right; margin-right:5px;margin-top:10px">النوع <span class="spanReqired-w">*</span></label>
               <div class="form-group">

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

@@ -49,10 +49,11 @@ export class FormUserComponent implements OnInit {
   number_identitiy:number;
   checkPageAppear: boolean  = true;
   checkRequiredSpan:boolean = true;
-  urlImg: string =  '../../../../assets/image/Group 299.png';
+  urlImg: string =  '../../../../assets/image/avatar.png';
   higriDateVal = "";
   bindingDateSplit;
   checkSaveDisabled:boolean = false;
+  checkUserType:number;
 
   end:any;
 
@@ -173,30 +174,49 @@ export class FormUserComponent implements OnInit {
           this.userSer.onGetUserData(this.userID, 'editUs').subscribe(
             (responce) => {
               console.log('data user' , responce);
-              this.signupForm.patchValue(
-                {
-                  name: responce['user'].name,
-                  position: responce['user'].position,
-                  email: responce['user'].email,
-                  password: responce['user'].password,
-                  password_confirmation: responce['user'].password_confirmation,
-                  phone: responce['user'].phone,
-                  gender: responce['user'].gender,
-                  birthday: responce['user'].birthday,
-                  nationality_id: responce['user'].nationality_id,
-                  date_of_employment_gre: responce['user'].date_of_employment_gre,
-                  job_title_id: responce['user'].job_title_id,
-                  specialization_id: responce['user'].specialization_id,
-                  functional_number: responce['user'].functional_number,
-                  adminstration_id: responce['user'].adminstration_id,
-                  department_id: responce['user'].department_id,
-                  contract_type_id: responce['user'].contract_type_id,
-                  staff_id: responce['user'].staff_id,
-                  status: responce['user'].status,
-                  identity_type_id: responce['user'].identity_type_id,
-                  identity_number: responce['user'].identity_number,
-                }
-              );
+              if(responce['user'].type == '0') {
+                this.signupForm.patchValue(
+                  {
+                    name: responce['user'].name,
+                    type: responce['user'].type,
+                    position: responce['user'].position,
+                    email: responce['user'].email,
+                    password: responce['user'].password,
+                    password_confirmation: responce['user'].password_confirmation,
+                    phone: responce['user'].phone,
+                    gender: responce['user'].gender,
+                    birthday: responce['user'].birthday,
+                    nationality_id: responce['user'].nationality_id,
+                    date_of_employment_gre: responce['user'].date_of_employment_gre,
+                    job_title_id: responce['user'].job_title_id,
+                    specialization_id: responce['user'].specialization_id,
+                    functional_number: responce['user'].functional_number,
+                    adminstration_id: responce['user'].adminstration_id,
+                    department_id: responce['user'].department_id,
+                    contract_type_id: responce['user'].contract_type_id,
+                    staff_id: responce['user'].staff_id,
+                    status: responce['user'].status,
+                    identity_type_id: responce['user'].identity_type_id,
+                    identity_number: responce['user'].identity_number,
+                  }
+                );
+              } else {
+                this.signupForm.patchValue(
+                  {
+                    name: responce['user'].name,
+                    type: responce['user'].type,
+                    email: responce['user'].email,
+                    phone: responce['user'].phone,
+                    gender: responce['user'].gender,
+                    birthday: responce['user'].birthday,
+                    nationality_id: responce['user'].nationality_id,
+                    status: responce['user'].status,
+                    identity_type_id: responce['user'].identity_type_id,
+                    identity_number: responce['user'].identity_number,
+                  }
+                );
+              }
+              
               this.urlImg = responce['user'].photo ? this.authSer.pathImg + responce['user'].photo : this.urlImg;
               console.log(this.urlImg);
               const date = responce['user'].date_of_employment_hij.split('-');
@@ -224,6 +244,7 @@ export class FormUserComponent implements OnInit {
       //creating user create form
       this.signupForm = new FormGroup({
         name: new FormControl(null, Validators.required),
+        type: new FormControl('0'),
         identity_type_id: new FormControl(null, [Validators.required]),
         identity_number: new FormControl(null,Validators.required),
         position: new FormControl(null, Validators.required),
@@ -251,6 +272,7 @@ export class FormUserComponent implements OnInit {
       //creating edit form user 
       this.signupForm = new FormGroup({
         name: new FormControl(null, Validators.required),
+        type: new FormControl(null),
         identity_type_id: new FormControl(null, [Validators.required]),
         identity_number: new FormControl(null, Validators.required),
         position: new FormControl(null, Validators.required),
@@ -295,6 +317,51 @@ export class FormUserComponent implements OnInit {
     );
   }
 
+  checkTypeUser(typeUser) {
+    console.log(typeUser.target.value);
+    this.checkUserType = typeUser.target.value;
+    if(typeUser.target.value == 1) {
+      this.signupForm = new FormGroup({
+        name: new FormControl(null, Validators.required),
+        type: new FormControl('1'),
+        identity_type_id: new FormControl(null, [Validators.required]),
+        identity_number: new FormControl(null, Validators.required),
+        email: new FormControl(null, [Validators.required,Validators.email]),
+        password: new FormControl(null, [Validators.required, Validators.minLength(6)]),
+        password_confirmation: new FormControl(null, [Validators.required, Validators.minLength(6)]),
+        gender: new FormControl(null, Validators.required),
+        birthday: new FormControl(null, Validators.required),
+        nationality_id: new FormControl(null, Validators.required),
+        phone: new FormControl(null, Validators.required),
+        status: new FormControl(null , Validators.required),
+      });
+    } else {
+      this.signupForm = new FormGroup({
+        name: new FormControl(null, Validators.required),
+        type: new FormControl('0'),
+        identity_type_id: new FormControl(null, [Validators.required]),
+        identity_number: new FormControl(null, Validators.required),
+        position: new FormControl(null, Validators.required),
+        email: new FormControl(null, [Validators.required,Validators.email]),
+        password: new FormControl(null, [Validators.required, Validators.minLength(6)]),
+        password_confirmation: new FormControl(null, [Validators.required, Validators.minLength(6)]),
+        phone: new FormControl(null, Validators.required),
+        gender: new FormControl(null, Validators.required),
+        birthday: new FormControl(null, Validators.required),
+        adminstration_id: new FormControl(null, Validators.required),
+        department_id: new FormControl(null, Validators.required),
+        nationality_id: new FormControl(null, Validators.required),
+        date_of_employment_gre: new FormControl(null, Validators.required),
+        date_of_employment_hij: new FormControl(null,Validators.required),
+        job_title_id: new FormControl(null),
+        specialization_id: new FormControl(null),
+        functional_number: new FormControl(null, Validators.required),
+        contract_type_id: new FormControl(null),
+        staff_id: new FormControl(null),
+      });
+    } 
+  }
+
 
 
   //submitted form
@@ -302,10 +369,15 @@ export class FormUserComponent implements OnInit {
 
     this.checkSaveDisabled = true;
     const userData = this.signupForm.value;
-    userData['date_of_employment_hij'] = this.higriDateVal;
-    const birthDate = userData['birthday'].split('-')[0];
-    const joinJopYear = userData['date_of_employment_gre'].split('-')[0];
-    console.log(joinJopYear);
+    let joinJopYear;
+    let birthDate;
+    if(userData['type'] == 0){
+      userData['date_of_employment_hij'] = this.higriDateVal;
+       birthDate = userData['birthday'].split('-')[0];
+       joinJopYear = userData['date_of_employment_gre'].split('-')[0];
+      console.log(joinJopYear);
+    }
+ 
    
 
     if(this.checkChangeImage) {
@@ -320,10 +392,13 @@ export class FormUserComponent implements OnInit {
       if(this.signupForm.get('password').value != this.signupForm.get('password_confirmation').value){
         this.toastr.warning('من فضلك تأكد أن كلمه المرور هي نفس تأكيد كلمه المرور ');
         this.checkSaveDisabled = false;
+      } else if(this.imageBase64 == ''){
+        this.toastr.warning('قم بإختيار صوره المستخدم !');
+        this.checkSaveDisabled = false;
       } else if(userData['date_of_employment_hij'] == "") {
           this.toastr.warning('من فضلك ، أدخل تاريخ التوظيف الهجري !');
           this.checkSaveDisabled = false;
-     }else if(this.signupForm.get('identity_number').value.substring(0,1) != 1 && this.signupForm.get('identity_type_id').value == 1){
+     } else if(this.signupForm.get('identity_number').value.substring(0,1) != 1 && this.signupForm.get('identity_type_id').value == 1){
         this.toastr.warning('رقم الهويه يجب ان يبدأ ب رقم 1');
         this.checkSaveDisabled = false;
       } else if(this.signupForm.get('identity_number').value.substring(0,1) != 2 && this.signupForm.get('identity_type_id').value == 3){
@@ -364,7 +439,7 @@ export class FormUserComponent implements OnInit {
         if(this.signupForm.get('identity_number').value.substring(0,1) != 1 && this.signupForm.get('identity_type_id').value == 1){
           this.toastr.warning('رقم الهويه يجب ان يبدأ ب رقم 1');
           this.checkSaveDisabled = false;
-        } else if(this.signupForm.get('identity_number').value.substring(0,1) != 2 && this.signupForm.get('identity_type_id').value == 3){
+        }else if(this.signupForm.get('identity_number').value.substring(0,1) != 2 && this.signupForm.get('identity_type_id').value == 3){
           this.toastr.warning('رقم الهويه يجب ان يبدأ ب رقم 2');
           this.checkSaveDisabled = false;
         } else if(birthDate > joinJopYear) {
@@ -388,6 +463,7 @@ export class FormUserComponent implements OnInit {
         }
       }
     }
+
   };
 
   getSelectedOptionText(event){

src/app/dashboard/users/users.component.html

@@ -3,7 +3,7 @@
   <div class="row">
     <div class="col-12">
         <ul class="list-unstyled titileLi-w">
-          <li class="headingText-w"> {{typeService}} > </li>
+          <li class="headingText-w">{{typeService}}</li>
           <li class="headingText-w activeLi-w" style="margin-right:5px"> {{typeLink}}  </li>
         </ul>
     </div>

src/app/login/login.component.ts

@@ -34,6 +34,7 @@ export class LoginComponent implements OnInit {
     // this.authSer.showHeaderLogin = true;
     this.authSer.showHeaderDashBoard = false;
     this.authSer.showDashboardHeader = true;
+    this.authSer.arabicTemplate = true;
     this.spinner.hide();
   }
 

src/app/regester/regester.component.html

@@ -4,7 +4,7 @@
     <div class="path">
       <div class="container">
         <ul class="list-unstyled titileLi-w">
-          <li class="headingText-w" (click)="authSer.perviousLocation()" style="cursor: pointer"> العوده > </li>
+          <li class="headingText-w" (click)="authSer.perviousLocation()" style="cursor: pointer"> العوده </li>
           <li class="headingText-w activeLi-w" (click)="authSer.perviousLocation()">  {{typeTitle}} </li>
         </ul> 
       </div>     
@@ -24,6 +24,22 @@
                   <label for="file" class="iconUpload-w"><i class="fas fa-upload"></i></label>
               </div>
             </div>
+
+            <div class="col-12 col-sm-12 col-md-6 col-lg-4" *ngIf="showTypeInput">
+              <div class="form-group">
+                <label style="float: right; margin-right:5px;margin-top:10px">الحاله <span class="spanReqired-w">*</span></label>
+                <div class="custom-control custom-radio inlineBlock-w" style="padding: 2px 31px;background: #bd90592e;color: #a98559;border: 1px solid #b38553c2;">
+                  <input type="radio" class="custom-control-input customStyleInput" id="defaultUnradio" value="1" formControlName="type" name="type" (change)="checkTypeUser($event)">
+                  <label class="custom-control-label" for="defaultUnradio" style="cursor: pointer;">زائر</label>
+                </div>
+                
+                <div class="custom-control custom-radio inlineBlock-w" style="padding: 2px 31px;background: #bd90592e;color: #a98559;border: 1px solid #b38553c2;">
+                  <input type="radio" class="custom-control-input customStyleInput" id="defaultRadio" value="0" formControlName="type" name="type" (change)="checkTypeUser($event)">
+                  <label class="custom-control-label" for="defaultRadio" style="cursor: pointer;">موظف</label>
+                </div>
+
+              </div>
+            </div>
 			
 			<div class="col-sm-12 col-md-12 col-lg-12">
 				<div class="row">
@@ -104,27 +120,24 @@
 			</div>
            
           
-			  <div class="col-sm-12 col-md-12 col-lg-12">
+			<div class="col-sm-12 col-md-12 col-lg-12" *ngIf="regesterForm.controls.type.value == '0' ">
 				<div class="row">
 					
 					<fieldset class="formfieldset">
+
 					  <legend>
 						<span>المعلومات الوظيفية</span>
 						</legend>
 					
-						  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
-              <div class="form-group">
-                <label for="phone" style="float:right">رقم الجوال <span class="spanReqired-w">*</span></label>
-                <input type="text" id="phone" appNumberDerictive class="form-control" placeholder="رقم الجوال يبدأ ب 05 ومكون من 10 أرقام" formControlName="phone" />
-              </div>
-            </div>
-						  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+						  
+						<div class="col-12 col-sm-12 col-md-6 col-lg-4">
               <div class="form-group">
                 <label for="functional_number" style="float:right"> الرقم الوظيفي <span class="spanReqired-w">*</span></label>
                 <input type="number" class="form-control" min="0" id="functional_number" placeholder="الرقم الوظيفي" formControlName="functional_number" />
               </div>
-            </div> 
-						  <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+            </div>
+            
+						<div class="col-12 col-sm-12 col-md-6 col-lg-4">
               <div class="form-group">
                 <label for="date_employment" style="float:right">تاريخ التوظيف الميلادي <span class="spanReqired-w">*</span></label>
                 <input type="date" class="form-control" id="date_employment" formControlName="date_of_employment_gre" />
@@ -142,31 +155,6 @@
               <div class="input-group-append">
                   <button class="btn calendar higriButton" (click)="d.toggle()" type="button"><i class="fas fa-calendar-minus"></i></button>
               </div>
-                <!-- <div *ngIf='bindingDateSplit && typeMode'>
-                  <app-higri-date (onDatePicked)="getDate($event)" [myDate]="bindingDateSplit"></app-higri-date>
-                </div>
-                <div *ngIf='!typeMode'>
-                  <app-higri-date (onDatePicked)="getDate($event)" ></app-higri-date>
-                </div> -->
-              </div>
-            </div>
-
-            <div class="col-12 col-sm-12 col-md-6 col-lg-4">
-              <div class="form-group">
-                <label style="float:right">اسم الوظيفه</label>
-                <select class="form-control" formControlName="job_title_id">
-                  <option *ngFor="let job of jobTitils; let i = index" [value]="job.id">{{job.name}}</option>
-                </select>
-              </div>
-            </div>
-
-
-            <div class="col-12 col-sm-12 col-md-6 col-lg-4">
-              <div class="form-group">
-                <label style="float:right">التخصص</label>
-                <select class="form-control" formControlName="specialization_id">
-                  <option *ngFor="let spec of specializations; let i = index" [value]="spec.id">{{spec.name}}</option>
-                </select>
               </div>
             </div>
 
@@ -176,7 +164,7 @@
                 <input type="text" id="position" class="form-control" placeholder="المنصب" formControlName="position" />
               </div>
             </div>
-
+            
             <div class="col-12 col-sm-12 col-md-6 col-lg-4">
               <div class="form-group">
                 <label style="float:right">الاداره <span class="spanReqired-w">*</span></label>
@@ -214,13 +202,31 @@
               </div>
             </div>
 
+            <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+              <div class="form-group">
+                <label style="float:right">اسم الوظيفه</label>
+                <select class="form-control" formControlName="job_title_id">
+                  <option *ngFor="let job of jobTitils; let i = index" [value]="job.id">{{job.name}}</option>
+                </select>
+              </div>
+            </div>
+
+            <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+              <div class="form-group">
+                <label style="float:right">التخصص</label>
+                <select class="form-control" formControlName="specialization_id">
+                  <option *ngFor="let spec of specializations; let i = index" [value]="spec.id">{{spec.name}}</option>
+                </select>
+              </div>
+            </div>
+            
 					 </fieldset>
 				
 				</div>  
 			</div>
 			  
 			  
-			  <div class="col-sm-12 col-md-12 col-lg-12">
+			<div class="col-sm-12 col-md-12 col-lg-12">
 				<div class="row">
 					
 					<fieldset class="formfieldset">
@@ -243,6 +249,7 @@
                 <span class="help-block" *ngIf="password.errors?.minlength && regesterForm.get('password').touched" style="color:red;font-size:12px"> من فضلك , أدخل كلمه مرور لاتقل عن 6 ارقام</span>
               </div>
             </div>
+            
 						 <div class="col-12 col-sm-12 col-md-6 col-lg-4">
               <div class="form-group">
                 <label for="password_confirmation" style="float:right" >تأكيد كلمه المرور <span *ngIf="checkShowSpanRequired" class="spanReqired-w">*</span></label>
@@ -251,42 +258,37 @@
               </div>
             </div>
 
+            <div class="col-12 col-sm-12 col-md-6 col-lg-4">
+              <div class="form-group">
+                <label for="phone" style="float:right">رقم الجوال <span class="spanReqired-w">*</span></label>
+                <input type="text" id="phone" appNumberDerictive class="form-control" placeholder="رقم الجوال يبدأ ب 05 ومكون من 10 أرقام" formControlName="phone" />
+              </div>
+            </div>
+
 						
 					 </fieldset>
 				
 				</div>  
 			</div>
 
-           
-
-          
-
-
-           
-          
-           
-           
+      <div class="col-12 col-sm-12 col-md-6 col-lg-4" *ngIf="showStatus">
+        <div class="form-group">
+          <label style="float: right; margin-right:5px">الحاله</label>
+          <select class="form-control" formControlName="status">
+            <option [value]='1'>فعال</option>
+            <option [value]='0'>غير فعال</option>
+          </select>
+          <span class="help-block" *ngIf="!regesterForm.get('status').valid && regesterForm.get('status').touched" style="color:red">Please enter a status  </span>
+        </div>
+      </div>
+      
+      <div class="col-12">
+          <button type="submit" [disabled]="!regesterForm.valid" class="btn btn-success regesterBtn-w">{{userProfileId ? 'حفظ' : 'سجل'}}</button>
+          <button type="button" class="btn btn-warning regesterBtn-w" (click)="authSer.backFromEdit()">إلغاء</button>
+      </div>
 
-          
-            <div class="col-12 col-sm-12 col-md-6 col-lg-4" *ngIf="showStatus">
-              <div class="form-group">
-                <label style="float: right; margin-right:5px">الحاله</label>
-                <select class="form-control" formControlName="status">
-                  <option [value]='1'>فعال</option>
-                  <option [value]='0'>غير فعال</option>
-                </select>
-                <span class="help-block" *ngIf="!regesterForm.get('status').valid && regesterForm.get('status').touched" style="color:red">Please enter a status  </span>
-              </div>
-            </div>
-          
-           
-            
-            <div class="col-12">
-                <button type="submit" [disabled]="!regesterForm.valid" class="btn btn-success regesterBtn-w">{{userProfileId ? 'حفظ' : 'سجل'}}</button>
-                <button type="button" class="btn btn-warning regesterBtn-w" (click)="authSer.backFromEdit()">إلغاء</button>
-            </div>
-          </div>
-        </form>
+    </div>
+  </form>
     </div>
   </div>
   

src/app/regester/regester.component.ts

@@ -84,6 +84,8 @@ export class RegesterComponent implements OnInit {
   checkShowSpanRequired: boolean = true;
   changesSave:boolean = false;
   typeMode:boolean = false;
+  checkUserType:number;
+  showTypeInput:boolean = true; //to show visitor or employee
   typeTitle:string = '';
   bindingDateSplit: any;
   data = {
@@ -91,14 +93,14 @@ export class RegesterComponent implements OnInit {
   }
 
 
+
   ngOnInit() {
     
     this.authSer.showSearchHeader = false;
     this.authSer.notificationLogin = false;
     this.authSer.showDashboardHeader = true;
-
+    this.authSer.arabicTemplate = true;
   
-
     
     
     this.typeTitle = 'تسجيل الدخول';
@@ -106,32 +108,41 @@ export class RegesterComponent implements OnInit {
     this.route.params.subscribe(
       (params:Params) => {
         this.userProfileId = params['idProfile'];
+        if(this.userProfileId) {
+          this.showTypeInput = false;
+        } else {
+          this.showTypeInput = true;
+        }
       }
     );
 
+
+      //start regester form with default employee
+      this.regesterForm = new FormGroup({
+        name: new FormControl(null, Validators.required),
+        type: new FormControl('0'),
+        identity_type_id: new FormControl(null, [Validators.required]),
+        identity_number: new FormControl(null, Validators.required),
+        position: new FormControl(null, Validators.required),
+        email: new FormControl(null, [Validators.required,Validators.email]),
+        password: new FormControl(null, [Validators.required, Validators.minLength(6)]),
+        password_confirmation: new FormControl(null, [Validators.required, Validators.minLength(6)]),
+        phone: new FormControl(null, Validators.required),
+        gender: new FormControl(null, Validators.required),
+        birthday: new FormControl(null, Validators.required),
+        adminstration_id: new FormControl(null, Validators.required),
+        department_id: new FormControl(null, Validators.required),
+        nationality_id: new FormControl(null, Validators.required),
+        date_of_employment_gre: new FormControl(null, Validators.required),
+        date_of_employment_hij: new FormControl(null,Validators.required),
+        job_title_id: new FormControl(null),
+        specialization_id: new FormControl(null),
+        functional_number: new FormControl(null, Validators.required),
+        contract_type_id: new FormControl(null),
+        staff_id: new FormControl(null),
+      });
  
-    this.regesterForm = new FormGroup({
-      name: new FormControl(null, Validators.required),
-      identity_type_id: new FormControl(null, [Validators.required]),
-      identity_number: new FormControl(null, Validators.required),
-      position: new FormControl(null, Validators.required),
-      email: new FormControl(null, [Validators.required,Validators.email]),
-      password: new FormControl(null, [Validators.required, Validators.minLength(6)]),
-      password_confirmation: new FormControl(null, [Validators.required, Validators.minLength(6)]),
-      phone: new FormControl(null, Validators.required),
-      gender: new FormControl(null, Validators.required),
-      birthday: new FormControl(null, Validators.required),
-      adminstration_id: new FormControl(null, Validators.required),
-      department_id: new FormControl(null, Validators.required),
-      nationality_id: new FormControl(null, Validators.required),
-      date_of_employment_gre: new FormControl(null, Validators.required),
-      date_of_employment_hij: new FormControl(null,Validators.required),
-      job_title_id: new FormControl(null),
-      specialization_id: new FormControl(null),
-      functional_number: new FormControl(null, Validators.required),
-      contract_type_id: new FormControl(null),
-      staff_id: new FormControl(null),
-    });
+    
 
     //get adminstration
     this.userService.getAdministration().subscribe(
@@ -206,6 +217,7 @@ export class RegesterComponent implements OnInit {
 
     //profile edit
     if(this.userProfileId) {
+
       this.typeTitle = 'صفحتي';
          //show / hide notification search in header
       this.checkShowSpanRequired = false;
@@ -219,29 +231,7 @@ export class RegesterComponent implements OnInit {
       this.showStatus = false;
       this.typeMode = true;
       this.authSer.notificationLogin = true;
-      this.regesterForm = new FormGroup({
-        name: new FormControl(null, Validators.required),
-        identity_type_id: new FormControl(null, [Validators.required]),
-        identity_number: new FormControl(null, Validators.required),
-        position: new FormControl(null, Validators.required),
-        email: new FormControl(null, [Validators.required,Validators.email]),
-        password: new FormControl(null, [Validators.minLength(6)]),
-        password_confirmation: new FormControl(null, [Validators.minLength(6)]),
-        phone: new FormControl(null,Validators.required),
-        gender: new FormControl(null, Validators.required),
-        birthday: new FormControl(null, Validators.required),
-        adminstration_id: new FormControl(null, Validators.required),
-        department_id: new FormControl(null, Validators.required),
-        nationality_id: new FormControl(null, Validators.required),
-        date_of_employment_gre: new FormControl(null, Validators.required),
-        date_of_employment_hij: new FormControl(null,Validators.required),
-        job_title_id: new FormControl(null),
-        specialization_id: new FormControl(null),
-        functional_number: new FormControl(null, Validators.required),
-        contract_type_id: new FormControl(null),
-        staff_id: new FormControl(null),
-        status: new FormControl(null, Validators.required),
-      });
+      
 
       this.spinner.show();
       this.userService.onGetUserData(this.userProfileId, 'editUs').subscribe(
@@ -251,45 +241,103 @@ export class RegesterComponent implements OnInit {
 
           this.data.name = responce['user'].name;
 
-          const date = responce['user'].date_of_employment_hij.split('-');  
-          this.bindingDateSplit = {
-            'year': parseInt(date[0]),
-            'month': parseInt(date[1]),
-            'day': parseInt(date[2])
-          };
-
-          console.log('vaaaaaaaaal', this.bindingDateSplit);
-
-          this.regesterForm.patchValue({
-            name: responce['user'].name,
-            identity_type_id: responce['user'].identity_type_id,
-            identity_number: responce['user'].identity_number,
-            email: responce['user'].email,
-            position: responce['user'].position,
-            phone: responce['user'].phone,
-            gender: responce['user'].gender,
-            birthday: responce['user'].birthday,
-            adminstration_id: responce['user'].adminstration_id,
-            department_id: responce['user'].department_id,
-            nationality_id: responce['user'].nationality_id,
-            date_of_employment_gre: responce['user'].date_of_employment_gre,
-            job_title_id: responce['user'].job_title_id,
-            specialization_id: responce['user'].specialization_id,
-            contract_type_id: responce['user'].contract_type_id,
-            staff_id: responce['user'].staff_id,
-            functional_number: responce['user'].functional_number,
-            status: responce['user'].status,
-            date_of_employment_hij: this.bindingDateSplit, //responce['user'].date_of_employment_hij//
-          });
-         
-
-          //this.higriDateVal = responce['user'].date_of_employment_hij;
-          console.log(this.bindingDateSplit);
-
-          this.getDepartment();
-          console.log('image profile' , this.authSer.pathImg + responce['user'].photo);
-          this.urlImg = responce['user'].photo ? this.authSer.pathImg + responce['user'].photo : '../../assets/image/avatar.png';
-          this.spinner.hide();
+          if(responce['user'].type == 1) {
+            
+            //visitor case
+            this.regesterForm = new FormGroup({
+              name: new FormControl(null, Validators.required),
+              type: new FormControl('1'),
+              identity_type_id: new FormControl(null, [Validators.required]),
+              identity_number: new FormControl(null, Validators.required),
+              email: new FormControl(null, [Validators.required,Validators.email]),
+              phone: new FormControl(null,Validators.required),
+              password: new FormControl(null, [Validators.required, Validators.minLength(6)]),
+              password_confirmation: new FormControl(null, [Validators.required, Validators.minLength(6)]),
+              gender: new FormControl(null, Validators.required),
+              birthday: new FormControl(null, Validators.required),
+              nationality_id: new FormControl(null, Validators.required),
+            });
+
+            this.regesterForm.patchValue({
+              name: responce['user'].name,
+              type: responce['user'].type,
+              identity_type_id: responce['user'].identity_type_id,
+              identity_number: responce['user'].identity_number,
+              email: responce['user'].email,
+              gender: responce['user'].gender,
+              birthday: responce['user'].birthday,
+              nationality_id: responce['user'].nationality_id,  
+              phone: responce['user'].phone,         
+            });
+
+            console.log('image profile' , this.authSer.pathImg + responce['user'].photo);
+            this.urlImg = responce['user'].photo ? this.authSer.pathImg + responce['user'].photo : '../../assets/image/avatar.png';
+            this.spinner.hide();
+
+          } else if(responce['user'].type == 0){
+            //employee case
+            this.regesterForm = new FormGroup({
+              name: new FormControl(null, Validators.required),
+              type: new FormControl('1'),
+              identity_type_id: new FormControl(null, [Validators.required]),
+              identity_number: new FormControl(null, Validators.required),
+              position: new FormControl(null, Validators.required),
+              email: new FormControl(null, [Validators.required,Validators.email]),
+              password: new FormControl(null, [Validators.minLength(6)]),
+              password_confirmation: new FormControl(null, [Validators.minLength(6)]),
+              phone: new FormControl(null,Validators.required),
+              gender: new FormControl(null, Validators.required),
+              birthday: new FormControl(null, Validators.required),
+              adminstration_id: new FormControl(null, Validators.required),
+              department_id: new FormControl(null, Validators.required),
+              nationality_id: new FormControl(null, Validators.required),
+              date_of_employment_gre: new FormControl(null, Validators.required),
+              date_of_employment_hij: new FormControl(null,Validators.required),
+              job_title_id: new FormControl(null),
+              specialization_id: new FormControl(null),
+              functional_number: new FormControl(null, Validators.required),
+              contract_type_id: new FormControl(null),
+              staff_id: new FormControl(null),
+              status: new FormControl(null, Validators.required),
+            });
+            const date = responce['user'].date_of_employment_hij.split('-');  
+            this.bindingDateSplit = {
+              'year': parseInt(date[0]),
+              'month': parseInt(date[1]),
+              'day': parseInt(date[2])
+            };
+  
+            console.log('vaaaaaaaaal', this.bindingDateSplit);
+  
+            this.regesterForm.patchValue({
+              name: responce['user'].name,
+              type: responce['user'].type,
+              identity_type_id: responce['user'].identity_type_id,
+              identity_number: responce['user'].identity_number,
+              email: responce['user'].email,
+              position: responce['user'].position,
+              phone: responce['user'].phone,
+              gender: responce['user'].gender,
+              birthday: responce['user'].birthday,
+              adminstration_id: responce['user'].adminstration_id,
+              department_id: responce['user'].department_id,
+              nationality_id: responce['user'].nationality_id,
+              date_of_employment_gre: responce['user'].date_of_employment_gre,
+              job_title_id: responce['user'].job_title_id,
+              specialization_id: responce['user'].specialization_id,
+              contract_type_id: responce['user'].contract_type_id,
+              staff_id: responce['user'].staff_id,
+              functional_number: responce['user'].functional_number,
+              status: responce['user'].status,
+              date_of_employment_hij: this.bindingDateSplit, //responce['user'].date_of_employment_hij//
+            });
+            console.log(this.bindingDateSplit);
+
+            this.getDepartment();
+            console.log('image profile' , this.authSer.pathImg + responce['user'].photo);
+            this.urlImg = responce['user'].photo ? this.authSer.pathImg + responce['user'].photo : '../../assets/image/avatar.png';
+            this.spinner.hide();
+          }
         },
         (error) => {
           console.log(error);
@@ -369,12 +417,52 @@ export class RegesterComponent implements OnInit {
       }
 
 
-      //get value date from child component 
-      // public getDate(date: any):void {
-      //   console.log( date);
-      //   this.higriDateVal = date.year + '-' + date.month + '-' + date.day;
-      //   console.log('higrii date', this.higriDateVal);
-      // }
+     
+
+
+      checkTypeUser(typeUser) {
+        console.log(typeUser.target.value);
+        this.checkUserType = typeUser.target.value;
+        if(typeUser.target.value == 1) {
+          this.regesterForm = new FormGroup({
+            name: new FormControl(null, Validators.required),
+            type: new FormControl('1'),
+            identity_type_id: new FormControl(null, [Validators.required]),
+            identity_number: new FormControl(null, Validators.required),
+            email: new FormControl(null, [Validators.required,Validators.email]),
+            password: new FormControl(null, [Validators.required, Validators.minLength(6)]),
+            password_confirmation: new FormControl(null, [Validators.required, Validators.minLength(6)]),
+            gender: new FormControl(null, Validators.required),
+            birthday: new FormControl(null, Validators.required),
+            nationality_id: new FormControl(null, Validators.required),
+            phone: new FormControl(null, Validators.required),
+          });
+        } else {
+          this.regesterForm = new FormGroup({
+            name: new FormControl(null, Validators.required),
+            type: new FormControl('0'),
+            identity_type_id: new FormControl(null, [Validators.required]),
+            identity_number: new FormControl(null, Validators.required),
+            position: new FormControl(null, Validators.required),
+            email: new FormControl(null, [Validators.required,Validators.email]),
+            password: new FormControl(null, [Validators.required, Validators.minLength(6)]),
+            password_confirmation: new FormControl(null, [Validators.required, Validators.minLength(6)]),
+            phone: new FormControl(null, Validators.required),
+            gender: new FormControl(null, Validators.required),
+            birthday: new FormControl(null, Validators.required),
+            adminstration_id: new FormControl(null, Validators.required),
+            department_id: new FormControl(null, Validators.required),
+            nationality_id: new FormControl(null, Validators.required),
+            date_of_employment_gre: new FormControl(null, Validators.required),
+            date_of_employment_hij: new FormControl(null,Validators.required),
+            job_title_id: new FormControl(null),
+            specialization_id: new FormControl(null),
+            functional_number: new FormControl(null, Validators.required),
+            contract_type_id: new FormControl(null),
+            staff_id: new FormControl(null),
+          });
+        } 
+      }
 
    
 
@@ -385,14 +473,19 @@ export class RegesterComponent implements OnInit {
     onSubmittedForm() {
 
       this.changesSave = true;
-      console.log(this.regesterForm);
       const userDataRegester = this.regesterForm.value;
-      userDataRegester['date_of_employment_hij'] = userDataRegester['date_of_employment_hij'].year  + '-' + userDataRegester['date_of_employment_hij'].month + '-' + userDataRegester['date_of_employment_hij'].day;
+      let joinJobDate;
+
+      if(userDataRegester['type'] == '0') {
+        userDataRegester['date_of_employment_hij'] = userDataRegester['date_of_employment_hij'].year  + '-' + userDataRegester['date_of_employment_hij'].month + '-' + userDataRegester['date_of_employment_hij'].day;
+        joinJobDate = userDataRegester['date_of_employment_gre'].split('-')[0];
+      }
+
       userDataRegester['identity_number'] = userDataRegester['identity_number'].toString();
       console.log('valueee' , userDataRegester);
 
       const birthDate = userDataRegester['birthday'].split('-')[0];
-      const joinJobDate = userDataRegester['date_of_employment_gre'].split('-')[0];
+    
 
 
       if(this.checkChangeImage) {
@@ -400,71 +493,139 @@ export class RegesterComponent implements OnInit {
         userDataRegester['photo_type'] = this.photoType[1];
       }
 
-      const userData = this.regesterForm.value;
-  
+      
+      console.log(userDataRegester);
 
       if(this.userProfileId) {
         userDataRegester['id'] = this.userProfileId;
         console.log('dataaaaaaaaaaaa', userDataRegester);
-        if(this.regesterForm.get('password').value != this.regesterForm.get('password_confirmation').value){
-          this.toastr.warning(' من فضلك , تأكد أن كلمه المورو نفس تأكيد كلمه المرور!');
-        }else if(this.regesterForm.get('identity_number').value.substring(0,1) != 1 && this.regesterForm.get('identity_type_id').value == 1){
-          this.toastr.warning('رقم الهويه يجب ان يبدأ ب رقم 1');
-        } else if(this.regesterForm.get('identity_number').value.substring(0,1) != 2 && this.regesterForm.get('identity_type_id').value == 3){
-          this.toastr.warning('رقم الهويه يجب ان يبدأ ب رقم 2');
-        } else if(birthDate > joinJobDate) {
-          this.toastr.warning('تارخ الميلاد أكبر من تاريخ التوظيف الميلادي !');
-        } else if(this.regesterForm.get('phone').value.substring(0,2) != '05') {
-          this.toastr.warning('رقم الجوال يجب أن يبدأ ب 05');
+        if(this.checkUserType == 1) {
+          //edit profile visitor submited 
+          if(this.regesterForm.get('password').value != this.regesterForm.get('password_confirmation').value){
+            this.toastr.warning(' من فضلك , تأكد أن كلمه المورو نفس تأكيد كلمه المرور!');
+          }else if(this.regesterForm.get('identity_number').value.substring(0,1) != 1 && this.regesterForm.get('identity_type_id').value == 1){
+            this.toastr.warning('رقم الهويه يجب ان يبدأ ب رقم 1');
+          } else if(this.regesterForm.get('identity_number').value.substring(0,1) != 2 && this.regesterForm.get('identity_type_id').value == 3){
+            this.toastr.warning('رقم الهويه يجب ان يبدأ ب رقم 2');
+          }  else if(this.regesterForm.get('phone').value.substring(0,2) != '05') {
+            this.toastr.warning('رقم الجوال يجب أن يبدأ ب 05');
+          } else {
+            this.userService.onEditProfile(userDataRegester).subscribe(
+              (responce) => {
+                console.log(responce);
+                this.toastr.success('تم التعديل بنجاح');
+              },
+              (error) => {
+                console.log(error);
+                this.toastr.error('فشل التعديل');
+                if(error.error['error'].email) {
+                  this.toastr.warning('الايميل تم التسجيل به من قبل !');
+                } else if(error.error['error'].identity_number) {
+                  this.toastr.warning('رقم الهويه تم التسجيل به من قبل !');
+                }
+              }
+            );
+          }
         } else {
-          this.userService.onEditProfile(userDataRegester).subscribe(
-            (responce) => {
-              console.log(responce);
-              this.toastr.success('تم التعديل بنجاح');
-            },
-            (error) => {
-              console.log(error);
-              this.toastr.error('فشل التعديل');
-              if(error.error['error'].email) {
-                this.toastr.warning('الايميل تم التسجيل به من قبل !');
-              } else if(error.error['error'].identity_number) {
-                this.toastr.warning('رقم الهويه تم التسجيل به من قبل !');
+          //edit profile employee submited 
+          if(this.regesterForm.get('password').value != this.regesterForm.get('password_confirmation').value){
+            this.toastr.warning(' من فضلك , تأكد أن كلمه المورو نفس تأكيد كلمه المرور!');
+          }else if(this.regesterForm.get('identity_number').value.substring(0,1) != 1 && this.regesterForm.get('identity_type_id').value == 1){
+            this.toastr.warning('رقم الهويه يجب ان يبدأ ب رقم 1');
+          } else if(this.regesterForm.get('identity_number').value.substring(0,1) != 2 && this.regesterForm.get('identity_type_id').value == 3){
+            this.toastr.warning('رقم الهويه يجب ان يبدأ ب رقم 2');
+          } else if(birthDate > joinJobDate) {
+            this.toastr.warning('تارخ الميلاد أكبر من تاريخ التوظيف الميلادي !');
+          } else if(this.regesterForm.get('phone').value.substring(0,2) != '05') {
+            this.toastr.warning('رقم الجوال يجب أن يبدأ ب 05');
+          } else {
+            this.userService.onEditProfile(userDataRegester).subscribe(
+              (responce) => {
+                console.log(responce);
+                this.toastr.success('تم التعديل بنجاح');
+              },
+              (error) => {
+                console.log(error);
+                this.toastr.error('فشل التعديل');
+                if(error.error['error'].email) {
+                  this.toastr.warning('الايميل تم التسجيل به من قبل !');
+                } else if(error.error['error'].identity_number) {
+                  this.toastr.warning('رقم الهويه تم التسجيل به من قبل !');
+                }
               }
-            }
-          );
-        } 
+            );
+          }
+        }
+         
       } else {
+
         userDataRegester['photo'] = this.imageBase64;
         userDataRegester['photo_type'] = this.photoType[1];
+        
         console.log('dataaaaaaaaaaaa', userDataRegester);
-        if(this.regesterForm.get('password').value != this.regesterForm.get('password_confirmation').value){
-          this.toastr.warning('  من فضلك تأكد أن كلمه المرور نفس تأكيد كلمه المرور !');
-        } else if(userDataRegester['identity_number'].substring(0,1) != 1 && this.regesterForm.get('identity_type_id').value == 1){
-          this.toastr.warning('رقم الهويه يجب ان يبدأ ب رقم 1');
-        } else if(userDataRegester['identity_number'].substring(0,1) != 2 && this.regesterForm.get('identity_type_id').value == 3){
-          this.toastr.warning('رقم الهويه يجب ان يبدأ ب رقم 2');
-        } else if(birthDate > joinJobDate) {
-          this.toastr.warning('تارخ الميلاد أكبر من تاريخ التوظيف الميلادي !');
-        } else if(this.regesterForm.get('phone').value.substring(0,2) != '05') {
-          this.toastr.warning('رقم الجوال يجب أن يبدأ ب 05');
-        } 
-        else {
-          this.authSer.signUp(userDataRegester).subscribe(
-            (responce) => {
-              console.log(responce);
-              this.toastr.success('تم اضافتك بنجاح ، من فضلك سجل الدخول')
-              this.router.navigate(['login']);
-            },
-            (error) => {
-              console.log(error);
-              if(error.error['error'].email) {
-                this.toastr.warning('الايميل تم التسجيل به من قبل !');
-              } else if(error.error['error'].identity_number) {
-                this.toastr.warning('رقم الهويه تم التسجيل به من قبل !');
+        if(this.checkUserType == 1) {
+          //visitor added submited
+          if(this.regesterForm.get('password').value != this.regesterForm.get('password_confirmation').value){
+            this.toastr.warning('  من فضلك تأكد أن كلمه المرور نفس تأكيد كلمه المرور !');
+          } else if(this.imageBase64 == '') {
+            this.toastr.warning('قم بإختيار صوره شخصيه !');
+          }  else if(this.regesterForm.get('phone').value.substring(0,2) != '05') {
+            this.toastr.warning('رقم الجوال يجب أن يبدأ ب 05');
+          } else if(userDataRegester['identity_number'].substring(0,1) != 1 && this.regesterForm.get('identity_type_id').value == 1){
+            this.toastr.warning('رقم الهويه يجب ان يبدأ ب رقم 1');
+          } else if(userDataRegester['identity_number'].substring(0,1) != 2 && this.regesterForm.get('identity_type_id').value == 3){
+            this.toastr.warning('رقم الهويه يجب ان يبدأ ب رقم 2');
+          } else {
+            this.authSer.signUp(userDataRegester).subscribe(
+              (responce) => {
+                console.log(responce);
+                this.toastr.success('تم اضافتك بنجاح ، من فضلك سجل الدخول')
+                this.router.navigate(['login']);
+              },
+              (error) => {
+                console.log(error);
+                if(error.error['error'].email) {
+                  this.toastr.warning('الايميل تم التسجيل به من قبل !');
+                } else if(error.error['error'].identity_number) {
+                  this.toastr.warning('رقم الهويه تم التسجيل به من قبل !');
+                }
               }
-            }
-          );
-        }
-      }
-    }    
+            );
+          }
+        } else {
+          //employee added submited
+          if(this.regesterForm.get('password').value != this.regesterForm.get('password_confirmation').value){
+            this.toastr.warning('  من فضلك تأكد أن كلمه المرور نفس تأكيد كلمه المرور !');
+          } else if(this.imageBase64 == '') {
+            this.toastr.warning('قم بإختيار صوره شخصيه !');
+          } else if(userDataRegester['identity_number'].substring(0,1) != 1 && this.regesterForm.get('identity_type_id').value == 1){
+            this.toastr.warning('رقم الهويه يجب ان يبدأ ب رقم 1');
+          } else if(userDataRegester['identity_number'].substring(0,1) != 2 && this.regesterForm.get('identity_type_id').value == 3){
+            this.toastr.warning('رقم الهويه يجب ان يبدأ ب رقم 2');
+          } else if(birthDate > joinJobDate) {
+            this.toastr.warning('تارخ الميلاد أكبر من تاريخ التوظيف الميلادي !');
+          } else if(this.regesterForm.get('phone').value.substring(0,2) != '05') {
+            this.toastr.warning('رقم الجوال يجب أن يبدأ ب 05');
+          } 
+          else {
+            this.authSer.signUp(userDataRegester).subscribe(
+              (responce) => {
+                console.log(responce);
+                this.toastr.success('تم اضافتك بنجاح ، من فضلك سجل الدخول')
+                this.router.navigate(['login']);
+              },
+              (error) => {
+                console.log(error);
+                if(error.error['error'].email) {
+                  this.toastr.warning('الايميل تم التسجيل به من قبل !');
+                } else if(error.error['error'].identity_number) {
+                  this.toastr.warning('رقم الهويه تم التسجيل به من قبل !');
+                }
+              }
+            );
+          }
+        }  
+      }      
+  }
+       
 }

src/app/servicesItems/services.component.ts

@@ -69,30 +69,30 @@ getDataService(dataService){
   if(dataService.id == 1) {
     //خدمه الصلاحيات
     this.userservice.getPagesPermetiotns(this.idUser, dataService.id).subscribe(
-    (responce) => {
-      console.log(responce);
-      this.pages = responce['pages'];
-      //this.pages[0].active = 1;
-      console.log(this.pages);
-      if(this.pages[0].id == 1) {
-        console.log('/service/' + this.idUser + '/' + dataService.id + '/users/' + this.pages[0].id);
-        this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/users/' + this.pages[0].id]);
-      }else if(this.pages[0].id == 2) {
-        this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/roles/' + this.pages[0].id]);
-      } else if(this.pages[0].id == 3) {
-        this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/departments/' + this.pages[0].id]);
-      } else if(this.pages[0].id == 4) {
-        this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/sections/' + this.pages[0].id]);
-      } else if(this.pages[0].id == 5) {
-        this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/reports/' + this.pages[0].id]);
-      }
-      this.spinner.hide();
-    },
-    (error) => {console.log(error)}
-  );
+      (responce) => {
+        console.log(responce);
+        this.pages = responce['pages'];
+        //this.pages[0].active = 1;
+        console.log(this.pages);
+        if(this.pages[0].id == 1) {
+          console.log('/service/' + this.idUser + '/' + dataService.id + '/users/' + this.pages[0].id);
+          this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/users/' + this.pages[0].id]);
+        }else if(this.pages[0].id == 2) {
+          this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/roles/' + this.pages[0].id]);
+        } else if(this.pages[0].id == 3) {
+          this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/departments/' + this.pages[0].id]);
+        } else if(this.pages[0].id == 4) {
+          this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/sections/' + this.pages[0].id]);
+        } else if(this.pages[0].id == 5) {
+          this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/reports/' + this.pages[0].id]);
+        }
+        this.spinner.hide();
+      },
+      (error) => {console.log(error)}
+    );
 
     } else if(dataService.id == 6 || dataService.id == 2) {
-      //خدمه اداره المحتوي
+      //خدمه اداره المحتوي + خدمه اداره الصفحه الخارجيه
       this.userservice.getPagesPermetiotns(this.idUser, dataService.id).subscribe(
         (responce) => {
           console.log(responce);
@@ -157,7 +157,23 @@ getDataService(dataService){
         },
         (error) => {console.log(error)}
       );
-    }
+    }  else if(dataService.id == 3) {
+      
+      this.userservice.getPagesPermetiotns(this.idUser, dataService.id).subscribe(
+        (responce) => {
+          console.log(responce);
+          this.pages = responce['pages'];
+          if(this.pages[0].id == 33) {
+            console.log('/service/' + this.idUser + '/' + dataService.id + '/supervisorList/' + this.pages[0].id);
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/supervisorList/' + this.pages[0].id]);
+          }
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
+      
+     }
   }
 
 

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

@@ -11,7 +11,7 @@ export class AuthGuardService {
   constructor(public auth: AuthServiceService, public router: Router) {}
   canActivate(): boolean {
     if (this.auth.isAuthenticated()) {
-      this.router.navigate(['/InternalPage/home']);
+      this.router.navigate(['/login']);
       return false;
     }
     return true;

src/app/shared/dashboard.service.ts

@@ -69,6 +69,8 @@ export class DashboardService {
         return this.http.post(this.authService.pathApi + "/add_statistic", data);
       } else if(addType == 'advertising') {
         return this.http.post(this.authService.pathApi + "/add_advertising_service", data);
+      } else if(addType == 'supervisor') {
+        return this.http.post(this.authService.pathApi + "/asign_supervisor_to_department", data);
       }
     }
 
@@ -161,6 +163,8 @@ export class DashboardService {
         return this.http.get(this.authService.pathApi + '/get_statistic/' + pageId);
       } else if(typeGetData == 'advertising') {
         return this.http.get(this.authService.pathApi + '/get_advertising_service/' + pageId);
+      } else if(typeGetData == 'supervisor') {
+        return this.http.get(this.authService.pathApi + '/get_department/' + pageId);
       }
   }
 
@@ -208,6 +212,8 @@ export class DashboardService {
         return this.http.post(this.authService.pathApi + '/delete_statistics' , {'statistics_id' : dataIds});
       } else if (pageId == 22){
         return this.http.post(this.authService.pathApi + '/delete_advertising_services' , {'advertising_services_id' : dataIds});
+      } else if(pageId == 33) {
+        return this.http.post(this.authService.pathApi + '/un_asign_supervisor_to_department', {'departments_id' : dataIds})
       }
 
     };

src/app/shared/user.service.ts

@@ -47,10 +47,26 @@ export class UserService {
     return this.http.get(this.authService.pathApi + '/months_list');
   }
 
+  //get departments
   getDepartments(adminstrationId) {
     return this.http.get(this.authService.pathApi + '/admin_departments/' + adminstrationId);
   }
 
+  //get trainning service departments
+  getTrainningServiceDepartments() {
+    return this.http.get(this.authService.pathApi + '/departments_missed_supervisor');
+  }
+
+  //get all Supervisors
+  getSupervisorsList(departId: number) {
+    return this.http.get(this.authService.pathApi + '/users_belonsTo_training_department/' + departId);
+  }
+  
+  //get all data of departments for trianning service
+  getDepartmentData(departId: number) {
+   return this.http.get(this.authService.pathApi + '/get_department/' + departId);
+  }
+
   //get nationality
   getNationality() {
     return this.http.get(this.authService.pathApi + '/countries_list');

src/styles.css

@@ -632,6 +632,7 @@ width: 100%;
 
 .externalEventContent-w .cal-month-view .cal-cell-top {
   min-height: 50px !important;
+	    width: 27px;
 }
 
 .externalEventContent-w .cal-events {
@@ -749,7 +750,7 @@ width: 100%;
   /* Eng Magdy Style */
   .internalHeader-w{
     padding-top: 7px;
-    height: 55px !important;
+    height: 36px !important;
 background-color:#a1a1a15e !important; 
 }
 .routerLinkContainer-w {
@@ -768,19 +769,19 @@ color: #BDA380;
 }
 .internalHeader-w .searchBtn{
 
-    height: 35px !important;
+   /* height: 35px !important;
 width: 55px !important;
 border: 1px solid #BDA380 !important;
-    margin-right: 10px;
+    margin-right: 10px;*/
 }
 .pagesHeader-w{
     margin-top: 0px !important;
 background-color: #926f3f2e !important;
-height: 70px !important;
+height: 50px !important;
 	display: block;
 }
 .pagesHeader-w .navbar{
-height: 70px !important;
+height: 50px !important;
 }
 .pagesHeader-w .dropdown .dropbtn{
 margin: 0 4px !important;
@@ -799,7 +800,7 @@ box-shadow: 0px 5px 10px #00000026 !important;
 
 .internalHeader-w input[type='text']{
 width: 285px;
-height: 35px !important;
+height: 30px !important;
 border: 1px solid #BDA380 !important;
 }
 .searchBtn i{
@@ -808,15 +809,15 @@ border: 1px solid #BDA380 !important;
 .dateW{
 text-shadow: 0px 0px 0px #fff0 !important;
 }
-.ar, .en{
-height: 35px !important;
-width: 55px !important;
-text-align: center;
-background-color: #f1eded !important;
-padding-top: 4px !important;
+.ar, .en{ /* <— eng mega Edit */
+    height: 30px !important;
+    width: 46px !important;
+    text-align: center;
+    background-color: #f1eded !important;
+    padding-top: 1px !important;
 }
 .logoHeader-w{
-background-image: url('../src/assets/image/bottomBackground.jpg') !important;
+/*background-image: url('../src/assets/image/bottomBackground.jpg') !important;*/
 }
 .en:hover{
     background-color: #c3a58161 !important;
@@ -1077,8 +1078,18 @@ height: 7px !important;
   display: none !important;
 }
 
+.cal-month-view .cal-day-cell.cal-in-month.cal-has-events {
+  position: relative !important;
+} 
+/*
+.cal-month-view .cal-day-number {
+  position: absolute !important;
+  left: 7px !important;
+} */
 
-
+.externalEventContent-w .cal-day-badge {
+  position: absolute;
+}
 
 
 /* ------black-----*/
@@ -1095,7 +1106,7 @@ height: 7px !important;
   }
 
   .homeExternalActive {
-    background-color: #007A71 !important;
+    background-color: #31aca3 !important;
     color: #fff !important;
   }
 
@@ -1110,7 +1121,17 @@ height: 7px !important;
 	.carousel-caption h4, .paragraphTemplate-w {
 		width: 60% !important;
   }
-  
+	.lectureService-w .visitingTime-w .achiev .body ul li{
+		    margin: 0px 19px !important;
+	}
+	.lectureService-w .visitingTime-w .monthRecord-w .body ul li{
+		 margin: 0px 19px !important;
+	}
+  .cslide{
+	    width: 70px !important;
+    height: 70px !important;
+    margin: 0px 5px !important;
+}
   .homeActive {
     background-color: #a2835d !important;
     color: #fff !important;
@@ -1141,11 +1162,28 @@ height: 7px !important;
 		bottom: 90px !important;
 		    display: block !important;
 	}
+	.cslide{
+	    width: 50px !important;
+    height: 50px !important;
+    margin: 0px 2px !important;
+}
 	.slider .extra{
 		    bottom: 119px !important;
 		    width: 94% !important;
 		    display: block !important;
 	}
+	.lectureService-w .visitingTime-w .achiev .body ul li{
+		    margin: 0px 10px !important;
+	}
+	.lectureService-w .visitingTime-w .monthRecord-w .body ul li{
+		 margin: 0px 10px !important;
+	}
+	.lectureService-w .visitingTime-w .achiev .body ul li img{
+		    width: 59px !important;
+	}
+	.lectureService-w .visitingTime-w .monthRecord-w .body ul li img{
+		 width: 59px !important;
+	}
 	.serviceItem-w{
 		    height: 65px !important;
 		border-bottom: 3px solid #00a99d !important;
@@ -1211,11 +1249,29 @@ height: 7px !important;
 		bottom: 90px !important;
 		    display: block !important;
 	}
+		.lectureService-w .visitingTime-w .achiev .body ul li{
+		    margin: 0px 60px !important;
+	}
+	.lectureService-w .visitingTime-w .monthRecord-w .body ul li{
+		 margin: 0px 60px !important;
+	}
+	.cslide{
+	    width: 80px !important;
+    height: 80px !important;
+    margin: 0px 25px !important;
+}
 	.slider .extra{
 		    bottom: 119px !important;
 		    width: 94% !important;
 		    display: block !important;
 	}
+	.sliderNews-w .carousel-caption h5{
+		    width: 45%;
+    	height: 66px;
+	}
+	.sliderNews-w .carousel-caption p{
+		display: none;
+	}
 		.pagesHeader-w .dropdown .dropbtn, .pagesHeader-w .dropdown .dropbtn a{
 	font-size: 18px !important;
     padding: 5px 5px !important;
@@ -1262,7 +1318,23 @@ height: 7px !important;
 		    width: 94% !important;
 		    display: block !important;
 	}
-	
+	.cslide{
+	    width: 70px !important;
+    height: 70px !important;
+    margin: 0px 3px !important;
+}
+		.lectureService-w .visitingTime-w .achiev .body ul li{
+		    margin: 0px 17px !important;
+	}
+	.lectureService-w .visitingTime-w .monthRecord-w .body ul li{
+		 margin: 0px 17px !important;
+	}
+	.sliderNews-w .carousel-caption h5{
+		   display: none;
+	}
+	.sliderNews-w .carousel-caption p{
+		display: none;
+	}
 		.serviceItem-w{
 		    height: 40px !important;
 		border-bottom: 2px solid #00a99d !important;
@@ -1419,10 +1491,11 @@ height: 7px !important;
 
     .externalFooterBackground-w{
      width: 100%;
+	background-color: #05c3b4;
     }
 
     .externalFooterBackground-w .overlayFooter-w {
-      background: url('../src/assets/image/externalFooter.png') no-repeat center center !important;
+      background: url('../src/assets/image/externalFooter2.png') no-repeat center center !important;
       background-size: cover;
       position: initial !important;
     }
@@ -1475,15 +1548,21 @@ height: 7px !important;
 
 
   /* Eng Magdy Style */
+.carousel-indicators li{
+	    width: 25px !important;
+    height: 4px !important;
+	border-radius: 0px !important;
+}
   .internalHeader-w{
-    padding-top: 7px;
-    height: 55px !important;
-background-color:#a1a1a15e !important; 
+    padding-top: 0px;
+    height: 36px !important;
+background-color:#0000004d !important; 
 }
 .routerLinkContainer-w {
   background: url('../src/assets/image/background_login.jpg') no-repeat top center !important;
   background-size: auto !important;
   background-attachment: fixed !important;
+	    background-position-y: -131px !important;
 }
 .internalHeader-w[_ngcontent-c6] input[type='text'][_ngcontent-c6]::placeholder{
 color: #BDA380;