Client: Activity page init
This commit is contained in:
Sam
parent
f7d0f87d0d
commit
37ed5405bb
@ -16,6 +16,11 @@
|
|||||||
integrity="sha256-MGU/JUq/40CFrfxjXb5pZjpoZmxiP2KuICN5ElLFNd8="
|
integrity="sha256-MGU/JUq/40CFrfxjXb5pZjpoZmxiP2KuICN5ElLFNd8="
|
||||||
crossorigin="anonymous"
|
crossorigin="anonymous"
|
||||||
>
|
>
|
||||||
|
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/foundation-icons/3.0/foundation-icons.min.css"
|
||||||
|
>
|
||||||
<title>mpwo</title>
|
<title>mpwo</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
98
mpwo_client/src/components/Activities/ActivityDisplay.jsx
Normal file
98
mpwo_client/src/components/Activities/ActivityDisplay.jsx
Normal 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
35
mpwo_client/src/components/Activities/index.jsx
Normal 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)
|
||||||
@ -3,7 +3,7 @@ import { Redirect, Route, Switch } from 'react-router-dom'
|
|||||||
|
|
||||||
import './App.css'
|
import './App.css'
|
||||||
import Admin from './Admin'
|
import Admin from './Admin'
|
||||||
import AddWorkout from './Activities/AddActivity'
|
import Activity from './Activities/index'
|
||||||
import Dashboard from './Dashboard'
|
import Dashboard from './Dashboard'
|
||||||
import Logout from './User/Logout'
|
import Logout from './User/Logout'
|
||||||
import NavBar from './NavBar'
|
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 path="/admin" component={Admin} />
|
||||||
<Route component={NotFound} />
|
<Route component={NotFound} />
|
||||||
</Switch>
|
</Switch>
|
||||||
|
|||||||
@ -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) => {
|
const formData = (state = initial.formData, action) => {
|
||||||
switch (action.type) {
|
switch (action.type) {
|
||||||
case 'UPDATE_USER_FORMDATA':
|
case 'UPDATE_USER_FORMDATA':
|
||||||
@ -138,6 +141,7 @@ const user = (state = initial.user, action) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const reducers = combineReducers({
|
const reducers = combineReducers({
|
||||||
|
activities,
|
||||||
formData,
|
formData,
|
||||||
formProfile,
|
formProfile,
|
||||||
message,
|
message,
|
||||||
|
|||||||
@ -38,6 +38,9 @@ export default {
|
|||||||
passwordConf: '',
|
passwordConf: '',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
activities: {
|
||||||
|
...emptyData,
|
||||||
|
},
|
||||||
sports: {
|
sports: {
|
||||||
...emptyData,
|
...emptyData,
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user