From c9f0405ee6463c80980d642f29377a5b154563c9 Mon Sep 17 00:00:00 2001
From: Sam <sam@samr1.net>
Date: Sun, 7 Jul 2019 12:56:09 +0200
Subject: [PATCH] Client: replace select with radio buttons on statistics

---
 fittrackee_client/src/components/App.css      | 30 ++++++++++++++++++
 .../src/components/Statistics/index.jsx       | 31 ++++++++++---------
 2 files changed, 47 insertions(+), 14 deletions(-)

diff --git a/fittrackee_client/src/components/App.css b/fittrackee_client/src/components/App.css
index 1382e1f7..bf0161af 100644
--- a/fittrackee_client/src/components/App.css
+++ b/fittrackee_client/src/components/App.css
@@ -329,6 +329,36 @@ label {
   max-height: 45px;
 }
 
+.time-frames {
+  align-items: center;
+  display: inline-flex;
+}
+
+.time-frame label {
+  float: left;
+  padding: 0 5px;
+  width: 4em;
+}
+
+.time-frame label input {
+  display: none;
+}
+
+.time-frame label span {
+  border: #a9a9a9 solid 1px;
+  border-radius: 9%;
+  color: #7b7b7b;
+  display: block;
+  font-size: 0.9em;
+  padding: 2px 0;
+  text-align: center;
+}
+
+.time-frame input:checked + span {
+  background-color: #a9a9a9;
+  color: #ffffff;
+}
+
 .timezone-custom-height {
   height: calc(2.25rem + 14px);
 }
diff --git a/fittrackee_client/src/components/Statistics/index.jsx b/fittrackee_client/src/components/Statistics/index.jsx
index adac5ec7..28d2daf4 100644
--- a/fittrackee_client/src/components/Statistics/index.jsx
+++ b/fittrackee_client/src/components/Statistics/index.jsx
@@ -48,7 +48,8 @@ class Statistics extends React.Component {
   }
 
   handleOnChangeDuration(e) {
-    const duration = e.target.value
+    const duration = e.target.name
+
     const date = new Date()
     const start = duration === 'year'
       ? startOfYear(subYears(date, 9))
@@ -131,19 +132,21 @@ class Statistics extends React.Component {
                     />
                   </p>
                 </div>
-                <div className="col-md-3">
-                  <select
-                    className="form-control input-lg"
-                    name="duration"
-                    defaultValue={statsParams.duration}
-                    onChange={e => this.handleOnChangeDuration(e)}
-                  >
-                    {durations.map(d => (
-                      <option key={d} value={d}>
-                        {d}
-                      </option>
-                    ))}
-                  </select>
+                <div className="col-md-3 time-frames justify-content-around">
+                  {durations.map(d => (
+                    <div className="time-frame" key={d}>
+                      <label >
+                        <input
+                          type="radio"
+                          id={d}
+                          name={d}
+                          checked={d === statsParams.duration}
+                          onChange={e => this.handleOnChangeDuration(e)}
+                        />
+                        <span>{ d }</span>
+                      </label>
+                    </div>
+                  ))}
                 </div>
                 <div className="col chart-arrows">
                   <p className="text-center">