Skip to content
Snippets Groups Projects
Commit 493f8688 authored by William Sutanto's avatar William Sutanto
Browse files

change chatlist.php firebase only javascript

parent 5bd0c17d
1 merge request!2Message System
Hide whitespace changes
Inline Side-by-side
MessageSystem/chatlist.php 100755 → 100644
+ 44
− 38
View file @ 493f8688
......@@ -2,58 +2,64 @@
<html>
<head>
<title>Title</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>
<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>
<script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>
<script src="firebase-conf.js"></script>
<link rel="stylesheet" href="chat.css">
</head>
<body ng-app="chatlistbox" ng-controller="controller">
<body >
<div class="box" >
<div class = "chat-title">
<span class="name">Chats</span>
</div>
<div class = "chat-search">
<form ng-submit="submit1()">
<form >
<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 id="chatlist" class="chat-list">
<!-- <div class="chatroom-item">
</div> -->
</div>
</div>
<script>
var startListening = function() {
console.log("startListening");
firebase.database().ref().on('child_added', function(snapshot) {
var chatrooms = snapshot.val();
if (chatrooms.sender=="person1"){
console.log("yeay");
var chatroom_item = document.createElement("div");
chatroom_item.classList.add('chatroom-item');
var chatroom_username = document.createElement("div");
chatroom_username.classList.add('chatroom-username');
var chatroom_lastmessage = document.createElement("div");
chatroom_lastmessage.classList.add('chatroom-lastmessage');
var chatroom_username_span = document.createElement("span");
chatroom_username_span.textContent = chatrooms.receiver;
chatroom_username.appendChild(chatroom_username_span);
var chatroom_lastmessage_span = document.createElement("span");
chatroom_lastmessage_span.textContent = chatrooms.message;
chatroom_lastmessage.appendChild(chatroom_lastmessage_span);
chatroom_item.appendChild(chatroom_username);
chatroom_item.appendChild(chatroom_lastmessage);
var chatlist = document.getElementById("chatlist");
chatlist.appendChild(chatroom_item);
}
});
}
startListening();
</script>
</body>
</html>
MessageSystem/chatroom.php
+ 22
− 11
View file @ 493f8688
......@@ -18,7 +18,8 @@
</div>
<div class="chat-input">
<div>
<input id="username" type="hidden" value="person1">
<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>
......@@ -26,6 +27,7 @@
</div>
</div>
<!-- Bagian ini cuma buat test front end, yang dipake yg atas aja -->
<!-- yang bawah emg ga diatur dgn benar cuma buat nambahan chat -->
<div class="box" >
<div class = "chat-title">
<span class="name">Person 1 Name</span>
......@@ -35,7 +37,8 @@
</div>
<div class="chat-input">
<div>
<input id="username2" type="hidden" value="person2">
<input id="sender2" type="hidden" value="person2">
<input id="receiver2" type="hidden" value="person1">
<input id="message2" type="text" name="chattext" class="message-content">
<input id="send2" type="submit" class="send-button" onclick="send2()">
</div>
......@@ -45,21 +48,25 @@
<script>
function send() {
console.log("masuk");
var username = document.getElementById("username").value;
var sender = document.getElementById("sender").value;
var receiver = document.getElementById("receiver").value;
var message = document.getElementById("message").value;
firebase.database().ref().push().set({
username: username,
sender: sender,
receiver: receiver,
message: message
});
document.getElementById("message").value = "";
}
function send2() {
console.log("masuk");
var username = document.getElementById("username2").value;
var message = document.getElementById("message2").value;
var sender2 = document.getElementById("sender2").value;
var receiver2 = document.getElementById("receiver2").value;
var message2 = document.getElementById("message2").value;
firebase.database().ref().push().set({
username: username,
message: message
sender: sender2,
receiver: receiver2,
message: message2
});
document.getElementById("message2").value = "";
}
......@@ -71,12 +78,16 @@
var msgTextElement = document.createElement("p");
msgTextElement.textContent = msg.message;
if (msg.username=="person1"){
if ((msg.sender=="person1")&&(msg.receiver=="person2")){
msgTextElement.classList.add('sendermessage');
} else {
} else if ((msg.sender=="person2")&&(msg.receiver=="person1")) {
msgTextElement.classList.add('receivemessage');
} else {
}
document.getElementById("chatbox").appendChild(msgTextElement);
var chatbox = document.getElementById("chatbox");
chatbox.appendChild(msgTextElement);
chatbox.scrollTop=chatbox.scrollHeight;
});
}
startListening();
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment