Dashboard: init activities display
This commit is contained in:
parent
1d2966af96
commit
2f0c952ecc
@ -18,7 +18,8 @@ activities_blueprint = Blueprint('activities', __name__)
|
||||
@authenticate
|
||||
def get_activities(auth_user_id):
|
||||
"""Get all activities for authenticated user"""
|
||||
activities = Activity.query.filter_by(user_id=auth_user_id).all()
|
||||
activities = Activity.query.filter_by(user_id=auth_user_id)\
|
||||
.order_by(Activity.activity_date.desc()).all()
|
||||
activities_list = []
|
||||
for activity in activities:
|
||||
activities_list.append(activity.serialize())
|
||||
|
@ -51,18 +51,18 @@ def test_get_all_activities_for_authenticated_user(app):
|
||||
assert len(data['data']['activities']) == 2
|
||||
|
||||
assert 'creation_date' in data['data']['activities'][0]
|
||||
assert 'Mon, 01 Jan 2018 00:00:00 GMT' == data['data']['activities'][0]['activity_date'] # noqa
|
||||
assert 'Sun, 01 Apr 2018 00:00:00 GMT' == data['data']['activities'][0]['activity_date'] # noqa
|
||||
assert 1 == data['data']['activities'][0]['user_id']
|
||||
assert 2 == data['data']['activities'][0]['sport_id']
|
||||
assert '0:17:04' == data['data']['activities'][0]['duration']
|
||||
assert 1 == data['data']['activities'][0]['sport_id']
|
||||
assert '1:40:00' == data['data']['activities'][0]['duration']
|
||||
assert data['data']['activities'][0]['with_gpx'] is False
|
||||
|
||||
assert 'creation_date' in data['data']['activities'][1]
|
||||
assert 'Sun, 01 Apr 2018 00:00:00 GMT' == data['data']['activities'][1]['activity_date'] # noqa
|
||||
assert 'Mon, 01 Jan 2018 00:00:00 GMT' == data['data']['activities'][1]['activity_date'] # noqa
|
||||
assert 1 == data['data']['activities'][1]['user_id']
|
||||
assert 1 == data['data']['activities'][1]['sport_id']
|
||||
assert '1:40:00' == data['data']['activities'][1]['duration']
|
||||
assert data['data']['activities'][0]['with_gpx'] is False
|
||||
assert 2 == data['data']['activities'][1]['sport_id']
|
||||
assert '0:17:04' == data['data']['activities'][1]['duration']
|
||||
assert data['data']['activities'][1]['with_gpx'] is False
|
||||
|
||||
|
||||
def test_get_activities_for_authenticated_user_no_activity(app):
|
||||
|
@ -57,6 +57,10 @@ input, textarea {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.activity-card {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.add-activity {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
30
mpwo_client/src/components/Dashboard/ActivityCard.jsx
Normal file
30
mpwo_client/src/components/Dashboard/ActivityCard.jsx
Normal file
@ -0,0 +1,30 @@
|
||||
import React from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
export default function ActivityCard (props) {
|
||||
const { activity, sports } = props
|
||||
|
||||
return (
|
||||
<div className="card activity-card">
|
||||
<div className="card-header">
|
||||
<Link to={`/activities/${activity.id}`}>
|
||||
{sports.filter(sport => sport.id === activity.sport_id)
|
||||
.map(sport => sport.label)} -{' '}
|
||||
{activity.activity_date}
|
||||
</Link>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<p>
|
||||
<i className="fa fa-calendar" aria-hidden="true" />{' '}
|
||||
Start at {activity.activity_date}
|
||||
</p>
|
||||
<p>
|
||||
<i className="fa fa-clock-o" aria-hidden="true" />{' '}
|
||||
Duration: {activity.duration} -{' '}
|
||||
<i className="fa fa-road" aria-hidden="true" />{' '}
|
||||
Distance: {activity.distance} km
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
15
mpwo_client/src/components/Dashboard/Statistics.jsx
Normal file
15
mpwo_client/src/components/Dashboard/Statistics.jsx
Normal file
@ -0,0 +1,15 @@
|
||||
import React from 'react'
|
||||
|
||||
|
||||
export default function ActivityCard () {
|
||||
return (
|
||||
<div className="card activity-card">
|
||||
<div className="card-header">
|
||||
Statistics
|
||||
</div>
|
||||
<div className="card-body">
|
||||
coming soon...
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
@ -2,15 +2,43 @@ import React from 'react'
|
||||
import { Helmet } from 'react-helmet'
|
||||
import { connect } from 'react-redux'
|
||||
|
||||
import ActivityCard from './ActivityCard'
|
||||
import Statistics from './Statistics'
|
||||
import { getData } from '../../actions/index'
|
||||
|
||||
class DashBoard extends React.Component {
|
||||
componentDidMount() {}
|
||||
componentDidMount() {
|
||||
this.props.loadActivities()
|
||||
}
|
||||
|
||||
render() {
|
||||
const { activities, sports } = this.props
|
||||
return (
|
||||
<div>
|
||||
<Helmet>
|
||||
<title>mpwo - Dashboard</title>
|
||||
</Helmet>
|
||||
<h1 className="page-title">Dashboard</h1>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-md-6">
|
||||
{activities.length > 0 ? (
|
||||
activities.map(activity => (
|
||||
<ActivityCard
|
||||
activity={activity}
|
||||
key={activity.id}
|
||||
sports={sports}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
'No activities for now'
|
||||
)}
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<Statistics />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -18,6 +46,15 @@ class DashBoard extends React.Component {
|
||||
|
||||
export default connect(
|
||||
state => ({
|
||||
activities: state.activities.data,
|
||||
message: state.message,
|
||||
sports: state.sports.data,
|
||||
user: state.user,
|
||||
}),
|
||||
dispatch => ({
|
||||
loadActivities: () => {
|
||||
dispatch(getData('activities'))
|
||||
dispatch(getData('sports'))
|
||||
},
|
||||
})
|
||||
)(DashBoard)
|
||||
|
Loading…
Reference in New Issue
Block a user