2018-12-31 19:35:55 +00:00
import React from 'react' ;
import ErrorMessage from 'webodm/components/ErrorMessage' ;
import PropTypes from 'prop-types' ;
import './Dashboard.scss' ;
import $ from 'jquery' ;
2020-12-14 17:43:16 +00:00
import _ from 'gettext' ;
2018-12-31 19:35:55 +00:00
export default class Dashboard extends React . Component {
static defaultProps = {
} ;
static propTypes = {
apiKey : PropTypes . string . isRequired ,
onLogout : PropTypes . func . isRequired
}
constructor ( props ) {
super ( props ) ;
this . state = {
error : "" ,
loading : true ,
2019-01-02 18:17:00 +00:00
loadingMessage : "" ,
2018-12-31 19:35:55 +00:00
user : null ,
nodes : [ ] ,
syncingNodes : false
}
}
apiUrl = url => {
2019-01-02 16:57:19 +00:00
return ` https://webodm.net ${ url } ?api_key= ${ this . props . apiKey } ` ;
2018-12-31 19:35:55 +00:00
} ;
componentDidMount = ( ) => {
2019-01-02 18:17:00 +00:00
this . loadDashboard ( ) ;
}
loadDashboard = ( ) => {
2020-12-14 17:43:16 +00:00
this . setState ( { loading : true , loadingMessage : _ ( "Loading dashboard..." ) } ) ;
2019-01-02 18:17:00 +00:00
2018-12-31 19:35:55 +00:00
$ . get ( this . apiUrl ( '/r/user' ) ) . done ( json => {
if ( json . balance !== undefined ) {
this . setState ( { loading : false , user : json } ) ;
this . handleSyncProcessingNode ( ) ;
2019-01-02 18:17:00 +00:00
} else if ( json . message === "Unauthorized" ) {
this . props . onLogout ( ) ;
2018-12-31 19:35:55 +00:00
} else {
2019-01-02 18:17:00 +00:00
this . setState ( { loading : false , error : ` Cannot load lightning dashboard. Server responded: ${ JSON . stringify ( json ) } . Are you running the latest version of WebODM? ` } ) ;
2018-12-31 19:35:55 +00:00
}
} )
. fail ( ( ) => {
2019-01-02 17:54:27 +00:00
this . setState ( { loading : false , error : ` Cannot load lightning dashboard. Please make sure you are connected to the internet, or try again in an hour. ` } ) ;
2018-12-31 19:35:55 +00:00
} ) ;
}
handleSyncProcessingNode = ( ) => {
if ( ! this . state . user ) return ;
const { node , tokens } = this . state . user ;
if ( ! node || ! tokens ) return ;
this . setState ( { syncingNodes : true , nodes : [ ] } ) ;
$ . post ( 'sync_processing_node' , {
hostname : node . hostname ,
port : node . port ,
token : tokens [ 0 ] . id
} ) . done ( json => {
if ( json . error ) {
this . setState ( { error : json . error } ) ;
} else {
this . setState ( { nodes : json } ) ;
}
} )
. fail ( e => {
this . setState ( { error : ` Cannot sync nodes: ${ JSON . stringify ( e ) } . Are you connected to the internet? ` } ) ;
} )
. always ( ( ) => {
this . setState ( { syncingNodes : false } ) ;
} ) ;
}
handeLogout = ( ) => {
this . setState ( { loading : true , loadingMessage : "Logging out..." } ) ;
$ . post ( "save_api_key" , {
api _key : ""
} ) . done ( json => {
if ( ! json . success ) {
this . setState ( { error : ` Cannot logout: ${ JSON . stringify ( json ) } ` } ) ;
}
this . setState ( { loading : false } ) ;
this . props . onLogout ( ) ;
} ) . fail ( e => {
this . setState ( { loading : false , error : ` Cannot logout: ${ JSON . stringify ( e ) } ` } ) ;
} ) ;
}
handleBuyCredits = ( ) => {
window . open ( "https://webodm.net/dashboard?bc=0" ) ;
}
2019-01-02 18:17:00 +00:00
handleRefresh = ( ) => {
this . loadDashboard ( ) ;
}
2018-12-31 19:35:55 +00:00
handleOpenDashboard = ( ) => {
window . open ( "https://webodm.net/dashboard" ) ;
}
render ( ) {
const { loading , loadingMessage , user , syncingNodes , nodes } = this . state ;
2020-01-17 15:05:29 +00:00
let balance = "" ;
if ( user ) {
balance = ( < span > < strong > { user . balance } < / strong > credits < / span > ) ;
if ( user . plan !== null ) {
balance = ( < span > < strong > Unlimited < / strong > < / span > ) ;
}
}
2018-12-31 19:35:55 +00:00
return ( < div className = "lightning-dashboard" >
< ErrorMessage bind = { [ this , "error" ] } / >
{ loading ?
2019-11-07 21:24:02 +00:00
< div className = "text-center loading" > { loadingMessage } < i className = "fa fa-spin fa-circle-notch" > < / i > < / div > :
2018-12-31 19:35:55 +00:00
< div >
{ user ?
< div >
2019-01-02 18:17:00 +00:00
< div className = "balance" >
2020-01-17 15:05:29 +00:00
Balance : { balance }
2019-01-02 18:17:00 +00:00
< button className = "btn btn-primary btn-sm" onClick = { this . handleBuyCredits } > < i className = "fa fa-shopping-cart" > < / i > Buy Credits < / button >
2019-11-07 21:24:02 +00:00
< button className = "btn btn-primary btn-sm" onClick = { this . handleRefresh } > < i className = "fa fa-sync" > < / i > Refresh Balance < / button >
2019-01-02 18:17:00 +00:00
< / div >
2018-12-31 19:35:55 +00:00
< h4 > Hello , < a href = "javascript:void(0)" onClick = { this . handleOpenDashboard } > { user . email } < / a > < / h4 >
< div className = "lightning-nodes" >
< h5 > Synced Nodes < / h5 >
2019-11-07 21:24:02 +00:00
{ syncingNodes ? < i className = "fa fa-spin fa-sync" > < / i > :
2018-12-31 19:35:55 +00:00
< div >
< ul >
{ nodes . map ( n =>
2019-01-15 14:06:22 +00:00
< li key = { n . id } > < i className = "fa fa-laptop" > < / i > < a href = { ` /processingnode/ ${ n . id } / ` } > { n . label } < / a > < / li >
2018-12-31 19:35:55 +00:00
) }
< / ul >
2019-11-07 21:24:02 +00:00
< button className = "btn btn-sm btn-default" onClick = { this . handleSyncProcessingNode } > < i className = "fa fa-sync" > < / i > Resync < / button >
2018-12-31 19:35:55 +00:00
< / div > }
< / div >
2019-01-02 16:57:19 +00:00
{ nodes . length > 0 ?
< div >
< hr / >
2019-11-07 21:24:02 +00:00
< i className = "far fa-thumbs-up" > < / i > You are all set ! When creating a new task from the < a href = "/dashboard" > Dashboard < / a > , select < strong > { nodes [ 0 ] . label } < / strong > from the < strong > Processing Node < / strong > drop - down instead of Auto .
2019-01-02 16:57:19 +00:00
< / div > : "" }
2018-12-31 19:35:55 +00:00
< div className = "buttons text-right" >
< hr / >
< button className = "btn btn-sm btn-primary logout" onClick = { this . handeLogout } >
2020-12-14 17:43:16 +00:00
< i className = "fa fa-power-off" > < / i > { _ ( "Logout" ) }
2018-12-31 19:35:55 +00:00
< / button >
< / div >
< / div > : "" }
< / div > }
< / div > ) ;
}
}