Files
FitTrackee/fittrackee_client/src/components/Admin/AdminStats.jsx

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)
)