Dashboard: init activities display

This commit is contained in:
Sam 2018-05-09 10:25:08 +02:00
parent 1d2966af96
commit 2f0c952ecc
6 changed files with 96 additions and 9 deletions

View File

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

View File

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

View File

@ -57,6 +57,10 @@ input, textarea {
text-align: center;
}
.activity-card {
margin-bottom: 15px;
}
.add-activity {
margin-top: 50px;
}

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

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

View File

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