diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 86700d5..d63d7a2 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -17,6 +17,10 @@ const routes: Routes = [ path: 'contact-us', loadChildren: () => import('./contact/contact.module').then(m => m.ContactModule) }, + { + path: 'get-started', + loadChildren: () => import('./get-started/get-started.module').then(m => m.GetStartedModule) + }, { path: 'my-dashboards', loadChildren: () => import('./my-stakeholders/my-stakeholders.module').then(m => m.MyStakeholdersModule)}, diff --git a/src/app/get-started/get-started-routing.module.ts b/src/app/get-started/get-started-routing.module.ts new file mode 100644 index 0000000..945f794 --- /dev/null +++ b/src/app/get-started/get-started-routing.module.ts @@ -0,0 +1,13 @@ +import {NgModule} from '@angular/core'; +import {RouterModule} from '@angular/router'; +import {GetStartedComponent} from './get-started.component'; +import {PreviousRouteRecorder} from "../openaireLibrary/utils/piwik/previousRouteRecorder.guard"; + +@NgModule({ + imports: [ + RouterModule.forChild([ + { path: '', component: GetStartedComponent, canActivate: [], canDeactivate: [PreviousRouteRecorder]} + ]) + ] +}) +export class GetStartedRoutingModule { } diff --git a/src/app/get-started/get-started.component.html b/src/app/get-started/get-started.component.html new file mode 100644 index 0000000..8e3fb45 --- /dev/null +++ b/src/app/get-started/get-started.component.html @@ -0,0 +1,69 @@ + +
+
+
+ +
+
+
+
+

Lorem ipsum dolor
sit amet, consetetur.

+
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. +
+
+
+
+
+
+
+
+
+ provide +
+
+ contact +
+
+
+
+
+
+
+
+ 1 +
+
+ 2 +
+
+ +
+
+
+
+
+

Provide some information.

+
+ TODO: Contact form + SEND button +
+
+
+
+
+
+

We need a title that
suggest to learn the full
process in the about.

+ + + Learn More + + +
+
+ +
+
+
\ No newline at end of file diff --git a/src/app/get-started/get-started.component.ts b/src/app/get-started/get-started.component.ts new file mode 100644 index 0000000..51b46a7 --- /dev/null +++ b/src/app/get-started/get-started.component.ts @@ -0,0 +1,178 @@ +import {Component, OnInit, ViewChild} from '@angular/core'; +import {ActivatedRoute, Router} from '@angular/router'; +import {EmailService} from "../openaireLibrary/utils/email/email.service"; +import {Email} from "../openaireLibrary/utils/email/email"; +import {EnvProperties} from "../openaireLibrary/utils/properties/env-properties"; +import {Composer} from "../openaireLibrary/utils/email/composer"; +import {Meta, Title} from "@angular/platform-browser"; +import {PiwikService} from "../openaireLibrary/utils/piwik/piwik.service"; +import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class"; +import {HelperService} from "../openaireLibrary/utils/helper/helper.service"; +import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service"; +import {AbstractControl, FormBuilder, FormGroup, ValidatorFn, Validators} from "@angular/forms"; +import {Subscriber} from "rxjs"; +import {properties} from "../../environments/environment"; +import {Breadcrumb} from "../openaireLibrary/utils/breadcrumbs/breadcrumbs.component"; + +@Component({ + selector: 'get-started', + templateUrl: './get-started.component.html', +}) +export class GetStartedComponent implements OnInit { + public url: string = null; + public pageTitle: string = "OpenAIRE - Monitor | Get Started"; + public description: string = "OpenAIRE - Monitor . Any Questions? Contact us to learn more"; + public piwiksub: any; + public showLoading = true; + public errorMessage = ''; + public email: Email; + public properties: EnvProperties = null; + public pageContents = null; + public divContents = null; + public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'Get started'}]; + public organizationTypes: string[] = [ + 'Funding agency', 'University / Research Center', + 'Research Infrastructure', 'Government', + 'Non-profit', 'Industry', 'Other' + ]; + public contactForm: FormGroup; + @ViewChild('AlertModal') modal; + + constructor(private route: ActivatedRoute, + private _router: Router, + private _emailService: EmailService, + private _meta: Meta, + private _title: Title, + private seoService: SEOService, + private _piwikService: PiwikService, + private fb: FormBuilder, + private helper: HelperService) { + } + subscriptions = []; + ngOnDestroy() { + this.subscriptions.forEach(subscription => { + if (subscription instanceof Subscriber) { + subscription.unsubscribe(); + } + }); + } + ngOnInit() { + this.properties = properties; + this.email = {body: '', subject: '', recipients: []}; + if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) { + this.subscriptions.push(this._piwikService.trackView(this.properties, this.pageTitle, this.properties.piwikSiteId).subscribe()); + } + this.url = this.properties.domain + this.properties.baseLink + this._router.url; + this.seoService.createLinkForCanonicalURL(this.url); + this.updateUrl(this.url); + this.updateTitle(this.pageTitle); + this.updateDescription(this.description); + this.reset(); + //this.getDivContents(); + // this.getPageContents(); + this.showLoading = false; + + } + + private getPageContents() { + this.subscriptions.push(this.helper.getPageHelpContents(this.properties, 'monitor', this._router.url).subscribe(contents => { + this.pageContents = contents; + })); + } + + private getDivContents() { + this.subscriptions.push(this.helper.getDivHelpContents(this.properties, 'monitor', this._router.url).subscribe(contents => { + this.divContents = contents; + })); + } + + public send(event) { + HelperFunctions.scroll(); + if(event.valid === true) { + this.sendMail(this.properties.admins); + } else { + this.errorMessage = 'Please fill in all the required fields!'; + } + } + + private validatorType(options: string[]): ValidatorFn { + return (control: AbstractControl): { [key: string]: boolean } | null => { + if (options.filter(type => type === control.value).length === 0) { + return {'type': false}; + } + return null; + } + } + + public reset() { + this.contactForm = this.fb.group( { + name: this.fb.control('', Validators.required), + surname: this.fb.control('', Validators.required), + email: this.fb.control('', [Validators.required, Validators.email]), + job: this.fb.control('', Validators.required), + organization: this.fb.control('', Validators.required), + organizationType: this.fb.control('', [Validators.required, this.validatorType(this.organizationTypes)]), + message: this.fb.control('', Validators.required), + recaptcha: this.fb.control('', Validators.required), + }); + this.errorMessage = ''; + } + + private sendMail(admins: any) { + this.showLoading = true; + this.subscriptions.push(this._emailService.contact(this.properties, + Composer.composeEmailForMonitor(this.contactForm.value, admins), + this.contactForm.value.recaptcha).subscribe( + res => { + this.showLoading = false; + if (res) { + this.reset(); + this.modalOpen(); + } else { + this.errorMessage = 'Email sent failed! Please try again.'; + this.contactForm.get('recaptcha').setValue(''); + } + }, + error => { + this.handleError('Email sent failed! Please try again.', error); + this.showLoading = false; + this.contactForm.get('recaptcha').setValue(''); + } + )); + } + + public modalOpen() { + this.modal.okButton = true; + this.modal.alertTitle = 'Your request has been successfully submitted'; + this.modal.alertMessage = false; + this.modal.cancelButton = false; + this.modal.okButtonLeft = false; + this.modal.okButtonText = 'OK'; + this.modal.open(); + } + + handleError(message: string, error) { + this.errorMessage = message; + console.log('Server responded: ' + error); + this.showLoading = false; + } + + public goToHome() { + this._router.navigate(['/']); + } + + private updateDescription(description: string) { + this._meta.updateTag({content: description}, "name='description'"); + this._meta.updateTag({content: description}, "property='og:description'"); + } + + private updateTitle(title: string) { + var _title = ((title.length > 50) ? title.substring(0, 50) : title); + this._title.setTitle(_title); + this._meta.updateTag({content: _title}, "property='og:title'"); + } + + private updateUrl(url: string) { + this._meta.updateTag({content: url}, "property='og:url'"); + } +} diff --git a/src/app/get-started/get-started.module.ts b/src/app/get-started/get-started.module.ts new file mode 100644 index 0000000..2c10994 --- /dev/null +++ b/src/app/get-started/get-started.module.ts @@ -0,0 +1,37 @@ +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {RouterModule} from '@angular/router'; + +import {GetStartedComponent} from './get-started.component'; +import {GetStartedRoutingModule} from "./get-started-routing.module"; +import {EmailService} from "../openaireLibrary/utils/email/email.service"; +import {RecaptchaModule} from "ng-recaptcha"; +import {AlertModalModule} from "../openaireLibrary/utils/modal/alertModal.module"; +import {PiwikService} from "../openaireLibrary/utils/piwik/piwik.service"; +import {HelperModule} from "../openaireLibrary/utils/helper/helper.module"; +import {IsRouteEnabled} from "../openaireLibrary/error/isRouteEnabled.guard"; +import {Schema2jsonldModule} from "../openaireLibrary/sharedComponents/schema2jsonld/schema2jsonld.module"; +import {SEOServiceModule} from "../openaireLibrary/sharedComponents/SEO/SEOService.module"; +import {ContactUsModule} from "../openaireLibrary/contact-us/contact-us.module"; +import {BreadcrumbsModule} from "../openaireLibrary/utils/breadcrumbs/breadcrumbs.module"; +import {LoadingModule} from "../openaireLibrary/utils/loading/loading.module"; + + +@NgModule({ + imports: [ + GetStartedRoutingModule, CommonModule, RouterModule, + AlertModalModule, RecaptchaModule, HelperModule, + Schema2jsonldModule, SEOServiceModule, ContactUsModule, BreadcrumbsModule, LoadingModule + ], + declarations: [ + GetStartedComponent + ], + providers: [ + EmailService, PiwikService, IsRouteEnabled + ], + exports: [ + GetStartedComponent + ] +}) + +export class GetStartedModule { } diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index 185d3c2..cf0382a 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -13,7 +13,7 @@
research statistics and indicators.
- GET STARTED + GET STARTED
diff --git a/src/assets/monitor-custom.css b/src/assets/monitor-custom.css index 07c3595..bb8a1ca 100644 --- a/src/assets/monitor-custom.css +++ b/src/assets/monitor-custom.css @@ -76,3 +76,7 @@ main { /*.monitorApp .uk-grid-divider>:not(.uk-first-column)::before {*/ /* border-left: 1px solid #DEDEDE;*/ /*}*/ +.floating-number { + font-size: 200px; + transform: translateY(-50%); +} \ No newline at end of file