messaging integration first steps

app/app.js

@@ -28,6 +28,7 @@ angular.module(
         'ngSanitize',
         'ngCookies',
         'ulakbus.formService',
+        'ulakbus.messagingService',
         'ulakbus.dashboard',
         'ulakbus.auth',
         'ulakbus.error_pages',

app/index.html

@@ -73,6 +73,7 @@
 
                 </div>
                 <right-sidebar></right-sidebar>
+                <messaging></messaging>
             </div>
         </div>
     </div>
@@ -111,6 +112,7 @@
 <script src="shared/directives.js"></script>
 <script src="zetalib/interceptors.js"></script>
 <script src="zetalib/form_service.js"></script>
+<script src="zetalib/messagingService.js"></script>
 <script src="zetalib/form_constraints.js"></script>
 <script src="zetalib/action_service.js"></script>
 <script src="zetalib/error_service.js"></script>

app/main.html

@@ -80,6 +80,7 @@
 
                 </div>
                 <right-sidebar></right-sidebar>
+                <messaging></messaging>
             </div>
         </div>
     </div>
@@ -119,6 +120,7 @@
 <script src="shared/directives.js"></script>
 <script src="zetalib/interceptors.js"></script>
 <script src="zetalib/form_service.js"></script>
+<script src="zetalib/messagingService.js"></script>
 <script src="zetalib/form_constraints.js"></script>
 <script src="zetalib/action_service.js"></script>
 <script src="zetalib/error_service.js"></script>

app/main.js

@@ -28,6 +28,7 @@ angular.module(
         'ngSanitize',
         'ngCookies',
         'ulakbus.formService',
+        'ulakbus.messagingService',
         'ulakbus.dashboard',
         'ulakbus.auth',
         'ulakbus.error_pages',

app/shared/directives.js

@@ -654,12 +654,57 @@ angular.module('ulakbus')
                             scope.$parent.model[changeEvent.target.name] = {
                                 file_name: changeEvent.target.files[0].name,
                                 file_content: scope.$parent.model[changeEvent.target.name]
-                            }
+                            };
                             document.querySelector('#image-preview').src = URL.createObjectURL(changeEvent.target.files[0]);
                         });
-                    }
+                    };
                     reader.readAsDataURL(changeEvent.target.files[0]);
                 });
             }
         }
+    })
+
+    // listen for message in directives below
+
+    .directive('messaging', function (Generator, MessagingService, $log, $rootScope) {
+        return {
+            templateUrl: 'shared/templates/directives/messaging/index.html',
+            restrict: 'E',
+            replace: true,
+            scope: {},
+            controller: function ($scope) {
+                $scope.messages = [];
+                $scope.$on("messages", function (event, data) {
+                    $log.debug("Message List Received", data);
+                    $scope.messages(data);
+                });
+
+                $scope.$on("message", function (event, data) {
+                    $log.debug("Message Received", data);
+                    // do relevant action here
+                });
+                
+            }
+        };
+    })
+
+    .directive('messageDetail', function (Generator, MessagingService, $log, $rootScope) {
+        return {
+            templateUrl: 'shared/templates/directives/messaging/detail.html',
+            restrict: 'E',
+            replace: true,
+            scope: {},
+            controller: function ($scope) {
+                $scope.messages = [];
+                $scope.$on("detailMessages", function (event, data) {
+                    $log.debug("Detail Message Received", data);
+                    $scope.messages = data;
+                });
+                $scope.$on("message", function (event, data) {
+                    $log.debug("Message Received", data);
+                    // do relevant action here
+                    // if channel_key belongs to detail screen then append msg to the end of the thread
+                });
+            }
+        };
     });

app/shared/templates/directives/messaging/detail.html

+<div class="conversation-section">
+
+    <div class="conversation-header">
+        <div class="conversation-user">
+            <div class="user-photo"><img src="../../../img/erkan.jpg"></div>
+            <div class="user-name">Erkan Öğümsöğütlü</div>
+        </div>
+        <div class="conversation-search">
+            <input type="text" placeholder="Arama Yap">
+        </div>
+        <div class="close-chat-app">
+            <span class="glyphicon glyphicon-remove"></span>
+        </div>
+    </div>
+
+    <div class="conversation-body">
+        <div class="conversation-body-inner">
+
+            <div class="beginning-of-conversation">
+                This is the beginning of the conversation
+            </div>
+
+            <div class="conversation-block clearfix">
+
+                <div class="conversation-actions">
+                    <div class="action">Edit</div>
+                    <div class="action">Delete</div>
+                </div>
+
+                <div class="user-photo">
+                    <img src="../../../img/erkan.jpg">
+                </div>
+                <div class="user-message">
+                    <div class="message-header clearfix">
+                        <div class="user-name">Erkan Öğümsöğütlü</div>
+                        <div class="message-time">13:16</div>
+                    </div>
+                    <div class="message-content">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer purus mauris.
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </div>
+
+    <div class="conversation-footer">
+
+        <textarea placeholder="Mesajını buraya yaz..."></textarea>
+        <div class="add-attachment">
+            <span class="glyphicon glyphicon-file"></span>
+            <span class="glyphicon glyphicon-picture"></span>
+        </div>
+
+    </div>
+
+</div>
\ No newline at end of file

app/shared/templates/directives/messaging/index.html

+<div class="chat-app">
+    <div class="chat-app-container">
+
+        <div class="side-navigation">
+
+            <ul class="channels">
+                <li class="title">CHANNELS <span class="badge">8</span></li>
+                <li class="notification">Channel One</li>
+            </ul>
+
+            <ul class="channels">
+                <li class="title">NOTIFICATIONS <span class="badge">8</span></li>
+                <li class="notification">Notification One</li>
+            </ul>
+
+            <ul class="direct-messages">
+                <li class="compose"><span class="glyphicon glyphicon-plus-sign"></span> Create New Message</li>
+                <li class="title">DIRECT MESSAGES <span class="badge">14</span></li>
+                <li class="online active notification">Erkan Öğümsöğütlü</li>
+            </ul>
+
+        </div>
+
+        <message-detail></message-detail>
+
+        <div class="create-new-message-window">
+            <div class="close-create-new-message-window"><span class="glyphicon glyphicon-remove"></span></div>
+            <input type="text" placeholder="Birini ismi ile ara...">
+            <div class="search-results">
+                <div class="user">
+                    <img src="../../../../img/erkan.jpg">
+                    <div class="user-name">Erkan Öğümsöğütlü</div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</div>
\ No newline at end of file

app/zetalib/messagingService.js

+/**
+ * Copyright (C) 2015 ZetaOps Inc.
+ *
+ * This file is licensed under the GNU General Public License v3
+ * (GPLv3).  See LICENSE.txt for details.
+ *
+ * @author Evren Kutar
+ */
+
+angular.module('ulakbus.messagingService', ['ui.bootstrap'])
+
+/**
+ * @memberof ulakbus.formService
+ * @ngdoc factory
+ * @name Generator
+ * @description form service's Generator factory service handles all generic form operations
+ */
+    .factory('MessagingService', function ($q, $timeout, $sce, $location, $route, $compile, $log, RESTURL, $rootScope, Moment, WSOps, FormConstraints, $uibModal) {
+        var msg = {};
+        msg.send = function (msg) {
+            /**
+             * send the message as following structure;
+             *
+             * MSG_TYPES can be follwing;
+             *
+             * MSG_TYPES = (
+             *      (1, "Info Notification"),
+             *      (11, "Error Notification"),
+             *      (111, "Success Notification"),
+             *      (2, "Direct Message"),
+             *      (3, "Broadcast Message"),
+             *      (4, "Channel Message")
+             * )
+             *
+             * {
+             *  'view':'_zops_create_message',
+             *  'message': {
+             *      'channel': "code_name of the channel",
+             *      'receiver': "Key of receiver. Can be blank for non-direct messages",
+             *      'client_id': "Client side unique id for referencing this message",
+             *      'title': "Title of the message. Can be blank.",
+             *      'body': "Message body.",
+             *      'type': zengine.messaging.model.MSG_TYPES,
+             *      'attachments': [{
+             *          'description': "Can be blank.",
+             *          'name': "File name with extension.",
+             *          'content': "base64 encoded file content"
+             *          }]
+             * }
+             *
+             * wait for response as
+             *
+             * {
+             *      'msg_key': "Key of the just created message object",
+             * }
+             *
+             */
+            function prepMsg(msg) {
+                var outgoing = {
+                    form_params: {
+                        view: '_zops_create_message',
+                        message: {
+                            'channel': msg.channel, // this can be both channel and direct msg. remember direct msg is channel
+                            'receiver': msg.receiver,
+                            'client_id': msg.client_id, // "Client side unique id for referencing this message",
+                            'title': msg.title, // "Title of the message. Can be blank.",
+                            'body': msg.body, // "Message body.",
+                            'type': msg.TYPE, // type can be one of the above
+                            // 'attachments': [{ // do it with fileread directive
+                            //     'description': "Can be blank.",
+                            //     'name': "File name with extension.",
+                            //     'content': "base64 encoded file content"
+                            // }]
+                        }
+                    }
+                };
+                return outgoing;
+            }
+
+            WSOps.request(prepMsg(msg)).then(function (data) {
+                $log.debug("message sent:", data);
+            });
+        };
+        msg.incoming = function () {
+            /**
+             *
+             */
+
+        };
+        /**
+         * use this method to get all messages of channel and direct messages
+         * REMEMBER; direct messages are also channels, everything is channel on backend!
+         * @param chnls
+         * @returns {*}
+         */
+        msg.get_channel = function (chnls) {
+            /**
+             * request channels as below;
+             *
+             * {
+             *    'view':'_zops_show_channel',
+             *    'channel_key': "Key of the requested channel"
+             * }
+             *
+             * wait for response
+             *
+             * {
+             *    'channel_key': "key of channel",
+             *    'description': string,
+             *    'no_of_members': int,
+             *    'member_list': [
+             *        {'name': string,
+             *         'is_online': bool,
+             *         'avatar_url': string,
+             *        }],
+             *    'last_messages': [
+             *        {'content': string,
+             *         'key': string,
+             *         'actions':[
+             *            {'title': string,
+             *             'cmd': string
+             *             }
+             *            ]
+             *        }
+             *    ]
+             * }
+             *
+             */
+            var outgoing = {
+                form_params: {
+                    view: '_zops_show_channel',
+                    channel_key: chnls.key
+                }
+            };
+            return WSOps.request(outgoing).then(function (data) {
+                $log.debug("message sent:", data);
+                return data;
+            });
+        };
+        msg.channels = [];
+
+        return msg;
+    });
\ No newline at end of file

app/zetalib/socket.js

@@ -127,9 +127,27 @@ angular.module('ulakbus')
                     // when error in message redirect to ErrorService with error data
                     return ErrorService.handle(msg_data, 'ws');
                 },
-                notification: function () {
+                message: function () {
                     // broadcast notifications data to notifications directive
-                    $rootScope.$broadcast('notifications', msg_data["notifications"]);
+                    // parse messages by type
+                    // (1, "Info Notification"),
+                    // (11, "Error Notification"),
+                    // (111, "Success Notification"),
+                    // (2, "Direct Message"),
+                    // (3, "Broadcast Message"),
+                    // (4, "Channel Message")
+                    var type = {
+                        1: "notifications",
+                        11: "notifications",
+                        111: "notifications",
+                        2: "message",
+                        3: "message",
+                        4: "message"
+                    };
+                    // this way it broadcasts to relevant listener
+                    // i group messages and notifications into 2 groups
+                    // necessary actions will taken where it is listened
+                    $rootScope.$broadcast(type[msg_data["type"]], msg_data);
                 },
                 dashboard: function () {
                     // dashboard consists of menu and user specifications

dist/css/app.css

@@ -2086,6 +2086,437 @@ table.dataTable thead .sorting:after {
 
 /* END OF ACADEMIC CALENDER DASHBOARD WIDGET */
 
+/* CHAT APPLICATION */
+
+.chat-app {
+	width: 800px;
+    height: 600px;
+    background-color: #fff;
+    position: fixed;
+    bottom: 15px;
+    right: 15px;
+	-moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.2);
+    box-shadow: 0px 0px 15px rgba(0,0,0,0.2);
+    z-index: 10;
+    border-radius: 3px;	
+}
+
+.chat-app .chat-app-container {
+	padding-left:240px;
+}
+
+.chat-app .side-navigation {
+	background-color: #8C1028;
+    width: 240px;
+    height: 100%;
+    position: absolute;
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+	overflow: auto;
+	padding-bottom: 20px;
+	left:0;
+}
+
+
+.chat-app .side-navigation ul {
+	margin: 0;
+    padding-left: 0;
+    padding-top: 15px;
+}
+
+.chat-app .side-navigation ul.channels {
+	border-bottom: 1px solid #9B1334;
+    padding-bottom: 15px;
+}
+
+.chat-app .side-navigation ul li {
+	list-style: none;
+    color: #fff;
+    font-size: 15px;
+    padding-left: 20px;
+    padding-bottom: 3px;
+    padding-top: 3px;
+	position:relative;
+	cursor:pointer;
+}
+
+.chat-app .side-navigation ul li:hover {
+	background-color:#B51533;
+}
+
+.chat-app .side-navigation ul li.title {
+	font-family:'robotobold';
+	cursor:default;
+}
+
+.chat-app .side-navigation ul li.title:hover {
+	background-color:transparent;
+}
+
+.chat-app .side-navigation ul li.title .badge {
+	position: relative;
+    top: -3px;
+    border-radius: 20px;
+    padding: 1px 7px;
+    width: auto;
+    height: auto;
+    background-color: #B51533;
+    border: none;
+    margin-left: 4px;
+	font-family: 'robotoblack';
+}
+
+.chat-app .side-navigation ul li.compose {
+	background-color: #6f0d20;
+    margin: 5px 10px;
+    border-radius: 3px;
+	padding-left: 33px !important;
+    padding-top: 8px;
+    padding-bottom: 8px;
+}
+
+.chat-app .side-navigation ul li.compose:hover {
+	background-color: #B51533;
+}
+
+.chat-app .side-navigation ul li.compose span {
+	position: absolute;
+    top: 12px;
+    left: 10px;
+}
+
+.chat-app .side-navigation ul li.compose:before {
+	display:none !important;
+}
+
+.chat-app .side-navigation ul.direct-messages li.title {
+	padding-left: 20px;
+}
+
+.chat-app .side-navigation ul.direct-messages li {
+	padding-left: 40px;
+}
+
+.chat-app .side-navigation ul.direct-messages li.active {
+	background-color: #B51533;
+}
+
+.chat-app .side-navigation ul.direct-messages li.title:before {
+	display:none;
+}
+
+.chat-app .side-navigation ul.direct-messages li:before {
+	content: " ";
+    width: 8px;
+    height: 8px;
+    background-color: rgba(255,255,255,0.3);
+    display: inline-block;
+    border-radius: 100%;
+    position: absolute;
+    left: 24px;
+    top: 9px;
+}
+
+.chat-app .side-navigation ul li.notification:after {
+	content: " ";
+    width: 8px;
+    height: 8px;
+    background-color: rgb(181, 21, 51);
+    display: inline-block;
+    border-radius: 100%;
+    position: absolute;
+    right: 24px;
+    top: 9px;
+}
+
+.chat-app .side-navigation ul.direct-messages li.online:before {
+	background-color:#CAFF4A;
+}
+
+.chat-app .conversation-section {
+	width: 100%;
+    height: 600px;
+}
+
+.chat-app .conversation-header {
+	height: 70px;
+    width: 560px;
+	border-bottom:1px solid #efefef;
+}
+
+.chat-app .conversation-header .conversation-user {
+	display: inline-block;
+    width: 280px;
+    margin-left: 23px;
+	float: left;
+}
+
+.chat-app .conversation-header .user-photo {
+	float: left;
+    margin-top: 20px;
+}
+
+.chat-app .conversation-header .user-name {
+	margin-top: 25px;
+    float: left;
+    margin-left: 10px;
+    font-family: 'robotobold';
+    font-size: 16px;
+}
+
+.chat-app .conversation-header .conversation-search {
+	display:inline-block;
+	float:left;
+}
+
+.chat-app .conversation-header .conversation-search input {
+	width: 180px;
+    height: 40px;
+    padding-left: 10px;
+    border: 1px solid #efefef;
+    border-radius: 3px;
+    outline: none;
+    margin-top: 15px;
+}
+
+.chat-app .conversation-header .close-chat-app {
+	display: inline-block;
+    float: left;
+    width: 40px;
+    height: 40px;
+    border: 1px solid #efefef;
+    text-align: center;
+    line-height: 40px;
+    margin-left: 10px;
+    border-radius: 3px;
+	margin-top:15px;
+}
+
+.chat-app .conversation-body {
+	overflow: auto;
+    height: calc(100% - 140px);
+	overflow-x: hidden;
+}
+
+.chat-app .conversation-footer {
+	height: 70px;
+    width: 560px;
+    position: absolute;
+    bottom: 0;
+	padding-left: 23px;
+    padding-right: 23px;
+    padding-top: 10px;
+}
+
+.chat-app .conversation-footer textarea {
+	outline: none;
+    resize: none;
+    width: calc(100% - 110px);
+    padding: 6px;
+    height: 50px;
+    border: 1px solid #efefef;
+    border-radius: 3px;
+	float:left;
+}
+
+.chat-app .conversation-footer .add-attachment {
+	float:left;
+}
+
+.chat-app .conversation-footer .add-attachment .glyphicon {
+    width: 50px;
+    height: 50px;
+    float: left;
+    border: 1px solid #efefef;
+    border-radius: 3px;
+    line-height: 50px;
+    text-align: center;
+    font-size: 20px;
+    top: 0;
+    margin-left: 5px;
+	color:#4D4D4D;
+	cursor:pointer;
+}
+
+.chat-app .conversation-footer .add-attachment .glyphicon:hover {
+	background-color:#efefef;
+	color:#000000;
+}
+
+
+.chat-app .conversation-section .conversation-header .conversation-user .user-photo img {
+	width:35px;
+	height:35px;
+	border-radius:100%;
+}
+
+.chat-app .conversation-section .conversation-body .beginning-of-conversation {
+	text-align: center;
+    font-family: 'robotobold';
+    font-size: 20px;
+    color: #ababab;
+    padding: 15px;
+    margin-bottom: 30px;
+    border-bottom: 1px solid #f3f3f3;
+}
+
+.chat-app .conversation-section .conversation-body .conversation-block {
+	display:block;
+	position:relative;
+	padding:5px 23px;
+	margin-bottom:10px;
+}
+
+.chat-app .conversation-section .conversation-body .conversation-block:hover {
+	background-color:#f5f5f5;
+}
+
+.chat-app .conversation-section .conversation-body .conversation-block .conversation-actions {
+	opacity:0;
+	width:0;
+	position:absolute;
+}
+
+.chat-app .conversation-section .conversation-body .conversation-block .conversation-actions .action {
+	background-color: #fff;
+    display: inline-block;
+    padding: 3px 9px;
+    border-radius: 3px;
+    border: 1px solid #ece8e8;
+    float: left;
+    margin-right: 5px;
+    cursor: pointer;
+    color: #696969;
+}
+
+.chat-app .conversation-section .conversation-body .conversation-block .conversation-actions .action:hover {
+	color:#000000;
+}
+
+.chat-app .conversation-section .conversation-body .conversation-block:hover > .conversation-actions {
+	opacity: 1;
+    width: 130px;
+    position: absolute;
+    top: -14px;
+    right: 0;
+}
+
+.chat-app .conversation-section .conversation-body .conversation-block .user-photo img {
+	width: 40px;
+    float: left;
+}
+
+.chat-app .conversation-section .conversation-body .conversation-block .user-photo img {
+	width:35px;
+	height:35px;
+	border-radius:100%;
+}
+
+.chat-app .conversation-section .conversation-body .conversation-block .user-message {
+	float: left;
+    width: calc(100% - 40px);
+	padding-left:10px;
+}
+
+.chat-app .conversation-section .conversation-body .conversation-block .user-message .user-name {
+	font-family: 'robotobold';
+    font-size: 16px;
+	float:left;
+}
+
+.chat-app .conversation-section .conversation-body .conversation-block .user-message .message-time {
+	float: left;
+    margin-left: 10px;
+    font-size: 11px;
+    color: #a0a0a0;
+	margin-top: 4px;
+}
+
+.chat-app .conversation-section .conversation-body .conversation-block .user-message .message-content {
+	font-family: 'robotomedium';
+}
+
+.chat-app .create-new-message-window {
+	position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 11;
+    background-color: rgba(255,255,255,0.97);
+	border-radius:3px;
+	display:none;
+}
+
+.chat-app .create-new-message-window input {
+	width: 50%;
+    margin-left: 25%;
+    margin-top: 90px;
+    height: 50px;
+    padding-left: 15px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+	outline:none;
+}
+
+.chat-app .close-create-new-message-window {
+	width: 50px;
+    height: 50px;
+    border: 1px solid #ccc;
+    border-radius: 100%;
+    text-align: center;
+    line-height: 50px;
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    font-size: 14px;
+    color: #a2a2a2;
+	cursor:pointer;
+}
+
+.chat-app .close-create-new-message-window:hover {
+	background-color:#efefef;
+	color:#000000;
+}
+
+.chat-app .create-new-message-window .search-results {
+	width: 50%;
+    margin-left: 25%;
+    margin-top: 25px;
+	height: calc(100% - 165px);
+    overflow: auto;
+}
+
+.chat-app .create-new-message-window .search-results .user {
+	width: 100%;
+    display: inline-block;
+    padding: 10px;
+    border-radius: 3px;
+	cursor:pointer;
+}
+
+.chat-app .create-new-message-window .search-results .user:hover {
+	background-color:#efefef;
+}
+
+.chat-app .create-new-message-window .search-results .user img {
+	width: 45px;
+    height: 45px;
+    border-radius: 100%;
+    float: left;
+}
+
+.chat-app .create-new-message-window .search-results .user .user-name {
+	float: left;
+    margin-left: 15px;
+    font-family: 'robotobold';
+    font-size: 18px;
+    margin-top: 9px;
+}
+
+
+/* END OF CHAT APPLICATION */
+
 
 /* Responsive: Portrait tablets and up */
 @media screen and (min-width: 768px) {
@@ -2235,10 +2666,6 @@ table.dataTable thead .sorting:after {
 }
 
 
-
-
-
-
 @media (max-width: 1000px) {
     .personnel-info-container {
         width:500px;

dist/index.html

@@ -64,6 +64,7 @@
 
                 </div>
                 <right-sidebar></right-sidebar>
+                <messaging></messaging>
             </div>
         </div>
     </div>