nutella_framework 0.6.5 → 0.6.6

data/framework_components/roomcast-teacher-controls/src/app/components/ActivitiesGrid.js

@@ -50,7 +50,6 @@ var ActivitiesGrid = React.createClass({
         var cardStyle = {
             width: this._cardSize[0],
             height: this._cardSize[1],
-            //position: 'absolute',
             flexBasis: this._cardSize[0]
         };
 
@@ -58,11 +57,12 @@ var ActivitiesGrid = React.createClass({
             if(this.props.configs.hasOwnProperty(c)) {
                 cards.push(
                     <ActivityCard
+                        key={c}
                         configId={c}
                         configName={this.props.configs[c].name}
                         currentConfigId={this.props.currentConfig}
                         cardStyle={cardStyle}
-                        />
+                        timer={this.props.timer} />
                 );
             }
         }

data/framework_components/roomcast-teacher-controls/src/app/components/ActivityCard.js

@@ -49,6 +49,8 @@ var ActivityCard = React.createClass({
                 height: cardHeight
             });
 
+        var stroke = this.state.isSelected ? 'white' : null;
+
         svg.append('circle')
             .attr({
                 cx: cardWidth / 2,
@@ -56,7 +58,8 @@ var ActivityCard = React.createClass({
                 r: '0px'
             })
             .style({
-                fill: this._colorSelected
+                fill: this._colorSelected,
+                stroke: stroke
             })
             .transition()
             .call(publishAfterTransition)
@@ -95,6 +98,24 @@ var ActivityCard = React.createClass({
         }
     },
 
+    formatTimer: function(ms) {
+        var x = ms / 1000;
+        var seconds = Math.floor(x % 60);
+        x /= 60;
+        var minutes = Math.floor(x % 60);
+        x /= 60;
+        var hours = Math.floor(x % 24);
+        x /= 24;
+        var days = Math.floor(x);
+
+        var timer;
+        timer = seconds + ' sec';
+        timer = minutes != 0 ? minutes + " min " + timer : timer;
+        timer = hours != 0 ? hours + " hrs " + timer : timer;
+        timer = days != 0 ? days + " days " + timer : timer;
+        return timer;
+    },
+
     render: function () {
 
         var selectedCardStyle = {
@@ -105,18 +126,30 @@ var ActivityCard = React.createClass({
         // Copy
         var cardStyle = {};
         for(var p_ in this.props.cardStyle) {
-            cardStyle[p_] = this.props.cardStyle[p_];
+            if(this.props.cardStyle.hasOwnProperty(p_)) {
+                cardStyle[p_] = this.props.cardStyle[p_];
+            }
         }
+        var spanStyle = {};
 
         var className='activity-card';
+        var timer = null;
 
         // Add properties if selected
         if(this.state.isSelected) {
             className += ' activity-card-selected';
             for(var p in selectedCardStyle) {
-                cardStyle[p] = selectedCardStyle[p];
+                if(selectedCardStyle.hasOwnProperty(p)) {
+                    cardStyle[p] = selectedCardStyle[p];
+                }
             }
-
+            timer = this.formatTimer(this.props.timer);
+            spanStyle = {
+                width: this.props.cardStyle.width,
+                textAlign: 'center',
+                fontWeight: '400',
+                fontSize: '2.6em',
+                marginBottom: '20px'};
         }
 
         return (
@@ -127,12 +160,11 @@ var ActivityCard = React.createClass({
 
                 <div className='card-name'>
 
-                    <span> {this.props.configName} </span>
+                    <span style={spanStyle} >{this.props.configName}</span>
+                    <span>{timer}</span>
 
                 </div>
 
-
-
             </Paper>);
     }
 

data/framework_components/roomcast-teacher-controls/src/app/components/main.js

@@ -28,6 +28,17 @@ var Main = React.createClass({
                     self.setCurrentConfig(message);
                 });
 
+                // Get current selected config
+                nutella.net.request('launchTime/retrieve', '', function (time) {
+                    self.setTimer(time, self.updateTimer);
+
+                    // Subscribe for future changes
+                    nutella.net.subscribe('launchTime/updated', function (time, from) {
+                        self.setTimer(time, self.updateTimer);
+                    });
+
+                });
+
             });
 
         });
@@ -36,6 +47,7 @@ var Main = React.createClass({
     getInitialState: function () {
         return  {
             currentConfig: '1',
+            timer: null,
             configs: []
         }
     },
@@ -52,6 +64,44 @@ var Main = React.createClass({
         });
     },
 
+    /**
+     * Computes duration from absolute times and stores in state.
+     * @param time
+     */
+    setTimer: function(time) {
+        var self = this;
+
+        var callback = function() {
+            window.clearInterval(self._timeoutId);
+            var action = function() {
+                self.updateTimer(self.state.timer + 1000);
+            };
+            self._timeoutId = setInterval(action, 1000);
+        };
+
+        var now = new Date().getTime();
+        var then = new Date(time).getTime();
+        var duration = now - then;
+        if(duration < 100) {
+            duration = 0;
+        }
+        if(callback) {
+            this.setState({
+                timer: duration
+            }, callback);
+        } else {
+            this.setState({
+                timer: duration
+            });
+        }
+    },
+
+    updateTimer: function(t) {
+        this.setState({
+            timer: t
+        });
+    },
+
     render: function () {
 
         return (
@@ -60,7 +110,8 @@ var Main = React.createClass({
 
                 <ActivitiesGrid
                     configs={this.state.configs}
-                    currentConfig={this.state.currentConfig} />
+                    currentConfig={this.state.currentConfig}
+                    timer={this.state.timer} />
 
                 <Footer />
 

data/framework_components/roomcast-teacher-controls/src/less/main.less

@@ -78,7 +78,7 @@ html, body {
         align-content: center;
 
         span {
-          font-size: 1.5em;
+          font-size: 2em;
           font-weight: 300;
 
           // flex item properties

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: nutella_framework
 version: !ruby/object:Gem::Version
-  version: 0.6.5
+  version: 0.6.6
 platform: ruby
 authors:
 - Alessandro Gnoli
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-09-07 00:00:00.000000000 Z
+date: 2015-09-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: semantic