\n
\n \n
\n \n
\n \n {{'ANPEnChiffre.Titre' | translate}}
\n{{Bloc1Title}}
\n{{Bloc1Description}}
\n\n
\n \n \n
\n \n \n
\n \n
\n \n
\n {{Table1Name}}
\n\n \n \n
\n
\n | {{data.titre}} | \n
|---|
| \n {{data.valeur}} \n {{data.unit}} \n | \n
\n {{data}}\n
\n\n
\n \n
\n {{Bloc2Title}}
\n\n
\n \n
\n \n \n \n \n
\n\n
\n | {{Table2Data[0].Titre}} | \n{{Table2Data[0].Valeur}} | \n
|---|---|
| 0\" scope=\"row\"> | \n0\">{{data.Valeur}} | \n
| {{data.Titre}} | \n{{data.Valeur}} | \n
\n
\n \n
\n {{Bloc3Title}}
\n\n
\n \n
\n \n
\n \n
\n \n
\n {{Bloc4Title}}
\n{{Bloc4Description}}
\n\n
\n \n \n \n
\n
\n {{Table3Name}}
\n| {{Table3Data[0].Titre}} | \n{{Table3Data[0].Valeur}} | \n
|---|---|
| 0\" scope=\"row\"> | \n0\">{{data.Valeur}} | \n
| {{data.Titre}} | \n{{data.Valeur}} | \n
\n
\n \n \n \n
\n
\n {{Table4Name}}
\n| {{Table4Data[0].Titre}} | \n{{Table4Data[0].Valeur}} | \n
|---|---|
| 0\" scope=\"row\"> | \n0\">{{data.Valeur}} | \n
\n \n \n
\n
\n {{Table5Name}}
\n| {{Table5Data[0].Titre}} | \n{{Table5Data[0].Valeur}} | \n
|---|---|
| 0\" scope=\"row\"> | \n0\">{{data.Valeur}} | \n
\n \n \n
\n
\n {{Table6Name}}
\n| {{Table6Data[0].Titre}} | \n{{Table6Data[0].Valeur}} | \n
|---|---|
| 0\" scope=\"row\"> | \n0\">{{data.Valeur}} | \n
![](https://img.youtube.com/vi/\"+gallery[index].youtube+\"/default.jpg)
\")\n \n }\n // $('ol.indicator').appendTo( \".newol\" );\n }\n });\n \n });\n });\n });\n\n }\n // ngAfterViewInit() {\n // document.getElementById('links').onclick = (event: Event) => {\n // event= event || window.event\n // var target = event.target || event.srcElement\n // var link = target['src'] ? target['parentNode'] : target\n // var options = { index: link, event: event }\n // var links = document.getElementById('links').getElementsByTagName('a')\n // blueimp.Gallery(links, options)\n // }\n // }\n setToTrue() {\n this.topImage = true\n this.service.getVideoTheque(this.outputLg.url).subscribe(datas => {\n const gallery = [];\n datas['value'].forEach(element => {\n const obj = {\n title: element.Title,\n type: 'text/html',\n href: element.Url,\n youtube: element.YoutubeId,\n }\n gallery.push(obj);\n });\n blueimp.Gallery(gallery, {\n container: '#blueimp-gallery-carousel',\n carousel: true,\n onopened : function(){\n let li = $('ol.indicator li')\n this.pause();\n for (let index = 0; index < li.length; index++) {\n const element = $(li[index]);\n element.html(\"
\"\n } else if (item === 'activite.peche') {\n activites += \"
\"\n } else if (item === 'activite.Plaisance') {\n activites += \"
\"\n }\n });\n const titre = this.translate.instant(element.CodePort);\n const region = this.translate.instant(element.CodeRegion);\n this.maxNumPort < element.OrdreMap ? element.OrdreMap : this.maxNumPort;\n if (element.GInfo !== null && element.GInfo !== undefined && element.GInfo !== '') {\n const obj = {\n gInfo: this.returnJson(element.GInfo),\n circleInfo: this.returnJson(element.CircleInfo),\n pathInfo: this.returnJson(element.PathInfo),\n codeActivitePortuaire: element.CodeActivitePortuaire,\n CodePort: element.CodePort,\n textInfo: this.returnJson(element.TextInfo),\n CodeRegion: element.CodeRegion,\n activite: activites,\n pathPort: element.CodePort.toLowerCase().split('ports.port')[1],\n portImage: imgPort,\n toolTip: this.returnTitlePort(element),\n TitleTrans: titre,\n regionTrans: region,\n ordrePort: element.OrdreMap\n }\n if (this.regions.indexOf(element.CodeRegion) === -1) {\n this.regions.push(element.CodeRegion);\n }\n this.ports.push(obj);\n }\n })\n\n\n\n\n\n\n });\n });\n }\n ngOnDestroy(): void {\n $('[data-toggle=\"tooltip\"]').tooltip('dispose');\n }\n getPortDetail(port) {\n\n\n this.currentPort = port.ordrePort;\n this.portLoaded = false;\n this.detailedPort = {\n port: port,\n mvmEntre: [],\n mvSortie: [],\n links: [],\n chantiers: []\n }\n forkJoin([this.homeService.getPortSections(), this.homeService.getChantiersInfrastructures(this.currentUrl)\n , this.homeService.getMvmNaviresArrivees(), this.homeService.getMvmNaviresDeparts()]).subscribe(datas => {\n const menuPorts = datas[0]['value']\n const mvmEntre = datas[2];\n const mvmSortie = datas[3];\n\n const requetes = [];\n menuPorts.forEach(section => {\n requetes.push(this.homeService.getAllServiceDataId(section.ListeReference, this.currentlg));\n });\n forkJoin(requetes).subscribe(dataPorts => {\n\n const pathPort = port.CodePort.toLowerCase().split('ports.port')[1];\n const urlPortStatic = '/port/' + pathPort + '/page'\n const mvArrive = [];\n const mvSortie = [];\n const liens = [];\n const gchantiers = [];\n // Grand Chantiers\n datas[1]['value'].forEach(element => {\n if (element.CodePort === port.CodePort) {\n const obj = {\n Titre: element.Title ? element.Title : \"\",\n Port: element.CodePort ? element.CodePort : \"\",\n Id: element.Id ? element.Id : \"\",\n PortImage: element.LienImageProjet !== '' && element.LienImageProjet !== null ? this.global._basedUrl + element.LienImageProjet : this.currentlg + 'assets/media/images/img-01.png'\n }\n gchantiers.push(obj);\n }\n });\n // lien Ports \n for (let i = 0; i < dataPorts.length; i++) {\n if (dataPorts[i]['value'].length > 0) {\n const obj = {\n 'Title': this.currentlg === 'fr' ? menuPorts[i].Title : this.currentlg === 'ar' ? menuPorts[i].TitleAR : menuPorts[i].TitleEN,\n 'Url': [urlPortStatic, menuPorts[i].ApplicationUrl]\n }\n liens.push(obj);\n }\n }\n // Liste Entree\n //@ts-ignore\n mvmEntre.forEach(element => {\n if (element.pORTField.toLowerCase() === port.textInfo.id.toLowerCase()) {\n mvArrive.push(element);\n }\n });\n //@ts-ignore\n mvmSortie.forEach(element => {\n if (element.pORTField.toLowerCase() === port.textInfo.id.toLowerCase()) {\n mvSortie.push(element);\n }\n });\n this.detailedPort.mvmEntre = mvArrive;\n this.detailedPort.mvSortie = mvSortie;\n this.detailedPort.links = liens;\n this.detailedPort.chantiers = gchantiers;\n\n this.portLoaded = true;\n $('.modal-body .accordion').on('shown.bs.collapse', function () {\n if ($('.modal-body .accordion .slick-list').width() == 0) {\n\n setTimeout(() => {\n $('.card-slider').slick('unslick');\n $('.card-slider').slick({\n infinite: true,\n slidesToShow: 1,\n slidesToScroll: 1,\n dots: false,\n });\n }, 1000)\n\n }\n })\n document.getElementById('collapseInit').click();\n\n });\n })\n\n }\n nextPort(suivant) {\n let opt = 0\n if (suivant) {\n opt = this.currentPort === this.maxNumPort ? this.currentPort = 1 : this.currentPort + 1\n } else {\n opt = this.currentPort === 1 ? this.currentPort = this.maxNumPort : this.currentPort - 1\n }\n let port;\n this.ports.forEach(element => {\n\n if (element.ordrePort === opt) {\n port = element;\n }\n });\n this.getPortDetail(port);\n }\n workSlick(chantiers) {\n\n if (chantiers.length > 0) {\n try {\n this.slick !== null ? this.slick = $('.card-slider').slick('unslick') : '';\n } catch {\n\n }\n this.slick = $('.card-slider').slick({\n infinite: true,\n slidesToShow: 1,\n slidesToScroll: 1,\n dots: false,\n });\n }\n\n }\n navigateToServicePort(item) {\n ;\n document.getElementById('btnCloseModal').click();\n this.router.navigate(item);\n }\n navigateChantier(item) {\n\n document.getElementById('btnCloseModal').click();\n this.router.navigate(['/grands-chantiers/chantiers-infrastructures', item.Id]);\n }\n convertTime(t) {\n return new Date(+t.split(\"(\")[1].split(\")\")[0].split(\"+\")[0]).toLocaleTimeString().substring(0, 5)\n }\n returnTitlePort(portItem) {\n\n const imgPort = portItem.AttachmentFiles.length > 0 ? this.global._basedUrl + portItem.AttachmentFiles[0].ServerRelativeUrl : \"assets/media/images/port_casa_s.jpg\"\n let activites = '';\n portItem.CodeActivitePortuaire.forEach(element => {\n if (element === 'activite.passagers') {\n activites += \"![\"\"](\"assets/media/images/logo-footer.png\"){kind=logo}
\n ![\"\"](\"assets/media/images/facebook-icon.svg\"){kind=icon}
![\"\"](\"assets/media/images/LinkedIn_icon_circle.svg\"){kind=icon}
![\"\"](\"assets/media/images/twitter-icon.svg\"){kind=icon}
![\"\"](\"assets/media/images/youtube-icon.svg\"){kind=icon}
![\"\"](\"assets/media/images/twitter-icon.svg\"\n){kind=icon}
![](\"+this.currentlg+\"/assets/media/images/passager.png)
\"\n } else if(item === 'activite.peche') {\n activites +=\"![](\"+this.currentlg+\"/assets/media/images/p-che.png)
\"\n } else if(item === 'activite.Plaisance') {\n activites +=\"![](\"+this.currentlg+\"/assets/media/images/commerce.png)
\"\n }\n });\n const titre = this.translate.instant(element.CodePort);\n const region = this.translate.instant(element.CodeRegion);\n if (element.GInfo !== null && element.GInfo !== undefined && element.GInfo !== '') {\n const obj = {\n gInfo:this.returnJson(element.GInfo),\n circleInfo:this.returnJson(element.CircleInfo),\n pathInfo:this.returnJson(element.PathInfo),\n codeActivitePortuaire: element.CodeActivitePortuaire,\n CodePort: element.CodePort,\n textInfo:this.returnJson(element.TextInfo),\n CodeRegion: element.CodeRegion,\n activite: activites,\n pathPort: element.CodePort.toLowerCase().split('ports.port')[1],\n portImage: imgPort,\n toolTip : this.returnTitlePort(element), \n TitleTrans : titre,\n regionTrans: region,\n ordrePort: element.OrdreMap\n }\n this.ports.push(obj);\n }\n if(this.regions.indexOf(element.CodeRegion) === -1) {\n this.regions.push(element.CodeRegion);\n }\n\n });\n });\n this.service.getDescription('AccueilVideo',lg.url).subscribe(datas => {\n if (datas['value'].length > 0) {\n \n this.acceuilVideo = datas['value'][0].Contenu;\n \n }\n });\n this.service.getNotifications(lg.url).subscribe(datas => {\n //if(this.converteDate(a.AcualiteDate)) \n const Today = new Date(); \n if (datas['value'].length > 0) { \n datas['value'].forEach(element => {\n if(this.IsTodaybetween(element.DatePublication,element.DateFinPublication,Today))\n {\n this.popup.title = element.Title;\n this.popup.content = this.global._baseUrlStatique+element.File.ServerRelativeUrl; \n this.popup.url = element.Url ;\n $('#popupnotification').modal('show');\n }\n }); \n }\n });\n this.service.getDescription('Accueil0', lg.url).subscribe(datas => {\n if (datas['value'].length > 0) {\n this.acceuil0.title = datas['value'][0].Title;\n this.acceuil0.content = datas['value'][0].Contenu;\n this.acceuil0.variables = datas['value'][0].Variables;\n }\n });\n this.service.getDescription('Accueil21', lg.url).subscribe(datas => {\n if (datas['value'].length > 0) {\n this.acceuil21.title = datas['value'][0].Title;\n this.acceuil21.content = datas['value'][0].Contenu;\n this.acceuil21.variables = datas['value'][0].Variables;\n }\n });\n this.service.getDescription('Accueil1', lg.url).subscribe(datas => {\n if (datas['value'].length > 0) {\n this.acceuil1.title = datas['value'][0].Title;\n this.acceuil1.content = datas['value'][0].Contenu;\n this.acceuil1.variables = datas['value'][0].Variables;\n }\n });\n this.service.getDescription('Accueil2', lg.url).subscribe(datas => {\n if (datas['value'].length > 0) {\n this.acceuil2.title = datas['value'][0].Title;\n this.acceuil2.content = datas['value'][0].Contenu;\n }\n });\n this.service.getDescription('Accueil3', lg.url).subscribe(datas => {\n if (datas['value'].length > 0) {\n this.acceuil3.title = datas['value'][0].Title;\n this.acceuil3.content = datas['value'][0].Contenu;\n this.acceuil3.variables = datas['value'][0].Variables;\n }\n });\n this.service.getDescription('Accueil4', lg.url).subscribe(datas => {\n if (datas['value'].length > 0) {\n this.acceuil4.title = datas['value'][0].Title;\n this.acceuil4.content = datas['value'][0].Contenu;\n this.acceuil4.variables = datas['value'][0].Variables;\n }\n });\n this.service.getDescription('Accueil5', lg.url).subscribe(datas => {\n if (datas['value'].length > 0) {\n this.acceuil5.title = datas['value'][0].Title;\n this.acceuil5.content = datas['value'][0].Contenu;\n this.acceuil5.variables = datas['value'][0].Variables;\n }\n });\n this.dataActualite = [];\n this.offres = [];\n if (this.slick != null) {\n this.slick.slick('destroy');\n }\n forkJoin({\n requestTwo: this.publicationService.getActualite(lg.url, true),\n requestOne: this.publicationService.getOffres(lg.url, true)\n }).subscribe(({ requestOne, requestTwo }) => {\n this.dataActualite = requestTwo[\"value\"];\n this.offres = requestOne[\"value\"];\n setTimeout(() => this.slickContent(lg), 100);\n });\n });\n this.service.getMvmNaviresDeparts().subscribe(data => {\n this.mvmnvdeparts = data;\n })\n this.service.getMvmNaviresArrivees().subscribe(data => {\n this.mvmnvArrivees = data;\n })\n }\n ngOnDestroy(): void {\n $('[data-toggle=\"tooltip\"]').tooltip('dispose');\n }\n nextPort(suivant) {\n let opt = 0\n if(suivant) {\n opt = this.currentPort === this.maxNumPort ? this.currentPort = 1 : this.currentPort +1\n } else {\n opt = this.currentPort === 1 ? this.currentPort = this.maxNumPort : this.currentPort - 1 \n }\n let port;\n this.ports.forEach(element => {\n \n if(element.ordrePort === opt) {\n port = element;\n }\n });\n this.getPortDetail(port);\n }\n getPortDetail(port) {\n\n \n this.currentPort = port.ordrePort;\n this.portLoaded = false;\n this.detailedPort = {\n port: port,\n mvmEntre: [],\n mvSortie : [],\n links: [],\n chantiers: []\n }\n forkJoin([this.service.getPortSections(), this.service.getChantiersInfrastructures(this.currentUrl)\n , this.service.getMvmNaviresArrivees(),this.service.getMvmNaviresDeparts()]).subscribe(datas => {\n const menuPorts = datas[0]['value']\n const mvmEntre =datas[2];\n const mvmSortie = datas[3];\n \n const requetes = [];\n menuPorts.forEach(section => {\n requetes.push(this.service.getAllServiceDataId(section.ListeReference,this.currentlg));\n });\n forkJoin(requetes).subscribe(dataPorts => {\n \n const pathPort = port.CodePort.toLowerCase().split('ports.port')[1];\n const urlPortStatic = '/services/port/' + pathPort +'/page'\n const mvArrive = [];\n const mvSortie = [];\n const liens = [];\n const gchantiers = [];\n // Grand Chantiers\n datas[1]['value'].forEach(element => {\n if(element.CodePort === port.CodePort) {\n const obj = {\n Titre: element.Title ? element.Title : \"\",\n Port: element.CodePort ? element.CodePort : \"\",\n Id: element.Id ? element.Id : \"\",\n PortImage: element.LienImageProjet !== '' && element.LienImageProjet !== null ? this.global._basedUrl + element.LienImageProjet : this.currentlg+'assets/media/images/img-01.png'\n }\n gchantiers.push(obj);\n }\n });\n // lien Ports \n for(let i=0 ; i < dataPorts.length ; i++) {\n if(dataPorts[i]['value'].length > 0) {\n const obj = {\n 'Title': this.currentlg === 'fr' ? menuPorts[i].Title : this.currentlg ==='ar' ? menuPorts[i].TitleAR : menuPorts[i].TitleEN,\n 'Url': [urlPortStatic,menuPorts[i].ApplicationUrl ]\n }\n liens.push(obj);\n }\n }\n // Liste Entree\n //@ts-ignore\n mvmEntre.forEach(element => {\n if(element.pORTField.toLowerCase()=== port.textInfo.id.toLowerCase() ) {\n mvArrive.push(element);\n }\n });\n //@ts-ignore\n mvmSortie.forEach(element => {\n if(element.pORTField.toLowerCase()=== port.textInfo.id.toLowerCase() ) {\n mvSortie.push(element);\n }\n });\n this.detailedPort.mvmEntre =mvArrive;\n this.detailedPort.mvSortie =mvSortie;\n this.detailedPort.links =liens;\n this.detailedPort.chantiers =gchantiers;\n \n this.portLoaded = true;\n $('.modal-body .accordion').on('shown.bs.collapse', function () {\n if ($('.modal-body .accordion .slick-list').width() == 0) {\n \n setTimeout(() => {\n $('.card-slider').slick('unslick');\n $('.card-slider').slick({\n infinite: true,\n slidesToShow: 1,\n slidesToScroll: 1,\n dots: false,\n }); \n }, 1000)\n \n }\n })\n document.getElementById('collapseInit').click();\n \n });\n })\n \n } \n workSlick(chantiers) {\n \n if(chantiers.length > 0) {\n try {\n this.slick !== null ? this.slick = $('.card-slider').slick('unslick') : '';\n } catch {\n\n }\n this.slick = $('.card-slider').slick({\n infinite: true,\n slidesToShow: 1,\n slidesToScroll: 1,\n dots: false,\n });\n }\n \n }\n\n navigateToServicePort(item){\n ;\n document.getElementById('btnCloseModal').click();\n this.router.navigate(item);\n }\n navigateChantier(item){\n \n document.getElementById('btnCloseModal').click();\n this.router.navigate(['/grands-chantiers/chantiers-infrastructures',item.Id]);\n }\n \n returnTitlePort(portItem) {\n\n const imgPort = portItem.AttachmentFiles.length > 0 ? this.global._basedUrl + portItem.AttachmentFiles[0].ServerRelativeUrl : this.currentlg+\"/assets/media/images/port_casa_s.jpg\"\n let activites = '';\n portItem.CodeActivitePortuaire.forEach(element => {\n if(element === 'activite.passagers') {\n activites +=\"![\"\"](\"assets/media/images/police.svg\")
\n ![\"\"](\"assets/media/images/teamwork.svg\")
\n ![\"\"](\"assets/media/images/dev-portuaire.svg\")
\n ![\"\"](\"assets/media/images/securite.svg\")
\n ![\"\"](\"assets/media/images/slider-image.png\")
\n ![\"\"](\"assets/media/images/slider-image2.png\")
\n ![\"\"](\"assets/media/images/googleplay.png\")
\n ![](\"assets/media/images/app-smartgate.png\"alt=\"\")
\n