From f5b91b08f62e0e59a4a6c03aeee94313e9ba1439 Mon Sep 17 00:00:00 2001
From: sutantowilliam <willywilliamss97@gmail.com>
Date: Mon, 5 Feb 2018 23:26:11 +0700
Subject: [PATCH] message system front-end
---
MessageSystem/chat.css | 135 +++++++++++++++++++++++++++++++++++++
MessageSystem/chatlist.php | 59 ++++++++++++++++
MessageSystem/chatroom.php | 96 ++++++++++++++++++++++++++
3 files changed, 290 insertions(+)
create mode 100755 MessageSystem/chat.css
create mode 100644 MessageSystem/chatlist.php
create mode 100755 MessageSystem/chatroom.php
diff --git a/MessageSystem/chat.css b/MessageSystem/chat.css
new file mode 100755
index 00000000000..55ada76c3ac
--- /dev/null
+++ b/MessageSystem/chat.css
@@ -0,0 +1,135 @@
+body {
+ display: flex;
+ flex-flow: row wrap;
+ justify-content: center;
+}
+
+.box{
+ margin: 25px;
+ width: 500px;
+ height: 600px;
+ border: 1px solid black;
+ font-family: Helvetica;
+ position: relative;
+}
+
+.chat-title {
+ background: rgb(80, 74, 71);
+ padding: 10px;
+}
+.name {
+ color:white;
+ font-size: 30px;
+}
+
+
+
+.chat-box {
+ background: rgb(243, 248, 255);
+ height:452px;
+ padding-bottom: 50px;
+ /* height: auto; */
+ overflow: auto;
+}
+.chat-input {
+ /* border-style: solid;
+ border-width: 1px; */
+ width: 100%;
+ bottom:0px;
+ border-top: 1px solid black;
+ height: 40px;
+ position:absolute;
+ display: flex;
+ flex-flow: column;
+ background: white;
+}
+
+.sendermessage {
+ font-size: 15px;
+ /* border: 1px orangered solid; */
+ border-radius: 5px;
+ width:200px;
+ height: auto;
+ padding: 5px;
+ margin: 5px;
+ margin-left: 200px;
+ background-color: rgb(255, 178, 53);
+ float: right;
+}
+.receivemessage {
+
+ font-size: 15px;
+ border: 1px white;
+ border-radius: 5px;
+ width: 200px;
+ height: auto;
+ padding: 5px;
+ margin: 5px;
+ margin-right: 200px;
+ background-color: rgb(153, 224, 252);
+ float: left;
+}
+
+.send-button {
+ background: rgb(80, 74, 71);
+ color:white;
+ border:none;
+ outline: none;
+ /* border:rgb(80, 74, 71); */
+ float: right;
+ height: 100%;
+ width: 30%;
+}
+.send-button:hover {
+ cursor:pointer;
+ background: rgb(24, 22, 21);
+}
+.message-content {
+ font-size: 15px;
+ margin-left: 5px;
+ width:68%;
+ height: 100%;
+ border: none;
+ outline: none;
+}
+
+.chatroom-item {
+ background: rgb(255, 250, 237);
+ border: 1px solid rgb(128,128,128);
+ padding:10px;
+}
+
+.chatroom-username {
+ font-size: 20px;
+}
+
+.chatroom-lastmessage {
+ font-size: 15px;
+ color: rgb(128,128,128);
+}
+.chat-search {
+ padding: 0px;
+ margin:0px;
+ background: rgb(128,128,128);
+ height: 20px;
+ padding: 10px;
+ text-align: right;
+}
+.search-name {
+ font-size: 15px;
+ margin-bottom: 5px;
+}
+.search-button {
+ background: rgb(255, 178, 53);
+ color:white;
+ border:none;
+ outline: none;
+ font-size: 20px;
+}
+.search-button:hover {
+ cursor:pointer;
+ background: rgb(255,165,0);
+}
+form{
+ margin:0px;
+}
\ No newline at end of file
diff --git a/MessageSystem/chatlist.php b/MessageSystem/chatlist.php
new file mode 100644
index 00000000000..c1b0d141dc4
--- /dev/null
+++ b/MessageSystem/chatlist.php
@@ -0,0 +1,59 @@
+
+<html>
+<head>
+ <title>Title</title>
+ <script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
+ <script>
+ var chatlistbox = angular.module('chatlistbox',[]);
+ chatlistbox.controller('controller', ['$scope', function ($scope) {
+ $scope.chatrooms = [];
+ var room = new Object();
+ room.username = "Dewita Sonya";
+ room.lastmessage = "iya itu barangnya bagus banget, udah pake lama tetep awet";
+ $scope.chatrooms.push(room);
+ var room2 = new Object();
+ room2.username = "Mico mico";
+ room2.lastmessage = "micomicomico barangnya oke punya, ukuran juga pas";
+ $scope.chatrooms.push(room2);
+ var room3 = new Object();
+ room3.username = "Albertus Djauhari";
+ room3.lastmessage = "jangan dibel itumah barang palsu, kualitasnya jelek ";
+ $scope.chatrooms.push(room3);
+ var room4 = new Object();
+ room4.username = "William";
+ room4.lastmessage = "kskskso sajsa sakjsk as akjka dkjs kfasjfssak fjsaf";
+ $scope.chatrooms.push(room4);
+
+ }]);
+
+
+
+
+ </script>
+ <link rel="stylesheet" href="chat.css">
+</head>
+<body ng-app="chatlistbox" ng-controller="controller">
+<div class="box" >
+ <div class = "chat-title">
+ <span class="name">Chats</span>
+ </div>
+ <div class = "chat-search">
+ <form ng-submit="submit1()">
+ <input type="text" name="chattext" placeholder="Search name" class="search-name">
+ <input type="submit" name="search" value="Cari" class="search-button">
+ </form>
+ </div>
+ <div class="chat-list" ng-repeat="chatroom in chatrooms">
+ <div class="chatroom-item">
+ <div class="chatroom-username">
+ <span>{{chatroom.username}}</span>
+ <div class="chatroom-lastmessage">
+ <span>{{chatroom.lastmessage}}</span>
+ </div>
+ </div>
+ </div>
+</div>
+</body>
+</html>
+
diff --git a/MessageSystem/chatroom.php b/MessageSystem/chatroom.php
new file mode 100755
index 00000000000..59412fe8577
--- /dev/null
+++ b/MessageSystem/chatroom.php
@@ -0,0 +1,96 @@
+
+<html>
+<head>
+ <title>Title</title>
+ <script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
+ <script>
+
+ var chatbox1 = angular.module('chatbox',[]);
+ chatbox1.directive('scrollBottom', function () {
+ return {
+ scope: {
+ scrollBottom: "="
+ },
+ link: function (scope, element) {
+ scope.$watchCollection('scrollBottom', function (newValue) {
+ if (newValue) {
+ $(element).scrollTop($(element)[0].scrollHeight);
+ }
+ });
+ }
+ }
+ })
+ chatbox1.controller('controller', ['$scope', function ($scope) {
+ $scope.chat = [];
+ $scope.submit1 = function () {
+ if($scope.pesan1){
+ var msg = new Object();
+ msg.message = $scope.pesan1;
+ msg.type = 1;
+ $scope.chat.push(msg);
+ $scope.pesan1="";
+ }
+ };
+ $scope.submit2 = function () {
+ if($scope.pesan2){
+ var msg = new Object();
+ msg.message = $scope.pesan2;
+ msg.type = 2;
+ $scope.chat.push(msg);
+ $scope.pesan2="";
+ }
+ };
+
+
+ }]);
+
+
+
+
+ </script>
+ <link rel="stylesheet" href="chat.css">
+</head>
+<body ng-app="chatbox" ng-controller="controller">
+<div class="box" >
+ <div class = "chat-title">
+ <span class="name">Person 1 Name</span>
+ </div>
+ <div class="chat-form" >
+ <div class="chat-box" scroll-bottom="chat">
+ <div ng-repeat="pesan in chat" >
+ <p ng-if="pesan.type==1" class="sendermessage">{{pesan.message}}</p>
+ <p ng-if="pesan.type==2" class="receivemessage">{{pesan.message}}</p>
+ </div>
+ </div>
+ <div class="chat-input">
+ <form ng-submit="submit1()">
+ <input type="text" name="chattext" ng-model="pesan1" class="message-content">
+ <input type="submit" name="send" value="Kirim" class="send-button">
+ </form>
+ </div>
+ </div>
+</div>
+
+<div class="box">
+ <div class = "chat-title">
+ <span class="name">Person 2 Name</span>
+ </div>
+ <div class="chat-form">
+ <div class="chat-box" scroll-bottom="chat">
+ <div ng-repeat="pesan in chat">
+ <p ng-if="pesan.type==2" class="sendermessage">{{pesan.message}}</p>
+ <p ng-if="pesan.type==1" class="receivemessage">{{pesan.message}}</p>
+ </div>
+ </div>
+ <div class="chat-input">
+ <form ng-submit="submit2()">
+ <input type="text" name="chattext" ng-model="pesan2" class="message-content">
+ <input type="submit" name="send" value="Send" class="send-button">
+ </form>
+ </div>
+ </div>
+</div>
+</body>
+</html>
+
--
GitLab