Add UI to rename calls.

Signed-off-by: Ivan Sein <ivan@nextcloud.com>

css/style.css

@@ -90,7 +90,8 @@
 	display: block !important;
 }
 
-.private-room {
+.private-room,
+.hidden-important {
 	display: none !important;
 }
 
@@ -111,6 +112,26 @@
 	opacity: .5;
 }
 
+.rename-input {
+	margin-top: 0px !important;
+	margin-bottom: 4px !important;
+}
+
+.icon-confirm.rename-confirm {
+	background-size: 16px;
+	background-color: transparent;
+	border: none;
+	position: absolute;
+	right: -5px;
+	top: 38px;
+	padding: 16px;
+	opacity: .5;
+}
+
+.icon-confirm.rename-confirm:hover  {
+	opacity: 1;
+}
+
 
 #videos {
 	position: absolute;

js/views/roomlistview.js

@@ -43,6 +43,16 @@
 										'<span>'+t('spreed', 'Add person')+'</span>'+
 									'</button>'+
 								'</li>'+
+								'{{#isNameEditable}}'+
+								'<li>'+
+									'<button class="rename-room-button">'+
+										'<span class="icon-rename"></span>'+
+										'<span>'+t('spreed', 'Rename')+'</span>'+
+									'</button>'+
+								'</li>'+
+								'<input class="hidden-important rename-element rename-input" maxlength="200" type="text"/>'+
+								'<button class="icon-confirm hidden-important rename-element rename-confirm"></button>'+
+								'{{/isNameEditable}}'+
 								'<li>'+
 									'<button class="share-link-button">'+
 										'<span class="icon-public"></span>'+
@@ -74,6 +84,7 @@
 				this.render();
 			},
 			'change:type': function() {
+				this.render();
 				this.checkSharingStatus();
 			}
 		},
@@ -126,6 +137,8 @@
 		events: {
 			'click .app-navigation-entry-utils-menu-button button': 'toggleMenu',
 			'click .app-navigation-entry-menu .add-person-button': 'addPerson',
+			'click .app-navigation-entry-menu .rename-room-button': 'showRenameInput',
+			'click .app-navigation-entry-menu .rename-confirm': 'confirmRoomRename',
 			'click .app-navigation-entry-menu .share-link-button': 'shareGroup',
 			'click .app-navigation-entry-menu .leave-group-button': 'leaveGroup',
 			'click .icon-delete': 'unshareGroup',
@@ -183,6 +196,45 @@
 			this.ui.personSelectorForm.toggleClass('hidden');
 			this.ui.personSelectorInput.select2('open');
 		},
+		showRenameInput: function() {
+			var currentRoomName = this.model.get('name');
+
+			this.$el.find('.rename-element').removeClass('hidden-important');
+			this.$el.find('.rename-room-button').addClass('hidden-important');
+
+			if (currentRoomName) {
+				this.$el.find('.rename-input').val(currentRoomName);
+			}
+
+			this.$el.find('.rename-input').focus();
+		},
+		confirmRoomRename: function() {
+			var currentRoomName = this.model.get('name');
+			var newRoomName = $.trim(this.$el.find('.rename-input').val());
+
+			this.$el.find('.rename-element').addClass('hidden-important');
+			this.$el.find('.rename-room-button').removeClass('hidden-important');
+
+			if (currentRoomName !== newRoomName) {
+				console.log('Changing room name to: '+newRoomName+' from: '+currentRoomName);
+				this.renameRoom(newRoomName);
+			}
+		},
+		renameRoom: function(roomName) {
+			var app = OCA.SpreedMe.app;
+
+			// This should be the only case
+			if ((this.model.get('type') !== 1) && (roomName.length <= 200)) {
+				$.ajax({
+					url: OC.generateUrl('/apps/spreed/api/room/') + this.model.get('id'),
+					type: 'PUT',
+					data: 'roomName='+roomName,
+					success: function() {
+						app.syncRooms();
+					}
+				});
+			}
+		},
 		shareGroup: function() {
 			var app = OCA.SpreedMe.app;
 

lib/Controller/ApiController.php

@@ -159,6 +159,7 @@ class ApiController extends Controller {
 			'type' => $room->getType(),
 			'name' => $room->getName(),
 			'displayName' => $room->getName(),
+			'isNameEditable' => ($room->getType() !== Room::ONE_TO_ONE_CALL),
 			'count' => $room->getNumberOfParticipants(time() - 30),
 			'lastPing' => isset($participants['users'][$this->userId]['lastPing']) ? $participants['users'][$this->userId]['lastPing'] : 0,
 			'sessionId' => isset($participants['users'][$this->userId]['sessionId']) ? $participants['users'][$this->userId]['sessionId'] : '0',