Refs #2982: Updating TimeTable React Component

2 files changed, 61 insertions, 15 deletions

diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/TimeTableDay.js b/app/assets/javascripts/es6_browserified/time_tables/components/TimeTableDay.js
new file mode 100644
index 000000000..5117b53c0
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/time_tables/components/TimeTableDay.js
@@ -0,0 +1,24 @@
+var React = require('react')
+var Component = require('react').Component
+var PropTypes = require('react').PropTypes
+
+class TimeTableDay extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    return (
+      <div className='t2e-item'>
+        Toto
+      </div>
+    )
+  }
+}
+
+TimeTableDay.propTypes = {
+  value: PropTypes.object.isRequired,
+  index: PropTypes.number.isRequired
+}
+
+module.exports = TimeTableDay
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/Timetable.js b/app/assets/javascripts/es6_browserified/time_tables/components/Timetable.js
index 8f25d1f10..0652f2cc6 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/Timetable.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/components/Timetable.js
@@ -1,21 +1,43 @@
 var React = require('react')
+var Component = require('react').Component
 var PropTypes = require('react').PropTypes
+var TimeTableDay = require('./TimeTableDay')
 
-const Timetable = ({timetable}) => {
-  return (
-    <div>
-      <h2>Calendrier</h2>
-      <ul>
-        {timetable.current_month.map((day, i) =>
-          <li
-            key={i}
-          >
-            <span>{day.day} {day.mday} ({day.wday} {day.included_date} {day.excluded_date})</span>
-          </li>
-        )}
-      </ul>
-    </div>
-  )
+class Timetable extends Component{
+  constructor(props){
+    super(props)
+  }
+
+  render() {
+    return (
+      <div className='row'>
+        <div className="col-lg-12">
+          <div className="table table-2entries mt-sm mb-sm">
+            <div className="t2e-head w20">
+              <div className="th">
+                <div></div>
+                <div></div>
+                <div></div>
+                <div className="strong">Synthèse</div>
+              </div>
+              <div className="td">Journées d'application</div>
+              <div className="td">Périodes</div>
+              <div className="td">Exceptions</div>
+            </div>
+            <div className="t2e-item-list w80">
+              {this.props.timetable.current_month.map((day, i) =>
+                <TimeTableDay
+                  key={i}
+                  index={i}
+                  value={day}
+                />
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
 }
 
 Timetable.propTypes = {