Refs #2892: Add simple display of stored data in tt

Signed-off-by: Thomas Shawarma Haddad <thomas.haddad@af83.com>

7 files changed, 113 insertions, 3 deletions

diff --git a/app/assets/javascripts/es6_browserified/time_tables/actions/index.js b/app/assets/javascripts/es6_browserified/time_tables/actions/index.js
index 39e9aba02..ad6480a1b 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/actions/index.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/actions/index.js
@@ -3,7 +3,7 @@ const actions = {
     let weekDays = ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa']
     let array = []
     weekDays.map((day, i) =>{
-      array[i] = (str.indexOf(day) != -1) ? true : false
+      array[i] = str.indexOf(day) != -1
     })
 
     return array
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/Metas.js b/app/assets/javascripts/es6_browserified/time_tables/components/Metas.js
new file mode 100644
index 000000000..3bb763c71
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/time_tables/components/Metas.js
@@ -0,0 +1,43 @@
+var React = require('react')
+var PropTypes = require('react').PropTypes
+let weekDays = ['L', 'Ma', 'Me', 'J', 'V', 'S', 'D']
+
+const reorderArray = (arr) =>{
+  let elt = arr.shift()
+  arr.push(elt)
+  return arr
+}
+
+const Metas = ({day_types}) => {
+  day_types = reorderArray(day_types)
+  return (
+    <div>
+      <h2>Metas</h2>
+        <div className="form-group labelled-checkbox-group">
+          {day_types.map((day, i) =>
+            <div className="lcbx-group-item"
+              key={i}
+            >
+              <div className="checkbox">
+                <label>
+                  <input
+                    onChange={(e) => {e.preventDefault()}}
+                    id={i}
+                    type="checkbox"
+                    checked={day ? 'checked' : ''}
+                  />
+                  <span className='lcbx-group-item-label'>{weekDays[i]}</span>
+                </label>
+              </div>
+            </div>
+          )}
+        </div>
+    </div>
+  )
+}
+
+Metas.propTypes = {
+  day_types: PropTypes.array.isRequired
+}
+
+module.exports = Metas
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/Timetable.js b/app/assets/javascripts/es6_browserified/time_tables/components/Timetable.js
new file mode 100644
index 000000000..716b33ba4
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/time_tables/components/Timetable.js
@@ -0,0 +1,26 @@
+var React = require('react')
+var PropTypes = require('react').PropTypes
+
+const Timetable = ({current_month, time_table_periods}) => {
+  return (
+    <div>
+      <h2>Calendrier</h2>
+      <ul>
+        {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>
+  )
+}
+
+Timetable.propTypes = {
+  current_month: PropTypes.array.isRequired,
+  time_table_periods: PropTypes.array.isRequired
+}
+
+module.exports = Timetable
diff --git a/app/assets/javascripts/es6_browserified/time_tables/containers/App.js b/app/assets/javascripts/es6_browserified/time_tables/containers/App.js
index ab8c3bf06..56fe1e65b 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/containers/App.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/containers/App.js
@@ -2,6 +2,8 @@ var React = require('react')
 var connect = require('react-redux').connect
 var Component = require('react').Component
 var actions = require('../actions')
+var Metas = require('./Metas')
+var Timetable = require('./Timetable')
 
 class App extends Component {
   componentDidMount(){
@@ -10,7 +12,10 @@ class App extends Component {
 
   render(){
     return(
-      <div></div>
+      <div>
+        <Metas />
+        <Timetable />
+      </div>
     )
   }
 }
diff --git a/app/assets/javascripts/es6_browserified/time_tables/containers/Metas.js b/app/assets/javascripts/es6_browserified/time_tables/containers/Metas.js
new file mode 100644
index 000000000..4a1465f6e
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/time_tables/containers/Metas.js
@@ -0,0 +1,18 @@
+var actions = require('../actions')
+var connect = require('react-redux').connect
+var MetasComponent = require('../components/Metas')
+
+const mapStateToProps = (state) => {
+  return {
+    day_types: state.day_types
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+  }
+}
+
+const Metas = connect(mapStateToProps, mapDispatchToProps)(MetasComponent)
+
+module.exports = Metas
diff --git a/app/assets/javascripts/es6_browserified/time_tables/containers/Timetable.js b/app/assets/javascripts/es6_browserified/time_tables/containers/Timetable.js
new file mode 100644
index 000000000..c92dc5abf
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/time_tables/containers/Timetable.js
@@ -0,0 +1,18 @@
+var connect = require('react-redux').connect
+var TimetableComponent = require('../components/Timetable')
+
+const mapStateToProps = (state) => {
+  return {
+    current_month: state.current_month,
+    time_table_periods: state.time_table_periods
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+  }
+}
+
+const Timetable = connect(mapStateToProps, mapDispatchToProps)(TimetableComponent)
+
+module.exports = Timetable
diff --git a/app/assets/javascripts/es6_browserified/time_tables/index.js b/app/assets/javascripts/es6_browserified/time_tables/index.js
index adcf30130..4213b307c 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/index.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/index.js
@@ -45,5 +45,5 @@ render(
   <Provider store={store}>
     <App />
   </Provider>,
-  document.getElementById('time_tables')
+  document.getElementById('periods')
 )