Reworked on chatbox in base template.
This commit is contained in:
Emanuel Schuetze
parent
b1dfd2a4e9
commit
3c0fcfebac
@ -21,6 +21,7 @@
|
||||
"angular-ui-tree": "~2.10.0",
|
||||
"angular-gettext": "~2.1.2",
|
||||
"angular-xeditable": "~0.1.9",
|
||||
"angular-scroll-glue": "~2.0.6",
|
||||
"ngBootbox": "~0.1.2",
|
||||
"sockjs": "~0.3.4",
|
||||
"font-awesome-bower": "~4.4.0",
|
||||
|
||||
@ -71,6 +71,10 @@ body {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
|
||||
/* ngAnimate classes */
|
||||
.animate-item.ng-enter {
|
||||
@ -93,8 +97,23 @@ body {
|
||||
100% { opacity: 1; background: none; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Chatbox */
|
||||
#chatbox {
|
||||
position: fixed;
|
||||
top: 50px;
|
||||
right: 0;
|
||||
width: 40%;
|
||||
border-color: #dddddd;
|
||||
border-width: 1px;
|
||||
box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.2);
|
||||
height: 200px;
|
||||
padding: 0 10px 10px 10px;
|
||||
z-index: 99;
|
||||
}
|
||||
#chatbox-text {
|
||||
overflow-y: scroll;
|
||||
height: 190px;
|
||||
}
|
||||
/* Header */
|
||||
#header {
|
||||
background-color: #333333;
|
||||
|
||||
@ -101,8 +101,17 @@ angular.module('OpenSlidesApp.core', [
|
||||
// Loads all projector data
|
||||
Projector.findAll();
|
||||
|
||||
// Loads all chat messages data
|
||||
ChatMessage.findAll();
|
||||
// Loads all chat messages data and their user_ids
|
||||
// TODO: add permission check if user has required chat permission
|
||||
// error if include 'operator' here:
|
||||
// "Circular dependency found: loadGlobalData <- operator <- loadGlobalData"
|
||||
//if (operator.hasPerms("core.can_use_chat")) {
|
||||
ChatMessage.findAll().then( function(chatmessages) {
|
||||
angular.forEach(chatmessages, function (chatmessage) {
|
||||
ChatMessage.loadRelations(chatmessage, 'user');
|
||||
});
|
||||
});
|
||||
//}
|
||||
|
||||
// Loads server time and calculates server offset
|
||||
$http.get('/core/servertime/').then(function(data) {
|
||||
@ -172,32 +181,41 @@ angular.module('OpenSlidesApp.core', [
|
||||
}
|
||||
])
|
||||
|
||||
.factory('Tag', ['DS', function(DS) {
|
||||
return DS.defineResource({
|
||||
name: 'core/tag',
|
||||
});
|
||||
}])
|
||||
.factory('Tag', [
|
||||
'DS',
|
||||
function(DS) {
|
||||
return DS.defineResource({
|
||||
name: 'core/tag',
|
||||
});
|
||||
}
|
||||
])
|
||||
|
||||
.factory('Config', ['DS', function(DS) {
|
||||
return DS.defineResource({
|
||||
name: 'core/config',
|
||||
idAttribute: 'key',
|
||||
});
|
||||
}])
|
||||
.factory('Config', [
|
||||
'DS',
|
||||
function(DS) {
|
||||
return DS.defineResource({
|
||||
name: 'core/config',
|
||||
idAttribute: 'key',
|
||||
});
|
||||
}
|
||||
])
|
||||
|
||||
.factory('ChatMessage', ['DS', function(DS) {
|
||||
return DS.defineResource({
|
||||
name: 'core/chatmessage',
|
||||
relations: {
|
||||
belongsTo: {
|
||||
'users/user': {
|
||||
localField: 'user',
|
||||
localKey: 'user_id',
|
||||
.factory('ChatMessage', [
|
||||
'DS',
|
||||
function(DS) {
|
||||
return DS.defineResource({
|
||||
name: 'core/chatmessage',
|
||||
relations: {
|
||||
belongsTo: {
|
||||
'users/user': {
|
||||
localField: 'user',
|
||||
localKey: 'user_id',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}])
|
||||
});
|
||||
}
|
||||
])
|
||||
|
||||
/* Model for a projector.
|
||||
*
|
||||
|
||||
@ -13,6 +13,7 @@ angular.module('OpenSlidesApp.core.site', [
|
||||
'ngCsvImport',
|
||||
'ngSanitize', // TODO: only use this in functions that need it.
|
||||
'ui.select',
|
||||
'luegg.directives',
|
||||
'xeditable',
|
||||
'ckeditor',
|
||||
])
|
||||
@ -752,22 +753,50 @@ angular.module('OpenSlidesApp.core.site', [
|
||||
};
|
||||
})
|
||||
|
||||
// counter of new (unread) chat messages
|
||||
.value('NewChatMessages', [])
|
||||
|
||||
// ChatMessage Controller
|
||||
.controller('ChatMessageCtrl', [
|
||||
'$scope',
|
||||
'$http',
|
||||
'ChatMessage',
|
||||
function ($scope, $http, ChatMessage) {
|
||||
'NewChatMessages',
|
||||
function ($scope, $http, ChatMessage, NewChatMessages) {
|
||||
ChatMessage.bindAll({}, $scope, 'chatmessages');
|
||||
$scope.unreadMessages = NewChatMessages.length;
|
||||
$scope.chatboxIsCollapsed = true;
|
||||
$scope.openChatbox = function () {
|
||||
$scope.chatboxIsCollapsed = !$scope.chatboxIsCollapsed;
|
||||
NewChatMessages = [];
|
||||
$scope.unreadMessages = NewChatMessages.length;
|
||||
}
|
||||
$scope.sendMessage = function () {
|
||||
angular.element('#messageSendButton').addClass('disabled');
|
||||
angular.element('#messageInput').attr('disabled', '');
|
||||
$http.post(
|
||||
'/rest/core/chatmessage/',
|
||||
{message: $scope.newMessage}
|
||||
)
|
||||
.success(function () {
|
||||
$scope.newMessage = '';
|
||||
angular.element('#messageSendButton').removeClass('disabled');
|
||||
angular.element('#messageInput').removeAttr('disabled');
|
||||
})
|
||||
.error(function () {
|
||||
angular.element('#messageSendButton').removeClass('disabled');
|
||||
angular.element('#messageInput').removeAttr('disabled');
|
||||
});
|
||||
};
|
||||
// increment unread messages counter for each new message
|
||||
$scope.$watch('chatmessages', function (newVal, oldVal) {
|
||||
// add new message id if there is really a new message which is not yet tracked
|
||||
if ((oldVal[oldVal.length-1].id != newVal[newVal.length-1].id) &&
|
||||
($.inArray(newVal[newVal.length-1].id, NewChatMessages) == -1)) {
|
||||
NewChatMessages.push(newVal[newVal.length-1].id);
|
||||
$scope.unreadMessages = NewChatMessages.length;
|
||||
}
|
||||
})
|
||||
}
|
||||
])
|
||||
|
||||
|
||||
@ -21,10 +21,43 @@
|
||||
<span class="navbar-text optional">{{ config('general_event_name') }}</span>
|
||||
</div>
|
||||
<div class="navbar-right" ng-controller="userMenu">
|
||||
<!-- login/logout button -->
|
||||
<div class="btn-group">
|
||||
<div ng-if="operator.isAuthenticated()">
|
||||
|
||||
<!-- chatbox -->
|
||||
<div ng-controller="ChatMessageCtrl" os-perms="core.can_use_chat" class="inline">
|
||||
<button ng-click="openChatbox()" class="btn btn-default">
|
||||
<i class="fa fa-comment"></i>
|
||||
<translate>Chat</translate>
|
||||
<span ng-if="unreadMessages > 0 && chatboxIsCollapsed" class="badge">
|
||||
{{ unreadMessages }}
|
||||
</span>
|
||||
</button>
|
||||
<div id="chatbox" class="well" uib-collapse="chatboxIsCollapsed">
|
||||
<div id="chatbox-text" scroll-glue>
|
||||
<ul class="list-unstyled">
|
||||
<li ng-repeat="chatmessage in chatmessages">
|
||||
<small class="grey">{{ chatmessage.timestamp | date:'HH:mm:ss' }}</small>
|
||||
<small>{{ chatmessage.user.short_name }}:</small>
|
||||
{{ chatmessage.message }}
|
||||
</ul>
|
||||
</div>
|
||||
<div id="chatbox-form">
|
||||
<form ng-submit="sendMessage()">
|
||||
<div class="input-group">
|
||||
<input ng-model="newMessage" id="messageInput" class="form-control" type="text">
|
||||
<span class="input-group-btn">
|
||||
<button type="submit" class="btn btn-default" id="messageSendButton">
|
||||
<i class="fa fa-comment"></i>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- user settings / logout button -->
|
||||
<div class="btn-group" dropdown is-open="status.isopen">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle>
|
||||
<i class="fa fa-user"></i>
|
||||
@ -149,22 +182,10 @@
|
||||
</div><!--/#content-->
|
||||
</div><!--/.row-->
|
||||
|
||||
<div ng-controller="ChatMessageCtrl">
|
||||
<ul>
|
||||
<li ng-repeat="chatmessage in chatmessages">
|
||||
{{ chatmessage.user.get_full_name() }} says {{ chatmessage.message }} on {{ chatmessage.timestamp }}
|
||||
</ul>
|
||||
<input ng-model="newMessage">
|
||||
<button ng-click="sendMessage()" class="btn btn-primary" translate>
|
||||
Chat
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<footer>
|
||||
<small>
|
||||
© Copyright 2011-2015 |
|
||||
Powered by <a href="http://openslides.org" target="_blank">OpenSlides</a> |
|
||||
© Copyright by <a href="http://www.openslides.org" target="_blank">OpenSlides</a> |
|
||||
<a ui-sref="version">Version</a>
|
||||
</small>
|
||||
</footer>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user