Redesign of randomized breakouts

lib/random-grouping.js

@@ -17,9 +17,7 @@ module.exports = function(db, options) {
             var title = "Breakout Room " + roomNum;
             // Force sessions type to be "simple"
             var activities = [{type: "about", autoHide: true}];
-            /* Keep the sessions' joining cap as 6 for now, we'll change this 
-            later and make it as an input available for admins */
-            var joinCap = 6; 
+            var joinCap = event.get("sessionSize"); 
 
             var newSession = new models.ServerSession({
                 title: title,

lib/unhangout-sockets.js

@@ -402,6 +402,7 @@ _.extend(UnhangoutSocketManager.prototype, events.EventEmitter.prototype, {
                     event.save({randomizedSessions: false});
                 } else if (args.mode == "randomized") {
                     event.save({randomizedSessions: true});
+                    event.save({sessionSize: args.size});
                 }
 
                 mgr.writeAck(socket, "proposed-mode");
@@ -716,7 +717,13 @@ _.extend(UnhangoutSocketManager.prototype, events.EventEmitter.prototype, {
                 value: isOpen
             });
         });
-
+        this.db.events.on("change:sessionSize", function(event, size) {
+            mgr.sync(event.getRoomId(), "state", {
+                path: ["event", "sessionSize"],
+                op: "set",
+                value: size
+            });
+        });
         this.db.events.on("change:adminProposedSessions", function(event, mode) {
             mgr.sync(event.getRoomId(), "state", {
                 path: ["event", "adminProposedSessions"],

public/css/screen.styl

@@ -941,6 +941,94 @@ user-admin-border-size = 2px
   width: 100%;
 }
 
+/* 
+* Dummy session display on event page
+*/
+.dummy-session {
+  padding: 0px;
+  border-radius: 5px;
+  width: 100%;
+  min-height: 85px;
+  background-color: #eee;
+  margin-bottom: 5px;
+
+  .group-area {
+    padding: 0px;
+    padding-top: 15px
+  }
+
+  .join-session {
+    padding: 0x;
+    padding-bottom: 15px;
+    padding-left: 10px;
+  }
+
+  .no-padding {
+    padding: 0px;
+  }
+
+  .btn-group-me {
+    padding: 0px;
+    color: #fff;
+    width: 100%;
+    -webkit-border-radius: 2px;
+    border-radius: 2px;
+    font-size: 14px;
+    font-weight: 300;
+    letter-spacing: 0.5px;
+    height: 30px;
+  }
+
+  .session-area {
+    padding: 0px;
+    padding-bottom: 15px;
+  }
+
+  h3 {
+    color: $primary;
+    font-weight: normal;
+    font-size: 1em;
+    padding: 0px;
+    margin: 0px;
+  }
+
+  hr {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    border-top: 1px solid #c0c0c0;
+  }
+
+  .session-spots {
+    padding: 0px;
+  }
+
+  .dummy-group-members {
+    margin-top: 5px;
+    margin-left: 0px;
+    margin-bottom: 10px;
+    padding: 0px;
+    padding-left: 15px;
+  }
+
+  .dummy-hangout-users {
+    margin-top: 5px;
+    margin-left: 0px;
+    margin-bottom: 10px;
+    padding: 0px;
+    padding-left: 0px;
+  }
+
+  .empty {
+    background-color: white;
+    border: 1px solid #dfdfdf;
+    float: left;
+    width: 30px;
+    height: 30px;
+    list-style: none;
+    border-radius: 2px;
+  }
+}
+
 /*
  * Session display on event page
  */

public/js/event-app.js

@@ -173,12 +173,20 @@ $(document).ready(function() {
         if(curEvent.get("randomizedSessions")) {
             $("#btn-propose-session").hide();
             $("#btn-create-session").hide();
-            $("#btn-group-me").show();
             $("#random-list").show();
             $("#topic-list").hide();
+            if(curEvent.get("sessionsOpen")) {
+                $(".btn-group-me").find(".text").text("JOIN");
+                $(".btn-group-me").find(".lock").hide();
+                $(".btn-group-me").attr("disabled", false);
+            } else {
+                $(".btn-group-me").find(".text").text("LOCKED");
+                $(".btn-group-me").addClass("disabled");
+                $(".btn-group-me").attr("disabled", true);
+            }
+            $(".empty-notice").hide();
         } else {
             $("#random-list").hide();
-            $("#btn-group-me").hide();
             if(!curEvent.get("adminProposedSessions")) {
                 $("#btn-propose-session").show();
                 $("#btn-create-session").hide();
@@ -192,7 +200,7 @@ $(document).ready(function() {
 
         if(IS_ADMIN) {
             curEvent.on("change:adminProposedSessions change:sessionsOpen change:open", _.bind(function() {
-                this.adminButtonView.render();  
+                this.adminButtonView.render(); 
             }, this));
         }
 
@@ -381,13 +389,16 @@ $(document).ready(function() {
         $("#linkedin_url").val(USER.preferredContact.linkedinURL);
         $("#noShareChkBox").prop("checked", USER.preferredContact.noShare);
 
-        var thisEventAssign = curEvent.get("sessions").find(function(sess) {
+        var thisEventAssign  = curEvent.get("sessions").find(function(sess) {
           return sess.get("assignedParticipants").indexOf(auth.USER_ID) !== -1;
         });
+
         if(thisEventAssign) {
-            $("#btn-group-me").find(".text").text("REGROUP ME");
+            $("#btn-regroup-me").show();
+            $(".dummy-session").hide();
         } else {
-            $("#btn-group-me").find(".text").text("GROUP ME");
+            $("#btn-regroup-me").hide();
+            $(".dummy-session").show();
         }
     }, app);
 

public/js/event-views.js

@@ -544,23 +544,28 @@ views.SessionListView = Backbone.Marionette.CollectionView.extend({
     itemView: views.SessionView,
     itemViewContainer: '#session-list-container',
     breakoutRoomsHeaderTemplate: _.template($("#breakout-rooms-header-template").html()),
-
+    dummySessionTemplate: _.template($("#dummy-session-template").html()),
+
     emptyView: Backbone.Marionette.ItemView.extend({
         template: "#session-list-empty-template"
     }),
 
     id: "session-list",
 
     events: {
-        'click #btn-group-me': 'groupUser',
-    },
+        'click .btn-group-me': 'groupUser',
+        'click #btn-regroup-me': 'groupUser'
+    },  
 
     initialize: function() {
         this.renderControls();
         this.listenTo(this.options.event, 'change:adminProposedSessions', this.render, this);
         this.listenTo(this.options.event, 'change:randomizedSessions', this.render, this);
         this.listenTo(this.options.event.get("sessions"), 'change:assignedParticipants', this.render, this);
+        this.listenTo(this.options.event.get("sessions"), 'change:assignedParticipants', this.simulateJoin, this);
         this.listenTo(this.options.event.get("sessions"), 'remove', this.render, this);
+        this.listenTo(this.options.event, 'change:sessionsOpen', this.modifyDummySessionJoinButton, this);
+        this.listenTo(this.options.event, 'change:sessionSize', this.render, this);
     },
 
     itemViewOptions: function() {        
@@ -574,9 +579,22 @@ views.SessionListView = Backbone.Marionette.CollectionView.extend({
     groupUser: function(jqevt) {
         jqevt.preventDefault();
         var thisEventAssign = this.getMySessionAssignment();
+        var mySessionConnected = this.getMySessionConnected();
+
         if(thisEventAssign) {
             var scope = $("#regroup-modal");
             scope.modal('show');
+            if(mySessionConnected) {
+                $(".modal-title", scope).text("Oops! We cannot regroup you.");
+                $(".warning", scope).show();
+                $(".info", scope).hide();
+                $(".regroup", scope).hide();
+            } else {
+                $(".modal-title", scope).text("Are you sure you want to regroup?");
+                $(".warning", scope).hide();
+                $(".info", scope).show();
+                $(".regroup", scope).show();
+            }
         } else {
             this.options.transport.send("assign-randomized-session", {
                 eventId: this.options.event.id,
@@ -586,6 +604,15 @@ views.SessionListView = Backbone.Marionette.CollectionView.extend({
 
     renderControls: function() {    
         this.$el.html(this.breakoutRoomsHeaderTemplate());
+        if(this.options.event.get("randomizedSessions")) {
+            this.$el.append(this.dummySessionTemplate());
+        } 
+    },
+
+    getMySessionConnected: function() {
+        return this.options.event.get("sessions").find(function(sess) {
+            return _.pluck(sess.get("connectedParticipants"), "id").indexOf(auth.USER_ID) !== -1;
+        });
     },
 
     getMySessionAssignment: function() {
@@ -594,19 +621,74 @@ views.SessionListView = Backbone.Marionette.CollectionView.extend({
         });
     },
 
-    onRender: function() {         
+    buildHangoutAndGroupMembers: function() {
+        var sessionSize = this.options.event.get("sessionSize");
+
+        var groupFragment = createFragment("groupFragment");
+        var groupMembers = $(".dummy-group-members");
+        groupMembers.empty().append(groupFragment);
+
+        var hangoutFragment = createFragment("hangoutFragment");
+        var hangoutUsers = $(".dummy-hangout-users");
+        hangoutUsers.empty().append(hangoutFragment);
+
+        function createFragment(fragment) {
+            fragment = document.createDocumentFragment();
+            for(var i = 0; i< sessionSize; i++) {
+                emptyli = document.createElement("li");
+                emptyli.className = "empty";
+                fragment.appendChild(emptyli);
+            }  
+            return fragment;
+        }
+    },
+
+    modifyDummySessionJoinButton: function() {
+        var event = this.options.event;
+        if(event.get("randomizedSessions")) {
+            if(event.get("sessionsOpen")) {
+                $(".btn-group-me").find(".text").text("JOIN");
+                $(".btn-group-me").find(".lock").hide();
+                $(".btn-group-me").attr("disabled", false);
+            } else {
+                $(".btn-group-me").find(".text").text("LOCKED");
+                $(".btn-group-me").addClass("disabled");
+                $(".btn-group-me").attr("disabled", true);
+            }
+        }
+    },
+
+    simulateJoin: function() {
+        if(!this.options.event.get("sessionsOpen")) {
+            return;
+        }
+        var session = this.getMySessionAssignment();
+        if(session) {
+            var url = "/session/" + session.get("session-key") +
+              "?nocache=" + new Date().getTime();
+            window.open(url);
+        }
+    },
+
+    onRender: function() { 
         if(this.options.event.get("randomizedSessions")) {
             $("#btn-propose-session").hide();
             $("#btn-create-session").hide();
-            $("#btn-group-me").show();
             var thisEventAssign = this.getMySessionAssignment();
             if(thisEventAssign) {
-                $("#btn-group-me").find(".text").text("REGROUP ME");
+                $("#btn-regroup-me").find(".text").text("REGROUP ME");
+                $("#btn-regroup-me").show();
+                $(".dummy-session").hide();
             } else {
-                $("#btn-group-me").find(".text").text("GROUP ME");
+                $("#btn-regroup-me").hide();
+                $(".dummy-session").show();
             }
+            this.modifyDummySessionJoinButton();
+            this.buildHangoutAndGroupMembers();
+            this.$el.find(".empty-notice").hide();  
         } else {
-            $("#btn-group-me").hide();
+            $("#btn-regroup-me").hide();
+            $(".dummy-session").hide();
             if(this.options.event.get("adminProposedSessions")) {
                 $("#btn-propose-session").hide();
                 $("#btn-create-session").show();
@@ -721,7 +803,8 @@ views.DialogView = Backbone.Marionette.Layout.extend({
         'click #set-iframe-code': 'setIframeCode',
         'click #propose': 'proposeSession', 
         'input .input-topic-title': 'fillTopicPreview',
-        'click #regroup': 'regroupUser'
+        'click #regroup': 'regroupUser',
+        'click #enable-randomized-sessions-mode': 'enableRandomizedSessionsMode'
     },
 
     addUrlToSessionMessage: function(event) {
@@ -737,6 +820,24 @@ views.DialogView = Backbone.Marionette.Layout.extend({
         );
     },
 
+    enableRandomizedSessionsMode: function(jqevt) {
+        jqevt.preventDefault();
+        var el = $("#randomized-sessions-modal input");
+        var val = el.val();
+
+        if(val > 10) {
+            val = 10; 
+        } else if (val < 0) {
+            val = 0;
+        }
+
+        this.options.transport.send("proposed-mode", {
+            roomId: this.options.event.getRoomId(),
+            size: val,
+            mode: "randomized"
+        });
+    },
+
     fillTopicPreview: function(event) {
         event.preventDefault();
 
@@ -1038,7 +1139,7 @@ views.AdminButtonView = Backbone.Marionette.Layout.extend({
         'mouseover #choose-breakout-mode': 'chooseBreakoutSubmenu',
         'click #admin-proposed-sessions-mode': 'disableParticipantProposedMode',
         'click #participant-proposed-sessions-mode': 'enableParticipantProposedMode',
-        'click #randomized-sessions-mode': 'enableRandomizedSessionsMode'
+        'click #randomized-sessions': "openRandomizedSessionsModal"
     },
 
     openSessions: function(jqevt) {
@@ -1098,9 +1199,9 @@ views.AdminButtonView = Backbone.Marionette.Layout.extend({
         this.changeSessionsProposedMode("participantProposed");
     },
 
-    enableRandomizedSessionsMode: function(jqevt) {
+    openRandomizedSessionsModal: function(jqevt) {
         jqevt.preventDefault();
-        this.changeSessionsProposedMode("randomized"); 
+        $("#randomized-sessions-modal").modal('show');
     },
 
     changeSessionsProposedMode: function(action) {

public/js/models.js

@@ -100,6 +100,7 @@ models.Event = models.BaseModel.extend({
             open: false,
             connectedUsers: null,
             sessions: null,
+            sessionSize: 10,
             hoa: null,
             youtubeEmbed: null,
             iframeEmbedCode: "",