nutella_framework 0.7.3 → 0.8.0

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

@@ -1,183 +0,0 @@
-
-var React = require('react');
-var Mui = require('material-ui');
-var Paper = Mui.Paper;
-var d3 = require('d3');
-var NutellaMixin = require('./NutellaMixin');
-
-var ActivityCard = React.createClass({
-
-    mixins: [NutellaMixin],
-
-    componentDidMount: function() {
-        var self= this;
-        this._colorSelected = '#00bcd4';
-        this._timerDuration = 1500;
-
-        d3.select(this.getDOMNode())
-            .on('touchstart', function() {
-                self.cardTouchIn.call(self, this);
-            })
-            .on('mousedown', function() {
-                self.cardTouchIn.call(self, this);
-            })
-            .on('touchend', function() {
-                self.cardTouchOut.call(self);
-            })
-            .on('mouseup', function() {
-                self.cardTouchOut.call(self);
-            });
-
-    },
-
-    cardTouchIn: function(el) {
-        var self = this;
-
-        var cardWidth = this.props.cardStyle['width'];
-        var cardHeight = this.props.cardStyle['height'];
-        var circleRadius = Math.sqrt(Math.pow(cardWidth, 2) + Math.pow(cardHeight, 2)) / 2;
-
-        var publishAfterTransition = function() {
-            var action = function() {
-                // #LOG action
-                self.logAction('launchActivity', {
-                    activity_name: self.props.configName,
-                    timer: self.props.timer
-                });
-                nutella.net.publish('currentConfig/update', +self.props.configId);
-            };
-            self._timeoutId = setTimeout(action, self._timerDuration);
-        };
-
-        var svg = d3.select(el)
-            .select('.card-svg')
-            .append('svg')
-            .style({
-                width: cardWidth,
-                height: cardHeight
-            });
-
-        var stroke = this.state.isSelected ? 'white' : null;
-
-        svg.append('circle')
-            .attr({
-                cx: cardWidth / 2,
-                cy: cardHeight / 2,
-                r: '0px'
-            })
-            .style({
-                fill: this._colorSelected,
-                stroke: stroke
-            })
-            .transition()
-            .call(publishAfterTransition)
-            .duration(self._timerDuration)
-            .attr({
-                r: circleRadius
-            });
-
-    },
-
-    cardTouchOut: function() {
-        d3.selectAll('.activity-card')
-            .select('.card-svg')
-            .select('svg')
-            .remove();
-
-        window.clearTimeout(this._timeoutId);
-    },
-
-    componentWillReceiveProps: function(newProps) {
-        if(+newProps.currentConfigId === +newProps.configId) {
-            this.setState({
-                isSelected: true
-            });
-        } else {
-            this.setState({
-                isSelected: false
-            });
-        }
-
-    },
-
-    getInitialState: function () {
-        return  {
-            isSelected: false
-        }
-    },
-
-    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 = {
-            backgroundColor: this._colorSelected,
-            color: 'white'
-        };
-
-        // Copy
-        var cardStyle = {};
-        for(var p_ in this.props.cardStyle) {
-            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) {
-                if(selectedCardStyle.hasOwnProperty(p)) {
-                    cardStyle[p] = selectedCardStyle[p];
-                }
-            }
-            timer = <span>{this.formatTimer(this.props.timer)}</span>;
-            spanStyle = {
-                width: this.props.cardStyle.width,
-                textAlign: 'center',
-                fontWeight: '400',
-                fontSize: '2.6em'
-            };
-        }
-
-        return (
-
-            <Paper className={className} style={cardStyle}  >
-
-                <div className='card-svg'> </div>
-
-                <div className='card-name'>
-
-                    <div className='card-text'>
-                        <span style={spanStyle} >{this.props.configName}</span>
-                        {timer}
-                    </div>
-
-                </div>
-
-            </Paper>);
-    }
-
-});
-
-module.exports = ActivityCard;

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

@@ -1,37 +0,0 @@
-var React = require('react');
-var Mui = require('material-ui');
-var Paper = Mui.Paper;
-var RaisedButton = Mui.RaisedButton;
-var NutellaMixin = require('./NutellaMixin');
-
-var Footer = React.createClass({
-
-    mixins: [NutellaMixin],
-
-    handleLogoutAll: function() {
-        // #LOG action
-        this.logAction('logoutAll', {});
-        nutella.net.publish('logout/all', '');
-    },
-
-    render: function () {
-
-        var footerStyle = {
-            height: (window.innerHeight * 0.1)
-        };
-
-        return (
-
-            <div className='footer' style={footerStyle}>
-
-                <RaisedButton className='logout-button' label='Logout All' primary={true} onTouchTap={this.handleLogoutAll} />
-
-            </div>
-
-        );
-
-    }
-
-});
-
-module.exports = Footer;

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

@@ -1,58 +0,0 @@
-var NUTELLA = require('nutella_lib');
-
-var NutellaMixin = {
-
-    /**
-     * Stores a user interaction as a document in the MongoDB database.
-     * @param action name of the action fired
-     * @param info additional properties to be stored for the specific interaction
-     */
-    logAction: function(action, info) {
-        var query_parameters = NUTELLA.parseURLParameters();
-        var app_id = query_parameters.app_id;
-        var run_id = query_parameters.run_id;
-        var cookie = this.getCookie('roomcast_device');
-        if(cookie === '') {
-            cookie = (+new Date * Math.random()).toString(36).substring(0, 15);
-            this.setCookie('roomcast_device', cookie, 365);
-        }
-        var date = new Date();
-        var doc = {};
-        doc.action = action;
-        doc.app_id = app_id;
-        doc.run_id = run_id;
-        doc.device_id = cookie;
-        doc.time = {
-            timestamp: date,
-            year: date.getFullYear(),
-            month: date.getMonth() + 1,
-            day: date.getDate(),
-            time: date.getHours() + ":" +date.getMinutes() + ":" +date.getSeconds()
-        };
-        if(Object.keys(info).length !== 0) {
-            doc.info = info;
-        }
-        nutella.net.publish('roomcast-log-bot/store', doc);
-    },
-
-    setCookie: function(cname, cvalue, exdays) {
-        var d = new Date();
-        d.setTime(d.getTime() + (exdays*24*60*60*1000));
-        var expires = "expires="+d.toUTCString();
-        document.cookie = cname + "=" + cvalue + "; " + expires;
-    },
-
-    getCookie: function(cname) {
-        var name = cname + "=";
-        var ca = document.cookie.split(';');
-        for(var i=0; i<ca.length; i++) {
-            var c = ca[i];
-            while (c.charAt(0)==' ') c = c.substring(1);
-            if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
-        }
-        return "";
-    }
-
-};
-
-module.exports = NutellaMixin;

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

@@ -1,125 +0,0 @@
-
-var React = require('react');
-var Mui = require('material-ui');
-var ActivitiesGrid = require('./ActivitiesGrid');
-var Footer = require('./Footer');
-
-var Main = React.createClass({
-
-    componentDidMount: function() {
-        var self = this;
-
-        // Get current configs
-        nutella.net.request('configs/retrieve', 'all', function (response) {
-            self.setConfigs(response);
-
-            // Subscribe for future changes
-            nutella.net.subscribe('configs/updated', function (message, from) {
-                self.setConfigs(message);
-
-            });
-
-            // Get current selected config
-            nutella.net.request('currentConfig/retrieve', '', function (response) {
-                self.setCurrentConfig(response);
-
-                // Subscribe for future changes
-                nutella.net.subscribe('currentConfig/ack_updated', function (message, from) {
-                    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);
-                    });
-
-                });
-
-            });
-
-        });
-    },
-
-    getInitialState: function () {
-        return  {
-            currentConfig: '1',
-            timer: null,
-            configs: []
-        }
-    },
-
-    setConfigs: function(configs) {
-        this.setState({
-            configs: configs
-        });
-    },
-
-    setCurrentConfig: function(config) {
-        this.setState({
-            currentConfig: config
-        });
-    },
-
-    /**
-     * 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 (
-
-            <div className='main-div' >
-
-                <ActivitiesGrid
-                    configs={this.state.configs}
-                    currentConfig={this.state.currentConfig}
-                    timer={this.state.timer} />
-
-                <Footer />
-
-            </div>
-
-        );
-    }
-
-});
-
-module.exports = Main;

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

@@ -1,196 +0,0 @@
-/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
-html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
-
-@import "node_modules/material-ui/src/less/scaffolding.less";
-//Define a custom less file to override any variables defined in scaffolding.less
-@import "my_overrides.less";
-@import "node_modules/material-ui/src/less/components.less";
-
-//////////// My custom app styles ////////////
-
-// VARIABLES
-@external-margin: 20px;
-@card-margin: 20px;
-
-// MIXINS
-.clickable {
-  cursor: pointer;
-}
-
-
-// CODE
-
-html, body {
-  height: 100%;
-  width: 100%;
-  background-color: #e9eaed;
-  box-sizing: border-box;
-}
-*, *:before, *:after {
-  box-sizing: inherit;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-}
-
-////////////////////////////////
-
-.activities-grid {
-  //width: 100%;
-  margin-left: @external-margin;
-  //margin-top: @external-margin;
-  margin-right: @external-margin;
-
-  // flex container properties
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  align-items: center;
-  align-content: stretch;
-
-  .activity-card {
-    background: white;
-    .clickable;
-    margin: @card-margin;
-
-    // flex item properties
-    flex-grow: 0;
-    flex-shrink: 0;
-    //flex-basis: 0;
-
-    .mui-paper-container {
-      position: relative;
-
-      .card-svg {
-        position: absolute;
-      }
-
-      .card-name {
-        // flex container properties
-        height: 100%;
-        width: 100%;
-        position: absolute;
-        //display: flex;
-        //flex-direction: row;
-        //flex-wrap: wrap;
-        justify-content: center;
-        align-items: center;
-        align-content: center;
-        display: table;
-        text-align: center;
-
-        .card-text {
-          display: table-cell;
-          vertical-align: middle;
-        }
-
-        span {
-          font-size: 2em;
-          font-weight: 300;
-          display: block;
-          line-height: 1.2em;
-          padding: 10px;
-
-          // flex item properties
-          //flex-grow: 0;
-          //flex-shrink: 0;
-          //flex-basis: main-size;
-        }
-      }
-    }
-
-
-
-  }
-}
-
-.footer {
-  // flex container properties
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;
-  align-content: center;
-
-  .logout-button {
-    width: 15%;
-    // flex item properties
-    flex-grow: 0;
-    flex-shrink: 0;
-    //flex-basis: 50px;
-
-  }
-}
-
-////////////////////////////////
-
-.channel {
-  // aspect ratio: 10:7.23
-  width: 100%;
-  height: 0;
-  padding-bottom: 72.30%;
-  position: relative;
-  background: white;
-  margin-bottom: 20px;
-  .channel-div {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    .channel-caption {
-      width: 100%;
-      height: 27%;
-      position: absolute;
-      bottom: 0;
-      background-color: rgba(0,0,0,0.4);
-      .icon-name-wrapper {
-        width: 100%;
-        //height: 100%;
-        position: absolute;
-        bottom: 10%;
-        overflow: auto;
-        .channel-icon {
-          width: 15%;
-          height: 0;
-          padding-bottom: 15%;
-          margin-left: 2%;
-          background-color: white;
-          //position: absolute;
-          //bottom: 0;
-          vertical-align: bottom;
-        }
-        .name-wrapper {
-          //height: 100%;
-          width: 83%;
-          display: inline-block;
-          position: absolute;
-          top: 20%;
-          .channel-name {
-            color: #ffffff;
-            font-size: 1.3vw;
-            margin: 0 0 4% 3%;
-            padding: 0 0 0 0;
-            vertical-align: middle;
-            @media (min-width: 1025px) and (max-width: 1480px) {
-              margin: 0 0 3% 3%;
-            }
-            @media (max-width: 1024px) {
-              margin: 0 0 2% 3%;
-            }
-            @media (max-width: 900px) {
-              margin: 0 0 1% 3%;
-            }
-          }
-          .channel-description {
-            color: #ffffff;
-            font-size: 0.8vw;
-            margin: 0 0 0 3%;
-            padding: 0 0 0 0;
-            line-height: 0;
-          }
-        }
-      }
-
-    }
-  }
-}