import React, { Component } from 'react'
import Header from '../header/Header'
import Subheader from '../subheader/Subheader'
import Cookies from 'universal-cookie';
import { Redirect } from 'react-router-dom'
import UserList from './UserList'
import ContentList from './ContentList'
import GlossaryList from './GlossaryList'
import NotesList from './NotesList'
import EventList from './EventList'
import PagesList from './PagesList'
import LayerControl from './LayerControl'
import AreasList from './AreasList'
import ContactList from './ContactsList'
import UnitList from './UnitList'
import FieldMeasurements from './FieldMeasurements'
import Links from './Links';
import ExamplesList from './ExamplesList'
import './Superuser.css'
const cookies = new Cookies();
/**
* Dashboard for the admin of the web-portal
* From this component, all options that can be changed by the admin can be reached
*/
class Superuser extends Component {
constructor(props) {
super(props);
this.state = { redirect: false, active: 'settings'}
}
componentDidMount() {
let token = cookies.get('token');
if(this.props.user.superuser) {
this.props.loadSuperuserData(token);
} else {
this.setState({redirect: true})
}
}
/**
* Change the active tab
* @param {} tab - New active tab
*/
changeTab(tab) {
this.setState({active: tab});
}
/**
* Logout from the web portal
*/
logOut() {
cookies.remove('token', { path: '/'});
this.props.signOut();
this.setState({redirect: true});
}
render() {
return(
<div>
{this.state.redirect &&
<Redirect to="/experts/contribute" />
}
<Header />
<div className="container container-small">
<Subheader title="expert.subheader.title.contribute" />
<div className="default-element">
<div className="default-element-content">
<ul className="superuser-navigation">
<li onClick={() => this.changeTab('settings')} className={(this.state.active === 'settings' ? 'active' : 'not-active')}>Settings</li>
<li onClick={() => this.changeTab('content')} className={(this.state.active === 'content' ? 'active' : 'not-active')}>Content</li>
<li onClick={() => this.changeTab('glossary')} className={(this.state.active === 'glossary' ? 'active' : 'not-active')}>Glossary</li>
<li onClick={() => this.changeTab('users')} className={(this.state.active === 'users' ? 'active' : 'not-active')}>Users</li>
<li onClick={() => this.changeTab('knowledge')} className={(this.state.active === 'knowledge' ? 'active' : 'not-active')}>Knowl. Repo</li>
<li onClick={() => this.changeTab('events')} className={(this.state.active === 'events' ? 'active' : 'not-active')}>Events</li>
<li onClick={() => this.changeTab('areas')} className={(this.state.active === 'areas' ? 'active' : 'not-active')}>Areas</li>
<li onClick={() => this.changeTab('layers')} className={(this.state.active === 'layers' ? 'active' : 'not-active')}>Layers</li>
<li onClick={() => this.changeTab('notes')} className={(this.state.active === 'notes' ? 'active' : 'not-active')}>Notes</li>
<li onClick={() => this.changeTab('fieldmeasurements')} className={(this.state.active === 'fieldmeasurements' ? 'active' : 'not-active')}>Field measurements</li>
<li onClick={() => this.changeTab('units')} className={(this.state.active === 'units' ? 'active' : 'not-active')}>Units</li>
<li onClick={() => this.changeTab('links')} className={(this.state.active === 'links' ? 'active' : 'not-active')}>Links</li>
<li onClick={() => this.changeTab('examples')} className={(this.state.active === 'examples' ? 'active' : 'not-active')}>Examples</li>
<li onClick={() => this.logOut()}>Logout</li>
</ul>
{this.state.active === 'users' &&
<UserList fetching={this.props.fetching} users={this.props.superuser.users} changeUserDetailsSuperuser={this.props.changeUserDetailsSuperuser} />
}
{this.state.active === 'knowledge' &&
<ContentList fetching={this.props.fetching} contents={this.props.contents} removeContentSuperuser={this.props.removeContentSuperuser} />
}
{this.state.active === 'glossary' &&
<GlossaryList fetching={this.props.fetching} users={this.props.superuser.users} glossary={this.props.glossary} />
}
{this.state.active === 'events' &&
<EventList fetching={this.props.fetching} users={this.props.superuser.users} events={this.props.events} removeEventSuperuser={this.props.removeEventSuperuser} />
}
{this.state.active === 'content' &&
<PagesList removePage={this.props.removePage} fetching={this.props.fetching} users={this.props.superuser.users} pages={this.props.pages} sitecontent ={this.props.sitecontent} removeEventSuperuser={this.props.removeEventSuperuser} />
}
{this.state.active === 'areas' &&
<AreasList uploadAreas={this.props.uploadAreas} updateArea={this.props.updatePilotarea} fetching={this.props.fetching} pilotareas={this.props.pilotareas} />
}
{this.state.active === 'layers' &&
<LayerControl addLayers={this.props.addLayers} fetching={this.props.fetching} readExcelFile={this.props.readExcelFile} getLayers={this.props.getLayers} pilotareas={this.props.pilotareas} layers={this.props.layers} />
}
{this.state.active === 'notes' &&
<NotesList explanatorynotes={this.props.explanatorynotes} fetching={this.props.fetching} saveNote={this.props.saveNote} />
}
{this.state.active === 'settings' &&
<ContactList contacts={this.props.localcontacts} />
}
{this.state.active === 'fieldmeasurements' &&
<FieldMeasurements updateFieldmeasurements={this.props.updateFieldmeasurements} fetching={this.props.fetching} pilotareas={this.props.pilotareas} />
}
{this.state.active === 'units' &&
<UnitList units={this.props.units} />
}
{this.state.active === 'links' &&
<Links updateLinks={this.props.updateLinks} links={this.props.links} />
}
{this.state.active === 'examples' &&
<ExamplesList examples={this.props.examples} />
}
</div>
</div>
</div>
</div>
)
}
}
export default Superuser