Refs #2982: adding periode_range to PeriodManager display

3 files changed, 32 insertions, 6 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 1a6b7d197..a023360a5 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/actions/index.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/actions/index.js
@@ -68,6 +68,18 @@ const actions = {
     var date = new Date(strDate)
     return monthList[date.getMonth()]
   },
+  getHumanDate(strDate, mLimit) {
+    let origin = strDate.split('-')
+    let D = origin[2]
+    let M = actions.monthName(strDate).toLowerCase()
+    let Y = origin[0]
+
+    if(mLimit) {
+      M = M.substr(0, mLimit) + '.'
+    }
+
+    return (D + ' ' + M + ' ' + Y)
+  },
 
   updateSynthesis: (state, daytypes) => {
     let periods = state.time_table_periods
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/PeriodManager.js b/app/assets/javascripts/es6_browserified/time_tables/components/PeriodManager.js
index 35ceaabd2..61098d9ea 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/PeriodManager.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/components/PeriodManager.js
@@ -1,6 +1,7 @@
 var React = require('react')
 var Component = require('react').Component
 var PropTypes = require('react').PropTypes
+var actions = require('../actions')
 
 class PeriodManager extends Component {
   constructor(props) {
@@ -9,8 +10,11 @@ class PeriodManager extends Component {
 
   render() {
     return (
-      <div>
-        P
+      <div
+        className='period_manager'
+        id={this.props.value.id}
+      >
+        <strong>{(this.props.value.period_start.split('-')[2]) + ' > ' + actions.getHumanDate(this.props.value.period_end, 3)}</strong>
       </div>
     )
   }
diff --git a/app/assets/stylesheets/modules/_timetables.sass b/app/assets/stylesheets/modules/_timetables.sass
index 14d6c586b..e44a254c5 100644
--- a/app/assets/stylesheets/modules/_timetables.sass
+++ b/app/assets/stylesheets/modules/_timetables.sass
@@ -59,7 +59,7 @@
           background-color: transparent
 
           &.included
-            background-color: $gold
+            background-color: rgba($gold, 0.7)
 
     > .td-group
       width: 34px
@@ -76,11 +76,21 @@
 
       > .td
         &.in_periods
-          background-color: $gold
-          border-left-color: $gold
-          border-right-color: $gold
+          background-color: rgba($gold, 0.7)
+          border-left-color: rgba($gold, 0.7)
+          border-right-color: rgba($gold, 0.7)
 
           &.start_period
             border-left-color: rgba($grey, 0.5)
           &.end_period
             border-right-color: rgba($grey, 0.5)
+
+  .period_manager
+    display: block
+    height: auto
+    word-wrap: normal
+    white-space: nowrap
+    position: absolute
+    left: 8px
+    top: 6px
+    z-index: 5