add disabled dropdown state. add dropdown filter option. change connection lists\logics

build/app.js

@@ -4,14 +4,15 @@ const store = window.store = new Store({
 	conference_id: 'LUCID-4',
 	connection: false,
 	webcamtypes: [
-		{text: 'Center', value: 'Center'},
-		{text: 'Right', value: 'Right'},
-		{text: 'Left', value: 'Left'},
+		{text: 'Center', value: 'Center', filter: 'OfficeUserLeft'},
+		{text: 'Right', value: 'Right', filter: 'RemoteUser'},
+		{text: 'Left', value: 'Left', filter: 'RemoteUser'},
 	],
 	userRoles: [
 		{text: 'Remote User', value: 'RemoteUser'},
-		{text: 'Office User Right', value: 'OfficeUserRight'},
-		{text: 'Office User Left', value: 'OfficeUserLeft'},
+		{text: 'Office User', value: 'OfficeUserLeft'},
+		/*{text: 'Office User Right', value: 'OfficeUserRight'},
+		{text: 'Office User Left', value: 'OfficeUserLeft'},*/
 	],
 });
 

build/view/CallScreen.js

@@ -103,24 +103,40 @@ Screen.Conference = function() {
 		store.set('userRole'+userID, userRoles[userID % userRoles.length].value);
 
 		var cameraCanvas, canvasResizerEl,
-		 dom = D.div({cls: 'block', style: {marginBottom: '80px'}},
-			D.div({cls: 'header'}, 'User '+(currentUserID+1)),
-			 canvasResizerEl = CanvasResizer(
-				cameraCanvas = D.h('canvas', {
-					cls: "output_canvas",
-					width: "640px",
-					height: "480px",
-					style: {
-						/*display: 'none',*/
-						width: '320px'
-					}
-				})
-			),
-
-			Select({values: 'userRoles', bind: store.bind('userRole'+userID), label: 'Your role'}),
-			Select({values: 'videoinput', bind: store.bind('videoinput'+userID), label: 'Camera device'}),
-			Select({values: 'webcamtypes', bind: store.bind('webcam'+userID), label: 'Camera position'})
-		);
+			dom = D.div( { cls: 'block', style: { marginBottom: '80px' } },
+				D.div( { cls: 'header' }, 'User ' + ( currentUserID + 1 ) ),
+				canvasResizerEl = CanvasResizer(
+					cameraCanvas = D.h( 'canvas', {
+						cls: "output_canvas",
+						width: "640px",
+						height: "480px",
+						style: {
+							/*display: 'none',*/
+							width: '320px'
+						}
+					} )
+				),
+
+				Select( {
+					values: 'userRoles',
+					bind: store.bind( 'userRole' + userID ),
+					label: 'Your role',
+					disabled: isConnected
+				} ),
+				Select( {
+					values: 'videoinput',
+					bind: store.bind( 'videoinput' + userID ),
+					label: 'Camera device',
+					disabled: isConnected
+				} ),
+				Select( {
+					values: 'webcamtypes',
+					bind: store.bind( 'webcam' + userID ),
+					label: 'Camera position',
+					filter: store.bind( 'userRole' + userID ),
+					disabled: isConnected
+				} )
+			);
 
 
 		var video1 = D.h('video');
@@ -228,7 +244,7 @@ Screen.Conference = function() {
 		userID++;
 		return dom;
 	}
-	var usersBlock;
+	var usersBlock, tooMuchUsers = new Store.Value.Boolean(false);
 	var dom = D.div({cls: 'top-bar'},
 		D.h('img', {src: 'amazon-logo.svg'}),
 		D.div({cls: 'buttons'},
@@ -247,8 +263,12 @@ Screen.Conference = function() {
 				generateUserUI()
 			),
 
-			D.h('button', {cls: ['button primary', {hidden: isConnected}],
-				onclick: ()=> usersBlock.appendChild(generateUserUI())
+			D.h('button', {cls: ['button primary', {hidden: Store.OR(isConnected, tooMuchUsers)}],
+				onclick: ()=> {
+					usersBlock.appendChild(generateUserUI())
+					if(userID > 1)
+						tooMuchUsers.set(true);
+				}
 			}, 'Add user'),
 
 

build/view/Select.js

+AddCss('/view/select.css');
 
 var Select = function(cfg) {
 	let isOpen = this.isOpen = new Store.Value.Boolean(false);
+	let isDisabled = this.isDisabled = cfg.disabled || new Store.Value.Boolean(false);
 
 	var table = D.div({cls: 'dropdown-list'}, _=>{
-		store.sub(cfg.values, function(val) {
+		store.sub([cfg.values, cfg.filter], function(val, filter) {
 			if(val){
+				var possibleValues = [];
 				_(val.map(function(v) {
+					if(cfg.filter && v.filter !== filter)
+						return;
+					possibleValues.push(v);
 					return D.div({cls: 'dropdown-item', 'data-id': v.value, onclick: function() {
 							cfg.bind.set(v.value);
 							isOpen.set(false);
 						}}, v.text)
 				}));
+
+				if(possibleValues.length){
+					var currentValue = cfg.bind.get();
+					if( !( possibleValues.find( val => val.value === currentValue ) ) ){
+						cfg.bind.set( possibleValues[ 0 ].value );
+					}
+				}
+
 			}
 		});
 	});
@@ -18,7 +32,8 @@ var Select = function(cfg) {
 		D.div({cls: 'form-field__label'},
 			D.span({cls: 'form-field__label-text'}, cfg.label),
 			D.div({cls: ['dropdown-field', {
-						'dropdown-field--opened': isOpen
+						'dropdown-field--opened': isOpen,
+						'dropdown-field--disabled': isDisabled
 					}]},
 				D.h('button', {
 						cls: 'dropdown-field__toggler',

build/view/select.css

+.dropdown-field--disabled button.dropdown-field__toggler {
+    border-bottom: 2px solid#999;
+    pointer-events: none;
+    color: #999;
+}
\ No newline at end of file