Fix loading participants into the sidebar

menu still broken Signed-off-by: Joas Schilling <coding@schilljs.com>
nextcloud · Aug 25, 2017 · bc0afbe · bc0afbe
1 parent 96baec5
commit bc0afbe
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 16 deletions.
diff --git a/js/models/participantcollection.js b/js/models/participantcollection.js
@@ -40,7 +40,7 @@
 		 */
 		setRoom: function(room) {
 			this.room = room;
-			this.url = OC.linkToOCS('apps/spreed/api/v1/room', 2) + '/' + this.room.get('token') + 'participants';
+			this.url = OC.linkToOCS('apps/spreed/api/v1/room', 2) + this.room.get('token') + '/participants';
 		},
 		// comparator: function(model) {
 		// 	return -(model.get('lastPing'));

diff --git a/js/views/participantview.js b/js/views/participantview.js
@@ -29,18 +29,17 @@
 
 	var uiChannel = Backbone.Radio.channel('ui');
 
-	var ITEM_TEMPLATE = '<li data-session-id="{{sessionId}}" data-participant="{{participantId}}" class="participant {{#if pariticipantIsOffline}}participant-offline{{/if}}">' +
-		'<div class="avatar " data-username="test1" data-displayname="User One" style="height: 32px; width: 32px; background-color: rgb(213, 231, 116); color: rgb(255, 255, 255); font-weight: normal; text-align: center; line-height: 32px; font-size: 17.6px;">U</div>' +
-		'<!--div class="avatar" data-username="{{participantId}}" data-displayname="{{participantDisplayName}}"></div-->' +
+	var ITEM_TEMPLATE = '<li data-session-id="{{sessionId}}" data-participant="{{userId}}" class="participant {{#if pariticipantIsOffline}}participant-offline{{/if}}">' +
+		'<div class="avatar" data-user-id="{{userId}}" data-displayname="{{displayName}}"></div>' +
 		'<span class="username" title="">' +
-			'{{username}}' +
+			'{{displayName}}' +
 			'{{#if participantIsOwner}}<span class="participant-moderator-indicator">(' + t('spreed', 'owner') + ')</span>{{/if}}' +
 			'{{#if participantIsModerator}}<span class="participant-moderator-indicator">(' + t('spreed', 'moderator') + ')</span>{{/if}}' +
 		'</span>' +
 		'{{#if canModerate}}' +
 			'<span class="actionOptionsGroup">' +
 				'<a href="#"><span class="icon icon-more"></span></a>' +
-				'<div class="popovermenu bubble hidden menu">' +
+				'<div class="popovermenu bubble menu">' +
 				'<ul>' +
 					'{{#if participantIsModerator}}' +
 					'<li>' +
@@ -49,7 +48,7 @@
 						'</a>' +
 					'</li>' +
 					'{{else}}' +
-						'{{if participantIsUser}}' +
+						'{{#if participantIsUser}}' +
 						'<li>' +
 							'<a href="#" class="menuitem action action-promote permanent">' +
 								'<span class="icon icon-rename"></span><span>' + t('spreed', 'Promote to moderator') + '</span>' +
@@ -93,7 +92,7 @@
 					if (!this.$el.is(target.closest('.participant'))) {
 						// Click was not triggered by this element -> close menu
 						this.menuShown = false;
-						this.toggleMenuClass();
+						//this.toggleMenuClass();
 					}
 				});
 			},
@@ -109,11 +108,17 @@
 				};
 			},
 			onRender: function() {
-				// TODO ?
-				// var roomURL, completeURL;
-				// this.initPersonSelector();
+				this.$el.find('.avatar').each(function() {
+					var element = $(this);
+					if (element.data('displayname')) {
+						element.avatar(element.data('user-id'), 32, undefined, false, undefined, element.data('displayname'));
+					} else {
+						element.avatar(element.data('user-id'), 32);
+					}
+				});
 			},
 			events: {
+				'click .actionOptionsGroup .icon-more': 'toggleMenu',
 				'click .actionOptionsGroup .action-promote': 'promoteToModerator',
 				'click .actionOptionsGroup .action-demote': 'demoteFromModerator',
 				'click .actionOptionsGroup .action-remove': 'removeParticipant'
@@ -130,6 +135,8 @@
 				this.toggleMenuClass();
 			},
 			toggleMenuClass: function() {
+				console.log(this.ui.participant.data('participant'));
+				console.log(this.menuShown);
 				this.ui.menu.toggleClass('open', this.menuShown);
 			},
 			promoteToModerator: function() {

diff --git a/js/views/roomlistview.js b/js/views/roomlistview.js
@@ -354,15 +354,18 @@
 			var token = this.ui.room.attr('data-token');
 			OCA.SpreedMe.Calls.join(token);
 
+			console.log("joinRoom");
 			if (!_.isUndefined(this.model)) {
 				console.log("participants");
 				var participantCollection = new OCA.SpreedMe.Models.ParticipantCollection();
 				participantCollection.setRoom(this.model);
 
 				var participantView = new OCA.SpreedMe.Views.ParticipantView({
-					el: '#app-navigation ul',
+					el: '#participantTabView ul',
 					collection: participantCollection
 				});
+				participantCollection.fetch();
+				participantView.render();
 			}
 
 			OC.Util.History.pushState({

diff --git a/lib/Controller/RoomController.php b/lib/Controller/RoomController.php
@@ -428,7 +428,7 @@ public function getParticipants($token) {
 		$participants = $room->getParticipants();
 		$results = [];
 
-		foreach ($participants['user'] as $userId => $participant) {
+		foreach ($participants['users'] as $userId => $participant) {
 			$user = $this->userManager->get($userId);
 			if (!$user instanceof IUser) {
 				continue;

diff --git a/templates/index.php b/templates/index.php
@@ -56,9 +56,9 @@
 			</ul>
 
 			<div class="tabsContainer">
-				<div id="shareTabView" class="tab shareTabView">
-					<div class="shareeListView subView">
-						<ul id="shareWithList" class="shareWithList">
+				<div id="participantTabView" class="tab participantTabView">
+					<div class="participantListView subView">
+						<ul id="participantWithList" class="participantWithList">
 							<li data-share-id="2" data-share-type="0" data-share-with="test1" class="participant-moderator">
 								<div class="avatar " data-username="test1" data-displayname="User One" style="height: 32px; width: 32px; background-color: rgb(213, 231, 116); color: rgb(255, 255, 255); font-weight: normal; text-align: center; line-height: 32px; font-size: 17.6px;">U</div>
 								<span class="username" title="">