import React, { Component } from 'react';
// Import child components
import Header from '../header/Header'
import BigTileBlue from '../bigtile/BigTileBlue'
import scheme from './scheme.jpg'
import { Link } from 'react-router-dom'
import Stage from './Stage'
import './HomePage.css'
import Footer from '../footer/Footer'
import GlossaryTeaser from '../glossary/GlossaryTeaser'
import getTranslation from '../../i18n/'
import twentyfour from './icons/twentyfour.svg';
import heatingcooling from './icons/heatingcooling.svg'
import emissions from './icons/emissions.svg'
import savespace from './icons/savespace.svg'
/**
* The homepage of the web portal
*/
class HomePage extends Component {
render() {
let sitecontent = [];
let page = this.props.pages.filter(page => page.url === '/');
if(page.length > 0) {
page = page[0];
this.props.sitecontent.map(content => {
if(content.page_id === page.id) {
sitecontent.push(content)
}
})
}
// Localize the content on the homepage
if(this.props.language.locale !== "en") {
let localized_text;
let localized_title;
this.props.sitecontent.map(content => {
if(this.props.language.locale == 'cs') {
localized_title = "title_cz"
localized_text = "text_cz"
} else {
localized_title = "title_"+this.props.language.locale
localized_text = "text_"+this.props.language.locale
}
content.title_local = content[localized_title]
content.text_local = content[localized_text]
})
}
const localExperts = this.props.localcontacts.filter(expert => expert.language === this.props.language.locale)
return (
<div className="App">
<Header title="GeoPLASMA-CE web-portal" />
<div className="container container-content">
<Stage pilotareas={this.props.pilotareas} />
<div className="container-flex">
<div className="two-third">
{((this.props.fetching.dataFetching.isFetching) && (sitecontent.length === 0)) &&
<div className="default-element default-element-dark profile-teaser">
<div className="loader"></div>
</div>
}
{sitecontent.map(content =>
<div key={content.id} className="default-element">
<div className="default-element-content text-container">
<h2>{(this.props.language.locale === "en" ? content.title : (content.title_local !== '') ? content.title_local : content.title)}</h2>
<span dangerouslySetInnerHTML={{__html: (this.props.language.locale === "en" ? content.text : (content.text_local !== '') ? content.text_local :content.text)}}></span>
</div>
</div>
)}
</div>
<div className="third padding20">
<div className="default-element default-element-dark">
<Link to="/content/whytouse">
<div className="default-element-content text-container why-teaser hover-effect">
<h3> {getTranslation("whytouse.why")}</h3>
<img src={twentyfour} />
<img src={heatingcooling} />
<img src={emissions} />
<img src={savespace} />
</div>
</Link>
</div>
{this.props.pages.filter(page => page.url === 'practice-examples').length > 0 &&
<div className="default-element default-element-dark">
<Link to="/content/practice-examples">
<div className="default-element-content text-container why-teaser hover-effect">
<h3><i className="fas fa-info-circle"></i> {getTranslation("example.teaser")}</h3>
</div>
</Link>
</div>
}
{this.props.pages.filter(page => page.url === 'links').length > 0 &&
<div className="default-element default-element-dark">
<Link to="/content/links">
<div className="default-element-content text-container why-teaser hover-effect">
<h3><i className="fas fa-globe"></i> {getTranslation("links.teaser")}</h3>
</div>
</Link>
</div>
}
<BigTileBlue
title="portal.teaser.expert.title"
icon="book"
description="portal.teaser.expert.description"
link="/experts"
linktitle="portal.teaser.expert.gotolink"
/>
<GlossaryTeaser language={this.props.language} glossary={this.props.glossary} />
<div className="default-element default-element-dark">
<div className="default-element-content text-container">
<h2>{getTranslation("contact.button")}</h2>
<h3>{getTranslation("homepage.project_manager")}:</h3>
<p>
Gregor Goetzl<br />
Geological Survey of Austria
<br />
gregor.goetzl@geologie.ac.at
<br />
+43 1 7125674 336</p>
<h3>{getTranslation("homepage.communication")}:</h3>
<p>
Urša Šolc<br />
Geological Survey of Slovenia
<br />
urska.solc@geo-zs.si
<br />
+386 1 2809 774</p>
<p>
Ruediger Grimm<br />
geoENERGIE Konzept GmbH
<br />
grimm@geoenergie-konzept.de
<br />
+49 3731 79878 11
</p>
{this.props.language.locale !== 'en' &&
<React.Fragment>
<h3>{getTranslation("homepage.local_contacts")}</h3>
{localExperts.map(expert =>
<p dangerouslySetInnerHTML={{__html : expert.contactinfo}}></p>
)}
</React.Fragment>
}
</div>
</div>
</div>
</div>
<Footer activeLanguage={this.props.language.locale} pages={this.props.pages} />
</div>
</div>
);
}
}
export default HomePage;