Client: filter component init - #3

fittrackee_client/src/components/Activities/ActivitiesFilter.jsx

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

fittrackee_client/src/components/Activities/ActivitiesList.jsx

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

fittrackee_client/src/components/Activities/index.jsx

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

fittrackee_client/src/components/App.css

@@ -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;
 }