Skip to content

Commit

Permalink
Merge pull request #10 from GiorgiB97/chat
Browse files Browse the repository at this point in the history 
Chat
  • Loading branch information
@thecodeholic
thecodeholic authored Jun 6, 2017
2 parents 9dddfcf + c05a098 commit 3484bc9
Show file tree
Hide file tree
Showing 7 changed files with 164 additions and 172 deletions.
43 changes: 30 additions & 13 deletions src/app/main/apps/chat/chat.controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,13 @@
.controller('ChatController', ChatControllerFn);

/** @ngInject */
function ChatControllerFn($scope, $log, $http, Users, Chats, omAside) {
function ChatControllerFn($scope, $log, $http, Users, Chats, omAside, apiService) {
var vm = this;
// Data
vm.users = Users.data; //for ng-repeat in html
vm.usersArray = $.map(vm.users, function (value, index) { //for searching through
return [value];
});

vm.chats = Chats.data;

vm.isChatsAccordionOpened = true;
Expand Down Expand Up @@ -45,19 +44,38 @@

function init() {

//Auto Resize TextArea
$scope.$watch("vm.messageToSend", function (newValue) {
var element = document.getElementById("chat-textarea");
var chatContent = document.getElementById("chat-content");
//console.log(newValue);
if(newValue === ""){
element.style.height = "60px";
chatContent.style.height = "100%";
}else {
element.style.height = element.scrollHeight + "px";
var chatOffset = element.scrollHeight - 60;
chatContent.style.height = chatOffset > 0 ? "calc(100% - " + chatOffset + "px)" : "100%";
}
});
//--Auto Resize TextArea

}

function openChat(chatId, chat) {
vm.seeUserInfo = null;
vm.messageToSend = "";
vm.userMessages = $http.get('app/main/apps/chat/data/messages/' + chatId + '.json')
.then(function (response) {
vm.selected = chat;
vm.chatName = chat.name;
return response.data;
}, function (error) {
return 'There was an error getting data' + error;
});
console.log(apiService.resolve('chat').get({id:chatId}));
apiService.resolve('chat').get({id:chatId}, function(response){
vm.userMessages = response.data;
});
// .then(function (response) {
// console.log(arguments);
// vm.userMessages = response.data;
// });

vm.selected = chat;
vm.chatName = chat.name;
console.log("Loaded Messages : ",vm.userMessages);
}

Expand All @@ -81,13 +99,12 @@

if ((buttonClicked || $event.keyCode == 13) && msg != "")
{
vm.userMessages.$$state.value.data.push({
"id": vm.userMessages.$$state.value.data.length + 1,
vm.userMessages.push({
"id": vm.userMessages.length + 1,
"who": who,
"what": msg,
"when": moment().format('HH:mm, DD/MM/YYYY')
});

vm.messageToSend = "";
}
}
Expand Down
117 changes: 58 additions & 59 deletions src/app/main/apps/chat/chat.html
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,24 @@
<div id="chat">
<div class="top-menu">
<div class="menu-left text-center">
<span class="chat-title">Chat</span>
</div>
<div class="menu-right text-center" ng-show="vm.selected != null">
<span class="contact-name" ng-show="vm.selected.username != undefined">{{vm.selected.username}}
<div class="contact-name" ng-show="vm.selected.username != undefined">{{vm.selected.username}}
<span class="contact-last-online label status-{{vm.selected.status}}">{{vm.selected.status}}</span>
</span>
</div>
<div ng-show="vm.selected.name != undefined">
<span class="contact-name" ng-show="!vm.chatNameEditing">{{vm.selected.name}}</span>
<input class="contact-name-edit" type="text" ng-show="vm.chatNameEditing" ng-model="vm.chatName">
<i class="fa fa-pencil" aria-hidden="true" ng-show="!vm.chatNameEditing"
ng-click="vm.chatNameEditing = true"></i>
<i class="fa fa-check" aria-hidden="true" ng-show="vm.chatNameEditing"
ng-click="vm.isChatNameEditing(true)"></i>
<i class="fa fa-times" aria-hidden="true" ng-show="vm.chatNameEditing"
ng-click="vm.isChatNameEditing(false)"></i>
<button class="btn btn-default btn-icon" ng-click="vm.chatNameEditing = true"
ng-show="!vm.chatNameEditing">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
<button class="btn btn-default btn-icon" ng-click="vm.isChatNameEditing(true)"
ng-show="vm.chatNameEditing">
<i class="fa fa-check" aria-hidden="true"></i>
</button>
<button class="btn btn-default btn-icon" ng-click="vm.isChatNameEditing(false)"
ng-show="vm.chatNameEditing">
<i class="fa fa-times" aria-hidden="true"></i>
</button>
</div>
<i class="fa fa-info-circle pull-right chat-info" aria-hidden="true"
ng-click="vm.toggleAside('chatInfoAside')"></i>
Expand All @@ -30,10 +33,10 @@
<div om-aside om-slide-direction="right" id="chatInfoAside" class="off-canvas__nav nav-right">

<div class="heading" ng-if="vm.selected.name != undefined">
<i class="fa fa-star" aria-hidden="true"></i>&nbsp;&nbsp;{{vm.selected.name}}
<i class="fa fa-star" aria-hidden="true"></i>&nbsp;&nbsp;{{vm.selected.name}}
</div>
<div class="heading" ng-if="vm.selected.username != undefined">
<i class="fa fa-star" aria-hidden="true"></i>&nbsp;&nbsp;{{vm.selected.username}}
<i class="fa fa-star" aria-hidden="true"></i>&nbsp;&nbsp;{{vm.selected.username}}
</div>

<div class="list-group" ng-if="vm.selected.name != undefined && vm.seeUserInfo == null">
Expand All @@ -55,55 +58,49 @@
</div>

<div class="left-side-wrapper">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<div class="input-group search-group">
<input type="text" class="search-input form-control" placeholder="Search for..."
ng-model="vm.searched">
<span class="input-group-btn">
<button class="btn btn-default btn-icon" type="button">
<i class="search-icon fa fa-search" aria-hidden="true"></i>
</button>
</span>
</div><!-- /input-group -->

<uib-accordion close-others="false">
<div uib-accordion-group class="panel-default" heading="Chats" is-open="vm.isChatsAccordionOpened" template-url="chat-group-template.html">
<div uib-accordion-group class="panel-default" heading="Chats" is-open="vm.isChatsAccordionOpened"
template-url="chat-group-template.html">
<div ng-include="'app/main/apps/chat/view/chat-view.html'"></div>
</div>
<div uib-accordion-group class="panel-default" heading="Contacts" is-open="vm.isContactsAccordionOpened" template-url="chat-group-template.html">
<div uib-accordion-group class="panel-default" heading="Contacts"
is-open="vm.isContactsAccordionOpened" template-url="chat-group-template.html">
<div ng-include="'app/main/apps/chat/view/user-view.html'"></div>
</div>
</uib-accordion>
</div>

<div class="messages">

<div class="chat-content" ng-show="vm.selected != null">
<div id="{{message.id}}" class="message" ng-if="vm.userMessages.$$state.value.data[0] != null"
ng-repeat="message in vm.userMessages.$$state.value.data"
ng-class="{'margin-top-20':vm.userMessages.$$state.value.data[$index-1].who != message.who}">

<div class="" ng-if="message != null">
<div class="left-side clearfix pull-left" ng-if="message.who != 'me'">

<img class="message-by pull-left" ng-src="{{vm.users[message.who].thumb}}"
ng-show="vm.userMessages.$$state.value.data[$index-1].who != message.who"
uib-tooltip="{{vm.users[message.who].name}}" tooltip-popup-delay="200"
tooltip-placement="right">

<div class="message-by-other pull-left text-left"
uib-tooltip="{{message.when | date:'HH:mm, dd/MM/yyyy'}}"
tooltip-popup-delay="200" tooltip-placement="right">
{{message.what}}
</div>
</div>

<div class="right-side clearfix pull-right" ng-if="message.who == 'me'">

<div class="message-by-me pull-right text-right"
uib-tooltip="{{message.when | date:'HH:mm, dd/MM/yyyy'}}"
tooltip-popup-delay="200" tooltip-placement="left">
{{message.what}}
</div>

<div id="chat-content" class="chat-content" ng-show="vm.selected != null">
<div id="{{message.id}}" class="message clearfix"
ng-if="vm.userMessages != null"
ng-repeat="message in vm.userMessages"
ng-class="{'margin-top-20':vm.userMessages[$index-1].who != message.who}">

<div class="clearfix" ng-class="message.who !== 'me' ? 'left-side' : 'right-side'">

<img class="message-thumb pull-left" ng-src="{{vm.users[message.who].thumb}}"
ng-show="vm.userMessages[$index-1].who != message.who"
uib-tooltip="{{vm.users[message.who].username}}" tooltip-popup-delay="200"
tooltip-placement="right"
ng-class="{'hide':message.who === 'me'}">

<div class="message-by" uib-tooltip="{{message.when | date:'HH:mm, dd/MM/yyyy'}}"
tooltip-popup-delay="200"
tooltip-placement="{{message.who !== 'me' ? 'right' : 'left'}}"
ng-class="message.who !== 'me' ? 'other' : 'me'">
{{message.what}}
</div>

</div>
Expand All @@ -115,13 +112,14 @@
</div>

<div class="message-input" ng-show="vm.selected != null">
<textarea class="message-field" placeholder="Enter message and hit enter"
<textarea id="chat-textarea" class="message-field" placeholder="Enter message and hit enter"
ng-model="vm.messageToSend" ng-class="{'active': vm.messageInputClicked}"
ng-focus="vm.messageInputClicked = true"
ng-blur="vm.messageInputClicked = false"
ng-keydown="vm.sendMessage(vm.messageToSend,'me', $event, false)">
</textarea>
<button class="send" ng-click="vm.sendMessage(vm.messageToSend, 'me', $event, true)"><i
<button class="send btn btn-default btn-icon"
ng-click="vm.sendMessage(vm.messageToSend, 'me', $event, true)"><i
class="fa fa-paper-plane" aria-hidden="true"></i></button>
</div>
</div>
Expand All @@ -130,16 +128,17 @@


<script type="text/ng-template" id="chat-group-template.html">
<div class="panel {{panelClass || 'panel-default'}}">
<div class="panel-heading">
<h4 class="panel-title" uib-accordion-header tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading">
{{heading}} <i class="pull-right glyphicon glyphicon-chevron-right"></i>
</h4>
</div>
<div class="panel-collapse collapse" uib-collapse="!isOpen">
<div class="panel-body" style="text-align: right" ng-transclude></div>
</div>
</div>
<div class="panel {{panelClass || 'panel-default'}}">
<div class="panel-heading">
<h4 class="panel-title" uib-accordion-header tabindex="0" class="accordion-toggle"
ng-click="toggleOpen()" uib-accordion-transclude="heading">
{{heading}} <i class="pull-right glyphicon glyphicon-chevron-right"></i>
</h4>
</div>
<div class="panel-collapse collapse" uib-collapse="!isOpen">
<div class="panel-body" style="text-align: right" ng-transclude></div>
</div>
</div>
</script>

</div>
Loading

0 comments on commit 3484bc9

Please sign in to comment.