105 lines
3.3 KiB
JavaScript
105 lines
3.3 KiB
JavaScript
import React from 'react'
|
|
import { withTranslation } from 'react-i18next'
|
|
import { connect } from 'react-redux'
|
|
|
|
import { getAppData } from '../../actions/application'
|
|
import { getFileSize } from '../../utils'
|
|
|
|
class AdminStats extends React.Component {
|
|
componentDidMount() {
|
|
this.props.loadAppStats()
|
|
}
|
|
|
|
render() {
|
|
const { appStats, t } = this.props
|
|
const uploadDirSize = getFileSize(appStats.uploads_dir_size, false)
|
|
return (
|
|
<div className="row">
|
|
<div className="col-lg-3 col-md-6 col-sm-6">
|
|
<div className="card workout-card">
|
|
<div className="card-body row">
|
|
<div className="col-3">
|
|
<i className="fa fa-users fa-3x fa-color" />
|
|
</div>
|
|
<div className="col-9 text-right">
|
|
<div className="huge">
|
|
{appStats.users ? appStats.users : 0}
|
|
</div>
|
|
<div>{`${
|
|
appStats.users === 1
|
|
? t('administration:user')
|
|
: t('administration:users')
|
|
}`}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-3 col-md-6 col-sm-6">
|
|
<div className="card workout-card">
|
|
<div className="card-body row">
|
|
<div className="col-3">
|
|
<i className="fa fa-tags fa-3x fa-color" />
|
|
</div>
|
|
<div className="col-9 text-right">
|
|
<div className="huge">
|
|
{appStats.sports ? appStats.sports : 0}
|
|
</div>
|
|
<div>{`${
|
|
appStats.sports === 1 ? t('common:sport') : t('common:sports')
|
|
}`}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-3 col-md-6 col-sm-6">
|
|
<div className="card workout-card">
|
|
<div className="card-body row">
|
|
<div className="col-3">
|
|
<i className="fa fa-calendar fa-3x fa-color" />
|
|
</div>
|
|
<div className="col-9 text-right">
|
|
<div className="huge">
|
|
{appStats.workouts ? appStats.workouts : 0}
|
|
</div>
|
|
<div>{`${
|
|
appStats.workouts === 1
|
|
? t('common:workout')
|
|
: t('common:workouts')
|
|
}`}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-3 col-md-6 col-sm-6">
|
|
<div className="card workout-card">
|
|
<div className="card-body row">
|
|
<div className="col-3">
|
|
<i className="fa fa-folder-open fa-3x fa-color" />
|
|
</div>
|
|
<div className="col-9 text-right">
|
|
<div className="huge">{uploadDirSize.size}</div>
|
|
<div>
|
|
{uploadDirSize.suffix} ({t('administration:uploads')})
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default withTranslation()(
|
|
connect(
|
|
state => ({
|
|
appStats: state.application.statistics,
|
|
}),
|
|
dispatch => ({
|
|
loadAppStats: () => {
|
|
dispatch(getAppData('stats/all'))
|
|
},
|
|
})
|
|
)(AdminStats)
|
|
)
|