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

Client: filter component init - #3

Browse Source
This commit is contained in:
Sam 2018-06-07 17:50:22 +02:00
parent 7c0bb285db
commit eab356a2c4
4 changed files with 156 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

136
fittrackee_client/src/components/Activities/ActivitiesFilter.jsx Normal file
View File

@ -0,0 +1,136 @@
import React from 'react'
export default function ActivitiesList (props) {
const { sports } = props
return (
<div className="card">
<div className="card-body activity-filter">
<form onSubmit={event => event.preventDefault()}>
<div className="form-group">
<label>
From:
<input
name="start"
className="form-control col-md"
type="date"
/>
</label>
<label>
To:
<input
name="end"
className="form-control col-md"
type="date"
/>
</label>
</div>
<div className="form-group">
<label>
Sport:
<select
className="form-control input-lg"
name="sport_id"
>
<option value="" />
{sports.map(sport => (
<option key={sport.id} value={sport.id}>
{sport.label}
</option>
))}
</select>
</label>
</div>
<div className="form-group">
<label>
Distance (km):
<div className="container">
<div className="row">
<div className="col-5">
<input
name="distance-from"
className="form-control"
min={0}
step="1"
type="number"
/>
</div>
<div className="col-2 align-middle text-center">to</div>
<div className="col-5">
<input
name="distance-to"
className="form-control"
min={0}
step="1"
type="number"
/>
</div>
</div>
</div>
</label>
</div>
<div className="form-group">
<label>
Duration:
<div className="container">
<div className="row">
<div className="col-5">
<input
name="duration-from"
className="form-control"
pattern="^([0-9]*[0-9]):([0-5][0-9])$"
placeholder="hh:mm"
type="text"
/>
</div>
<div className="col-2 align-middle text-center">to</div>
<div className="col-5">
<input
name="duration-to"
className="form-control"
pattern="^([0-9]*[0-9]):([0-5][0-9])$"
placeholder="hh:mm"
type="text"
/>
</div>
</div>
</div>
</label>
</div>
<div className="form-group">
<label>
Average speed (km/h):
<div className="container">
<div className="row">
<div className="col-5">
<input
name="speed-from"
className="form-control"
min={0}
step="1"
type="number"
/>
</div>
<div className="col-2 align-middle text-center">to</div>
<div className="col-5">
<input
name="speed-to"
className="form-control"
min={0}
step="1"
type="number"
/>
</div>
</div>
</div>
</label>
</div>
<input
type="submit"
className="btn btn-primary btn-lg btn-block"
value="Filter"
/>
</form>
</div>
</div>
)
}

10
fittrackee_client/src/components/Activities/ActivitiesList.jsx
View File

@ -36,10 +36,12 @@ export default function ActivitiesList (props) {
{activity.title}
</Link>
</td>
<td >{format(activity.activity_date, 'DD/MM/YYYY HH:mm')}</td>
<td >{activity.distance} km</td>
<td >{activity.duration}</td>
<td >{activity.ave_speed} km/h</td>
<td>{format(activity.activity_date, 'DD/MM/YYYY HH:mm')}</td>
<td className="text-right">
{Number(activity.distance).toFixed(2)} km
</td>
<td className="text-right">{activity.duration}</td>
<td className="text-right">{activity.ave_speed} km/h</td>
</tr>
))}
</tbody>

7
fittrackee_client/src/components/Activities/index.jsx
View File

@ -2,6 +2,7 @@ import React from 'react'
import { Helmet } from 'react-helmet'
import { connect } from 'react-redux'
import ActivitiesFilter from './ActivitiesFilter'
import ActivitiesList from './ActivitiesList'
import { getData } from '../../actions'
import { getMoreActivities } from '../../actions/activities'
@ -35,7 +36,11 @@ class Activities extends React.Component {
) : (
<div className="container history">
<div className="row">
<div className="col-md-3" />
<div className="col-md-3">
<ActivitiesFilter
sports={sports}
/>
</div>
<div className="col-md-9">
<ActivitiesList
activities={activities}

8
fittrackee_client/src/components/App.css
View File

@ -71,6 +71,14 @@ input, textarea {
font-size: 0.75em;
}
.activity-filter {
font-size: 0.9em;
}
.activity-filter .col-2, .col-5{
padding: 0;
}
.activity-page {
margin-top: 20px;
}