Client - display app statistics in Administration

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

View File

@ -1,6 +1,22 @@
import FitTrackeeGenericApi from '../fitTrackeeApi'
import { setData, setError } from './index'
export const setAppStats = data => ({
type: 'SET_APP_STATS',
data,
})
export const getAppStats = () => dispatch =>
FitTrackeeGenericApi.getData('stats/all')
.then(ret => {
if (ret.status === 'success') {
dispatch(setAppStats(ret.data))
} else {
dispatch(setError(`application|${ret.message}`))
}
})
.catch(error => dispatch(setError(`application|${error}`)))
export const getStats = (userId, type, data) => dispatch =>
FitTrackeeGenericApi.getData(`stats/${userId}/${type}`, data)
.then(ret => {

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

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

View File

@ -11,5 +11,7 @@
"Image": "Image",
"Label": "Label",
"Sports": "Sports",
"Users": "Users"
"user": "user",
"Users": "Users",
"users": "users"
}

View File

@ -11,5 +11,7 @@
"Image": "Image",
"Label": "Label",
"Sports": "Sports",
"Users": "Utilisateurs"
"user": "user",
"Users": "Utilisateurs",
"users": "utilisateurs"
}

View File

@ -33,6 +33,16 @@ const activities = (state = initial.activities, action) => {
}
}
const application = (state = initial.application, action) => {
if (action.type === 'SET_APP_STATS') {
return {
...state,
statistics: action.data,
}
}
return state
}
const calendarActivities = (state = initial.calendarActivities, action) => {
if (action.type === 'UPDATE_CALENDAR') {
return {
@ -140,6 +150,7 @@ const statistics = (state = initial.statistics, action) =>
export default history =>
combineReducers({
activities,
application,
calendarActivities,
chartData,
gpx,

View File

@ -12,6 +12,9 @@ export default {
activities: {
...emptyData,
},
application: {
statistics: {},
},
calendarActivities: {
...emptyData,
},