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

Client: Activity page init

Browse Source
This commit is contained in:
Sam
2018-05-02 19:02:39 +02:00
parent f7d0f87d0d
commit 37ed5405bb
7 changed files with 147 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
mpwo_client/public/index.html
View File

@@ -16,6 +16,11 @@
integrity="sha256-MGU/JUq/40CFrfxjXb5pZjpoZmxiP2KuICN5ElLFNd8="
crossorigin="anonymous"
>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/foundation-icons/3.0/foundation-icons.min.css"
>
<title>mpwo</title>
</head>
<body>

0
mpwo_client/src/components/Activities/AddActivity.jsx → mpwo_client/src/components/Activities/ActivityAdd.jsx
View File

98
mpwo_client/src/components/Activities/ActivityDisplay.jsx Normal file
View File

@@ -0,0 +1,98 @@
import React from 'react'
import { Helmet } from 'react-helmet'
import { connect } from 'react-redux'
import { getData } from '../../actions/index'
class ActivityDisplay extends React.Component {
componentDidMount() {
this.props.loadActivity(
this.props.location.pathname.replace('/activities/', '')
)
}
render() {
const { activities, message, sports } = this.props
const [activity] = activities
return (
<div>
<Helmet>
<title>mpwo - Activity</title>
</Helmet>
<h1 className="page-title">
Activity
</h1>
{message ? (
<code>{message}</code>
) : (
<div className="container">
{activity && sports.length > 0 && (
<div className="row">
<div className="col-md-12">
<div className="card">
<div className="card-header">
{sports.filter(sport => sport.id === activity.sport_id)
.map(sport => sport.label)} -{' '}
{activity.activity_date}
</div>
<div className="card-body">
<div className="row">
<div className="col-md-8">
<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} {' '}
{activity.pauses > 0 && (
`(pauses: ${activity.pauses})`
)}
</p>
<p>
<i className="fa fa-road" aria-hidden="true" />{' '}
Distance: {activity.distance}km</p>
<p>
<i className="fa fa-tachometer" aria-hidden="true" />
{' '}
Average speed: {activity.ave_speed} km/h -{' '}
Max speed : {activity.max_speed} km/h
</p>
<p><i className="fi-mountains" />{' '}
Min altitude: {activity.min_alt}m -{' '}
Max altitude: {activity.max_alt}m
</p>
<p><i className="fa fa-location-arrow" />{' '}
Ascent: {activity.ascent}m -{' '}
Descent: {activity.descent}m
</p>
</div>
<div className="col-md-4">
Map
</div>
</div>
</div>
</div>
</div>
</div>
)}
</div>
)}
</div>
)
}
}
export default connect(
state => ({
activities: state.activities.data,
message: state.message,
sports: state.sports.data,
user: state.user,
}),
dispatch => ({
loadActivity: activityId => {
dispatch(getData('activities', activityId))
dispatch(getData('sports'))
},
})
)(ActivityDisplay)

35
mpwo_client/src/components/Activities/index.jsx Normal file
View File

@@ -0,0 +1,35 @@
import React from 'react'
import { Helmet } from 'react-helmet'
import { connect } from 'react-redux'
import { Redirect, Route, Switch } from 'react-router-dom'
import ActivityAdd from './ActivityAdd'
import ActivityDisplay from './ActivityDisplay'
import NotFound from './../Others/NotFound'
import { isLoggedIn } from '../../utils'
class Activity extends React.Component {
componentDidMount() {}
render() {
return (
<div>
<Helmet>
<title>mpwo - Admin</title>
</Helmet>
{isLoggedIn() ? (
<Switch>
<Route exact path="/activities/add" component={ActivityAdd} />
<Route path="/activities" component={ActivityDisplay} />
<Route component={NotFound} />
</Switch>
) : (<Redirect to="/login" />)}
</div>
)
}
}
export default connect(
state => ({
user: state.user,
})
)(Activity)

4
mpwo_client/src/components/App.jsx
View File

@@ -3,7 +3,7 @@ import { Redirect, Route, Switch } from 'react-router-dom'
import './App.css'
import Admin from './Admin'
import AddWorkout from './Activities/AddActivity'
import Activity from './Activities/index'
import Dashboard from './Dashboard'
import Logout from './User/Logout'
import NavBar from './NavBar'
@@ -84,7 +84,7 @@ export default class App extends React.Component {
)
)}
/>
<Route exact path="/activities/add" component={AddWorkout} />
<Route path="/activities" component={Activity} />
<Route path="/admin" component={Admin} />
<Route component={NotFound} />
</Switch>

4
mpwo_client/src/reducers/index.js
View File

@@ -19,6 +19,9 @@ const handleDataAndError = (state, type, action) => {
}
}
const activities = (state = initial.activities, action) =>
handleDataAndError(state, 'activities', action)
const formData = (state = initial.formData, action) => {
switch (action.type) {
case 'UPDATE_USER_FORMDATA':
@@ -138,6 +141,7 @@ const user = (state = initial.user, action) => {
}
const reducers = combineReducers({
activities,
formData,
formProfile,
message,

3
mpwo_client/src/reducers/initial.js
View File

@@ -38,6 +38,9 @@ export default {
passwordConf: '',
}
},
activities: {
...emptyData,
},
sports: {
...emptyData,
}