6 files changed, 133 insertions, 11 deletions
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/DayTypesInDay.js b/app/assets/javascripts/es6_browserified/time_tables/components/ExceptionsInDay.js
index 560ff198b..cc1e34c52 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/DayTypesInDay.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/components/ExceptionsInDay.js
@@ -2,7 +2,7 @@ var React = require('react')
 var Component = require('react').Component
 var PropTypes = require('react').PropTypes
 
-class DayTypesInDay extends Component {
+class ExceptionsInDay extends Component {
   constructor(props) {
     super(props)
   }
@@ -15,9 +15,9 @@ class DayTypesInDay extends Component {
   }
 }
 
-DayTypesInDay.propTypes = {
+ExceptionsInDay.propTypes = {
   value: PropTypes.object.isRequired,
   index: PropTypes.number.isRequired
 }
 
-module.exports = DayTypesInDay
+module.exports = ExceptionsInDay
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/PeriodManager.js b/app/assets/javascripts/es6_browserified/time_tables/components/PeriodManager.js
new file mode 100644
index 000000000..35ceaabd2
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/time_tables/components/PeriodManager.js
@@ -0,0 +1,23 @@
+var React = require('react')
+var Component = require('react').Component
+var PropTypes = require('react').PropTypes
+
+class PeriodManager extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    return (
+      <div>
+        P
+      </div>
+    )
+  }
+}
+
+PeriodManager.propTypes = {
+  value: PropTypes.object.isRequired
+}
+
+module.exports = PeriodManager
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/PeriodsInDay.js b/app/assets/javascripts/es6_browserified/time_tables/components/PeriodsInDay.js
new file mode 100644
index 000000000..adc500c86
--- /dev/null
+++ b/app/assets/javascripts/es6_browserified/time_tables/components/PeriodsInDay.js
@@ -0,0 +1,67 @@
+var React = require('react')
+var Component = require('react').Component
+var PropTypes = require('react').PropTypes
+var PeriodManager = require('./PeriodManager')
+
+class PeriodsInDay extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  isIn(date) {
+    let currentDate = date.getTime()
+    let cls = 'td'
+    let periods = this.props.value
+
+    periods.map((p, i) => {
+      let begin = new Date(p.period_start).getTime()
+      let end = new Date(p.period_end).getTime()
+
+      if(currentDate >= begin && currentDate <= end) {
+        if(currentDate == begin) {
+          cls += ' in_periods start_period'
+        } else if(currentDate == end) {
+          cls += ' in_periods end_period'
+        } else {
+          cls += ' in_periods'
+        }
+      }
+    })
+    return cls
+  }
+
+  render() {
+    return (
+      <div
+        className={this.isIn(this.props.currentDate)}
+      >
+        {this.props.value.map((p, i) => {
+          let begin = new Date(p.period_start).getTime()
+          let end = new Date(p.period_end).getTime()
+          let d = this.props.currentDate.getTime()
+
+          if(d >= begin && d <= end) {
+            if(d == begin) {
+              return (
+                <PeriodManager
+                  key={i}
+                  value={p}
+                />
+              )
+            } else {
+              return false
+            }
+          }
+        })}
+      </div>
+    )
+  }
+}
+
+PeriodsInDay.propTypes = {
+  value: PropTypes.array.isRequired,
+  currentDate: PropTypes.object.isRequired,
+  index: PropTypes.number.isRequired
+}
+
+module.exports = PeriodsInDay
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 715f3ec3b..b27dddbf1 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/Timetable.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/components/Timetable.js
@@ -2,7 +2,8 @@ var React = require('react')
 var Component = require('react').Component
 var PropTypes = require('react').PropTypes
 var TimeTableDay = require('./TimeTableDay')
-var DayTypesInDay = require('./DayTypesInDay')
+var PeriodsInDay = require('./PeriodsInDay')
+var ExceptionsInDay = require('./ExceptionsInDay')
 var actions = require('../actions')
 
 class Timetable extends Component{
@@ -10,6 +11,14 @@ class Timetable extends Component{
     super(props)
   }
 
+  currentDate(mFirstday, day) {
+    let currentMonth = mFirstday.split('-')
+    let twodigitsDay = day < 10 ? ('0' + day) : day
+    let currentDate = new Date(currentMonth[0] + '-' + currentMonth[1] + '-' + twodigitsDay)
+
+    return currentDate
+  }
+
   componentDidUpdate(prevProps, prevState) {
     if(this.props.status.isFetching == false){
       $('.table-2entries').each(function() {
@@ -67,10 +76,21 @@ class Timetable extends Component{
                       key={i}
                       className={'td-group' + (this.props.metas.day_types[d.wday] ? '' : ' out_from_daytypes') + (d.wday == 0 ? ' last_wday' : '')}
                     >
-                      <DayTypesInDay
+                      {/* day_types */}
+                      <div className="td"></div>
+
+                      {/* periods */}
+                      <PeriodsInDay
+                        index={i}
+                        value={this.props.timetable.time_table_periods}
+                        currentDate={this.currentDate(this.props.timetable.current_periode_range, d.mday)}
+                      />
+
+                      {/* exceptions */}
+                      <ExceptionsInDay
                         index={i}
                         value={this.props.timetable}
-                        />
+                      />
                     </div>
                   )}
                 </div>
diff --git a/app/assets/stylesheets/components/_tables.sass b/app/assets/stylesheets/components/_tables.sass
index 0803f6210..bc04b49e3 100644
--- a/app/assets/stylesheets/components/_tables.sass
+++ b/app/assets/stylesheets/components/_tables.sass
@@ -268,6 +268,7 @@
       // TD group
       > .td-group
         display: inline-block
+        vertical-align: top
 
         > .td
           display: block
diff --git a/app/assets/stylesheets/modules/_timetables.sass b/app/assets/stylesheets/modules/_timetables.sass
index 4dcb78b0e..14d6c586b 100644
--- a/app/assets/stylesheets/modules/_timetables.sass
+++ b/app/assets/stylesheets/modules/_timetables.sass
@@ -63,13 +63,24 @@
 
     > .td-group
       width: 34px
-      border-right: 1px solid rgba($grey, 0.5)
+      > .td
+        border-right: 1px solid rgba($grey, 0.5)
 
       &.last_wday
-        &:not(:last-child)
+        &:not(:last-child) > .td
           border-right: 2px solid $darkgrey
 
       &.out_from_daytypes
-        > .td
-          background-image: linear-gradient(45deg, rgba($grey, 0.15) 0%, rgba($grey, 0.15) 49%, rgba($grey, 0.5) 50%, rgba($grey, 0.15) 51%, rgba($grey, 0.15) 99%, rgba($grey, 0.15) 100%)
-          background-size: 25px 25px
+        background-image: linear-gradient(45deg, rgba($grey, 0.15) 0%, rgba($grey, 0.15) 49%, rgba($grey, 0.5) 50%, rgba($grey, 0.15) 51%, rgba($grey, 0.15) 99%, rgba($grey, 0.15) 100%)
+        background-size: 25px 25px
+
+      > .td
+        &.in_periods
+          background-color: $gold
+          border-left-color: $gold
+          border-right-color: $gold
+
+          &.start_period
+            border-left-color: rgba($grey, 0.5)
+          &.end_period
+            border-right-color: rgba($grey, 0.5)