Skip to content

Commit

Permalink
Merge pull request #6 from GiorgiB97/chat
Browse files Browse the repository at this point in the history 
Chat
  • Loading branch information
@GiorgiB97
GiorgiB97 authored May 24, 2017
2 parents 2d768f4 + b655d63 commit 7a3d15b
Show file tree
Hide file tree
Showing 20 changed files with 1,236 additions and 2 deletions.
4 changes: 3 additions & 1 deletion src/app/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ body {
}

#main-view {
padding-bottom: @navbar-height;
//padding-bottom: @navbar-height;
}

#content-view {
Expand Down Expand Up @@ -72,6 +72,8 @@ body {
}
}

*{outline: 0;}

/**
* Do not remove the comments below. It's the markers used by gulp-inject to inject
* all your less files automatically
Expand Down
3 changes: 2 additions & 1 deletion src/app/index.module.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@

'app.dashboard',
'app.calendar',
'app.fileManager'
'app.fileManager',
'app.chat'
]);

})();
126 changes: 126 additions & 0 deletions src/app/main/apps/chat/chat.controller.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
(function () {
'use strict';

angular
.module('app.chat')
.controller('ChatController', ChatControllerFn);

/** @ngInject */
function ChatControllerFn($scope, $log, $http, Users, Chats, omAside) {
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;
vm.isContactsAccordionOpened = true;
vm.searched = "";

vm.selected = null;
vm.chatName = "";
vm.chatNameEditing = false;
vm.userMessages = {};
vm.messageToSend = "";
vm.messageInputClicked = false;

vm.currentView = "chat-view";
vm.isOffCanvasMenuOpened = false;
vm.seeUserInfo = null;

// Methods
vm.openChat = openChat;
vm.sendMessage = sendMessage;
vm.deleteChat = deleteChat;
vm.toggleAside = toggleAside;
vm.hasOffCanvasClass = hasOffCanvasClass;
vm.isChatNameEditing = isChatNameEditing;

init();

///////////

function init() {

}

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("Loaded Messages : ",vm.userMessages);
}

function isChatNameEditing(confirm) {
if(confirm) {
if (vm.chatName != "") {
vm.selected.name = vm.chatName;
vm.chatNameEditing = false;
} else {
vm.chatName = vm.selected.name;
vm.chatNameEditing = false;
}
}else{
vm.chatName = vm.selected.name;
vm.chatNameEditing = false;
}
}

function sendMessage(msg, who, $event, buttonClicked) {
if ($event.keyCode == 13) $event.preventDefault();

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

vm.messageToSend = "";
}
}

function deleteChat(selected) {
var del = Lobibox.confirm({
title: "Delete Chat ?",
msg: "Do you want to delete chat '"+selected.name+"' ?",
callback: function ($this, type, ev) {
if(type == "yes"){
var i = vm.chats.indexOf(selected);
if(i > -1) {
vm.chats.splice(i, 1);
vm.selected = null;
vm.seeUserInfo = null;
}
}
}
});
del.show();
}

function toggleAside(id) {
vm.seeUserInfo = null;
omAside.toggle(id);
vm.hasOffCanvasClass(id);
}

function hasOffCanvasClass(id) {
if (angular.element('#' + id).hasClass('is-off-canvas')) {
vm.isOffCanvasMenuOpened = true;
}
$log.debug(vm.isOffCanvasMenuOpened);
}
}
})();
137 changes: 137 additions & 0 deletions src/app/main/apps/chat/chat.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
<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}}
<span class="contact-last-online label status-{{vm.selected.status}}">{{vm.selected.status}}</span>
</span>
<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>
</div>
<i class="fa fa-info-circle pull-right chat-info" aria-hidden="true"
ng-click="vm.toggleAside('chatInfoAside')"></i>
<i class="fa fa-trash pull-right chat-delete" aria-hidden="true" ng-click="vm.deleteChat(vm.selected)"></i>
</div>
</div>

<div class="main clearfix">

<div class="off-canvas__container off-canvas__content clearfix">

<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}}
</div>
<div class="heading" ng-if="vm.selected.username != undefined"><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">
<a class="list-group-item" ng-repeat="member in vm.selected.members"
ng-click="vm.seeUserInfo = vm.users[member]">
<img ng-src="{{vm.users[member].thumb}}">&nbsp;&nbsp;{{vm.users[member].username}}
</a>
</div>
<div class="list-group" ng-if="vm.selected.username != undefined && vm.seeUserInfo == null">
<a class="list-group-item" ng-repeat="userProp in vm.selected">&nbsp;&nbsp;{{userProp}}</a>
</div>
<div class="list-group" ng-if="vm.seeUserInfo != null">
<span class="cancel-user-info">
<i class="fa fa-arrow-circle-left" aria-hidden="true" ng-click="vm.seeUserInfo = null"></i>
</span>
<a class="list-group-item" ng-repeat="userProp in vm.seeUserInfo">&nbsp;&nbsp;{{userProp}}</a>
</div>

</div>

<div class="left-side-wrapper">
<div class="chat-user-search">
<i class="search-icon fa fa-search" aria-hidden="true"></i>
<input class="search-input" type="text" placeholder="Search user or chat" ng-model="vm.searched">
</div>
<uib-accordion close-others="false">
<div uib-accordion-group class="panel-default" is-open="vm.isChatsAccordionOpened">
<uib-accordion-heading>
Chats
<i class="pull-right glyphicon"
ng-class="{'glyphicon-chevron-down': vm.isChatsAccordionOpened,'glyphicon-chevron-right': !vm.isChatsAccordionOpened}">
</i>
</uib-accordion-heading>
<div ng-include="'app/main/apps/chat/view/chat-view.html'"></div>
</div>
<div uib-accordion-group class="panel-default" is-open="vm.isContactsAccordionOpened">
<uib-accordion-heading>
Contacts
<i class="pull-right glyphicon"
ng-class="{'glyphicon-chevron-down': vm.isContactsAccordionOpened,'glyphicon-chevron-right': !vm.isContactsAccordionOpened}">
</i>
</uib-accordion-heading>
<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="row" ng-if="message != null">
<div class="left-side clearfix pull-left" ng-show="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">

<span 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}}
</span>
</div>

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

<span 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}}
</span>

</div>

</div>

</div>

</div>

</div>

<div class="message-input" ng-show="vm.selected != null">
<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
class="fa fa-paper-plane" aria-hidden="true"></i></button>
</div>
</div>

</div>

</div>
Loading

0 comments on commit 7a3d15b

Please sign in to comment.