Alexander/FitTrackee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Client - display app statistics in Administration

Browse Source
This commit is contained in:
Sam
2019-09-23 21:05:55 +02:00
parent 628f2f3e27
commit f3356e045c
7 changed files with 128 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
fittrackee_client/src/components/Admin/AdminDashboard.jsx
View File

@ -1,6 +1,8 @@
import React from 'react'
import { Helmet } from 'react-helmet'
import AdminStats from './AdminStats'
export default function AdminDashboard() {
return (
<div>
@ -11,7 +13,9 @@ export default function AdminDashboard() {
<div className="card-header">
<strong>FitTrackee administration</strong>
</div>
<div className="card-body">TODO</div>
<div className="card-body">
<AdminStats />
</div>
</div>
</div>
)

87
fittrackee_client/src/components/Admin/AdminStats.jsx Normal file
View File

@ -0,0 +1,87 @@
import React from 'react'
import { withTranslation } from 'react-i18next'
import { connect } from 'react-redux'
import { getAppStats } from '../../actions/stats'
class AdminStats extends React.Component {
componentDidMount() {
this.props.loadAppStats()
}
render() {
const { appStats, t } = this.props
return (
<div className="row">
<div className="col-md-4">
<div className="card activity-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-md-4">
<div className="card activity-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-md-4">
<div className="card activity-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.activities ? appStats.activities : 0}
</div>
<div>{`${
appStats.activities === 1
? t('common:workout')
: t('common:workouts')
}`}</div>
</div>
</div>
</div>
</div>
</div>
)
}
}
export default withTranslation()(
connect(
state => ({
appStats: state.application.statistics,
}),
dispatch => ({
loadAppStats: () => {
dispatch(getAppStats())
},
})
)(AdminStats)
)