external page

angular.json

@@ -28,12 +28,16 @@
               "node_modules/owl.carousel/dist/assets/owl.carousel.css",
               "node_modules/owl.carousel/dist/assets/owl.theme.default.css",
               "node_modules/ngx-toastr/toastr.css",
+              "node_modules/animate.css/animate.min.css",
+              "node_modules/owl.carousel/dist/assets/owl.carousel.min.css",
+              "node_modules/owl.carousel/dist/assets/owl.theme.default.min.css",
               "src/styles.css"
             ],
             "scripts": [
               "node_modules/jquery/dist/jquery.min.js",
+              "node_modules/popper.js/dist/umd/popper.min.js",
               "node_modules/bootstrap/dist/js/bootstrap.js",
-              "node_modules/slick-carousel/slick/slick.min.js"
+              "node_modules/owl.carousel/dist/owl.carousel.min.js"
             ]
           },
           "configurations": {

package-lock.json

@@ -4,13 +4,18 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@agm/core": {
+      "version": "1.0.0-beta.5",
+      "resolved": "https://registry.npmjs.org/@agm/core/-/core-1.0.0-beta.5.tgz",
+      "integrity": "sha512-LVENJqtBZEWpX+uJkGI0zgg+Xkm2KkktQm4ojZozArbeNvQkVL6pqVc04Mme6vvOzwJpD1cET5w4byC8Xaq1QQ=="
+    },
     "@angular-devkit/architect": {
-      "version": "0.10.6",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.10.6.tgz",
-      "integrity": "sha512-IygpkXNn946vVUFFWKWEDxRqRy888vOAUWcmkZzqPEBYkuwWt7WnLfe8Sjw4fH/+HLWEMS8RXbdSTHiiaP9qOg==",
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.13.1.tgz",
+      "integrity": "sha512-QDmIbqde75ZZSEFbw6Q6kQWq4cY6C7D67yujXw6XTyubDNAs1tyXJyxTIB8vjSlEKwRizTTDd/B0ZXVcke3Mvw==",
       "dev": true,
       "requires": {
-        "@angular-devkit/core": "7.0.6",
+        "@angular-devkit/core": "7.3.1",
         "rxjs": "6.3.3"
       }
     },
@@ -199,25 +204,39 @@
       }
     },
     "@angular-devkit/core": {
-      "version": "7.0.6",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-7.0.6.tgz",
-      "integrity": "sha512-RPSXUtLrpYDTqAEL0rCyDKxES76EomsPBvUUZTD6UkE2pihoh9ZIxkzhzlE+HU/xdqm28+smQYFhvvEAXFWwSQ==",
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-7.3.1.tgz",
+      "integrity": "sha512-56XDWWfIzOAkEk69lBLgmCYybPUA4yjunhmMlCk7vVdb7gbQUyzNjFD04Uj0GjlejatAQ5F76tRwygD9C+3RXQ==",
       "dev": true,
       "requires": {
-        "ajv": "6.5.3",
+        "ajv": "6.7.0",
         "chokidar": "2.0.4",
         "fast-json-stable-stringify": "2.0.0",
         "rxjs": "6.3.3",
         "source-map": "0.7.3"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "6.7.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.7.0.tgz",
+          "integrity": "sha512-RZXPviBTtfmtka9n9sy1N5M5b82CbxWIR6HIis4s3WQTXDJamc/0gpCWNGz6EWdWp4DOfjzJfhz/AS9zVPjjWg==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^2.0.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        }
       }
     },
     "@angular-devkit/schematics": {
-      "version": "7.0.6",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-7.0.6.tgz",
-      "integrity": "sha512-S/3CrBDoh/BD4mBq8RNGQ8sgNFDsveCuFHDkOyct8+NDg2wcRkEGigyq8eZwVN/iVKCwjxc0I/bC336edoNMIQ==",
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-7.3.1.tgz",
+      "integrity": "sha512-cd7usiasfSgw75INz72/VssrLr9tiVRYfo1TEdvr9ww0GuQbuQpB33xbV8W135eAV8+wzQ3Ce8ohaDHibvj6Yg==",
       "dev": true,
       "requires": {
-        "@angular-devkit/core": "7.0.6",
+        "@angular-devkit/core": "7.3.1",
         "rxjs": "6.3.3"
       }
     },
@@ -230,21 +249,41 @@
       }
     },
     "@angular/cli": {
-      "version": "7.0.6",
-      "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-7.0.6.tgz",
-      "integrity": "sha512-f76kq8AQMkloeojIffeT7DYLXT/J4DRhYoAPQR4E09V7lkigFCILiYzQs5RtCAX6EjlPxlrZKkdfnBn0OUPnig==",
-      "dev": true,
-      "requires": {
-        "@angular-devkit/architect": "0.10.6",
-        "@angular-devkit/core": "7.0.6",
-        "@angular-devkit/schematics": "7.0.6",
-        "@schematics/angular": "7.0.6",
-        "@schematics/update": "0.10.6",
-        "inquirer": "6.2.0",
-        "opn": "5.3.0",
-        "rxjs": "6.3.3",
-        "semver": "5.5.1",
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-7.3.1.tgz",
+      "integrity": "sha512-8EvXYRhTqTaTk5PKv7VZxIWJiyG51R9RC9gtpRFx4bbnurqBHdEUxGMmaRsGT8QDbfvVsWnuakE0eeW1CrfZAQ==",
+      "dev": true,
+      "requires": {
+        "@angular-devkit/architect": "0.13.1",
+        "@angular-devkit/core": "7.3.1",
+        "@angular-devkit/schematics": "7.3.1",
+        "@schematics/angular": "7.3.1",
+        "@schematics/update": "0.13.1",
+        "@yarnpkg/lockfile": "1.1.0",
+        "ini": "1.3.5",
+        "inquirer": "6.2.1",
+        "npm-package-arg": "6.1.0",
+        "opn": "5.4.0",
+        "pacote": "9.4.0",
+        "semver": "5.6.0",
         "symbol-observable": "1.2.0"
+      },
+      "dependencies": {
+        "opn": {
+          "version": "5.4.0",
+          "resolved": "https://registry.npmjs.org/opn/-/opn-5.4.0.tgz",
+          "integrity": "sha512-YF9MNdVy/0qvJvDtunAOzFw9iasOQHpVthTCvGzxt61Il64AYSGdK+rYwld7NAfk9qJ7dt+hymBNSc9LNYS+Sw==",
+          "dev": true,
+          "requires": {
+            "is-wsl": "^1.1.0"
+          }
+        },
+        "semver": {
+          "version": "5.6.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.6.0.tgz",
+          "integrity": "sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg==",
+          "dev": true
+        }
       }
     },
     "@angular/common": {
@@ -902,36 +941,46 @@
       "integrity": "sha1-DLsOeOLiq/s9+/S+EY6GrvOIQKI="
     },
     "@schematics/angular": {
-      "version": "7.0.6",
-      "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-7.0.6.tgz",
-      "integrity": "sha512-jOHL+vSu1cqAo3kRNDmgkq/GR2EDkJx5/h0VXGlbtdEpq892LipKHtyPgXa269AABgPKb3TSNBwZls6g2L9FCw==",
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-7.3.1.tgz",
+      "integrity": "sha512-0Ne8APPlTAjKg5CSZqluwCuW/5yPjr3ALCWzqwPxN0suE745usThtasBmqrjw0RMIt8nRqRgtg54Z7lCPO9ZFg==",
       "dev": true,
       "requires": {
-        "@angular-devkit/core": "7.0.6",
-        "@angular-devkit/schematics": "7.0.6",
-        "typescript": "3.1.6"
+        "@angular-devkit/core": "7.3.1",
+        "@angular-devkit/schematics": "7.3.1",
+        "typescript": "3.2.4"
       },
       "dependencies": {
         "typescript": {
-          "version": "3.1.6",
-          "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.1.6.tgz",
-          "integrity": "sha512-tDMYfVtvpb96msS1lDX9MEdHrW4yOuZ4Kdc4Him9oU796XldPYF/t2+uKoX0BBa0hXXwDlqYQbXY5Rzjzc5hBA==",
+          "version": "3.2.4",
+          "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.2.4.tgz",
+          "integrity": "sha512-0RNDbSdEokBeEAkgNbxJ+BLwSManFy9TeXz8uW+48j/xhEXv1ePME60olyzw2XzUqUBNAYFeJadIqAgNqIACwg==",
           "dev": true
         }
       }
     },
     "@schematics/update": {
-      "version": "0.10.6",
-      "resolved": "https://registry.npmjs.org/@schematics/update/-/update-0.10.6.tgz",
-      "integrity": "sha512-Yy/M4JosrVDb5tbpmi+v1uTHSmBYISOiuFVuxtpMN5DWdDNq/JTBEw2jy3quelGWHCU06rbGo578Ml3azGZ+9g==",
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/@schematics/update/-/update-0.13.1.tgz",
+      "integrity": "sha512-EHOqolT/d/jRGuVTCUESLpk8JNpuaPlsVHfeK7Kdp/t0wSEnmtOelZX4+leS25lGXDaDUF3138ntjrZR4n6bGw==",
       "dev": true,
       "requires": {
-        "@angular-devkit/core": "7.0.6",
-        "@angular-devkit/schematics": "7.0.6",
-        "npm-registry-client": "8.6.0",
+        "@angular-devkit/core": "7.3.1",
+        "@angular-devkit/schematics": "7.3.1",
+        "@yarnpkg/lockfile": "1.1.0",
+        "ini": "1.3.5",
+        "pacote": "9.4.0",
         "rxjs": "6.3.3",
-        "semver": "5.5.1",
+        "semver": "5.6.0",
         "semver-intersect": "1.4.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "5.6.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.6.0.tgz",
+          "integrity": "sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg==",
+          "dev": true
+        }
       }
     },
     "@types/chart.js": {
@@ -953,6 +1002,11 @@
         "es6-promise": "*"
       }
     },
+    "@types/hammerjs": {
+      "version": "2.0.36",
+      "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.36.tgz",
+      "integrity": "sha512-7TUK/k2/QGpEAv/BCwSHlYu3NXZhQ9ZwBYpzr9tjlPIL2C5BeGhH3DmVavRx3ZNyELX5TLC91JTz/cen6AAtIQ=="
+    },
     "@types/jasmine": {
       "version": "2.8.12",
       "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-2.8.12.tgz",
@@ -1218,6 +1272,22 @@
       "integrity": "sha512-FZdkNBDqBRHKQ2MEbSC17xnPFOhZxeJ2YGSfr2BKf3sujG49Qe3bB+rGCwQfIaA7WHnGeGkSijX4FuBCdrzW/g==",
       "dev": true
     },
+    "@yarnpkg/lockfile": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz",
+      "integrity": "sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==",
+      "dev": true
+    },
+    "JSONStream": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.5.tgz",
+      "integrity": "sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==",
+      "dev": true,
+      "requires": {
+        "jsonparse": "^1.2.0",
+        "through": ">=2.2.7 <3"
+      }
+    },
     "abbrev": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.0.9.tgz",
@@ -1270,6 +1340,15 @@
         "es6-promisify": "^5.0.0"
       }
     },
+    "agentkeepalive": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-3.5.2.tgz",
+      "integrity": "sha512-e0L/HNe6qkQ7H19kTlRRqUibEAwDK5AFk6y3PtMsuut2VAH6+Q4xZml1tNDJD7kSAyqmbG/K08K5WEJYtUrSlQ==",
+      "dev": true,
+      "requires": {
+        "humanize-ms": "^1.2.1"
+      }
+    },
     "ajv": {
       "version": "6.5.3",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.5.3.tgz",
@@ -1338,6 +1417,11 @@
       "resolved": "https://registry.npmjs.org/angular-font-awesome/-/angular-font-awesome-3.1.2.tgz",
       "integrity": "sha1-k3hzJhLY6MceDXwvqg+t3H+Fjsk="
     },
+    "angular-i18n": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/angular-i18n/-/angular-i18n-1.7.7.tgz",
+      "integrity": "sha512-iMQ6ShIduSMCNpbmLdXgQOk4KtQRfK190wr2YE8LfEIYpVKG+qu5IsNlMsWmIetkws2UUaNbnCbaWpyfYIKsHQ=="
+    },
     "angular-resizable-element": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/angular-resizable-element/-/angular-resizable-element-3.2.2.tgz",
@@ -1367,6 +1451,11 @@
         }
       }
     },
+    "angular2-carousel": {
+      "version": "1.0.16",
+      "resolved": "https://registry.npmjs.org/angular2-carousel/-/angular2-carousel-1.0.16.tgz",
+      "integrity": "sha512-xbCvxTSzDR4twiwOPRBpC6CfP2WRJj4bdg3IIS7LDN8x76QSE5lJaTjwZDz8UTOJ2X7y1YBxf/5Zsa4UZTfhOw=="
+    },
     "angular2-collapsible": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/angular2-collapsible/-/angular2-collapsible-0.6.1.tgz",
@@ -1393,6 +1482,11 @@
         "tslib": "^1.9.0"
       }
     },
+    "animate.css": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-3.7.0.tgz",
+      "integrity": "sha512-u3iMXDJr0cxMdQocIciDiou9Au4L5f9uT+/jCtprw3s1j3HcfCuI+khF+90Ps2KdsEhM2soF7SXB4WUvI3HlXg=="
+    },
     "ansi-colors": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.3.tgz",
@@ -1400,9 +1494,9 @@
       "dev": true
     },
     "ansi-escapes": {
-      "version": "3.1.0",
-      "resolved": "http://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.1.0.tgz",
-      "integrity": "sha512-UgAb8H9D41AQnu/PbWlCofQVcnV4Gs2bBJi9eZPxfU/hgglFh3SMDMENRIqdr7H6XFnXdoknctFByVsCOotTVw==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.2.0.tgz",
+      "integrity": "sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==",
       "dev": true
     },
     "ansi-html": {
@@ -2002,9 +2096,9 @@
       }
     },
     "bootstrap": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.1.3.tgz",
-      "integrity": "sha512-rDFIzgXcof0jDyjNosjv4Sno77X4KuPeFxG2XZZv1/Kc8DRVGVADdoQyyOVDwPqL36DDmtCQbrpMCqvpPLJQ0w=="
+      "version": "4.0.0-beta",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.0.0-beta.tgz",
+      "integrity": "sha512-I/r3fYtUZr+rUNkh8HI+twxZ56p6ehNn27eA1XSebLVQKAJ2xZHnEvZrSR+UR2A/bONcd9gHC3xatVhQlH6R6w=="
     },
     "brace-expansion": {
       "version": "1.1.11",
@@ -3314,6 +3408,15 @@
       "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=",
       "dev": true
     },
+    "encoding": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
+      "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
+      "dev": true,
+      "requires": {
+        "iconv-lite": "~0.4.13"
+      }
+    },
     "end-of-stream": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz",
@@ -3408,6 +3511,12 @@
       "integrity": "sha1-6WQhkyWiHQX0RGai9obtbOX13R0=",
       "dev": true
     },
+    "err-code": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/err-code/-/err-code-1.1.2.tgz",
+      "integrity": "sha1-BuARbTAo9q70gGhJ6w6mp0iuaWA=",
+      "dev": true
+    },
     "errno": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz",
@@ -4153,6 +4262,15 @@
         "null-check": "^1.0.0"
       }
     },
+    "fs-minipass": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.5.tgz",
+      "integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==",
+      "dev": true,
+      "requires": {
+        "minipass": "^2.2.1"
+      }
+    },
     "fs-write-stream-atomic": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz",
@@ -4759,6 +4877,12 @@
         "globule": "^1.0.0"
       }
     },
+    "genfun": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/genfun/-/genfun-5.0.0.tgz",
+      "integrity": "sha512-KGDOARWVga7+rnB3z9Sd2Letx515owfk0hSxHGuqjANb1M+x2bGZGqHLiozPsYMdM2OubeMni/Hpwmjq6qIUhA==",
+      "dev": true
+    },
     "get-caller-file": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
@@ -5130,6 +5254,12 @@
       "integrity": "sha1-DfKTUfByEWNRXfueVUPl9u7VFi8=",
       "dev": true
     },
+    "http-cache-semantics": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz",
+      "integrity": "sha512-5ai2iksyV8ZXmnZhHH4rWPoxxistEexSi5936zIQ1bnNTW5VnA85B6P/VpXiRM017IgRvb2kKo1a//y+0wSp3w==",
+      "dev": true
+    },
     "http-deceiver": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
@@ -5165,6 +5295,27 @@
         "requires-port": "^1.0.0"
       }
     },
+    "http-proxy-agent": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-2.1.0.tgz",
+      "integrity": "sha512-qwHbBLV7WviBl0rQsOzH6o5lwyOIvwp/BdFnvVxXORldu5TmjFfjzBcWUWS5kWAZhmv+JtiDhSuQCp4sBfbIgg==",
+      "dev": true,
+      "requires": {
+        "agent-base": "4",
+        "debug": "3.1.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        }
+      }
+    },
     "http-proxy-middleware": {
       "version": "0.18.0",
       "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.18.0.tgz",
@@ -5221,6 +5372,15 @@
         }
       }
     },
+    "humanize-ms": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz",
+      "integrity": "sha1-xG4xWaKT9riW2ikxbYtv6Lt5u+0=",
+      "dev": true,
+      "requires": {
+        "ms": "^2.0.0"
+      }
+    },
     "iconv-lite": {
       "version": "0.4.23",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.23.tgz",
@@ -5248,6 +5408,15 @@
       "integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==",
       "dev": true
     },
+    "ignore-walk": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.1.tgz",
+      "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==",
+      "dev": true,
+      "requires": {
+        "minimatch": "^3.0.4"
+      }
+    },
     "image-size": {
       "version": "0.5.5",
       "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
@@ -5395,9 +5564,9 @@
       "dev": true
     },
     "inquirer": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-6.2.0.tgz",
-      "integrity": "sha512-QIEQG4YyQ2UYZGDC4srMZ7BjHOmNk1lR2JQj5UknBapklm6WHA+VVH7N+sUdX3A7NeCfGF8o4X1S3Ao7nAcIeg==",
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-6.2.1.tgz",
+      "integrity": "sha512-088kl3DRT2dLU5riVMKKr1DlImd6X7smDhpXUCkJDCKvTEJeRiXh0G132HG9u5a+6Ylw9plFRY7RuTnwohYSpg==",
       "dev": true,
       "requires": {
         "ansi-escapes": "^3.0.0",
@@ -5411,7 +5580,7 @@
         "run-async": "^2.2.0",
         "rxjs": "^6.1.0",
         "string-width": "^2.1.0",
-        "strip-ansi": "^4.0.0",
+        "strip-ansi": "^5.0.0",
         "through": "^2.3.6"
       },
       "dependencies": {
@@ -5435,15 +5604,34 @@
           "requires": {
             "is-fullwidth-code-point": "^2.0.0",
             "strip-ansi": "^4.0.0"
+          },
+          "dependencies": {
+            "strip-ansi": {
+              "version": "4.0.0",
+              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+              "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+              "dev": true,
+              "requires": {
+                "ansi-regex": "^3.0.0"
+              }
+            }
           }
         },
         "strip-ansi": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.0.0.tgz",
+          "integrity": "sha512-Uu7gQyZI7J7gn5qLn1Np3G9vcYGTVqB+lFTytnDJv83dd8T22aGH451P3jueT2/QemInJDfxHB5Tde5OzgG1Ow==",
           "dev": true,
           "requires": {
-            "ansi-regex": "^3.0.0"
+            "ansi-regex": "^4.0.0"
+          },
+          "dependencies": {
+            "ansi-regex": {
+              "version": "4.0.0",
+              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.0.0.tgz",
+              "integrity": "sha512-iB5Dda8t/UqpPI/IjsejXu5jOGDrzn41wJyljwPH65VCIbk6+1BzFIMJGFwTNrYXT1CrD+B4l19U7awiQ8rk7w==",
+              "dev": true
+            }
           }
         }
       }
@@ -6155,6 +6343,12 @@
       "resolved": "http://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
       "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE="
     },
+    "jsonparse": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/jsonparse/-/jsonparse-1.3.1.tgz",
+      "integrity": "sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA=",
+      "dev": true
+    },
     "jsprim": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
@@ -6593,6 +6787,97 @@
       "integrity": "sha512-c3sIjNUow0+8swNwVpqoH4YCShKNFkMaw6oH1mNS2haDZQqkeZFlHS3dhoeEbKKmJB4vXpJucU6oH75aDYeE9g==",
       "dev": true
     },
+    "make-fetch-happen": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-4.0.1.tgz",
+      "integrity": "sha512-7R5ivfy9ilRJ1EMKIOziwrns9fGeAD4bAha8EB7BIiBBLHm2KeTUGCrICFt2rbHfzheTLynv50GnNTK1zDTrcQ==",
+      "dev": true,
+      "requires": {
+        "agentkeepalive": "^3.4.1",
+        "cacache": "^11.0.1",
+        "http-cache-semantics": "^3.8.1",
+        "http-proxy-agent": "^2.1.0",
+        "https-proxy-agent": "^2.2.1",
+        "lru-cache": "^4.1.2",
+        "mississippi": "^3.0.0",
+        "node-fetch-npm": "^2.0.2",
+        "promise-retry": "^1.1.1",
+        "socks-proxy-agent": "^4.0.0",
+        "ssri": "^6.0.0"
+      },
+      "dependencies": {
+        "cacache": {
+          "version": "11.3.2",
+          "resolved": "https://registry.npmjs.org/cacache/-/cacache-11.3.2.tgz",
+          "integrity": "sha512-E0zP4EPGDOaT2chM08Als91eYnf8Z+eH1awwwVsngUmgppfM5jjJ8l3z5vO5p5w/I3LsiXawb1sW0VY65pQABg==",
+          "dev": true,
+          "requires": {
+            "bluebird": "^3.5.3",
+            "chownr": "^1.1.1",
+            "figgy-pudding": "^3.5.1",
+            "glob": "^7.1.3",
+            "graceful-fs": "^4.1.15",
+            "lru-cache": "^5.1.1",
+            "mississippi": "^3.0.0",
+            "mkdirp": "^0.5.1",
+            "move-concurrently": "^1.0.1",
+            "promise-inflight": "^1.0.1",
+            "rimraf": "^2.6.2",
+            "ssri": "^6.0.1",
+            "unique-filename": "^1.1.1",
+            "y18n": "^4.0.0"
+          },
+          "dependencies": {
+            "lru-cache": {
+              "version": "5.1.1",
+              "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+              "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+              "dev": true,
+              "requires": {
+                "yallist": "^3.0.2"
+              }
+            }
+          }
+        },
+        "mississippi": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz",
+          "integrity": "sha512-x471SsVjUtBRtcvd4BzKE9kFC+/2TeWgKCgw0bZcw1b9l2X3QX5vCWgF+KaZaYm87Ss//rHnWryupDrgLvmSkA==",
+          "dev": true,
+          "requires": {
+            "concat-stream": "^1.5.0",
+            "duplexify": "^3.4.2",
+            "end-of-stream": "^1.1.0",
+            "flush-write-stream": "^1.0.0",
+            "from2": "^2.1.0",
+            "parallel-transform": "^1.1.0",
+            "pump": "^3.0.0",
+            "pumpify": "^1.3.3",
+            "stream-each": "^1.1.0",
+            "through2": "^2.0.0"
+          }
+        },
+        "pump": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+          "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+          "dev": true,
+          "requires": {
+            "end-of-stream": "^1.1.0",
+            "once": "^1.3.1"
+          }
+        },
+        "ssri": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz",
+          "integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==",
+          "dev": true,
+          "requires": {
+            "figgy-pudding": "^3.5.1"
+          }
+        }
+      }
+    },
     "map-age-cleaner": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
@@ -6817,6 +7102,25 @@
       "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
       "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
     },
+    "minipass": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz",
+      "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "^5.1.2",
+        "yallist": "^3.0.0"
+      }
+    },
+    "minizlib": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.2.1.tgz",
+      "integrity": "sha512-7+4oTUOWKg7AuL3vloEWekXY2/D20cevzsrNT2kGWm+39J9hGTCBv8VI5Pm5lXZ/o3/mdR4f8rflAPhnQb8mPA==",
+      "dev": true,
+      "requires": {
+        "minipass": "^2.2.1"
+      }
+    },
     "mississippi": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-2.0.0.tgz",
@@ -6984,6 +7288,13 @@
         "bootstrap": "^4.1.3",
         "moment": "^2.10.6",
         "moment-hijri": "^2.1.1"
+      },
+      "dependencies": {
+        "bootstrap": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.2.1.tgz",
+          "integrity": "sha512-tt/7vIv3Gm2mnd/WeDx36nfGGHleil0Wg8IeB7eMrVkY0fZ5iTaBisSh8oNANc2IBsCc6vCgCNTIM/IEN0+50Q=="
+        }
       }
     },
     "ng-sidebar": {
@@ -6996,6 +7307,15 @@
       "resolved": "https://registry.npmjs.org/ng-simple-slideshow/-/ng-simple-slideshow-1.2.6.tgz",
       "integrity": "sha512-XL3JZryBqFUUrdzKfyE2A31aWyslTYAvxZNfntJdwVgCftM6PpI8CgLXoiSHtxRJYuH3kTzdNTYw2bJVUkesQQ=="
     },
+    "ng2-carousel-angular5": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/ng2-carousel-angular5/-/ng2-carousel-angular5-1.0.5.tgz",
+      "integrity": "sha512-sRqX3B4c9irgjyhtRIFpgKsRa4OHbQ1GMXS3vfippXbbHfIWBAxfkq3MYKqn3QLm4lk290bFOBBRkvK1wagJfQ==",
+      "requires": {
+        "@types/lodash.isequal": "^4.5.2",
+        "lodash.isequal": "^4.5.0"
+      }
+    },
     "ng2-carouselamos": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/ng2-carouselamos/-/ng2-carouselamos-3.2.0.tgz",
@@ -7149,9 +7469,9 @@
       }
     },
     "ngx-owl-carousel-o": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/ngx-owl-carousel-o/-/ngx-owl-carousel-o-1.0.10.tgz",
-      "integrity": "sha512-w/McwMYtsfrX9ffY8xtgZC3PNDFRz/K1Z5FUP4NO71tnfBms/bejE1yn/hvCER0x0xYO9jiJTvgpF18sKH63RA==",
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/ngx-owl-carousel-o/-/ngx-owl-carousel-o-1.0.11.tgz",
+      "integrity": "sha512-pRxDTln1Lo4tIfJh+TD60JAbFd6Bxu+47NKg6KLaxtVaFMcWXbuN9flVK20doyz/tARMqt3X38BhXNI7bwevBA==",
       "requires": {
         "tslib": "^1.9.0"
       }
@@ -7210,6 +7530,17 @@
       "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
       "dev": true
     },
+    "node-fetch-npm": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/node-fetch-npm/-/node-fetch-npm-2.0.2.tgz",
+      "integrity": "sha512-nJIxm1QmAj4v3nfCvEeCrYSoVwXyxLnaPBK5W1W5DGEJwjlKuC2VEUycGw5oxk+4zZahRrB84PUJJgEmhFTDFw==",
+      "dev": true,
+      "requires": {
+        "encoding": "^0.1.11",
+        "json-parse-better-errors": "^1.0.0",
+        "safe-buffer": "^5.1.1"
+      }
+    },
     "node-forge": {
       "version": "0.7.5",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.5.tgz",
@@ -7388,6 +7719,12 @@
       "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
       "dev": true
     },
+    "npm-bundled": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.0.6.tgz",
+      "integrity": "sha512-8/JCaftHwbd//k6y2rEWp6k1wxVfpFzB6t1p825+cUb7Ym2XQfhwIC5KwhrvzZRJu+LtDE585zVaS32+CGtf0g==",
+      "dev": true
+    },
     "npm-package-arg": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.0.tgz",
@@ -7400,24 +7737,39 @@
         "validate-npm-package-name": "^3.0.0"
       }
     },
-    "npm-registry-client": {
-      "version": "8.6.0",
-      "resolved": "https://registry.npmjs.org/npm-registry-client/-/npm-registry-client-8.6.0.tgz",
-      "integrity": "sha512-Qs6P6nnopig+Y8gbzpeN/dkt+n7IyVd8f45NTMotGk6Qo7GfBmzwYx6jRLoOOgKiMnaQfYxsuyQlD8Mc3guBhg==",
+    "npm-packlist": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.3.0.tgz",
+      "integrity": "sha512-qPBc6CnxEzpOcc4bjoIBJbYdy0D/LFFPUdxvfwor4/w3vxeE0h6TiOVurCEPpQ6trjN77u/ShyfeJGsbAfB3dA==",
+      "dev": true,
+      "requires": {
+        "ignore-walk": "^3.0.1",
+        "npm-bundled": "^1.0.1"
+      }
+    },
+    "npm-pick-manifest": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/npm-pick-manifest/-/npm-pick-manifest-2.2.3.tgz",
+      "integrity": "sha512-+IluBC5K201+gRU85vFlUwX3PFShZAbAgDNp2ewJdWMVSppdo/Zih0ul2Ecky/X7b51J7LrrUAP+XOmOCvYZqA==",
+      "dev": true,
+      "requires": {
+        "figgy-pudding": "^3.5.1",
+        "npm-package-arg": "^6.0.0",
+        "semver": "^5.4.1"
+      }
+    },
+    "npm-registry-fetch": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/npm-registry-fetch/-/npm-registry-fetch-3.9.0.tgz",
+      "integrity": "sha512-srwmt8YhNajAoSAaDWndmZgx89lJwIZ1GWxOuckH4Coek4uHv5S+o/l9FLQe/awA+JwTnj4FJHldxhlXdZEBmw==",
       "dev": true,
       "requires": {
-        "concat-stream": "^1.5.2",
-        "graceful-fs": "^4.1.6",
-        "normalize-package-data": "~1.0.1 || ^2.0.0",
-        "npm-package-arg": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0",
-        "npmlog": "2 || ^3.1.0 || ^4.0.0",
-        "once": "^1.3.3",
-        "request": "^2.74.0",
-        "retry": "^0.10.0",
-        "safe-buffer": "^5.1.1",
-        "semver": "2 >=2.2.1 || 3.x || 4 || 5",
-        "slide": "^1.1.3",
-        "ssri": "^5.2.4"
+        "JSONStream": "^1.3.4",
+        "bluebird": "^3.5.1",
+        "figgy-pudding": "^3.4.1",
+        "lru-cache": "^4.1.3",
+        "make-fetch-happen": "^4.0.1",
+        "npm-package-arg": "^6.1.0"
       }
     },
     "npm-run-path": {
@@ -7730,6 +8082,141 @@
       "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=",
       "dev": true
     },
+    "pacote": {
+      "version": "9.4.0",
+      "resolved": "https://registry.npmjs.org/pacote/-/pacote-9.4.0.tgz",
+      "integrity": "sha512-WQ1KL/phGMkedYEQx9ODsjj7xvwLSpdFJJdEXrLyw5SILMxcTNt5DTxT2Z93fXuLFYJBlZJdnwdalrQdB/rX5w==",
+      "dev": true,
+      "requires": {
+        "bluebird": "^3.5.3",
+        "cacache": "^11.3.2",
+        "figgy-pudding": "^3.5.1",
+        "get-stream": "^4.1.0",
+        "glob": "^7.1.3",
+        "lru-cache": "^5.1.1",
+        "make-fetch-happen": "^4.0.1",
+        "minimatch": "^3.0.4",
+        "minipass": "^2.3.5",
+        "mississippi": "^3.0.0",
+        "mkdirp": "^0.5.1",
+        "normalize-package-data": "^2.4.0",
+        "npm-package-arg": "^6.1.0",
+        "npm-packlist": "^1.1.12",
+        "npm-pick-manifest": "^2.2.3",
+        "npm-registry-fetch": "^3.8.0",
+        "osenv": "^0.1.5",
+        "promise-inflight": "^1.0.1",
+        "promise-retry": "^1.1.1",
+        "protoduck": "^5.0.1",
+        "rimraf": "^2.6.2",
+        "safe-buffer": "^5.1.2",
+        "semver": "^5.6.0",
+        "ssri": "^6.0.1",
+        "tar": "^4.4.8",
+        "unique-filename": "^1.1.1",
+        "which": "^1.3.1"
+      },
+      "dependencies": {
+        "cacache": {
+          "version": "11.3.2",
+          "resolved": "https://registry.npmjs.org/cacache/-/cacache-11.3.2.tgz",
+          "integrity": "sha512-E0zP4EPGDOaT2chM08Als91eYnf8Z+eH1awwwVsngUmgppfM5jjJ8l3z5vO5p5w/I3LsiXawb1sW0VY65pQABg==",
+          "dev": true,
+          "requires": {
+            "bluebird": "^3.5.3",
+            "chownr": "^1.1.1",
+            "figgy-pudding": "^3.5.1",
+            "glob": "^7.1.3",
+            "graceful-fs": "^4.1.15",
+            "lru-cache": "^5.1.1",
+            "mississippi": "^3.0.0",
+            "mkdirp": "^0.5.1",
+            "move-concurrently": "^1.0.1",
+            "promise-inflight": "^1.0.1",
+            "rimraf": "^2.6.2",
+            "ssri": "^6.0.1",
+            "unique-filename": "^1.1.1",
+            "y18n": "^4.0.0"
+          }
+        },
+        "get-stream": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
+          "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
+          "dev": true,
+          "requires": {
+            "pump": "^3.0.0"
+          }
+        },
+        "lru-cache": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+          "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+          "dev": true,
+          "requires": {
+            "yallist": "^3.0.2"
+          }
+        },
+        "mississippi": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz",
+          "integrity": "sha512-x471SsVjUtBRtcvd4BzKE9kFC+/2TeWgKCgw0bZcw1b9l2X3QX5vCWgF+KaZaYm87Ss//rHnWryupDrgLvmSkA==",
+          "dev": true,
+          "requires": {
+            "concat-stream": "^1.5.0",
+            "duplexify": "^3.4.2",
+            "end-of-stream": "^1.1.0",
+            "flush-write-stream": "^1.0.0",
+            "from2": "^2.1.0",
+            "parallel-transform": "^1.1.0",
+            "pump": "^3.0.0",
+            "pumpify": "^1.3.3",
+            "stream-each": "^1.1.0",
+            "through2": "^2.0.0"
+          }
+        },
+        "pump": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+          "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+          "dev": true,
+          "requires": {
+            "end-of-stream": "^1.1.0",
+            "once": "^1.3.1"
+          }
+        },
+        "semver": {
+          "version": "5.6.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.6.0.tgz",
+          "integrity": "sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg==",
+          "dev": true
+        },
+        "ssri": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz",
+          "integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==",
+          "dev": true,
+          "requires": {
+            "figgy-pudding": "^3.5.1"
+          }
+        },
+        "tar": {
+          "version": "4.4.8",
+          "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.8.tgz",
+          "integrity": "sha512-LzHF64s5chPQQS0IYBn9IN5h3i98c12bo4NCO7e0sGM2llXQ3p2FGC5sdENN4cTW48O915Sh+x+EXx7XW96xYQ==",
+          "dev": true,
+          "requires": {
+            "chownr": "^1.1.1",
+            "fs-minipass": "^1.2.5",
+            "minipass": "^2.3.4",
+            "minizlib": "^1.1.1",
+            "mkdirp": "^0.5.0",
+            "safe-buffer": "^5.1.2",
+            "yallist": "^3.0.2"
+          }
+        }
+      }
+    },
     "pako": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.6.tgz",
@@ -7947,9 +8434,9 @@
       }
     },
     "popper.js": {
-      "version": "1.14.6",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.6.tgz",
-      "integrity": "sha512-AGwHGQBKumlk/MDfrSOf0JHhJCImdDMcGNoqKmKkU+68GFazv3CQ6q9r7Ja1sKDZmYWTckY/uLyEznheTDycnA=="
+      "version": "1.14.7",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.7.tgz",
+      "integrity": "sha512-4q1hNvoUre/8srWsH7hnoSJ5xVmIL4qgz+s4qf2TnJIMyZFUFMGH+9vE7mXynAlHSZ/NdTmmow86muD0myUkVQ=="
     },
     "portfinder": {
       "version": "1.0.17",
@@ -8103,6 +8590,25 @@
       "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=",
       "dev": true
     },
+    "promise-retry": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/promise-retry/-/promise-retry-1.1.1.tgz",
+      "integrity": "sha1-ZznpaOMFHaIM5kl/srUPaRHfPW0=",
+      "dev": true,
+      "requires": {
+        "err-code": "^1.0.0",
+        "retry": "^0.10.0"
+      }
+    },
+    "protoduck": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/protoduck/-/protoduck-5.0.1.tgz",
+      "integrity": "sha512-WxoCeDCoCBY55BMvj4cAEjdVUFGRWed9ZxPlqTKYyw1nDDTQ4pqmnIMAGfJlg7Dx35uB/M+PHJPTmGOvaCaPTg==",
+      "dev": true,
+      "requires": {
+        "genfun": "^5.0.0"
+      }
+    },
     "protractor": {
       "version": "5.4.1",
       "resolved": "https://registry.npmjs.org/protractor/-/protractor-5.4.1.tgz",
@@ -9149,10 +9655,10 @@
       "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz",
       "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA=="
     },
-    "slide": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/slide/-/slide-1.1.6.tgz",
-      "integrity": "sha1-VusCfWW00tzmyy4tMsTUr8nh1wc=",
+    "smart-buffer": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.0.2.tgz",
+      "integrity": "sha512-JDhEpTKzXusOqXZ0BUIdH+CjFdO/CR3tLlf5CN34IypI+xMmXW1uB16OOY8z3cICbJlDAVJzNbwBhNO0wt9OAw==",
       "dev": true
     },
     "snapdragon": {
@@ -9410,6 +9916,26 @@
         }
       }
     },
+    "socks": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/socks/-/socks-2.2.3.tgz",
+      "integrity": "sha512-+2r83WaRT3PXYoO/1z+RDEBE7Z2f9YcdQnJ0K/ncXXbV5gJ6wYfNAebYFYiiUjM6E4JyXnPY8cimwyvFYHVUUA==",
+      "dev": true,
+      "requires": {
+        "ip": "^1.1.5",
+        "smart-buffer": "4.0.2"
+      }
+    },
+    "socks-proxy-agent": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-4.0.1.tgz",
+      "integrity": "sha512-Kezx6/VBguXOsEe5oU3lXYyKMi4+gva72TwJ7pQY5JfqUx2nMk7NXA6z/mpNqIlfQjWYVfeuNvQjexiTaTn6Nw==",
+      "dev": true,
+      "requires": {
+        "agent-base": "~4.2.0",
+        "socks": "~2.2.0"
+      }
+    },
     "source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",

package.json

@@ -11,6 +11,7 @@
   },
   "private": true,
   "dependencies": {
+    "@agm/core": "^1.0.0-beta.5",
     "@angular/animations": "^7.2.0",
     "@angular/common": "~7.0.0",
     "@angular/compiler": "~7.0.0",
@@ -25,22 +26,26 @@
     "@ngui/tab": "^0.5.0",
     "@types/chart.js": "^2.7.40",
     "@types/es6-promise": "^3.3.0",
+    "@types/hammerjs": "^2.0.36",
     "@types/jwt-decode": "^2.2.1",
     "alife-file-to-base64": "0.0.2",
     "angular-calendar": "^0.26.4",
     "angular-font-awesome": "^3.1.2",
+    "angular-i18n": "^1.7.7",
+    "angular2-carousel": "^1.0.16",
     "angular2-collapsible": "^0.6.1",
     "angular2-jwt": "^0.2.3",
     "angular2-modal": "^3.0.3",
     "angularx-flatpickr": "^6.1.0",
-    "bootstrap": "^4.1.3",
+    "animate.css": "^3.7.0",
+    "bootstrap": "^4.0.0-beta",
     "chart.js": "^2.7.2",
     "core-js": "^2.5.4",
     "cuppa-ng2-slidemenu": "^2.0.0",
     "date-fns": "^1.30.1",
     "flatpickr": "^4.5.2",
     "font-awesome": "^4.7.0",
-    "hammerjs": "~2.0.8",
+    "hammerjs": "^2.0.8",
     "hijri-date": "^0.2.2",
     "jquery": "^3.3.1",
     "jw-angular-social-buttons": "^1.0.0",
@@ -51,6 +56,7 @@
     "ng-hijri-gregorian-datepicker": "^1.0.0",
     "ng-sidebar": "^8.0.0",
     "ng-simple-slideshow": "^1.2.6",
+    "ng2-carousel-angular5": "^1.0.5",
     "ng2-carouselamos": "^3.2.0",
     "ng2-opd-popup": "^1.1.21",
     "ng2-social-share": "0.0.10",
@@ -60,7 +66,7 @@
     "ngx-modialog": "^5.0.1",
     "ngx-moment": "^3.3.0",
     "ngx-owl-carousel": "^2.0.7",
-    "ngx-owl-carousel-o": "^1.0.10",
+    "ngx-owl-carousel-o": "^1.0.11",
     "ngx-pagination": "^3.2.1",
     "ngx-quill": "^3.0.0",
     "ngx-slick": "^0.2.1",
@@ -68,7 +74,8 @@
     "ngx-slimscroll": "^7.1.0",
     "ngx-spinner": "^6.1.2",
     "ngx-toastr": "^9.1.1",
-    "popper.js": "^1.14.6",
+    "owl.carousel": "^2.3.4",
+    "popper.js": "^1.14.7",
     "rxjs": "~6.3.3",
     "rxjs-compat": "^6.3.3",
     "slick-carousel": "^1.8.1",
@@ -76,7 +83,7 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^0.12.2",
-    "@angular/cli": "~7.0.6",
+    "@angular/cli": "^7.3.1",
     "@angular/compiler-cli": "~7.0.0",
     "@angular/language-service": "~7.0.0",
     "@types/core-js": "^2.5.0",

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

@@ -0,0 +1,24 @@
+.eventContent-w {
+    width: 100%;
+    height: 100%;
+}
+
+.eventContent-w h3 {
+    width: 100%;
+    background-color: #c1e6e4;
+    font-size: 18px;
+    margin: 0;
+    padding: 12px 0;
+}
+
+.monthName-w {
+    width: 100%;
+    padding: 0;
+    margin-top: -72px;
+    background-color: #c1e6e4;
+    padding: 13px 0;
+}
+
+.cal-month-view .cal-day-cell {
+    height: 50px !important;
+}

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

@@ -0,0 +1,68 @@
+<div class="eventContent-w" [ngClass]="{'eventContentChange-w': showDetailsEvent}">
+  
+    <ng-template #modalContent let-close="close">
+      <div class="modal-header">
+        <h5 class="modal-title">Event action occurred</h5>
+        <button type="button" class="close" (click)="close()">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <div>
+          Action:
+          <pre>{{ modalData?.action }}</pre>
+        </div>
+        <div>
+          Event:
+          <pre>{{ modalData?.event | json }}</pre>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-outline-secondary" (click)="close()">OK</button>
+      </div>
+    </ng-template>
+    
+    <div class="row text-center">
+      <div class="col-md-12">
+        <h3>{{ viewDate | calendarDate:(view + 'ViewTitle') }}</h3>
+      </div>
+    </div>
+
+    <div [ngSwitch]="view">
+      <mwl-calendar-month-view
+        *ngSwitchCase="CalendarView.Month"
+        [viewDate]="viewDate"
+        [events]="events"
+        [refresh]="refresh"
+        [activeDayIsOpen]="activeDayIsOpen"
+        (dayClicked)="dayClicked($event.day)"
+        (eventClicked)="handleEvent('Clicked', $event.event)"
+        (eventTimesChanged)="eventTimesChanged($event)">
+      </mwl-calendar-month-view>
+      <mwl-calendar-week-view
+        *ngSwitchCase="CalendarView.Week"
+        [viewDate]="viewDate"
+        [events]="events"
+        [refresh]="refresh"
+        (eventClicked)="handleEvent('Clicked', $event.event)"
+        (eventTimesChanged)="eventTimesChanged($event)">
+      </mwl-calendar-week-view>
+      <mwl-calendar-day-view
+        *ngSwitchCase="CalendarView.Day"
+        [viewDate]="viewDate"
+        [events]="events"
+        [refresh]="refresh"
+        (eventClicked)="handleEvent('Clicked', $event.event)"
+        (eventTimesChanged)="eventTimesChanged($event)">
+      </mwl-calendar-day-view>
+    </div>
+        
+    <div class="popUp" *ngIf="showDetailsEvent">
+      <h1 class="text-center">{{dataLecture.title}}</h1>
+      <p [innerHTML]="dataLecture.description"></p>
+      <button class="btn btn-danger" (click)="closeDetailEvent()"><i class="fas fa-times-circle"></i></button>
+    </div>
+  </div>
+  
+
+

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

@@ -0,0 +1,146 @@
+import { AuthServiceService } from './../../shared/auth-service.service';
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit,
+  ChangeDetectionStrategy,
+  ViewChild,
+  TemplateRef, 
+  Input} from '@angular/core';
+  import { NgxSpinnerService } from 'ngx-spinner';
+
+
+import {
+startOfDay,
+endOfDay,
+subDays,
+addDays,
+endOfMonth,
+isSameDay,
+isSameMonth,
+addHours
+} from 'date-fns';
+
+import { Subject } from 'rxjs';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import {
+  CalendarEvent,
+  CalendarEventAction,
+  CalendarEventTimesChangedEvent,
+  CalendarView
+} from 'angular-calendar';
+const colors: any = {
+  red: {
+    primary: '#ad2121',
+    secondary: '#FAE3E3'
+  },
+  blue: {
+    primary: '#1e90ff',
+    secondary: '#D1E8FF'
+  },
+  yellow: {
+    primary: '#e3bc08',
+    secondary: '#FDF1BA'
+  }
+};
+
+@Component({
+  selector: 'app-external-events',
+  templateUrl: './external-events.component.html',
+  styleUrls: ['./external-events.component.css']
+})
+
+export class ExternalEventsComponent implements OnInit {
+
+  events: CalendarEvent[] = [];
+  refresh: Subject<any> = new Subject();
+  dataLecture: any;
+  showDetailsEvent:boolean = false;
+
+  constructor(private modal: NgbModal, 
+    private http: HttpClient,
+    private authSer: AuthServiceService,
+    private spinner:NgxSpinnerService) {}
+
+
+  ngOnInit() {
+    //this.spinner.show();
+    
+    this.loadEvents();
+    this.refresh.next();
+    console.log('hfdfdsjkfhdsjkfhdkjfhsdkjfhskjfhsfkjfhkj',this.dataLecture);
+    console.log("dddddddd"+new Date())
+  }
+
+  loadEvents(): void {
+    this.http.get(this.authSer.pathApi + '/event_calendars_list').subscribe(
+      (responce) => {
+        this.dataLecture = responce['event_calendars'];
+          for(let i=0; i< this.dataLecture.length; i++) {
+          let event: any={};
+          event['start'] = new Date(this.dataLecture[i].event_time);
+          event['title'] = this.dataLecture[i].title;
+          event['description'] = this.dataLecture[i].description;
+          event['description_en'] = this.dataLecture[i].description_en;
+          this.events.push(event);
+        }
+        console.log('eveeeeeeeeeeeeeeeeeeeeeeeeeeents', this.events);
+          this.dayClicked({ date: new Date(), events: this.events });
+      },
+      (error) => {
+        console.log(error);
+      }
+    )
+  }
+
+
+  @ViewChild('modalContent')
+    modalContent: TemplateRef<any>;
+
+    view: CalendarView = CalendarView.Month;
+
+    CalendarView = CalendarView;
+
+    viewDate: Date = new Date();
+
+    modalData: {
+      action: string;
+      event: CalendarEvent;
+    };
+
+
+
+
+
+    activeDayIsOpen: boolean = true;
+
+
+
+    dayClicked({ date, events }: { date: Date; events: CalendarEvent[] }): void {
+      console.log(date)
+
+      if (isSameMonth(date, this.viewDate)) {
+        this.viewDate = date;
+        if (
+          (isSameDay(this.viewDate, date) && this.activeDayIsOpen === true) ||
+          events.length === 0
+        ) {
+          this.activeDayIsOpen = false;
+        } else {
+          this.activeDayIsOpen = true;
+        }
+      }
+    }
+
+
+    handleEvent(ssss,event) {
+      this.showDetailsEvent = true;
+      console.log(ssss , event);
+      this.dataLecture = event;
+      console.log('dataaaaaa lectrueeeeee',this.dataLecture);
+    }
+
+    closeDetailEvent() {
+      this.showDetailsEvent = false;
+    }
+
+  
+}

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

@@ -0,0 +1,486 @@
+input,button {
+    outline: none;
+}
+
+.externalPageContentt-w {
+    width: 100%;
+    display: inline-block;
+    padding: 20px 0;
+}
+
+.externalPageContentt-w .sliderNews-w {
+    width: 100%;
+    height: 400px;
+}
+
+.sliderNews-w .carousel-inner img {
+    width: 100%;
+    height: 400px;
+}
+
+.sliderNews-w .carousel-caption {
+    position: fixed;
+    width: 100%;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.7);
+    z-index: 10;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    color: #fff;
+    text-align: center;
+    right: 0;
+    left: 0;
+}
+
+.sliderNews-w .carousel-caption .more {
+    width: 90px;
+    padding: 5px;
+    background-color: #00a99d;
+    border: 1px solid #00a99d;
+    border-radius: 5px;
+    color: #fff;
+    position: absolute;
+    left: 10px;
+    bottom: 20px;
+    cursor: pointer;
+    transition: all 0.5s;
+}
+
+.sliderNews-w .carousel-caption .more:hover {
+    background-color: #35e2d6;
+    border: 1px solid #35e2d6;
+    color: #252525;
+
+}
+
+.sliderNews-w .carousel-caption h5 {
+    color: #00a99d;
+}
+
+.eventPart-w,
+.eventPartEn-w {
+    width: 100%;
+    height: 40px;
+    padding: 5px 0;
+    background-color: #e5f7f6;
+    margin: 10px 0;
+}
+
+
+.carousel-indicators {
+    bottom: -5px;
+}
+
+.carousel-indicators li {
+    cursor: pointer;
+    width: 25px;
+    height: 7px;
+    border-radius: 5px;
+    background-color: #fff;
+}
+
+
+.carousel-indicators .active {
+    background-color: #00a99d;
+}
+
+.eventPart-w .carousel-caption,
+.eventPartEn-w .carousel-caption {
+    position: initial;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 10;
+    padding-top: 0;
+    padding-bottom: 0;
+    color: #fff;
+    text-align: right;
+} 
+
+.eventPartEn-w .carousel-caption {
+    text-align: left;
+}
+
+.eventPart-w .carousel-caption p,
+.eventPartEn-w .carousel-caption p {
+    margin-left: 10px;
+    color: #8e8d8d;
+}
+
+.eventPart-w .carousel-caption p img {
+    width: 25px;
+    margin: 0 5px;
+    margin-right: 15px;
+}
+
+.eventPartEn-w .carousel-caption p img {
+    width: 25px;
+    margin: 0 5px;
+    margin-right: 15px;
+    float: left;
+}
+
+.eventPart-w .carousel-caption p span{
+    color: #e5979d;
+    font-weight: bold;
+}
+
+.eventPartEn-w .carousel-caption p span {
+    color: #e5979d;
+    font-weight: bold;
+}
+.eventPart-w .moreEvent-w {
+    position: absolute;
+    left: 10px;
+    background-color: transparent;
+    border: none;
+    color: #1ba097;
+    top: 0;
+    cursor: pointer;
+    font-weight: bold;
+}
+
+.eventPartEn-w .moreEventEn-w {
+    position: absolute;
+    right: 10px;
+    background-color: transparent;
+    border: none;
+    color: #1ba097;
+    top: 0;
+    cursor: pointer;
+    font-weight: bold;
+}
+
+
+.externalServices-w {
+    width: 100%;
+    padding: 20px 0;
+}
+
+.externalServices-w a {
+    text-decoration: none;
+}
+
+.externalServices-w .item {
+    width: 100%;
+    height: 150px;
+    /* radial-gradient(0.5turn,#efeeee, #1db5ab, #1ba097); */
+    background: radial-gradient(farthest-corner at 129px 53px,     #c4d8d7 0%, #00a99d 100%);
+    margin: 10px 0;
+}
+
+.externalServices-w .item img {
+    width: 50px;
+    margin: 10px 0;
+}
+
+
+
+.externalServices-w .item p {
+    color: #fff;
+    font-size: 16px;
+    margin: 10px 0;
+}
+
+.lectureService-w {
+    width: 100%;
+    display: inline-block;
+}
+
+.lectureService-w .advertisimentServices-w {
+    width: 100%;
+    height: 300px;
+}
+
+.lectureService-w .advertisimentServices-w h1 {
+    font-size: 18px;
+    background-color: #1ba097;
+    color: #fff;
+    padding: 12px 0;
+    margin: 0;
+}
+
+.lectureService-w .advertisimentServices-w .body{
+    width: 100%;
+    height: 214px;
+    background-color: #fff;
+    box-shadow: 0 1px 1px #ccc;
+}
+
+
+
+/* .lectureService-w .advertisimentServices-w .body p{
+    padding: 8px 0;
+    background-color: #d7ecec;
+    color: #bda380;
+} */
+
+.lectureService-w .visitingTime-w {
+    width: 100%;
+    height: 300px;
+}
+
+.lectureService-w .visitingTime-w .monthRecord-w {
+    width: 100%;
+}
+
+.lectureService-w .visitingTime-w .monthRecord-w h1 {
+    font-size: 18px;
+    background-color: #c1e6e4;
+    color: #bda380;
+    padding: 12px 0;
+    margin: 0;
+}
+
+.lectureService-w .visitingTime-w .achiev h1 {
+    font-size: 18px;
+    background-color: #c1e6e4;
+    color: #bda380;
+    padding: 12px 0;
+    margin: 0;
+}
+
+.lectureService-w .visitingTime-w h1 {
+    font-size: 18px;
+    background-color: #1ba097;
+    color: #fff;
+    padding: 12px 0;
+    margin: 0;
+    text-align: center;
+}
+
+.lectureService-w .visitingTime-w .monthRecord-w .body {
+    padding: 20px 0;
+    background-color: #fff;
+    box-shadow: 0 1px 1px #ccc;
+    height: 170px;
+}
+
+.lectureService-w .visitingTime-w .monthRecord-w .body ul {
+    padding: 0 15px;
+}
+
+.lectureService-w .visitingTime-w .monthRecord-w .body ul li {
+    display: inline-block;
+    margin: 0 40px;
+    position: relative;
+}
+
+.lectureService-w .visitingTime-w .monthRecord-w .body ul li span {
+    position: absolute;
+    bottom: 0;
+    left: -10px;
+    top: 53px;
+    font-size: 15px;
+}
+
+.lectureService-w .visitingTime-w .monthRecord-w .body ul li img {
+    width: 80px;
+}
+
+.lectureService-w .visitingTime-w .achiev .body ul {
+    padding: 0 15px;
+}
+
+.lectureService-w .visitingTime-w .achiev .body ul li {
+    display: inline-block;
+    margin: 0 40px;
+    position: relative;
+}
+
+.lectureService-w .visitingTime-w .achiev .body ul li span {
+    position: absolute;
+    bottom: 0;
+    left: -10px;
+    top: 53px;
+    font-size: 15px;
+}
+
+.lectureService-w .visitingTime-w .achiev .body ul li img {
+    width: 80px;
+}
+
+.lectureService-w .visitingTime-w .achiev .body{
+    padding: 20px 0;
+    background-color: #fff;
+    box-shadow: 0 1px 1px #ccc;
+    height: 170px;
+}
+
+.externalPageContentt-w .recordsContent-w {
+    width: 100%;
+}
+
+
+.externalPageContentt-w .recordsContent-w h1 {
+    font-size: 18px;
+    background-color: #1ba097;
+    color: #fff;
+    padding: 12px 0;
+    margin: 0;
+    text-align: center;
+}
+
+.externalPageContentt-w .recordsContent-w .records {
+    width: 100%;
+}
+
+.externalPageContentt-w .recordsContent-w .records .body {
+    width: 100%;
+    height: 209px;
+    background-color: #fff;
+    box-shadow: 0 1px 1px #ccc;
+    padding: 2px 0;
+}
+
+.externalPageContentt-w .recordsContent-w .records .body ul {
+    padding: 0;
+}
+
+.externalPageContentt-w .recordsContent-w .records .body ul li {
+    width: 100%;
+    border-bottom: 1px solid #ccc;
+    color: #00a99d;
+    font-size: 16px;
+    margin: 10px 0;
+    padding: 5px 10px;
+}
+
+.externalPageContentt-w .recordsContent-w .records .body ul li span {
+    color: #888;
+    margin: 0 10px;
+}
+
+.externalPageContentt-w .recordsContent-w .records h1{
+    font-size: 18px;
+    background-color: #c1e6e4;
+    color: #bda380;
+    padding: 12px 0;
+    margin: 0;
+    text-align: center;
+}
+
+.externalPageContentt-w .recordsContent-w .medical h1{
+    font-size: 18px;
+    background-color: #c1e6e4;
+    color: #bda380;
+    padding: 12px 0;
+    margin: 0;
+    text-align: center;
+}
+
+.externalPageContentt-w .recordsContent-w .medical .body {
+    width: 100%;
+    height: 209px;
+    background-color: #fff;
+    box-shadow: 0 1px 1px #ccc;
+}
+
+
+.externalPageContentt-w .recordsContent-w .medical .body #demo2 {
+    width: 100%;
+    height: 100;
+}
+
+.externalPageContentt-w .recordsContent-w .medical .body #demo2 .active {
+    background-color: #fff !important;
+    color: #000 !important;
+}
+
+.externalPageContentt-w .recordsContent-w .medical .body .carousel-inner {
+    width: 100%;
+    height: 100%;
+}
+
+.externalPageContentt-w .recordsContent-w .medical .body .carousel-inner h3,
+.externalPageContentt-w .recordsContent-w .medical .body .carousel-inner p {
+    color: #bda380;
+}
+
+.externalPageContentt-w .recordsContent-w .medical .body .carousel-caption {
+    position: inherit;
+    height: 170px;;
+    z-index: 10;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    color: #fff;
+    text-align: center;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    background: transparent;
+}
+
+.externalPageContentt-w .recordsContent-w .medical .body #demo2 .carousel-indicators {
+    margin-right: 7%;
+}
+
+.externalPageContentt-w .recordsContent-w .medical .body #demo2 .carousel-indicators li{
+    background-color: #ccc;
+    width: 25px;
+    border-radius: 11px;
+    height: 7px;    
+}
+
+.externalPageContentt-w .recordsContent-w .medical .body #demo2 .carousel-indicators .active {
+    background-color: #007A71 !important;
+}
+
+.externalPageContentt-w .datePicker-w {
+    width: 100%;
+}
+
+.externalPageContentt-w .datePicker-w .body {
+    width: 100%;
+    height: 250px;;
+    background-color: #fff;
+    box-shadow: 0 1px 1px #ccc;
+}
+
+.externalPageContentt-w .datePicker-w h1 {
+    font-size: 18px;
+    background-color: #1ba097;
+    color: #fff;
+    padding: 12px 0;
+    margin: 0;
+    text-align: center;
+}
+
+.externalPageContentt-w .maps {
+    width: 100%;
+    display: inline-block;
+    padding: 40px 0;
+    margin: 5px 0;
+}
+
+.maps {
+    width: 100%;
+}
+
+.maps h1 {
+    font-size: 18px;
+    background-color: #1ba097;
+    color: #fff;
+    padding: 12px 0;
+    margin: 0;
+    text-align: center;
+}
+
+
+agm-map {
+    height: 300px;
+  }
+
+
+
+@media(max-width: 767px) {}
+
+@media (min-width: 767px) and (max-width: 991px) {}
+
+@media(min-width: 992px) and (max-width: 1199px) {}
+
+@media(min-width: 1200px) {
+    .container{
+        max-width: 1200px !important;
+    }
+}

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

@@ -0,0 +1,342 @@
+<ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="englishTemplate">
+    <div class="externalPageContentt-w">
+        <div class="container">
+          <div class="row">
+      
+            <div class="col-12">
+              <div class="sliderNews-w">
+                <div id="demo" class="carousel slide" data-ride="carousel">
+                    <ul class="carousel-indicators">
+                        <li *ngFor="let report of reports; let i = index" data-target="#demo" [attr.data-slide-to]="i" [ngClass]="i == 0 ? 'active' : ''"></li>
+                    </ul>
+                    <div class="carousel-inner">
+                        <div class="carousel-item" *ngFor="let report of reports; let i = index" [ngClass]="i == 0 ? 'active' : ''">
+                          <img src="{{authSer.pathImg + report['photo'].photo}}" />
+                          <div class="carousel-caption d-none d-md-block">
+                              <h5>{{report.title}}</h5>
+                              <p [innerHtml] = "report.description"></p>
+                              <button class="more">المزيد</button>
+                          </div>
+                        </div>
+                    </div>
+                </div>
+              </div>
+            </div>
+      
+            <div class="col-12">
+              <div class="eventPart-w">
+                  <div id="demo1" class="carousel slide" data-ride="carousel">
+                      <div class="carousel-inner">
+                          <div class="carousel-item" *ngFor="let event of events; let i = index" [ngClass]="i == 0 ? 'active' : ''">
+                              <div class="carousel-caption">
+                                  <p><img src="../../../assets/image/eventX.png" /> <span> حدث :</span> {{event.name}}</p> <button class="moreEvent-w">المزيد</button>
+                              </div>   
+                          </div>
+                      </div>
+                  </div> 
+              </div>
+            </div>
+      
+            <div class="col-12">
+              <div class="externalServices-w">
+                <div class="row">
+                  <div class="col-6 col-sm-6 col-md-3 col-lg-3" *ngFor="let service of services; let i = index">
+                    <a href="{{service.link}}">
+                      <div class="item text-center">
+                        <img src="{{authSer.pathImg + service.photo}}" />
+                        <p>{{service.name}}</p>
+                      </div>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="col-12">
+              <div class="lectureService-w">
+                <div class="row">
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                    <div class="advertisimentServices-w text-center">
+                      <h1>خدمات إعلانيه</h1>
+                      <div class="body">
+                        <!-- <owl-carousel [options]="mySlideOptions" [items]="images" [carouselClasses]="['owl-theme', 'sliding']" >
+                          <div class="item" *ngFor="let image of firstAdvertisiment;let i = index">
+                            <div>
+                              <img src="{{authSer.pathImg + image.photo}}"  style="width:50px; height:50px;"/>
+                            </div>
+                          </div>
+                        </owl-carousel> -->
+                        <!-- <owl-carousel [options]="mySlideOptions" [items]="images" [carouselClasses]="['owl-theme', 'sliding']" >
+                          <div class="item" *ngFor="let image of firstAdvertisiment;let i = index">
+                            <div>
+                              <img src="{{authSer.pathImg + image.photo}}" />
+                            </div>
+                          </div>
+                        </owl-carousel> -->
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-12 col-sm-12 col-md-8 col-lg-8">
+                    <div class="visitingTime-w">
+                      <h1>مواعيد الزياره</h1>
+                      <div class="row">
+                        <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+                          <div class="monthRecord-w text-center">
+                            <h1>أقسام التنويم</h1>
+                            <div class="body">
+                              <ul class="list-unstyled">
+                                <li><img src="../../../assets/image/Path 82.png" /><span style="color:green">{{hypnosisSections.open_time}}</span></li>
+                                <li><img src="../../../assets/image/Path 82.png" /><span style="color:red">{{hypnosisSections.close_time}}</span></li>
+                              </ul>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+                          <div class="achiev text-center">
+                            <h1>العنايه المركزه</h1>
+                            <div class="body">
+                              <ul class="list-unstyled">
+                                <li><img src="../../../assets/image/Path 82.png" /><span style="color:green">{{intensiveCare.open_time}}</span></li>
+                                <li><img src="../../../assets/image/Path 82.png" /><span style="color:red">{{intensiveCare.close_time}}</span></li>
+                              </ul>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+
+            <div class="col-12">
+              <div class="recordsContent-w">
+                <div class="row">
+                    <div class="col-12 col-sm-12 col-md-5">
+                      <div class="datePicker-w">
+                        <h1>تقويم الأحداث</h1>
+                        <div class="body">
+                          <app-external-events></app-external-events>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="col-12 col-sm-12 col-md-7 col-lg-7">
+                      <h1>إحصائيات عامه وإنجازات</h1>
+                      <div class="row">
+                        <div class="col-12 col-sm-12 col-md-6">
+                          <div class="records">
+                            <h1> إحصائيات شهر  {{recordsOfMonth.statistics_month}}</h1>
+                            <div class="body">
+                              <ul class="list-unstyled">
+                                <li *ngFor="let static of recordsOfMonth['statistics_values']; let i = index"> <span>{{static.value}}</span>{{static.name}}</li>
+                              </ul>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="col-12 col-sm-12 col-md-6">
+                          <div class="medical">
+                            <h1>إنجاز طبي</h1>
+                            <div class="body">
+                              <div id="demo2" class="carousel slide" data-ride="carousel">
+                                <ul class="carousel-indicators">
+                                    <li *ngFor="let achievement of achievements; let i = index" data-target="#demo2" [attr.data-slide-to]="i" [ngClass]="i == 0 ? 'active' : ''"></li>
+                                </ul>
+                                <div class="carousel-inner">
+                                    <div class="carousel-item" *ngFor="let achievement of achievements; let i = index" [ngClass]="i == 0 ? 'active' : ''">
+                                        <div class="carousel-caption">
+                                            <p>{{achievement.description}}</p>
+                                        </div>   
+                                    </div>
+                                </div>
+                              </div> 
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+              </div>
+            </div>
+
+            <div class="col-12">
+              <div class="maps">
+                <h1>إتصل بنا</h1>
+                <agm-map [latitude]="lat" [longitude]="lng">
+                    <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
+                  </agm-map>
+              </div>
+            </div>
+      
+          </div>
+        </div>
+      </div>
+</ng-template>
+
+
+<ng-template #englishTemplate>
+  <div class="externalPageContentt-w">
+      <div class="container">
+        <div class="row">
+    
+          <div class="col-12">
+            <div class="sliderNews-w">
+              <div id="demo" class="carousel slide" data-ride="carousel">
+                  <ul class="carousel-indicators">
+                      <li *ngFor="let report of reports; let i = index" data-target="#demo" [attr.data-slide-to]="i" [ngClass]="i == 0 ? 'active' : ''"></li>
+                  </ul>
+                  <div class="carousel-inner">
+                      <div class="carousel-item" *ngFor="let report of reports; let i = index" [ngClass]="i == 0 ? 'active' : ''">
+                        <img src="{{authSer.pathImg + report['photo'].photo}}" />
+                        <div class="carousel-caption d-none d-md-block">
+                            <h5>{{report.title_en}}</h5>
+                            <p [innerHtml] = "report.description_en"></p>
+                            <button class="more">More</button>
+                        </div>
+                      </div>
+                  </div>
+              </div>
+            </div>
+          </div>
+    
+          <div class="col-12">
+            <div class="eventPartEn-w">
+                <div id="demo1" class="carousel slide" data-ride="carousel">
+                    <div class="carousel-inner">
+                        <div class="carousel-item" *ngFor="let event of events; let i = index" [ngClass]="i == 0 ? 'active' : ''">
+                            <div class="carousel-caption">
+                                <p> <img src="../../../assets/image/eventX.png" />  <span> event :</span>  {{event.name_en}}</p> <button class="moreEventEn-w">More </button>
+                            </div>   
+                        </div>
+                    </div>
+                </div> 
+            </div>
+          </div>
+    
+          <div class="col-12">
+            <div class="externalServices-w">
+              <div class="row">
+                <div class="col-6 col-sm-6 col-md-3 col-lg-3" *ngFor="let service of services; let i = index">
+                  <a href="{{service.link}}">
+                    <div class="item text-center">
+                      <img src="{{authSer.pathImg + service.photo}}" />
+                      <p>{{service.name_en}}</p>
+                    </div>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+
+
+          <div class="col-12" style="direction:ltr">
+              <div class="lectureService-w">
+                <div class="row">
+                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                    <div class="advertisimentServices-w text-center">
+                      <h1>Advertising services</h1>
+                      <div class="body">
+                         
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-12 col-sm-12 col-md-8 col-lg-8">
+                    <div class="visitingTime-w">
+                      <h1>Dates of the visit</h1>
+                      <div class="row">
+                        <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+                          <div class="monthRecord-w text-center">
+                            <h1>Hypnosis Sections</h1>
+                            <div class="body">
+                              <ul class="list-unstyled">
+                                <li><img src="../../../assets/image/Path 82.png" /><span style="color:green">{{hypnosisSections.open_time}}</span></li>
+                                <li><img src="../../../assets/image/Path 82.png" /><span style="color:red">{{hypnosisSections.close_time}}</span></li>
+                              </ul>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+                          <div class="achiev text-center">
+                            <h1>Intensive care</h1>
+                            <div class="body">
+                              <ul class="list-unstyled">
+                                <li><img src="../../../assets/image/Path 82.png" /><span style="color:green">{{intensiveCare.open_time}}</span></li>
+                                <li><img src="../../../assets/image/Path 82.png" /><span style="color:red">{{intensiveCare.close_time}}</span></li>
+                              </ul>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+
+            <div class="col-12">
+                <div class="recordsContent-w">
+                  <div class="row">
+                      <div class="col-12 col-sm-12 col-md-5">
+                        <div class="datePicker-w">
+                          <h1>Events Calendar</h1>
+                          <div class="body">
+      
+                          </div>
+                        </div>
+                      </div>
+                      <div class="col-12 col-sm-12 col-md-7 col-lg-7">
+                        <h1>General Statistics and Achievements</h1>
+                        <div class="row">
+                          <div class="col-12 col-sm-12 col-md-6">
+                            <div class="records">
+                              <h1> Stqtistics Month {{recordsOfMonth.statistics_month_en}}</h1>
+                              <div class="body">
+                                <ul class="list-unstyled" style="direction:ltr">
+                                  <li *ngFor="let static of recordsOfMonth['statistics_values']; let i = index"> {{static.name_en}} <span>{{static.value}}</span></li>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                          <div class="col-12 col-sm-12 col-md-6">
+                            <div class="medical">
+                              <h1>Medical achievement</h1>
+                              <div class="body">
+                                <div id="demo2" class="carousel slide" data-ride="carousel">
+                                  <ul class="carousel-indicators">
+                                      <li *ngFor="let achievement of achievements; let i = index" data-target="#demo2" [attr.data-slide-to]="i" [ngClass]="i == 0 ? 'active' : ''"></li>
+                                  </ul>
+                                  <div class="carousel-inner">
+                                      <div class="carousel-item" *ngFor="let achievement of achievements; let i = index" [ngClass]="i == 0 ? 'active' : ''">
+                                          <div class="carousel-caption">
+                                              <p>{{achievement.description_en}}</p>
+                                          </div>   
+                                      </div>
+                                  </div>
+                                </div> 
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                </div>
+              </div>
+
+              <div class="col-12">
+                <div class="maps">
+                  <h1>Contact Us</h1>
+                  <agm-map [latitude]="lat" [longitude]="lng">
+                    <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
+                  </agm-map>
+                </div>
+              </div>
+          
+    
+    
+        </div>
+      </div>
+    </div>
+</ng-template>
+
+

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

@@ -0,0 +1,73 @@
+import { AuthServiceService } from './../../shared/auth-service.service';
+import { ExternalPageService } from './../../shared/external-page.service';
+import { Component, OnInit } from '@angular/core';
+import {MapsAPILoader} from '@agm/core';
+import * as $ from 'jquery';
+
+@Component({
+  selector: 'app-external-page-content',
+  templateUrl: './external-page-content.component.html',
+  styleUrls: ['./external-page-content.component.css']
+})
+export class ExternalPageContentComponent implements OnInit {
+
+  constructor(private externalService: ExternalPageService, 
+    private authSer:AuthServiceService) { }
+
+  reports = [];
+  events = [];
+  services = [];
+  secondAdvertisiment = [];
+  hypnosisSections = [];
+  intensiveCare = []; 
+  recordsOfMonth = [];
+  achievements = [];
+
+  title: string = 'My first AGM project';
+  lat: number;
+  lng: number;
+
+  firstAdvertisiment = [] //[1,2,3,4,5,6,7,8,9].map((i)=> `https://picsum.photos/640/480?image=${i}`);
+  //myCarouselImages =[1,2,3,4,5,6].map((i)=>`https://picsum.photos/640/480?image=${i}`);
+  //firstAdvertisiment = [];
+  mySlideOptions={items: 3, dots: false, nav: true};
+  myCarouselOptions={items: 3, dots: true, nav: true};
+
+  
+
+  ngOnInit() {
+
+    //get content data of external pages
+    this.externalService.getContentData().subscribe(
+      (responce) => {
+        console.log(responce);
+        this.reports = responce['data'].reports;
+        for(let i = 0; i < this.reports.length; i++) {
+          if(this.reports[i].description.length > 100) {
+            this.reports[i].description = this.reports[i].description.substring(0,300) + '.......';
+            this.reports[i].description_en = this.reports[i].description_en.substring(0,300) + '.......';
+          }
+        }
+        this.events = responce['data'].events;
+        this.services = responce['data'].external_services;
+        this.firstAdvertisiment = responce['data'].first_advertising_services_row;
+        this.secondAdvertisiment = responce['data'].second_advertising_services_row;
+        this.hypnosisSections = responce['data'].visiting_times_hs;
+        this.intensiveCare = responce['data'].visiting_times_ic;
+        this.recordsOfMonth = responce['data']['statistics'];
+        this.achievements = responce['data'].external_achievements;
+        this.lat = responce['data']['reach_map'].latitude;
+        this.lng = responce['data']['reach_map'].longitude;
+        console.log('fiiiiiiiiiiiiiiiiiiiii' , this.firstAdvertisiment);
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+
+  }
+
+  
+
+}

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

@@ -0,0 +1,706 @@
+input,button {
+    outline: none;
+}
+.dropdown-menu {
+    top: -6px;
+    right: 10px !important;
+    border-radius: 2px !important;
+    width: 245px;
+    background-color: #ffffffe0;
+    box-shadow: 0px 3px 9px #00000030;
+    border: 1px solid #cec8c8;
+}
+
+.pagesHeader-w .dropdown-menu {
+    top: 30px;
+    right: 0 !important;
+    border-radius: 2px !important;
+    background-color: #ffffffe0;
+    box-shadow: 0px 3px 9px #00000030;
+    border: 1px solid #cec8c8;
+}
+
+.pagesHeader-w .dropdown-item {
+    font-size: 14px !important;
+}
+
+.en_ .dropdown-item{
+	float: left !important;
+}
+.dropdown-item{
+	border: 0px solid #00000008 !important;
+    width: 75px !important;
+    padding: 4px 0px !important;
+    text-align: center !important;
+    font-weight: bold !important;
+    clear: none !important;
+    float: right;
+    margin: 3px 3px;
+}
+/*.dropdown-item span{
+	color: #a08b70 !important;
+    font-size: 12px !important;
+}*/
+.dropdown-item i{
+    color: #04756d !important;
+    font-size: 18px !important;
+}
+.mylistt{
+	display: block;
+    border: 1px solid #bdbbbb;
+    float: right;
+    width: 45px;
+    height: 45px;
+    margin: -12px 0px 0px 6px;
+    background-color: #f1f1f1;
+}
+
+.externalPage-w {
+    width: 100%;
+    height: 45px;
+    
+    background: #D9D9D9
+
+    /* background: url('../../../assets/image/XMLID_19_.png') no-repeat center center;
+    background-size: cover; */
+}
+
+.externalPage-w .notificationList-w {
+    width: 100%;
+    display: inline-block;
+    text-align: right;
+}
+
+.externalPage-w .login  {
+    color: #00a99d;
+    text-align: right;
+    padding: 0 40px;
+    margin: 7px 0;
+}
+
+
+
+.externalPage-w .login a {
+    transition: all 0.5s;
+    cursor: pointer;
+}
+
+
+.externalPage-w .login a:hover {
+    color: #fff;
+    font-weight: bold;
+}
+
+.externalPage-w .notificationList-w li {
+    display: inline-block; 
+    margin: 0 10px;
+}
+
+.externalPage-w .notificationList-w li span {
+    color: #a08b70;
+    font-size: 12px;
+    cursor: pointer;
+    transition: all 0.5s;
+    margin-top: 0px;
+    display: block;
+}
+
+.internalPage-w .externalPage-w .notificationList-w li span:hover i {
+    color: #08726a;
+}
+
+.externalPage-w .notificationList-w .profileData-w .btn-outline-success {
+    border: none;
+}
+
+.externalPage-w .notificationList-w .profileData-w .buttonW:hover {
+    background-color: transparent;
+}
+
+.externalPage-w input[type='text'] {
+    background-color: #fff;
+    border: none;
+    color: #00A99D !important;
+    padding: 0 5px;
+    height: 35px;
+    width: 260px;
+    margin-top: 4px;
+    transition: all 0.5s;
+    border: 1px solid #00A99D !important;
+}
+
+.externalPage-w input[type='text']:focus {
+    border: 2px solid #00a99d;
+}
+
+.externalPage-w .searchBtn {
+    background-color: #fff;
+    border: none;
+    height: 35px;
+    padding: 0 10px;
+    border: 1px solid #00a99d !important;
+    margin: 4px 10px;
+}
+
+.externalPage-w .searchBtn i{
+    color: #00a99d;
+}
+
+.profileData-w img {
+	width: 45px;
+    border: 1px solid #eceaea;
+    margin: -12px 0px 0px 6px;
+    height: 45px;
+    background-color: #fff;
+    display: block;
+    float: right;
+}
+
+.buttonW {
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    color: #02635c;
+    outline: none;
+        text-shadow: 0px 0px 2px #0000002e;
+    font-weight: bold;
+    /*margin-right: -25px;*/
+    font-size: 15px;
+    margin-top: 2px;
+}
+
+.dateW {
+    color: #fff;
+    text-shadow: 0px 0px 2px #000;
+    font-weight: bold; 
+    display:inline-block;
+    font-size: 14px;  
+}
+
+.internalPage-w .externalPage-w .notificationList-w .profileData-w .dropdown-toggle::after {
+    margin: -1px 10px;
+}
+
+.logoHeader-w {
+    width: 100%;
+    height: 160px;
+    display: inline-block;
+    background: url('../../../assets/image/bottomBackground.jpg');
+    background-size: cover;
+}
+
+.logoHeader-w .rightLogo-w,
+.logoHeader-w .leftLogo-w,
+.logoHeader-w .center {
+    width: 100%;
+    display: inline-block;
+    margin-top: 20px;
+}
+
+.logoHeader-w .leftLogo-w {
+    text-align: left;
+}
+
+.logoHeader-w .rightLogo-w {
+    text-align: right;
+}
+
+.logoHeader-w .rightLogo-w img {
+    margin-top: 15px;
+    margin-right:15px
+}
+
+.logoHeader-w .leftLogo-w img {
+    margin-top: 15px;
+    margin-left: 20px;
+}
+
+.logoHeader-w .center h2 {
+    font-size: 30px;
+    color: #bda380;
+    margin-top: 20px;
+}
+
+.logoHeader-w .center p {
+    font-size: 15px;
+    font-weight: 600;
+    font-style: normal;
+    font-stretch: normal;
+    letter-spacing: normal;
+    color: #00a99d;
+}
+
+.logoHeader-w .rightLogo-w img {
+    width: 210px;
+}
+
+.pagesHeader-w {
+    width: 100%;
+    background: rgba(94, 204, 196, 0.5) !important;
+    margin-top: -6px;
+    position: relative;
+    height: 50px;
+}
+
+.pagesHeader-w .dropdown-toggle:empty::after {
+    position: absolute;
+    top: 13px;
+}
+.pagesHeader-w .navbar {
+    /* overflow: hidden; */
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: .5rem 1rem;
+    height: 50px;
+}
+
+.pagesHeader-w navbar a {
+    float: left;
+    font-size: 16px;
+    color: white;
+    text-align: center;
+    text-decoration: none;
+}
+
+.pagesHeader-w .dropdown {
+    float: left;
+    /* overflow: hidden; */
+}
+
+.pagesHeader-w .dropdown .dropbtn,
+.pagesHeader-w .dropdown .dropbtn a {
+    font-size: 20px;
+    border: none;
+    outline: none;
+    color: #00A99D;
+    padding: 14px 5px;
+    background-color: inherit;
+    font: inherit;
+    margin: 0;
+    font-weight: 600;
+}
+
+.pagesHeader-w .dropdown .dropbtn {
+    margin: 0 10px;
+}
+
+.pagesHeader-w .navbar a:hover, .dropdown:hover .dropbtn {
+}
+
+.pagesHeader-w .dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #bea380;
+    border-radius: 10px;
+    width: 100%;
+    height: 120px;
+    left: 0;
+    top: 55px;
+    padding: 10px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+}
+
+
+
+.pagesHeader-w .dropdown-content ul li a {
+    color: #fff;
+}
+
+.pagesHeader-w .dropdown-content .header {
+    padding: 16px;
+    color: white;
+}
+
+.pagesHeader-w .dropdown:hover .dropdown-content {
+    background: yello;
+    display: block;
+}
+
+/* Create three equal columns that floats next to each other */
+.pagesHeader-w .column {
+    float: left;
+    width: 50%;
+    padding: 10px;
+    background-color: #ccc;
+    height: 250px;
+}
+
+.pagesHeader-w .column a {
+    float: none;
+    color: black;
+    padding: 16px;
+    text-decoration: none;
+    display: block;
+    text-align: left;
+}
+
+.pagesHeader-w .column a:hover {
+    background-color: #ddd;
+}
+
+/* Clear floats after the columns */
+.pagesHeader-w .row:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.pagesHeader-w .iconMenu {
+    width: 35px;
+    float: right;
+    margin: 5px 5px;
+}
+
+.pagesHeader-w .parentName-w {
+    margin: 9px 5px;
+    display: inline-block;
+    transition: all 0.5s;
+}
+
+.pagesHeader-w .parentName-w:hover {
+    color: #09d4c5;
+}
+
+.navbar {
+    width: 100%;
+    padding: 0 !important;
+}
+
+.hyperLink {
+    color: #fff;
+    text-decoration: none;
+}
+
+.ar,.en {
+    /* margin: 0 10px;
+    padding: 5px;
+    color: #03887f;
+    font-weight: bold;
+    width: 30px;
+    height: 30px;
+    border-radius: 5px;
+    background-color: #FAFAFA;
+    cursor: pointer;
+    transition: all 0.5s; */
+
+    /* margin: 2px 10px;
+    padding: 5px;
+    padding: 2px 5px;
+    color: #03887f;
+    font-weight: bold;
+    width: 30px;
+    border: 1px solid #bda380;
+    height: 30px;
+    background-color: #FAFAFA;
+    cursor: pointer;
+    transition: all 0.5s;
+    display: inline-block;  */
+
+    margin: 4px 10px;
+    padding: 5px;
+    padding: 0px 3px;
+    color: #03887f;
+    font-weight: bold;
+    width: 25px;
+    border: 1px solid #bda380;
+    height: 25px;
+    background-color: #FAFAFA;
+    cursor: pointer;
+    transition: all 0.5s;
+    display: inline-block;
+    margin-left: 20px;
+}
+
+.ar:hover{
+    background-color: #03b0b3 !important;
+    color: #fff !important;
+}
+
+.en:hover {
+    background-color: #03b0b3 !important;
+    color: #fff !important;
+}
+
+/* english estyle  */
+
+.menuEnglish{
+    text-align: left;
+}
+
+.achievementsLang-w {
+    text-align: left;
+    direction: ltr;
+}
+
+.achievementsLang-w li {
+    text-align: left !important;
+}
+
+
+.activeLanguage {
+    background-color: #03b0b3 !important;
+    color: #fff !important;
+}
+
+.activeLanguageIcon {
+    width: 35px;
+    float: left !important;
+    margin: 0 5px;
+}
+
+.mobileMenu-w {
+    float: right !important;
+    background-color: transparent !important;
+    border: none !important;
+    border-color: transparent !important;
+  
+}
+
+.activeHeaderMenu{
+    float: left;
+}
+
+.activeHomeMenu {
+    float: left !important;
+    margin: 0 5px;
+    background-color: transparent;
+    border: none;
+    color: #00a99d;
+    margin: 0 19px;
+    font-size: 18px;
+    font-weight: bold;
+}
+
+.homeBtn:hover {
+    background-color: #d8cdbd !important;
+}
+
+.activeexternalPage-w {
+    background-color: #d8cdbd !important;
+  }
+
+  .dateClass {
+      text-align: left;
+  }
+
+  .menuHeader-w {
+      margin: 0 auto;
+  }
+
+  .menuHeaderEn-w {
+      margin: 0 auto;
+      direction: ltr;
+  }
+
+  .menuHeaderEn-w li a {
+      float: left;
+      margin: 0 15px;
+  }
+
+  .menuHeader-w li a {
+      font-size: 18px;
+  }
+
+  .menuHeader-w li a img {
+      width: 30px;
+  }
+
+  .buttonMobileHeader-w {
+      margin: 15px;
+  }
+
+@media(max-width: 767px) {
+    .tabs .lastTab-w .menuTab-w ul li {
+        border-left: 0;
+    }
+
+    .internalPage-w .externalPage-w .notificationList-w li {
+        margin: 0;
+    }
+    .dateW {
+        margin: 20px 0 !important;
+        display: inline-block !important;
+        font-size: 10px !important;
+    }
+
+    .externalPage-w .notificationList-w .profileData-w .buttonW {
+        font-size: 8px; 
+    }
+
+  
+    
+    .externalPage-w .searchBtn {
+        background-color: #fff;
+        border: none;
+        height: 30px;
+        margin-left: 40px;
+    }
+
+    .externalPage-w input[type='text'] {
+        width: 150px;
+    }
+
+    .externalPage-w .login {
+        margin-top: 8px;
+        color: #00a99d;
+        cursor: pointer;
+        text-align: right;
+        padding: 0 9px;
+        font-size: 13px;
+    }
+
+    .buttonW {
+        margin-right: -50px;
+    }
+
+    .logoHeader-w .center h2 {
+        font-size: 15px;
+        margin: 0;
+    }
+    
+    .logoHeader-w .center p {
+        font-size: 13px;
+    }
+
+    .logoHeader-w .rightLogo-w{
+        text-align: center;
+        margin-top: 10px;
+    }
+
+    .logoHeader-w .rightLogo-w img {
+        width: 200px;
+        margin: 0;
+        margin-right: -15px;
+    }
+
+    .pagesHeader-w .navbar {
+        display: initial;
+        text-align: initial;
+        justify-content: initial;
+    }
+
+    .dropDownMobile-w{
+        left: -140px !important;
+        text-align: right;
+    }
+    .pagesHeader-w .dropdown {
+        float: right;
+    }
+
+    .btn-outline-primary {
+        border-color: transparent;
+        font-size: 30px;
+    }
+
+    .dropdown-toggle::after {
+        display: none;
+    }
+
+    .en,.ar{
+        margin-left: 0;
+    }
+
+    .pagesHeader-w .dropdown-menu {
+        background-color: transparent !important;
+        box-shadow: none !important;
+        border: none !important;   
+    }
+
+    
+
+    .menuHeaderEn-w li a {
+        font-size: 18px;
+    }
+
+    .menuHeaderEn-w li {
+        border: 1px solid #fff;
+    }
+
+    .menuHeader-w {
+        direction: ltr;
+    }
+
+    .menuHeader-w li {
+        border: 1px solid #fff;
+    }
+
+    .menuHeader-w li a {
+        font-size: 18px;
+        float: right;
+        margin: 0 10px;
+    }
+
+    
+
+    .collapse.show {
+        background-color: #ace3df;
+    }
+}
+
+@media (min-width: 767px) and (max-width: 991px) {
+    
+    .pagesHeader-w .navbar {
+        display: initial;
+        text-align: initial;
+        justify-content: initial;
+    }
+
+    .mobileMenu-w {
+        float: right !important;
+    }
+    .dropDownMobile-w{
+        left: -80px !important;
+        text-align: right;
+    }
+    .pagesHeader-w .dropdown {
+        float: right;
+        font-size: 12px;
+    }
+    .btn-outline-primary {
+        border-color: transparent;
+        font-size: 30px;
+    }
+    .dropdown-toggle::after {
+        display: none;
+    }
+    .buttonW {
+        margin-right: 0;
+    }
+
+   
+}
+
+@media(min-width: 992px) and (max-width: 1199px) {
+
+}
+
+@media(min-width: 1200px) {
+    .container{
+        max-width: 1200px !important;
+    }
+}
+
+
+
+
+
+
+::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+    color: #00a99d !important;
+  }
+  ::-moz-placeholder { /* Firefox 19+ */
+    color: #00a99d !important;
+  }
+  :-ms-input-placeholder { /* IE 10+ */
+    color: #00a99d !important;
+  }
+  :-moz-placeholder { /* Firefox 18- */
+    color: #00a99d !important;
+  }
+
+  .btn:focus {
+      box-shadow: none;
+  }

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

@@ -0,0 +1,232 @@
+<ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="englishTemplate">
+    <div class="externalPage-w"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
+        <div class="container">
+            <div class="row">
+                <div class="col-5 col-sm-5 col-md-4 col-lg-4"  style="margin:0;padding:0">
+                        <div class="notificationDiv-w">
+                            <ul class="list-unstyled notificationList-w" *ngIf="!authSer.isAuthenticated()">
+                                <li class="profileData-w">
+                                    <div class="dropdown">
+                                        <button class="btn dropdown-toggle buttonW" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                            <img src="{{authSer.dataLoginUser['photo'] ? authSer.pathImg + authSer.dataLoginUser['photo'] : authSer.imgSrc}}" title="imageProfile" alt="" />
+                                            {{ authSer.dataLoginUser['name'] }} 
+                                        </button>
+                                        <div class="dropdown-menu" style="text-align:right" aria-labelledby="dropdownMenuButton"> 
+                                            <button class="dropdown-item" style="cursor: pointer;" >
+                                            <i class="fas fa-bell"></i>
+                                            <span>الاشعارات</span>
+                                            </button>
+                                            <button class="dropdown-item" style="cursor: pointer;" (click)="onGetProfile()">
+                                                <i class="fas fa-user-alt"></i>
+                                                <span>ملفي</span>
+                                            </button>
+                                            <button class="dropdown-item" style="cursor: pointer;" >
+                                            <i class="fas fa-sticky-note"></i>
+                                            <span>ملاحظاتي</span>
+                                            </button>
+                                            <button class="dropdown-item" style="cursor: pointer;" >
+                                            <i class="fas fa-tasks"></i>
+                                            <span>مهامي</span>
+                                            </button>
+                                            <button class="dropdown-item" style="cursor: pointer;" (click)="onDashBoard()">
+                                                <i class="fas fa-solar-panel"></i>
+                                                <span>لوحة التحكم</span>
+                                            </button>
+                                            <button class="dropdown-item" style="cursor: pointer;color: #da0b0b !important;background-color: #f3f3f3;border-radius: 4px;" (click)="onLogout()">
+                                                <i class="fas fa-sign-out-alt" style="color: #da0b0b !important;"></i>
+                                                <span>خروج</span>
+                                            </button>
+                                        </div>
+                                    </div>   
+                                </li>
+                            </ul>
+                        </div>
+                    <p *ngIf="authSer.isAuthenticated()" class="login"><a (click)="onLogin()">تسجيل دخول </a></p>
+                </div>
+                <div class="col-5 col-sm-5 col-md-4 col-lg-4 backgroundXS">
+                    <div class="form-group" style="display:flex;text-align:center; justify-content:center">
+                        <input type="text" placeholder="أبحث"/><button class="searchBtn" style="cursor: pointer;"><i class="fas fa-search"></i></button>
+                    </div>
+                </div>
+                <div class="col-2 col-sm-2 col-md-4 col-lg-4 d-none d-sm-none d-md-block d-lg-block dateClass">
+                    <p class="dateW"> {{currentDate}}</p>
+                    <span class="ar" (click)="authSer.onLanguageContent('ar')" [ngClass]="{'activeLanguage': authSer.arabicLanguage}" *ngIf="authSer.showArabicIcon">Aa</span>
+                    <span class="en" (click)="authSer.onLanguageContent('en')" [ngClass]="{'activeLanguage': authSer.englishLanguage}" *ngIf="authSer.showEnglishIcon">En</span>
+                </div>
+                <div class="col-2 col-sm-2 col-md-4 col-lg-4 d-md-none d-lg-none">
+                    <span class="ar" (click)="authSer.onLanguageContent('ar')" [ngClass]="{'activeLanguage':authSer.arabicLanguage}" *ngIf="authSer.showArabicIcon">Aa</span>
+                    <span class="en" (click)="authSer.onLanguageContent('en')" [ngClass]="{'activeLanguage': authSer.englishLanguage}" *ngIf="authSer.showEnglishIcon">En</span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="logoHeader-w">
+        <div class="container">
+            <div class="row">
+                <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                    <div class="rightLogo-w">
+                        <img src="../../assets/image/logo1.png" alt="logo" title="logo" />
+                    </div>
+                </div>
+                <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                <div class="center text-center">
+                    <h2>المنصه الخارجيه</h2>
+                    <p>مجمع الملك فيصل الطبي بصحه الطائف</p>
+                </div>
+                </div>
+                <div class="col-12 col-sm-6 col-md-4 col-lg-4 hidden-xs">
+                <div class="leftLogo-w">
+                    <img src="../../assets/image/logo2.png" alt="logo" title="alt" />
+                </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="pagesHeader-w">
+        <div class="container">
+            <div class="row">
+                <div class="navbar" style="padding:0">
+                    <nav class="navbar navbar-expand-lg navbar-light bg-light">
+                        
+                        <!-- <a class="navbar-brand" href="#">Navbar</a> -->
+                        <button class="navbar-toggler buttonMobileHeader-w" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                            <span class="navbar-toggler-icon"></span>
+                        </button>
+                        
+                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                            <ul class="navbar-nav mr-auto menuHeader-w">
+                                <li class="nav-item" *ngFor="let menu of headerMenus" style="position: relative;">
+                                    <a class="nav-link" [ngClass]="{ 'dropdown-toggle' : menu['childs'].length > 0 }" href="{{menu.link}}" id="navbarDropdown" role="button" [attr.data-toggle]=" menu['childs'].length > 0 ? 'dropdown' : '' " aria-haspopup="true" aria-expanded="false">
+                                       <img src="{{authSer.pathImg + menu.photo}}" /> {{menu.name}}
+                                    </a>
+                                    <div class="dropdown-menu" aria-labelledby="navbarDropdown" *ngIf="menu['childs'].length > 0">
+                                        <a class="dropdown-item" href="{{child.link}}" *ngFor="let child of menu['childs']">{{child.name}}</a>
+                                    </div>
+                                </li>
+                            </ul>
+                        </div>
+                    </nav>
+                </div>
+            </div>
+        </div>
+    </div>
+</ng-template>
+
+
+
+<ng-template #englishTemplate>
+    <div class="externalPage-w">
+        <div class="container">
+            <div class="row">
+                <div class="col-5 col-sm-5 col-md-4 col-lg-4"  style="margin:0;padding:0">
+                    <div class="notificationDiv-w">
+                        <ul class="list-unstyled notificationList-w" *ngIf="!authSer.isAuthenticated()">
+                            <li class="profileData-w">
+                                <div class="dropdown">
+                                    <button class="btn dropdown-toggle buttonW" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                        <img src="{{authSer.dataLoginUser['photo'] ? authSer.pathImg + authSer.dataLoginUser['photo'] : authSer.imgSrc}}" title="imageProfile" alt="" />
+                                        {{ authSer.dataLoginUser['name'] }}
+                                    </button>
+                                    <div class="dropdown-menu" style="text-align:right" aria-labelledby="dropdownMenuButton"> 
+                                        <button class="dropdown-item" style="cursor: pointer;" >
+                                        <i class="fas fa-bell"></i>
+                                        <span>Notification</span>
+                                        </button>
+                                        <button class="dropdown-item" style="cursor: pointer;" (click)="onGetProfile()">
+                                            <i class="fas fa-user-alt"></i>
+                                            <span>Profile</span>
+                                        </button>
+                                        <button class="dropdown-item" style="cursor: pointer;" >
+                                        <i class="fas fa-sticky-note"></i>
+                                        <span>Notes</span>
+                                        </button>
+                                        <button class="dropdown-item" style="cursor: pointer;" >
+                                        <i class="fas fa-tasks"></i>
+                                        <span>Tasks</span>
+                                        </button>
+                                        <button class="dropdown-item" style="cursor: pointer;" (click)="onDashBoard()">
+                                            <i class="fas fa-solar-panel"></i>
+                                            <span>DashBoard</span>
+                                        </button>
+                                        <button class="dropdown-item" style="cursor: pointer;color: #da0b0b !important;background-color: #f3f3f3;border-radius: 4px;" (click)="onLogout()">
+                                            <i class="fas fa-sign-out-alt" style="color: #da0b0b !important;"></i>
+                                            <span>Log Out</span>
+                                        </button>
+                                    </div>
+                                </div>   
+                            </li>
+                        </ul>
+                    </div>
+                    <p *ngIf="authSer.isAuthenticated()" class="login"><a (click)="onLogin()">LOG IN</a></p>
+                </div>
+                <div class="col-5 col-sm-5 col-md-4 col-lg-4 backgroundXS">
+                    <div class="form-group" style="display:flex;text-align:center; justify-content:center">
+                        <input type="text" placeholder="search" style=" text-align:left"/><button class="searchBtn" style="cursor: pointer;"><i class="fas fa-search"></i></button>
+                    </div>
+                </div>
+                <div class="col-2 col-sm-2 col-md-4 col-lg-4  d-none d-sm-none d-md-block d-lg-block dateClass">
+                    <p class="dateW"> {{currentEnglishDate | date:'fullDate'}} </p>
+                    <span class="ar" (click)="authSer.onLanguageContent('ar')" [ngClass]="{'activeLanguage':authSer. arabicLanguage}" *ngIf="authSer.showArabicIcon">عربي</span>
+                    <span class="en" (click)="authSer.onLanguageContent('en')" [ngClass]="{'activeLanguage': authSer.englishLanguage}" *ngIf="authSer.showEnglishIcon">En</span>
+                </div>
+                <div class="col-2 col-sm-2 col-md-4 col-lg-4 d-md-none d-lg-none">
+                    <span class="ar" (click)="authSer.onLanguageContent('ar')" [ngClass]="{'activeLanguage':authSer. arabicLanguage}" *ngIf="authSer.showArabicIcon">عربي</span>
+                    <span class="en" (click)="authSer.onLanguageContent('en')" [ngClass]="{'activeLanguage': authSer.englishLanguage}" *ngIf="authSer.showEnglishIcon">En</span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="logoHeader-w">
+        <div class="container">
+            <div class="row">
+                <div class="col-12 col-sm-12 col-md-4 col-lg-4">
+                    <div class="rightLogo-w">
+                        <img src="../../assets/image/logo1.png" alt="logo" title="logo" style="margin-right:-15px"/>
+                    </div>
+                </div>
+                <div class="col-12 col-sm-6 col-md-4 col-lg-4">
+                <div class="center text-center">
+                    <h2> External Page</h2>
+                    <p>King Faisal Medical Complex in Taif</p>
+                </div>
+                </div>
+                <div class="col-6 col-sm-6 col-md-4 col-lg-4 hidden-xs">
+                <div class="leftLogo-w">
+                    <img src="../../assets/image/logo2.png" alt="logo" title="alt" />
+                </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+     <div class="pagesHeader-w">
+        <div class="container">
+            <div class="row">
+                <div class="navbar">
+                    <nav class="navbar navbar-expand-lg navbar-light bg-light">
+                        <!-- <a class="navbar-brand" href="#">Navbar</a> -->
+                        <button class="navbar-toggler buttonMobileHeader-w" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                            <span class="navbar-toggler-icon"></span>
+                        </button>
+                    
+                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                            <ul class="navbar-nav mr-auto menuHeaderEn-w">
+                                <li class="nav-item" *ngFor="let menu of headerMenus" style="position: relative;">
+                                    <a class="nav-link" [ngClass]="{ 'dropdown-toggle' : menu['childs'].length > 0 }" href="{{menu.link}}" id="navbarDropdown" role="button" [attr.data-toggle]=" menu['childs'].length > 0 ? 'dropdown' : '' " aria-haspopup="true" aria-expanded="false">
+                                        {{menu.name_en}}
+                                    </a>
+                                    <div class="dropdown-menu" aria-labelledby="navbarDropdown" *ngIf="menu['childs'].length > 0">
+                                        <a class="dropdown-item" href="{{child.link}}" *ngFor="let child of menu['childs']">{{child.name_en}}</a>
+                                    </div>
+                                </li>
+                            </ul>
+                        </div>
+                    </nav>
+                </div>
+            </div>
+        </div>
+    </div>
+</ng-template>

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

@@ -0,0 +1,51 @@
+import { ExternalPageService } from './../../shared/external-page.service';
+import { AuthServiceService } from './../../shared/auth-service.service';
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-external-page-header',
+  templateUrl: './external-page-header.component.html',
+  styleUrls: ['./external-page-header.component.css']
+})
+export class ExternalPageHeaderComponent implements OnInit {
+
+  constructor(private authSer: AuthServiceService, 
+    private externalService: ExternalPageService,
+    private router: Router) { }
+    
+    currentDate: any = Date.now();//ararbic date 
+    currentEnglishDate: any = Date.now(); //english date
+    headerMenus = []; //header data 
+
+  ngOnInit() {
+
+    this.authSer.arabicTemplate = true;
+    this.authSer.showDashboardHeader = false;
+    this.authSer.setLocalLang(); //set languages icons
+    this.currentDate = this.authSer.writeHijri(new Date(this.currentDate), 'ar', 'header');
+
+    //get header data 
+    this.externalService.getHeader().subscribe(
+      (responce) => {
+        console.log(responce);
+        this.headerMenus = responce['parents'];
+        console.log('menu data' , this.headerMenus);
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+
+
+
+
+  }
+
+
+  onLogin() {
+    this.router.navigate(['/login']);
+  }
+
+}

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

@@ -1,18 +1,41 @@
+import { ExternalEventsComponent } from './external-events/external-events.component';
+import { ExternalPageService } from './../shared/external-page.service';
 import { ExternalPageRoutingModule } from './external-routing-module';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
+import { ExternalPageHeaderComponent } from './external-page-header/external-page-header.component';
+import { ExternalPageContentComponent } from './external-page-content/external-page-content.component';
+import { ExternalPageComponent } from './external-page/external-page.component';
+import { SlickCarouselModule } from 'ngx-slick-carousel';
+import { AgmCoreModule } from '@agm/core';
+import { OwlModule } from 'ngx-owl-carousel';
+import { CalendarModule, DateAdapter } from 'angular-calendar';
+import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
+
 
 @NgModule({
-    declarations: [
-        
+    declarations: [ExternalPageHeaderComponent,
+        ExternalPageContentComponent,
+        ExternalPageComponent,
+        ExternalEventsComponent
     ],
     imports: [
         CommonModule,
         FormsModule,
+        OwlModule,
+        SlickCarouselModule,
+        AgmCoreModule.forRoot({
+            apiKey: 'AIzaSyAxlgymaua-8BszEryfQIOr9PLKrtEqU2I'
+          }),
         ExternalPageRoutingModule,
+        CalendarModule.forRoot({
+            provide: DateAdapter,
+            useFactory: adapterFactory
+          })
     ],
     providers: [
+        ExternalPageService,
     ],
 })
 

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

@@ -0,0 +1,7 @@
+<app-external-page-header></app-external-page-header>
+
+<div class="externalPage-w" [style.min-height.px]="myInnerHeight">
+  <div class="routingContent-w">
+      <router-outlet></router-outlet>
+  </div>
+</div>

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

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-external-page',
+  templateUrl: './external-page.component.html',
+  styleUrls: ['./external-page.component.css']
+})
+export class ExternalPageComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

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

@@ -1,13 +1,20 @@
+import { ExternalPageContentComponent } from './external-page-content/external-page-content.component';
+import { ExternalPageComponent } from './external-page/external-page.component';
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-const externalPageRoutes: Routes = [];
+
+
+const externalPageRoutes: Routes = [
+    {path: '' , component: ExternalPageComponent, children:[
+        {path: 'home', component: ExternalPageContentComponent},
+    ]},
+];
 
 @NgModule({
 imports: [
     RouterModule.forChild(externalPageRoutes),
 ],
-//exports: [internalPageRoutes]
 exports: [
     RouterModule
   ]

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

@@ -33,6 +33,18 @@
     right: 0px;
 }
 
+.btn-primary:not(:disabled):not(.disabled).active {
+    background-color: #12aea2;
+    border: 1px solid #12aea2;
+    border-radius: 0;
+}
+
+.buttonPrimary {
+    background-color: #12aea2;
+    border: 1px solid #12aea2;
+    border-radius: 0;
+}
+
 /* .eventContentChange-w {
     background-color: #888;
 } */

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

@@ -28,31 +28,31 @@
     <div class="col-md-4">
       <div class="btn-group">
         <div
-          class="btn btn-primary"
+          class="btn btn-primary buttonPrimary"
           mwlCalendarPreviousView
           [view]="view"
           [(viewDate)]="viewDate"
           (viewDateChange)="activeDayIsOpen = false">
-          Previous
+          السابق
         </div>
         <div
           class="btn btn-outline-secondary"
           mwlCalendarToday
           [(viewDate)]="viewDate">
-          Today
+          اليوم
         </div>
         <div
-          class="btn btn-primary"
+          class="btn btn-primary buttonPrimary"
           mwlCalendarNextView
           [view]="view"
           [(viewDate)]="viewDate"
           (viewDateChange)="activeDayIsOpen = false">
-          Next
+          التالي
         </div>
       </div>
     </div>
     <div class="col-md-4">
-      <h3>{{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}</h3>
+      <h3>{{ viewDate | calendarDate:(view + 'ViewTitle') }}</h3>
     </div>
     <div class="col-md-4">
       <div class="btn-group">
@@ -60,19 +60,19 @@
           class="btn btn-primary"
           (click)="view = CalendarView.Month"
           [class.active]="view === CalendarView.Month">
-          Month
+          الشهر
         </div>
         <div
-          class="btn btn-primary"
+          class="btn btn-primary buttonPrimary"
           (click)="view = CalendarView.Week"
           [class.active]="view === CalendarView.Week">
-          Week
+          الأسبوع
         </div>
         <div
-          class="btn btn-primary"
+          class="btn btn-primary buttonPrimary"
           (click)="view = CalendarView.Day"
           [class.active]="view === CalendarView.Day">
-          Day
+          اليوم
         </div>
       </div>
     </div>

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

@@ -1,5 +1,9 @@
 import { NgxSpinnerService } from 'ngx-spinner';
 import { InternalPageService } from './../../shared/internal-page.service';
+//import localeAr from '@angular/common/locales/ar-SA';
+import { registerLocaleData } from '@angular/common';
+
+//registerLocaleData(localeAr, 'ar');
 
 import { Component, OnInit,
           ChangeDetectionStrategy,
@@ -42,10 +46,10 @@ const colors: any = {
 
 @Component({
   selector: 'app-events',
-  templateUrl: './events.component.html',
-  styleUrls: ['./events.component.css']
+  templateUrl: './events-date.component.html',
+  styleUrls: ['./events-date.component.css']
 })
-export class EventsComponent implements OnInit {
+export class EventsDateComponent implements OnInit {
   events: CalendarEvent[] = [] ;
   refresh: Subject<any> = new Subject();
   dataLecture: any;

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

@@ -33,9 +33,7 @@ export class InternalPageContentComponent implements OnInit {
     private config: NgbCarouselConfig,
     private http: HttpClient,
     private spinner: NgxSpinnerService) {
-
-
-
+      this.spinner.show();
      }
 
 
@@ -100,22 +98,7 @@ export class InternalPageContentComponent implements OnInit {
       this.flag = false;
     }
 
-
- 
-
-    
-
-
   ngOnInit() {
-
-    
-    this.spinner.show();
-
-   
-
-    // this.myCarousel.activeId = '2';
-
-    //this.spinner.show();
    //console.log(this.checkTokenExpire);
        //get profile data
     this.userservice.getUserDataProfile();
@@ -165,10 +148,6 @@ export class InternalPageContentComponent implements OnInit {
           description: responce['data']['main_ad'].description,
           description_en: responce['data']['main_ad'].description_en,
         }
-       
-        
-       
-
         this.spinner.hide();
       },
       (error) => {

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

@@ -11,7 +11,7 @@
                             <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
                                 <button class="buttonW" ngbDropdownToggle>
                                     <img src="{{authSer.dataLoginUser['photo'] ? authSer.pathImg + authSer.dataLoginUser['photo'] : authSer.imgSrc}}" title="imageProfile" alt="" />
-                                        {{authSer.dataLoginUser['name']}} 
+                                        {{ authSer.dataLoginUser['name'] }} 
                                 </button>
                   
                             <div class="dropdown-menu" style="text-align:right" ngbDropdownMenu>

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

@@ -1,3 +1,4 @@
+import { EventsDateComponent } from './events/events-date.component';
 import { NewsPagesComponent } from './news-pages/news-pages.component';
 import { NewsPageComponent } from './news-page/news-page.component';
 import { InternalPageService } from './../shared/internal-page.service';
@@ -6,12 +7,6 @@ import { InternalPageComponent } from './internal-page/internal-page.component';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
-import { InternalPageHeaderComponent } from './internal-page-header/internal-page-header.component';
-import { InternalPageContentComponent } from './internal-page-content/internal-page-content.component';
-import { HospitalContentComponent } from './hospital-content/hospital-content.component';
-import { CollapsibleModule } from 'angular2-collapsible'; // <-- import the module
-import { CircularsPageComponent } from './circulars-page/circulars-page.component';
-import { EventsComponent } from '../Internal-Page/events/events.component'; // <-- import the module
 import { FlatpickrModule } from 'angularx-flatpickr';
 import { CalendarModule, DateAdapter } from 'angular-calendar';
 import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
@@ -21,6 +16,13 @@ import { JwSocialButtonsModule } from 'jw-angular-social-buttons';
 import { CeiboShare } from 'ng2-social-share';
 import { CarouselModule } from 'ngx-owl-carousel-o';
 
+import { InternalPageHeaderComponent } from './internal-page-header/internal-page-header.component';
+import { InternalPageContentComponent } from './internal-page-content/internal-page-content.component';
+import { HospitalContentComponent } from './hospital-content/hospital-content.component';
+import { CollapsibleModule } from 'angular2-collapsible'; // <-- import the module
+import { CircularsPageComponent } from './circulars-page/circulars-page.component';
+
+
 
 @NgModule({
     declarations: [
@@ -30,7 +32,7 @@ import { CarouselModule } from 'ngx-owl-carousel-o';
         HospitalContentComponent,
         NewsPageComponent,
         CircularsPageComponent,
-        EventsComponent,
+        EventsDateComponent,
         NewsPagesComponent,
         CeiboShare,
     ],

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

@@ -1,3 +1,4 @@
+import { EventsDateComponent } from './events/events-date.component';
 import { NewsPagesComponent } from './news-pages/news-pages.component';
 import { CircularsPageComponent } from './circulars-page/circulars-page.component';
 import { NewsPageComponent } from './news-page/news-page.component';
@@ -9,15 +10,13 @@ import { InternalPageComponent } from './internal-page/internal-page.component';
 
 import { HospitalContentComponent } from './hospital-content/hospital-content.component';
 import { LoginComponent } from './../login/login.component';
-import { EventsComponent } from './../Internal-Page/events/events.component';
 
 
 const internalPageRoutes: Routes = [
-        {path: '' , redirectTo: '/InternalPage/home', pathMatch: 'full'},
-        {path: 'InternalPage' , component: InternalPageComponent, children:[
+        {path: '' , component: InternalPageComponent, children:[
         {path: 'home', component: InternalPageContentComponent},
         {path:'circulars', component: CircularsPageComponent},
-        {path: 'events', component: EventsComponent},
+        {path: 'events', component: EventsDateComponent},
         {path: 'newpages', component: NewsPagesComponent},
         {path: 'news/:reportId', component: NewsPageComponent},
         {path: ':typePage', component: HospitalContentComponent},

src/app/app-routing.module.ts

@@ -1,116 +1,22 @@
 import { CanDeactivateGuard } from './shared/can-deactivate-guards.service';
-import { AddJoinUsComponent } from './dashboard/add-join-us/add-join-us.component';
-import { AddMenuComponent } from './dashboard/main-menu/add-menu/add-menu.component';
-import { MainListComponent } from './dashboard/main-menu/main-list/main-list.component';
-import { AddLectureComponent } from './dashboard/lectures/add-lecture/add-lecture.component';
-import { LecturesListComponent } from './dashboard/lectures/lectures-list/lectures-list.component';
-import { AddInternalServicesComponent } from './dashboard/internal-services/add-internal-services/add-internal-services.component';
-import { AddFooterComponent } from './dashboard/footer/add-footer/add-footer.component';
-import { FooterListComponent } from './dashboard/footer/footer-list/footer-list.component';
-import { AddNewsComponent } from './dashboard/news/add-news/add-news.component';
-import { AddTabComponent } from './dashboard/tabs/add-tab/add-tab.component';
-import { TabListComponent } from './dashboard/tabs/tab-list/tab-list.component';
-import { AddAchievementComponent } from './dashboard/achievements/add-achievement/add-achievement.component';
-import { AchievementComponent } from './dashboard/achievements/achievement-list/achievement.component';
-import { AddExternalComponent } from './dashboard/external-services/add-external/add-external.component';
-import { ExternalListComponent } from './dashboard/external-services/external-list/external-list.component';
-import { AddHospitalComponent } from './dashboard/hospitals/add-hospital/add-hospital.component';
-import { ReportListComponent } from './dashboard/report-list/report-list.component';
-import { RoleReport2Component } from './dashboard/roles/role-report2/role-report2.component';
-import { AddSectionComponent } from './dashboard/sections/add-section/add-section.component';
-import { SectionListComponent } from './dashboard/sections/section-list/section-list.component';
-import { AddDepartmentComponent } from './dashboard/department/add-department/add-department.component';
-import { DepartmentListComponent } from './dashboard/department/department-list/department-list.component';
-import { AddRolesComponent } from './dashboard/roles/add-roles/add-roles.component';
-import { FormUserComponent } from './dashboard/users/form-user/form-user.component';
-import { UsersComponent } from './dashboard/users/users.component';
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { LoginComponent } from './login/login.component';
 import { RegesterComponent } from './regester/regester.component';
 import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
 import { AuthGuardService as AuthGuard } from './shared/auth-guard.service';
-import { ServiceItemComponent } from './dashboard/service-item/service-item.component';
-import { RolesListComponent } from './dashboard/roles/roles-list/roles-list.component';
-import { DashboardComponent } from './dashboard/dashboard/dashboard.component';
-import { UserPermissionComponent } from './dashboard/users/user-permission/user-permission.component';
-import { UserReportComponent } from './dashboard/users/user-report/user-report.component';
-import { RoleReportComponent } from './dashboard/roles/role-report/role-report.component';
-import { ReportsPageComponent } from './dashboard/reports-page/reports-page.component';
-import { HospitalListComponent } from './dashboard/hospitals/hospital-list/hospital-list.component';
-import { EventsComponent } from './dashboard/events/events.component';
-import { AddEventComponent } from './dashboard/events/add-event/add-event.component';
-import { NewsListComponent } from './dashboard/news/news-list/news-list.component';
-import { InternalServicesComponent } from './dashboard/internal-services/internal-services.component';
-import { InternalPageComponent } from './Internal-Page/internal-page/internal-page.component';
-import { AdvertisimentComponent } from './dashboard/advertisiment/advertisiment.component';
-import { AddAdverComponent } from './dashboard/advertisiment/add-advertisiment/add-adver/add-adver.component';
+import { ServicesComponent } from './servicesItems/services.component';
+
 
 const routes: Routes = [
-  {path: '', redirectTo: '/InternalPage/home', pathMatch: 'full'},
+  {path: '', redirectTo: '/login', pathMatch: 'full'},
   {path: 'login', component: LoginComponent},
   {path: 'signup', component: RegesterComponent},
-  {path: 'InternalPage', component: InternalPageComponent, canActivate: [AuthGuard]},
+  {path: 'services/:id', component: ServicesComponent, canActivate: [AuthGuard]},
+  {path: 'service/:userID/:serviceID', loadChildren: './dashboard/dashboard.module#DashBoardModule', canLoad: [AuthGuard]},
+  {path: 'InternalPage' , loadChildren: './Internal-Page/internal-page.module#InternalPageModule'},
+  {path: 'ExternalPage', loadChildren: './External-Page/external-page.module#ExternalPageModule'},
   {path: 'profile/:idProfile', component: RegesterComponent, canActivate: [AuthGuard]},
-  {path: 'dashboard/:id', component: DashboardComponent, canActivate: [AuthGuard]},
-  {path: 'service/:userID/:serviceID', component: ServiceItemComponent, canActivate: [AuthGuard], children: [
-    {path: 'users/:userPageId', component: UsersComponent, canActivate: [AuthGuard]},
-    {path: 'roles/:rolesPageId', component: RolesListComponent, canActivate: [AuthGuard]},
-    {path: 'departments/:departsPageId', component: DepartmentListComponent, canActivate: [AuthGuard]},
-    {path: 'sections/:sectionPageId', component: SectionListComponent, canActivate: [AuthGuard]},
-    {path: 'reports', component: ReportsPageComponent, canActivate: [AuthGuard]},
-    {path: 'addu/:type_add', component: FormUserComponent, canActivate: [AuthGuard]},
-    {path: 'addJoinUs', component: AddJoinUsComponent, canActivate:[AuthGuard]},
-    {path: 'joinUs/:typeJoinMode/:editJoinId', component: AddJoinUsComponent, canActivate:[AuthGuard]},
-    {path: 'join/:typemode/:userEditId', component: FormUserComponent, canActivate: [AuthGuard]},
-    {path: 'user/:typemode/:userEditId', component: FormUserComponent, canActivate: [AuthGuard]},
-    {path: 'addRole', component: AddRolesComponent, canActivate: [AuthGuard]},
-    {path: 'editRole/:typeRoleMode/:roleEditId', component: AddRolesComponent, canActivate: [AuthGuard]},
-    {path: 'addAdminstration', component: AddDepartmentComponent, canActivate: [AuthGuard]},
-    {path: 'editAdminstration/:typeAdminMode/:editAdminId', component: AddDepartmentComponent, canActivate: [AuthGuard]},
-    {path: 'addSection', component: AddSectionComponent, canActivate: [AuthGuard]},
-    {path: 'editSection/:typeSectionMode/:editSectionId', component: AddSectionComponent, canActivate: [AuthGuard]},
-    {path: 'hospitalsList/:typePageId', component: HospitalListComponent, canActivate: [AuthGuard]},
-    {path: 'mangementList/:typePageId', component: HospitalListComponent, canActivate: [AuthGuard]},
-    {path: 'add/:typeAdd' , component: AddHospitalComponent, canActivate: [AuthGuard]},
-    {path: 'Hospital/:typeHospitalMode/:editTypePageId', component: AddHospitalComponent, canActivate: [AuthGuard]},
-    {path: 'Management/:typeHospitalMode/:editTypePageId', component: AddHospitalComponent, canActivate: [AuthGuard]},
-    {path: 'eventsList/:eventPageId', component: EventsComponent, canActivate: [AuthGuard]},
-    {path: 'addEvent', component: AddEventComponent, canActivate: [AuthGuard]},
-    {path: 'Event/:typeEventMode/:editEventId', component: AddEventComponent, canActivate:[AuthGuard]},
-    {path: 'externalsList/:externalPageId', component: ExternalListComponent, canActivate: [AuthGuard]},
-    {path: 'addExternal', component: AddExternalComponent, canActivate: [AuthGuard]},
-    {path: 'externalService/:typeExternalMode/:editExternalId', component: AddExternalComponent, canActivate: [AuthGuard]},
-    {path: 'achievementsList/:achievementPageId', component: AchievementComponent, canActivate: [AuthGuard]},
-    {path: 'addAchievement', component: AddAchievementComponent, canActivate: [AuthGuard]},
-    {path: 'achievement/:typeAchieventMode/:editAchievementId', component: AddAchievementComponent, canActivate: [AuthGuard]},
-    {path: 'joinUs/:userPageId', component: UsersComponent, canActivate: [AuthGuard]},
-    {path: 'tabs/:tabPageId', component: TabListComponent, canActivate: [AuthGuard]},
-    {path: 'addTab', component: AddTabComponent, canActivate: [AuthGuard]},
-    {path: 'tab/:typeTabMode/:editTabId', component: AddTabComponent, canActivate: [AuthGuard]},
-    {path: 'newsList/:newsPageId', component: NewsListComponent, canActivate: [AuthGuard]},
-    {path: 'addNews', component: AddNewsComponent, canActivate: [AuthGuard]},
-    {path: 'new/:typeNewMode/:editNewId', component: AddNewsComponent, canActivate: [AuthGuard]},
-    {path: 'footerList/:footerPageId', component: FooterListComponent, canActivate: [AuthGuard]},
-    {path: 'addFooter', component: AddFooterComponent, canActivate: [AuthGuard]},
-    {path: 'footer/:typeFooterMode/:editFooterId', component: AddFooterComponent, canActivate: [AuthGuard]},
-    {path: 'internalServicesList/:internalPageId', component: InternalServicesComponent, canActivate: [AuthGuard]},
-    {path: 'addInternalServices', component: AddInternalServicesComponent, canActivate: [AuthGuard]},
-    {path: 'InternalServices/:typeInternalMode/:editInternalId', component: AddInternalServicesComponent, canActivate: [AuthGuard]},
-    {path: 'lecturesList/:lecturePageId', component: LecturesListComponent, canActivate:[AuthGuard]},
-    {path: 'addLecture', component: AddLectureComponent, canActivate: [AuthGuard]},
-    {path: 'Lecture/:typeLectureMode/:editLectureId', component: AddLectureComponent, canActivate: [AuthGuard]},
-    {path: 'mainMenuList/:menuPageId', component: MainListComponent, canActivate:[AuthGuard]},
-    {path: 'addMenu', component: AddMenuComponent, canActivate: [AuthGuard]},
-    {path: 'menu/:typeMenuMode/:editMenuId', component: AddMenuComponent, canActivate: [AuthGuard]},
-    {path: 'userPermission/:userPermissionId', component: UserPermissionComponent, canActivate: [AuthGuard]},
-    {path: 'userreport/:reportUserId', component: UserReportComponent, canActivate: [AuthGuard]},
-    {path: 'roleReport/:roleReportId', component: RoleReportComponent, canActivate: [AuthGuard]},
-    {path: 'userInRoleReport/:userRoleReportId', component: RoleReport2Component, canActivate: [AuthGuard]},
-    {path: 'reportList/:reportName', component: ReportListComponent},
-    {path: 'advertisimentList/:adverId', component: AdvertisimentComponent},
-    {path: 'advertisiment/:typeAdver', component: AddAdverComponent},
-  ]},
   {path: 'page-not-found', component: PageNotFoundComponent},
   {path: '**', redirectTo: '/page-not-found', pathMatch: 'full'}
 ];

src/app/app.component.css

@@ -0,0 +1,4 @@
+.routerLinkContainer-w {
+    background: url('../assets/image/background_login.jpg') no-repeat top center;
+    background-size: cover;
+}

src/app/app.component.html

@@ -6,4 +6,10 @@
  type = "ball-clip-rotate-pulse"
  ></ngx-spinner>
 
-<app-dashboard-content></app-dashboard-content>
+ <app-header></app-header>
+    <div class="routerLinkContainer-w" [style.min-height.px]="myInnerHeight">
+        <router-outlet></router-outlet>
+    </div>
+<app-footer></app-footer>
+
+<!-- <app-dashboard-content></app-dashboard-content> -->

src/app/app.module.ts

@@ -1,31 +1,22 @@
-import { DashboardService } from './shared/dashboard.service';
-import { CanDeactivateGuard } from './shared/can-deactivate-guards.service';
+import { ServicesComponent } from './servicesItems/services.component';
 import { ExternalPageModule } from './External-Page/external-page.module';
+//import { InternalPageModule } from './Internal-Page/internal-page.module';
+import { DashBoardModule } from './dashboard/dashboard.module';
+
+import { CanDeactivateGuard } from './shared/can-deactivate-guards.service';
+import { HashLocationStrategy, LocationStrategy } from '@angular/common';
+
 import { FooterComponent } from './dashboard/main-footer/footer.component';
 import { HeaderComponent } from './dashboard/header/header.component';
 
-import { MainMenuService } from './shared/main-menu.service';
-import { InternalSerService } from './shared/internal-ser.service';
-import { FooterService } from './shared/footer.service';
-import { NewService } from './shared/new.service';
-import { AchievementsService } from './shared/achievements.service';
-import { ExternalSerService } from './shared/external-ser.service';
-import { EventService } from './shared/event.service';
-import { HospitalService } from './shared/hospital.service';
-import { ReportService } from './shared/report.service';
-import { SectionService } from './shared/section.service';
-import { HashLocationStrategy, LocationStrategy } from '@angular/common';
 
-import { DepartmentService } from './shared/department.service';
-import { DepartmentListComponent } from './dashboard/department/department-list/department-list.component';
 import { AuthGuardService } from './shared/auth-guard.service';
-import { UserService } from './shared/user.service';
 import { ResponceInterceptService } from './shared/responce-intercept.service';
 import { TokenInterceptorService } from './shared/token-interceptor.service';
 import { BrowserModule } from '@angular/platform-browser';
 
 
-import { NgModule } from '@angular/core';
+import { LOCALE_ID, NgModule } from '@angular/core';
 
 
 
@@ -45,65 +36,31 @@ import { RegesterComponent } from './regester/regester.component';
 import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
 import { AuthServiceService } from './shared/auth-service.service';
 import { HTTP_INTERCEPTORS } from '@angular/common/http';
-import { DashboardComponent } from './dashboard/dashboard/dashboard.component';
-import { ServiceItemComponent } from './dashboard/service-item/service-item.component';
-import { UsersComponent } from './dashboard/users/users.component';
-import { FormUserComponent } from './dashboard/users/form-user/form-user.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ToastrModule } from 'ngx-toastr';
 import { NgxSpinnerModule } from 'ngx-spinner';
 import {NgxPaginationModule} from 'ngx-pagination';
 import { FiltterPipePipe } from './filtter-pipe.pipe';
-import { RolesService } from './shared/roles.service';
-import { RolesListComponent } from './dashboard/roles/roles-list/roles-list.component';
-import { AddRolesComponent } from './dashboard/roles/add-roles/add-roles.component';
-import { AddDepartmentComponent } from './dashboard/department/add-department/add-department.component';
-import { SectionListComponent } from './dashboard/sections/section-list/section-list.component';
-import { AddSectionComponent } from './dashboard/sections/add-section/add-section.component';
-import { UserPermissionComponent } from './dashboard/users/user-permission/user-permission.component';
+
 import { AlifeFileToBase64Module } from 'alife-file-to-base64';
-import { UserReportComponent } from './dashboard/users/user-report/user-report.component';
-import { RoleReportComponent } from './dashboard/roles/role-report/role-report.component';
-import { RoleReport2Component } from './dashboard/roles/role-report2/role-report2.component';
-import { ReportsPageComponent } from './dashboard/reports-page/reports-page.component';
-import { ReportListComponent } from './dashboard/report-list/report-list.component';
-import { EnglishCharactersDirective } from './shared/english-characters.directive';
-import { OnlyNumberDirective } from './shared/only-number.directive';
-import { HospitalListComponent } from './dashboard/hospitals/hospital-list/hospital-list.component';
-import { AddHospitalComponent } from './dashboard/hospitals/add-hospital/add-hospital.component';
-import { EventsComponent } from './dashboard/events/events.component';
-import { AddEventComponent } from './dashboard/events/add-event/add-event.component';
-import { ExternalListComponent } from './dashboard/external-services/external-list/external-list.component';
-import { AddExternalComponent } from './dashboard/external-services/add-external/add-external.component';
-import { AchievementComponent } from './dashboard/achievements/achievement-list/achievement.component';
-import { AddAchievementComponent } from './dashboard/achievements/add-achievement/add-achievement.component';
-import { TabListComponent } from './dashboard/tabs/tab-list/tab-list.component';
-import { AddTabComponent } from './dashboard/tabs/add-tab/add-tab.component';
-import { NewsListComponent } from './dashboard/news/news-list/news-list.component';
-import { AddNewsComponent } from './dashboard/news/add-news/add-news.component';
-import { FooterListComponent } from './dashboard/footer/footer-list/footer-list.component';
-import { AddFooterComponent } from './dashboard/footer/add-footer/add-footer.component';
-import { InternalServicesComponent } from './dashboard/internal-services/internal-services.component';
-import { AddInternalServicesComponent } from './dashboard/internal-services/add-internal-services/add-internal-services.component';
-import { LecturesListComponent } from './dashboard/lectures/lectures-list/lectures-list.component';
-import { AddLectureComponent } from './dashboard/lectures/add-lecture/add-lecture.component';
-import { MainListComponent } from './dashboard/main-menu/main-list/main-list.component';
-import { AddMenuComponent } from './dashboard/main-menu/add-menu/add-menu.component';
-import { DashboardContent } from './dashboard/dashboard-content';
-import { AddJoinUsComponent } from './dashboard/add-join-us/add-join-us.component';
-import { InternalPageModule } from './Internal-Page/internal-page.module';
+
 import { CollapsibleModule } from 'angular2-collapsible'; // <-- import the module
 import { FlatpickrModule } from 'angularx-flatpickr';
 import { CalendarModule, DateAdapter } from 'angular-calendar';
 import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
-import { ShortenPipe } from './shorten.pipe';
-import { HigriDateComponent } from './higri-date/higri-date.component';
-import { ModalModule } from 'ngx-modialog';
+
 import { BootstrapModalModule } from 'ngx-modialog/plugins/bootstrap';
-import { JwSocialButtonsModule } from 'jw-angular-social-buttons';
-import { AdvertisimentComponent } from './dashboard/advertisiment/advertisiment.component';
-import { AddAdverComponent } from './dashboard/advertisiment/add-advertisiment/add-adver/add-adver.component';
-import { NumberDerictiveDirective } from './number-derictive.directive';
+
+//import { registerLocaleData } from '@angular/common';
+//import localeAr from '@angular/common/locales/ar-SA';
+//import localeDE from '@angular/common/locales/de';
+
+import { Ng2CarouselamosModule } from 'ng2-carouselamos';
+
+
+//registerLocaleData(localeAr, 'ar');
+
+
 
 //import { CeiboShare } from 'ng2-social-share';
 
@@ -116,54 +73,8 @@ import { NumberDerictiveDirective } from './number-derictive.directive';
     FooterComponent,
     LoginComponent,
     RegesterComponent,
+    ServicesComponent,
     PageNotFoundComponent,
-    DashboardComponent,
-    DashboardContent,
-    ServiceItemComponent,
-    ServiceItemComponent,
-    UsersComponent,
-    FormUserComponent,
-    FiltterPipePipe,
-    RolesListComponent,
-    AddRolesComponent,
-    DepartmentListComponent,
-    AddDepartmentComponent,
-    SectionListComponent,
-    AddSectionComponent,
-    UserPermissionComponent,
-    UserReportComponent,
-    RoleReportComponent,
-    RoleReport2Component,
-    ReportsPageComponent,
-    ReportListComponent,
-    EnglishCharactersDirective,
-    OnlyNumberDirective,
-    HospitalListComponent,
-    AddHospitalComponent,
-    EventsComponent,
-    AddEventComponent,
-    ExternalListComponent,
-    AddExternalComponent,
-    AchievementComponent,
-    AddAchievementComponent,
-    TabListComponent,
-    AddTabComponent,
-    NewsListComponent,
-    AddNewsComponent,
-    FooterListComponent,
-    AddFooterComponent,
-    InternalServicesComponent,
-    AddInternalServicesComponent,
-    LecturesListComponent,
-    AddLectureComponent,
-    MainListComponent,
-    AddMenuComponent,
-    AddJoinUsComponent,
-    ShortenPipe,
-    HigriDateComponent,
-    AdvertisimentComponent,
-    AddAdverComponent,
-    NumberDerictiveDirective,
     //CeiboShare,
   ],
   imports: [
@@ -172,7 +83,8 @@ import { NumberDerictiveDirective } from './number-derictive.directive';
     ReactiveFormsModule,
     HttpModule,
     HttpClientModule,
-    InternalPageModule,
+    DashBoardModule,
+    //InternalPageModule,
     ExternalPageModule,
     AppRoutingModule,
     SlideMenuModule,
@@ -182,9 +94,8 @@ import { NumberDerictiveDirective } from './number-derictive.directive';
     AlifeFileToBase64Module,
     BrowserAnimationsModule,  // <-- include required BrowserAnimationsModule
     CollapsibleModule,
-    JwSocialButtonsModule,
-    ModalModule.forRoot(),
     BootstrapModalModule,
+    Ng2CarouselamosModule,
     ToastrModule.forRoot(), // ToastrModule added
     NgbModule.forRoot(),
     FlatpickrModule.forRoot(),
@@ -196,22 +107,9 @@ import { NumberDerictiveDirective } from './number-derictive.directive';
   ],
   providers: [AuthServiceService,
     TokenInterceptorService,
-    UserService,
     AuthGuardService,
-    RolesService,
-    SectionService,
-    DepartmentService,
-    ReportService,
-    HospitalService,
-    EventService,
-    NewService,
-    FooterService,
-    MainMenuService,
-    ExternalSerService,
-    AchievementsService,
-    InternalSerService,
     CanDeactivateGuard,
-    DashboardService,
+    //{ provide: LOCALE_ID, useValue: 'ar-SA' },
     {provide: LocationStrategy, useClass: HashLocationStrategy},
     ResponceInterceptService , {
       provide: HTTP_INTERCEPTORS,

src/app/dashboard/dasboard-content.html

@@ -1,5 +1,5 @@
-<app-header></app-header>
+<!-- <app-header></app-header> -->
     <div class="routerLinkContainer-w" [style.min-height.px]="myInnerHeight">
         <router-outlet></router-outlet>
     </div>
-<app-footer></app-footer>
+<!-- <app-footer></app-footer> -->

src/app/dashboard/dashboard-routing.ts

@@ -0,0 +1,117 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { AddAdverComponent } from './advertisiment/add-advertisiment/add-adver/add-adver.component';
+import { AdvertisimentComponent } from './advertisiment/advertisiment.component';
+import { RoleReport2Component } from './roles/role-report2/role-report2.component';
+import { UserPermissionComponent } from './users/user-permission/user-permission.component';
+import { AddMenuComponent } from './main-menu/add-menu/add-menu.component';
+import { MainListComponent } from './main-menu/main-list/main-list.component';
+import { AddLectureComponent } from './lectures/add-lecture/add-lecture.component';
+import { LecturesListComponent } from './lectures/lectures-list/lectures-list.component';
+import { AddInternalServicesComponent } from './internal-services/add-internal-services/add-internal-services.component';
+import { InternalServicesComponent } from './internal-services/internal-services.component';
+import { FooterListComponent } from './footer/footer-list/footer-list.component';
+import { AddNewsComponent } from './news/add-news/add-news.component';
+import { NewsListComponent } from './news/news-list/news-list.component';
+import { AddTabComponent } from './tabs/add-tab/add-tab.component';
+import { TabListComponent } from './tabs/tab-list/tab-list.component';
+import { AddAchievementComponent } from './achievements/add-achievement/add-achievement.component';
+import { AchievementComponent } from './achievements/achievement-list/achievement.component';
+import { AddExternalComponent } from './external-services/add-external/add-external.component';
+import { AddEventComponent } from './events/add-event/add-event.component';
+import { AddHospitalComponent } from './hospitals/add-hospital/add-hospital.component';
+import { HospitalListComponent } from './hospitals/hospital-list/hospital-list.component';
+import { AddSectionComponent } from './sections/add-section/add-section.component';
+import { AddDepartmentComponent } from './department/add-department/add-department.component';
+import { AddRolesComponent } from './roles/add-roles/add-roles.component';
+import { AddJoinUsComponent } from './add-join-us/add-join-us.component';
+import { DepartmentListComponent } from './department/department-list/department-list.component';
+import { UsersComponent } from './users/users.component';
+import { ServiceItemComponent } from './service-item/service-item.component';
+import { AuthGuardService as AuthGuard } from '../shared/auth-guard.service';
+import { RolesListComponent } from './roles/roles-list/roles-list.component';
+import { SectionListComponent } from './sections/section-list/section-list.component';
+import { ReportsPageComponent } from './reports-page/reports-page.component';
+import { FormUserComponent } from './users/form-user/form-user.component';
+import { ExternalListComponent } from './external-services/external-list/external-list.component';
+import { AddFooterComponent } from './footer/add-footer/add-footer.component';
+import { UserReportComponent } from './users/user-report/user-report.component';
+import { RoleReportComponent } from './roles/role-report/role-report.component';
+import { ReportListComponent } from './report-list/report-list.component';
+import { EventsComponent } from './events/events.component';
+
+const dashboardRouting: Routes = [
+    {path: '', component: ServiceItemComponent, canActivate: [AuthGuard], children: [
+    {path: 'users/:userPageId', component: UsersComponent, canActivate: [AuthGuard]},
+    {path: 'roles/:rolesPageId', component: RolesListComponent, canActivate: [AuthGuard]},
+    {path: 'departments/:departsPageId', component: DepartmentListComponent, canActivate: [AuthGuard]},
+    {path: 'sections/:sectionPageId', component: SectionListComponent, canActivate: [AuthGuard]},
+    {path: 'reports', component: ReportsPageComponent, canActivate: [AuthGuard]},
+    {path: 'addu/:type_add', component: FormUserComponent, canActivate: [AuthGuard]},
+    {path: 'addJoinUs', component: AddJoinUsComponent, canActivate:[AuthGuard]},
+    {path: 'joinUs/:typeJoinMode/:editJoinId', component: AddJoinUsComponent, canActivate:[AuthGuard]},
+    {path: 'join/:typemode/:userEditId', component: FormUserComponent, canActivate: [AuthGuard]},
+    {path: 'user/:typemode/:userEditId', component: FormUserComponent, canActivate: [AuthGuard]},
+    {path: 'addRole', component: AddRolesComponent, canActivate: [AuthGuard]},
+    {path: 'editRole/:typeRoleMode/:roleEditId', component: AddRolesComponent, canActivate: [AuthGuard]},
+    {path: 'addAdminstration', component: AddDepartmentComponent, canActivate: [AuthGuard]},
+    {path: 'editAdminstration/:typeAdminMode/:editAdminId', component: AddDepartmentComponent, canActivate: [AuthGuard]},
+    {path: 'addSection', component: AddSectionComponent, canActivate: [AuthGuard]},
+    {path: 'editSection/:typeSectionMode/:editSectionId', component: AddSectionComponent, canActivate: [AuthGuard]},
+    {path: 'hospitalsList/:typePageId', component: HospitalListComponent, canActivate: [AuthGuard]},
+    {path: 'mangementList/:typePageId', component: HospitalListComponent, canActivate: [AuthGuard]},
+    {path: 'add/:typeAdd' , component: AddHospitalComponent, canActivate: [AuthGuard]},
+    {path: 'Hospital/:typeHospitalMode/:editTypePageId', component: AddHospitalComponent, canActivate: [AuthGuard]},
+    {path: 'Management/:typeHospitalMode/:editTypePageId', component: AddHospitalComponent, canActivate: [AuthGuard]},
+    {path: 'eventsList/:eventPageId', component: EventsComponent, canActivate: [AuthGuard]},
+    {path: 'addEvent', component: AddEventComponent, canActivate: [AuthGuard]},
+    {path: 'Event/:typeEventMode/:editEventId', component: AddEventComponent, canActivate:[AuthGuard]},
+    {path: 'externalsList/:externalPageId', component: ExternalListComponent, canActivate: [AuthGuard]},
+    {path: 'addExternal', component: AddExternalComponent, canActivate: [AuthGuard]},
+    {path: 'externalService/:typeExternalMode/:editExternalId', component: AddExternalComponent, canActivate: [AuthGuard]},
+    {path: 'achievementsList/:achievementPageId', component: AchievementComponent, canActivate: [AuthGuard]},
+    {path: 'addAchievement', component: AddAchievementComponent, canActivate: [AuthGuard]},
+    {path: 'achievement/:typeAchieventMode/:editAchievementId', component: AddAchievementComponent, canActivate: [AuthGuard]},
+    {path: 'joinUs/:userPageId', component: UsersComponent, canActivate: [AuthGuard]},
+    {path: 'tabs/:tabPageId', component: TabListComponent, canActivate: [AuthGuard]},
+    {path: 'addTab', component: AddTabComponent, canActivate: [AuthGuard]},
+    {path: 'tab/:typeTabMode/:editTabId', component: AddTabComponent, canActivate: [AuthGuard]},
+    {path: 'newsList/:newsPageId', component: NewsListComponent, canActivate: [AuthGuard]},
+    {path: 'addNews', component: AddNewsComponent, canActivate: [AuthGuard]},
+    {path: 'new/:typeNewMode/:editNewId', component: AddNewsComponent, canActivate: [AuthGuard]},
+    {path: 'footerList/:footerPageId', component: FooterListComponent, canActivate: [AuthGuard]},
+    {path: 'addFooter', component: AddFooterComponent, canActivate: [AuthGuard]},
+    {path: 'footer/:typeFooterMode/:editFooterId', component: AddFooterComponent, canActivate: [AuthGuard]},
+    {path: 'internalServicesList/:internalPageId', component: InternalServicesComponent, canActivate: [AuthGuard]},
+    {path: 'addInternalServices', component: AddInternalServicesComponent, canActivate: [AuthGuard]},
+    {path: 'InternalServices/:typeInternalMode/:editInternalId', component: AddInternalServicesComponent, canActivate: [AuthGuard]},
+    {path: 'lecturesList/:lecturePageId', component: LecturesListComponent, canActivate:[AuthGuard]},
+    {path: 'addLecture', component: AddLectureComponent, canActivate: [AuthGuard]},
+    {path: 'Lecture/:typeLectureMode/:editLectureId', component: AddLectureComponent, canActivate: [AuthGuard]},
+    {path: 'mainMenuList/:menuPageId', component: MainListComponent, canActivate:[AuthGuard]},
+    {path: 'addMenu', component: AddMenuComponent, canActivate: [AuthGuard]},
+    {path: 'menu/:typeMenuMode/:editMenuId', component: AddMenuComponent, canActivate: [AuthGuard]},
+    {path: 'userPermission/:userPermissionId', component: UserPermissionComponent, canActivate: [AuthGuard]},
+    {path: 'userreport/:reportUserId', component: UserReportComponent, canActivate: [AuthGuard]},
+    {path: 'roleReport/:roleReportId', component: RoleReportComponent, canActivate: [AuthGuard]},
+    {path: 'userInRoleReport/:userRoleReportId', component: RoleReport2Component, canActivate: [AuthGuard]},
+    {path: 'reportList/:reportName', component: ReportListComponent},
+    {path: 'advertisimentList/:adverId', component: AdvertisimentComponent},
+    {path: 'advertisiment/:typeAdver', component: AddAdverComponent},
+  ]},
+];
+
+@NgModule({
+    imports: [
+        RouterModule.forChild(dashboardRouting),
+    ],
+    //exports: [internalPageRoutes]
+    exports: [
+        RouterModule
+      ]
+})
+
+export class DashBoardRouting {
+
+}

src/app/dashboard/dashboard.module.ts

@@ -0,0 +1,165 @@
+import { EventsComponent } from './events/events.component';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { NumberDerictiveDirective } from './../number-derictive.directive';
+import { EnglishCharactersDirective } from './../shared/english-characters.directive';
+import { ModalModule } from 'ngx-modialog';
+import { FiltterPipePipe } from './../filtter-pipe.pipe';
+import { JwSocialButtonsModule } from 'jw-angular-social-buttons';
+import { OnlyNumberDirective } from '../shared/only-number.directive';
+import { ShortenPipe } from '../shorten.pipe';
+import { HigriDateComponent } from '../higri-date/higri-date.component';
+
+
+import { DashBoardRouting } from './dashboard-routing';
+
+import { DashboardService } from './../shared/dashboard.service';
+import { InternalSerService } from './../shared/internal-ser.service';
+import { AchievementsService } from './../shared/achievements.service';
+import { ExternalSerService } from './../shared/external-ser.service';
+import { MainMenuService } from './../shared/main-menu.service';
+import { FooterService } from './../shared/footer.service';
+import { NewService } from './../shared/new.service';
+import { EventService } from './../shared/event.service';
+import { HospitalService } from './../shared/hospital.service';
+import { ReportService } from './../shared/report.service';
+import { DepartmentService } from './../shared/department.service';
+import { SectionService } from './../shared/section.service';
+import { RolesService } from './../shared/roles.service';
+
+import { DashboardContent } from './dashboard-content';
+
+
+import {NgxPaginationModule} from 'ngx-pagination';
+import { AlifeFileToBase64Module } from 'alife-file-to-base64';
+import { QuillModule } from 'ngx-quill';
+
+
+import { AddAdverComponent } from './advertisiment/add-advertisiment/add-adver/add-adver.component';
+import { AdvertisimentComponent } from './advertisiment/advertisiment.component';
+import { RoleReport2Component } from './roles/role-report2/role-report2.component';
+import { UserPermissionComponent } from './users/user-permission/user-permission.component';
+import { AddMenuComponent } from './main-menu/add-menu/add-menu.component';
+import { MainListComponent } from './main-menu/main-list/main-list.component';
+import { AddLectureComponent } from './lectures/add-lecture/add-lecture.component';
+import { LecturesListComponent } from './lectures/lectures-list/lectures-list.component';
+import { AddInternalServicesComponent } from './internal-services/add-internal-services/add-internal-services.component';
+import { InternalServicesComponent } from './internal-services/internal-services.component';
+import { FooterListComponent } from './footer/footer-list/footer-list.component';
+import { AddNewsComponent } from './news/add-news/add-news.component';
+import { NewsListComponent } from './news/news-list/news-list.component';
+import { AddTabComponent } from './tabs/add-tab/add-tab.component';
+import { TabListComponent } from './tabs/tab-list/tab-list.component';
+import { AddAchievementComponent } from './achievements/add-achievement/add-achievement.component';
+import { AchievementComponent } from './achievements/achievement-list/achievement.component';
+import { AddExternalComponent } from './external-services/add-external/add-external.component';
+import { AddEventComponent } from './events/add-event/add-event.component';
+import { AddHospitalComponent } from './hospitals/add-hospital/add-hospital.component';
+import { HospitalListComponent } from './hospitals/hospital-list/hospital-list.component';
+import { AddSectionComponent } from './sections/add-section/add-section.component';
+import { AddDepartmentComponent } from './department/add-department/add-department.component';
+import { AddRolesComponent } from './roles/add-roles/add-roles.component';
+import { AddJoinUsComponent } from './add-join-us/add-join-us.component';
+import { DepartmentListComponent } from './department/department-list/department-list.component';
+import { UsersComponent } from './users/users.component';
+import { ServiceItemComponent } from './service-item/service-item.component';
+import { AuthGuardService as AuthGuard } from '../shared/auth-guard.service';
+import { RolesListComponent } from './roles/roles-list/roles-list.component';
+import { SectionListComponent } from './sections/section-list/section-list.component';
+import { ReportsPageComponent } from './reports-page/reports-page.component';
+import { FormUserComponent } from './users/form-user/form-user.component';
+import { ExternalListComponent } from './external-services/external-list/external-list.component';
+import { AddFooterComponent } from './footer/add-footer/add-footer.component';
+import { UserReportComponent } from './users/user-report/user-report.component';
+import { RoleReportComponent } from './roles/role-report/role-report.component';
+import { ReportListComponent } from './report-list/report-list.component';
+
+import { UserService } from '../shared/user.service';
+
+
+
+@NgModule({
+    declarations: [
+        DashboardContent,
+        ServiceItemComponent,
+        ServiceItemComponent,
+        UsersComponent,
+        FormUserComponent,
+        FiltterPipePipe,
+        RolesListComponent,
+        AddRolesComponent,
+        DepartmentListComponent,
+        AddDepartmentComponent,
+        SectionListComponent,
+        AddSectionComponent,
+        UserPermissionComponent,
+        UserReportComponent,
+        RoleReportComponent,
+        RoleReport2Component,
+        ReportsPageComponent,
+        ReportListComponent,
+        EnglishCharactersDirective,
+        OnlyNumberDirective,
+        HospitalListComponent,
+        AddHospitalComponent,
+        EventsComponent,
+        AddEventComponent,
+        ExternalListComponent,
+        AddExternalComponent,
+        AchievementComponent,
+        AddAchievementComponent,
+        TabListComponent,
+        AddTabComponent,
+        NewsListComponent,
+        AddNewsComponent,
+        FooterListComponent,
+        AddFooterComponent,
+        InternalServicesComponent,
+        AddInternalServicesComponent,
+        LecturesListComponent,
+        AddLectureComponent,
+        MainListComponent,
+        AddMenuComponent,
+        AddJoinUsComponent,
+        ShortenPipe,
+        HigriDateComponent,
+        AdvertisimentComponent,
+        AddAdverComponent,
+        NumberDerictiveDirective,
+    ],
+    imports: [
+        CommonModule,
+        DashBoardRouting,
+        JwSocialButtonsModule,
+        NgxPaginationModule,
+        AlifeFileToBase64Module,
+        NgbModule.forRoot(),
+        ModalModule.forRoot(),
+        FormsModule,
+        ReactiveFormsModule,
+        QuillModule
+    ],
+    providers: [
+        UserService,
+        RolesService,
+        SectionService,
+        DepartmentService,
+        ReportService,
+        HospitalService,
+        EventService,
+        NewService,
+        FooterService,
+        MainMenuService,
+        ExternalSerService,
+        AchievementsService,
+        InternalSerService,
+        DashboardService, 
+    ],
+})
+
+export class DashBoardModule {
+
+}

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

@@ -53,62 +53,78 @@
             <div class="row">
               <div class="col-12 col-md-6"  formArrayName="fields" *ngFor="let titleControl of addInternalForm.get('fields').controls; let i = index">
                 <div class="form-group  arrayGroupForm-w" [formGroupName]="i">
-                  <div class="col-12 col-sm-12 col-md-12 col-lg-12" style="margin-bottom:30px">
-                    <div class="form-group text-center imgContainer">
-                      <img [src]="urlImg[i]" class="imgProfile" height="200">
-                      <input type="file" name="file{{i}}" id="file{{i}}" class="inputfile" alife-file-to-base64 (onFileChanged)="onFileChanges($event,i)" (change)="getUrl($event,i)" formControlName="photo"/>
-                      <label for="file{{i}}" class="iconUpload-w"><i class="fas fa-upload"></i></label>
-                    </div>
-                  </div>
-                  <label for="name" style="float: right;">الأسم باللغه العربيه</label>
-                  <input type="text" id="name" class="form-control" formControlName="name" style="margin: 10px 0;" />
-                  <label for="name_en" style="float: right;">الأسم باللغه الإنجليزيه</label>
-                  <input type="text" id="name_en" class="form-control" formControlName="name_en" style="margin: 10px 0;" />
-                  <!-- <label for="link" style="float: right;">الرابط</label> -->
-                  <input type="text" id="link" *ngIf="" class="form-control" formControlName="link" style="margin:10px 0" />
-
-                  <label for="apperance" style="float: right;">الظهور</label>
-                  <select id="apperance" class="form-control" formControlName="apperance" style="margin: 10px 0">
-                    <option value="1">الظهور</option>
-                    <option value="0">غير الظهور</option>
-                  </select>
-
-                  <label for="status" style="float: right;">الحاله</label>
-                  <select id="status" class="form-control" formControlName="status" style="margin: 10px 0">
-                    <option value="1">فعال</option>
-                    <option value="0">غير فعال</option>
-                  </select>
-
-
-                  <div class="form-group">
-                      <label style="float: right; margin-right:5px;margin-top:10px">نوع الرايط <span class="spanReqired-w">*</span></label>
-                      <div class="form-group">
-                        <div class="custom-control custom-radio inlineBlock-w">
-                          <input type="radio" class="custom-control-input" id="defaultUnchecked{{i}}" (change)="showCahngeRadio('internal',i)" value="internal" formControlName="link_type">
-                          <label class="custom-control-label" for="defaultUnchecked{{i}}" style="cursor: pointer;">داخلي</label>
+                  <div class="row">
+                      <div class="col-12 col-sm-12 col-md-12 col-lg-12" style="margin-bottom:30px;">
+                          <div class="form-group text-center imgContainer">
+                            <img [src]="urlImg[i]" class="imgProfile" height="200">
+                            <input type="file" name="file{{i}}" id="file{{i}}" class="inputfile" alife-file-to-base64 (onFileChanged)="onFileChanges($event,i)" (change)="getUrl($event,i)"/>
+                            <label for="file{{i}}" class="iconUpload-w"><i class="fas fa-upload"></i></label>
+                          </div>
+                        </div>
+      
+                        <div class="col-12">
+                          <div class="form-group">
+                            <label for="name" style="float: right;">الأسم باللغه العربيه</label>
+                            <input type="text" id="name" class="form-control" formControlName="name" style="margin: 10px 0;" />
+                          </div>
                         </div>
                         
-                        <div class="custom-control custom-radio inlineBlock-w">
-                          <input type="radio" class="custom-control-input" id="defaultChecked{{i}}" value="external" (change)="showCahngeRadio('external',i)" formControlName="link_type">
-                          <label class="custom-control-label" for="defaultChecked{{i}}" style="cursor: pointer;">خارجي</label>
+                        <div class="col-12">
+                          <div class="form-group">
+                            <label for="name_en" style="float: right;">الأسم باللغه الإنجليزيه</label>
+                            <input type="text" id="name_en" class="form-control" formControlName="name_en" style="margin: 10px 0;" />
+                          </div>
                         </div>
-                      </div>
-                  </div>
-
-                  <div class="form-group" *ngIf=" addInternalForm.get('fields')['controls'][i]['controls'].link_type.value == 'external' ">
-                      <label for="link" style="float: right; margin-right:5px;margin-top:10px">الرايط</label>
-                      <input type="text" class="form-control" placeholder="الرابط" formControlName="link" id="link" />
-                  </div>
-
-                  <div class="form-group" *ngIf=" addInternalForm.get('fields')['controls'][i]['controls'].link_type.value == 'internal' ">
-                      <label style="float: right; margin-right:5px;margin-top:10px">الصفحات الداخليه</label>
-                      <select formControlName="link2" class="form-control">
-                        <option *ngFor="let page of internalPages; let i = index" [value]="page.id">{{page.name}}</option>
-                      </select>
+      
+                        <div class="col-12">
+                          <div class="form-group">
+                            <label for="status" style="float: right;">الحاله</label>
+                            <select id="status" class="form-control" formControlName="status" style="margin: 10px 0">
+                              <option value="1">فعال</option>
+                              <option value="0">غير فعال</option>
+                            </select>
+                          </div>
+                        </div>
+                      
+                        <div class="col-12">
+                          <div class="form-group">
+                              <label style="float: right; margin-right:5px;margin-top:10px">نوع الرايط <span class="spanReqired-w">*</span></label>
+                              <div class="form-group">
+                                <div class="custom-control custom-radio inlineBlock-w">
+                                  <input type="radio" class="custom-control-input" id="defaultUnchecked{{i}}" (change)="showCahngeRadio('internal',i)" value="internal" formControlName="link_type">
+                                  <label class="custom-control-label" for="defaultUnchecked{{i}}" style="cursor: pointer;">داخلي</label>
+                                </div>
+                                
+                                <div class="custom-control custom-radio inlineBlock-w">
+                                  <input type="radio" class="custom-control-input" id="defaultChecked{{i}}" value="external" (change)="showCahngeRadio('external',i)" formControlName="link_type">
+                                  <label class="custom-control-label" for="defaultChecked{{i}}" style="cursor: pointer;">خارجي</label>
+                                </div>
+                              </div>
+                          </div>    
+                        </div>
+                       
+                        <div class="col-12">
+                          <div class="form-group" *ngIf=" addInternalForm.get('fields')['controls'][i]['controls'].link_type.value == 'external' ">
+                              <label for="link" style="float: right; margin-right:5px;margin-top:10px">الرايط</label>
+                              <input type="text" class="form-control" placeholder="الرابط" formControlName="link2" id="link" />
+                          </div>
+                        </div>
+                       
+      
+                        <div class="col-12">
+                          <div class="form-group">
+                            <div class="form-group" *ngIf=" addInternalForm.get('fields')['controls'][i]['controls'].link_type.value == 'internal' ">
+                                <label style="float: right; margin-right:5px;margin-top:10px">الصفحات الداخليه</label>
+                                <select formControlName="link" class="form-control">
+                                  <option *ngFor="let page of internalPages; let i = index" [value]="page.id">{{page.name}}</option>
+                                </select>
+                            </div>
+                          </div>
+                        </div>
+                       
+                        <button type="button" class="btn btn-danger rightW" *ngIf="i == 0 ? false : true" style="position: absolute; top:0;right:23px;" (click)="removeTitle(i)"><i class="fas fa-trash-alt"></i></button>
+      
                   </div>
-              
-                  <button type="button" class="btn btn-danger rightW" *ngIf="i == 0 ? false : true" style="position: absolute; top:0;right:23px;" (click)="removeTitle(i)"><i class="fas fa-trash-alt"></i></button>
-
                 </div>
               </div>
 
@@ -119,8 +135,6 @@
 
             </div>
           </div>
-
-
         </form>
       </div>
     </div>

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

@@ -28,30 +28,37 @@ export class AddInternalServicesComponent implements OnInit {
     private http: HttpClient,
     private location: Location) { }
 
-  addInternalForm: FormGroup;
-  fields: FormArray;
+  addInternalForm: FormGroup; //form group
+  fields: FormArray; //form array fields inside form group
   typeMode: boolean = false; //to check edit or create
-  typePageEdit: string = '';
-  typeCreatePage: string = '';
-  typeLink = 'إنشاء جديد';
-  pageId: number;
-  editSubscription: Subscription;
-  typeCreateSubscription: Subscription;
-  editObjectPhoto = [];
-  fieldsData = [];
+  //typePageEdit: string = '';
+  //typeCreatePage: string = '';
+  typeLink = 'إنشاء جديد'; //type path text create or edit 
+  pageId: number; //pageId for edit 
+  editSubscription: Subscription; //subscription edit 
+
+  //editObjectPhoto = [];
+  lastIndex:number; //to get the last index of checkChangeImage on photo case in edit
+  fieldsData = []; //to in edit mode collect all fields in this array
   internalPages = [];
+  
+  //array of photos data 
   imageBase64 = [{
     photo: '',
     photo_type: '',
   }];
-  checkSaveClick:boolean = false;
-  checkAdd:boolean = false;
-  photoType: string = '';
+
   checkChangeImage = [false]; //check change for any image if change in edit mode or no
-  checkValidateField: boolean = false; //loop in imageBase64 array and check if one of them not have image or no
+  urlImg =  ['../../assets/image/avatar.png'];
+
+  checkSaveClick:boolean = false; //to make button save disabled when submitted form
+  checkAdd:boolean = false; //to check on edit or create mode to send id in edit mode 
+  photoType: string = ''; //type of photos
+
+  checkValidateField: boolean = false; //to send save if all validation of fields is true
+
   showLink: boolean = false;
 
-  urlImg =  ['../../assets/image/avatar.png'];
   
   ngOnInit() {
     //show / hide notification search in header
@@ -83,7 +90,6 @@ export class AddInternalServicesComponent implements OnInit {
       name: new FormControl(null , Validators.required),
       name_en: new FormControl(null , Validators.required),
       status: new FormControl('1', Validators.required),
-      //link_type: new FormControl('external' , Validators.required),
       fields: this.formBuilder.array([ this.createItem() ])
     });
 
@@ -94,12 +100,12 @@ export class AddInternalServicesComponent implements OnInit {
           if(params['typeInternalMode'] == 'edit') {
             this.typeLink = 'تعديل';
             this.imageBase64 = [];
+            this.checkChangeImage = [];
             //redifine form data
             this.addInternalForm = new FormGroup({
               name: new FormControl(null , Validators.required),
               name_en: new FormControl(null , Validators.required),
               status: new FormControl(null, Validators.required),
-              link_type: new FormControl(null , Validators.required),
               fields: this.formBuilder.array([])
             });
 
@@ -109,16 +115,19 @@ export class AddInternalServicesComponent implements OnInit {
 
             this.internalServices.getInternalData(this.pageId).subscribe(
               (responce) => {
+
                 console.log('responcce', responce);
-                this.fieldsData = responce['internal_service'].fields;
-                console.log(this.fieldsData);
+
                 this.addInternalForm.patchValue({
                   name: responce['internal_service'].name,
                   name_en: responce['internal_service'].name_en,
                   status: responce['internal_service'].status,
-                  //link_type: responce['internal_service'].link_type,
                 });
-                  
+
+                this.fieldsData = responce['internal_service'].fields;
+
+                console.log(this.fieldsData);
+      
                 this.fields = this.addInternalForm.get('fields') as FormArray;
                   
                 for(let i = 0; i < this.fieldsData.length; i++) {
@@ -126,19 +135,27 @@ export class AddInternalServicesComponent implements OnInit {
                       this.formBuilder.group({
                         name: this.fieldsData[i].name,
                         name_en: this.fieldsData[i].name_en,
-                        link: this.fieldsData[i].link,
                         photo: this.fieldsData[i].photo,
-                        apperance: this.fieldsData[i].apperance,
                         status: this.fieldsData[i].status,
+                        link_type: this.fieldsData[i].link_type,
+                        link: this.fieldsData[i].link,
+                        link2: this.fieldsData[i].link2,
                       })
                     )
                   }
 
+                  //for loop to append url photo to array to show it
                   for(let i=0; i<this.fieldsData.length; i++) {
                     this.urlImg[i] = this.fieldsData[i].photo ? this.authSer.pathImg + this.fieldsData[i].photo : '../../assets/image/avatar.png';
                     this.checkChangeImage[i] = false;
+                    this.imageBase64[i] = {
+                      photo: this.fieldsData[i].photo ? this.fieldsData[i].photo : '',
+                      photo_type: 'edit'
+                    }
                   }
 
+                  //this.lastIndex = this.checkChangeImage.length;
+
                   console.log('edit image base 64' , this.imageBase64);
                   console.log('edit check change image', this.checkChangeImage);
                   console.log('edit mode url image ' , this.urlImg);
@@ -163,7 +180,6 @@ export class AddInternalServicesComponent implements OnInit {
         name_en: '',
         photo: '',
         link: '',
-        apperance: '',
         status: '1',
         link_type: '',
         link2: ''
@@ -175,7 +191,6 @@ export class AddInternalServicesComponent implements OnInit {
         photo: '',
         photo_type: '',
         link: '',
-        apperance: '',
         status: '1',
         link_type: '',
         link2: '',
@@ -186,22 +201,22 @@ export class AddInternalServicesComponent implements OnInit {
  
   //add more title
   onAddTitle() {
+    
     this.fields = this.addInternalForm.get('fields') as FormArray;
     this.fields.push(this.createItem());
-    console.log(this.imageBase64);
     this.urlImg.push('../../assets/image/avatar.png');
-    console.log(this.urlImg);
     this.checkChangeImage.push(false);
-    if(!this.typeMode){
-      this.imageBase64.push({
-        photo: '',
-        photo_type: '',
-      });
-    }
-   
+
+    //create mode
+    this.imageBase64.push({
+      photo: '',
+      photo_type: '',
+    });
+ 
     this.checkAdd = true;
     console.log('image base 64',this.imageBase64);
     console.log('check change image', this.checkChangeImage);
+    console.log('url images', this.urlImg);
   }
 
   //remove from array form
@@ -209,54 +224,60 @@ export class AddInternalServicesComponent implements OnInit {
     this.fields = this.addInternalForm.get('fields') as FormArray;
     this.fields.removeAt(index);
     this.imageBase64.splice(index,1);
-    console.log(this.imageBase64);
     this.urlImg.splice(index, 1);
-    console.log(this.urlImg);
+    this.checkChangeImage.splice(index, 1);
+    console.log('image base 64',this.imageBase64);
+    console.log('check change image', this.checkChangeImage);
+    console.log('url images', this.urlImg);
   }
 
 
-
+//upload image 
   onFileChanges(event,i) {
     console.log(event);
-    var id_field = '';
-    
-    if(this.typeMode) {
-      
+    alert(i);
+    this.checkChangeImage[i] = true;
+    var id_field = ''; //to get id of field from fields 
+    if(this.typeMode) {  
+      //edit mode we have two case if change photo or add new item
       if(!this.checkAdd) {
         id_field = this.fieldsData[i].id;
-      }
-
-      this.editObjectPhoto['index'] = i;
-
-      const dataUploadEdit = {
-        field_id : id_field,
-        photo: event[0].base64,
-        photo_type: event[0].type.split('/')[1].toLowerCase(),
-      };
-
-      if(dataUploadEdit.photo_type != 'png') {
-
-        if(dataUploadEdit.photo_type != 'gif') {
-          this.toastr.warning('الصوره بصيغه png أو gif');
+         //the data of photo user changed it 
+        const dataUploadEdit = {
+          field_id : id_field,
+          photo: event[0].base64,
+          photo_type: event[0].type.split('/')[1].toLowerCase(),
+        };
+
+        //to check validate type of photo and send it to backend
+        if(dataUploadEdit.photo_type != 'png') {
+          if(dataUploadEdit.photo_type != 'gif') {
+            this.toastr.warning('الصوره بصيغه png أو gif');
+          }
+        } else {
+          //send photo change request
+          this.http.post(this.authSer.pathApi + '/upload_internal_service_field' , dataUploadEdit ).subscribe(
+            (responce) => {
+              console.log(responce['photo']);
+            },
+            (error) => {
+              console.log(error);
+            }
+          )
         }
-
       } else {
-
-        this.http.post(this.authSer.pathApi + '/upload_internal_service_field' , dataUploadEdit ).subscribe(
-          (responce) => {
-            console.log(responce['photo']);
-            this.editObjectPhoto.push({
-              index: i,
-              photo: responce['photo'],
-            });
-            console.log('oooooooooooooooooooooooooooo',this.editObjectPhoto);
-          },
-          (error) => {
-            console.log(error);
-          }
-        )
+          //to collect all image base64 of photo upload in craete case
+          this.photoType = event[0].type.split('/');
+          this.imageBase64[i]={
+            photo : event[0].base64,
+            photo_type: this.photoType[1].toLowerCase(),
+          };
+          this.checkChangeImage[i] = true;
+          console.log(' cheeck change iamge' , this.checkChangeImage);
+          console.log('base 64 images',this.imageBase64);
       }
     } else {
+      //to collect all image base64 of photo upload in craete case
       this.photoType = event[0].type.split('/');
       this.imageBase64[i]={
         photo : event[0].base64,
@@ -266,7 +287,6 @@ export class AddInternalServicesComponent implements OnInit {
       console.log(' cheeck change iamge' , this.checkChangeImage);
       console.log('base 64 images',this.imageBase64);
     }
-    
   }
 
   //to upload url to view
@@ -276,20 +296,21 @@ export class AddInternalServicesComponent implements OnInit {
     reader.readAsDataURL(event.target.files[0]); // read file as data url
     reader.onload = (event) => { // called once readAsDataURL is completed
       this.urlImg[i] = event.target['result'];
-      console.log(this.urlImg[i]);
+      console.log('url images' , this.urlImg[i]);
     }
   }
  }
 
+ //to show link internal or external depend on value of radio button
  showCahngeRadio(type,index) {
   this.showLink = type;
   const fieldsValue = this.addInternalForm.get('fields')
   if(type == 'internal') {
-    //console.log(this.addInternalForm.get('fields')['controls'][index]['controls'].link = null);
-    //this.addInternalForm.get('fields')['controls'][index]['controls'].link = null
+    console.log(this.addInternalForm.get('fields')['controls'][index]['controls'].link.value = null);
+    this.addInternalForm.get('fields')['controls'][index]['controls'].link.value = null
   } else if (type == 'external') {
-    //console.log(this.addInternalForm.get('fields')['controls'][index]['controls'].link2 = null);
-    //this.addInternalForm.get('fields')['controls'][index]['controls'].link2 = null
+    console.log(this.addInternalForm.get('fields')['controls'][index]['controls'].link2.value = null);
+    this.addInternalForm.get('fields')['controls'][index]['controls'].link2.value = null
   }
  }
 
@@ -310,14 +331,17 @@ export class AddInternalServicesComponent implements OnInit {
     if(this.typeMode) {
 
       //save edit
+     
 
-      for(let i = 0; i< formInternalData['fields'].length; i++) {
-        for(let j = 0; j < this.editObjectPhoto.length; j++) {
-          if(this.editObjectPhoto[j].index == formInternalData['fields'][i].id) {
-            formInternalData['fields'][i].photo = this.editObjectPhoto[j].photo;
-          }
+      for(let i = 0; i < this.imageBase64.length; i++) {
+        if(this.imageBase64[i].photo_type == 'edit') {
+          formInternalData['fields'][i].photo = this.imageBase64[i].photo;
+        } else {
+          formInternalData['fields'][i].photo = this.imageBase64[i].photo;
+          formInternalData['fields'][i].photo_type = this.imageBase64[i].photo_type;
         }
       }
+      
 
       console.log(formInternalData);
 
@@ -334,7 +358,7 @@ export class AddInternalServicesComponent implements OnInit {
           this.checkSaveClick = false;
         } else {
           this.checkValidateField = false;
-          this.checkSaveClick = false;
+          this.checkSaveClick = true;
         }
       }
 
@@ -346,6 +370,7 @@ export class AddInternalServicesComponent implements OnInit {
             console.log(responce);
             this.toastr.success('تم التعديل بنجاح ');
             this.checkSaveClick = false;
+            this.location.back();
           }, (error) => {
             console.log(error);
             this.toastr.error('فشل التعديل !');
@@ -357,6 +382,9 @@ export class AddInternalServicesComponent implements OnInit {
 
     } else {
       //save create 
+
+
+      //for loop to add photo & photo type in form data 
       for(let i = 0; i< formInternalData['fields'].length; i++) {
         for(let j = 0; j < this.imageBase64.length; j++) {
           formInternalData['fields'][i].photo = this.imageBase64[i].photo;
@@ -364,13 +392,14 @@ export class AddInternalServicesComponent implements OnInit {
         }
       }
   
-      console.log('image base 64', this.imageBase64);
-      console.log(formInternalData);
+      console.log('form data',formInternalData);
   
+      //for loop for validation of fields 
+
       for(let i=0; i< formInternalData['fields'].length; i++) {
         if(formInternalData['fields'][i].photo == '') {
           this.checkValidateField = true;
-          this.checkSaveClick = false;
+          this.checkSaveClick = false; 
           this.toastr.warning('من فضلك  قم بإدخال صوره العنصر ' + ' ' + (i + 1) );
         } else if(formInternalData['fields'][i].photo_type != 'png') {
           if(formInternalData['fields'][i].photo_type != 'gif') {
@@ -378,14 +407,14 @@ export class AddInternalServicesComponent implements OnInit {
           }
           this.checkValidateField = true;
           this.checkSaveClick = false;
-        }else if(formInternalData['fields'][i].name == '' || formInternalData['fields'][i].apperance == '' || formInternalData['fields'][i].status == '') {
+        }else if(formInternalData['fields'][i].name == ''  || formInternalData['fields'][i].status == '') {
           this.toastr.warning('من فضلك قم بإكمال بيانات العنصر ' + (i + 1) );
           this.checkValidateField = true;
           this.checkSaveClick = false;
         }
         else {
           console.log('rightImage');
-          this.checkSaveClick = false;
+          this.checkSaveClick = true;
           this.checkValidateField = false;
         }
       }

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

@@ -247,7 +247,7 @@ export class ServiceItemComponent implements OnInit {
   }
 
   goToHome() {
-    this.router.navigate(['dashboard/' + this.userId]);
+    this.router.navigate(['services/' + this.userId]);
   }
   
 }

src/app/login/login.component.html

@@ -17,8 +17,8 @@
                         <input type="password" id="password" class="form-control" placeholder="كلمه المرور"  name="password" ngModel required #password="ngModel"/>
                         <span class="help-block" *ngIf="!password.valid && password.touched">من فضلك ، قم بادخال كود صحيح</span>
                     </div>
-                    <div class="custom-control custom-checkbox">
-                      <a [routerLink]="['/signup']" class="signUp-w" style="float: left; margin-left:-10px">إنشاء حساب جديد</a>
+                    <div class="form-group">
+                      <a [routerLink]="['/signup']" class="signUp-w" style="float: left; margin-left:10px">إنشاء حساب جديد</a>
                       <a routerLink="/page-not-found" class="forgetPassword-w" style="margin-right: 10px">نسيت كلمه المرور ؟</a>
                     </div>
                     <button class="btn btn-success form-control" type="submit" [disabled]="!f.valid">الدخول</button>

src/app/login/login.component.ts

@@ -46,7 +46,7 @@ export class LoginComponent implements OnInit {
         console.log(id);
         this.authSer.setDataUser(responce);
         this.loginFormData.reset();
-        this.router.navigate(['/dashboard/' + id]);
+        this.router.navigate(['/services/' + id]);
       },
       (error) => {
         console.log(error);

src/app/regester/regester.component.css

@@ -25,19 +25,32 @@ select.ng-invalid{
 } */
 
 .imgProfile {
-    width: 200px;
-    height: 200px;
-    border: 1px solid #ccc;
+    width: 100%;
     border-radius: 20px 20px 0 0;
+    border-radius: 50%;
+    border: 1px solid #ccc;
+
 }
 
 .imgContainer {
     width: 200px;
-    height: 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;
@@ -48,7 +61,7 @@ select.ng-invalid{
 	z-index: -1;
 }
 
-.inputfile + label {
+/* .inputfile + label {
     width: 100%;
     font-size: 1.25em;
     font-weight: 700;
@@ -57,7 +70,7 @@ select.ng-invalid{
     display: inline-block;
     border: 1px solid #ccc;
     border-radius: 0 0 20px 20px;
-}
+} */
 
 .inputfile:focus + label,
 .inputfile + label:hover {
@@ -74,6 +87,15 @@ select.ng-invalid{
 	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;

src/app/regester/regester.component.html

@@ -16,6 +16,7 @@
     <div class="container">
         <form [formGroup]="regesterForm" (ngSubmit)="onSubmittedForm()" class="formStyle">
           <div class="row">
+        
             <div class="col-12 col-sm-12 col-md-12 col-lg-12" style="margin-bottom:30px">
               <div class="form-group text-center imgContainer">
                   <img [src]="urlImg" class="imgProfile" height="200"> 
@@ -58,6 +59,7 @@
                 <span class="errorMessage-w" *ngIf="identity_id == 3">أدخل رقم الإقامه مكون من 10 أرقام يبدأ برقم 2 </span>
               </div>
             </div>
+            
             <div class="col-12 col-sm-12 col-md-6 col-lg-4" *ngIf="identity_id == 4">
               <div class="form-group">
                 <label for="identityNumber" style="float:right">رقم الهويه <span class="spanReqired-w">*</span></label>
@@ -118,7 +120,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">
               <div class="form-group">
                 <label for="date_employment_hij" style="float:right">تاريخ التوظيف الهجري <span class="spanReqired-w">*</span></label>
                 <div *ngIf='bindingDateSplit && typeMode'>
@@ -128,7 +130,7 @@
                   <app-higri-date (onDatePicked)="getDate($event)" ></app-higri-date>
                 </div>
               </div>
-            </div>
+            </div> -->
 
             <div class="col-12 col-sm-12 col-md-6 col-lg-4">
               <div class="form-group">

src/app/regester/regester.component.ts

@@ -38,7 +38,7 @@ export class RegesterComponent implements OnInit {
   staffs = [];
   departments = [];
   identities = [];
-  urlImg: string =  '../../assets/image/avatar.png';
+  urlImg: string =  '../../../../assets/image/Group 299.png';
   showDepart: boolean = false;
   showStatus: boolean = false;
   checkChangeImage: boolean = false;

src/app/dashboard/dashboard/dashboard.component.css

@@ -44,7 +44,7 @@
 .mainFooter-w {
     width: 100%;
     height: 288px;
-    background: url('../../../assets/image/footer.png') no-repeat center center;
+    background: url('../../assets/image/footer.png') no-repeat center center;
     background-size: cover;
     margin-top: -13px;
     position: relative;

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

@@ -1,17 +1,17 @@
 import { HttpClient } from '@angular/common/http';
 import { ActivatedRoute, Params, Router } from '@angular/router';
-import { AuthServiceService } from './../../shared/auth-service.service';
+import { AuthServiceService } from '../shared/auth-service.service';
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { UserService } from '../../shared/user.service';
+import { UserService } from '../shared/user.service';
 import { Subscription } from 'rxjs';
 import { NgxSpinnerService } from 'ngx-spinner';
 
 @Component({
-  selector: 'app-dashboard',
-  templateUrl: './dashboard.component.html',
-  styleUrls: ['./dashboard.component.css']
+  selector: 'app-services',
+  templateUrl: './services.component.html',
+  styleUrls: ['./sercices.component.css']
 })
-export class DashboardComponent implements OnInit, OnDestroy {
+export class ServicesComponent implements OnInit, OnDestroy {
 
   idUser: number; //id user
   myInnerHeight = window.innerHeight;

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

@@ -0,0 +1,22 @@
+import { AuthServiceService } from './auth-service.service';
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ExternalPageService {
+  constructor(private http: HttpClient, 
+    private authSer: AuthServiceService) { }
+
+
+  //get header data 
+  getHeader(){
+    return this.http.get(this.authSer.pathApi + '/main_menu_list');
+  }
+
+  //get content data 
+  getContentData() {
+    return this.http.get(this.authSer.pathApi + '/external_page/1');
+  }
+}

src/index.html

@@ -7,6 +7,8 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAxlgymaua-8BszEryfQIOr9PLKrtEqU2I&libraries=places"></script>
+
   <!-- <link href="https://fonts.googleapis.com/css?family=Dosis|Niramit" rel="stylesheet"> -->
   <!-- <link href="https://fonts.googleapis.com/css?family=Cairo" rel="stylesheet"> -->
   <link href="https://fonts.googleapis.com/css?family=Cairo" rel="stylesheet">
@@ -27,6 +29,5 @@
           integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> -->
           <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
           <script src="//unpkg.com/slick-carousel@1.8.1/slick/slick.js"></script>
-
 </body>
 </html>

src/styles.css

@@ -520,7 +520,66 @@ input:-webkit-autofill:active  {
     transform:         rotate(90deg);
   }
 
+  .owl-carousel.owl-loaded {
+    margin: 10px 0;
+  }
+
+
+  .owl-theme .owl-nav {
+    position: absolute !important;
+    width: 100% !important;
+    bottom: 0 !important;
+}
+
+.owl-carousel .owl-nav button.owl-prev {
+  width: 50px;
+  background-color: red;
+  float: right;
+  margin-right: 15px;
+  margin-top: 0;
+  color: #fff;
+}
+
+
+
+.owl-carousel .owl-nav button.owl-prev span {
+  font-size: 30px;
+  font-weight: bold;
+}
+
+.owl-carousel .owl-nav button.owl-next {
+  width: 50px;
+  background-color: red;
+  float: left;
+  margin-left: 15px;
+  margin-top: 0;
+  color: #fff;
+}
+
+.owl-carousel .owl-nav button.owl-next span {
+  font-size: 30px;
+  font-weight: bold;
+}
+
+/* .cal-month-view .cal-day-cell {
+  height: 50px !important;
+}
+
+.cal-month-view .cal-day-cell {
+  height: 50px !important;
+}
+
+.cal-month-view .cal-day-cell {
+  height: 50px !important;
+}
+
+.cal-month-view .cal-days .cal-cell-row {
+  height: 50px;
+}
   
+.cal-month-view .cal-day-cell {
+  height: 50px !important;
+} */
 
   /* .IN-5c1caa55-0e85-4bb1-925b-96b537f99da5-1G9ISYhSF8XoOmdcl0yKDu,
   .IN-5c1caa55-0e85-4bb1-925b-96b537f99da5-1G9ISYhSF8XoOmdcl0yKDu.IN-5c1caa55-0e85-4bb1-925b-96b537f99da5-3uCBSbQNVNf2QjqHe1rfb6 {
@@ -538,129 +597,31 @@ input:-webkit-autofill:active  {
   .inlineBlock _2tga _49ve {
     display: none !important;
   }
-  
-  /* Responsive Design */
-  @media all and (max-width: 240px) {
-    .toast-container .toast.div {
-      padding: 8px 8px 8px 50px;
-      width: 11em;
-    }
-    .toast-container .toast-close-button {
-      right: -0.2em;
-      top: -0.2em;
-    }
-  }
-  @media all and (min-width: 241px) and (max-width: 480px) {
-    .toast-container .toast.div {
-      padding: 8px 8px 8px 50px;
-      width: 18em;
-    }
-    .toast-container .toast-close-button {
-      right: -0.2em;
-      top: -0.2em;
-    }
-  }
-  @media all and (min-width: 481px) and (max-width: 768px) {
-    .toast-container .toast.div {
-      padding: 15px 15px 15px 50px;
-      width: 25em;
-    }
-  }
 
-
-  /* .active{
-    background-color: purple !important;
-    color: #252525 !important;
-  } */
-
-  /* .pagination-previous span,
-  .pagination-next span{
-    background-color: #a6a6a8;
-    color: #fff;
-    display: inline-block;
-    text-align: center;
-    padding: 5px;
-    border-radius: 5px;
-  } */
-
-
-.ngx-pagination {
-  display: flex ;
-  justify-content: center ;
-  text-align: center;
-	    margin-top: 10px;
-}
-
-
-  .ngx-pagination li{
-    background-color: #fff;
-    border: 2px solid #cab599;
+  .custom-select {
+    width: 141px;
+    padding: 0 30px !important;
     margin: 0 5px;
   }
 
-  .ngx-pagination .current {
-    background-color: #ccc !important;
-    border: 2px solid #888;
-    color: #fff;
-  }
-
-  .editRowPadding-w {
-    padding-left: 5px !important;
-    padding-right: 5px !important;
-  }
-  .containerPaddingEdit-w {
-    padding-right: 5px;
-  }
-  .carousel-control-prev,
-  .carousel-control-next {
-    display: none !important;
-  }
-
-  .rightW {
-    margin:  20px 10px;
-    float: right;
-  }
-
-
+  .ngb-dp-month:first-child .ngb-dp-week {
+    padding-left: 4.25rem;
+    /* width: 100%; */
+}
 
-  @media(max-width:767px){
-    .butttonCreate {
-      width: 130px;
-    }
-    
-    .butttonDelete {
-      width: 110px;
-    }
-    .marginFontAowsome-w {
-      margin: 0 10px;
-    }
-    .headingText-w{
-      font-size: 14px;
-    }
+.ngb-dp-month:last-child .ngb-dp-week {
+    padding-right: 4.25rem;
+}
 
-    .validateImageMsg {
-      left: 30%;
-    }
-    .containerPaddingEdit-w {
-      padding-right: 15px;
-    }
-  }
+.ngb-dp-day, .ngb-dp-week-number, .ngb-dp-weekday {
+  width: 3rem !important;
+}
 
-  @media(min-width:767px) and (max-width: 991px){
-    .butttonCreate {
-      width: 100px;
-      font-size: 12px;
-    }
-    
-    .butttonDelete {
-      width: 100px;
-      font-size: 12px;
-    }
+.btn-light {
+  width: 3rem !important;
+}
+  
 
-    .marginFontAowsome-w {
-      margin: 0 10px;
-    }
-  }
 
 
 
@@ -732,7 +693,7 @@ border: 1px solid #BDA380 !important;
 text-shadow: 0px 0px 0px #fff0 !important;
 font-size: 13px !important;
 }
-.ar[_ngcontent-c6], .en[_ngcontent-c6]{
+.ar, .en{
 height: 35px !important;
 width: 55px !important;
 text-align: center;
@@ -842,3 +803,118 @@ height: 7px !important;
 @media screen and (max-width: 480px) {}
 
   /* Eng Magdy Style */
+
+
+
+    /* Responsive Design */
+    @media all and (max-width: 240px) {
+      .toast-container .toast.div {
+        padding: 8px 8px 8px 50px;
+        width: 11em;
+      }
+      .toast-container .toast-close-button {
+        right: -0.2em;
+        top: -0.2em;
+      }
+    }
+    @media all and (min-width: 241px) and (max-width: 480px) {
+      .toast-container .toast.div {
+        padding: 8px 8px 8px 50px;
+        width: 18em;
+      }
+      .toast-container .toast-close-button {
+        right: -0.2em;
+        top: -0.2em;
+      }
+    }
+    @media all and (min-width: 481px) and (max-width: 768px) {
+      .toast-container .toast.div {
+        padding: 15px 15px 15px 50px;
+        width: 25em;
+      }
+    }
+  
+  
+   
+  
+  .ngx-pagination {
+    display: flex ;
+    justify-content: center ;
+    text-align: center;
+        margin-top: 10px;
+  }
+  
+  
+    .ngx-pagination li{
+      background-color: #fff;
+      border: 2px solid #cab599;
+      margin: 0 5px;
+    }
+  
+    .ngx-pagination .current {
+      background-color: #ccc !important;
+      border: 2px solid #888;
+      color: #fff;
+    }
+  
+    .editRowPadding-w {
+      padding-left: 5px !important;
+      padding-right: 5px !important;
+    }
+    .containerPaddingEdit-w {
+      padding-right: 5px;
+    }
+    .carousel-control-prev,
+    .carousel-control-next {
+      display: none !important;
+    }
+  
+    .rightW {
+      margin:  20px 10px;
+      float: right;
+    }
+  
+  
+  
+    @media(max-width:767px){
+      .butttonCreate {
+        width: 130px;
+      }
+      
+      .butttonDelete {
+        width: 110px;
+      }
+      .marginFontAowsome-w {
+        margin: 0 10px;
+      }
+      .headingText-w{
+        font-size: 14px;
+      }
+  
+      .validateImageMsg {
+        left: 30%;
+      }
+      .containerPaddingEdit-w {
+        padding-right: 15px;
+      }
+      .ar,.en {
+        width: 35px !important;
+        margin: 4px 5px !important;
+      }
+    }
+  
+    @media(min-width:767px) and (max-width: 991px){
+      .butttonCreate {
+        width: 100px;
+        font-size: 12px;
+      }
+      
+      .butttonDelete {
+        width: 100px;
+        font-size: 12px;
+      }
+  
+      .marginFontAowsome-w {
+        margin: 0 10px;
+      }
+    }