From 91bae3bf502101f311e6379f9fcd20bd81085c75 Mon Sep 17 00:00:00 2001 From: dewitast <dewitast20@gmail.com> Date: Thu, 8 Feb 2018 08:34:29 +0700 Subject: [PATCH] Add chat room --- app/code/Magento/Messaging/Block/Room.php | 7 +++ .../Messaging/Controller/Room/Index.php | 22 ++++++++ .../frontend/layout/messaging_index_index.xml | 2 +- .../frontend/layout/messaging_room_index.xml | 14 +++++ .../view/frontend/templates/messaging.phtml | 4 -- .../view/frontend/templates/room.phtml | 55 +++++++++++++++++++ 6 files changed, 99 insertions(+), 5 deletions(-) create mode 100644 app/code/Magento/Messaging/Block/Room.php create mode 100644 app/code/Magento/Messaging/Controller/Room/Index.php create mode 100644 app/code/Magento/Messaging/view/frontend/layout/messaging_room_index.xml create mode 100644 app/code/Magento/Messaging/view/frontend/templates/room.phtml diff --git a/app/code/Magento/Messaging/Block/Room.php b/app/code/Magento/Messaging/Block/Room.php new file mode 100644 index 00000000000..f6472a4262a --- /dev/null +++ b/app/code/Magento/Messaging/Block/Room.php @@ -0,0 +1,7 @@ +<?php +namespace Magento\Messaging\Block; + +class Room extends \Magento\Framework\View\Element\Template +{ + +} \ No newline at end of file diff --git a/app/code/Magento/Messaging/Controller/Room/Index.php b/app/code/Magento/Messaging/Controller/Room/Index.php new file mode 100644 index 00000000000..d0182fc9421 --- /dev/null +++ b/app/code/Magento/Messaging/Controller/Room/Index.php @@ -0,0 +1,22 @@ +<?php + +namespace Magento\Messaging\Controller\Room; + +use Magento\Framework\App\Action\Context; + +class Index extends \Magento\Framework\App\Action\Action +{ + protected $_resultPageFactory; + + public function __construct(Context $context, \Magento\Framework\View\Result\PageFactory $resultPageFactory) + { + $this->_resultPageFactory = $resultPageFactory; + parent::__construct($context); + } + + public function execute() + { + $resultPage = $this->_resultPageFactory->create(); + return $resultPage; + } +} \ No newline at end of file diff --git a/app/code/Magento/Messaging/view/frontend/layout/messaging_index_index.xml b/app/code/Magento/Messaging/view/frontend/layout/messaging_index_index.xml index 323932d2fcb..09125c78958 100644 --- a/app/code/Magento/Messaging/view/frontend/layout/messaging_index_index.xml +++ b/app/code/Magento/Messaging/view/frontend/layout/messaging_index_index.xml @@ -3,7 +3,7 @@ <title>Messaging</title> <css src="Magento_Messaging::css/chat.css" /> <script src="Magento_Messaging::js/chat.js" /> - <script src="Magento_Messaging::js/firebaselib.js"></script> + <script src="Magento_Messaging::js/firebaselib.js" /> <script src="Magento_Messaging::js/firebase.js" /> </head> <body> diff --git a/app/code/Magento/Messaging/view/frontend/layout/messaging_room_index.xml b/app/code/Magento/Messaging/view/frontend/layout/messaging_room_index.xml new file mode 100644 index 00000000000..5e80f411234 --- /dev/null +++ b/app/code/Magento/Messaging/view/frontend/layout/messaging_room_index.xml @@ -0,0 +1,14 @@ +<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd" layout="1column"> + <head> + <title>Messaging</title> + <css src="Magento_Messaging::css/chat.css" /> + <script src="Magento_Messaging::js/chat.js" /> + <script src="Magento_Messaging::js/firebaselib.js" /> + <script src="Magento_Messaging::js/firebase.js" /> + </head> + <body> + <referenceContainer name="content"> + <block class="Magento\Messaging\Block\Room" name="room" template="room.phtml" /> + </referenceContainer> + </body> +</page> \ No newline at end of file diff --git a/app/code/Magento/Messaging/view/frontend/templates/messaging.phtml b/app/code/Magento/Messaging/view/frontend/templates/messaging.phtml index 322023aedfe..d3afc5ee12d 100644 --- a/app/code/Magento/Messaging/view/frontend/templates/messaging.phtml +++ b/app/code/Magento/Messaging/view/frontend/templates/messaging.phtml @@ -17,7 +17,6 @@ var myFirebase = new Firebase('https://magentochat.firebaseio.com/'); require(['jquery'], function($) { $(document).ready(function() { - function init() { console.log("startListening"); myFirebase.on("child_added", function(snapshot) { var chatrooms = snapshot.val(); @@ -60,9 +59,6 @@ chatlist.insertBefore(chatroom_item, chatlist.childNodes[0]); } }); - } - - setTimeout(init, 2000); }); }); diff --git a/app/code/Magento/Messaging/view/frontend/templates/room.phtml b/app/code/Magento/Messaging/view/frontend/templates/room.phtml new file mode 100644 index 00000000000..de708689463 --- /dev/null +++ b/app/code/Magento/Messaging/view/frontend/templates/room.phtml @@ -0,0 +1,55 @@ +<div class="box"> + <div class = "chat-title"> + <span class="name">Person 1 Name</span> + </div> + <div class="chat-form" > + <div id="chatbox" class="chat-box"> + </div> + <div class="chat-input"> + <div> + <input id="sender" type="hidden" value="person1"> + <input id="receiver" type="hidden" value="person2"> + <input id="message" type="text" name="chattext" class="message-content"> + <input id="send" type="submit" class="send-button" onclick="send()"> + </div> + </div> + </div> +</div> +<script> + var myFirebase = new Firebase('https://magentochat.firebaseio.com/'); + require(['jquery'], function($) { + $(document).ready(function() { + myFirebase.on('child_added', function(snapshot) { + var msg = snapshot.val(); + if (((msg.sender=="person1")&&(msg.receiver=="person2"))||((msg.sender=="person2")&&(msg.receiver=="person1"))) { + var msgTextElement = document.createElement("p"); + msgTextElement.textContent = msg.message; + + if (msg.sender=="person1"){ + msgTextElement.classList.add('sendermessage'); + } else if (msg.sender=="person2") { + msgTextElement.classList.add('receivemessage'); + } else { + + } + var chatbox = document.getElementById("chatbox"); + chatbox.appendChild(msgTextElement); + chatbox.scrollTop=chatbox.scrollHeight; + } + + }); + }); + }); + function send() { + console.log("masuk"); + var sender = document.getElementById("sender").value; + var receiver = document.getElementById("receiver").value; + var message = document.getElementById("message").value; + myFirebase.push({ + sender: sender, + receiver: receiver, + message: message + }); + document.getElementById("message").value = ""; + } +</script> \ No newline at end of file -- GitLab