/**
* @author [Tristan Valcke]{@link https://github.com/Itee}
* @license [BSD-3-Clause]{@link https://opensource.org/licenses/BSD-3-Clause}
*
* @file Todo
*
* @example Todo
*
*/
import React from 'react'
import ReactDOM from 'react-dom'
import { TAppBar } from './bars/TAppBar'
import { TStatusBar } from './bars/TStatusBar'
import { TToolbar } from './bars/TToolbar'
import { TTree } from './data_displays/collections/TTree'
import { TTreeItem } from './data_displays/collections/TTreeItem'
import { TDateTime } from './data_displays/TDateTime'
import { TButtonGroup } from './data_entries/TButtonGroup'
import { TLogingButton } from './data_entries/TLoginButton'
import { TToolButton } from './data_entries/TToolButton'
import { TLoginDialog } from './dialogs/TLoginDialog'
import { TContent } from './layouts/TContent'
import { TDialogArea } from './layouts/TDialogArea'
import { TFooter } from './layouts/TFooter'
import { THeader } from './layouts/THeader'
import { TSplitter } from './layouts/TSplitter'
import { TViewport3D } from './medias/TViewport3D'
import { TBrand } from './navigations/TBrand'
import { TDropDownMenu } from './navigations/TDropDownMenu'
import { TMenu } from './navigations/TMenu'
import { TMenuItem } from './navigations/TMenuItem'
class TApplication extends React.Component {
constructor ( props ) {
super( props )
this.state = {
underDialog: false,
showLoginDialog: false,
isLogged: false
}
this.logInButtonHandler = this.logInButtonHandler.bind( this )
this.logOutButtonHandler = this.logOutButtonHandler.bind( this )
this.loginCloseHandler = this.loginCloseHandler.bind( this )
this.loginSubmitHandler = this.loginSubmitHandler.bind( this )
}
logInButtonHandler () {
if ( !this.state.isLogged ) {
this.setState( {
underDialog: true,
showLoginDialog: true
} )
}
}
logOutButtonHandler () {
if ( this.state.isLogged ) {
this.setState( prevState => ( {
isLogged: !prevState.isLogged
} ) )
}
}
loginCloseHandler () {
this.setState( {
underDialog: false,
showLoginDialog: false
} )
}
loginSubmitHandler ( event ) {
//Todo: wait server response
this.setState( prevState => ( {
isLogged: !prevState.isLogged,
underDialog: false,
showLoginDialog: false
} ) )
event.preventDefault()
}
render () {
const _STYLE = {
display: 'flex',
flexFlow: 'column',
height: '100%'
}
return (
<div className={'application'} style={_STYLE}>
<THeader>
<TAppBar
left={
<TBrand icon={'fa fa-rocket'} label={'Itee'} />
}
center={
<TMenu>
<TMenuItem id={'docsBtn'} label={'Docs'} tooltip={'Voir la documentation'} />
<TMenuItem id={'tutorialBtn'} label={'Tutorial'} tooltip={'Lancer le tutorial d\'utilisation'} />
<TMenuItem id={'viewerBtn'} label={'Visualiseur'} tooltip={'Voir les données'} />
<TMenuItem id={'uploadBtn'} label={'Téléverser'} tooltip={'Téléverser un fichier sur le serveur'} />
<TMenuItem id={'aboutBtn'} label={'A propos'} tooltip={'Voir les données'} />
<TDropDownMenu label={'MyDropdown'}>
<a href={'#'}>Link 1</a>
<a href={'#'}>Link 2</a>
<a href={'#'}>Link 3</a>
</TDropDownMenu>
</TMenu>
}
right={
<div>
<TLogingButton isLogged={this.state.isLogged} round={true} logInHandler={this.logInButtonHandler} logOutHandler={this.logOutButtonHandler} />
</div>
}
/>
</THeader>
<TContent>
<TToolbar>
<TButtonGroup>
<TToolButton id={'importBtn'} title={'Retourner à l\'acceuil'} icon={'fa fa-home'}></TToolButton>
<li className={'vDivider'} role={'separator'}></li>
<TToolButton id={'downloadBtn'} title={'Importer un fichier local'} icon={'fa fa-cloud-download'}></TToolButton>
<TToolButton id={'uploadBtn'} title={'Télécharger un fichier sur le serveur'} icon={'fa fa-cloud-upload'}></TToolButton>
{/*<input id="importInput" type="file" style="display:none;" multiple=""></input>*/}
<li className={'vDivider'} role={'separator'}></li>
</TButtonGroup>
{/*<ul className="nav navbar-nav">*/}
{/*<li>*/}
{/*<a class="dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" title="Outils de mesures">*/}
{/*<i class="fa fa-crosshairs" aria-hidden="true"></i>*/}
{/*</a>*/}
{/*<ul class="vertical-dropdown-black dropdown-menu" id="measureTools">*/}
{/*<li>*/}
{/*<a data-value="segment" aria-haspopup="true" aria-expanded="true" title="Distance entre un point A et un point B">*/}
{/*<i class="fa fa-expand"></i>*/}
{/*Segment*/}
{/*</a>*/}
{/*</li>*/}
{/*<li>*/}
{/*<a data-value="polyline" aria-haspopup="true" aria-expanded="true" title="Distances entre plusieurs points qui se suivent">*/}
{/*<i class="fa fa-share-alt"></i>*/}
{/*PolyLigne*/}
{/*</a>*/}
{/*</li>*/}
{/*<li>*/}
{/*<a data-value="polysegment" aria-haspopup="true" aria-expanded="true" title="Distances entre un point central et plusieurs points">*/}
{/*<i class="fa fa-arrows-alt"></i>*/}
{/*PolySegment*/}
{/*</a>*/}
{/*</li>*/}
{/*<li class="hDivider" role="separator"></li>*/}
{/*<li class="disabled">*/}
{/*<a data-value="disk" aria-haspopup="true" aria-expanded="true" title="Surface d'un disque">*/}
{/*<i class="fa fa-circle-o"></i>*/}
{/*Disque*/}
{/*</a>*/}
{/*</li>*/}
{/*<li class="disabled">*/}
{/*<a data-value="square" aria-haspopup="true" aria-expanded="true" title="Surface d'un rectangle">*/}
{/*<i class="fa fa-square-o"></i>*/}
{/*Carré*/}
{/*</a>*/}
{/*</li>*/}
{/*<li class="disabled">*/}
{/*<a data-value="polygone" aria-haspopup="true" aria-expanded="true" title="Surface d'un polygone">*/}
{/*<i class="fa fa-star-o"></i>*/}
{/*Polygone*/}
{/*</a>*/}
{/*</li>*/}
{/*<li class="hDivider" role="separator"></li>*/}
{/*<li class="disabled">*/}
{/*<a data-value="sphere" aria-haspopup="true" aria-expanded="true" title="Volume d'une sphère">*/}
{/*<i class="fa fa-dribbble"></i>*/}
{/*Sphère*/}
{/*</a>*/}
{/*</li>*/}
{/*<li class="disabled">*/}
{/*<a data-value="cube" aria-haspopup="true" aria-expanded="true" title="Volume d'un cube">*/}
{/*<i class="fa fa-codepen"></i>*/}
{/*Cube*/}
{/*</a>*/}
{/*</li>*/}
{/*<li class="hDivider" role="separator"></li>*/}
{/*<li>*/}
{/*<a class="danger" data-value="clear" aria-haspopup="true" aria-expanded="true" title="Effacer les mesures">*/}
{/*<i class="fa fa-window-close-o"></i>*/}
{/*Effacer*/}
{/*</a>*/}
{/*</li>*/}
{/*</ul>*/}
{/*</li>*/}
{/*<li>*/}
{/*<a class="btn" id="xRayBtn" data-toggle="button" title="Rayon X">*/}
{/*<i class="fa fa-wifi"></i>*/}
{/*</a>*/}
{/*</li>*/}
{/*<TToolButton id="xRayBtn" title="Rayon X" icon={'fa fa-wifi'}></TToolButton>*/}
{/*<li>*/}
{/*<a class="btn" id="splitBtn" data-toggle="button" title="Outil de découpe">*/}
{/*<i class="fa fa-scissors"></i>*/}
{/*</a>*/}
{/*</li>*/}
{/*<li>*/}
{/*<a class="btn" id="selectBtn" data-toggle="button" title="Sélection">*/}
{/*<i class="fa fa-hand-pointer-o"></i>*/}
{/*</a>*/}
{/*</li>*/}
{/*<li class="vDivider" role="separator"></li>*/}
{/*<li class="dropdown" role="presentation">*/}
{/*<a class="dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" title="Contrôle de camera">*/}
{/*<i class="fa fa-street-view"></i>*/}
{/*</a>*/}
{/*<ul class="vertical-dropdown-black dropdown-menu" id="cameraMode">*/}
{/*<li>*/}
{/*<a data-value="avatar">*/}
{/*<i class="fa fa-arrow-circle-right" aria-hidden="true"></i>*/}
{/*Avatar*/}
{/*</a>*/}
{/*</li>*/}
{/*<li>*/}
{/*<a data-value="orbital">*/}
{/*<i class="fa fa-globe" aria-hidden="true"></i>*/}
{/*Orbital*/}
{/*</a>*/}
{/*</li>*/}
{/*</ul>*/}
{/*</li>*/}
{/*<li class="dropdown" role="presentation">*/}
{/*<a class="dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" title="Effet de rendu 3D">*/}
{/*<i class="fa fa-eye"></i>*/}
{/*</a>*/}
{/*<ul class="vertical-dropdown-black dropdown-menu" id="renderEffectDropDown">*/}
{/*<li>*/}
{/*<a data-value="normal">*/}
{/*<i class="fa fa-eye"></i>*/}
{/*Normal*/}
{/*</a>*/}
{/*</li>*/}
{/*<li>*/}
{/*<a data-value="anaglyph">*/}
{/*<span class="glyphicon glyphicon-sunglasses" aria-hidden="true"></span>*/}
{/*Anaglyph*/}
{/*</a>*/}
{/*</li>*/}
{/*<li>*/}
{/*<a data-value="vr">*/}
{/*<i class="fa fa-cubes" aria-hidden="true"></i>*/}
{/*VR*/}
{/*</a>*/}
{/*</li>*/}
{/*</ul>*/}
{/*</li>*/}
{/*<li class="vDivider" role="separator"></li>*/}
{/*<li>*/}
{/*<a class="btn" id="detailBtn" title="Détails batiment">*/}
{/*<i class="fa fa-pencil"></i>*/}
{/*</a>*/}
{/*</li>*/}
{/*<li>*/}
{/*<a class="btn" id="historyBtn" title="Historique d'intervention du batiment">*/}
{/*<i class="fa fa-history"></i>*/}
{/*</a>*/}
{/*</li>*/}
{/*<li>*/}
{/*<a class="btn" id="createBtn" title="Création d'intervention du batiment">*/}
{/*<i class="fa fa-flash"></i>*/}
{/*</a>*/}
{/*</li>*/}
{/*</ul>*/}
</TToolbar>
<TSplitter initPosition={15}
first={
<TTree>
<TTreeItem id={'fooId'} name={'fooName'} />
<TTreeItem id={'barId'} name={'barName'} />
<TTreeItem id={'bazId'} name={'bazName'} />
</TTree>
}
second={
<TViewport3D />
} />
</TContent>
<TFooter height={40}>
<TStatusBar state={'fixed'} position={'bottom'}>
<TDateTime />
</TStatusBar>
</TFooter>
<TDialogArea isVisible={this.state.underDialog}>
<TLoginDialog isVisible={this.state.showLoginDialog} closeHandler={this.loginCloseHandler} submitHandler={this.loginSubmitHandler} />
</TDialogArea>
</div>
)
}
}
// Define the root element.
ReactDOM.render(
<TApplication name='World' />,
document.querySelector( 'itee-application-root' )
)